Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/content-item-v2

ariellalgilmore · Oct 30, 2023 · 14e5ff0 · 14e5ff0
2 parents 407d69b + 7943e5b
commit 14e5ff0
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 44 deletions.
diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
@@ -28,8 +28,7 @@
 /// @group footer
 
 @mixin footer {
-  :host(#{$c4d-prefix}-footer),
-  .#{$prefix}--footer {
+  :host(#{$c4d-prefix}-footer) {
     width: 100%;
     padding-block: $spacing-09;
 
@@ -49,8 +48,14 @@
     }
   }
 
-  :host(#{$c4d-prefix}-footer[size='short']),
-  .#{$prefix}--footer--short {
+  :host(#{$c4d-prefix}-footer[disable-locale-button])
+    .#{$prefix}--footer__main-container {
+    @include breakpoint(lg) {
+      flex-flow: nowrap;
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer[size='short']) {
     padding-block: $spacing-07;
 
     .#{$prefix}--footer__logo-container {
@@ -68,8 +73,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-footer[size='micro']),
-  .#{$prefix}--footer--micro {
+  :host(#{$c4d-prefix}-footer[size='micro']) {
     padding-top: 0;
     padding-bottom: 0;
 
@@ -95,8 +99,7 @@
 
   :host(#{$c4d-prefix}-footer-nav-item),
   :host(#{$c4d-prefix}-legal-nav-item),
-  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder),
-  .#{$prefix}--footer {
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
     @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
 
     .#{$prefix}--footer__link.#{$prefix}--link {
@@ -122,8 +125,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-legal-nav),
-  .#{$prefix}--footer {
+  :host(#{$c4d-prefix}-legal-nav) {
     @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
 
     .#{$prefix}--legal-nav__list {
@@ -185,6 +187,7 @@
   .#{$prefix}--footer__locale-button--disabled {
     @include make-col(2, 16);
 
+    flex: auto;
     margin-left: 0;
     margin-right: 0;
   }

diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js b/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js
@@ -9,7 +9,6 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
 import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
 import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
@@ -23,8 +22,8 @@ const App = () => (
     <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
     <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
     <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
-    <C4DCalloutLinkWithIcon slot="footer" href="https://example.com">
-      Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
+    <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+      Link with icon
     </C4DCalloutLinkWithIcon>
   </C4DCalloutQuote>
 );

diff --git a/...eb-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/...eb-components/src/components/callout-quote/__stories__/README.stories.react.mdx
@@ -22,7 +22,6 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
 import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
 import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
@@ -36,8 +35,8 @@ function App() {
       <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
       <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
-      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
+      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+        Link with icon
       </C4DCalloutLinkWithIcon>
     </C4DCalloutQuote>
   );

diff --git a/...s/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx b/...s/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
@@ -9,7 +9,6 @@
 
 import React from 'react';
 import { select } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
@@ -49,8 +48,8 @@ export const Default = args => {
       <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
       <C4DQuoteSourceBottomCopy>{sourceBottomCopy}</C4DQuoteSourceBottomCopy>
-      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
+      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+        Link with icon
       </C4DCalloutLinkWithIcon>
     </C4DCalloutQuote>
   );

diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -9,7 +9,6 @@
 
 import '../index';
 import '../callout-link-with-icon';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { QUOTE_TYPES } from '../../quote/quote';
@@ -52,8 +51,11 @@ export const Default = (args) => {
       <c4d-quote-source-bottom-copy>
         ${sourceBottomCopy}
       </c4d-quote-source-bottom-copy>
-      <c4d-callout-link-with-icon slot="footer" href="https://example.com">
-        Link with icon ${ArrowRight20({ slot: 'icon' })}
+      <c4d-callout-link-with-icon
+        slot="footer"
+        href="https://example.com"
+        cta-type="local">
+        Link with icon
       </c4d-callout-link-with-icon>
     </c4d-callout-quote>
   `;

diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
@@ -355,8 +355,8 @@ export const tocContent = (
       <C4DQuoteSourceHeading>Lorem ipsum dolor sit amet</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>consectetur adipiscing elit</C4DQuoteSourceCopy>
       <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
-      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with Icon <ArrowRight20 slot="icon" />
+      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+        Link with Icon
       </C4DCalloutLinkWithIcon>
     </C4DCalloutQuote>
 
@@ -532,8 +532,8 @@ export const StoryContentNoToC = () => (
         </C4DQuoteSourceHeading>
         <C4DQuoteSourceCopy>consectetur adipiscing elit</C4DQuoteSourceCopy>
         <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
-        <C4DCalloutLinkWithIcon slot="footer" href="https://example.com">
-          Link with Icon <ArrowRight20 slot="icon" />
+        <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+          Link with Icon
         </C4DCalloutLinkWithIcon>
       </C4DCalloutQuote>
 

diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
@@ -205,9 +205,9 @@ export const contentLeadspaceSearch = html`
 
 export const tocContent = html`
   <a name="1" data-title="Lorem ipsum dolor sit amet"></a>
-  <c4d-leadspace-block>
-    <c4d-leadspace-block-heading
-      >Lorem ipsum dolor sit amet</c4d-leadspace-block-heading
+  <c4d-leadspace-block border>
+    <c4d-leadspace-heading
+      >Lorem ipsum dolor sit amet</c4d-leadspace-heading
     >
     <c4d-leadspace-block-content>
       <c4d-content-block-copy slot="copy"
@@ -275,7 +275,7 @@ export const tocContent = html`
   </c4d-content-block-segmented>
 
   <c4d-callout-with-media>
-    <c4d-content-block-heading slot="heading"
+    <c4d-content-block-heading
       >Mauris ultrices eros in cursus</c4d-content-block-heading
     >
     <c4d-callout-with-media-copy size="sm"
@@ -329,8 +329,8 @@ export const tocContent = html`
     </c4d-quote-source-heading>
     <c4d-quote-source-copy> consectetur adipiscing elit </c4d-quote-source-copy>
     <c4d-quote-source-bottom-copy> IBM Cloud </c4d-quote-source-bottom-copy>
-    <c4d-callout-link-with-icon slot="footer" href="https://example.com">
-      Link with Icon ${ArrowRight20({ slot: 'icon' })}
+    <c4d-callout-link-with-icon slot="footer" href="https://example.com" cta-type="local">
+      Link with Icon
     </c4d-callout-link-with-icon>
   </c4d-callout-quote>
 
@@ -529,8 +529,11 @@ export const StoryContentNoToC = () =>
           <c4d-quote-source-bottom-copy>
             IBM Cloud
           </c4d-quote-source-bottom-copy>
-          <c4d-callout-link-with-icon slot="footer" href="https://example.com">
-            Link with Icon ${ArrowRight20({ slot: 'icon' })}
+          <c4d-callout-link-with-icon
+            slot="footer"
+            href="https://example.com"
+            cta-type="local">
+            Link with Icon
           </c4d-callout-link-with-icon>
         </c4d-callout-quote>
 

diff --git a/...eb-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss b/...eb-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss
@@ -6,24 +6,24 @@
  */
 
 /* stylelint-disable selector-type-no-unknown, selector-pseudo-element-no-unknown */
-cds-logo-grid-item,
-cds-card-group-item,
-cds-cta-section-item {
+c4d-logo-grid-item,
+c4d-card-group-item,
+c4d-cta-section-item {
   &:nth-of-type(3n) {
-    --cds--fade-in-out-delay: 0;
+    --c4d--fade-in-out-delay: 0;
   }
   &:nth-of-type(3n + 1) {
-    --cds--fade-in-out-delay: 250ms;
+    --c4d--fade-in-out-delay: 250ms;
   }
   &:nth-of-type(3n + 2) {
-    --cds--fade-in-out-delay: 500ms;
+    --c4d--fade-in-out-delay: 500ms;
   }
   &:nth-of-type(3n + 3) {
-    --cds--fade-in-out-delay: 750ms;
+    --c4d--fade-in-out-delay: 750ms;
   }
 }
 
-cds-table-of-contents::part(table) {
+c4d-table-of-contents::part(table) {
   top: 0;
 }
 /* stylelint-enable selector-type-no-unknown, selector-pseudo-element-no-unknown */
diff --git a/.../web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts b/.../web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
@@ -8,7 +8,7 @@
  */
 
 import { html } from 'lit';
-import fadeStyles from '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+import fadeStyles from '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_index.scss';
 import fadeOptions from './scroll-animations.stories.scss';
 import '../scroll-animations';
 import readme from './README.stories.mdx';

diff --git a/packages/web-components/src/components/scroll-animations/scroll-animations.ts b/packages/web-components/src/components/scroll-animations/scroll-animations.ts
@@ -28,7 +28,7 @@ const colSpan = 3;
  * Function component that handles fade or slide transition for selected elements.
  *
  * @example
- * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+ * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_index.scss';
  * import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/scroll-animations.js';
  *
  * As an example, the function can be called to target all instances of the