JSPM

storybook-addon-external-links

2.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13
  • Score
    100M100P100Q65051F
  • License MIT

Provides a link to the story's source in the toolbar

Package Exports

  • storybook-addon-external-links
  • storybook-addon-external-links/dist/cjs/index.js
  • storybook-addon-external-links/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-addon-external-links) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon Source Link

npm npm

Provides a link to the story's source in the toolbar.

Usage

Inside each component, include a parameter for your components's source code.

*.stories.js

export default {
  title: 'Example',
  component: Button,
  parameters: {
    sourceLink: '<link to source>'
  }
};

This can be done at the story level as well

*.stories.js

export const Primary = () => (
  <Button>Primary</Button>
);
Primary.parameters = {
  sourceLink: '<link to source>'
};

If the parameter is set, clicking the icon button will take you to the source link.

Screen Shot 2022-03-23 at 1 15 50 PM

If an inactive source link is clicked, a tool-top will remind the user of this usage.

Alternatively, you may set a global parameter to define a default link in the .storybook/preview.js file like so:

export const parameters = {
  sourceLink: '<link to source>'
}

Precedence follows the rules of parameter inheritance