feat(feature-section): update to v2 (carbon-design-system#10959)

* feat(feature-section): v2 updates * feat(feature-section): docs * fix(feature-section): react wrapper story * fix(Feature-section): design updates * fix(migration): update docs * fix(card): remove import * Update dotcom-v2-migration.md
kennylam · Oct 17, 2023 · 3b99a4c · 3b99a4c
1 parent 8477714
commit 3b99a4c
Show file tree

Hide file tree

Showing 24 changed files with 590 additions and 303 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
@@ -42,6 +42,7 @@ For Carbon v11 migration guidance, see their
 | cta-section               | This component is deprecated in v2 in favor for content-section/block & content-item components                                                |
 | feature-card-block-large  | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component.                                          |
 | feature-card-block-medium | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component.                                          |
+| feature-section           | View changes [here](#feature-section)                                                                                                          |
 | footer                    | No API changes.                                                                                                                                |
 | hr                        | View changes [here](#horizontal-rule)                                                                                                          |
 | image                     | View changes [here](#image)                                                                                                                    |
@@ -85,6 +86,12 @@ Each new component has a `cta-type` property that can change the icon and click
 functionality of the component. See the components' documentations for more
 information.
 
+### Feature section
+
+- The `feature-section-card-link` has been deprecated in favor for the `card` (link) variation
+- `media-alignment` property has been removed
+- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, `purple`
+
 ### Horizontal rule
 
 - New options for `contrast` property: `SUBTLE = 'subtle' (default)`,

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -569,6 +569,10 @@
       align-items: center;
     }
 
+    svg {
+      color: $link-primary;
+    }
+
     &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
       color: $link-inverse;
     }
@@ -580,12 +584,6 @@
         color: $link-inverse;
       }
     }
-
-    &:hover {
-      ::slotted(svg[slot='icon']) {
-        color: $link-primary-hover;
-      }
-    }
   }
 
   // static card footer
@@ -594,15 +592,13 @@
       width: auto;
       justify-content: flex-start;
 
-      &:active,
       &:hover {
-        text-decoration: none;
+        color: $link-primary-hover;
       }
 
-      &:active {
-        ::slotted([slot='icon']) {
-          color: $text-primary;
-        }
+      &:active,
+      &:hover {
+        text-decoration: none;
       }
 
       &::after {

diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.scss
@@ -11,10 +11,18 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/aspect-ratio';
+@use '../../globals/carbon-grid';
 @use '../../globals/utils/ratio-base' as *;
+@use '../../internal/callout/tokens' as *;
 
 @mixin feature-section {
+  :host(#{$c4d-prefix}-feature-section) {
+    display: block;
+    outline: none;
+  }
+
   .#{$prefix}--feature-section {
+    box-sizing: border-box;
     position: relative;
     padding-left: $spacing-05;
     padding-right: $spacing-05;
@@ -44,11 +52,36 @@
     background-color: $layer-01;
     display: block;
 
+    div[class^='#{$prefix}--col'] {
+      box-sizing: border-box;
+    }
+
     @include breakpoint(lg) {
       display: flex;
     }
   }
 
+  :host(#{$c4d-prefix}-feature-section[color-scheme='inverse'])
+    .#{$prefix}--feature-section__container {
+    background-color: $background-inverse;
+
+    ::slotted([slot='eyebrow']),
+    ::slotted([slot='heading']),
+    ::slotted([slot='copy']) {
+      color: $text-inverse;
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
+    .#{$prefix}--feature-section__container {
+    background-color: $callout-background-cyan;
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
+    .#{$prefix}--feature-section__container {
+    background-color: $callout-background-purple;
+  }
+
   .#{$prefix}--feature-section__body {
     position: relative;
     padding-top: $spacing-07;
@@ -59,7 +92,6 @@
       padding-top: $spacing-08;
     }
 
-    .#{$prefix}--content-item__copy p,
     ::slotted(#{$c4d-prefix}-content-item-paragraph) {
       margin-bottom: $spacing-07;
 
@@ -68,8 +100,7 @@
       }
     }
 
-    .#{$prefix}--card-link,
-    ::slotted(#{$c4d-prefix}-feature-section-card-link) {
+    ::slotted([slot='footer']) {
       position: relative;
       display: inline-block;
       margin-left: 25%;
@@ -89,8 +120,8 @@
     position: relative;
     padding-left: 0;
     padding-right: 0;
+    border: 1px solid $border-subtle-01;
 
-    .#{$prefix}--image,
     ::slotted(#{$c4d-prefix}-image) {
       overflow: hidden;
 
@@ -108,18 +139,17 @@
     }
   }
 
-  .#{$prefix}--card__eyebrow,
   ::slotted(#{$c4d-prefix}-card-eyebrow) {
     display: inline-block;
-    margin-bottom: $spacing-05;
+    margin-bottom: $spacing-03;
   }
 
-  .#{$prefix}--card-link,
-  ::slotted(#{$c4d-prefix}-feature-section-card-link) {
+  ::slotted([slot='footer']) {
     position: absolute;
     right: 0;
-    bottom: 0;
+    bottom: -1px;
     width: 75%;
+    height: auto;
 
     @include breakpoint(md) {
       width: calc(50% - #{$spacing-05});

diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss
@@ -21,6 +21,17 @@
   :host(#{$c4d-prefix}-image) {
     position: relative;
     display: block;
+
+    .#{$c4d-prefix}--image__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .#{$c4d-prefix}--image__img--border {
+      outline: 1px solid $border-subtle-02;
+    }
   }
 
   :host(#{$c4d-prefix}-card-cta-image::slotted(svg[slot='icon'])),
@@ -47,17 +58,6 @@
     }
   }
 
-  .#{$c4d-prefix}--image__img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
-  .#{$c4d-prefix}--image__img--border {
-    outline: 1px solid $border-subtle-02;
-  }
-
   .#{$c4d-prefix}--image__longdescription {
     position: absolute;
     width: 1px;

diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js
@@ -11,44 +11,44 @@ import React from 'react';
 import { render } from 'react-dom';
 import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js';
 import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
 import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
-import C4DFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 import './index.css';
 
 const App = () => (
   <C4DFeatureSection media-alignment={'left'}>
-    <C4DImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
-      <C4DImageItem
-        media="(min-width: 1312px)"
-        srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
-      <C4DImageItem
-        media="(min-width: 672px)"
-        srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
-      <C4DImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
-      <C4DImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
-      <C4DImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
-    </C4DImage>
-    <C4DCardEyebrow>5 min activity</C4DCardEyebrow>
-    <C4DContentBlockHeading>Ready when you are</C4DContentBlockHeading>
-    <C4DContentItemParagraph slot="copy">Copy example</C4DContentItemParagraph>
+      <C4DImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
+        <C4DImageItem 
+          media="(min-width: 1312px)"
+          srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 672px)"
+          srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem 
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+      </C4DImage>
+      <C4DCardEyebrow>5 min activity</C4DCardEyebrow>
+      <C4DContentBlockHeading>Ready when you are</C4DContentBlockHeading>
+      <C4DContentItemParagraph slot="copy">Copy example</C4DContentItemParagraph>
 
-    <C4DFeatureSectionCardLink slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
-      <C4DCardLinkHeading>Try a free virtual business framing session with IBM Garage</C4DCardLinkHeading>
-      <C4DCardCTAFooter color-scheme="inverse"> </C4DCardCTAFooter>
-    </C4DFeatureSectionCardLink>
-  </C4DFeatureSection>
+      <C4DCard link slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
+        <C4DCardHeading>Try a free virtual business framing session with IBM Garage</C4DCardHeading>
+        <C4DCardFooter color-scheme="inverse"> </C4DCardFooter>
+      </C4DCard>
+    </C4DFeatureSection>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.babelrc b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.gitignore b/packages/web-components/examples/codesandbox/components/feature-section/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*