docs(card): more update

carbon-design-system · Dec 30, 2020 · 41be908 · 41be908
1 parent f11bb00
commit 41be908
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 14 deletions.
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/index.html b/packages/web-components/examples/codesandbox/components/feature-card/index.html
@@ -26,7 +26,7 @@ <h1>Hello World! 👋</h1>
   <dds-feature-card href="https://example.com">
     <dds-image slot="image" alt="Image alt text" default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616">
     </dds-image>
-    <h3 slot="heading">Lorem ipsum dolor sit amet.</h3>
+    <dds-card-heading>Lorem ipsum dolor sit amet.</dds-card-heading>
     <dds-feature-card-footer>
       <svg
         slot="icon"

diff --git a/packages/web-components/examples/codesandbox/components/feature-card/src/index.js b/packages/web-components/examples/codesandbox/components/feature-card/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-footer.js';
 import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
 import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card.js';
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
@@ -27,7 +27,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
 ```html
 <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.
@@ -39,7 +39,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card-footer.js';
     </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">
       <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
         <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>

diff --git a/.../src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx b/.../src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx
@@ -15,6 +15,8 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // @ts-ignore
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 // @ts-ignore
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+// @ts-ignore
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // @ts-ignore
 import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
@@ -39,7 +41,7 @@ const copyOdd = `
 
 const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => (
   <DDSCard href={href}>
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading slot="heading">{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />

diff --git a/...eb-components/src/components/card-section-simple/__stories__/README.stories.mdx b/...eb-components/src/components/card-section-simple/__stories__/README.stories.mdx
@@ -17,11 +17,10 @@ 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/card-section-simple/card-section-simple.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';
-
 ```
 
 ### HTML
@@ -30,7 +29,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-ite
 <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/src/components/carousel/__stories__/carousel.stories.react.tsx b/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx
@@ -15,6 +15,8 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // @ts-ignore
 import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 // @ts-ignore
+import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+// @ts-ignore
 import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // @ts-ignore
 import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
@@ -30,7 +32,7 @@ const copyOdd = `
 
 const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => (
   <DDSCard href={href}>
-    <span slot="heading">{heading}</span>
+    <DDSCardHeading>{heading}</DDSCardHeading>
     {copy}
     <DDSCardFooter>
       <ArrowRight20 slot="icon" />

diff --git a/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx
@@ -22,6 +22,7 @@ Here's a quick example to get you started.
 ```javascript
 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';
@@ -35,7 +36,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
   <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.
@@ -47,7 +48,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
       </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.
@@ -59,7 +60,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
       </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/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx
@@ -15,6 +15,7 @@ Here's a quick example to get you started.
 ```javascript
 import '@carbon/ibmdotcom-web-components/content-block-mixed.js';
 import '@carbon/ibmdotcom-web-components/image/image.js';
+import '@carbon/ibmdotcom-web-components/card/card-heading.js';
 import '@carbon/ibmdotcom-web-components/content-block/content-block-heading.js';
 import '@carbon/ibmdotcom-web-components/content-block/content-block-paragraph.js';
 import '@carbon/ibmdotcom-web-components/content-group/content-group-heading.js';
@@ -42,7 +43,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
     <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.
@@ -55,7 +56,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
       </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.
@@ -68,7 +69,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
       </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.