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
- case 'figma':
- return
- case 'pdf':
- return
- case 'image':
- return
+ const panels = [...(config instanceof Array ? config : [config])].map<
+ [JSX.Element, { id: string; title: string }]
+ >((cfg, i) => {
+ const meta = {
+ id: `addon-designs-tab--${i}`,
+ title: cfg.name || cfg.type.toUpperCase()
+ }
+
+ switch (cfg.type) {
+ case 'iframe':
+ return [, meta]
+ case 'figma':
+ return [, meta]
+ case 'pdf':
+ return [, meta]
+ case 'image':
+ return [, meta]
+ }
+
+ return [
+
+ Invalid config type
+
+ Config type you set is not supported. Please choose one from{' '}
+
+ available config types
+
+
+ ,
+ meta
+ ]
+ })
+
+ if (panels.length === 1) {
+ return
{panels[0][0]}
}
return (
-
- Invalid config type
-
- Config type you set is not supported. Please choose one from{' '}
-
- available config types
-
-
-
+
+ {panels.map(([el, meta]) => (
+