docs(format): ran prettier

carbon-design-system · Dec 19, 2023 · 19ea670 · 19ea670
1 parent dcc6daf
commit 19ea670
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 112 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
@@ -5,12 +5,17 @@ import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-
 const glob = require('fast-glob');
 import remarkGfm from 'remark-gfm';
 
-
-const stories = glob
-  .sync(['../src/**/*.mdx', '../docs/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], {
+const stories = glob.sync(
+  [
+    '../src/**/*.mdx',
+    '../docs/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  {
     ignore: ['../src/**/docs/*.mdx'],
     cwd: __dirname,
-  })
+  }
+);
 
 const config: StorybookConfig = {
   stories: stories,
@@ -31,14 +36,18 @@ const config: StorybookConfig = {
       //   alias: [{ find: "@", replacement: resolve(__dirname, "node_modules") }]
       // },
       // resolve: {
-      //   alias: { 
+      //   alias: {
       //     '@carbon/web-components/es/icons': path.resolve(__dirname, '@carbon/icons/lib') },
       // },
       assetsInclude: ['**/*.html'],
-      plugins: [litStyleLoader(), litTemplateLoader(), viteSVGResultCarbonIconLoader()],
+      plugins: [
+        litStyleLoader(),
+        litTemplateLoader(),
+        viteSVGResultCarbonIconLoader(),
+      ],
       optimizeDeps: {
         include: ['@storybook/web-components'],
-        exclude: ['lit', 'lit-html']
+        exclude: ['lit', 'lit-html'],
       },
     });
 
@@ -49,6 +58,5 @@ const config: StorybookConfig = {
     autodocs: true,
     defaultName: 'Overview',
   },
-
 };
 export default config;
diff --git a/web-components/packages/carbon-web-components/.storybook/preview.js b/web-components/packages/carbon-web-components/.storybook/preview.js
@@ -1,11 +1,10 @@
-import {  setCustomElementsManifest } from '@storybook/web-components';
+import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import container from './container';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import { breakpoints } from '@carbon/layout';
 import theme from './theme';
 
-
 setCustomElementsManifest(customElements);
 
 export const globalTypes = {
@@ -64,10 +63,11 @@ export const globalTypes = {
       title: 'Theme',
       items: ['white', 'g10', 'g90', 'g100'],
     },
-  }
+  },
 };
 
 export const parameters = {
+  actions: { argTypesRegex: '^on.*' },
   backgrounds: {
     // https://storybook.js.org/docs/react/essentials/backgrounds#grid
     grid: {
@@ -96,7 +96,6 @@ export const parameters = {
   controls: {
     expanded: true,
     sort: 'alpha',
-
     hideNoControlsWarning: true,
   },
   docs: {
@@ -156,15 +155,14 @@ export const parameters = {
       ],
     },
   },
-}
+};
 
 export const decorators = [
   function decoratorContainer(story, context) {
     const result = story();
     const { hasMainTag } = result;
     const { locale, dir, theme } = context.globals;
 
-
     document.documentElement.setAttribute('storybook-carbon-theme', theme);
 
     document.documentElement.lang = locale;
@@ -177,5 +175,5 @@ export const decorators = [
 export const Preview = {
   parameters,
   globalTypes,
-  decorators
-};
+  decorators,
+};
diff --git a/...omponents/packages/carbon-web-components/src/components/button/button-story.mdx b/...omponents/packages/carbon-web-components/src/components/button/button-story.mdx
@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import Add16 from '@carbon/web-components/es/icons/add/16';
 
@@ -121,4 +121,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-button autofocus>`) and `false` means not setting the attribute (e.g.
 `<cds-button>` without `autofocus` attribute).
 
-<Props of="cds-button" />
+<ArgsTable of="cds-button" />
diff --git a/...mponents/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts b/...mponents/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts
@@ -13,35 +13,54 @@ import type { Meta } from '@storybook/web-components';
 import storyDocs from './copy-button.mdx';
 import './copy-button';
 
+const defaultArgs = {
+  feedback: 'Copied!',
+  feedbackTimeout: 2000,
+  iconDescription: 'Copy to clipboard',
+};
+
+const controls = {
+  feedback: {
+    control: 'text',
+    description: `Provide a description for the icon representing the copy action that can be read by screen readers`,
+  },
+  feedbackTimeout: {
+    control: { type: 'number', min: 1, step: 1 },
+    description: `Specify the time it takes for the feedback message to timeout`,
+  },
+  iconDescription: {
+    control: 'text',
+    description: `Provide a description for the icon representing the copy action that can be read by screen readers`,
+  },
+};
+
 const meta: Meta = {
   title: 'Components/Copy button',
   parameters: {
     docs: {
       page: storyDocs,
     },
   },
-  render: ({feedbackText, feedbackTimeout, onClick, iconDescription}) => html`
+  render: ({ feedbackText, feedbackTimeout, onClick, iconDescription }) => html`
     <cds-copy-button
       feedback="${ifDefined(feedbackText)}"
       feedback-timeout="${ifDefined(feedbackTimeout)}"
       @click="${onClick}">
       ${iconDescription}
     </cds-copy-button>
   `,
-  argTypes: {
-    feedback: { control: 'text' },
-    feedbackTimeout: { control: { type: 'number', min:1, step: 1 } },
-    iconDescription: { control: 'text' },
-  },
-  args: {
-    feedback: 'Copied!',
-    feedbackTimeout: 2000,
-    iconDescription: 'Copy to clipboard'
-  }
+  args: defaultArgs,
 };
 
-export default meta;
-
 export const Default = {
   name: 'Default',
-};
+  parameters: {
+    controls: { exclude: /(.*?)/ },
+  },
+};
+
+export const Playground = {
+  argTypes: controls,
+};
+
+export default meta;
diff --git a/web-components/packages/carbon-web-components/src/components/test-story.ts b/web-components/packages/carbon-web-components/src/components/test-story.ts
diff --git a/web-components/packages/carbon-web-components/src/stories/Button.ts b/web-components/packages/carbon-web-components/src/stories/Button.ts
@@ -27,18 +27,29 @@ export interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+export const Button = ({
+  primary,
+  backgroundColor,
+  size,
+  label,
+  onClick,
+}: ButtonProps) => {
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
 
   return html`
     <button
       type="button"
-      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      class=${[
+        'storybook-button',
+        `storybook-button--${size || 'medium'}`,
+        mode,
+      ].join(' ')}
       style=${styleMap({ backgroundColor })}
-      @click=${onClick}
-    >
+      @click=${onClick}>
       ${label}
     </button>
-    <cds-button href="https://www.example.com" >TEST</cds-button>
+    <cds-button href="https://www.example.com">TEST</cds-button>
   `;
 };
diff --git a/web-components/packages/carbon-web-components/src/stories/Header.ts b/web-components/packages/carbon-web-components/src/stories/Header.ts
@@ -14,24 +14,30 @@ export interface HeaderProps {
   onCreateAccount: () => void;
 }
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
+export const Header = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => html`
   <header>
     <div class="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
+              fill="#FFF" />
             <path
               d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
+              fill="#555AB9" />
             <path
               d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
+              fill="#91BAF8" />
           </g>
         </svg>
         <h1>Acme</h1>

diff --git a/web-components/packages/carbon-web-components/src/stories/Page.ts b/web-components/packages/carbon-web-components/src/stories/Page.ts
@@ -13,7 +13,12 @@ export interface PageProps {
   onCreateAccount: () => void;
 }
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html`
+export const Page = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: PageProps) => html`
   <article>
     ${Header({
       user,
@@ -26,43 +31,57 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://componentdriven.org"
+          target="_blank"
+          rel="noopener noreferrer">
           <strong>component-driven</strong> </a
         >process starting with atomic components and ending with pages.
       </p>
       <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
+        Render pages with mock data. This makes it easy to build and review page
+        states without needing to navigate to them in your app. Here are some
+        handy patterns for managing page data in Storybook:
       </p>
       <ul>
         <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
+          Use a higher-level connected component. Storybook helps you compose
+          such data from the "args" of child component stories
         </li>
         <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
+          Assemble data in the page component from your services. You can mock
+          these services out using Storybook.
         </li>
       </ul>
       <p>
         Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://storybook.js.org/tutorials/"
+          target="_blank"
+          rel="noopener noreferrer">
           Storybook tutorials
         </a>
         . Read more in the
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
+        <a
+          href="https://storybook.js.org/docs"
+          target="_blank"
+          rel="noopener noreferrer">
+          docs
+        </a>
         .
       </p>
       <div class="tip-wrapper">
         <span class="tip">Tip</span> Adjust the width of the canvas with the
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 12 12"
+          xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
               id="a"
-              fill="#999"
-            />
+              fill="#999" />
           </g>
         </svg>
         Viewports addon in the toolbar