feat(storybook): files are ready to work on

web-components/packages/carbon-web-components/.storybook/knob-text-nullable.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { text } from '@storybook/addon-knobs';
+
+/**
+ * A Storybook text knob, where a empty text is treated as `undefined`.
+ */
+const textNullable = (
+  name: string,
+  value: string,
+  groupId?: string | undefined
+) => {
+  const content = text(name, value, groupId);
+  return content === '' ? null : content;
+};
+
+export default textNullable;

web-components/packages/carbon-web-components/.storybook/main.ts

@@ -2,9 +2,17 @@ import type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader';
+const glob = require('fast-glob');
 
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+const stories = glob
+  .sync(['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], {
+    ignore: ['../src/**/docs/*.mdx'],
+    cwd: __dirname,
+  })
+
+  const config: StorybookConfig = {
+  stories: stories,
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -35,7 +43,9 @@ const config: StorybookConfig = {
     return x;
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
+    defaultName: 'Overview',
   },
+
 };
 export default config;

web-components/packages/carbon-web-components/.storybook/templates/with-layer.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/tag';
+
+@use '@carbon/styles/scss/config' as *;
+
+.#{$prefix}--with-layer__layer {
+  position: relative;
+  border: 1px dashed colors.$purple-50;
+}
+
+.#{$prefix}--with-layer__layer .#{$prefix}--with-layer__layer {
+  background-color: theme.$layer;
+  margin-block-start: spacing.$spacing-07;
+}
+
+.#{$prefix}--with-layer__label {
+  @include type.type-style('code-01');
+
+  display: inline-flex;
+  padding: spacing.$spacing-02;
+  background-color: tag.$tag-background-purple;
+  color: tag.$tag-color-purple;
+  column-gap: spacing.$spacing-02;
+}
+
+.#{$prefix}--with-layer__content {
+  padding: spacing.$spacing-05;
+}

web-components/packages/carbon-web-components/.storybook/templates/with-layer.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * 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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import Layers from '@carbon/icons/lib/layers/16';
+import { prefix } from '../../src/globals/settings';
+
+import styles from './with-layer.scss?lit';
+
+/**
+ * Storybook template layer component, strictly for presentation purposes
+ *
+ * @element sb-template-layers
+ * @slot The elements contained within the component.
+ */
+@customElement(`sb-template-layers`)
+class CDSLayer extends LitElement {
+  @property()
+  content;
+
+  private _handleSlotChange({ target }: Event) {
+    if (!this.content) {
+      const content = (target as HTMLSlotElement)
+        .assignedNodes()
+        .filter(
+          (node) =>
+            node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+        );
+
+      this.content = content[0];
+    }
+  }
+
+  updated() {
+    if (this.content) {
+      const layer2 = this.content.cloneNode(true) as HTMLElement;
+      const layer3 = this.content.cloneNode(true) as HTMLElement;
+      layer2.setAttribute('slot', 'layer-2');
+      layer3.setAttribute('slot', 'layer-3');
+      this.appendChild(layer2);
+      this.appendChild(layer3);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="${prefix}--with-layer">
+        <div class="${prefix}--with-layer__layer">
+          <div class="${prefix}--with-layer__label">${Layers()} Layer 1</div>
+          <div class="${prefix}--with-layer__content">
+            <cds-layer>
+              <slot @slotchange="${this._handleSlotChange}"></slot>
+              <div class="${prefix}--with-layer__layer">
+                <div class="${prefix}--with-layer__label">
+                  ${Layers()} Layer 2
+                </div>
+                <div class="${prefix}--with-layer__content">
+                  <cds-layer>
+                    <slot name="layer-2"></slot>
+                    <div class="${prefix}--with-layer__layer">
+                      <div class="${prefix}--with-layer__label">
+                        ${Layers()} Layer 3
+                      </div>
+                      <div class="${prefix}--with-layer__content">
+                        <cds-layer>
+                          <slot name="layer-3"></slot>
+                        </cds-layer>
+                      </div>
+                    </div>
+                  </cds-layer>
+                </div>
+              </div>
+            </cds-layer>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSLayer;

web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx → web-components/packages/carbon-web-components/src/components/copy-button/copy-button.mdx

@@ -1,4 +1,4 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Description, Story, Canvas } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 
 # Copy button
@@ -36,4 +36,5 @@ import '@carbon/web-components/es/components/copy-button/index.js';
 
 ## `<cds-copy-button>` attributes and properties
 
-<Props of="cds-copy-button" />
+<ArgsTable of="cds-copy-button" />
+

web-components/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * 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 { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import type { Meta } from '@storybook/web-components';
+import storyDocs from './copy-button.mdx';
+import './copy-button';
+
+const meta: Meta = {
+  title: 'Components/Copy button',
+  parameters: {
+    docs: {
+      page: storyDocs,
+    },
+  },
+  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'
+  }
+};
+
+export default meta;
+
+export const Default = {
+  name: 'Default',
+};

web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts

@@ -21,7 +21,7 @@ export default function svgResultCarbonIconLoader() {
   const paths = new Map<string, string>()
 
   return {
-      name: 'svg-loader',
+      name: 'svg-result-carbon-icon-loader',
       enforce: 'pre',
 
       resolveId(id: string): string | null {