Merge pull request #6 from yannbf/feat/multiple-links-support

Feature: multiple links support

.storybook/Button.stories.jsx

@@ -18,11 +18,19 @@ const pressedStyle = {
 };
 
 export default {
-    title: "Button",
+    title: "@Example|Button",
 };
 
  export const Button = () => <button style={style}>Normal</button>;
  export const ButtonPressed = () => <button style={pressedStyle}>Pressed</button>;
+ export const ButtonMultiple = () => (
+     <>
+        <Button/>
+        <br/>
+        <br/>
+        <ButtonPressed/>
+     </>
+ );
 
  Button.story = {
      parameters: {
@@ -35,3 +43,18 @@ export default {
          zeplinLink: "zpl://components?coids=5ecff3be0f8b6a951c7ca618&pid=5ecff3a2d8a8ab2a61937a66",
      },
  };
+
+ ButtonMultiple.story = {
+     parameters: {
+         zeplinLink: [
+             {
+                 name: "Default",
+                 link: "zpl://components?pid=5ecff3a2d8a8ab2a61937a66&coid=5ecff3be40a1ee4c8cb2aadb"
+             },
+             {
+                name: "Pressed",
+                link: "zpl://components?coids=5ecff3be0f8b6a951c7ca618&pid=5ecff3a2d8a8ab2a61937a66"
+            }
+         ],
+     },
+ };

.storybook/preview.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { addDecorator } from '@storybook/react';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+
+const withTheme = story => <ThemeProvider theme={convert(themes.normal)}>
+  {story()}
+</ThemeProvider>
+
+addDecorator(withTheme)

README.md

@@ -61,35 +61,65 @@ If you're using Storybook@5.0.x;
 
 ```js
 // .storybook/addons.js
-import 'storybook-zeplin/register'
+import "storybook-zeplin/register";
 ```
 
 ### 4. Add a Zeplin link to your story
 
-You can use full web URL or app URI of Zeplin components/screens as `zeplinLink`.
+Storybook Zeplin takes parameter `zeplinLink` as an array of elements containing a name and a link or just a string for the link.
+For the link, you can use full web URL or app URI of Zeplin components/screens.
 
-```js
+Example of adding Zeplin link to all stories in a file:
+
+```jsx
 export default {
     title: "Button",
     component: Button,
+    parameters: {
+        zeplinLink: "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b/styleguide/components?coid=5eac833c5f1f2f1cb19f4f19",
+    },
 };
 
 export const Default = () => <Button>Click me</Button>;
 export const Secondary = () => <Button secondary>Click me</Button>;
 
 Default.story = {
     name: "Primary Button",
-    parameters: {
-        zeplinLink:
-            "https://app.zeplin.io/project/5e7a6d478204d59183a1c76b/styleguide/components?coid=5eac833c5f1f2f1cb19f4f19",
-    },
 };
 
 Secondary.story = {
     name: "Secondary Button",
+};
+```
+
+Example of adding multiple Zeplin links to a story:
+
+```jsx
+export default {
+    title: "Button",
+    component: Button,
+};
+
+export const Default = () => <Button>Click me</Button>;
+export const Secondary = () => <Button secondary>Click me</Button>;
+
+Default.story = {
+    name: "Responsive Button",
     parameters: {
-        zeplinLink:
-            "zpl://components?pid=5e6a066950e2c2111c16a1d3&coid=5bb478ad26feb174f3ff89b5",
+        zeplinLink: [
+            {
+                name: "Desktop",
+                link: "zpl://components?pid=pid1&coid=coid1",
+            },
+            {
+                name: "Tablet",
+                link: "zpl://components?pid=pid1&coid=coid2",
+            },
+            {
+                name: "Mobile",
+                link: "zpl://components?pid=pid1&coid=coid3",
+            },
+        ],
     },
 };
 ```

src/components/HeaderButtons.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import HeaderButtons from "./HeaderButtons";
+
+export default {
+    title: "Addon|HeaderButtons",
+};
+
+export const Default = () => (
+    <HeaderButtons
+        onZoomIn={() => console.log("zoom in")}
+        onZoomOut={() => console.log("zoom out")}
+        onZoomReset={() => console.log("zoom reset")}
+    />
+);