From 15d4a2234802221ac23e9508793863dc06388b11 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 1 Sep 2022 20:53:27 +0200 Subject: [PATCH 1/4] add agnostic stories for addon-viewports --- .../template/stories/parameters.stories.ts | 52 ++++++++++++++++++ .../addon-viewport/custom-default.stories.js | 46 ---------------- .../stories/addon-viewport/default.stories.js | 18 ------ .../addons/viewport/addon-viewport.stories.ts | 55 ------------------- 4 files changed, 52 insertions(+), 119 deletions(-) create mode 100644 code/addons/viewport/template/stories/parameters.stories.ts delete mode 100644 code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js delete mode 100644 code/examples/official-storybook/stories/addon-viewport/default.stories.js delete mode 100644 code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts new file mode 100644 index 000000000000..06ab05a17dce --- /dev/null +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -0,0 +1,52 @@ +import globalThis from 'global'; +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; + +export default { + component: globalThis.Components.Button, + args: { + children: 'Click Me!', + }, + parameters: { + parameters: { + viewport: { + viewports: MINIMAL_VIEWPORTS, + }, + }, + chromatic: { disable: true }, + }, +}; + +export const Basic = { + parameters: {}, +}; + +export const Selected = { + parameters: { + viewport: { + defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0], + }, + }, +}; + +export const Custom = { + parameters: { + viewports: { + viewports: { + phone: { + name: 'Phone Width', + styles: { + height: '600px', + width: '100vh', + }, + type: 'mobile', + }, + }, + }, + }, +}; + +export const Disabled = { + parameters: { + viewports: { disable: true }, + }, +}; diff --git a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js deleted file mode 100644 index 8b6700546a25..000000000000 --- a/code/examples/official-storybook/stories/addon-viewport/custom-default.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { styled } from '@storybook/theming'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const Panel = styled.div(); - -export default { - title: 'Addons/Viewport/Custom Default (Kindle Fire 2)', - parameters: { - viewport: { - viewports: { - ...INITIAL_VIEWPORTS, - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - }, - }, - }, -}; - -export const Inherited = () => ( - - I've inherited Kindle Fire 2 viewport from my parent. - -); - -export const OverriddenViaWithViewportParameterizedDecorator = () => ( - - I respect my parents but I should be looking good on iPad. - -); -OverriddenViaWithViewportParameterizedDecorator.storyName = - 'Overridden via "withViewport" parameterized decorator'; -OverriddenViaWithViewportParameterizedDecorator.parameters = { - viewport: { defaultViewport: 'ipad' }, -}; - -export const Disabled = () => There should be no viewport selector in the toolbar; - -Disabled.parameters = { - viewport: { disable: true }, -}; diff --git a/code/examples/official-storybook/stories/addon-viewport/default.stories.js b/code/examples/official-storybook/stories/addon-viewport/default.stories.js deleted file mode 100644 index bdd2ee5ed7fe..000000000000 --- a/code/examples/official-storybook/stories/addon-viewport/default.stories.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { styled } from '@storybook/theming'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -const Panel = styled.div(); - -export default { - title: 'Addons/Viewport', - parameters: { - viewport: { - viewports: INITIAL_VIEWPORTS, - }, - }, -}; -export const DefaultFn = () => ( - I don't have problems being rendered using the default viewport. -); -DefaultFn.storyName = 'default'; diff --git a/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts b/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts deleted file mode 100644 index 6cd00ede64a3..000000000000 --- a/code/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { html } from 'lit'; -import type { Meta, StoryFn } from '@storybook/web-components'; -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; - -export default { - title: 'Addons / Viewport', - parameters: { - viewport: { - viewports: INITIAL_VIEWPORTS, - }, - }, -} as Meta; - -const Template: StoryFn<{ title: string }> = (args) => html`

${args.title}

`; - -export const Default = Template.bind({}); -Default.args = { - title: 'Click on the viewports icon on toolbar to make the viewport change', -}; - -export const CustomViewports = Template.bind({}); -CustomViewports.args = { - title: 'I am using a custom viewport for Kindle Fire 2', -}; -CustomViewports.parameters = { - viewport: { - viewports: { - kindleFire2: { - name: 'Kindle Fire 2', - styles: { - width: '600px', - height: '963px', - }, - }, - }, - defaultViewport: 'kindleFire2', - }, -}; - -export const Overriden = Template.bind({}); -Overriden.args = { - title: 'I have a different default viewport: ipad!', -}; -Overriden.storyName = 'Overridden via "defaultViewport" parameter'; -Overriden.parameters = { - viewport: { defaultViewport: 'ipad' }, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - title: 'I have disabled viewports addon', -}; -Disabled.parameters = { - viewport: { disable: true }, -}; From 9cc9803178c20b7ef08f4c8576f7bc48eb2661ab Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Sep 2022 12:01:28 +0200 Subject: [PATCH 2/4] fix typos --- .../viewport/template/stories/parameters.stories.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 06ab05a17dce..218395d09ff0 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -7,10 +7,8 @@ export default { children: 'Click Me!', }, parameters: { - parameters: { - viewport: { - viewports: MINIMAL_VIEWPORTS, - }, + viewport: { + viewports: MINIMAL_VIEWPORTS, }, chromatic: { disable: true }, }, @@ -30,7 +28,7 @@ export const Selected = { export const Custom = { parameters: { - viewports: { + viewport: { viewports: { phone: { name: 'Phone Width', @@ -47,6 +45,6 @@ export const Custom = { export const Disabled = { parameters: { - viewports: { disable: true }, + viewport: { disable: true }, }, }; From 7f1a7e6e537fce857760e0bbd1014b1501026f10 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Sep 2022 12:37:03 +0200 Subject: [PATCH 3/4] rename file --- .../stories/{parameters.stories.ts => parameters.stories.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/addons/viewport/template/stories/{parameters.stories.ts => parameters.stories.js} (100%) diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.js similarity index 100% rename from code/addons/viewport/template/stories/parameters.stories.ts rename to code/addons/viewport/template/stories/parameters.stories.js From 0880c84e4fb0cf885fa78a0a08a2989cbf30f378 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Sep 2022 14:25:02 +0200 Subject: [PATCH 4/4] rename --- .../stories/{parameters.stories.js => parameters.stories.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/addons/viewport/template/stories/{parameters.stories.js => parameters.stories.ts} (100%) diff --git a/code/addons/viewport/template/stories/parameters.stories.js b/code/addons/viewport/template/stories/parameters.stories.ts similarity index 100% rename from code/addons/viewport/template/stories/parameters.stories.js rename to code/addons/viewport/template/stories/parameters.stories.ts