diff --git a/addons/addon-contexts/README.md b/addons/addon-contexts/README.md index 140eae687595..7cb496cd2453 100644 --- a/addons/addon-contexts/README.md +++ b/addons/addon-contexts/README.md @@ -118,18 +118,20 @@ An decorator for wrapping your stories under your predefined `contexts`. This m are supported. They are going to be loaded layer by layer and wraped in a descending oder (top -> down -> story). The `contexts` is an array of object that should has the following properties: -#### (optional) `icon : string | undefined` +--- + +### `icon : string?` (default `undefined`) This addon allows you to define an icon for each contextual environment individually. Take a look from what are currently supported [icon lists](https://storybooks-official.netlify.com/?path=/story/basics-icon--labels) from the official Storybook story. You must define an icon first if you want to take advantage on switching props dynamically in your Storybook toolbar. -#### (required) `title : string` +### `title : string` (required) An unique name of a contextual environment. Note, if you have duplicated name, the later is ignored. -#### (required) `components : React.ComponentType[]` +### `components : React.ComponentType[]` (required) An array of components that is going to be injected to wrap your stories. This means this addon allow multiple wrapping components coexisted. The wrapping sequence is from the left to right (parent -> children -> story). This @@ -139,7 +141,7 @@ under `styled-componnets` and `material-ui` theme providers. Typically, components are `Providers` from [React Context API](https://reactjs.org/docs/context.html). However, it is really up to your use cases. -#### (required) `params : object[]` +### `params : object[]` (required) An array of params contains information on a set of predefined `props` for `components`. @@ -151,32 +153,32 @@ if the param were gone from story to story. This object has the following properties: -##### (required) `params.name : string` +### `params.name : string` (required) An unique name for representing the props. -##### (required) `params.props : object | null:` +### `params.props : object | null:` (required) The `props` that is accepted by the wrapping component(s). -##### (optional) `params.defualt : true | undefined` +### `params.defualt : true?` (default: `undefined`) Set to `true` if you want to use this param initially. Note, only the first one marked as default is identified; -#### (optional) `options` +## `options` A set of options offers more granular control over the defined contextual environment. Note, they can be overridden at the story level. -##### (optional) `options.deep : boolean` (default: `false`) +### `options.deep : boolean?` (default: `false`) Pass the `props` deeply into all components. Useful when you have multiple wrappers that take the same props. -##### (optional) `options.disable : boolean` (default: `false`) +### `options.disable : boolean?` (default: `false`) Disable this contextual environment completely. Useful when you want to opt-out this context from a given story. -##### (optional) `options.cancelable : boolean` (default: `false`) +### `options.cancelable : boolean?` (default: `false`) Allow this contextual environment to be disabled temporarily. When set to `true`, an **Off** option will be shown at first in the toolbar menu in your Storybook.