Merge branch 'feat/cwc-storybook-7-vite' into feat/cwc-storybook-7-vite

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

@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 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 type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
@@ -11,12 +20,78 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/checkbox.stories.ts',
+    '../src/**/checkbox.mdx',
+    '../src/**/accordion.mdx',
+    '../src/**/accordion.stories.ts',
+    '../src/**/breadcrumb.mdx',
+    '../src/**/breadcrumb.stories.ts',
+    '../src/**/code-snippet.mdx',
+    '../src/**/code-snippet.stories.ts',
+    '../src/**/combo-box.stories.ts',
+    '../src/**/combo-box.mdx',
+    '../src/**/date-picker.mdx',
+    '../src/**/date-picker.stories.ts',
+    '../src/**/content-switcher.mdx',
+    '../src/**/content-switcher.stories.ts',
+    '../src/**/dropdown.stories.ts',
+    '../src/**/dropdown.mdx',
+    '../src/**/data-table-*.stories.ts',
+    '../src/**/data-table.mdx',
+    '../src/**/ordered-list.stories.ts',
+    '../src/**/unordered-list.stories.ts',
+    '../src/**/list.mdx',
+    '../src/**/icon-button.mdx',
+    '../src/**/icon-button.stories.ts',
+    '../src/**/inline-loading.mdx',
+    '../src/**/inline-loading.stories.ts',
+    '../src/**/loading.stories.ts',
+    '../src/**/loading.mdx',
+    '../src/**/button.mdx',
+    '../src/**/button.stories.ts',
     '../src/**/link.mdx',
     '../src/**/link.stories.ts',
+    '../src/**/layer.stories.ts',
+    '../src/**/layer.mdx',
     '../src/**/file-uploader.mdx',
     '../src/**/file-uploader.stories.ts',
     '../src/**/popover.mdx',
     '../src/**/popover.stories.ts',
+    '../src/**/form-group.mdx',
+    '../src/**/form-group.stories.ts',
+    '../src/**/modal.stories.ts',
+    '../src/**/modal.mdx',
+    '../src/**/file-uploader.stories.ts',
+    '../src/**/number-input.mdx',
+    '../src/**/number-input.stories.ts',
+    '../src/**/multi-select.mdx',
+    '../src/**/multi-select.stories.ts',
+    '../src/**/notification.mdx',
+    '../src/**/actionable-notification.stories.ts',
+    '../src/**/inline-notification.stories.ts',
+    '../src/**/toast-notification.stories.ts',
+    '../src/**/overflow-menu.mdx',
+    '../src/**/overflow-menu.stories.ts',
+    '../src/**/progress-bar.mdx',
+    '../src/**/progress-bar.stories.ts',
+    '../src/**/progress-indicator.mdx',
+    '../src/**/progress-indicator.stories.ts',
+    '../src/**/search.mdx',
+    '../src/**/search.stories.ts',
+    '../src/**/select.mdx',
+    '../src/**/select.stories.ts',
+    '../src/**/skeleton-placeholder.mdx',
+    '../src/**/skeleton-placeholder.stories.ts',
+    '../src/**/skeleton-text.mdx',
+    '../src/**/skeleton-text.stories.ts',
+    '../src/**/skip-to-content.mdx',
+    '../src/**/skip-to-content.stories.ts',
+    '../src/**/slider.mdx',
+    '../src/**/slider.stories.ts',
+    '../src/**/tag.mdx',
+    '../src/**/tag.stories.ts',
+    '../src/**/tooltip.mdx',
+    '../src/**/tooltip.stories.ts',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],

packages/carbon-web-components/.storybook/preview.js

@@ -4,6 +4,7 @@ import container from './container';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import { breakpoints } from '@carbon/layout';
 import theme from './theme';
+import './templates/with-layer';
 
 setCustomElementsManifest(customElements);
 

packages/carbon-web-components/package.json

@@ -74,7 +74,7 @@
     "@babel/runtime": "^7.16.3",
     "@carbon/styles": "^1.45.0",
     "flatpickr": "4.6.1",
-    "lit": "^2.7.6",
+    "lit": "^3.1.0",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
@@ -100,6 +100,7 @@
     "@percy/cli": "^1.27.4",
     "@percy/cypress": "^3.1.2",
     "@percy/dom": "^1.27.5",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^8.4.0",

packages/carbon-web-components/src/components/accordion/accordion-story.mdx → packages/carbon-web-components/src/components/accordion/accordion.mdx

@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} />
 
 # Accordion
 
@@ -87,4 +90,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-accordion-item open>`) and `false` means not setting the attribute (e.g.
 `<cds-accordion-item>` without `open` attribute).
 
-<Props of="cds-accordion-item" />
+<ArgsTable of="cds-accordion-item" />