feat(content-item): v2 updates

packages/styles/scss/components/expressive-modal/_expressive-modal.scss

@@ -24,7 +24,6 @@
 @mixin expressive-modal {
   $icon-size: rem(20px);
 
-
   :host(#{$c4d-prefix}-expressive-modal) {
     @extend :host(#{$prefix}-modal);
 

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;
+      max-width: $spacing-12;
+      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>
 );
 

packages/web-components/examples/codesandbox/components/content-item/cdn.html

@@ -23,11 +23,13 @@
 <div id="app">
   <div class="cds--grid">
     <div class="cds--row">
-      <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+      <div class="cds--col-lg-8 cds--col-sm-4">
         <c4d-content-item>
           <c4d-content-item-heading>Heading</c4d-content-item-heading>
           <c4d-content-item-copy>Copy</c4d-content-item-copy>
-          <c4d-text-cta slot="footer" cta-type="local" href="https://www.example.com">CTA text</c4d-text-cta>
+          <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+            CTA text</c4d-link-with-icon
+          >
         </c4d-content-item>
       </div>
     </div>

packages/web-components/examples/codesandbox/components/content-item/index.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      cds-content-item:not(:defined) {
+      c4d-content-item:not(:defined) {
         display: none;
       }
     </style>
@@ -23,12 +23,14 @@
     <div id="app">
       <div class="cds--grid">
         <div class="cds--row">
-          <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
-            <cds-content-item>
-              <cds-content-item-heading>Heading</cds-content-item-heading>
-              <cds-content-item-copy>Copy</cds-content-item-copy>
-              <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</cds-text-cta>
-            </cds-content-item>
+          <div class="cds--col-lg-8 cds--col-sm-4">
+            <c4d-content-item>
+              <c4d-content-item-heading>Heading</c4d-content-item-heading>
+              <c4d-content-item-copy>Copy</c4d-content-item-copy>
+              <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+                CTA text</c4d-link-with-icon
+              >
+            </c4d-content-item>
           </div>
         </div>
       </div>