diff --git a/web-components/packages/carbon-web-components/.storybook/knob-text-nullable.ts b/web-components/packages/carbon-web-components/.storybook/knob-text-nullable.ts
new file mode 100644
index 000000000000..84204b96bdb7
--- /dev/null
+++ b/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;
diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
index a8405fe8ebfd..4e22b256904f 100644
--- a/web-components/packages/carbon-web-components/.storybook/main.ts
+++ b/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;
diff --git a/web-components/packages/carbon-web-components/.storybook/templates/with-layer.scss b/web-components/packages/carbon-web-components/.storybook/templates/with-layer.scss
new file mode 100644
index 000000000000..fa1ea5b5eb6c
--- /dev/null
+++ b/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;
+}
diff --git a/web-components/packages/carbon-web-components/.storybook/templates/with-layer.ts b/web-components/packages/carbon-web-components/.storybook/templates/with-layer.ts
new file mode 100644
index 000000000000..d7ff7d81493d
--- /dev/null
+++ b/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`
+
+
+
${Layers()} Layer 1
+
+
+
+
+
+ ${Layers()} Layer 2
+
+
+
+
+
+
+ ${Layers()} Layer 3
+
+
+
+
+
+
+
+
+
+
+
+