From 55190674318a227639c80d7cf2bf7b1a7b170c37 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:30:17 -0400
Subject: [PATCH] feat(footer): v2 footer styles (#10938)

* feat(footer): initial styles adjustments

* feat(footer): footer styles v2

* feat(footer): remove unused svg decorator

* feat(footer): style updates

* feat(footer): locale modal styles

* feat(footer): footer styles

* chore(footer): yarn format

* Update packages/styles/scss/components/footer/_footer-logo.scss

Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu>

* Update packages/styles/scss/components/footer/_footer.scss

Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu>

* Update packages/styles/scss/components/footer/_footer.scss

Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu>

* feat(footer): micro language only style fix

---------

Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu>
---
 docs/dotcom-v2-migration.md                   |   1 +
 .../icons/svg/IBM-8bar-logo--h65-white.svg    |   2 +-
 .../scss/components/footer/_footer-logo.scss  |   6 +-
 .../components/footer/_footer-nav-group.scss  |  21 +-
 .../scss/components/footer/_footer-nav.scss   |   7 +-
 .../scss/components/footer/_footer.scss       | 392 +++++++++++++++++-
 .../scss/components/footer/_legal-nav.scss    |  15 +-
 .../components/footer/_locale-button.scss     |  12 +-
 .../locale-modal/_locale-modal.scss           |  55 +--
 .../footer/__stories__/footer.stories.scss    |   2 +-
 .../src/components/footer/footer-composite.ts |   4 +-
 .../src/components/footer/footer-logo.ts      |  14 +-
 .../src/components/footer/footer.scss         | 383 -----------------
 .../src/components/footer/locale-button.ts    |   2 +-
 .../integration/footer/footer-micro.e2e.js    |   2 +-
 .../integration/footer/footer-short.e2e.js    | 102 ++---
 .../cypress/integration/footer/footer.e2e.js  |  90 ++--
 17 files changed, 571 insertions(+), 539 deletions(-)

diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index 9dbd9dc5d22..9164e47e804 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their
 | cta                       | View changes [here](#cta) |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components |
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components |
+| footer                    | No API changes. |
 | hr                        | View changes [here](#horizontal-rule)                      |
 | image                     | View changes [here](#image)            |
 | image-with-caption        | Replaced by `image`                    |
diff --git a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
index e5356c2af2c..5a237f87a5d 100644
--- a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
+++ b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
@@ -2,7 +2,7 @@
 <svg
   width="157"
   height="65"
-  class="bx--footer-logo__logo"
+  class="c4d--footer-logo__logo"
   viewBox="0 0 157 65"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss
index 1190a63e8c0..77f2ef025f6 100644
--- a/packages/styles/scss/components/footer/_footer-logo.scss
+++ b/packages/styles/scss/components/footer/_footer-logo.scss
@@ -39,9 +39,9 @@
     }
   }
 
-  .#{$prefix}--footer-logo__link {
+  .#{$c4d-prefix}--footer-logo__link {
     $logo-padding: math.div($grid-gutter, 2);
-    $logo-size: carbon--mini-units(16) + ($logo-padding * 2);
+    $logo-size: 8rem + ($logo-padding * 2);
 
     color: $text-on-color;
     padding-left: $logo-padding;
@@ -56,7 +56,7 @@
     }
   }
 
-  .#{$prefix}--footer-logo__logo {
+  .#{$c4d-prefix}--footer-logo__logo {
     fill: currentColor;
     display: inline-block;
     width: 128px;
diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss
index ac55d74bd20..4b98074e8b4 100644
--- a/packages/styles/scss/components/footer/_footer-nav-group.scss
+++ b/packages/styles/scss/components/footer/_footer-nav-group.scss
@@ -28,7 +28,7 @@
     display: block;
 
     &:last-child {
-      margin-bottom: carbon--mini-units(6);
+      margin-bottom: $spacing-09;
       border-bottom: 1px solid $layer-accent-01;
 
       @include breakpoint(md) {
@@ -39,6 +39,20 @@
     .#{$prefix}--accordion__content {
       padding-left: 0;
       padding-right: 0;
+
+      ul {
+        list-style: none;
+        padding-inline-start: 0;
+        margin: 0;
+      }
+    }
+
+    .#{$prefix}--accordion__title {
+      margin: 0 0 0 $spacing-05;
+    }
+
+    .#{$prefix}--accordion__arrow {
+      margin: 2px $spacing-05 0 0;
     }
 
     @include breakpoint(md) {
@@ -46,7 +60,7 @@
 
       padding-left: 0;
       display: inline-block;
-      margin-bottom: carbon--mini-units(6);
+      margin-bottom: $spacing-09;
 
       &.#{$prefix}--accordion__item {
         border-top: 0 transparent;
@@ -112,11 +126,12 @@
   @include breakpoint(md) {
     .#{$prefix}--footer-nav-group__title {
       display: block;
+      margin: 0;
     }
 
     :host(#{$c4d-prefix}-footer-nav-item),
     .#{$prefix}--footer-nav-group__item {
-      margin-top: carbon--mini-units(1);
+      margin-top: $spacing-03;
     }
   }
 }
diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss
index 9fa51fe3f03..9a40a3d3b39 100644
--- a/packages/styles/scss/components/footer/_footer-nav.scss
+++ b/packages/styles/scss/components/footer/_footer-nav.scss
@@ -22,8 +22,7 @@
 /// @group footer
 
 @mixin footer-nav {
-  :host(#{$c4d-prefix}-footer-nav),
-  .#{$prefix}--footer-nav {
+  :host(#{$c4d-prefix}-footer-nav) {
     @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
 
     @include accordion;
@@ -34,11 +33,11 @@
 
     @include breakpoint(md) {
       border-top: 1px solid $layer-accent-01;
-      padding: 0 list.slash($grid-gutter, 2);
+      padding: 0 calc($grid-gutter / 2);
     }
 
     @include breakpoint-between('md', $TEMP--breakpoint-down--lg) {
-      padding-top: carbon--mini-units(2);
+      padding-top: $spacing-04;
     }
 
     @include breakpoint(lg) {
diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
index 9c37327b6da..ff45ffb8397 100644
--- a/packages/styles/scss/components/footer/_footer.scss
+++ b/packages/styles/scss/components/footer/_footer.scss
@@ -11,8 +11,16 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/layout' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
+
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/combo-box';
+@use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/link';
 @use '../locale-modal';
 
 /// Footer styles
@@ -29,7 +37,7 @@
 
     color: $text-primary;
     background-color: $background;
-    padding-top: carbon--mini-units(6);
+    padding-top: $spacing-09;
 
     .#{$prefix}--modal-content {
       .#{$prefix}--link {
@@ -43,7 +51,11 @@
 
   :host(#{$c4d-prefix}-footer[size='short']),
   .#{$prefix}--footer--short {
-    padding-block: carbon--mini-units(4);
+    padding-block: $spacing-07;
+
+    .#{$prefix}--footer__logo-container {
+      width: 100%;
+    }
 
     .#{$prefix}--language-selector__container {
       margin-top: $spacing-09;
@@ -128,6 +140,7 @@
   }
 
   .#{$prefix}--footer__main {
+    box-sizing: border-box;
     @include make-container;
   }
 
@@ -147,15 +160,23 @@
   }
 
   .#{$prefix}--footer__logo-container {
-    width: 100%;
     @include make-container;
 
+    margin-right: 0;
+    margin-left: 0;
+
     @include breakpoint(md) {
       margin-bottom: 0;
       padding-left: $spacing-05;
       padding-right: $spacing-05;
     }
 
+    @include breakpoint(lg) {
+      width: 100%;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
     .#{$prefix}--footer__logo-row {
       @include make-row;
     }
@@ -177,4 +198,369 @@
       /* stylelint-enable declaration-no-important */
     }
   }
+
+  :host(#{$c4d-prefix}-footer),
+  :host(#{$c4d-prefix}-legal-nav) {
+    display: block;
+    .#{$prefix}--adjunct-links__container {
+      list-style: none;
+      padding: $spacing-09 0 $spacing-05 $spacing-05;
+      @include breakpoint-down(md) {
+        @include make-container;
+      }
+      .#{$prefix}--adjunct-links__row {
+        margin-right: 0;
+        @include make-row;
+        .#{$prefix}--adjunct-links__col {
+          ::slotted(#{$c4d-prefix}-legal-nav-item) {
+            padding-top: 0;
+            padding-bottom: $spacing-03;
+          }
+
+          @include make-col(4, 4);
+          @include breakpoint(md) {
+            @include make-col(4, 8);
+          }
+          @include breakpoint(lg) {
+            padding-right: $spacing-05;
+            @include make-col(4, 12);
+          }
+        }
+      }
+    }
+    .#{$prefix}--adjunct-links__container--hidden {
+      display: none;
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer).#{$prefix}--adjunct-links__container
+    .#{$prefix}--adjunct-links__row
+    .#{$prefix}--adjunct-links__col,
+  :host(cds-legal-nav)
+    .#{$prefix}--adjunct-links__container
+    .#{$prefix}--adjunct-links__row
+    .#{$prefix}--adjunct-links__col {
+    padding-right: $spacing-05;
+    @include breakpoint(md) {
+      padding-right: $spacing-07;
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group[open]) {
+    @extend .#{$prefix}--accordion__item--active;
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-item),
+  :host(#{$c4d-prefix}-legal-nav-item),
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
+    display: list-item;
+    outline: none;
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group[open]) .#{$prefix}--accordion__content {
+    display: block;
+    padding-top: 0;
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group) {
+    .#{$prefix}--accordion__heading {
+      border-top: 1px solid $border-subtle-01;
+      padding: 0;
+      align-items: center;
+      min-height: $spacing-09;
+    }
+  }
+
+  // The style of legal nav deviates from the one of React, so we can make the markup simpler.
+  // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
+  :host(#{$c4d-prefix}-legal-nav):not([size='micro']) {
+    .#{$prefix}--legal-nav__list {
+      padding-bottom: 0;
+      padding-top: 0;
+
+      @include breakpoint(md) {
+        padding-top: $spacing-03;
+      }
+      @include breakpoint(lg) {
+        @include make-col-offset(4, 16);
+      }
+
+      > ul {
+        width: 100%;
+        @include breakpoint(md) {
+          display: block;
+          column-count: 2;
+          column-gap: $grid-gutter;
+        }
+
+        @include breakpoint(lg) {
+          column-count: 3;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer[size='micro']) {
+    ::slotted(#{$c4d-prefix}-footer-nav),
+    ::slotted(#{$c4d-prefix}-footer-logo) {
+      display: none;
+    }
+  }
+
+  :host(#{$c4d-prefix}-legal-nav[size='micro']) {
+    ::slotted(#{$c4d-prefix}-legal-nav-item),
+    ::slotted(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      min-height: $spacing-09;
+    }
+
+    .#{$prefix}--adjunct-links__container {
+      display: none;
+    }
+
+    .#{$prefix}--legal-nav {
+      display: block;
+      border-top: 0;
+    }
+
+    // The style of legal nav deviates from the one of React, so we can make the markup simpler.
+    // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
+    .#{$prefix}--legal-nav__list {
+      width: 100%;
+
+      > ul {
+        border-top: 1px solid $border-subtle-01;
+        padding: 0 $spacing-05;
+
+        @include breakpoint(md) {
+          display: flex;
+          column-count: inherit;
+        }
+
+        @include breakpoint(lg) {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-locale-button[size='micro']) {
+    margin: 0;
+    flex-shrink: 1;
+    padding: 0;
+
+    @include breakpoint(md) {
+      margin-left: 50%;
+    }
+    @include breakpoint(lg) {
+      margin-left: 0;
+    }
+
+    .#{$prefix}--btn {
+      padding-top: $spacing-04;
+      padding-bottom: $spacing-04;
+    }
+
+    .#{$prefix}--locale-btn {
+      max-width: 100%;
+    }
+
+    .#{$prefix}--btn--tertiary {
+      background-color: $background;
+      margin: 0;
+      border: none;
+      @include type-style('body-short-01');
+      @include breakpoint(md) {
+        align-self: flex-end;
+        border-left: 1px solid $border-subtle-01;
+      }
+
+      @include breakpoint(lg) {
+        margin: 0 (-$spacing-05) 0 0;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: $background-hover;
+        color: $text-primary;
+      }
+
+      .#{$prefix}--btn--tertiary,
+      .#{$prefix}--list-box,
+      .#{$prefix}--select-input {
+        background-color: $background;
+        max-width: 100%;
+
+        &:hover {
+          background-color: $background-hover;
+        }
+
+        &:active {
+          background-color: $background-active;
+        }
+      }
+
+      .#{$prefix}--select {
+        max-width: 100%;
+      }
+
+      .#{$prefix}--text-input,
+      .#{$prefix}--list-box,
+      .#{$prefix}--select-input {
+        border-bottom: none;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop),
+  :host(#{$c4d-prefix}-language-selector-mobile) {
+    position: relative;
+    outline: none;
+    margin-top: $spacing-09;
+    margin-bottom: $spacing-09;
+    max-height: $spacing-09;
+    padding: 0 $spacing-05;
+    @include make-col(4, 4);
+
+    .#{$prefix}--list-box__field {
+      background-color: $layer-01;
+    }
+
+    .#{$prefix}--combo-box {
+      bottom: $spacing-05;
+    }
+
+    .#{$prefix}--list-box__menu {
+      position: absolute;
+      top: auto;
+      bottom: 47px;
+      max-height: 13.5rem;
+    }
+
+    .#{$prefix}--text-input {
+      @include type-style('body-short-01');
+      @include emit-layout-tokens();
+    }
+
+    @include breakpoint(md) {
+      margin-top: 0;
+      padding: 0;
+      @include make-col(4, 8);
+      @include make-col-offset(2, 8);
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
+      @include make-col-offset(10, 16);
+
+      order: 1;
+      min-width: 13.5rem;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop) {
+    .#{$prefix}--list-box__menu-icon {
+      right: $spacing-04;
+    }
+
+    .#{$prefix}--list-box__selection {
+      right: 2.25rem;
+    }
+
+    .#{$prefix}--label-visually-hidden {
+      visibility: hidden;
+      height: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop[size='micro']) {
+    margin: 0;
+    padding: 0;
+    border-left: 1px solid $border-subtle-01;
+    align-self: flex-end;
+    margin-bottom: 0;
+    width: 100%;
+
+    .#{$prefix}--dropdown {
+      background-color: $background;
+      max-height: $spacing-09;
+      height: $spacing-09;
+
+      .#{$prefix}--list-box__field {
+        height: inherit;
+        background-color: $background;
+      }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+    }
+
+    .#{$prefix}--list-box__menu {
+      bottom: rem($spacing-09);
+    }
+
+    .#{$prefix}--dropdown,
+    .#{$prefix}--text-input {
+      border-bottom: none;
+    }
+
+    @include breakpoint(sm) {
+      .#{$prefix}--select-input__wrapper {
+        height: 100%;
+      }
+
+      .#{$prefix}--select-input {
+        height: 100%;
+        background-color: $background;
+        border-bottom: none;
+
+        &:hover {
+          background-color: $background-hover;
+        }
+      }
+    }
+
+    @include breakpoint(md) {
+      max-width: 50%;
+      border-left: 1px solid $border-subtle-01;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-mobile[size='micro']) {
+    align-self: flex-end;
+    border-left: 1px solid $border-subtle-01;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    .#{$prefix}--select {
+      display: block;
+    }
+
+    .#{$prefix}--select-input {
+      height: 100%;
+      background-color: $background;
+      border-bottom: none;
+      width: 100%;
+      max-width: 100%;
+
+      &:hover {
+        background-color: $background-hover;
+      }
+    }
+
+    @include breakpoint(md) {
+      max-width: 50%;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-mobile) {
+    .#{$prefix}--select-input__wrapper {
+      height: $spacing-09;
+      margin-top: -#{$spacing-05};
+    }
+  }
 }
diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss
index 57b6ddb0b16..ea7dec3a164 100644
--- a/packages/styles/scss/components/footer/_legal-nav.scss
+++ b/packages/styles/scss/components/footer/_legal-nav.scss
@@ -19,8 +19,7 @@
 /// @group footer
 
 @mixin legal-nav {
-  :host(#{$c4d-prefix}-legal-nav),
-  .#{$prefix}--legal-nav__container {
+  :host(#{$c4d-prefix}-legal-nav) {
     @include make-container;
   }
 
@@ -39,6 +38,12 @@
     width: 100%;
     padding-left: $spacing-05;
 
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
     @include breakpoint(md) {
       border-top: 1px solid $layer-accent-01;
     }
@@ -187,12 +192,12 @@
   :host(#{$c4d-prefix}-legal-nav-item),
   :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder),
   .#{$prefix}--legal-nav__list-item {
-    margin-right: carbon--mini-units(4);
-    padding: carbon--mini-units(2) 0 0 0;
+    margin-right: $spacing-07;
+    padding: $spacing-05 0 0 0;
     @include type-style('body-01');
 
     @include breakpoint(md) {
-      padding: carbon--mini-units(1) 0 0 0;
+      padding: $spacing-03 0 0 0;
     }
 
     @include breakpoint-down(md) {
diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss
index 71b3099b96f..b646749220e 100644
--- a/packages/styles/scss/components/footer/_locale-button.scss
+++ b/packages/styles/scss/components/footer/_locale-button.scss
@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/layout' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -29,13 +30,20 @@
 
     margin: $spacing-09 0;
 
-    .#{$prefix}--locale-btn {
+    .#{$c4d-prefix}--locale-btn {
+      @include emit-layout-tokens();
+
       max-width: 100%;
       width: 100%;
       @include type-style('body-compact-01');
 
+      align-items: center;
+
+      // Forces the style of text + icon button style
+      padding-right: $spacing-04;
+
       @include breakpoint(md) {
-        min-width: carbon--mini-units(27);
+        min-width: 13.5rem;
       }
     }
 
diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss
index 9c3be81ad8a..de2e78cbd18 100644
--- a/packages/styles/scss/components/locale-modal/_locale-modal.scss
+++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss
@@ -23,7 +23,7 @@
 
 @mixin locale-modal {
   :host(#{$c4d-prefix}-locale-modal),
-  .#{$prefix}--locale-modal-container {
+  .#{$c4d-prefix}--locale-modal-container {
     @include theme(
       $white,
       feature-flag-enabled('enable-css-custom-properties')
@@ -35,23 +35,23 @@
       min-height: 80%;
 
       @media (max-height: rem(450px)) {
-        .#{$prefix}--locale-modal__filtering {
-          .#{$prefix}--locale-modal__filter {
+        .#{$c4d-prefix}--locale-modal__filtering {
+          .#{$c4d-prefix}--locale-modal__filter {
             overflow-y: initial;
 
-            .#{$prefix}--locale-modal__list {
+            .#{$c4d-prefix}--locale-modal__list {
               overflow-y: initial;
             }
           }
         }
 
-        .#{$prefix}--locale-modal__search {
+        .#{$c4d-prefix}--locale-modal__search {
           position: relative;
         }
       }
     }
 
-    .#{$prefix}--locale-modal {
+    .#{$c4d-prefix}--locale-modal {
       padding-left: $spacing-05;
       margin-bottom: $spacing-05;
       margin-top: $spacing-07;
@@ -64,12 +64,12 @@
       @include type-style(body-compact-02, true);
     }
 
-    .#{$prefix}--locale-modal__locales.#{$prefix}--locale-modal__locales-hidden {
+    .#{$c4d-prefix}--locale-modal__locales.#{$c4d-prefix}--locale-modal__locales-hidden {
       display: none;
     }
 
     button.#{$prefix}--modal-header__label,
-    .#{$prefix}--locale-modal__back .#{$prefix}--modal-header__label {
+    .#{$c4d-prefix}--locale-modal__back .#{$prefix}--modal-header__label {
       padding: 0;
       border: none;
       background-color: transparent;
@@ -92,7 +92,7 @@
       }
     }
 
-    .#{$prefix}--locale-modal__filter {
+    .#{$c4d-prefix}--locale-modal__filter {
       z-index: -1;
       opacity: 0;
       transform: translate3d(0, -24px, 0);
@@ -111,13 +111,13 @@
       display: flex;
       align-items: center;
 
-      .#{$prefix}--locale-modal__label-globe {
+      .#{$c4d-prefix}--locale-modal__label-globe {
         width: rem(20px);
         height: rem(20px);
         margin-left: $spacing-02;
       }
 
-      .#{$prefix}--locale-modal__label-arrow {
+      .#{$c4d-prefix}--locale-modal__label-arrow {
         margin-right: $spacing-03;
       }
 
@@ -139,6 +139,10 @@
       @include type-style('fluid-heading-03', true);
     }
   }
+
+  :host(#{$c4d-prefix}-locale-modal) {
+    @extend .#{$prefix}--modal;
+  }
 }
 
 :host(#{$prefix}-search) .#{$prefix}--search-input,
@@ -148,7 +152,7 @@
   }
 }
 
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__regions {
+.#{$c4d-prefix}--locale-modal-container .#{$c4d-prefix}--locale-modal__regions {
   width: 100%;
   margin-top: auto;
   > .#{$prefix}--row {
@@ -158,9 +162,9 @@
 }
 
 :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
-.#{$prefix}--locale-modal-container
-  .#{$prefix}--locale-modal__regions
-  .#{$prefix}--card {
+.#{$c4d-prefix}--locale-modal-container
+  .#{$c4d-prefix}--locale-modal__regions
+  .#{$c4d-prefix}--card {
   min-height: rem(184px);
   outline: 1px solid $layer-02;
   outline-offset: -1px;
@@ -188,7 +192,7 @@
 }
 
 :host(#{$c4d-prefix}-locale-item) a.#{$prefix}--link,
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__locales {
+.#{$c4d-prefix}--locale-modal-container .#{$c4d-prefix}--locale-modal__locales {
   text-decoration: none;
   border: $spacing-01 solid transparent;
   display: flex;
@@ -209,8 +213,8 @@
 }
 
 :host(#{$c4d-prefix}-locale-item),
-.#{$prefix}--locale-modal-container {
-  .#{$prefix}--locale-modal__locales__name {
+.#{$c4d-prefix}--locale-modal-container {
+  .#{$c4d-prefix}--locale-modal__locales__name {
     width: 50%;
     color: $text-helper;
     padding: $spacing-04 $spacing-05;
@@ -223,13 +227,14 @@
 }
 
 :host(#{$c4d-prefix}-locale-search),
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__filtering {
+.#{$c4d-prefix}--locale-modal-container
+  .#{$c4d-prefix}--locale-modal__filtering {
   display: flex;
   flex-direction: column;
   margin-top: $spacing-07;
   overflow: hidden;
 
-  .#{$prefix}--locale-modal__filter {
+  .#{$c4d-prefix}--locale-modal__filter {
     opacity: 1;
     z-index: 1;
     transform: translate3d(0, 0, 0);
@@ -240,7 +245,7 @@
     overflow: hidden;
   }
 
-  .#{$prefix}--locale-modal__regions {
+  .#{$c4d-prefix}--locale-modal__regions {
     visibility: hidden;
     z-index: -1;
     opacity: 0;
@@ -250,8 +255,8 @@
 }
 
 :host(#{$c4d-prefix}-locale-search),
-.#{$prefix}--locale-modal-container {
-  .#{$prefix}--locale-modal__search {
+.#{$c4d-prefix}--locale-modal-container {
+  .#{$c4d-prefix}--locale-modal__search {
     position: sticky;
     top: 0;
     background-color: $background;
@@ -262,14 +267,14 @@
     }
   }
 
-  .#{$prefix}--locale-modal__search-text {
+  .#{$c4d-prefix}--locale-modal__search-text {
     padding: $spacing-07 $spacing-05 $spacing-05;
     min-height: $spacing-09;
 
     @include type-style('label-02');
   }
 
-  .#{$prefix}--locale-modal__list {
+  .#{$c4d-prefix}--locale-modal__list {
     flex: 1;
     overflow-y: auto;
   }
diff --git a/packages/web-components/src/components/footer/__stories__/footer.stories.scss b/packages/web-components/src/components/footer/__stories__/footer.stories.scss
index 25fbc142311..e4368b2240e 100644
--- a/packages/web-components/src/components/footer/__stories__/footer.stories.scss
+++ b/packages/web-components/src/components/footer/__stories__/footer.stories.scss
@@ -9,7 +9,7 @@
 @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-cds-footer-container {
+c4d-footer-container {
   display: flex;
   align-items: flex-end;
   min-height: 100vh;
diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
index d41d79664d5..7adb00a03ef 100644
--- a/packages/web-components/src/components/footer/footer-composite.ts
+++ b/packages/web-components/src/components/footer/footer-composite.ts
@@ -298,10 +298,10 @@ class C4DFooterComposite extends MediaQueryMixin(
             clear-selection-label="${clearSelectionLabel}">
             ${langList?.map(
               (language) => html`
-                <bx-combo-box-item
+                <cds-combo-box-item
                   value="${ifDefined(language.text)}"
                   lang="${ifDefined(language.id)}"
-                  >${ifDefined(language.text)}</bx-combo-box-item
+                  >${ifDefined(language.text)}</cds-combo-box-item
                 >
               `
             )}
diff --git a/packages/web-components/src/components/footer/footer-logo.ts b/packages/web-components/src/components/footer/footer-logo.ts
index 437e3f45d66..730c3e52a08 100644
--- a/packages/web-components/src/components/footer/footer-logo.ts
+++ b/packages/web-components/src/components/footer/footer-logo.ts
@@ -7,7 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, svg } from 'lit';
+import { html, LitElement } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { property } from 'lit/decorators.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -17,7 +18,7 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix, stablePrefix: c4dPrefix } = settings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The IBM logo UI in footer.
@@ -42,15 +43,10 @@ class C4DFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
     const { href } = this;
     return html`
       <a
-        class="${prefix}--footer-logo__link"
+        class="${c4dPrefix}--footer-logo__link"
         aria-label="IBM logo"
         href="${ifDefined(href)}">
-        ${IBM8BarLogoH65White({
-          class: `${prefix}--footer-logo__logo`,
-          role: 'img',
-          'aria-labelledby': 'footer-logo',
-          children: svg`<title id="footer-logo">IBM Logo</title>`,
-        })}
+        ${unsafeSVG(IBM8BarLogoH65White)}
         <slot></slot>
       </a>
     `;
diff --git a/packages/web-components/src/components/footer/footer.scss b/packages/web-components/src/components/footer/footer.scss
index c5a06048428..de27e28943f 100644
--- a/packages/web-components/src/components/footer/footer.scss
+++ b/packages/web-components/src/components/footer/footer.scss
@@ -5,387 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/components/accordion';
-@use '@carbon/styles/scss/components/combo-box';
-@use '@carbon/styles/scss/components/select';
-@use '@carbon/styles/scss/components/form';
-@use '@carbon/styles/scss/components/text-input';
-@use '@carbon/styles/scss/components/link';
 @use '@carbon/ibmdotcom-styles/scss/components/footer';
-@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-footer),
-:host(#{$c4d-prefix}-legal-nav) {
-  display: block;
-  .#{$prefix}--adjunct-links__container {
-    list-style: none;
-    padding: $spacing-09 0 $spacing-05 $spacing-05;
-    @include breakpoint-down(md) {
-      @include make-container;
-    }
-    .#{$prefix}--adjunct-links__row {
-      margin-right: 0;
-      @include make-row;
-      .#{$prefix}--adjunct-links__col {
-        ::slotted(#{$c4d-prefix}-legal-nav-item) {
-          padding-top: 0;
-          padding-bottom: $spacing-03;
-        }
-
-        @include make-col(4, 4);
-        @include breakpoint(md) {
-          @include make-col(4, 8);
-        }
-        @include breakpoint(lg) {
-          padding-right: $spacing-05;
-          @include make-col(4, 12);
-        }
-      }
-    }
-  }
-  .#{$prefix}--adjunct-links__container--hidden {
-    display: none;
-  }
-}
-
-:host(#{$c4d-prefix}-footer).#{$prefix}--adjunct-links__container
-  .#{$prefix}--adjunct-links__row
-  .#{$prefix}--adjunct-links__col,
-:host(cds-legal-nav)
-  .#{$prefix}--adjunct-links__container
-  .#{$prefix}--adjunct-links__row
-  .#{$prefix}--adjunct-links__col {
-  padding-right: $spacing-05;
-  @include breakpoint(md) {
-    padding-right: $spacing-07;
-  }
-}
-
-:host(#{$c4d-prefix}-footer-nav-group[open]) {
-  @extend .#{$prefix}--accordion__item--active;
-}
-
-:host(#{$c4d-prefix}-footer-nav-item),
-:host(#{$c4d-prefix}-legal-nav-item),
-:host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
-  display: list-item;
-  outline: none;
-}
-
-:host(#{$c4d-prefix}-footer-nav-group[open]) .#{$prefix}--accordion__content {
-  display: block;
-  padding-top: 0;
-}
-
-:host(#{$c4d-prefix}-footer-nav-group) {
-  .#{$prefix}--accordion__heading {
-    border-top: 1px solid $border-subtle-01;
-    padding: 0;
-    align-items: center;
-    min-height: $spacing-09;
-  }
-}
-
-:host(#{$c4d-prefix}-locale-button) {
-  outline: none;
-
-  .#{$prefix}--btn {
-    // Forces the style of text + icon button style
-    padding-right: $spacing-04;
-  }
-}
-
-// The style of legal nav deviates from the one of React, so we can make the markup simpler.
-// FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
-:host(#{$c4d-prefix}-legal-nav):not([size='micro']) {
-  .#{$prefix}--legal-nav__list {
-    padding-bottom: 0;
-    padding-top: 0;
-
-    @include breakpoint(md) {
-      padding-top: carbon--mini-units(1);
-    }
-    @include breakpoint(lg) {
-      @include make-col-offset(4, 16);
-    }
-
-    > ul {
-      width: 100%;
-      padding-right: $spacing-05;
-      @include breakpoint(md) {
-        display: block;
-        column-count: 2;
-        column-gap: $grid-gutter;
-      }
-
-      @include breakpoint(lg) {
-        column-count: 3;
-      }
-    }
-  }
-}
-
-:host(#{$c4d-prefix}-footer[size='micro']) {
-  ::slotted(#{$c4d-prefix}-footer-nav),
-  ::slotted(#{$c4d-prefix}-footer-logo) {
-    display: none;
-  }
-}
-
-:host(#{$c4d-prefix}-legal-nav[size='micro']) {
-  ::slotted(#{$c4d-prefix}-legal-nav-item),
-  ::slotted(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    min-height: $spacing-09;
-  }
-
-  .#{$prefix}--adjunct-links__container {
-    display: none;
-  }
-
-  .#{$prefix}--legal-nav {
-    display: block;
-    border-top: 0;
-  }
-
-  // The style of legal nav deviates from the one of React, so we can make the markup simpler.
-  // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
-  .#{$prefix}--legal-nav__list {
-    width: 100%;
-
-    > ul {
-      border-top: 1px solid $border-subtle-01;
-      padding: 0 $spacing-05;
-
-      @include breakpoint(md) {
-        display: flex;
-        column-count: inherit;
-      }
-
-      @include breakpoint(lg) {
-        border-top: none;
-      }
-    }
-  }
-}
-
-:host(#{$c4d-prefix}-locale-button[size='micro']) {
-  margin: 0;
-  flex-shrink: 1;
-  padding: 0;
-
-  @include breakpoint(md) {
-    margin-left: 50%;
-  }
-  @include breakpoint(lg) {
-    margin-left: 0;
-  }
-
-  .#{$prefix}--btn {
-    padding-top: $spacing-04;
-    padding-bottom: $spacing-04;
-  }
-
-  .#{$prefix}--locale-btn {
-    max-width: 100%;
-  }
-
-  .#{$prefix}--btn--tertiary {
-    background-color: $background;
-    margin: 0;
-    border: none;
-    @include type-style('body-short-01');
-    @include breakpoint(md) {
-      align-self: flex-end;
-      border-left: 1px solid $border-subtle-01;
-    }
-
-    @include breakpoint(lg) {
-      margin: 0 (-$spacing-05) 0 0;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $background-hover;
-      color: $text-primary;
-    }
-
-    .#{$prefix}--btn--tertiary,
-    .#{$prefix}--list-box,
-    .#{$prefix}--select-input {
-      background-color: $background;
-      max-width: 100%;
-
-      &:hover {
-        background-color: $background-hover;
-      }
-
-      &:active {
-        background-color: $background-active;
-      }
-    }
-
-    .#{$prefix}--select {
-      max-width: 100%;
-    }
-
-    .#{$prefix}--text-input,
-    .#{$prefix}--list-box,
-    .#{$prefix}--select-input {
-      border-bottom: none;
-    }
-  }
-}
-
-:host(#{$c4d-prefix}-language-selector-desktop),
-:host(#{$c4d-prefix}-language-selector-mobile) {
-  position: relative;
-  outline: none;
-  margin-top: $spacing-09;
-  margin-bottom: $spacing-09;
-  max-height: $spacing-09;
-  padding: 0 $spacing-05;
-  @include make-col(4, 4);
-
-  .#{$prefix}--list-box__field {
-    background-color: $layer-01;
-  }
-
-  .#{$prefix}--combo-box {
-    bottom: $spacing-05;
-  }
-
-  .#{$prefix}--list-box__menu {
-    position: absolute;
-    top: auto;
-    bottom: rem(47px);
-    max-height: 13.5rem;
-  }
-
-  .#{$prefix}--text-input {
-    @include type-style('body-short-01');
-  }
-
-  @include breakpoint(md) {
-    margin-top: 0;
-    padding: 0;
-    @include make-col(4, 8);
-    @include make-col-offset(2, 8);
-  }
-
-  @include breakpoint(lg) {
-    @include make-col(4, 16);
-    @include make-col-offset(10, 16);
-
-    order: 1;
-    min-width: carbon--mini-units(27);
-  }
-}
-
-:host(#{$c4d-prefix}-language-selector-desktop) {
-  .#{$prefix}--list-box__menu-icon {
-    right: $spacing-04;
-  }
-
-  .#{$prefix}--list-box__selection {
-    right: 2.25rem;
-  }
-
-  .#{$prefix}--label-visually-hidden {
-    visibility: hidden;
-    height: 0;
-  }
-}
-
-:host(#{$c4d-prefix}-language-selector-desktop[size='micro']) {
-  margin: 0;
-  padding: 0;
-  border-left: 1px solid $border-subtle-01;
-  align-self: flex-end;
-  margin-bottom: 0;
-  width: 100%;
-
-  .#{$prefix}--dropdown {
-    background-color: $background;
-    max-height: $spacing-09;
-    height: $spacing-09;
-
-    .#{$prefix}--list-box__field {
-      height: inherit;
-      background-color: $background;
-    }
-
-    &:hover {
-      background-color: $background-hover;
-    }
-  }
-
-  .#{$prefix}--list-box__menu {
-    bottom: rem($spacing-09);
-  }
-
-  .#{$prefix}--dropdown,
-  .#{$prefix}--text-input {
-    border-bottom: none;
-  }
-
-  @include breakpoint(sm) {
-    .#{$prefix}--select-input__wrapper {
-      height: 100%;
-    }
-
-    .#{$prefix}--select-input {
-      height: 100%;
-      background-color: $background;
-      border-bottom: none;
-
-      &:hover {
-        background-color: $background-hover;
-      }
-    }
-  }
-
-  @include breakpoint(md) {
-    max-width: 50%;
-    border-left: 1px solid $border-subtle-01;
-  }
-}
-
-:host(#{$c4d-prefix}-language-selector-mobile[size='micro']) {
-  align-self: flex-end;
-  border-left: 1px solid $border-subtle-01;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-
-  .#{$prefix}--select-input {
-    height: 100%;
-    background-color: $background;
-    border-bottom: none;
-    width: 100%;
-    max-width: 100%;
-
-    &:hover {
-      background-color: $background-hover;
-    }
-  }
-
-  @include breakpoint(md) {
-    max-width: 50%;
-  }
-}
-
-:host(#{$c4d-prefix}-language-selector-mobile) {
-  .#{$prefix}--select-input__wrapper {
-    height: $spacing-09;
-    margin-top: -#{$spacing-05};
-  }
-}
diff --git a/packages/web-components/src/components/footer/locale-button.ts b/packages/web-components/src/components/footer/locale-button.ts
index 1a58e428d4d..76c19eff27a 100644
--- a/packages/web-components/src/components/footer/locale-button.ts
+++ b/packages/web-components/src/components/footer/locale-button.ts
@@ -50,7 +50,7 @@ class C4DLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
     return html`
       <button
         id="button"
-        class="${prefix}--btn ${prefix}--btn--tertiary ${prefix}--locale-btn"
+        class="${prefix}--btn ${prefix}--btn--tertiary ${c4dPrefix}--locale-btn"
         aria-label="${ifDefined(buttonLabel)}">
         <slot></slot>
         ${EarthFilled16()}
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
index dd5c00e015e..f7d79c4480d 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
@@ -92,7 +92,7 @@ describe('cds-footer | Micro language only (desktop)', () => {
       .find(`div.bx--dropdown`)
       .click();
     cy.get('cds-language-selector-desktop')
-      .find(`bx-combo-box-item[value="Arabic / عربية"]`)
+      .find(`cds-combo-box-item[value="Arabic / عربية"]`)
       .click();
     cy.get('cds-language-selector-desktop').should('have.value', 'Arabic / عربية');
 
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
index 4b279f70d02..b01454301f0 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
@@ -21,13 +21,13 @@ const _pathShort = '/iframe.html?id=components-footer--short';
  */
 const _pathShortLanguageOnly = '/iframe.html?id=components-footer--short-language-only';
 
-describe('cds-footer | Short (desktop)', () => {
+describe('c4d-footer | Short (desktop)', () => {
   beforeEach(() => {
     cy.visit(`${_pathShort}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -35,9 +35,9 @@ describe('cds-footer | Short (desktop)', () => {
   });
 
   it('should display clickable IBM logo', () => {
-    cy.get('cds-footer-logo')
+    cy.get('c4d-footer-logo')
       .shadow()
-      .find('a.bx--footer-logo__link')
+      .find('a.c4d--footer-logo__link')
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -47,30 +47,30 @@ describe('cds-footer | Short (desktop)', () => {
   });
 
   it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-modal').should('have.attr', 'open');
+    cy.get('c4d-locale-modal').should('have.attr', 'open');
 
-    cy.get('cds-regions > cds-region-item').should('have.length', 4);
+    cy.get('c4d-regions > c4d-region-item').should('have.length', 4);
 
     cy.takeSnapshots();
   });
 
   it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-regions')
-      .find('cds-region-item[name="Middle East and Africa"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Middle East and Africa"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-search')
-      .find('cds-locale-item')
+    cy.get('c4d-locale-search')
+      .find('c4d-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Middle East and Africa') {
           $locale.should('have.attr', 'hidden');
@@ -81,17 +81,17 @@ describe('cds-footer | Short (desktop)', () => {
   });
 
   it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-regions')
-      .find('cds-region-item[name="Americas"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Americas"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-search')
+    cy.get('c4d-locale-search')
       .find('cds-search')
       .shadow()
       .find('input')
@@ -105,8 +105,8 @@ describe('cds-footer | Short (desktop)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('cds-legal-nav')
-      .find('cds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -116,41 +116,41 @@ describe('cds-footer | Short (desktop)', () => {
   });
 });
 
-describe('cds-footer | Short language only (desktop)', () => {
+describe('c4d-footer | Short language only (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathShortLanguageOnly}`);
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('cds-language-selector-desktop').should('have.length', 1);
-    cy.get('cds-language-selector-desktop')
+    cy.get('c4d-language-selector-desktop').should('have.length', 1);
+    cy.get('c4d-language-selector-desktop')
       .shadow()
-      .find(`div.bx--dropdown`)
+      .find(`div.cds--dropdown`)
       .click();
-    cy.get('cds-language-selector-desktop')
-      .find(`bx-combo-box-item[value="Arabic / عربية"]`)
+    cy.get('c4d-language-selector-desktop')
+      .find(`cds-combo-box-item[value="Arabic / عربية"]`)
       .click();
-    cy.get('cds-language-selector-desktop').should('have.value', 'Arabic / عربية');
+    cy.get('c4d-language-selector-desktop').should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots();
   });
 });
 
-describe('cds-footer | Short (mobile)', () => {
+describe('c4d-footer | Short (mobile)', () => {
   beforeEach(() => {
     cy.visit(`${_pathShort}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should display clickable IBM logo', () => {
-    cy.get('cds-footer-logo')
+    cy.get('c4d-footer-logo')
       .shadow()
-      .find('a.bx--footer-logo__link')
+      .find('a.c4d--footer-logo__link')
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -160,30 +160,30 @@ describe('cds-footer | Short (mobile)', () => {
   });
 
   it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-modal').should('have.attr', 'open');
+    cy.get('c4d-locale-modal').should('have.attr', 'open');
 
-    cy.get('cds-regions > cds-region-item').should('have.length', 4);
+    cy.get('c4d-regions > c4d-region-item').should('have.length', 4);
 
     cy.takeSnapshots('mobile');
   });
 
   it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-regions')
-      .find('cds-region-item[name="Middle East and Africa"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Middle East and Africa"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-search')
-      .find('cds-locale-item')
+    cy.get('c4d-locale-search')
+      .find('c4d-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Middle East and Africa') {
           $locale.should('have.attr', 'hidden');
@@ -194,17 +194,17 @@ describe('cds-footer | Short (mobile)', () => {
   });
 
   it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('cds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('cds-regions')
-      .find('cds-region-item[name="Americas"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Americas"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('cds-locale-search')
+    cy.get('c4d-locale-search')
       .find('cds-search')
       .shadow()
       .find('input')
@@ -218,8 +218,8 @@ describe('cds-footer | Short (mobile)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('cds-legal-nav')
-      .find('cds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -229,23 +229,23 @@ describe('cds-footer | Short (mobile)', () => {
   });
 });
 
-describe('cds-footer | Short language only (mobile)', () => {
+describe('c4d-footer | Short language only (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathShortLanguageOnly}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('cds-language-selector-mobile').should('have.length', 1);
-    cy.get('cds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile').should('have.length', 1);
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find(`select.bx--select-input`)
+      .find(`select.cds--select-input`)
       .select('Arabic / عربية');
-    cy.get('cds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find(`select.bx--select-input`)
+      .find(`select.cds--select-input`)
       .should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots('mobile');
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
index cb04b445b51..a5cae5f3e0a 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
@@ -21,13 +21,13 @@ const _pathDefault = '/iframe.html?id=components-footer--default';
  */
 const _pathDefaultLanguageOnly = '/iframe.html?id=components-footer--default-language-only';
 
-describe('cds-footer | default (desktop)', () => {
+describe('c4d-footer | default (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -35,44 +35,44 @@ describe('cds-footer | default (desktop)', () => {
   });
 
   it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="cds--footer-logo"]').then($link => {
+    cy.get('[data-autoid="c4d--footer-logo"]').then($link => {
       const url = $link.prop('href');
       expect(url).not.to.be.empty;
     });
   });
 
   it('should load locale modal', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.screenshot();
   });
 
   it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
-    cy.get('cds-region-item[name="Americas"]').click();
+    cy.get('c4d-region-item[name="Americas"]').click();
 
-    cy.get('cds-locale-item[region="Americas"]').should('have.length', 35);
+    cy.get('c4d-locale-item[region="Americas"]').should('have.length', 35);
 
     cy.takeSnapshots();
   });
 
   it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.get('[name="Americas"]').click();
 
-    cy.get('cds-locale-search')
+    cy.get('c4d-locale-search')
       .shadow()
-      .find('.bx--search-input')
+      .find('.cds--search-input')
       .type('ca', {
         force: true,
       });
 
-    cy.get('cds-locale-item:not([hidden])')
+    cy.get('c4d-locale-item:not([hidden])')
       .invoke('attr', 'country')
       .should('eq', 'Canada');
 
@@ -80,8 +80,8 @@ describe('cds-footer | default (desktop)', () => {
   });
 
   it('should load clickable footer links', () => {
-    cy.get('cds-footer-nav-group')
-      .find('cds-footer-nav-item')
+    cy.get('c4d-footer-nav-group')
+      .find('c4d-footer-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -91,8 +91,8 @@ describe('cds-footer | default (desktop)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('cds-legal-nav')
-      .find('cds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -102,13 +102,13 @@ describe('cds-footer | default (desktop)', () => {
   });
 });
 
-describe('cds-footer | Default language only (desktop)', () => {
+describe('c4d-footer | Default language only (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefaultLanguageOnly}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -116,71 +116,71 @@ describe('cds-footer | Default language only (desktop)', () => {
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('cds-language-selector-desktop').should('have.length', 1);
+    cy.get('c4d-language-selector-desktop').should('have.length', 1);
 
     // FIXME: Firefox is not providing the space above for this test to pass
     if (Cypress.browser.name !== 'firefox') {
-      cy.get('cds-language-selector-desktop')
+      cy.get('c4d-language-selector-desktop')
         .shadow()
-        .find('div.bx--dropdown')
+        .find('div.cds--dropdown')
         .click();
-      cy.get('cds-language-selector-desktop')
-        .find('bx-combo-box-item[value="Arabic / عربية"]')
+      cy.get('c4d-language-selector-desktop')
+        .find('cds-combo-box-item[value="Arabic / عربية"]')
         .click();
-      cy.get('cds-language-selector-desktop').should('have.value', 'Arabic / عربية');
+      cy.get('c4d-language-selector-desktop').should('have.value', 'Arabic / عربية');
     }
 
     cy.takeSnapshots();
   });
 });
 
-describe('cds-footer | default (mobile)', () => {
+describe('c4d-footer | default (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="cds--footer-logo"]').then($link => {
+    cy.get('[data-autoid="c4d--footer-logo"]').then($link => {
       const url = $link.prop('href');
       expect(url).not.to.be.empty;
     });
   });
 
   it('should load locale modal', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.screenshot();
   });
 
   it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
-    cy.get('cds-region-item[name="Americas"]').click();
+    cy.get('c4d-region-item[name="Americas"]').click();
 
-    cy.get('cds-locale-item[region="Americas"]').should('have.length', 35);
+    cy.get('c4d-locale-item[region="Americas"]').should('have.length', 35);
 
     cy.takeSnapshots();
   });
 
   it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get('[data-autoid="cds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.get('[name="Americas"]').click();
 
-    cy.get('cds-locale-search')
+    cy.get('c4d-locale-search')
       .shadow()
-      .find('.bx--search-input')
+      .find('.cds--search-input')
       .type('ca', {
         force: true,
       });
 
-    cy.get('cds-locale-item:not([hidden])')
+    cy.get('c4d-locale-item:not([hidden])')
       .invoke('attr', 'country')
       .should('eq', 'Canada');
 
@@ -188,8 +188,8 @@ describe('cds-footer | default (mobile)', () => {
   });
 
   it('should load clickable footer links', () => {
-    cy.get('cds-footer-nav-group')
-      .find('cds-footer-nav-item')
+    cy.get('c4d-footer-nav-group')
+      .find('c4d-footer-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -199,8 +199,8 @@ describe('cds-footer | default (mobile)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('cds-legal-nav')
-      .find('cds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -210,23 +210,23 @@ describe('cds-footer | default (mobile)', () => {
   });
 });
 
-describe('cds-footer | Default language only (mobile)', () => {
+describe('c4d-footer | Default language only (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefaultLanguageOnly}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('cds-language-selector-mobile').should('have.length', 1);
-    cy.get('cds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile').should('have.length', 1);
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find('select.bx--select-input')
+      .find('select.cds--select-input')
       .select('Arabic / عربية');
-    cy.get('cds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find('select.bx--select-input')
+      .find('select.cds--select-input')
       .should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots('mobile');