Multipe designs

README.md

@@ -88,6 +88,25 @@ storiesOf('foo', module).add('bar', () => <Button>Hello, World!</Button>, {
 })
 ```
 
+### 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)

packages/examples/stories/index.stories.js

@@ -104,6 +104,37 @@ storiesOf('Examples|Image', module)
     })
   })
 
+storiesOf('Examples|Advanced', module)
+  .addDecorator(withDesign)
+  .add('Embed multiple designs', () => <Button>Button</Button>, {
+    design: config([
+      {
+        type: 'figma',
+        url:
+          'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+      },
+      {
+        type: 'pdf',
+        url: samplePdf
+      }
+    ])
+  })
+  .add('Set tab names', () => <Button>Button</Button>, {
+    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', () => (

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.

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()

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<Props> = ({ active, api, channel }) => {
-  const [config, setConfig] = useState<Config>()
+  const [config, setConfig] = useState<Config | Config[]>()
   const [storyId, changeStory] = useState<string>()
 
   useEffect(() => {
@@ -50,7 +50,7 @@ export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
     return null
   }
 
-  if (!config) {
+  if (!config || ('length' in config && config.length === 0)) {
     return (
       <Placeholder>
         <Fragment>No designs found</Fragment>
@@ -70,33 +70,57 @@ export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
     )
   }
 
-  switch (config.type) {
-    case 'iframe':
-      return <IFrame key={storyId} config={config} />
-    case 'figma':
-      return <Figma key={storyId} config={config} />
-    case 'pdf':
-      return <Pdf key={storyId} config={config} />
-    case 'image':
-      return <ImagePreview key={storyId} config={config} />
+  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 [<IFrame config={cfg} />, meta]
+      case 'figma':
+        return [<Figma config={cfg} />, meta]
+      case 'pdf':
+        return [<Pdf config={cfg} />, meta]
+      case 'image':
+        return [<ImagePreview key={storyId} config={cfg} />, meta]
+    }
+
+    return [
+      <Placeholder>
+        <Fragment>Invalid config type</Fragment>
+        <Fragment>
+          Config type you set is not supported. Please choose one from{' '}
+          <Link
+            href="https://github.com/pocka/storybook-addon-designs#available-types"
+            target="_blank"
+            rel="noopener"
+            withArrow
+            cancel={false}
+          >
+            available config types
+          </Link>
+        </Fragment>
+      </Placeholder>,
+      meta
+    ]
+  })
+
+  if (panels.length === 1) {
+    return <div key={storyId}>{panels[0][0]}</div>
   }
 
   return (
-    <Placeholder>
-      <Fragment>Invalid config type</Fragment>
-      <Fragment>
-        Config type you set is not supported. Please choose one from{' '}
-        <Link
-          href="https://github.com/pocka/storybook-addon-designs#available-types"
-          target="_blank"
-          rel="noopener"
-          withArrow
-          cancel={false}
-        >
-          available config types
-        </Link>
-      </Fragment>
-    </Placeholder>
+    <TabsState key={storyId} absolute={true} initial={panels[0][1].id}>
+      {panels.map(([el, meta]) => (
+        <div key={meta.id} id={meta.id} title={meta.title}>
+          {el}
+        </div>
+      ))}
+    </TabsState>
   )
 }