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

docs/dotcom-v2-migration.md

@@ -39,6 +39,7 @@ For Carbon v11 migration guidance, see their
 | content-group-cards       | This component is deprecated in v2 in favor for content-section/block & card-group components                                                  |
 | content-group-pictograms  | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components                              |
 | content-group-simple      | This component is deprecated in v2 in favor for content-group, image, & content-item components                                                |
+| content-item              | View changes [here](#content-item)                                                                                                  |
 | content-item-horizontal   | View changes [here](#content-item-horizontal)                                                                                                  |
 | cta                       | View changes [here](#cta)                                                                                                                      |
 | cta-block                 | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
@@ -91,6 +92,12 @@ For Carbon v11 migration guidance, see their
 - `content-group-banner` renamed to `in-page-banner`
 - New `color-scheme` property with options: `REGULAR = 'regular'`, `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
 
+### Content item
+
+- `content-item` new property `horizontal`
+- `content-item` now renders different variations for `statistics`, `pictogram`, `media`, & `logo`
+
+
 ### Content item horizontal
 
 - `content-item-horizontal` renamed to `content-item-row`

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

@@ -77,6 +77,11 @@
     padding-top: 0;
     padding-bottom: 0;
 
+    ::slotted(#{$c4d-prefix}-footer-nav),
+    ::slotted(#{$c4d-prefix}-footer-logo) {
+      display: none;
+    }
+
     .#{$prefix}--footer__logo-container {
       display: none;
     }
@@ -102,6 +107,9 @@
   :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
     @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
 
+    display: list-item;
+    outline: none;
+
     .#{$prefix}--footer__link.#{$prefix}--link {
       @include type-style('body-01');
       &,
@@ -253,13 +261,6 @@
     @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;
@@ -303,13 +304,6 @@
     }
   }
 
-  :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) {

packages/styles/scss/components/image/_image.scss

@@ -173,7 +173,7 @@
     }
   }
 
-  // cds-image-logo style.
+  // c4d-image-logo style.
   :host(#{$c4d-prefix}-image-logo) {
     background-color: $layer-02;
     margin: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
@@ -183,6 +183,8 @@
 
     .#{$c4d-prefix}--image__img {
       object-fit: contain;
+      width: 100%;
+      height: 100%;
     }
   }
 }

packages/styles/scss/internal/content-item/_content-item.scss

@@ -10,71 +10,98 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../components/list/list';
 @use '../../components/link-with-icon';
 @use '../../components/button-group';
 
 @mixin content-item {
-  .#{$prefix}--content-item--inverse {
-    background-color: $focus-inset;
+  :host(#{$c4d-prefix}-content-item) {
+    display: block;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-07;
+    max-width: rem(640px);
 
-    .#{$prefix}--content-item__heading {
-      color: $text-on-color;
+    @include breakpoint(md) {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--content-item__copy p {
-      color: $text-on-color;
+    .#{$c4d-prefix}--content-item__horizontal {
+      @include breakpoint(md) {
+        display: flex;
+      }
+      .#{$c4d-prefix}--content-item__media {
+        margin-right: $spacing-07;
+      }
     }
-  }
 
-  :host(#{$c4d-prefix}-content-item),
-  .#{$prefix}--content-item {
-    display: block;
-    margin-top: $spacing-07;
-    margin-bottom: $spacing-07;
+    .#{$c4d-prefix}--content-item__statitics {
+      @include type-style('fluid-display-01', true);
+
+      margin-bottom: $spacing-05;
+    }
+
+    .#{$c4d-prefix}--content-item__media {
+      margin-bottom: $spacing-05;
+    }
+
+    ::slotted(#{$c4d-prefix}-image-logo) {
+      /* stylelint-disable */
+      aspect-ratio: var(--logo-ratio);
+      /* stylelint-enable */
+      margin: 0;
+      margin-bottom: $spacing-06;
+    }
+
+    ::slotted(svg) {
+      width: $spacing-10;
+      height: $spacing-10;
+    }
   }
 
   :host(#{$c4d-prefix}-content-item)
-    ::slotted(#{$c4d-prefix}-video-player-container),
-  .#{$prefix}--content-item .#{$prefix}--video-player {
+    ::slotted(#{$c4d-prefix}-video-player-container) {
     margin-top: $spacing-05;
     margin-bottom: $spacing-07;
     max-width: 40rem;
   }
 
-  .#{$prefix}--content-item .#{$prefix}--image-with-caption {
-    margin-top: $spacing-05;
-  }
-
   :host(#{$c4d-prefix}-content-item-heading),
   :host(#{$c4d-prefix}-content-item-copy),
-  .#{$prefix}--content-item__heading,
-  .#{$prefix}--content-item__copy {
+  :host(#{$c4d-prefix}-content-item-paragraph) {
+    display: block;
+  }
+
+  :host(#{$c4d-prefix}-content-item-copy) {
     @include breakpoint(md) {
       @include content-width;
-
-      display: block;
     }
   }
 
-  :host(#{$c4d-prefix}-content-item-heading),
-  .#{$prefix}--content-item__heading {
+  :host(#{$c4d-prefix}-content-item-heading) {
     @include type-style('heading-02');
 
     color: $text-primary;
   }
 
-  :host(#{$c4d-prefix}-content-item-paragraph),
-  .#{$prefix}--content-item__copy p {
+  :host(#{$c4d-prefix}-content-item-paragraph) {
     @include type-style('body-02');
 
     color: $text-primary;
-    margin-bottom: $spacing-06;
+    margin-bottom: $spacing-05;
   }
 
-  .#{$prefix}--content-item__cta {
-    margin-top: $spacing-05;
+  :host(#{$c4d-prefix}-content-item[horizontal])
+    ::slotted(#{$c4d-prefix}-image) {
+    width: 100%;
+    @include breakpoint(md) {
+      width: rem(128px);
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item) ::slotted([slot='footer']) {
+    margin-left: 0;
   }
 }

packages/web-components/examples/codesandbox/components-react/content-item/src/index.js

@@ -12,16 +12,16 @@ import { render } from 'react-dom';
 import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
 import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 import './index.css';
 
 const App = () => (
   <C4DContentItem>
     <C4DContentItemHeading>Heading</C4DContentItemHeading>
     <C4DContentItemCopy>Copy</C4DContentItemCopy>
-    <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
       CTA text
-    </C4DTextCTA>
+    </C4DLinkWithIcon>
   </C4DContentItem>
 );