chore(card): introduce eyebrow and heading components

Introduces `<dds-card-eyebrow>` and `<dds-card-heading>` to make a choice of the approach of `<div>`/`<span>` with specifying `slot` attribute vs. dedicated components to the latter, to align to other components. The dedicated components approach allows more control over styling. Refs carbon-design-system#4326.
asudoh · Dec 29, 2020 · ae3b722 · ae3b722
1 parent 2db5d9b
commit ae3b722
Show file tree

Hide file tree

Showing 47 changed files with 270 additions and 297 deletions.
diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
@@ -62,14 +62,6 @@
       margin-bottom: $carbon--spacing-07;
     }
 
-    .#{$prefix}--card__eyebrow {
-      @include use-carbon-productive-tokens();
-      @include carbon--type-style('body-short-01');
-
-      margin-bottom: $carbon--spacing-03;
-      color: $text-02;
-    }
-
     .#{$prefix}--card:focus,
     .#{$prefix}--card:visited,
     .#{$prefix}--card:active {
@@ -117,6 +109,15 @@
     }
   }
 
+  :host(#{$dds-prefix}-card-eyebrow),
+  .#{$prefix}--card__eyebrow {
+    @include use-carbon-productive-tokens();
+    @include carbon--type-style('body-short-01');
+
+    margin-bottom: $carbon--spacing-03;
+    color: $text-02;
+  }
+
   .#{$prefix}--card .#{$prefix}--card__cta,
   .#{$prefix}--card .#{$prefix}--card__cta a,
   .#{$prefix}--card .#{$prefix}--card__cta a:visited,
@@ -203,6 +204,25 @@
     }
   }
 
+  :host(#{$dds-prefix}-card-heading) {
+    @include carbon--type-style('expressive-heading-03');
+    @include content-width;
+
+    color: $text-01;
+    margin-bottom: $carbon--layout-05;
+  }
+
+  :host(#{$dds-prefix}-card)[color-scheme='inverse'],
+  :host(#{$dds-prefix}-card-group-item)[color-scheme='inverse'] {
+    ::slotted(#{$dds-prefix}-card-eyebrow) {
+      color: $text-03;
+    }
+
+    ::slotted(#{$dds-prefix}-card-heading) {
+      color: $inverse-01;
+    }
+  }
+
   .#{$prefix}--card--inverse .#{$prefix}--card__cta,
   .#{$prefix}--card--inverse .#{$prefix}--card__cta a,
   .#{$prefix}--card--inverse .#{$prefix}--card__cta a:visited,

diff --git a/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss b/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
@@ -107,20 +107,24 @@ $fcb-breakpoint-up--lg: map-get(
 
       .#{$prefix}--card__eyebrow,
       .#{$prefix}--card__heading,
-      .#{$prefix}--card__copy {
+      .#{$prefix}--card__copy,
+      ::slotted(#{$dds-prefix}-card-eyebrow),
+      ::slotted(#{$dds-prefix}-card-heading) {
         width: 100%;
         max-width: carbon--rem(480px);
         @include carbon--breakpoint('md') {
           width: 90%;
         }
       }
 
-      .#{$prefix}--card__eyebrow {
+      .#{$prefix}--card__eyebrow,
+      ::slotted(#{$dds-prefix}-card-eyebrow) {
         margin: 0 0 $spacing-05 0;
         @include carbon--type-style('body-long-02');
       }
 
-      .#{$prefix}--card__heading {
+      .#{$prefix}--card__heading,
+      ::slotted(#{$dds-prefix}-card-heading) {
         @include carbon--type-style('expressive-heading-04', true);
 
         margin-bottom: $spacing-07;

diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
@@ -12,6 +12,7 @@ import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 import './index.css';
 
@@ -25,7 +26,7 @@ const copyOdd = `
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
   <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading>{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />

diff --git a/packages/web-components/examples/codesandbox/components/card-group/index.html b/packages/web-components/examples/codesandbox/components/card-group/index.html
@@ -26,7 +26,7 @@
     <h1>Hello World! 👋</h1>
     <div id="app">
       <dds-card-group-item href="https://example.com">
-        <div slot="heading">Nunc convallis lobortis</div>
+        <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -36,7 +36,7 @@ <h1>Hello World! 👋</h1>
         </dds-card-footer>
       </dds-card-group-item>
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>

diff --git a/packages/web-components/examples/codesandbox/components/card-group/src/index.js b/packages/web-components/examples/codesandbox/components/card-group/src/index.js
@@ -10,3 +10,4 @@
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/index.html b/packages/web-components/examples/codesandbox/components/card-section-images/index.html
@@ -25,11 +25,11 @@
         <div class="bx--col-sm-4">
           <dds-card-section-images heading="Aliquam condimentum interdum">
             <dds-card-group>
-                <dds-card-group-item href="https://example.com">
+              <dds-card-group-item href="https://example.com">
                 <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
                 </dds-image>
-                <div slot="eyebrow">Topic</div>
-                <div slot="heading">Natural Language Processing.</div>
+                <dds-card-eyebrow>Topic</dds-card-eyebrow>
+                <dds-card-heading>Natural Language Processing.</dds-card-heading>
                 <dds-card-footer slot="footer">
                   ${ArrowRight20({ slot: 'icon' })}
                 </dds-card-footer>

diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js
@@ -8,5 +8,7 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card-section-images/card-section-images.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-eyebrow.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
@@ -26,7 +26,7 @@
           <dds-card-section-simple heading="Aliquam condimentum interdum">
             <dds-card-group>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js
@@ -8,5 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/card-section-simple.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
diff --git a/packages/web-components/examples/codesandbox/components/card/index.html b/packages/web-components/examples/codesandbox/components/card/index.html
@@ -24,8 +24,8 @@
 <h1>Hello World! 👋</h1>
 <div id="app">
   <dds-card href="https://example.com">
-    <span slot="eyebrow">eyebrow text</span>
-    <span slot="heading">Lorem ipsum dolor sit amet</span>
+    <dds-card-eyebrow>eyebrow text</dds-card-eyebrow>
+    <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
     <dds-card-footer>
       Card cta text
       <svg

diff --git a/packages/web-components/examples/codesandbox/components/card/src/index.js b/packages/web-components/examples/codesandbox/components/card/src/index.js
@@ -8,4 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-eyebrow.js';
 import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/codesandbox/components/carousel/index.html
@@ -14,6 +14,7 @@
     <script type="module">
       import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
       import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
+      import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
       import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section-leading.js';
       import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section-heading.js';
@@ -70,7 +71,7 @@
         </dds-link-with-icon>
       </dds-content-section-leading>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg
@@ -88,7 +89,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
         <dds-card-footer>
@@ -107,7 +108,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg
@@ -125,7 +126,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
         <dds-card-footer>
@@ -144,7 +145,7 @@
         </dds-card-footer>
       </dds-card>
       <dds-card href="https://example.com">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <dds-card-footer>
           <svg

diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
@@ -27,7 +27,7 @@
             <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
             <dds-card-group slot="content">
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -39,7 +39,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -51,7 +51,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
               <dds-card-group-item href="https://example.com">
-                <div slot="heading">Nunc convallis lobortis</div>
+                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js b/packages/web-components/examples/codesandbox/components/content-block-cards/src/index.js
@@ -9,6 +9,7 @@
 
 import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/content-block-cards.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-heading.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js';
 import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/cta/card-cta-footer.js';

diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html b/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
@@ -24,7 +24,7 @@
       <dds-content-group-cards>
         <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
         <dds-content-group-cards-item href="https://www.example.com">
-          <span slot="heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</span>
+          <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
           <dds-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}

diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js b/packages/web-components/examples/codesandbox/components/content-group-cards/src/index.js
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards-item.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js';

diff --git a/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html b/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html
@@ -37,7 +37,7 @@ <h1>Hello World! 👋</h1>
       </dds-image-item>
     </dds-image>
     <span slot="eyebrow">This is an eyebrow</span>
-    <h3 slot="heading">Explore AI use cases in all industries</h3>
+    <dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     <dds-feature-card-block-large-footer>
       <svg

diff --git a/...ages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js b/...ages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-block-large-footer.js';
 import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large.js';
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js b/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
@@ -11,6 +11,7 @@ import React from 'react';
 import ArrowRight20 from '@carbon/icons-react/lib/arrow--right/20.js';
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 
 const headingDefault = 'Lorem ipsum dolor sit amet';
@@ -23,7 +24,7 @@ const copyOdd = `
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
   <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading>{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />

diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -11,12 +11,14 @@ import { html } from 'lit-element';
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
 import { number } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
+import '../../card/card-eyebrow';
+import '../../card/card-heading';
 import '../card-group';
 import '../card-group-item';
 
 const defaultCardGroupItem = html`
   <dds-card-group-item href="https://example.com">
-    <div slot="heading">Nunc convallis lobortis</div>
+    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
@@ -35,8 +37,8 @@ const cardGroupItemWithImages = html`
       default-src="https://fpoimg.com/1056x792?text=4:3&amp;bg_color=ee5396&amp;text_color=161616"
     >
     </dds-image>
-    <div slot="eyebrow">Topic</div>
-    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <dds-card-heading>Natural Language Processing.</dds-card-heading>
     <dds-card-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
     </dds-card-footer>
@@ -56,7 +58,7 @@ export const withCTA = ({ parameters }) => {
     <dds-card-group>
       ${cards}
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>
@@ -91,7 +93,7 @@ export const withImagesAndCTA = ({ parameters }) => {
     <dds-card-group>
       ${cards}
       <dds-card-group-item href="https://example.com" color-scheme="inverse">
-        <div slot="heading">Top level card link</div>
+        <dds-card-heading>Top level card link</dds-card-heading>
         <dds-card-footer slot="footer" color-scheme="inverse">
           ${ArrowRight20({ slot: 'icon' })}
         </dds-card-footer>

diff --git a/...ponents/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts b/...ponents/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
@@ -14,6 +14,7 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.j
 import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20.js';
 import '../../card/card';
 import '../../card/card-footer';
+import '../../card/card-heading';
 import '../../content-section/content-section';
 import '../../content-section/content-section-copy';
 import '../../content-section/content-section-heading';
@@ -31,7 +32,7 @@ const copyOdd = `
 
 const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html`
   <dds-card href="${ifNonNull(href)}">
-    <span slot="heading">${heading}</span>
+    <dds-card-heading>${heading}</dds-card-heading>
     ${copy}
     <dds-card-footer>
       ${ArrowRight20({ slot: 'icon' })}