Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/button-group-v2

ariellalgilmore · Sep 15, 2023 · c2e0a67 · c2e0a67
2 parents 2c02805 + f46db89
commit c2e0a67
Show file tree

Hide file tree

Showing 164 changed files with 664 additions and 817 deletions.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -679,124 +679,63 @@
 
     &[pictogram-placement='top'] .#{$prefix}--card,
     &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          padding-top: 0;
-
-          @include breakpoint(md) {
-            /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-            overflow: hidden;
-            max-width: calc(100% - #{$spacing-10});
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-            transition: all $duration-moderate-01 motion(standard, productive)
-              0.25s;
-          }
-        }
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: 0;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-left: 0;
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-left: 0;
+      }
 
-        .#{$prefix}--card__content {
-          position: relative;
-        }
+      .#{$prefix}--card__content {
+        position: relative;
+      }
 
-        .#{$prefix}--card__copy {
-          margin-top: $spacing-07;
-          margin-bottom: 0;
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+        margin-bottom: 0;
 
-          @include breakpoint(md) {
-            margin-top: 0;
-            visibility: hidden;
-            opacity: 0;
-            transform: translate3d(0, -16px, 0);
-            transition: all $duration-moderate-01 motion(standard, productive);
-          }
+        &[hidden] {
+          margin: 0;
         }
       }
 
-      &:hover,
-      &:focus {
-        .#{$prefix}--card__motion {
-          ::slotted(#{$c4d-prefix}-card-heading) {
-            @include breakpoint(md) {
-              opacity: 0;
-              transform: translate3d(0, $spacing-05, 0);
-              transition-delay: 0s;
-            }
-          }
-
-          .#{$prefix}--card__copy {
-            @include breakpoint(md) {
-              display: block;
-              overflow: hidden;
-              visibility: visible;
-              opacity: 1;
-              transform: translate3d(0, 0, 0);
-              transition-delay: 0.2s;
-            }
-          }
-        }
+      svg {
+        position: absolute;
+        right: $spacing-05;
+        bottom: $spacing-05;
+        color: $link-primary;
       }
     }
 
     &[pictogram-placement='top'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-end;
-          margin-bottom: 0;
-          margin-top: auto;
-
-          @include breakpoint(md) {
-            position: absolute;
-            bottom: $spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          @include breakpoint(md) {
-            margin-top: auto;
-          }
-        }
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-end;
+        margin-bottom: 0;
+        margin-top: auto;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-bottom: $spacing-10;
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+      }
 
-          @include breakpoint(md) {
-            margin-bottom: $spacing-07;
-          }
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-bottom: $spacing-07;
       }
     }
 
     &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$c4d-prefix}-card-heading) {
-          align-items: flex-start;
-
-          @include breakpoint(md) {
-            position: absolute;
-            top: $spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          margin-bottom: $spacing-10;
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-start;
+      }
 
-          @include breakpoint(md) {
-            margin-bottom: $spacing-07;
-          }
-        }
+      .#{$prefix}--card__copy {
+        margin-bottom: $spacing-07;
+      }
 
-        ::slotted(svg[slot='pictogram']) {
-          margin-top: auto;
-          align-items: flex-end;
-        }
+      ::slotted(svg[slot='pictogram']) {
+        margin-top: auto;
+        align-items: flex-end;
       }
     }
 

diff --git a/...ges/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js b/...ges/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js
@@ -20,9 +20,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4">
         <C4DCardSectionSimple>
           <C4DContentSectionHeading>Aliquam condimentum interdum</C4DContentSectionHeading>
           <C4DCardGroup>

diff --git a/...ges/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js b/...ges/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js
@@ -20,9 +20,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
         <C4DContentBlockCards>
           <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
           <C4DCardGroup>

diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <title>carbon-web-components example with React</title>
   </head>
   <body>

diff --git a/...ges/web-components/examples/codesandbox/components-react/content-block-media/src/index.js b/...ges/web-components/examples/codesandbox/components-react/content-block-media/src/index.js
@@ -25,9 +25,9 @@ import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-rea
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
         <C4DContentBlockMedia>
           <C4DContentBlockHeading>Curabitur malesuada varius mi eu posuere</C4DContentBlockHeading>
           <C4DContentBlockCopy size="lg">

diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <title>carbon-web-components example with React</title>
   </head>
   <body>

diff --git a/...ges/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js b/...ges/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js
@@ -34,9 +34,9 @@ import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
         <C4DContentBlockMixed>
           <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
           <C4DContentBlockCopy>

diff --git a/...web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js b/...web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js
@@ -49,9 +49,9 @@ const contentItemCopy =
 const video = <C4DVideoPlayerContainer slot="media" video-id="0_uka1msg4"></C4DVideoPlayerContainer>;
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-8 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-8 cds--no-gutter">
         (
         <C4DContentBlockSegmented>
           <C4DContentBlockHeading>Lorem ipsum dolor sit amet.</C4DContentBlockHeading>

diff --git a/...eb-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js b/...eb-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js
@@ -48,9 +48,9 @@ const pictogramsItems = [
 ];
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
         <C4DContentGroupPictograms>
           <C4DContentGroupHeading>{groupHeading}</C4DContentGroupHeading>
           <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>

diff --git a/...es/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js b/...es/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js
@@ -78,9 +78,9 @@ const image = ({ heading: imageHeading } = { heading: undefined }) => (
 );
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-12 cds--no-gutter">
         <C4DVideoCTAContainer>
           <C4DContentGroupSimple>
             <C4DContentGroupHeading>'Curabitur malesuada varius mi eu posuere'</C4DContentGroupHeading>

diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js
@@ -16,9 +16,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-4 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-4 cds--no-gutter">
         <C4DCardLinkCTA cta-type="local" href="https://www.example.com">
           <C4DCardLinkHeading>Card link heading</C4DCardLinkHeading>
           <C4DCardCTAFooter>

diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js
@@ -15,9 +15,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-4 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-4 cds--no-gutter">
         <C4DCardCTA cta-type="local" href="https://www.example.com">
           Card CTA Copy
           <C4DCardCTAFooter>

diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js
@@ -17,9 +17,9 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8">
         <C4DFeatureCTA cta-type="local" href="https://www.example.com">
           <C4DCardHeading>Feature CTA Copy</C4DCardHeading>
           <C4DImage

diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js b/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js
@@ -27,10 +27,10 @@ window.digitalData = {
 
 const App = () => (
   <C4DDotcomShellContainer>
-    <main className="bx--content cds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework

diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js
@@ -15,10 +15,10 @@ import './index.css';
 const App = () => (
   <>
     <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>
-    <main className="bx--content cds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework

diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js
@@ -15,10 +15,10 @@ import './index.css';
 const App = () => (
   <>
     <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>
-    <main className="bx--content cds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework

diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js b/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js
@@ -30,7 +30,7 @@ const App = () => (
       height="64"
       viewBox="8 8 32 32"
       role="img"
-      class="bx--pictogram-item__pictogram">
+      class="cds--pictogram-item__pictogram">
       <path
         fill="none"
         stroke-linejoin="round"

diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js b/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js
@@ -14,9 +14,9 @@ import './index.css';
 
 const App = () => (
   <>
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--offset-lg-3 bx--col-lg-13">
+    <div className="cds--grid">
+      <div className="cds--row">
+        <div className="cds--offset-lg-3 cds--col-lg-13">
           <C4DVideoPlayerContainer aspectRatio="1x1" videoId="1_9h94wo6b" />
         </div>
       </div>