Connect Storybook

Brienne Wong
Brienne Wong
  • Updated

Storybook allows you to create an interactive pattern library for your code components. You can display these components directly in your zeroheight styleguide and stay in sync with code changes.

Embed your Stories

To embed a story from your Storybook in zeroheight:

1) Create a code block and select Storybook.

Code function hovered over in the zeroheight toolbar.

 

Code examples that you can add in zeroheight.

2) Paste the Storybook URL to your component into the input field.

For example, given the following Button component from Auth0's React Storybook, you can paste its link directly into the zeroheight Storybook block and it will display like so:

iFrame displays contents from Storybook

👉 Note: Only the upper right hand side preview from the Story is shown, not the left hand menu sidebar, and not the bottom section with Knobs, Accessibility etc.

If you use the Embed option, the Storybook side navigation will appear.

Show source code / props

You can use the Storybook Info Addon to display additional information below the component - like the source code or the React props. These will then also be displayed in zeroheight.

Here's an example of how your Story could look:

Storybook display with source code and props

Fixed width display option

You can choose to display your Storybook with a fixed width. When you add a Storybook block, go to settings and toggle on fixed width. You can then adjust the width of your Storybook frame to a fixed width to be displayed in viewer mode.

Arrow points to settings. Arrow pointing to fixed width setting toggled on. Arrows show you can move the iFrame horizontally.

If you choose the fixed width option then the re-sizing handle in the viewer mode will not be visible.

Storybook iFrame displayed with default size

Hybrid view

You can display both the docs and canvas using the canvas (story) URL. Toggle on the 'Show add-ons'. This will give viewers the option to switch between the canvas and docs view.

Arrow points to Show add ons function toggled on. Black circles around Canvas and Docs display options.

FAQs

If someone makes changes in the Storybook iframe in zeroheight, do those changes push into Storybook?

No.

Will Storybook update itself when we have a new version release in the styleguide?

Yes, Storybook updates itself with new releases. The past release will show the Storybook URL from that time period but not the contents in the iFrame. If you review past releases, the iFrame will display the latest version of Storybook. If you want to have a snapshot of previous versions of Storybook, you will need to change the URL each time you create a release.

Was this article helpful?