feat(quote): update to storybook 8

annawen1 · May 7, 2024 · 5408c2c · 5408c2c
1 parent bc1f2ad
commit 5408c2c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 76 deletions.
diff --git a/packages/web-components/.storybook/main.ts b/packages/web-components/.storybook/main.ts
@@ -36,6 +36,8 @@ const stories = glob.sync(
     '../src/**/global-banner.stories.ts',
     '../src/**/image.mdx',
     '../src/**/image.stories.ts',
+    '../src/**/quote.mdx',
+    '../src/**/quote.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

diff --git a/...ents/quote/__stories__/README.stories.mdx → ...rc/components/quote/__stories__/quote.mdx b/...ents/quote/__stories__/README.stories.mdx → ...rc/components/quote/__stories__/quote.mdx
@@ -1,12 +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 '../quote';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import * as QuoteStories from './quote.stories';
+
+<Meta of={QuoteStories} />
 
 # Quote
 
@@ -52,7 +49,7 @@ import '@carbon/ibmdotcom-web-components/es/components/quote/index.js';
 
 ## Props
 
-<Props of="c4d-quote" />
+<ArgTypes of="c4d-quote" />
 
 ## Stable selectors
 
@@ -64,4 +61,4 @@ to see how Web Components selector and `data-autoid` should be used.
 | ----------------------- | -------------------------- | ----------- |
 | `<c4d-quote>`           | `data-autoid="c4d--quote"` | Component   |
 
-<Description markdown={contributing} />
+<Markdown>{contributing}</Markdown>
diff --git a/packages/web-components/src/components/quote/__stories__/quote.stories.ts b/packages/web-components/src/components/quote/__stories__/quote.stories.ts
@@ -1,39 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { select } from '@storybook/addon-knobs';
 import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import { QUOTE_TYPES } from '../quote';
 import '../index';
 import '../quote-link-with-icon';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-import readme from './README.stories.mdx';
-
-export const Default = (args) => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
-    args?.Quote ?? {};
-  return html`
-    <c4d-quote mark-type="${quoteMark}">
-      ${copy}
-      <c4d-quote-source-heading> ${sourceHeading} </c4d-quote-source-heading>
-      <c4d-quote-source-copy> ${sourceCopy} </c4d-quote-source-copy>
-      <c4d-quote-source-bottom-copy>
-        ${sourceBottomCopy}
-      </c4d-quote-source-bottom-copy>
-      <c4d-quote-link-with-icon slot="footer" href="https://example.com">
-        Link with Icon ${ArrowRight20({ slot: 'icon' })}
-      </c4d-quote-link-with-icon>
-    </c4d-quote>
-  `;
-};
 
 const types = {
   [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT,
@@ -45,8 +23,21 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
-export default {
-  title: 'Components/Quote',
+const controls = {
+  quoteMark: {
+    control: 'select',
+    description: 'Quote Mark (mark-type)',
+    options: types,
+  },
+};
+
+const defaultArgs = {
+  quoteMark: types['double-curved'],
+};
+
+export const Default = {
+  argTypes: controls,
+  args: defaultArgs,
   decorators: [
     (story) => html`
       <div class="cds--grid">
@@ -56,47 +47,29 @@ export default {
       </div>
     `,
   ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      Quote: () => ({
-        copy: textNullable(
-          'Quote (copy):',
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ' +
-            'ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.'
-        ),
-        quoteMark: select(
-          'Quote Mark (markType):',
-          types,
-          types['double-curved']
-        ),
-        sourceHeading: textNullable(
-          'Source heading (source-heading slot)',
-          'Lorem ipsum dolor sit amet'
-        ),
-        sourceCopy: textNullable(
-          'Source copy (source-copy slot)',
-          'consectetur adipiscing elit'
-        ),
-        sourceBottomCopy: textNullable(
-          'Source bottom copy (source-bottom-copy slot)',
-          'IBM Cloud'
-        ),
-      }),
-    },
-    propsSet: {
-      default: {
-        Quote: {
-          copy:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ' +
-            'ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.',
-          quoteMark: 'double-curved',
-          sourceHeading: 'Lorem ipsum dolor sit amet',
-          sourceCopy: 'consectetur adipiscing elit',
-          sourceBottomCopy: 'IBM Cloud',
-        },
-      },
-    },
+  render: ({ quoteMark }) => {
+    return html`
+      <c4d-quote mark-type="${quoteMark}">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est
+        purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae
+        tellus fermentum, hendrerit augue eu, placerat magna.
+        <c4d-quote-source-heading>
+          Lorem ipsum dolor sit amet
+        </c4d-quote-source-heading>
+        <c4d-quote-source-copy>
+          consectetur adipiscing elit
+        </c4d-quote-source-copy>
+        <c4d-quote-source-bottom-copy> IBM Cloud </c4d-quote-source-bottom-copy>
+        <c4d-quote-link-with-icon slot="footer" href="https://example.com">
+          Link with Icon ${ArrowRight20({ slot: 'icon' })}
+        </c4d-quote-link-with-icon>
+      </c4d-quote>
+    `;
   },
 };
+
+const meta = {
+  title: 'Components/Quote',
+};
+
+export default meta;