From c2d4fe66e6901ab076c25393b6b25835a9817f3c Mon Sep 17 00:00:00 2001 From: Alan Orozco Date: Wed, 8 Sep 2021 09:41:55 -0700 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20Storybook=20`args`?= =?UTF-8?q?=20(second=20round)=20(#35930)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Partial for #35923 --- .../amp-accordion/1.0/storybook/Basic.js | 25 +- .../amp-accordion/1.0/storybook/Bind.amp.js | 17 +- .../amp-animation/0.1/storybook/Basic.amp.js | 25 +- .../amp-animation/0.1/storybook/Random.amp.js | 4 +- .../1.0/storybook/Basic.amp.js | 174 ++++++----- .../amp-base-carousel/1.0/storybook/Basic.js | 255 ++++++++++------ .../amp-brightcove/1.0/storybook/Basic.amp.js | 68 ++--- .../amp-brightcove/1.0/storybook/Basic.js | 19 +- .../1.0/storybook/Basic.amp.js | 282 ++++++------------ .../amp-date-countdown/1.0/storybook/Basic.js | 135 ++++----- .../amp-embedly-card/1.0/storybook/Basic.js | 11 +- .../amp-facebook/1.0/storybook/Basic.js | 168 ++++++----- .../amp-fit-text/1.0/storybook/Basic.amp.js | 41 +-- .../amp-fit-text/1.0/storybook/Basic.js | 87 +++--- 14 files changed, 605 insertions(+), 706 deletions(-) diff --git a/extensions/amp-accordion/1.0/storybook/Basic.js b/extensions/amp-accordion/1.0/storybook/Basic.js index d45cb66fbe09..fac6b796839f 100644 --- a/extensions/amp-accordion/1.0/storybook/Basic.js +++ b/extensions/amp-accordion/1.0/storybook/Basic.js @@ -1,5 +1,3 @@ -import {boolean, withKnobs} from '@storybook/addon-knobs'; - import * as Preact from '#preact'; import { @@ -12,7 +10,10 @@ import { export default { title: 'Accordion', component: BentoAccordion, - decorators: [withKnobs], + args: { + expandSingleSection: false, + animate: false, + }, }; /** @@ -44,15 +45,10 @@ function AccordionWithActions(props) { ); } -export const _default = () => { - const expandSingleSection = boolean('expandSingleSection', false); - const animate = boolean('animate', false); +export const _default = (args) => { return (
- +

Section 1

@@ -139,15 +135,10 @@ function AccordionWithEvents(props) { ); } -export const events = () => { - const expandSingleSection = boolean('expandSingleSection', false); - const animate = boolean('animate', false); +export const events = (args) => { return (
- +
); }; diff --git a/extensions/amp-accordion/1.0/storybook/Bind.amp.js b/extensions/amp-accordion/1.0/storybook/Bind.amp.js index d6ea4319cae8..6cd16c7b7e9b 100644 --- a/extensions/amp-accordion/1.0/storybook/Bind.amp.js +++ b/extensions/amp-accordion/1.0/storybook/Bind.amp.js @@ -1,12 +1,10 @@ import {withAmp} from '@ampproject/storybook-addon'; -import {boolean, withKnobs} from '@storybook/addon-knobs'; import * as Preact from '#preact'; export default { title: 'amp-accordion-1_0', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [ {name: 'amp-bind', version: '0.1'}, @@ -14,17 +12,16 @@ export default { ], experiments: ['bento'], }, + args: { + 'expand-single-section': false, + animate: false, + }, }; -export const withAmpBind = () => { - const expandSingleSection = boolean('expandSingleSection', false); - const animate = boolean('animate', false); +export const withAmpBind = (args) => { return (
- +

Section 1

Puppies are cute.
diff --git a/extensions/amp-animation/0.1/storybook/Basic.amp.js b/extensions/amp-animation/0.1/storybook/Basic.amp.js index 5280ab7acb22..ebb7520ba56c 100644 --- a/extensions/amp-animation/0.1/storybook/Basic.amp.js +++ b/extensions/amp-animation/0.1/storybook/Basic.amp.js @@ -1,5 +1,4 @@ import {withAmp} from '@ampproject/storybook-addon'; -import {select, text, withKnobs} from '@storybook/addon-knobs'; import * as Preact from '#preact'; @@ -29,6 +28,8 @@ const KEYFRAMES_OPTIONS = { }, }; +const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS); + const BLOCK_STYLE = { background: 'blue', width: '100px', @@ -37,22 +38,24 @@ const BLOCK_STYLE = { export default { title: 'Animation', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [{name: 'amp-animation', version: 0.1}], }, + argTypes: { + keyframesName: { + control: {type: 'select'}, + options: keyframesOptions, + }, + }, + args: { + keyframesName: keyframesOptions[0], + easing: 'cubic-bezier(0,0,.21,1)', + }, }; -export const Default = () => { - const keyframesOptions = Object.keys(KEYFRAMES_OPTIONS); - const keyframesName = select( - 'Keyframes', - keyframesOptions, - keyframesOptions[0] - ); +export const Default = ({easing, keyframesName}) => { const keyframes = KEYFRAMES_OPTIONS[keyframesName]; - const easing = text('Easing', 'cubic-bezier(0,0,.21,1)'); const spec = { animations: { selector: '#block', diff --git a/extensions/amp-animation/0.1/storybook/Random.amp.js b/extensions/amp-animation/0.1/storybook/Random.amp.js index df7af0e301ad..ac983b2695ee 100644 --- a/extensions/amp-animation/0.1/storybook/Random.amp.js +++ b/extensions/amp-animation/0.1/storybook/Random.amp.js @@ -1,5 +1,4 @@ import {withAmp} from '@ampproject/storybook-addon'; -import {withKnobs} from '@storybook/addon-knobs'; import * as Preact from '#preact'; @@ -28,8 +27,7 @@ const DROP_STYLE = { export default { title: 'Animation', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [{name: 'amp-animation', version: 0.1}], }, diff --git a/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js b/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js index 3d3a4f6d05d0..4cebf7ed9e33 100644 --- a/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js +++ b/extensions/amp-base-carousel/1.0/storybook/Basic.amp.js @@ -1,13 +1,9 @@ import * as Preact from '#preact'; -import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs'; import {withAmp} from '@ampproject/storybook-addon'; -const ORIENTATIONS = ['horizontal', 'vertical']; - export default { title: 'amp-base-carousel-1_0', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [ {name: 'amp-bind', version: '0.1'}, @@ -17,47 +13,58 @@ export default { }, }; -export const Default = () => { - const loop = boolean('loop', true); - const snap = boolean('snap', true); - const snapAlign = select('snap alignment', ['start', 'center'], 'start'); - const snapBy = number('snap by', 1); - const advanceCount = number('advance count', 1, {min: 1}); - const autoAdvance = boolean('auto advance', true); - const autoAdvanceCount = number('auto advance count', 1); - const autoAdvanceInterval = number('auto advance interval', 1000); - const autoAdvanceLoops = number('auto advance loops', 3); - const visibleCount = text('visible count', '(min-width: 400px) 2, 1'); - const outsetArrows = text('outset arrows', '(min-width: 400px) true, false'); - const controls = select('show controls', ['auto', 'always', 'never']); - const defaultSlide = number('default slide', 0); - const orientation = select('orientation', ORIENTATIONS, 'vertical'); - const slideCount = number('slide count', 5, {min: 0, max: 99}); +// Different exported stories use some of these. +const argTypes = { + slideCount: { + control: {type: 'number', min: 0, max: 99, step: 1}, + }, + controls: { + control: {type: 'inline-radio'}, + options: ['auto', 'always', 'never'], + }, + orientation: { + control: {type: 'inline-radio'}, + options: ['horizontal', 'vertical'], + }, + 'snap-align': { + control: {type: 'inline-radio'}, + options: ['start', 'center'], + }, + preset: { + name: 'random preset', + control: {type: 'inline-radio'}, + options: [1, 2, 3], + mapping: { + 1: [ + 143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, + 241, + ], + 2: [ + 225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, + 144, + ], + 3: [ + 252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, + 280, + ], + }, + }, +}; + +export const Default = ({slideCount, snap, ...args}) => { const colorIncrement = Math.floor(255 / (slideCount + 1)); return (
- {Array.from({length: slideCount}, (x, i) => { + {Array.from({length: args['slide-count']}, (x, i) => { const v = colorIncrement * (i + 1); return ( @@ -91,37 +98,48 @@ export const Default = () => { ); }; -export const mixedLength = () => { - const width = number('width', 300); - const height = number('height', 300); - const slideCount = number('slide count', 7, {min: 0, max: 99}); +Default.args = { + 'advance-count': 1, + 'auto-advance': true, + 'auto-advance-count': 1, + 'auto-advance-interval': 1000, + 'auto-advance-loops': 3, + controls: 'auto', + slide: 0, + loop: true, + orientation: 'vertical', + 'outset-arrows': '(min-width: 400px) true, false', + slideCount: 5, + snap: true, + 'snap-align': 'start', + 'snap-by': 1, + 'visible-count': '(min-width: 400px) 2, 1', +}; + +Default.argTypes = { + slideCount: argTypes.slideCount, + controls: argTypes.controls, + orientation: argTypes.orientation, + 'snap-align': argTypes['snap-align'], +}; + +export const MixedLength = ({ + orientation, + preset, + slideCount, + snap, + snapAlign, + ...args +}) => { const colorIncrement = Math.floor(255 / (slideCount + 1)); - const loop = boolean('loop', true); - const snap = boolean('snap', true); - const snapAlign = select('snap alignment', ['start', 'center'], 'start'); - const snapBy = number('snap by', 1); - const mixedLength = boolean('mixed length', true); - const controls = select('show controls', ['auto', 'always', 'never']); - const randomPreset = [ - [143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, 241], - [225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, 144], - [252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, 280], - ]; - const preset = select('random preset', [1, 2, 3]); - const orientation = select('orientation', ORIENTATIONS, 'vertical'); const horizontal = orientation == 'horizontal'; return ( {Array.from({length: slideCount}, (x, i) => { const v = colorIncrement * (i + 1); @@ -130,12 +148,8 @@ export const mixedLength = () => { style={{ backgroundColor: `rgb(${v}, 100, 100)`, border: 'solid white 1px', - width: horizontal - ? `${randomPreset[preset - 1 || 0][i]}px` - : '100px', - height: horizontal - ? '100px' - : `${randomPreset[preset - 1 || 0][i]}px`, + width: horizontal ? `${preset[i]}px` : '100px', + height: horizontal ? '100px' : `${preset[i]}px`, }} > ); @@ -144,10 +158,28 @@ export const mixedLength = () => { ); }; -export const customArrows = () => { - const width = number('width', 400); - const height = number('height', 200); - const slideCount = number('slide count', 7, {min: 0, max: 99}); +MixedLength.args = { + controls: 'auto', + height: 300, + width: 300, + slideCount: 5, + loop: true, + snap: true, + 'snap-align': 'start', + 'snap-by': 1, + 'mixed-length': true, + preset: 1, + orientation: 'vertical', +}; + +MixedLength.argTypes = { + controls: argTypes.controls, + orientation: argTypes.orientation, + preset: argTypes.preset, + 'snap-align': argTypes['snap-align'], +}; + +export const CustomArrows = ({height, slideCount, width}) => { const colorIncrement = Math.floor(255 / (slideCount + 1)); return ( @@ -170,4 +202,8 @@ export const customArrows = () => { ); }; -Default.storyName = 'default'; +CustomArrows.args = { + height: 300, + width: 300, + slideCount: 5, +}; diff --git a/extensions/amp-base-carousel/1.0/storybook/Basic.js b/extensions/amp-base-carousel/1.0/storybook/Basic.js index 6fe11365d0ef..99571b34cf26 100644 --- a/extensions/amp-base-carousel/1.0/storybook/Basic.js +++ b/extensions/amp-base-carousel/1.0/storybook/Basic.js @@ -1,15 +1,53 @@ import * as Preact from '#preact'; import {BentoBaseCarousel} from '../component'; -import {boolean, number, select, withKnobs} from '@storybook/addon-knobs'; - -const CONTROLS = ['auto', 'always', 'never']; -const SNAP_ALIGN = ['start', 'center']; -const ORIENTATIONS = ['horizontal', 'vertical']; export default { title: 'BaseCarousel', component: BentoBaseCarousel, - decorators: [withKnobs], +}; + +// Different exported stories use some of these. +const argTypes = { + slideCount: { + control: {type: 'number', min: 0, max: 99, step: 1}, + }, + advanceCount: { + control: {type: 'number', min: 1}, + }, + visibleCount: { + control: {type: 'number', min: 1}, + }, + controls: { + control: {type: 'inline-radio'}, + options: ['auto', 'always', 'never'], + }, + orientation: { + control: {type: 'inline-radio'}, + options: ['horizontal', 'vertical'], + }, + snapAlign: { + control: {type: 'inline-radio'}, + options: ['start', 'center'], + }, + preset: { + name: 'random preset', + control: {type: 'inline-radio'}, + options: [1, 2, 3], + mapping: { + 1: [ + 143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, + 241, + ], + 2: [ + 225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, + 144, + ], + 3: [ + 252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, + 280, + ], + }, + }, }; /** @@ -32,34 +70,19 @@ function CarouselWithActions(props) { ); } -export const _default = () => { - const width = number('width', 225); - const height = number('height', 440); - const slideCount = number('slide count', 5, {min: 0, max: 99}); - const snap = boolean('snap', true); - const snapAlign = select('snap alignment', SNAP_ALIGN, 'start'); - const snapBy = number('snap by', 1); - const orientation = select('orientation', ORIENTATIONS, 'vertical'); - const loop = boolean('loop', true); - const advanceCount = number('advance count', 1, {min: 1}); - const visibleCount = number('visible count', 2, {min: 1}); - const outsetArrows = boolean('outset arrows', false); +export const _default = ({ + height, + slideCount, + visibleCount, + width, + ...args +}) => { const colorIncrement = Math.floor(255 / (slideCount + 1)); - const controls = select('show controls', CONTROLS); - const defaultSlide = number('default slide', 0); return ( {Array.from({length: slideCount}, (x, i) => { const v = colorIncrement * (i + 1); @@ -82,43 +105,50 @@ export const _default = () => { ); }; -export const mixedLength = () => { - const width = number('width', 300); - const height = number('height', 300); +_default.args = { + width: 225, + height: 440, + controls: 'auto', + defaultSlide: 0, + slideCount: 5, + loop: true, + orientation: 'vertical', + outsetArrows: false, + snap: true, + snapAlign: 'start', + snapBy: 1, + visibleCount: 2, + advanceCount: 1, +}; + +_default.argTypes = { + slideCount: argTypes.slideCount, + controls: argTypes.controls, + orientation: argTypes.orientation, + snapAlign: argTypes.snapAlign, + advanceCount: argTypes.advanceCount, + visibleCount: argTypes.visibleCount, +}; + +export const MixedLength = ({ + height, + orientation, + preset, + snap, + snapAlign, + width, + ...args +}) => { const slideCount = 15; const colorIncrement = Math.floor(255 / (slideCount + 1)); - const autoAdvance = boolean('auto advance', true); - const autoAdvanceCount = number('auto advance count', 1); - const autoAdvanceInterval = number('auto advance interval', 1000); - const autoAdvanceLoops = number('auto advance loops', 3); - const loop = boolean('loop', true); - const snap = boolean('snap', true); - const snapAlign = select('snap alignment', SNAP_ALIGN, 'start'); - const snapBy = number('snap by', 1); - const mixedLength = boolean('mixed length', true); - const controls = select('show controls', ['auto', 'always', 'never']); - const randomPreset = [ - [143, 245, 289, 232, 280, 233, 182, 155, 114, 269, 242, 196, 249, 265, 241], - [225, 158, 201, 205, 230, 233, 231, 255, 143, 264, 227, 157, 120, 203, 144], - [252, 113, 115, 186, 248, 188, 162, 104, 100, 109, 175, 227, 143, 249, 280], - ]; - const preset = select('random preset', [1, 2, 3]); - const orientation = select('orientation', ORIENTATIONS, 'vertical'); const horizontal = orientation == 'horizontal'; return ( {Array.from({length: slideCount}, (x, i) => { const v = colorIncrement * (i + 1); @@ -127,12 +157,8 @@ export const mixedLength = () => { style={{ backgroundColor: `rgb(${v}, 100, 100)`, border: 'solid white 1px', - width: horizontal - ? `${randomPreset[preset - 1 || 0][i]}px` - : '100px', - height: horizontal - ? '100px' - : `${randomPreset[preset - 1 || 0][i]}px`, + width: horizontal ? `${preset[i]}px` : '100px', + height: horizontal ? '100px' : `${preset[i]}px`, }} > ); @@ -141,11 +167,29 @@ export const mixedLength = () => { ); }; -export const provideArrows = () => { - const outsetArrows = boolean('outset arrows', false); - const width = number('width', 440); - const height = number('height', 225); - const controls = select('show controls', CONTROLS); +MixedLength.args = { + height: 300, + width: 300, + autoAdvance: true, + autoAdvanceCount: 1, + autoAdvanceInterval: 1000, + autoAdvanceLoops: 3, + controls: 'auto', + loop: true, + snap: true, + snapAlign: 'start', + snapBy: 1, + mixedLength: true, + preset: 1, + orientation: 'vertical', +}; + +MixedLength.argTypes = { + controls: argTypes.controls, + orientation: argTypes.orientation, + preset: argTypes.preset, +}; +export const ProvideArrows = ({height, width, ...args}) => { const myButtonStyle = { background: 'lightblue', borderRadius: '50%', @@ -165,11 +209,10 @@ export const provideArrows = () => { }; return ( ←} arrowNextAs={(props) => →} + {...args} > {['lightcoral', 'peachpuff', 'lavender'].map((color) => (
@@ -178,14 +221,24 @@ export const provideArrows = () => { ); }; -export const WithCaptions = () => { - const controls = select('show controls', CONTROLS); +ProvideArrows.args = { + height: 300, + width: 300, + controls: 'auto', + outsetArrows: false, +}; + +ProvideArrows.argTypes = { + controls: argTypes.controls, +}; + +export const WithCaptions = (args) => { return (
{ ); }; -export const AutoAdvance = () => { - const slideCount = number('slide count', 5, {min: 0, max: 99}); - const snap = boolean('snap', true); - const snapAlign = select('snap alignment', SNAP_ALIGN, 'start'); - const snapBy = number('snap by', 1); - const loop = boolean('loop', true); - const autoAdvance = boolean('auto advance', true); - const autoAdvanceCount = number('auto advance count', 1); - const autoAdvanceInterval = number('auto advance interval', 1000); - const autoAdvanceLoops = number('auto advance loops', 3); - const advanceCount = number('advance count', 1, {min: 1}); - const visibleCount = number('visible count', 2, {min: 1}); +WithCaptions.args = { + controls: 'auto', +}; + +WithCaptions.argTypes = { + controls: argTypes.controls, +}; + +export const AutoAdvance = ({slideCount, ...args}) => { const colorIncrement = Math.floor(255 / (slideCount + 1)); return ( - + {Array.from({length: slideCount}, (x, i) => { const v = colorIncrement * (i + 1); return ( @@ -259,3 +297,24 @@ export const AutoAdvance = () => { ); }; + +AutoAdvance.args = { + advanceCount: 1, + autoAdvance: true, + autoAdvanceCount: 1, + autoAdvanceInterval: 1000, + autoAdvanceLoops: 3, + slideCount: 5, + loop: true, + snap: true, + snapAlign: 'start', + snapBy: 1, + visibleCount: 2, +}; + +AutoAdvance.argTypes = { + advanceCount: argTypes.advanceCount, + snapAlign: argTypes.snapAlign, + slideCount: argTypes.slideCount, + visibleCount: argTypes.visibleCount, +}; diff --git a/extensions/amp-brightcove/1.0/storybook/Basic.amp.js b/extensions/amp-brightcove/1.0/storybook/Basic.amp.js index 7c9a6cdf8345..591c6cc8c70e 100644 --- a/extensions/amp-brightcove/1.0/storybook/Basic.amp.js +++ b/extensions/amp-brightcove/1.0/storybook/Basic.amp.js @@ -1,50 +1,32 @@ import * as Preact from '#preact'; import {withAmp} from '@ampproject/storybook-addon'; -import {text, withKnobs} from '@storybook/addon-knobs'; +import {VideoElementWithActions} from '../../../amp-video/1.0/storybook/_helpers'; export default { title: 'amp-brightcove-1_0', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [{name: 'amp-brightcove', version: '1.0'}], experiments: ['bento'], }, + args: { + autoplay: false, + 'data-video-id': 'ref:amp-docs-sample', + 'data-player-id': 'SyIOV8yWM', + 'data-account': '1290862519001', + 'data-referrer': 'EXTERNAL_REFERRER', + height: '270', + width: '480', + }, }; -export const Default = () => { - return ( - - ); +export const Default = (args) => { + return ; }; -export const WithPlaceholderAndFallback = () => { - const videoid = text('videoid', 'ref:amp-docs-sample'); - const playerid = text('playerid', 'SyIOV8yWM'); - const account = text('account', '1290862519001'); - const height = text('height', '270'); - const width = text('width', '480'); - +export const WithPlaceholderAndFallback = (args) => { return ( - +
Placeholder. Loading content...
@@ -56,26 +38,14 @@ export const WithPlaceholderAndFallback = () => { ); }; -export const Actions = () => { +export const Actions = (args) => { return ( - <> - - - - - - -

Autoplay

+ - + ); }; diff --git a/extensions/amp-brightcove/1.0/storybook/Basic.js b/extensions/amp-brightcove/1.0/storybook/Basic.js index 01a2574e2df7..8aa336dcd630 100644 --- a/extensions/amp-brightcove/1.0/storybook/Basic.js +++ b/extensions/amp-brightcove/1.0/storybook/Basic.js @@ -1,20 +1,17 @@ import * as Preact from '#preact'; import {Brightcove} from '../component'; -import {withKnobs} from '@storybook/addon-knobs'; export default { title: 'Brightcove', component: Brightcove, - decorators: [withKnobs], + args: { + autoplay: false, + videoId: 'ref:amp-docs-sample', + player: 'SyIOV8yWM', + account: '1290862519001', + }, }; -export const _default = () => { - return ( - - ); +export const _default = (args) => { + return ; }; diff --git a/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js b/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js index 97a71844b66c..5d74a3b1a8ac 100644 --- a/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js +++ b/extensions/amp-date-countdown/1.0/storybook/Basic.amp.js @@ -1,12 +1,10 @@ import {withAmp} from '@ampproject/storybook-addon'; -import {boolean, date, select, text, withKnobs} from '@storybook/addon-knobs'; import * as Preact from '#preact'; export default { title: 'amp-date-countdown-1_0', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [ {name: 'amp-date-countdown', version: '1.0'}, @@ -14,93 +12,92 @@ export default { ], experiments: ['bento'], }, + argTypes: { + dateAttribute: { + name: 'date attribute', + control: {type: 'radio'}, + defaultValue: 'end-date', + options: ['end-date', 'timeleft-ms', 'timestamp-ms', 'timestamp-seconds'], + }, + 'end-date': { + name: 'end date', + defaultValue: new Date(Date.now() + 10000), + control: {type: 'date'}, + }, + locale: { + name: 'locale', + control: {type: 'select'}, + defaultValue: 'en', + options: [ + 'de', + 'en', + 'es', + 'fr', + 'id', + 'it', + 'ja', + 'ko', + 'nl', + 'pt', + 'ru', + 'th', + 'tr', + 'vi', + 'zh-cn', + 'zh-tw', + ], + }, + 'when-ended': { + name: 'when-ended', + defaultValue: 'stop', + control: {type: 'inline-radio'}, + options: ['stop', 'continue'], + }, + 'biggest-unit': { + name: 'biggest-unit', + control: {type: 'inline-radio'}, + defaultValue: null, + options: [null, 'DAYS', 'HOURS', 'MINUTES', 'SECONDS'], + }, + }, + args: { + 'timeleft-ms': 20000, + 'timestamp-ms': Date.now() + 30000, + 'timestamp-seconds': Math.floor(Date.now() / 1000) + 40, + 'offset-seconds': 0, + 'count-up': false, + }, }; -const DATE_ATTRIBUTE_CONFIGURATIONS = [ - 'end-date', - 'timeleft-ms', - 'timestamp-ms', - 'timestamp-seconds', -]; - -const LOCALE_CONFIGURATIONS = [ - 'google', - 'de', - 'en', - 'es', - 'fr', - 'id', - 'it', - 'ja', - 'ko', - 'nl', - 'pt', - 'ru', - 'th', - 'tr', - 'vi', - 'zh-cn', - 'zh-tw', -]; - -const WHEN_ENDED_CONFIGURATIONS = ['stop', 'continue']; - -const BIGGEST_UNIT_CONFIGURATIONS = [ - null, - 'DAYS', - 'HOURS', - 'MINUTES', - 'SECONDS', -]; - -export const Default = () => { - const dateAttribute = select( - 'Select a "Date Attribute"', - DATE_ATTRIBUTE_CONFIGURATIONS, - DATE_ATTRIBUTE_CONFIGURATIONS[0] - ); - const endDate = date('end-date', new Date(Date.now() + 10000)); - const timeleftMs = text('timeleft-ms', 20000); - const timestampMs = text('timestamp-ms', Date.now() + 30000); - const timestampSeconds = text( - 'timestamp-seconds', - Math.floor(Date.now() / 1000) + 40 - ); - - const offsetSeconds = text('offset-seconds', 0); - const locale = select( - 'locale', - LOCALE_CONFIGURATIONS, - LOCALE_CONFIGURATIONS[0] - ); - const whenEnded = select( - 'whenEnded', - WHEN_ENDED_CONFIGURATIONS, - WHEN_ENDED_CONFIGURATIONS[0] - ); - const biggestUnit = select( - 'biggestUnit', - BIGGEST_UNIT_CONFIGURATIONS, - BIGGEST_UNIT_CONFIGURATIONS[0] - ); - const countUp = boolean('count-up', false); - +const AmpDateCountdownUsingArgs = ({children, dateAttribute, ...args}) => { return ( + {children} + + ); +}; + +export const Default = (args) => { + return ( + - + ); }; -Default.storyName = 'default'; - -export const DefaultRenderer = () => { - const dateAttribute = select( - 'Select a "Date Attribute"', - DATE_ATTRIBUTE_CONFIGURATIONS, - DATE_ATTRIBUTE_CONFIGURATIONS[0] - ); - const endDate = date('end-date', new Date(Date.now() + 10000)); - const timeleftMs = text('timeleft-ms', 20000); - const timestampMs = text('timestamp-ms', Date.now() + 30000); - const timestampSeconds = text( - 'timestamp-seconds', - Math.floor(Date.now() / 1000) + 40 - ); - - const offsetSeconds = text('offset-seconds', 0); - const locale = select( - 'locale', - LOCALE_CONFIGURATIONS, - LOCALE_CONFIGURATIONS[0] - ); - const whenEnded = select( - 'whenEnded', - WHEN_ENDED_CONFIGURATIONS, - WHEN_ENDED_CONFIGURATIONS[0] - ); - const biggestUnit = select( - 'biggestUnit', - BIGGEST_UNIT_CONFIGURATIONS, - BIGGEST_UNIT_CONFIGURATIONS[0] - ); - const countUp = boolean('count-up', false); - - return ( - - ); +export const DefaultRenderer = (args) => { + return ; }; -DefaultRenderer.storyName = 'default renderer'; - -export const ExternalTemplate = () => { - const template = select('template', ['template1', 'template2'], 'template1'); - const dateAttribute = select( - 'Select a "Date Attribute"', - DATE_ATTRIBUTE_CONFIGURATIONS, - DATE_ATTRIBUTE_CONFIGURATIONS[0] - ); - const endDate = date('end-date', new Date(Date.now() + 10000)); - const timeleftMs = text('timeleft-ms', 20000); - const timestampMs = text('timestamp-ms', Date.now() + 30000); - const timestampSeconds = text( - 'timestamp-seconds', - Math.floor(Date.now() / 1000) + 40 - ); - - const offsetSeconds = text('offset-seconds', 0); - const locale = select( - 'locale', - LOCALE_CONFIGURATIONS, - LOCALE_CONFIGURATIONS[0] - ); - const whenEnded = select( - 'whenEnded', - WHEN_ENDED_CONFIGURATIONS, - WHEN_ENDED_CONFIGURATIONS[0] - ); - const biggestUnit = select( - 'biggestUnit', - BIGGEST_UNIT_CONFIGURATIONS, - BIGGEST_UNIT_CONFIGURATIONS[0] - ); - const countUp = boolean('count-up', false); - +export const ExternalTemplate = (args) => { return (
- +
); }; -ExternalTemplate.storyName = 'external template'; +ExternalTemplate.argTypes = { + template: { + name: 'template', + control: {type: 'inline-radio'}, + defaultValue: 'template1', + options: ['template1', 'template2'], + }, +}; diff --git a/extensions/amp-date-countdown/1.0/storybook/Basic.js b/extensions/amp-date-countdown/1.0/storybook/Basic.js index 7c9d272fb0ca..43cbd4d03c52 100644 --- a/extensions/amp-date-countdown/1.0/storybook/Basic.js +++ b/extensions/amp-date-countdown/1.0/storybook/Basic.js @@ -1,5 +1,3 @@ -import {boolean, date, select, withKnobs} from '@storybook/addon-knobs'; - import * as Preact from '#preact'; import {BentoDateCountdown} from '../component'; @@ -7,66 +5,59 @@ import {BentoDateCountdown} from '../component'; export default { title: 'DateCountdown', component: BentoDateCountdown, - decorators: [withKnobs], -}; - -const LOCALE_CONFIGURATIONS = [ - 'google', - 'de', - 'en', - 'es', - 'fr', - 'id', - 'it', - 'ja', - 'ko', - 'nl', - 'pt', - 'ru', - 'th', - 'tr', - 'vi', - 'zh-cn', - 'zh-tw', -]; - -const WHEN_ENDED_CONFIGURATIONS = ['stop', 'continue']; + argTypes: { + datetime: { + name: 'datetime', + defaultValue: new Date(Date.now() + 10000), + control: {type: 'date'}, + }, + locale: { + name: 'locale', + control: {type: 'select'}, + defaultValue: 'en', + options: [ + 'de', + 'en', + 'es', + 'fr', + 'id', + 'it', + 'ja', + 'ko', + 'nl', + 'pt', + 'ru', + 'th', + 'tr', + 'vi', + 'zh-cn', + 'zh-tw', + ], + }, + whenEnded: { + name: 'whenEnded', + defaultValue: 'stop', + control: {type: 'inline-radio'}, + options: ['stop', 'continue'], + }, + biggestUnit: { + name: 'biggestUnit', + control: {type: 'inline-radio'}, + defaultValue: null, + options: [null, 'DAYS', 'HOURS', 'MINUTES', 'SECONDS'], + }, + }, -const BIGGEST_UNIT_CONFIGURATIONS = [ - null, - 'DAYS', - 'HOURS', - 'MINUTES', - 'SECONDS', -]; - -export const _default = () => { - const datetime = date('endDate', new Date(Date.now() + 10000)); - const locale = select( - 'locale', - LOCALE_CONFIGURATIONS, - LOCALE_CONFIGURATIONS[0] - ); - const whenEnded = select( - 'whenEnded', - WHEN_ENDED_CONFIGURATIONS, - WHEN_ENDED_CONFIGURATIONS[0] - ); - const biggestUnit = select( - 'biggestUnit', - BIGGEST_UNIT_CONFIGURATIONS, - BIGGEST_UNIT_CONFIGURATIONS[0] - ); - const countUp = boolean('countUp', false); + args: { + countUp: false, + }, +}; +export const _default = (args) => { return (
(
{`${data.days} ${data.dd} ${data.d}`} @@ -78,39 +69,15 @@ export const _default = () => { {`${data.seconds} ${data.ss} ${data.s}`}
)} - > + />
); }; -export const defaultRenderer = () => { - const datetime = date('endDate', new Date(Date.now() + 10000)); - const locale = select( - 'locale', - LOCALE_CONFIGURATIONS, - LOCALE_CONFIGURATIONS[0] - ); - const whenEnded = select( - 'whenEnded', - WHEN_ENDED_CONFIGURATIONS, - WHEN_ENDED_CONFIGURATIONS[0] - ); - const biggestUnit = select( - 'biggestUnit', - BIGGEST_UNIT_CONFIGURATIONS, - BIGGEST_UNIT_CONFIGURATIONS[0] - ); - const countUp = boolean('countUp', false); - +export const defaultRenderer = (args) => { return (
- +
); }; diff --git a/extensions/amp-embedly-card/1.0/storybook/Basic.js b/extensions/amp-embedly-card/1.0/storybook/Basic.js index 2874c37ca015..401da5a50c55 100644 --- a/extensions/amp-embedly-card/1.0/storybook/Basic.js +++ b/extensions/amp-embedly-card/1.0/storybook/Basic.js @@ -1,5 +1,3 @@ -import {text, withKnobs} from '@storybook/addon-knobs'; - import * as Preact from '#preact'; import {BentoEmbedlyCard} from '../component'; @@ -8,7 +6,6 @@ import {BentoEmbedlyContext} from '../embedly-context'; export default { title: 'EmbedlyCard', component: BentoEmbedlyCard, - decorators: [withKnobs], }; export const _default = () => { @@ -21,9 +18,7 @@ export const _default = () => { ); }; -export const WithAPIKey = () => { - const apiKey = text('BentoEmbedly API Key', 'valid-api-key'); - +export const WithApiKey = ({apiKey}) => { return ( { ); }; + +WithApiKey.args = { + apiKey: 'valid-api-key', +}; diff --git a/extensions/amp-facebook/1.0/storybook/Basic.js b/extensions/amp-facebook/1.0/storybook/Basic.js index a5dae21bb6b5..3cf6dd025c87 100644 --- a/extensions/amp-facebook/1.0/storybook/Basic.js +++ b/extensions/amp-facebook/1.0/storybook/Basic.js @@ -1,17 +1,9 @@ import * as Preact from '#preact'; import {Facebook} from '../component'; -import { - boolean, - optionsKnob, - select, - text, - withKnobs, -} from '@storybook/addon-knobs'; export default { title: 'Facebook', component: Facebook, - decorators: [withKnobs], }; const SAMPLE_HREFS = { @@ -22,113 +14,131 @@ const SAMPLE_HREFS = { 'https://www.facebook.com/NASA/photos/a.67899501771/10159193669016772/?comment_id=10159193676606772', }; -export const _default = () => { - const embedAs = select('embed type', ['post', 'video', 'comment'], 'post'); - const href = SAMPLE_HREFS[embedAs]; - const allowFullScreen = boolean('allowfullscreen', false); - const locale = boolean('french locale') ? 'fr_FR' : undefined; - const showText = boolean('show text (video only)', false); - const includeCommentParent = boolean( - 'include comment parent (comment only)', - false - ); +export const _default = ({frenchLocale, ...args}) => { + const locale = frenchLocale ? 'fr_FR' : undefined; return ( This text is inside. ); }; -export const Comments = () => { - const href = text( - 'href', - 'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html' - ); - const numPosts = boolean('show 5 comments max') ? 5 : undefined; - const orderBy = boolean('order by time') ? 'time' : undefined; - const locale = boolean('french locale') ? 'fr_FR' : undefined; +_default.args = { + frenchLocale: false, + embedAs: 'post', + allowFullScreen: false, + showText: false, + includeCommentParent: false, +}; + +_default.argTypes = { + embedAs: { + control: {type: 'select'}, + options: ['post', 'video', 'comment'], + }, + showText: { + name: 'showText (video only)', + }, + includeCommentParent: { + name: 'includeCommentParent (comment only)', + }, +}; + +export const Comments = ({frenchLocale, orderByTime, ...args}) => { + const orderBy = orderByTime ? 'time' : undefined; + const locale = frenchLocale ? 'fr_FR' : undefined; return ( ); }; -export const Like = () => { - const href = text('href', 'https://www.facebook.com/nasa/'); - const locale = boolean('french locale') ? 'fr_FR' : undefined; +Comments.args = { + href: 'http://www.directlyrics.com/adele-25-complete-album-lyrics-news.html', + numPosts: 5, + orderByTime: false, + frenchLocale: false, +}; - const action = select('action', ['like', 'recommend'], undefined); - const colorscheme = select( - 'colorscheme (broken)', - ['light', 'dark'], - undefined - ); - const kdSite = boolean('kd_site') || undefined; - const layout = select( - 'layout', - ['standard', 'button_count', 'button', 'box_count'], - undefined - ); - const refLabel = text('ref', undefined); - const share = boolean('share') || undefined; - const size = select('size (small by default)', ['large', 'small'], undefined); +export const Like = ({frenchLocale, ...args}) => { + const locale = frenchLocale ? 'fr_FR' : undefined; return ( + {...args} + /> ); }; -export const Page = () => { - const href = text('href', 'https://www.facebook.com/nasa/'); - const locale = boolean('french locale') ? 'fr_FR' : undefined; +Like.args = { + frenchLocale: false, + href: 'https://www.facebook.com/nasa/', + kdSite: false, + size: 'small', + refLabel: '', + share: false, +}; - const hideCover = boolean('hide cover') ? 'true' : undefined; - const hideCta = boolean('hide cta') ? 'true' : undefined; - const smallHeader = boolean('small header') ? 'true' : undefined; - const showFacepile = boolean('show facepile') ? undefined : 'false'; - const tabs = optionsKnob( - 'tabs', - {timeline: 'timeline', events: 'events', messages: 'messages'}, - undefined, - {display: 'inline-check'} - ); +Like.argTypes = { + layout: { + name: 'layout', + control: {type: 'select'}, + options: ['standard', 'button_count', 'button', 'box_count'], + }, + colorscheme: { + name: 'colorscheme (broken)', + control: {type: 'select'}, + options: ['light', 'dark'], + }, + action: { + name: 'action', + control: {type: 'select'}, + options: ['like', 'recommend'], + }, + size: { + name: 'size', + control: {type: 'select'}, + options: ['large', 'small'], + }, +}; +export const Page = ({frenchLocale, ...args}) => { + const locale = frenchLocale ? 'fr_FR' : undefined; return ( ); }; + +Page.args = { + frenchLocale: false, + href: 'https://www.facebook.com/nasa/', + hideCover: false, + hideCta: false, + smallHeader: false, + showFacepile: true, + tabs: 'timeline', +}; + +Page.argTypes = { + tabs: { + control: {type: 'inline-check'}, + options: ['timeline', 'events', 'messages'], + }, +}; diff --git a/extensions/amp-fit-text/1.0/storybook/Basic.amp.js b/extensions/amp-fit-text/1.0/storybook/Basic.amp.js index 2b22eb81abf2..5edcc0a66395 100644 --- a/extensions/amp-fit-text/1.0/storybook/Basic.amp.js +++ b/extensions/amp-fit-text/1.0/storybook/Basic.amp.js @@ -1,11 +1,9 @@ import * as Preact from '#preact'; -import {number, text, withKnobs} from '@storybook/addon-knobs'; import {withAmp} from '@ampproject/storybook-addon'; export default { title: 'amp-fit-text-1_0', - decorators: [withKnobs, withAmp], - + decorators: [withAmp], parameters: { extensions: [{name: 'amp-fit-text', version: '1.0'}], experiments: ['bento'], @@ -28,36 +26,32 @@ export const ScaleUpToCover = () => { ScaleUpToCover.storyName = 'Scale up to cover'; -export const ScaleUpOverflowEllipsis = () => { - const minFontSize = number('minFontSize', 42); - const content = text( - 'content', - ` - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at - aeque inermis reprehendunt. - ` - ); +export const ScaleUpOverflowEllipsis = ({content, ...args}) => { return ( ); }; -ScaleUpOverflowEllipsis.storyName = 'Scale up + overflow + ellipsis'; +ScaleUpOverflowEllipsis.args = { + 'min-font-size': 42, + content: ` + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at + aeque inermis reprehendunt. + `, +}; export const ScaleDown = () => { return ( Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te @@ -69,23 +63,18 @@ export const ScaleDown = () => { ); }; -ScaleDown.storyName = 'Scale down'; - export const ScaleDownMore = () => { return ( Superlongword text ); }; -ScaleDownMore.storyName = 'Scale down more'; - export const LayoutResponsive = () => { return (
{ @@ -105,5 +94,3 @@ export const LayoutResponsive = () => {
); }; - -LayoutResponsive.storyName = 'layout=responsive'; diff --git a/extensions/amp-fit-text/1.0/storybook/Basic.js b/extensions/amp-fit-text/1.0/storybook/Basic.js index 386bcb3ada71..732426dceb8b 100644 --- a/extensions/amp-fit-text/1.0/storybook/Basic.js +++ b/extensions/amp-fit-text/1.0/storybook/Basic.js @@ -1,58 +1,42 @@ import * as Preact from '#preact'; import {BentoFitText} from '../component'; -import {number, text, withKnobs} from '@storybook/addon-knobs'; export default { title: 'FitText', component: BentoFitText, - decorators: [withKnobs], + args: { + minFontSize: 35, + maxFontSize: 72, + width: 300, + height: 200, + }, }; -export const _default = () => { - const minFontSize = number('minFontSize', 35); - const maxFontSize = number('maxFontSize', 72); - const width = number('width', 300); - const height = number('height', 200); +export const _default = ({height, width, ...args}) => { return ( - + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. ); }; -export const scaleUpOverflowEllipsis = () => { - const minFontSize = number('minFontSize', 42); - const maxFontSize = number('maxFontSize', 72); - const width = number('width', 300); - const height = number('height', 200); +export const ScaleUpOverflowEllipsis = ({height, width, ...args}) => { return ( - + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. ); }; -export const scaleDown = () => { - const minFontSize = number('minFontSize', 6); - const maxFontSize = number('maxFontSize', 72); - const width = number('width', 300); - const height = number('height', 200); +ScaleUpOverflowEllipsis.args = { + minFontSize: 42, +}; + +export const ScaleDown = ({height, width, ...args}) => { return ( - + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt. Propriae tincidunt id nec, elit nusquam te mea, ius noster platonem in. Mea an idque minim, sit sale deleniti @@ -63,35 +47,32 @@ export const scaleDown = () => { ); }; -export const scaleDownMore = () => { - const minFontSize = number('minFontSize', 6); - const maxFontSize = number('maxFontSize', 72); - const width = number('width', 108); - const height = number('height', 78); +ScaleDown.args = { + minFontSize: 6, +}; + +export const ScaleDownMore = ({height, width, ...args}) => { return ( - + Superlongword text ); }; -export const configureContent = () => { - const content = text('Content', 'hello world'); - const minFontSize = number('minFontSize', 6); - const maxFontSize = number('maxFontSize', 200); - const width = number('width', 400); - const height = number('height', 400); +ScaleDownMore.args = { + minFontSize: 6, +}; + +export const ConfigureContent = ({content, height, width, ...args}) => { return ( - + {content} ); }; + +ConfigureContent.args = { + minFontSize: 6, + maxFontSize: 200, + content: 'hello world', +};