feat(carousel): update to sb8

annawen1 · Apr 25, 2024 · bec02d2 · bec02d2
1 parent 19ab4fe
commit bec02d2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 31 deletions.
diff --git a/...s/carousel/__stories__/README.stories.mdx → ...ponents/carousel/__stories__/carousel.mdx b/...s/carousel/__stories__/README.stories.mdx → ...ponents/carousel/__stories__/carousel.mdx
@@ -1,11 +1,9 @@
-import {
-  Preview,
-  Props,
-  Description,
-  Story,
-} from '@storybook/addon-docs/blocks';
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import contributing from '../../../../../../docs/contributing-license.md?raw';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import * as CarouselStories from './carousel.stories';
+
+<Meta of={CarouselStories} />
 
 # Carousel
 
@@ -103,7 +101,7 @@ announced.
 
 ## Props
 
-<Props of="c4d-carousel" />
+<ArgTypes of="c4d-carousel" />
 
 ## Stable selectors
 
@@ -115,4 +113,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | ----------------------- | ---------------------- | ----------- |
 | `<c4d-carousel>`        | N/A                    | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
@@ -17,7 +17,6 @@ import '../../cta/index';
 import '../../image/index';
 import '../index';
 import styles from './carousel.stories.scss?lit';
-import readme from './README.stories.mdx';
 
 import imgLg2x1 from '../../../../.storybook/storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
 import imgLg4x3 from '../../../../.storybook/storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
@@ -82,45 +81,44 @@ const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html`
   </c4d-video-cta-container>
 `;
 
-export const Default = () => {
-  return html`
+export const Default = {
+  render: () => html`
     ${Card()}${Card({ copy: copyOdd })}${CardWithLongHeading()}${Card({
       copy: copyOdd,
     })}${Card()}
-  `;
-  // }
+  `
 };
 
-export const CardsWithImages = () => {
-  return html`
+export const CardsWithImages = {
+  render: () => html`
     ${Card({ image: imgLg2x1 })}${Card({
       image: imgLg2x1,
       copy: copyOdd,
     })}${Card({ image: imgLg2x1 })}${Card({
       image: imgLg2x1,
       copy: copyOdd,
     })}${Card({ image: imgLg2x1 })}
-  `;
+  `
 };
 
-export const CardsWithVideos = () => {
-  return html`
+export const CardsWithVideos = {
+  render: () => html`
     ${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({
       href: '0_ibuqxqbe',
     })}${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({
       href: '0_ibuqxqbe',
     })}
-  `;
+  `
 };
 
-export const CardsWithMedia = () => {
-  return html`
+export const CardsWithMedia = {
+  render: () => html`
     ${Card({ image: imgLg4x3 })}${CardWithVideo({
       href: '0_ibuqxqbe',
     })}${Card({ image: imgLg4x3 })}${CardWithVideo({
       href: '0_ibuqxqbe',
     })}${Card({ image: imgLg4x3 })}${CardWithVideo({ href: '0_ibuqxqbe' })}
-  `;
+  `
 };
 
 export default {
@@ -140,15 +138,6 @@ export default {
     },
   ],
   parameters: {
-    ...readme.parameters,
     hasStoryPadding: true,
-    propsSet: {
-      default: {
-        Carousel: {
-          cardSize: 4,
-          mediaType: 'none',
-        },
-      },
-    },
   },
 };