Addon Version

Add package or component version to the Storybook toolbar

View on GithubNew to Storybook?Get started

Downloads per week

Storybook Addon Version

The Storybook Addon Version is used to highlight the version of a component or of a package within Storybook toolbar.

Installation

npm install storybook-version --save-dev

Basic Setup

Add the following code in the main.js of your Storybook configuration:

module.exports = {
  addons: ['storybook-version'],
};

Set the parameters of your story with the key value version in order to provide the necessary information to be displayed.

Configuration

Property	Required	Type of Value	Description	Example
major	✔	string	Major version	'1'
minor	✔	string	Minor version	'2'
patch	✔	string	Patch version	'3'
postfix		string	Postifx version extra data	'beta.1'
style		object of keys string and values string	Extra css properties to overwrite default style of the Version	'{ 'color' : 'red', 'border-width': '2px' }'

Implementation

export const parameters = {
  version: {
    major: '1',
    minor: '2',
    patch: '3'
  }
}

Story Setup Example

Add the version parameter in the default Story configuration:

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    version: {
      major: '4',
      minor: '2',
      patch: '0',
      postfix: 'rc3',
      style: {
        color: 'red',
        'font-weight': '900',
        'font-size': '24px'
      }
    }
  }
}

Versions guideline

Storybook version	Addon latest supported version
`6`	`0.1.1`
`8`	`0.1.2`
`9`	latest

Made by

silversonicaxel

Work with

React