Merge 03e56ae into main

carbon-design-system · Feb 20, 2024 · 5be60ec · 5be60ec
2 parents 4bb4555 + 03e56ae
commit 5be60ec
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 8 deletions.
diff --git a/packages/carbon-web-components/.storybook/manager-head.html b/packages/carbon-web-components/.storybook/manager-head.html
@@ -24,3 +24,31 @@
 <script>
   document.title = 'Carbon Web Components';
 </script>
+
+<footer>
+  <c4d-footer-container disable-locale-button="true" size="micro" />
+</footer>
+
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/latest/footer.min.js"></script>
+
+<style type="text/css">
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99999;
+  }
+
+  #root > div {
+    height: calc(100vh - 48px);
+  }
+
+  /* This style is required because of the compliance footer in smaller screens */
+  @media (max-width: 738px) {
+    #root > div {
+      height: calc(100vh - 361px);
+    }
+  }
+</style>
diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 
@@ -70,7 +71,7 @@
 
     .#{$c4d-prefix}--footer-logo__link {
       position: absolute;
-      inset-block-start: -37px;
+      inset-block-start: to-rem(-35.5px);
 
       @include breakpoint(lg) {
         position: relative;
@@ -81,4 +82,16 @@
     align-self: center;
     margin: 0;
   }
+
+  @include breakpoint-between(md, lg) {
+    :host(#{$c4d-prefix}-footer-logo[size='micro'][disable-locale-button]) {
+      background-color: $background;
+      block-size: $spacing-09;
+      inline-size: 100%;
+
+      .#{$c4d-prefix}--footer-logo__link {
+        inset-block-start: to-rem(12.5px);
+      }
+    }
+  }
 }
diff --git a/packages/web-components/.storybook/manager-head.html b/packages/web-components/.storybook/manager-head.html
@@ -9,20 +9,33 @@
 
 <meta
   name="keywords"
-  content="ibm.com, design, system, design system, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements"
-/>
-<meta name="description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />
+  content="ibm.com, design, system, design system, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements" />
+<meta
+  name="description"
+  content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />
 
 <!-- Open Graph -->
 <meta property="og:title" content="Carbon for IBM.com Web Components" />
 <meta property="og:site_name" content="Carbon for IBM.com Web Components" />
-<meta property="og:description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />
-<meta property="og:image" content="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/i/carbon-for-ibmcom-wc.png" />
+<meta
+  property="og:description"
+  content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />
+<meta
+  property="og:image"
+  content="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/i/carbon-for-ibmcom-wc.png" />
 <!-- Storybook override -->
 <script>
   document.title = 'Carbon for IBM.com Web Components';
 </script>
 
+<footer>
+  <c4d-footer-container disable-locale-button="true" size="micro" />
+</footer>
+
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/latest/footer.min.js"></script>
+
 <!-- Minimum setting to use IBM Plex font -->
 <style type="text/css">
   @font-face {
@@ -44,4 +57,22 @@
         format('woff');
     font-display: auto;
   }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99999;
+  }
+
+  #root > div {
+    height: calc(100vh - 48px);
+  }
+
+  /* This style is required because of the compliance footer in smaller screens */
+  @media (max-width: 738px) {
+    #root > div {
+      height: calc(100vh - 361px);
+    }
+  }
 </style>
diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
@@ -407,7 +407,9 @@ class C4DFooterComposite extends MediaQueryMixin(
         <c4d-legal-nav
           size="${ifDefined(size)}"
           navLabel="${ifDefined(navLabel)}">
-          <c4d-footer-logo size="${ifDefined(size)}"></c4d-footer-logo>
+          <c4d-footer-logo
+            size="${ifDefined(size)}"
+            ?disable-locale-button="${disableLocaleButton}"></c4d-footer-logo>
           ${legalLinks?.map(
             ({ title, url, titleEnglish }) => html`
               <c4d-legal-nav-item