From f11bb005862ac6a0884c60456e7c08aae8fbc219 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 30 Dec 2020 11:59:48 +0900
Subject: [PATCH] docs(card): catch up with latest change

This change updates the document as we introduced `<dds-card-eyebrow>`
and `<dds-card-heading>`.

Refs #4789.
---
 .../__stories__/README.stories.mdx            | 13 ++--
 .../__stories__/README.stories.react.mdx      |  6 +-
 .../__stories__/README.stories.mdx            |  8 ++-
 .../card/__stories__/README.stories.mdx       | 69 ++++++++++---------
 .../carousel/__stories__/README.stories.mdx   |  6 +-
 .../__stories__/README.stories.react.mdx      |  6 +-
 .../__stories__/README.stories.mdx            |  5 +-
 .../__stories__/README.stories.mdx            |  3 +-
 8 files changed, 65 insertions(+), 51 deletions(-)

diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
index ea713094b5e..3a5f5be05b4 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
@@ -11,6 +11,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section.js';
 import '@carbon/ibmdotcom-web-components/es/components/content-section/content-section-heading.js';
@@ -28,7 +29,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
   </dds-content-section-copy>
   <dds-carousel page-size="3">
     <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
@@ -47,7 +48,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       </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
@@ -66,7 +67,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       </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
@@ -85,7 +86,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       </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
@@ -104,7 +105,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       </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
@@ -123,7 +124,7 @@ import '@carbon/ibmdotcom-web-components/es/components/carousel/carousel.js';
       </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/src/components/card-section-carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
index e3b81bfcf4c..5bfff533947 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
@@ -12,6 +12,8 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel.js';
 import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-leading.js';
 import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading.js';
@@ -30,14 +32,14 @@ function App() {
       </DDSLinkWithIcon>
       <DDSCarousel>
         <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-          <span slot="heading">Lorem ipsum dolor sit amet</span>
+          <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
           <DDSCardFooter>
             <ArrowRight20 slot="icon" />
           </DDSCardFooter>
         </DDSCard>
         <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-          <span slot="heading">Lorem ipsum dolor sit amet</span>
+          <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
           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.
           <DDSCardFooter>
diff --git a/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx
index f5b2b8d3915..2e77e8c10e6 100644
--- a/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx
@@ -19,6 +19,8 @@ Here's a quick example to get you started.
 ```javascript
 
 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';
 
@@ -29,11 +31,11 @@ import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-ite
 ```html
 <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/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx
index e9fb244e630..a04e687d794 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx
@@ -18,14 +18,16 @@ Here's a quick example to get you started.
 
 ```javascript
 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-heading.js';
 ```
 
 ### HTML
 
 ```html
 <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 slot="footer">
     Card CTA text
     <svg
@@ -46,39 +48,40 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
 ```
 
 ## Card with pictogram
+
 ```html
-  <dds-card
-      color-scheme=${inverse ? 'inverse' : ''}
-      pictogram-placement="${pictogramPlacement}"
-      href="https://example.com"
+<dds-card
+  color-scheme=${inverse ? 'inverse' : ''}
+  pictogram-placement="${pictogramPlacement}"
+  href="https://example.com"
+>
+  <dds-card-eyebrow>Eyebrow text</dds-card-eyebrow>
+  <dds-card-heading>Lorem ipsum dolor</dds-card-heading>
+  <p>Copy to be shown on hover if the pictogram placement is bottom</p>
+  <svg
+    slot="pictogram"
+    focusable="false"
+    preserveAspectRatio="xMidYMid meet"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    data-autoid="dds--card__pictogram"
+    aria-label="Pictogram description"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    role="img"
+    class="bx--card__pictogram"
+  >
+    <path
+      fill="none"
+      stroke-linejoin="round"
+      stroke-miterlimit="10"
+      stroke-width=".72"
+      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
     >
-      <span slot="eyebrow">Eyebrow text</span>
-      <span slot="heading">Lorem ipsum dolor</span>
-      <p>Copy to be shown on hover if the pictogram placement is bottom</p>
-      <svg
-        slot="pictogram"
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        stroke="currentColor"
-        data-autoid="dds--card__pictogram"
-        aria-label="Pictogram description"
-        width="48"
-        height="48"
-        viewBox="0 0 48 48"
-        role="img"
-        class="bx--card__pictogram"
-      >
-        <path
-          fill="none"
-          stroke-linejoin="round"
-          stroke-miterlimit="10"
-          stroke-width=".72"
-          d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
-        0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
-        ></path>
-      </svg>
-    </dds-card>
+    </path>
+  </svg>
+</dds-card>
 ```
 
 ## Props
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
index 6b288cf7c01..804cae1f2e1 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
@@ -16,6 +16,8 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
+import '@carbon/ibmdotcom-web-components/es/components/card/card.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';
@@ -48,7 +50,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-section/content-s
     </dds-link-with-icon>
   </dds-content-section-leading>
   <dds-card href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <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
@@ -66,7 +68,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-section/content-s
     </dds-card-footer>
   </dds-card>
   <dds-card href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-    <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>
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
index a0300fffe2d..f1f1cd98e5d 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
@@ -18,6 +18,8 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel.js';
 import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-leading.js';
 import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading.js';
@@ -27,14 +29,14 @@ function App() {
   return (
     <DDSCarousel>
       <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
         <DDSCardFooter>
           <ArrowRight20 slot="icon" />
         </DDSCardFooter>
       </DDSCard>
       <DDSCard href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom">
-        <span slot="heading">Lorem ipsum dolor sit amet</span>
+        <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
         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.
         <DDSCardFooter>
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
index ba048a4693b..e16d6516031 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
@@ -19,6 +19,7 @@ Here's a quick example to get you started.
 ##### JS
 
 ```javascript
+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';
@@ -31,14 +32,14 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group/content-gro
     <dds-content-group-heading>${heading}</dds-content-group-heading>
     <p slot="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     <dds-content-group-cards-item href="www.ibm.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' })}
       </dds-card-footer>
     </dds-content-group-cards-item>
     <dds-content-group-cards-item href="www.ibm.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/src/components/feature-card-block-medium/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx
index 6c5d102c5e9..2db0e2e01d2 100644
--- a/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/feature-card-block-medium/__stories__/README.stories.mdx
@@ -17,6 +17,7 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
+import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
 import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium.js';
@@ -37,7 +38,7 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium
       alt="Image alt text"
       default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616/ee5396/161616&amp;amp;text=1x1"
     ></dds-image>
-    <span slot="heading">Explore AI use cases in all industries</span>
+    <dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
     <dds-feature-card-footer>
       <svg
         slot="footer"