diff --git a/README.md b/README.md index 64a269a..7963d84 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,25 @@ storiesOf('foo', module).add('bar', () => , { }) ``` +### Multiple designs for single story + +You can attach more than one designs by passing array of config to `design` parameter. + +```js +design: [ + { + type: 'pdf', + url: 'https://my-pdf' + }, + { + // Specify tab name by passing "name" prop + name: 'Image Preview', + type: 'image', + url: 'https://my-image' + } +] +``` + ## Similar projects - [storybook-addon-figma](https://github.com/hharnisc/storybook-addon-figma) diff --git a/packages/examples/stories/index.stories.js b/packages/examples/stories/index.stories.js index 11a7f7a..2aa61b1 100644 --- a/packages/examples/stories/index.stories.js +++ b/packages/examples/stories/index.stories.js @@ -104,6 +104,37 @@ storiesOf('Examples|Image', module) }) }) +storiesOf('Examples|Advanced', module) + .addDecorator(withDesign) + .add('Embed multiple designs', () => , { + design: config([ + { + type: 'figma', + url: + 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample' + }, + { + type: 'pdf', + url: samplePdf + } + ]) + }) + .add('Set tab names', () => , { + design: config([ + { + name: 'Foo', + type: 'figma', + url: + 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample' + }, + { + name: 'Bar', + type: 'pdf', + url: samplePdf + } + ]) + }) + storiesOf('Tests|Placeholder', module) .addDecorator(withDesign) .add('Show placeholder when no `design` parameter', () => ( diff --git a/packages/storybook-addon-designs/src/config.ts b/packages/storybook-addon-designs/src/config.ts index bc711a4..cea557f 100644 --- a/packages/storybook-addon-designs/src/config.ts +++ b/packages/storybook-addon-designs/src/config.ts @@ -1,9 +1,16 @@ export type Config = IFrameConfig | FigmaConfig | PdfConfig | ImageConfig +export interface ConfigBase { + /** + * A name of the tab. + */ + name?: string +} + /** * Options for rendering iframe. */ -export interface IFrameConfigBase { +export interface IFrameConfigBase extends ConfigBase { /** * An URL to show. */ @@ -37,7 +44,7 @@ export interface FigmaConfig extends IFrameConfigBase { /** * Common options for types user can move or scale the design preview. */ -export interface TransformableConfigBase { +export interface TransformableConfigBase extends ConfigBase { /** * Default scale value. * Must be greater than 0. diff --git a/packages/storybook-addon-designs/src/index.ts b/packages/storybook-addon-designs/src/index.ts index 7c5ee49..deeb963 100644 --- a/packages/storybook-addon-designs/src/index.ts +++ b/packages/storybook-addon-designs/src/index.ts @@ -21,7 +21,7 @@ export const withDesign = makeDecorator({ /** * Dumb function to ensure typings or enchance IDE auto completion. */ -export const config = (c: Config): Config => c +export const config = (c: Config | Config[]) => c if (module && module.hot && module.hot.decline) { module.hot.decline() diff --git a/packages/storybook-addon-designs/src/register/components/Wrapper.tsx b/packages/storybook-addon-designs/src/register/components/Wrapper.tsx index e3301ab..36b5668 100644 --- a/packages/storybook-addon-designs/src/register/components/Wrapper.tsx +++ b/packages/storybook-addon-designs/src/register/components/Wrapper.tsx @@ -4,7 +4,7 @@ import { jsx } from '@storybook/theming' import addons from '@storybook/addons' import { STORY_CHANGED } from '@storybook/core-events' -import { Link, Placeholder } from '@storybook/components' +import { Link, Placeholder, TabsState } from '@storybook/components' import { Config } from '../../config' import { Events, ParameterName } from '../../addon' @@ -23,7 +23,7 @@ interface Props { } export const Wrapper: SFC = ({ active, api, channel }) => { - const [config, setConfig] = useState() + const [config, setConfig] = useState() const [storyId, changeStory] = useState() useEffect(() => { @@ -50,7 +50,7 @@ export const Wrapper: SFC = ({ active, api, channel }) => { return null } - if (!config) { + if (!config || ('length' in config && config.length === 0)) { return ( No designs found @@ -70,33 +70,57 @@ export const Wrapper: SFC = ({ active, api, channel }) => { ) } - switch (config.type) { - case 'iframe': - return