feat(card-in-card): update to sb8

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

Hide file tree

Showing 3 changed files with 67 additions and 57 deletions.
diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
@@ -18,8 +18,19 @@ const stories = glob.sync(
     // '../docs/**/*.mdx',
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    // '../src/**/back-to-top.mdx',
+    // '../src/**/back-to-top.stories.ts',
     '../src/**/button.mdx',
     '../src/**/button.stories.ts',
+    '../src/**/button-group.mdx',
+    '../src/**/button-group.stories.ts',
+    '../src/**/card.mdx',
+    '../src/**/card.stories.ts',
+    '../src/**/carousel.mdx',
+    '../src/**/carousel.stories.ts',
+    '../src/**/card-in-card.mdx',
+    '../src/**/card-in-card.stories.ts',
+
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/...rd-in-card/__stories__/README.stories.mdx → ...card-in-card/__stories__/card-in-card.mdx b/...rd-in-card/__stories__/README.stories.mdx → ...card-in-card/__stories__/card-in-card.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 CardInCard from './card-in-card.stories';
+
+<Meta of={CardInCard} />
 
 # Card in Card
 
@@ -96,7 +94,7 @@ attribute to `card-in-card`.
 
 ## Props
 
-<Props of="c4d-card-in-card" />
+<ArgTypes of="c4d-card-in-card" />
 
 ## Stable selectors
 
@@ -108,4 +106,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | ----------------------- | --------------------------------- | ----------- |
 | `<c4d-card-in-card>`    | `data-autoid="c4d--card-in-card"` | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts
@@ -14,18 +14,57 @@ import '../../cta/card-cta-footer';
 import '../../cta/video-cta-container';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { boolean } from '@storybook/addon-knobs';
 
 import imgXlg16x9 from '../../../../.storybook/storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
 import imgMd16x9 from '../../../../.storybook/storybook-images/assets/960/fpo--16x9--960x540--005.jpg';
 import imgSm4x3 from '../../../../.storybook/storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
 
-import readme from './README.stories.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+const defaultArgs = {
+  video: false,
+  alt: 'Image alt text',
+  defaultSrc: imgSm4x3,
+  heading: 'Standard Bank Group prepares to embrace Africa’s AI opportunity',
+  href: 'https://example.com',
+  eyebrow: 'Label'
+};
+
+const controls = {
+  video: {
+    control: 'boolean',
+    description: 'Video'
+  },
+  alt: {
+    control: 'text',
+    description: 'Image alt text (alt)',
+    if: { arg: 'video', eq: false }
+  },
+  defaultSrc: {
+    control: 'text',
+    description: 'Image src (defaultSrc)',
+    if: { arg: 'video', eq: false }
+  },
+  heading: {
+    control: 'text',
+    description: 'Card Heading (heading)',
+    if: { arg: 'video', eq: false }
+  },
+  href: {
+    control: 'text',
+    description: 'Card Href (href)',
+    if: { arg: 'video', eq: false }
+  },
+  eyebrow: {
+    control: 'text',
+    description: 'Card Eyebrow (eyebrow)'
+  }
+};
+
+
+export const Default = {
+  args: defaultArgs,
+  argTypes: controls,
+  render: ( {video, eyebrow, heading, defaultSrc, alt, href }) => {
 
-export const Default = (args) => {
-  const { video, eyebrow, heading, defaultSrc, alt, href } =
-    args?.['c4d-card-in-card'] ?? {};
   if (video) {
     const card = document.querySelector('c4d-card') as any;
     const videoCopy = card?.videoTitle;
@@ -58,7 +97,8 @@ export const Default = (args) => {
       <c4d-card-footer></c4d-card-footer>
     </c4d-card-in-card>
   `;
-};
+}
+}
 
 export default {
   title: 'Components/Card in card',
@@ -72,48 +112,9 @@ export default {
     `,
   ],
   parameters: {
-    ...readme.parameters,
     hasStoryPadding: true,
-    knobs: {
-      'c4d-card-in-card': () => {
-        const video = boolean('video', false);
-        const alt = video
-          ? undefined
-          : textNullable('Image alt text (alt):', 'Image alt text');
-        const defaultSrc = video
-          ? undefined
-          : textNullable('Image src (defaultSrc):', imgSm4x3);
-        const heading = video
-          ? undefined
-          : textNullable(
-              'Card Heading (heading):',
-              'Standard Bank Group prepares to embrace Africa’s AI opportunity'
-            );
-        const href = video
-          ? undefined
-          : textNullable('Card Href (href):', 'https://example.com');
-        return {
-          video,
-          alt,
-          defaultSrc,
-          heading,
-          href,
-          eyebrow: textNullable('Card Eyebrow (eyebrow):', 'Label'),
-        };
-      },
-    },
-    propsSet: {
-      default: {
-        'c4d-card-in-card': {
-          video: false,
-          alt: 'Image alt text',
-          defaultSrc: imgSm4x3,
-          heading:
-            'Standard Bank Group prepares to embrace Africa’s AI opportunity',
-          href: 'https://example.com',
-          eyebrow: 'Label',
-        },
-      },
-    },
+    controls: {
+      exclude:/defaultSrc|eyebrow|heading|href|copy|alt/g
+    }
   },
 };