From 382869de4cbdb08c8cf9c18b37b89eb69a9bada3 Mon Sep 17 00:00:00 2001 From: "Leo Y. Li" Date: Sat, 30 Mar 2019 16:27:18 -0400 Subject: [PATCH] #5: update README.md --- addons/addon-contexts/README.md | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/addons/addon-contexts/README.md b/addons/addon-contexts/README.md index 94dece02f767..c70cf7a2d2eb 100644 --- a/addons/addon-contexts/README.md +++ b/addons/addon-contexts/README.md @@ -1,7 +1,12 @@ # Storybook Addon Contexts -**Storybook Addon Contexts** is an addon for driving your components under dynamic contexts in Storybook. +

+[![NPM](https://nodei.co/npm/addon-contexts.png)](https://nodei.co/npm/addon-contexts/) +

+ +--- +**Storybook Addon Contexts** is an addon for driving your components under dynamic contexts in Storybook. ## 💡 Why you need this? @@ -121,7 +126,8 @@ The `contexts` is an array of object that should has the following properties: --- -#### `icon : string?` (default `undefined`) +#### `icon : string?` +(default `undefined`) A icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for each contextual environment individually. Take a look from what are currently supported @@ -129,11 +135,15 @@ each contextual environment individually. Take a look from what are currently s story. You must define an icon first if you want to take advantage on switching props dynamically in your Storybook toolbar. +--- + #### `title : string` (required) An unique name of a contextual environment. Note, if you have duplicated name, the later is ignored. +--- + #### `components : React.ComponentType[]` (required) @@ -143,7 +153,9 @@ wrapping behaviour can be useful in some cases; for instance, in the above examp `styled-componnets` and `material-ui` theme providers. Note, typically, components are `Providers` from [React Context API](https://reactjs.org/docs/context.html). However, -it is really up to your use cases. +it is really up to you and have no limitation for your use cases. + +--- #### `params : object[]` (required) @@ -173,6 +185,8 @@ The `props` that is accepted by the wrapping component(s). Set to `true` if you want to use this param initially. Note, only the first one marked as default is identified; +--- + #### `options` A set of options offers more granular control over the defined contextual environment. Note, they can be overridden @@ -193,3 +207,9 @@ Disable this contextual environment completely. Useful when you want to opt-out Allow this contextual environment to be opt-out optionally in toolbar. When set to `true`, an **Off** option will be shown at first in the toolbar menu in your Storybook. + +--- + +## 📖 License + +MIT