diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
deleted file mode 100644
index b931d4e826d2..000000000000
--- a/addons/docs/src/frameworks/web-components/config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* global window */
-import React from 'react';
-import { render } from 'lit-html';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-
-export const parameters = {
- docs: {
- extractArgTypes,
- extractComponentDescription,
- inlineStories: true,
- prepareForInline: (storyFn) => {
- class Story extends React.Component {
- constructor(props) {
- super(props);
- this.wrapperRef = React.createRef();
- }
-
- componentDidMount() {
- render(storyFn(), this.wrapperRef.current);
- }
-
- render() {
- return React.createElement('div', { ref: this.wrapperRef });
- }
- }
- return React.createElement(Story);
- },
- },
-};
diff --git a/addons/docs/src/frameworks/web-components/config.ts b/addons/docs/src/frameworks/web-components/config.ts
new file mode 100644
index 000000000000..30273896e170
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/config.ts
@@ -0,0 +1,19 @@
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
+import { SourceType } from '../../shared';
+
+export const decorators = [sourceDecorator];
+
+export const parameters = {
+ docs: {
+ extractArgTypes,
+ extractComponentDescription,
+ inlineStories: true,
+ prepareForInline,
+ source: {
+ type: SourceType.DYNAMIC,
+ language: 'html',
+ },
+ },
+};
diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
new file mode 100644
index 000000000000..715bdb8afef6
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -0,0 +1,19 @@
+import type { StoryFn } from '@storybook/addons';
+import React from 'react';
+import { render } from 'lit-html';
+
+export const prepareForInline = (storyFn: StoryFn) => {
+ class Story extends React.Component {
+ wrapperRef = React.createRef();
+
+ componentDidMount(): void {
+ render(storyFn(), this.wrapperRef.current);
+ }
+
+ render(): React.ReactElement {
+ return React.createElement('div', { ref: this.wrapperRef });
+ }
+ }
+
+ return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>;
+};
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
new file mode 100644
index 000000000000..4c2c49851045
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.test.ts
@@ -0,0 +1,100 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map';
+import { addons, StoryContext } from '@storybook/addons';
+import { sourceDecorator } from './sourceDecorator';
+import { SNIPPET_RENDERED } from '../../shared';
+
+jest.mock('@storybook/addons');
+const mockedAddons = addons as jest.Mocked;
+
+expect.addSnapshotSerializer({
+ print: (val: any) => val,
+ test: (val) => typeof val === 'string',
+});
+
+const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
+ id: `lit-test--${name}`,
+ kind: 'js-text',
+ name,
+ parameters,
+ args,
+ argTypes: {},
+ globals: {},
+ ...extra,
+});
+
+describe('sourceDecorator', () => {
+ let mockChannel: { on: jest.Mock; emit?: jest.Mock };
+ beforeEach(() => {
+ mockedAddons.getChannel.mockReset();
+
+ mockChannel = { on: jest.fn(), emit: jest.fn() };
+ mockedAddons.getChannel.mockReturnValue(mockChannel as any);
+ });
+
+ it('should render dynamically for args stories', () => {
+ const storyFn = (args: any) => html`args story
`;
+ const context = makeContext('args', { __isArgsStory: true }, {});
+ sourceDecorator(storyFn, context);
+ expect(mockChannel.emit).toHaveBeenCalledWith(
+ SNIPPET_RENDERED,
+ 'lit-test--args',
+ 'args story
'
+ );
+ });
+
+ it('should skip dynamic rendering for no-args stories', () => {
+ const storyFn = () => html`classic story
`;
+ const context = makeContext('classic', {}, {});
+ sourceDecorator(storyFn, context);
+ expect(mockChannel.emit).not.toHaveBeenCalled();
+ });
+
+ it('should use the originalStoryFn if excludeDecorators is set', () => {
+ const storyFn = (args: any) => html`args story
`;
+ const decoratedStoryFn = (args: any) => html`
+ ${storyFn(args)}
+ `;
+ const context = makeContext(
+ 'args',
+ {
+ __isArgsStory: true,
+ docs: {
+ source: {
+ excludeDecorators: true,
+ },
+ },
+ },
+ {},
+ { originalStoryFn: storyFn }
+ );
+ sourceDecorator(decoratedStoryFn, context);
+ expect(mockChannel.emit).toHaveBeenCalledWith(
+ SNIPPET_RENDERED,
+ 'lit-test--args',
+ 'args story
'
+ );
+ });
+
+ it('allows the snippet output to be modified by transformSource', () => {
+ const storyFn = (args: any) => html`args story
`;
+ const transformSource = (dom: string) => `${dom}
`;
+ const docs = { transformSource };
+ const context = makeContext('args', { __isArgsStory: true, docs }, {});
+ sourceDecorator(storyFn, context);
+ expect(mockChannel.emit).toHaveBeenCalledWith(
+ SNIPPET_RENDERED,
+ 'lit-test--args',
+ 'args story
'
+ );
+ });
+
+ it('provides the story context to transformSource', () => {
+ const storyFn = (args: any) => html`args story
`;
+ const transformSource = jest.fn((x) => x);
+ const docs = { transformSource };
+ const context = makeContext('args', { __isArgsStory: true, docs }, {});
+ sourceDecorator(storyFn, context);
+ expect(transformSource).toHaveBeenCalledWith('args story
', context);
+ });
+});
diff --git a/addons/docs/src/frameworks/web-components/sourceDecorator.ts b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
new file mode 100644
index 000000000000..d1ab37f8ec2e
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/sourceDecorator.ts
@@ -0,0 +1,39 @@
+/* global window */
+import { render } from 'lit-html';
+import { addons, StoryContext, StoryFn } from '@storybook/addons';
+import { SNIPPET_RENDERED, SourceType } from '../../shared';
+
+function skipSourceRender(context: StoryContext) {
+ const sourceParams = context?.parameters.docs?.source;
+ const isArgsStory = context?.parameters.__isArgsStory;
+
+ // always render if the user forces it
+ if (sourceParams?.type === SourceType.DYNAMIC) {
+ return false;
+ }
+
+ // never render if the user is forcing the block to render code, or
+ // if the user provides code, or if it's not an args story.
+ return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
+}
+
+function applyTransformSource(source: string, context: StoryContext): string {
+ const { transformSource } = context.parameters.docs ?? {};
+ if (typeof transformSource !== 'function') return source;
+ return transformSource(source, context);
+}
+
+export function sourceDecorator(storyFn: StoryFn, context: StoryContext) {
+ const story = context?.parameters.docs?.source?.excludeDecorators
+ ? context.originalStoryFn(context.args)
+ : storyFn();
+
+ if (!skipSourceRender(context)) {
+ const container = window.document.createElement('div');
+ render(story, container);
+ const source = applyTransformSource(container.innerHTML.replace(//g, ''), context);
+ if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
+ }
+
+ return story;
+}
diff --git a/docs/frameworks.js b/docs/frameworks.js
index 9f07c78632bb..1a12aeb18d17 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -111,7 +111,7 @@ module.exports = {
},
{
name: 'Dynamic source',
- supported: ['react', 'vue', 'angular', 'svelte'],
+ supported: ['react', 'vue', 'angular', 'svelte', 'web-components'],
path: 'writing-docs/doc-blocks#source',
},
{
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
index 487ab8f23c74..7b8797a0d714 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts
@@ -1,5 +1,6 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
import { SbButton } from './sb-button';
@@ -20,9 +21,9 @@ export default {
const Template: Story = ({ primary, backgroundColor, size, label }) =>
html``;
export const Primary: Story = Template.bind({});
diff --git a/examples/web-components-kitchen-sink/src/components/sb-button.ts b/examples/web-components-kitchen-sink/src/components/sb-button.ts
index 1a81bf443132..0c4dd313d22e 100644
--- a/examples/web-components-kitchen-sink/src/components/sb-button.ts
+++ b/examples/web-components-kitchen-sink/src/components/sb-button.ts
@@ -61,7 +61,7 @@ export class SbButton extends LitElement {
label: { type: String, reflect: true },
primary: { type: Boolean },
size: { type: String },
- backgroundColor: { type: String },
+ backgroundColor: { type: String, attribute: 'background-color' },
};
}
diff --git a/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
new file mode 100644
index 000000000000..a183a182fd8a
--- /dev/null
+++ b/examples/web-components-kitchen-sink/src/stories/addons/docs/dynamic-source.stories.mdx
@@ -0,0 +1,42 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { html } from 'lit-html';
+
+
+
+# Dynamic Source
+
+Stories can use Dynamic Source to display the result of changes to controls.
+
+
+
+
diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock
index 9159d6c7b784..af5006d4572b 100644
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
@@ -2084,14 +2084,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
axe-core: ^4.2.0
core-js: ^3.8.2
global: ^4.4.0
@@ -2115,12 +2115,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
global: ^4.4.0
@@ -2147,12 +2147,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
global: ^4.4.0
memoizerific: ^1.11.3
@@ -2174,12 +2174,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/node-logger": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/node-logger": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
ts-dedent: ^2.0.0
peerDependencies:
@@ -2206,20 +2206,20 @@ __metadata:
"@mdx-js/loader": ^1.6.22
"@mdx-js/mdx": ^1.6.22
"@mdx-js/react": ^1.6.22
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/builder-webpack4": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/builder-webpack4": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
- "@storybook/csf-tools": 6.4.0-alpha.7
- "@storybook/node-logger": 6.4.0-alpha.7
- "@storybook/postinstall": 6.4.0-alpha.7
- "@storybook/source-loader": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/csf-tools": 6.4.0-alpha.11
+ "@storybook/node-logger": 6.4.0-alpha.11
+ "@storybook/postinstall": 6.4.0-alpha.11
+ "@storybook/source-loader": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
acorn: ^7.4.1
acorn-jsx: ^5.3.1
acorn-walk: ^7.2.0
@@ -2242,10 +2242,10 @@ __metadata:
ts-dedent: ^2.0.0
util-deprecate: ^1.0.2
peerDependencies:
- "@storybook/angular": 6.4.0-alpha.7
- "@storybook/vue": 6.4.0-alpha.7
- "@storybook/vue3": 6.4.0-alpha.7
- "@storybook/web-components": 6.4.0-alpha.7
+ "@storybook/angular": 6.4.0-alpha.11
+ "@storybook/vue": 6.4.0-alpha.11
+ "@storybook/vue3": 6.4.0-alpha.11
+ "@storybook/web-components": 6.4.0-alpha.11
lit: ^2.0.0-rc.1
lit-html: ^1.4.1 || ^2.0.0-rc.3
react: ^16.8.0 || ^17.0.0
@@ -2312,11 +2312,11 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
- "@storybook/router": 6.4.0-alpha.7
+ "@storybook/router": 6.4.0-alpha.11
"@types/qs": ^6.9.5
core-js: ^3.8.2
global: ^4.4.0
@@ -2340,10 +2340,10 @@ __metadata:
resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@jest/transform": ^26.6.2
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/core": 6.4.0-alpha.7
- "@storybook/core-common": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/core": 6.4.0-alpha.11
+ "@storybook/core-common": 6.4.0-alpha.11
"@types/glob": ^7.1.3
"@types/jest": ^26.0.16
"@types/jest-specific-snapshot": ^0.5.3
@@ -2413,13 +2413,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/router": 6.4.0-alpha.7
- "@storybook/source-loader": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/router": 6.4.0-alpha.11
+ "@storybook/source-loader": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
estraverse: ^5.2.0
loader-utils: ^2.0.0
@@ -2442,12 +2442,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
global: ^4.4.0
memoizerific: ^1.11.3
@@ -2468,12 +2468,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/router": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/router": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
core-js: ^3.8.2
global: ^4.4.0
regenerator-runtime: ^0.13.7
@@ -2488,13 +2488,13 @@ __metadata:
resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@reach/router": ^1.3.4
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
- "@storybook/router": 6.4.0-alpha.7
+ "@storybook/router": 6.4.0-alpha.11
"@storybook/semver": ^7.3.2
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/theming": 6.4.0-alpha.11
"@types/reach__router": ^1.3.7
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
@@ -2538,20 +2538,20 @@ __metadata:
"@babel/preset-env": ^7.12.11
"@babel/preset-react": ^7.12.10
"@babel/preset-typescript": ^7.12.7
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/channel-postmessage": 6.4.0-alpha.7
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-common": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/node-logger": 6.4.0-alpha.7
- "@storybook/router": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/channel-postmessage": 6.4.0-alpha.11
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-common": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/node-logger": 6.4.0-alpha.11
+ "@storybook/router": 6.4.0-alpha.11
"@storybook/semver": ^7.3.2
- "@storybook/theming": 6.4.0-alpha.7
- "@storybook/ui": 6.4.0-alpha.7
+ "@storybook/theming": 6.4.0-alpha.11
+ "@storybook/ui": 6.4.0-alpha.11
"@types/node": ^14.0.10
"@types/webpack": ^4.41.26
autoprefixer: ^9.8.6
@@ -2600,9 +2600,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
core-js: ^3.8.2
global: ^4.4.0
qs: ^6.10.0
@@ -2624,11 +2624,11 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/channel-postmessage": 6.4.0-alpha.7
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/channel-postmessage": 6.4.0-alpha.11
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
"@types/qs": ^6.9.5
"@types/webpack-env": ^1.16.0
@@ -2662,9 +2662,9 @@ __metadata:
resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@popperjs/core": ^2.6.0
- "@storybook/client-logger": 6.4.0-alpha.7
+ "@storybook/client-logger": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/theming": 6.4.0-alpha.11
"@types/color-convert": ^2.0.0
"@types/overlayscrollbars": ^1.12.0
"@types/react-syntax-highlighter": 11.0.5
@@ -2695,13 +2695,13 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/channel-postmessage": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/channel-postmessage": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
- "@storybook/ui": 6.4.0-alpha.7
+ "@storybook/ui": 6.4.0-alpha.11
airbnb-js-shims: ^2.2.1
ansi-to-html: ^0.6.11
core-js: ^3.8.2
@@ -2747,7 +2747,7 @@ __metadata:
"@babel/preset-react": ^7.12.10
"@babel/preset-typescript": ^7.12.7
"@babel/register": ^7.12.1
- "@storybook/node-logger": 6.4.0-alpha.7
+ "@storybook/node-logger": 6.4.0-alpha.11
"@storybook/semver": ^7.3.2
"@types/glob-base": ^0.3.0
"@types/micromatch": ^4.0.1
@@ -2795,12 +2795,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/builder-webpack4": 6.4.0-alpha.7
- "@storybook/core-client": 6.4.0-alpha.7
- "@storybook/core-common": 6.4.0-alpha.7
- "@storybook/csf-tools": 6.4.0-alpha.7
- "@storybook/manager-webpack4": 6.4.0-alpha.7
- "@storybook/node-logger": 6.4.0-alpha.7
+ "@storybook/builder-webpack4": 6.4.0-alpha.11
+ "@storybook/core-client": 6.4.0-alpha.11
+ "@storybook/core-common": 6.4.0-alpha.11
+ "@storybook/csf-tools": 6.4.0-alpha.11
+ "@storybook/manager-webpack4": 6.4.0-alpha.11
+ "@storybook/node-logger": 6.4.0-alpha.11
"@storybook/semver": ^7.3.2
"@types/node": ^14.0.10
"@types/node-fetch": ^2.5.7
@@ -2829,8 +2829,8 @@ __metadata:
util-deprecate: ^1.0.2
webpack: 4
peerDependencies:
- "@storybook/builder-webpack5": 6.4.0-alpha.7
- "@storybook/manager-webpack5": 6.4.0-alpha.7
+ "@storybook/builder-webpack5": 6.4.0-alpha.11
+ "@storybook/manager-webpack5": 6.4.0-alpha.11
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
@@ -2847,10 +2847,10 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/core-client": 6.4.0-alpha.7
- "@storybook/core-server": 6.4.0-alpha.7
+ "@storybook/core-client": 6.4.0-alpha.11
+ "@storybook/core-server": 6.4.0-alpha.11
peerDependencies:
- "@storybook/builder-webpack5": 6.4.0-alpha.7
+ "@storybook/builder-webpack5": 6.4.0-alpha.11
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
@@ -2899,12 +2899,12 @@ __metadata:
"@babel/core": ^7.12.10
"@babel/plugin-transform-template-literals": ^7.12.1
"@babel/preset-react": ^7.12.10
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/core-client": 6.4.0-alpha.7
- "@storybook/core-common": 6.4.0-alpha.7
- "@storybook/node-logger": 6.4.0-alpha.7
- "@storybook/theming": 6.4.0-alpha.7
- "@storybook/ui": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/core-client": 6.4.0-alpha.11
+ "@storybook/core-common": 6.4.0-alpha.11
+ "@storybook/node-logger": 6.4.0-alpha.11
+ "@storybook/theming": 6.4.0-alpha.11
+ "@storybook/ui": 6.4.0-alpha.11
"@types/node": ^14.0.10
"@types/webpack": ^4.41.26
babel-loader: ^8.2.2
@@ -2967,7 +2967,7 @@ __metadata:
resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@reach/router": ^1.3.4
- "@storybook/client-logger": 6.4.0-alpha.7
+ "@storybook/client-logger": 6.4.0-alpha.11
"@types/reach__router": ^1.3.7
core-js: ^3.8.2
fast-deep-equal: ^3.1.3
@@ -2998,8 +2998,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
"@storybook/csf": 0.0.1
core-js: ^3.8.2
estraverse: ^5.2.0
@@ -3021,7 +3021,7 @@ __metadata:
"@emotion/core": ^10.1.1
"@emotion/is-prop-valid": ^0.8.6
"@emotion/styled": ^10.0.27
- "@storybook/client-logger": 6.4.0-alpha.7
+ "@storybook/client-logger": 6.4.0-alpha.11
core-js: ^3.8.2
deep-object-diff: ^1.1.0
emotion-theming: ^10.0.27
@@ -3041,15 +3041,15 @@ __metadata:
resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A."
dependencies:
"@emotion/core": ^10.1.1
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/api": 6.4.0-alpha.7
- "@storybook/channels": 6.4.0-alpha.7
- "@storybook/client-logger": 6.4.0-alpha.7
- "@storybook/components": 6.4.0-alpha.7
- "@storybook/core-events": 6.4.0-alpha.7
- "@storybook/router": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/api": 6.4.0-alpha.11
+ "@storybook/channels": 6.4.0-alpha.11
+ "@storybook/client-logger": 6.4.0-alpha.11
+ "@storybook/components": 6.4.0-alpha.11
+ "@storybook/core-events": 6.4.0-alpha.11
+ "@storybook/router": 6.4.0-alpha.11
"@storybook/semver": ^7.3.2
- "@storybook/theming": 6.4.0-alpha.7
+ "@storybook/theming": 6.4.0-alpha.11
"@types/markdown-to-jsx": ^6.11.3
copy-to-clipboard: ^3.3.1
core-js: ^3.8.2
@@ -3082,10 +3082,10 @@ __metadata:
"@babel/plugin-syntax-dynamic-import": ^7.8.3
"@babel/plugin-syntax-import-meta": ^7.10.4
"@babel/preset-env": ^7.12.11
- "@storybook/addons": 6.4.0-alpha.7
- "@storybook/client-api": 6.4.0-alpha.7
- "@storybook/core": 6.4.0-alpha.7
- "@storybook/core-common": 6.4.0-alpha.7
+ "@storybook/addons": 6.4.0-alpha.11
+ "@storybook/client-api": 6.4.0-alpha.11
+ "@storybook/core": 6.4.0-alpha.11
+ "@storybook/core-common": 6.4.0-alpha.11
"@types/webpack-env": ^1.16.0
babel-plugin-bundled-import-meta: ^0.3.1
core-js: ^3.8.2
diff --git a/jest.config.js b/jest.config.js
index 5f94e6a820ea..46dff93a777e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -47,6 +47,7 @@ module.exports = {
'^.+\\.[jt]sx?$': '/scripts/utils/jest-transform-js.js',
'^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
},
+ transformIgnorePatterns: ['/node_modules/(?!lit-html).+\\.js'],
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
testPathIgnorePatterns: [
'/node_modules/',