diff --git a/.babelrc.js b/.babelrc.js
index 5af9a9046c5d..b00deb2d4c20 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -55,7 +55,7 @@ module.exports = {
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
'babel-plugin-macros',
- ['emotion', { sourceMap: true, autoLabel: true }],
+ ['@emotion', { sourceMap: true, autoLabel: 'always' }],
],
env: {
test: withTests,
@@ -90,7 +90,7 @@ module.exports = {
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'babel-plugin-macros',
- ['emotion', { sourceMap: true, autoLabel: true }],
+ ['@emotion', { sourceMap: true, autoLabel: 'always' }],
'babel-plugin-add-react-displayname',
],
env: {
@@ -125,7 +125,7 @@ module.exports = {
],
],
plugins: [
- 'emotion',
+ '@emotion',
'babel-plugin-macros',
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-shorthand-properties',
diff --git a/.circleci/config.yml b/.circleci/config.yml
index a81d6b59aa92..372652ee4264 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -6,7 +6,7 @@ executors:
class:
description: The Resource class
type: enum
- enum: ['small', 'medium', 'large', 'xlarge']
+ enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
working_directory: /tmp/storybook
docker:
@@ -19,7 +19,7 @@ executors:
class:
description: The Resource class
type: enum
- enum: ['small', 'medium', 'large', 'xlarge']
+ enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
working_directory: /tmp/storybook
docker:
@@ -32,7 +32,7 @@ executors:
class:
description: The Resource class
type: enum
- enum: ['small', 'medium', 'large', 'xlarge']
+ enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
working_directory: /tmp/storybook
docker:
@@ -92,7 +92,7 @@ jobs:
command: yarn install --immutable
- run:
name: Bootstrap
- command: yarn bootstrap --core
+ command: yarn bootstrap --build --manager
- save_cache:
name: Save Yarn cache
key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
@@ -118,23 +118,9 @@ jobs:
name: examples
command: |
yarn run-chromatics
- packtracker:
- executor:
- class: medium
- name: sb_node_14_browsers
- steps:
- - git-shallow-clone/checkout_advanced:
- clone_options: '--depth 1 --verbose'
- - attach_workspace:
- at: .
- - run:
- name: Report webpack stats for manager of official storybook
- command: |
- cd examples/official-storybook
- yarn packtracker
examples:
executor:
- class: medium
+ class: medium+
name: sb_node_14_browsers
parallelism: 17
steps:
@@ -194,7 +180,7 @@ jobs:
name: Wait for registry
command: yarn wait-on http://localhost:6000
- run:
- name: Run E2E tests
+ name: Run E2E (extended) tests
command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
no_output_timeout: 5m
- store_artifacts:
@@ -204,7 +190,7 @@ jobs:
executor:
class: large
name: sb_cypress_8_node_14
- parallelism: 2
+ parallelism: 8
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
@@ -218,14 +204,35 @@ jobs:
name: Wait for registry
command: yarn wait-on http://localhost:6000
- run:
- name: Run E2E tests
+ name: Run E2E (core) tests
# Do not test CRA here because it's done in PnP part
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
- command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
+ command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
no_output_timeout: 5m
- store_artifacts:
path: /tmp/cypress-record
destination: cypress
+ e2e-tests-sb-docs:
+ executor:
+ class: large
+ name: sb_cypress_8_node_14
+ parallelism: 2
+ steps:
+ - git-shallow-clone/checkout_advanced:
+ clone_options: '--depth 1 --verbose'
+ - attach_workspace:
+ at: .
+ - run:
+ name: Running local registry
+ command: yarn local-registry --port 6000 --open
+ background: true
+ - run:
+ name: Wait for registry
+ command: yarn wait-on http://localhost:6000
+ - run:
+ name: Run smoke tests
+ command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
+ no_output_timeout: 5m
cra-bench:
executor:
class: medium
@@ -385,6 +392,8 @@ jobs:
- run:
name: Test
command: yarn test --coverage --runInBand --ci
+ - store_test_results:
+ path: junit.xml
- persist_to_workspace:
root: .
paths:
@@ -418,9 +427,6 @@ workflows:
- smoke-tests:
requires:
- build
- - packtracker:
- requires:
- - build
- unit-tests:
requires:
- build
@@ -439,6 +445,9 @@ workflows:
- e2e-tests-core:
requires:
- publish
+ - e2e-tests-sb-docs:
+ requires:
+ - publish
- e2e-tests-pnp:
requires:
- publish
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 406ac232541e..82d2d3cbf468 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR
@@ -210,7 +210,7 @@ For example, the following snippet adds a style tag to the preview head programa
Similarly, the `managerHead` can be used to modify the surrounding "manager" UI, analogous to `manager-head.html`.
-Finally, the preview's main page _template_ can also be overridden using the `previewMainTemplate`, which should return a reference to a file containing an `.ejs` template that gets interpolated with some environment variables. For an example, see the [Storybook's default template](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/templates/index.ejs).
+Finally, the preview's main page _template_ can also be overridden using the `previewMainTemplate`, which should return a reference to a file containing an `.ejs` template that gets interpolated with some environment variables. For an example, see the [Storybook's default template](https://github.com/storybookjs/storybook/blob/next/lib/core-common/templates/index.ejs).
## Sharing advanced configuration
diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md
index 64ae683a5188..75031481bc78 100644
--- a/docs/api/argtypes.md
+++ b/docs/api/argtypes.md
@@ -89,6 +89,24 @@ In particular, this would render a row with a modified description, a type displ
💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.
+#### Global `argTypes`
+
+You can also define arg types at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `argTypes` key in your `preview.js`:
+
+
+
+
+
+
+
+
+💡 If you define a global arg type for a story that does not have that arg (e.g. if there is no corresponding global arg definition), then the arg type will have no effect.
+
+
#### Using argTypes in addons
If you want to access the argTypes of the current component inside an addon, you can use the `useArgTypes` hook from the `@storybook/api` package:
@@ -101,4 +119,4 @@ If you want to access the argTypes of the current component inside an addon, you
]}
/>
-
\ No newline at end of file
+
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 9380c20d4e17..f8606d47cb69 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -18,10 +18,10 @@ Usage: start-storybook [options]
| `-V`, `--version` | Output the version number `start-storybook -V` |
| `-p`, `--port [number]` | Port to run Storybook `start-storybook -p 9009` |
| `-h`, `--host [string]` | Host to run Storybook `start-storybook -h my-host.com` |
-| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list `start-storybook -s public` |
+| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list `start-storybook -s public` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from `start-storybook -c .storybook` |
-| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information. `start-storybook --https` |
-| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) `start-storybook --ssl-ca my-certificate` |
+| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information `start-storybook --https` |
+| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) `start-storybook --ssl-ca my-certificate` |
| `--ssl-cert` | Provide an SSL certificate. (Required with --https) `start-storybook --ssl-cert my-ssl-certificate` |
| `--ssl-key` | Provide an SSL key. (Required with --https) `start-storybook --ssl-key my-ssl-key` |
| `--smoke-test` | Exit after successful start `start-storybook --smoke-test` |
@@ -32,7 +32,8 @@ Usage: start-storybook [options]
| `--debug-webpack` | Display final webpack configurations for debugging purposes `start-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk `start-storybook --webpack-stats-json /tmp/webpack-stats` |
| `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) `start-storybook --docs` |
-| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below. `start-storybook --no-manager-cache` |
+| `--no-manager-cache` | Disables Storybook's manager caching mechanism. See note below `start-storybook --no-manager-cache` |
+| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md) `start-storybook --disable-telemetry` |
💡 The flag --no-manager-cache disables the internal caching of Storybook and can severely impact your Storybook loading time, so only use it when you need to refresh Storybook's UI, such as when editing themes.
@@ -54,15 +55,16 @@ Usage: build-storybook [options]
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information `build-storybook --help` |
| `-V`, `--version` | Output the version number `build-storybook -V` |
-| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list `build-storybook -s public` |
+| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation). Directory where to load static files from, comma-separated list `build-storybook -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files `build-storybook -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from `build-storybook -c .storybook` |
-| `--loglevel [level]` | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] `build-storybook --loglevel warn` |
+| `--loglevel [level]` | Controls level of logging during build. Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent` `build-storybook --loglevel warn` |
| `--quiet` | Suppress verbose build output `build-storybook --quiet` |
| `--no-dll` | Do not use dll reference (no-op) `build-storybook --no-dll` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes `build-storybook --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk `build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation) `build-storybook --docs` |
+| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md). `build-storybook --disable-telemetry` |
💡 If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, npm run build-storybook -- -o ./path/to/build.
diff --git a/docs/configure/babel.md b/docs/configure/babel.md
index aa6d23031050..a1af175354ef 100644
--- a/docs/configure/babel.md
+++ b/docs/configure/babel.md
@@ -18,7 +18,7 @@ It has three different modes:
Storybook works with evergreen browsers by default.
-If you want to run Storybook in IE11, make sure to [disable](../essentials/introduction#disabling-addons) the docs-addon that is part of `@storybook/addon-essentials`, as this currently [causes issues in IE11](https://github.com/storybookjs/storybook/issues/8884).
+If you want to run Storybook in IE11, make sure to [disable](../essentials/introduction.md#disabling-addons) the docs-addon that is part of `@storybook/addon-essentials`, as this currently [causes issues in IE11](https://github.com/storybookjs/storybook/issues/8884).
Here are some key features of Storybook's Babel configurations.
@@ -38,7 +38,7 @@ You can also place a `.storybook/.babelrc` file to use a unique configuration fo
### Custom configuration
-If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview#configure-your-storybook-project) and add the `babel` field with the options you want to use:
+If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview.md#configure-your-storybook-project) and add the `babel` field with the options you want to use:
diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index 830c94e1cc2d..d6439226bb4d 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -69,6 +69,34 @@ You can also pass these environment variables when you are [building your Storyb
Then they'll be hardcoded to the static version of your Storybook.
+
+### Using Storybook configuration
+
+Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
+
+
+
+
+
+
+
+When Storybook loads, it will enable you to access them in your stories similar as you would do if you were working with an `env` file:
+
+
+
+
+
+
+
### Using environment variables to choose the browser
Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
@@ -83,4 +111,4 @@ The table below lists the available options:
💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
-
+
\ No newline at end of file
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 779a8c7bb3f6..8049a22db88a 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -127,4 +127,4 @@ In this case, you need to have all your images and media files with relative pat
If you load static content via importing, this is automatic, and you do not have to do anything.
-Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
+Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index 493b5f1150a9..462d88bc3cd6 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -27,7 +27,7 @@ The main configuration file is `main.js`. This file controls the Storybook serve
The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
-- `addons` - a list of the [addons](/addons) you are using.
+- `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
- `babel` - custom [babel configuration](./babel.md).
- `framework` - framework specific configurations to help the loading and building process.
diff --git a/docs/configure/storybook-addons.md b/docs/configure/storybook-addons.md
index 55b33eac648d..21233c31bf3e 100644
--- a/docs/configure/storybook-addons.md
+++ b/docs/configure/storybook-addons.md
@@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
-- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
\ No newline at end of file
+- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](https://storybook.js.org/addons/), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
\ No newline at end of file
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index f45208957370..2253874499fb 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
### Importing CSS files
-If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack#extending-storybooks-webpack-config) and include the appropriate loader.
+If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
@@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
### Adding webfonts
-If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
\ No newline at end of file
+If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
\ No newline at end of file
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
new file mode 100644
index 000000000000..72c66d0b8aed
--- /dev/null
+++ b/docs/configure/telemetry.md
@@ -0,0 +1,174 @@
+---
+title: 'Telemetry'
+---
+
+Storybook collects completely anonymous data to help us improve user experience. Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.
+
+## Why is telemetry collected?
+
+Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:
+
+- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), and [Svelte](https://svelte.dev/)
+- **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/)
+- **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/)
+- **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira)
+
+In the past, our improvement process relied on manually gathering feedback. But with a growing userbase and the need to support a wide variety of integrations, we need a more accurate method for gauging Storybook usage and pain points.
+
+These telemetry data help us (the maintainers) to prioritize the highest impact projects. That allows us to keep up with trends in the front-end ecosystem and verify that our community's hard work achieves the intended result.
+
+## What is being collected?
+
+We collect general usage details, including command invocation, Storybook version, addons, and the view layer.
+
+Specifically, we track the following information in our telemetry events:
+
+- Timestamp of the occurrence.
+- Command invoked (e.g., `init`, `upgrade`, `start-storybook`).
+- Storybook unique identifier: One-way hash generated during Storybook installation process.
+- One way hash of the IP address where the event occurred for spam detection.
+- Story count.
+- Storybook version.
+- Storybook metadata:
+ - Language (e.g., TypeScript, JavaScript).
+ - Supported view layers (e.g., React, Vue, Angular, Svelte).
+ - Builder (e.g., Webpack4, Webpack5, Vite).
+ - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
+ - [Addons](/addons) (e.g., [Essentials](../essentials/introduction), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
+ - [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
+- Whether the command was invoked on CI or not.
+
+Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.
+
+## What about sensitive information?
+
+We take your privacy and our security very seriously. We perform additional steps to ensure that secure data (e.g., environment variables or other forms of sensitive data) **do not** make their way into our analytics. You can view all the information we collect by setting the `STORYBOOK_TELEMETRY_DEBUG` to `1` to print out the information gathered. For example:
+
+
+
+
+
+
+
+Will generate the following output:
+
+```json
+{
+ "anonymousId": "8bcfdfd5f9616a1923dd92adf89714331b2d18693c722e05152a47f8093392bb",
+ "eventType": "start",
+ "payload": {
+ "storyIndex": {
+ "storyCount": 4,
+ "version": 3
+ }
+ },
+ "inCI": false,
+ "metadata": {
+ "generatedAt": 1648233198722,
+ "builder": {
+ "name": "webpack4"
+ },
+ "hasCustomBabel": false,
+ "hasCustomWebpack": true,
+ "hasStaticDirs": true,
+ "hasStorybookEslint": false,
+ "refCount": 0,
+ "metaFramework": {
+ "name": "CRA",
+ "packageName": "react-scripts",
+ "version": "4.0.3"
+ },
+ "features": {
+ "buildStoriesJson": true
+ },
+ "storybookVersion": "6.5.0",
+ "language": "typescript",
+ "storybookPackages": {
+ "@storybook/addons": {
+ "version": "6.5.0"
+ },
+ "@storybook/builder-webpack4": {
+ "version": "6.5.0"
+ },
+ "@storybook/react": {
+ "version": "6.5.0"
+ }
+ },
+ "framework": {
+ "name": "react"
+ },
+ "addons": {
+ "@storybook/preset-create-react-app": {
+ "version": "3.2.0"
+ },
+ "@storybook/addon-ie11": {
+ "version": "0.0.7--canary.5e87b64.0"
+ },
+ "@storybook/addon-essentials": {
+ "options": {
+ "viewport": false
+ },
+ "version": "6.5.0"
+ }
+ }
+ }
+}
+```
+
+## Will this data be shared?
+
+The data we collect is anonymous, not traceable to the source, and only meaningful in aggregate form. No data we collect is personally identifiable.
+In the future, we plan to share relevant data with the community through public dashboards (or similar data representation formats).
+
+## How to opt-out
+
+You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example:
+
+
+
+
+
+
+
+## Crash reports (disabled by default)
+
+In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example:
+
+
+
+
+
+
+
+Generates the following item in the telemetry event:
+
+
+
+
+
+
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index e2928d0826cd..55e8118bb38f 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -32,7 +32,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co
## Theming docs
-[Storybook Docs](../writing-docs/introduction) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
+[Storybook Docs](../writing-docs/introduction.md) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./overview.md#configure-story-rendering):
@@ -85,6 +85,7 @@ Above, we're creating a new theme that will:
- Use Storybook's `light` theme as a baseline.
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
- Add custom branding information.
+- Set the brand link to open in the same window (as opposed to a new one), via the `target` attribute.
Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
@@ -226,4 +227,4 @@ Or with template literals:
]}
/>
-
\ No newline at end of file
+
diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md
index d86127a6ae25..c156547d953e 100644
--- a/docs/configure/webpack.md
+++ b/docs/configure/webpack.md
@@ -2,7 +2,7 @@
title: 'Webpack'
---
-Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other everyday use cases.
+Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](https://storybook.js.org/addons/) are also available that extend the configuration for other everyday use cases.
You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file.
@@ -69,7 +69,7 @@ When you start your Storybook, you'll see an improvement in loading times. Read
### Webpack 5
-Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the `@storybook/builder-webpack5` package, and opting in in your `main.js`:
+Storybook builds your project with Webpack 4 by default. If your project uses Webpack 5, you can opt into the Webpack 5 builder by installing the required dependencies (i.e., `@storybook/builder-webpack5`, `@storybook/manager-webpack5`) and update your Storybook configuration as follows:
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index b6c92a5560ee..9a1f4fada5b6 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -59,7 +59,9 @@ yarn build
When asked if you want to start the build in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select `@storybook/addon-docs` and `@storybook/components`.
-💡 Build's `watch' mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` WITHOUT watch mode: it will re-generate TypeScript types and also perform type checking for you.
+
+💡 Build's `watch` mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` WITHOUT watch mode: it will re-generate TypeScript types and also perform type checking for you.
+
-💡 The `sb link` command relies on `yarn 2` linking under the hood. It requires that the local repro is using `yarn 2`, which will be the case if you're using the [`sb repro` command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-`yarn 2` project, linking will fail.
+💡 The sb link command relies on yarn 2 linking under the hood. It requires that the local repro is using yarn 2, which will be the case if you're using the [sb repro command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-yarn 2 project, linking will fail.
## Troubleshooting
-`yarn build --all --watch` watches everything but is resource-intensive
+yarn build --all --watch watches everything but is resource-intensive
It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.
diff --git a/docs/contribute/how-to-contribute.md b/docs/contribute/how-to-contribute.md
index 546b0b9ccd34..894cb309f598 100644
--- a/docs/contribute/how-to-contribute.md
+++ b/docs/contribute/how-to-contribute.md
@@ -12,8 +12,8 @@ In the interest of fostering an open and welcoming environment, we as contributo
- [**Code**](./code.md): Features, bug fixes, dependency updates
- [**Docs**](./documentation-updates.md): Typos, clarifications
-- [**Integrations**](./../api/new-frameworks): Integrate Storybook with your favorite library
-- [**Addons**](./../addons/introduction): Build an addon and share it with the community
+- [**Integrations**](./../api/new-frameworks.md): Integrate Storybook with your favorite library
+- [**Addons**](./../addons/introduction.md): Build an addon and share it with the community
- [**Examples**](https://github.com/storybookjs/storybook/tree/next/examples/official-storybook): Add an example/test for a feature
## Not sure how to get started?
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index 1372a8205290..ebc2ae7f39f3 100644
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@@ -50,7 +50,7 @@ If everything worked as it should, you should have a fully functional Storybook
Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., [Tailwind](https://tailwindcss.com/)), you should install and configure it.
-Install and configure any Storybook [addons](/addons) that relate to the issue (e.g.,`@storybook/addon-a11y`).
+Install and configure any Storybook [addons](https://storybook.js.org/addons/) that relate to the issue (e.g.,`@storybook/addon-a11y`).
## Add stories
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index c6b51f6dcde9..84e4a91439b2 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -110,7 +110,7 @@ yarn start:skip-addons
```
-💡 During the start process if there's an issue with the the documentation, the process will stop and you'll get a notification.
+💡 During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index dda42e4c3185..5da997b1fc61 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -11,7 +11,7 @@ Storybook Controls gives you a graphical UI to interact with a component's argum
/>
-Controls does not require any modification to your components. Stories for controls are:
+Controls do not require any modification to your components. Stories for controls are:
- Convenient. Auto-generate controls based on React/Vue/Angular/etc. components.
- Portable. Reuse your interactive stories in documentation, tests, and even in designs.
@@ -180,7 +180,7 @@ The Controls addon can be configured in two ways:
### Annotation
-As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes) field of either a component or story. Below is a condensed example and table featuring all available controls.
+As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/argtypes.md) field of either a component or story. Below is a condensed example and table featuring all available controls.
| Data Type | Control | Description |
| ----------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -197,7 +197,7 @@ As shown above, you can configure individual controls with the “control" annot
| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` |
| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` |
| **string** | `text` | Provides a freeform text input. `argTypes: { label: { control: 'text' }}` |
-| | `color` | Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. `argTypes: { color: { control: { type: 'color', presetsColors: ['red', 'green']} }}` |
+| | `color` | Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. `argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}` |
| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` |
@@ -300,6 +300,52 @@ paths={[
+### Conditional controls
+
+In some cases, it's useful to be able to conditionally exclude a control based on the value of another control. Controls supports basic versions of these use cases with the `if`, which can takes a simple query object to determine whether to include the control.
+
+Consider a collection of "advanced" settings that are only visible when the user toggles an "advanced" toggle.
+
+
+
+
+
+
+
+Or consider a constraint where if the user sets one control value, it doesn't make sense for the user to be able to set another value.
+
+
+
+
+
+
+
+The query object must contain either an `arg` or `global` target:
+
+| field | type | meaning |
+| ------ | ------ | ----------------------------- |
+| arg | string | The ID of the arg to test. |
+| global | string | The ID of the global to test. |
+
+It may also contain at most one of the following operators:
+
+| operator | type | meaning |
+| -------- | ------- | ---------------------------------------------------- |
+| truthy | boolean | Is the target value truthy? |
+| exists | boolean | Is the target value defined? |
+| eq | any | Is the target value equal to the provided value? |
+| neq | any | Is the target value NOT equal to the provided value? |
+
+If no operator is provided, that is equivalent to `{ truthy: true }`.
+
## Hide NoControls warning
If you don't plan to handle the control args inside your Story, you can remove the warning with:
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index db59851a0415..4d84463a8e9e 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -32,7 +32,7 @@ Update your Storybook configuration (in [`.storybook/main.js`](../configure/over
diff --git a/docs/faq.md b/docs/faq.md
index 9c5934ea7830..9bcea7bc34b6 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -83,6 +83,20 @@ module.exports = {
💡 Fast Refresh only works in development mode with React 16.10 or higher.
+### How do I setup the new React Context Root API with Storybook?
+
+If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.
+
+You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
+
+```js
+module.exports = {
+ reactOptions: {
+ legacyRootApi: true,
+ },
+};
+```
+
### Why is there no addons channel?
A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
@@ -97,7 +111,6 @@ A common error is that an addon tries to access the "channel", but the channel i
2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
-
### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
@@ -134,65 +147,65 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Get started | Install | [See current documentation](../get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
-| | What's a story | [See current documentation](../get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| | Browse Stories | [See current documentation](../get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| | Setup | [See current documentation](../get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
-| Write stories | Introduction | [See current documentation](../writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Parameters | [See current documentation](../writing-stories/parameters.md) | See versioned documentation here | Non existing feature or undocumented |
-| | Decorators | [See current documentation](../writing-stories/decorators.md) | See versioned documentation here | See versioned documentation here |
-| | Naming components and hierarchy | [See current documentation](../writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Build pages and screens | [See current documentation](../writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Stories for multiple components | [See current documentation](../writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Write docs | DocsPage | [See current documentation](../writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
-| | MDX | [See current documentation](../writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
-| | Doc Blocks/Argstable | [See current documentation](../writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Canvas | [See current documentation](../writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Color Palette | [See current documentation](../doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Description | [See current documentation](../writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Icon Gallery | [See current documentation](../writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Source | [See current documentation](../writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Story | [See current documentation](../writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Doc Blocks/Typeset | [See current documentation](../writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
-| | Preview and build docs | [See current documentation](../writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Testing | Visual tests | [See current documentation](../writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
-| | Accessibility tests | [See current documentation](../writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Interaction tests | [See current documentation](../writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
-| | Snapshot tests | [See current documentation](../writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
-| | Import stories in tests | [See current documentation](../writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
-| Sharing | Publish Storybook | [See current documentation](../sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
-| | Embed | [See current documentation](../sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Composition | [See current documentation](../sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Package Composition | [See current documentation](../sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Essential addons | Controls | [See current documentation](../essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
-| | Actions | [See current documentation](../essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
-| | Viewport | [See current documentation](../essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
-| | Backgrounds | [See current documentation](../essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
-| | Toolbars and globals | [See current documentation](../essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
-| Configure | Overview | [See current documentation](../configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/basics/writing-stories) |
-| | Integration/Webpack | [See current documentation](../configure/webpack.md) | See versioned documentation | See versioned documentation |
-| | Integration/Babel | [See current documentation](../configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
-| | Integration/Typescript | [See current documentation](../configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
-| | Integration/Styling and CSS | [See current documentation](../configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
-| | Integration/Images and assets | [See current documentation](../configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
-| | Story rendering | [See current documentation](../configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
-| | Story Layout | [See current documentation](../configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | User Interface/Features and behavior | [See current documentation](../configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
-| | User Interface/Theming | [See current documentation](../configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
-| | User Interface/Sidebar & URLS | [See current documentation](../configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
-| | Environment variables | [See current documentation](../configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
-| Addons | Introduction | [See current documentation](../addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Install addons | [See current documentation](../addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/addons/using-addons/) |
-| | Writing Addons | [See current documentation](../addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Writing Presets | [See current documentation](../addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
-| | Addons Knowledge Base | [See current documentation](../addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
-| | Types of addons | [See current documentation](../addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Addons API | [See current documentation](../addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
-| API | Stories/Component Story Format | [See current documentation](../api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
-| | Stories/MDX syntax | [See current documentation](../api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
-| | Stories/StoriesOF format (see note below) | [See current documentation](../../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
-| | Frameworks | [See current documentation](../api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | CLI options | [See current documentation](../api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
+| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
+| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
+| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
+| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
+| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Parameters | [See current documentation](./writing-stories/parameters.md) | See versioned documentation here | Non existing feature or undocumented |
+| | Decorators | [See current documentation](./writing-stories/decorators.md) | See versioned documentation here | See versioned documentation here |
+| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Write docs | DocsPage | [See current documentation](./writing-docs/docs-page.md) | See versioned addon documentation | Non existing feature or undocumented |
+| | MDX | [See current documentation](./writing-docs/mdx.md) | See versioned addon documentation | Non existing feature or undocumented |
+| | Doc Blocks/Argstable | [See current documentation](./writing-docs/doc-block-argstable.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Canvas | [See current documentation](./writing-docs/doc-block-canvas.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Color Palette | [See current documentation](./writing-docs/doc-block-colorpalette.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Description | [See current documentation](./writing-docs/doc-block-description.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Icon Gallery | [See current documentation](./writing-docs/doc-block-icongallery.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Source | [See current documentation](./writing-docs/doc-block-source.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Story | [See current documentation](./writing-docs/doc-block-story.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Doc Blocks/Typeset | [See current documentation](./writing-docs/doc-block-typeset.md) | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/) | Non existing feature or undocumented |
+| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) |
+| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) |
+| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) |
+| | Import stories in tests | [See current documentation](./writing-tests/importing-stories-in-tests.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) |
+| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) |
+| | Embed | [See current documentation](./sharing/embed.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Composition | [See current documentation](./sharing/storybook-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Package Composition | [See current documentation](./sharing/package-composition.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Essential addons | Controls | [See current documentation](./essentials/controls.md) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) |
+| | Actions | [See current documentation](./essentials/actions.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) |
+| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
+| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
+| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
+| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/basics/writing-stories) |
+| | Integration/Webpack | [See current documentation](./configure/webpack.md) | See versioned documentation | See versioned documentation |
+| | Integration/Babel | [See current documentation](./configure/babel.md) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
+| | Integration/Typescript | [See current documentation](./configure/typescript.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) |
+| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.md) | See versioned documentation | See versioned documentation |
+| | Integration/Images and assets | [See current documentation](./configure/images-and-assets.md) | See versioned documentation | See versioned documentation |
+| | Story rendering | [See current documentation](./configure/story-rendering.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) |
+| | Story Layout | [See current documentation](./configure/story-layout.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | User Interface/Features and behavior | [See current documentation](./configure/features-and-behavior.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
+| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
+| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
+| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
+| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/addons/using-addons/) |
+| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
+| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| | Types of addons | [See current documentation](./addons/addon-types.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | Addons API | [See current documentation](./addons/addons-api.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) |
+| API | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
+| | Stories/MDX syntax | [See current documentation](./api/mdx.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax) | Non existing feature or undocumented |
+| | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
+| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the storiesOf format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@@ -252,7 +265,7 @@ Suppose you don't want to run the command above frequently. Add http-serve
### Can I use Storybook with Vue 3?
-Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](../get-started/install.md) for instructions.
+Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions.
### Is snapshot testing with Storyshots supported for Vue 3?
@@ -264,7 +277,7 @@ See our documentation on how to customize the [Storyshots configuration](./snaps
### Why are my MDX stories not working in IE11?
-Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](../writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
+Currently there's an issue when using MDX stories with IE11. This issue does not apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.
### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
@@ -360,12 +373,10 @@ export default meta;
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
-
## Why is Storybook's source loader returning undefined with curried functions?
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
-
## Why are my args no longer displaying the default values?
Before version 6.3, unset args were set to the `argTypes.defaultValue` if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as `undefined` when unset, allowing the framework to supply its default value.
@@ -400,4 +411,4 @@ export default {
},
},
};
-```
\ No newline at end of file
+```
diff --git a/docs/get-started/conclusion.md b/docs/get-started/conclusion.md
index 79d662b19f48..074d4dd09a48 100644
--- a/docs/get-started/conclusion.md
+++ b/docs/get-started/conclusion.md
@@ -8,4 +8,4 @@ If you’d like to learn workflows for building app UIs with Storybook, check ou
- [How to write stories](../writing-stories/introduction.md)
- [How to document components and design systems](../writing-docs/introduction.md)
-- [View example Storybooks from leading companies](./examples.md)
+- [View example Storybooks from leading companies](https://storybook.js.org/showcase)
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 7c24707d5429..cada685c43da 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -41,6 +41,7 @@ The command above will make the following changes to your local environment:
- 🛠 Setup the necessary scripts to run and build Storybook.
- 🛠 Add the default Storybook configuration.
- 📝 Add some boilerplate stories to get you started.
+- 📡 Set up telemetry to help us improve Storybook. Read more about it [here](../configure/telemetry.md).
Depending on your framework, first, build your app and then check that everything worked by running:
@@ -92,4 +93,4 @@ If all else fails, try asking for [help](https://storybook.js.org/support)
-Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
+Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
\ No newline at end of file
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 6db9c9907798..e6cd39d8b027 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -25,6 +25,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
'web-components/your-component.js.mdx',
'html/your-component.js.mdx',
'html/your-component.ts.mdx',
+ 'preact/your-component.js.mdx',
]}
/>
@@ -124,7 +125,7 @@ Alternatively, if you want to inject a CSS link tag to the `` directly (or
Load fonts or images from a local directory
-If you're referencing fonts or images from a local directory, you'll need to configure the Storybook script to [serve the static files](../configure/images-and-assets).
+If you're referencing fonts or images from a local directory, you'll need to configure the Storybook script to [serve the static files](../configure/images-and-assets.md).
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 274649bc2237..8425cc063cfc 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -58,6 +58,7 @@ The above story definition can be further improved to take advantage of [Storybo
'svelte/button-story-with-args.mdx.mdx',
'html/button-story-with-args.js.mdx',
'html/button-story-with-args.ts.mdx',
+ 'preact/button-story-with-args.js.mdx',
]}
/>
diff --git a/docs/sharing/design-addon-panel.png b/docs/sharing/design-addon-panel.png
new file mode 100644
index 000000000000..fdb6a4b52e19
Binary files /dev/null and b/docs/sharing/design-addon-panel.png differ
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
new file mode 100644
index 000000000000..48f87006987a
--- /dev/null
+++ b/docs/sharing/design-integrations.md
@@ -0,0 +1,174 @@
+---
+title: 'Design integrations'
+---
+
+Storybook integrates with design tools to speed up your development workflow. That helps you debug inconsistencies earlier in the design process, discover existing components to reuse, and compare designs to stories.
+
+## Figma
+
+[Figma](https://www.figma.com/) is a collaborative UI design tool that allows multiple people to work on the same design simultaneously in the browser. There are two ways to integrate Storybook and Figma.
+
+- [**Embed Storybook in Figma**](#embed-storybook-in-figma-with-the-plugin)
+- [**Embed Figma in Storybook**](#embed-figma-in-storybook-with-the-addon)
+
+### Embed Storybook in Figma with the plugin
+
+[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/), a publishing tool created by the Storybook team.
+
+
+
+#### Install plugin
+
+Before we begin, you must have a Storybook [published to Chromatic](./publish-storybook.md#publish-storybook-with-chromatic). It provides the index, versions, and access control that back the plugin.
+
+Go to [Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) to install the plugin.
+
+In Figma, open the command palette (in Mac OS, use `Command + /`, in Windows use `Control + /`) and type `Storybook Connect` to enable it.
+
+
+
+Follow the instructions to connect and authenticate with Chromatic.
+
+#### Link stories to Figma components
+
+Link stories to Figma components, variants, and instances.
+
+Go to a story in a Storybook published on Chromatic. Make sure it’s on the branch you want to link. Then copy the URL to the story.
+
+In Figma, select the component, open the plugin, and paste the URL.
+
+
+
+Chromatic will automatically update your linked stories to reflect the most recent Storybook published on the branch you linked. That means the link persists even as you push new code.
+
+
+💡 The plugin does not support linking stories to Figma layers.
+
+
+#### View stories in Figma
+
+Once they're connected, you'll be able to view the story by clicking the link in the sidebar. Click "View story". Alternatively, open the plugin by using the command palette (in Mac OS, use `Command + /`, in Windows, use `Control + /`), then type `Storybook Connect`.
+
+
+
+### Embed Figma in Storybook with the addon
+
+[Design addon](https://storybook.js.org/addons/storybook-addon-designs) allows you to embed Figma files and prototypes in Storybook.
+
+
+
+#### Install design addon
+
+Run the following command to install the addon.
+
+
+
+
+
+
+
+Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
+
+
+
+
+
+
+
+#### Link Figma components to stories
+
+In Figma, open the file you want to embed in Storybook. You can embed files, prototypes, components, and frames.
+
+- Embed a file or prototype, click the "Share" button to generate a unique URL for the file then click "Copy link".
+
+- Embed a component or frame check "Link to selected frame" in the Share dialog. Or right click on the frame and go to "Copy/Paste as" » "Copy link".
+
+In Storybook, add a new [parameter](../writing-stories/parameters.md) named `design` to your story and paste the Figma URL. For example:
+
+
+
+
+
+
+
+#### View designs in Storybook
+
+Click the "Design" tab in the addon panel to view the embedded Figma design.
+
+
+
+## Zeplin
+
+[Zeplin](https://zeplin.io/) is a design tool that generates styleguides from [Sketch](https://www.sketch.com/), [Figma](https://www.figma.com/), and [Adobe XD](https://www.adobe.com/en/products/xd.html).
+
+Use the [Zeplin addon](https://storybook.js.org/addons/storybook-zeplin) to connect Storybook. The addon displays designs from Zeplin alongside the currently selected story. It includes convenient tooling to overlay the design image atop the live component.
+
+Zeplin's native app also supports [links to published Storybooks](https://support.zeplin.io/en/articles/5674596-connecting-your-storybook-instance-with-zeplin).
+
+
+
+## Zeroheight
+
+[Zeroheight](https://zeroheight.com/) is a collaborative styleguide generator for design systems. It showcases design, code, brand, and copywriting documentation in one place. Users can easily edit that documentation with a WYSIWYG editor.
+
+Zeroheight integrates with [Storybook](https://zeroheight.com/3xlwst8/p/507ba7-storybook), enabling you to embed stories alongside your design specs.
+
+
+
+## UXPin
+
+[UXPin](https://www.uxpin.com/) is an interactive design tool that uses production code to generate prototypes.
+
+UXPin allows you to [use interactive stories](https://www.uxpin.com/docs/merge/storybook-integration/) to design user flows.
+
+
+
+## InVision Design System Manager
+
+[InVision DSM](https://www.invisionapp.com/design-system-manager) is a design system documentation tool. It helps design teams consolidate UX principles, user interface design, and design tokens in a shared workspace.
+
+InVision allows you to embed [Storybook](https://support.invisionapp.com/hc/en-us/articles/360028388192-Publishing-Storybook-to-DSM) in your design system documentation.
+
+
+
+## Adobe XD
+
+[Adobe XD](https://www.adobe.com/products/xd.html) is a UI and UX design tool for creating wireframes, interactive designs, and prototypes.
+
+Integrate Adobe XD with Storybook using the [design addon](https://storybook.js.org/addons/storybook-addon-designs/). You can [embed design specs](https://helpx.adobe.com/xd/help/publish-design-specs.html) alongside stories by following these [instructions](https://pocka.github.io/storybook-addon-designs/?path=/story/docs-iframe-readme--page).
+
+## Build your own integration
+
+Extend and customize Storybook by building an integration. Integrate with lower-level Storybook APIs or bootstrap an addon to customize Storybook's UI and behavior.
+
+- [Addon documentation](../addons/introduction.md)
+- [Create an addon tutorial](https://storybook.js.org/tutorials/create-an-addon/)
diff --git a/docs/sharing/figma-plugin-open-in-figma.png b/docs/sharing/figma-plugin-open-in-figma.png
new file mode 100644
index 000000000000..9c699609c207
Binary files /dev/null and b/docs/sharing/figma-plugin-open-in-figma.png differ
diff --git a/docs/sharing/figma-plugin-open-story.mp4 b/docs/sharing/figma-plugin-open-story.mp4
new file mode 100644
index 000000000000..354a5355af47
Binary files /dev/null and b/docs/sharing/figma-plugin-open-story.mp4 differ
diff --git a/docs/sharing/figma-plugin-paste-url.png b/docs/sharing/figma-plugin-paste-url.png
new file mode 100644
index 000000000000..a9484c11c3e8
Binary files /dev/null and b/docs/sharing/figma-plugin-paste-url.png differ
diff --git a/docs/sharing/figma-plugin-sidebar.png b/docs/sharing/figma-plugin-sidebar.png
new file mode 100644
index 000000000000..9cf9c13265cc
Binary files /dev/null and b/docs/sharing/figma-plugin-sidebar.png differ
diff --git a/docs/sharing/storybook-figma-addon.png b/docs/sharing/storybook-figma-addon.png
new file mode 100644
index 000000000000..f6924a72b90d
Binary files /dev/null and b/docs/sharing/storybook-figma-addon.png differ
diff --git a/docs/sharing/storybook-invision-dsm.gif b/docs/sharing/storybook-invision-dsm.gif
new file mode 100644
index 000000000000..adaf18d8d021
Binary files /dev/null and b/docs/sharing/storybook-invision-dsm.gif differ
diff --git a/docs/sharing/storybook-uxpin.mp4 b/docs/sharing/storybook-uxpin.mp4
new file mode 100644
index 000000000000..e9a8d4750ff3
Binary files /dev/null and b/docs/sharing/storybook-uxpin.mp4 differ
diff --git a/docs/sharing/storybook-zeplin-addon.png b/docs/sharing/storybook-zeplin-addon.png
new file mode 100644
index 000000000000..d334ac147894
Binary files /dev/null and b/docs/sharing/storybook-zeplin-addon.png differ
diff --git a/docs/sharing/storybook-zeroheight.gif b/docs/sharing/storybook-zeroheight.gif
new file mode 100644
index 000000000000..4ec641641307
Binary files /dev/null and b/docs/sharing/storybook-zeroheight.gif differ
diff --git a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
index 423d9de4a6b7..15b10326a495 100644
--- a/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/angular/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './button.component';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.mdx.mdx b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..85939ccf81a0
--- /dev/null
+++ b/docs/snippets/angular/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,27 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent.component';
+
+
+
+export const Template = () => ({ props: {} });
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..eb0e2565f611
--- /dev/null
+++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts
+
+import { Story, Meta } from '@storybook/angular/';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent.component';
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story = () => ({
+ props: {},
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.mdx.mdx b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
index 03e662a852a8..31443143cd7d 100644
--- a/docs/snippets/angular/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm.component';
@@ -13,7 +15,7 @@ export const Template = (args) => ({ props: args });
```
\ No newline at end of file
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
index 276e1d785a2e..48df0db4da3c 100644
--- a/docs/snippets/angular/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -5,6 +5,8 @@ import { Meta, Story } from '@storybook/angular';
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm.component';
export default {
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
index 20b6d5cc2a49..6ed819ac2e70 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -28,4 +28,4 @@ export const Template = (args) => ({ props: args });
}} >
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
index c0bdc9307061..084f43dd360d 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -23,7 +23,7 @@ const Template: Story = (args) => ({
export const DelayedStory: Story = Template.bind({});
DelayedStory.play = () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -33,4 +33,4 @@ DelayedStory.play = () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index 7c1ccf730efd..77d833352065 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -1,5 +1,5 @@
```js
-// your-addon/register.js
+// your-addon/manager.js
import { useArgs } from '@storybook/api';
diff --git a/docs/snippets/common/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx
new file mode 100644
index 000000000000..da897c5a7829
--- /dev/null
+++ b/docs/snippets/common/button-story-project-args-theme.js.mdx
@@ -0,0 +1,9 @@
+```js
+// preview.js
+
+// All stories expect a theme arg
+export const argTypes = { theme: { control: { options: ['light', 'dark'] } } };
+
+// The default value of the theme arg to all stories
+export const args = { theme: 'light' };
+```
diff --git a/docs/snippets/common/component-cypress-test.js.mdx b/docs/snippets/common/component-cypress-test.js.mdx
index 03d9db2866a7..8de26d698793 100644
--- a/docs/snippets/common/component-cypress-test.js.mdx
+++ b/docs/snippets/common/component-cypress-test.js.mdx
@@ -8,7 +8,7 @@ describe('Login Form', () => {
cy.visit('/iframe.html?id=components-login-form--example');
cy.get('#login-form').within(() => {
cy.log('**enter the email**');
- cy.get('#email').should('have.value', 'your-own-emailaddress@provider.com');
+ cy.get('#email').should('have.value', 'email@provider.com');
cy.log('**enter password**');
cy.get('#password').should('have.value', 'a-random-password');
});
diff --git a/docs/snippets/common/component-playwright-test.js.mdx b/docs/snippets/common/component-playwright-test.js.mdx
index d9d195f40967..0e0e83b99a43 100644
--- a/docs/snippets/common/component-playwright-test.js.mdx
+++ b/docs/snippets/common/component-playwright-test.js.mdx
@@ -7,7 +7,7 @@ test('Login Form inputs', async ({ page }) => {
await page.goto('http://localhost:6006/iframe.html?id=components-login-form--example');
const email = await page.inputValue('#email');
const password = await page.inputValue('#password');
- await expect(email).toBe('your-own-emailaddress@provider.com');
+ await expect(email).toBe('email@provider.com');
await expect(password).toBe('a-random-password');
});
```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
new file mode 100644
index 000000000000..58ecafb7128c
--- /dev/null
+++ b/docs/snippets/common/component-story-conditional-controls-mutual-exclusion.js.mdx
@@ -0,0 +1,19 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+export default {
+ component: Button,
+ title: 'Button',
+ argTypes: {
+ // button can be passed a label or an image, not both
+ label: {
+ control: 'text',
+ if: { arg: 'image', truthy: false },
+ },
+ image: {
+ control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+ if: { arg: 'label', truthy: false },
+ },
+ },
+};
+```
diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
new file mode 100644
index 000000000000..2eba20f71e3e
--- /dev/null
+++ b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+export default {
+ component: Button,
+ title: 'Button',
+ argTypes: {
+ label: { control: 'text' }, // always shows
+ advanced: { control: 'boolean' },
+ // below are only included when advanced is true
+ margin: { control: 'number', if: { arg: 'advanced' } },
+ padding: { control: 'number', if: { arg: 'advanced' } },
+ cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+ },
+};
+```
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index ae09a7eb6291..a1bc4291717c 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -12,7 +12,7 @@ export default {
component: Button,
};
-export const Template = (args) => ({
+const Template = (args) => ({
//👇 Your template goes here
});
diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx
index 4bbcdaccf3ac..b1a054880605 100644
--- a/docs/snippets/common/component-story-disable-controls.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls.js.mdx
@@ -5,9 +5,9 @@ import { YourComponent } from './YourComponent';
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
argTypes: {
@@ -19,4 +19,4 @@ export default {
},
},
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-disable-controls.mdx.mdx b/docs/snippets/common/component-story-disable-controls.mdx.mdx
index 04f50ba86a62..52d04044e018 100644
--- a/docs/snippets/common/component-story-disable-controls.mdx.mdx
+++ b/docs/snippets/common/component-story-disable-controls.mdx.mdx
@@ -9,10 +9,10 @@ import { YourComponent } from './YourComponent'
title="YourComponent"
component={YourComponent}
argTypes={{
- foo:{
- table:{
+ foo: {
+ table: {
disable: true,
}
}
}} />
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
index 8d377271a76e..d66d3d240e56 100644
--- a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
@@ -10,7 +10,7 @@ import dedent from 'ts-dedent';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
index 72c6f1e7cb00..8009d61ac4fd 100644
--- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx
+++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
import React from 'react';
diff --git a/docs/snippets/common/my-component-env-var-config.js.mdx b/docs/snippets/common/my-component-env-var-config.js.mdx
new file mode 100644
index 000000000000..fc83a32f3b6b
--- /dev/null
+++ b/docs/snippets/common/my-component-env-var-config.js.mdx
@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js|jsx|ts|tsx
+
+import { MyComponent } from './MyComponent';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'MyComponent',
+ component: MyComponent,
+};
+
+const Template = (args) => ({
+ //👇 Your template goes here
+});
+
+export const Default = Template.bind({});
+Default.args = {
+ exampleProp: process.env.EXAMPLE_VAR,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-env-var-config.mdx.mdx b/docs/snippets/common/my-component-env-var-config.mdx.mdx
new file mode 100644
index 000000000000..beaf32a5d824
--- /dev/null
+++ b/docs/snippets/common/my-component-env-var-config.mdx.mdx
@@ -0,0 +1,23 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { MyComponent } from './MyComponent';
+
+
+
+export const Template = (args) => ({
+ //👇 Your template goes here
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-install.npm.js.mdx b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
new file mode 100644
index 000000000000..933ac6105d46
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/addon-a11y --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-install.yarn.js.mdx b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
new file mode 100644
index 000000000000..41e5bf35360e
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/addon-a11y
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-register.js.mdx b/docs/snippets/common/storybook-a11y-register.js.mdx
index 26837cd8cdd5..4c6401ea169a 100644
--- a/docs/snippets/common/storybook-a11y-register.js.mdx
+++ b/docs/snippets/common/storybook-a11y-register.js.mdx
@@ -2,11 +2,10 @@
// .storybook/main.js
module.exports = {
- stories:[],
- addons:[
- '@storybook/addon-links',
- '@storybook/addon-essentials',
- '@storybook/preset-create-react-app',
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
'@storybook/addon-a11y', //👈 The a11y addon goes here
+ ],
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-a11y-register.ts.mdx b/docs/snippets/common/storybook-a11y-register.ts.mdx
new file mode 100644
index 000000000000..73137a1bf616
--- /dev/null
+++ b/docs/snippets/common/storybook-a11y-register.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ '@storybook/addon-a11y', //👈 The a11y addon goes here
+ ],
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx
index 8e4794320c1e..fc9f821e60c4 100644
--- a/docs/snippets/common/storybook-addon-change-panel.js.mdx
+++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/src/register.js
+// /my-addon/src/manager.js
import { useParameter } from '@storybook/api';
diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
index b8dc0b43b88e..f74d563d5366 100644
--- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
new file mode 100644
index 000000000000..027dc24430bf
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/testing-library @storybook/jest @storybook/addon-interactions --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
new file mode 100644
index 000000000000..d4e583095882
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/testing-library @storybook/jest @storybook/addon-interactions
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx
index 5f3898b61c67..29d8a1ab9d46 100644
--- a/docs/snippets/common/storybook-addon-panel-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-panel/register.js
+// addon-panel/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index fb4b80e7cff0..9f9e6b6c05f0 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx
index bbfddd9627cd..dcfa1b41f92b 100644
--- a/docs/snippets/common/storybook-addon-tab-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-tab/register.js
+// addon-tab/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 37ca2cfb2713..869c9df49ad4 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -1,5 +1,5 @@
```js
-// addon-toolbar/register.js
+// addon-toolbar/manager.js
import React from "react";
diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
index 415edea16fd7..6f5f9e3845aa 100644
--- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
index 76513f992911..0c324ddd0d24 100644
--- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.getQueryParam('bbc');
diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
index e7e9f13fe831..39321b7f1958 100644
--- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
const href = api.getUrlState({
diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx
index eb2af57b1a9a..e44d88ab048f 100644
--- a/docs/snippets/common/storybook-addons-api-imports.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { addons } from '@storybook/addons';
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
index 2f69823954b9..3c9617bfa19e 100644
--- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { makeDecorator } from '@storybook/addons';
diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx
index aa2e706c51c6..ac86c5e43918 100644
--- a/docs/snippets/common/storybook-addons-api-on.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-on.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.on('some-event', (eventData) => console.log(eventData));
diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx
index 009b2ea7e660..3c044eebd8c4 100644
--- a/docs/snippets/common/storybook-addons-api-register.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-register.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { addons } from '@storybook/addons';
diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
index 24b46cc3191b..46c89f25fa43 100644
--- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.selectInCurrentKind('Basic');
diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
index bd1314b7ec4f..4af2f91bc3ad 100644
--- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.selectStory('Button', 'Basic');
diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
index 988482dbd3ad..bbfaa727b722 100644
--- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
addons.register('my-organisation/my-addon', (api) => {
api.setQueryParams({
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index c0800d6d301b..6d6db143ba12 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index f88c1c1524a2..f6c05424dc6a 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index 7184c752dc05..f017c5cfccb0 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
index 94f5a8b83313..ad33aef34253 100644
--- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
index 3c496cbb2a09..fdbc74301782 100644
--- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
index 62f1605af9f1..4e1515a3b6b3 100644
--- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
@@ -1,5 +1,5 @@
```js
-// /my-addon/register.js
+// /my-addon/manager.js
import React from 'react';
diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
index 3187d5e6f3a4..f34c4859bfb9 100644
--- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
+++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
@@ -1,5 +1,5 @@
```js
-// .storybook/my-addon/register.js
+// .storybook/my-addon/manager.js
import { useArgTypes } from '@storybook/api';
diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx
index 436d862dc8ac..765d8d1ab341 100644
--- a/docs/snippets/common/storybook-client-preview.ts.mdx
+++ b/docs/snippets/common/storybook-client-preview.ts.mdx
@@ -1,7 +1,7 @@
```ts
// your-framework/src/client/preview/index.ts
-import { start } from '@storybook/core/client';
+import { start } from '@storybook/core';
import './globals';
diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
new file mode 100644
index 000000000000..9ed1c3e5430d
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
new file mode 100644
index 000000000000..81212a40c93a
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
new file mode 100644
index 000000000000..c9e70448cefa
--- /dev/null
+++ b/docs/snippets/common/storybook-disable-telemetry-flag.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --disable-telemetry
+```
diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
new file mode 100644
index 000000000000..2ef0c42eee1f
--- /dev/null
+++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev storybook-addon-designs
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
new file mode 100644
index 000000000000..2c11db47977a
--- /dev/null
+++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add -D storybook-addon-designs
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
new file mode 100644
index 000000000000..c7786a174244
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true, // 👈 Disables telemetry
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
new file mode 100644
index 000000000000..1f707e2d95e7
--- /dev/null
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true, // 👈 Disables telemetry
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
new file mode 100644
index 000000000000..d1c4064fa142
--- /dev/null
+++ b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ '@storybook/addon-interactions', // 👈 Addon is registered here
+ ],
+ features: {
+ interactionsDebugger: true, // 👈 Enable playback controls
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-env-field-config.js.mdx b/docs/snippets/common/storybook-main-env-field-config.js.mdx
new file mode 100644
index 000000000000..a8bec07f7f1b
--- /dev/null
+++ b/docs/snippets/common/storybook-main-env-field-config.js.mdx
@@ -0,0 +1,20 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ /*
+ * 👇 The `config` argument contains all the other existing environment variables.
+ * Either configured in an `.env` file or configured on the command line.
+ */
+ env: (config) => ({
+ ...config,
+ EXAMPLE_VAR: 'An environment variable configured in Storybook',
+ }),
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
new file mode 100644
index 000000000000..de68b73dcacc
--- /dev/null
+++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js|ts
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ // Other Storybook addons
+ 'storybook-addon-designs', // 👈 Addon is registered here
+ ],
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx
index 0f587017ee85..675a1d62c08a 100644
--- a/docs/snippets/common/storybook-main-register-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-addon.js.mdx
@@ -2,6 +2,6 @@
// .storybook/main.js
module.exports = {
- addons: ['path/to/register.js'],
+ addons: ['path/to/manager.js'],
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
new file mode 100644
index 000000000000..8c20f79bb8e8
--- /dev/null
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
@@ -0,0 +1,8 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};
+```
diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
index 4a913b4f8aa3..18fa46acdf1f 100644
--- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
+++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
@@ -3,7 +3,6 @@
module.exports = {
addons: [
- '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon.
'@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
],
};
diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
index 5bbaa228a809..024799320379 100644
--- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
@@ -2,6 +2,6 @@
// .storybook/main.js
module.exports = {
- managerEntries: ['@storybook/addon-storysource/register'],
+ managerEntries: ['some-storybook-addon/entry-point.js'],
};
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
similarity index 97%
rename from docs/snippets/common/storybook-main-webpack5-fsCache.mdx
rename to docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
index 622152ccfc46..9ea2077caa93 100644
--- a/docs/snippets/common/storybook-main-webpack5-fsCache.mdx
+++ b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
},
},
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
index fb0cd405ac72..65d78e77448b 100644
--- a/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx
@@ -12,6 +12,8 @@ export const globalTypes = {
items: ['light', 'dark'],
// Property that specifies if the name of the item will be displayed
showName: true,
+ // Change title based on selected value
+ dynamicTitle: true,
},
},
};
diff --git a/docs/snippets/common/storybook-run-dev.npm.js.mdx b/docs/snippets/common/storybook-run-dev.npm.js.mdx
index 0a952c1b61cc..8f7f525b9a59 100644
--- a/docs/snippets/common/storybook-run-dev.npm.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.npm.js.mdx
@@ -1,4 +1,3 @@
```shell
-# Starts Storybook in development mode
npm run storybook
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-run-dev.yarn.js.mdx b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
index c93bf22abb92..137dc51f4c21 100644
--- a/docs/snippets/common/storybook-run-dev.yarn.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
@@ -1,4 +1,3 @@
```shell
-# Starts Storybook in development mode
yarn storybook
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
index 5e792ec1d298..e9c5dec6d95e 100644
--- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
@@ -1,7 +1,5 @@
```js
// storysource/preset.js
-export function managerEntries(entry = []) {
- return [...entry, require.resolve('@storybook/addon-storysource/register')];
-}
+/* nothing needed */
```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
new file mode 100644
index 000000000000..88d98f5c6bb3
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
@@ -0,0 +1,13 @@
+```js
+{
+ stack: 'Error: Your button is not working\n' +
+ ' at Object. ($SNIP/test.js:39:27)\n' +
+ ' at Module._compile (node:internal/modules/cjs/loader:1103:14)\n' +
+ ' at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)\n' +
+ ' at Module.load (node:internal/modules/cjs/loader:981:32)\n' +
+ ' at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' +
+ ' at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)\n' +
+ ' at node:internal/main/run_main_module:17:47',
+ message: 'Your button is not working'
+}
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
new file mode 100644
index 000000000000..c1e3d032880e
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -0,0 +1,18 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
new file mode 100644
index 000000000000..7ce3bba1a827
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// .storybook/main.ts
+
+// Imports Storybook's configuration API
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/preset-create-react-app',
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: 'webpack5',
+ enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
new file mode 100644
index 000000000000..eab8893ec86f
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
new file mode 100644
index 000000000000..fdb9d20be615
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
new file mode 100644
index 000000000000..41b65f194069
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
new file mode 100644
index 000000000000..b0fc399a5408
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run storybook -- --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
new file mode 100644
index 000000000000..71876f939367
--- /dev/null
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn storybook --enable-crash-reports
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
new file mode 100644
index 000000000000..22bf4552fe90
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
@@ -0,0 +1,23 @@
+```js
+// .storybook/test-runner.js
+
+const { injectAxe, checkA11y } = require('axe-playwright');
+
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+module.exports = {
+ async preRender(page) {
+ await injectAxe(page);
+ },
+ async postRender(page) {
+ await checkA11y(page, '#root', {
+ detailedReport: true,
+ detailedReportOptions: {
+ html: true,
+ },
+ });
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
new file mode 100644
index 000000000000..aed751c49a9b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// .storybook/test-runner.ts
+
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+/*
+* See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
+* to learn more about the test-runner hooks API.
+*/
+const a11yConfig: TestRunnerConfig = {
+ async preRender(page) {
+ await injectAxe(page);
+ },
+ async postRender(page) {
+ await checkA11y(page, '#root', {
+ detailedReport: true,
+ detailedReportOptions: {
+ html: true,
+ },
+ });
+ },
+};
+
+module.exports = a11yConfig;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
new file mode 100644
index 000000000000..aecfe3f9f414
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install axe-playwright --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
new file mode 100644
index 000000000000..e2d8d43da865
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev axe-playwright
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
new file mode 100644
index 000000000000..79ae4ca39232
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --no-stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
new file mode 100644
index 000000000000..141d6375fa63
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --no-stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
new file mode 100644
index 000000000000..88667dfad959
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --watch
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
new file mode 100644
index 000000000000..7f4617721424
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --watch
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
new file mode 100644
index 000000000000..abc722730ba3
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
@@ -0,0 +1,3 @@
+```shell
+TARGET_URL=https://the-storybook-url-here.com yarn test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
new file mode 100644
index 000000000000..9b3b6020ba60
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --url https://the-storybook-url-here.com
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
new file mode 100644
index 000000000000..af9b66dc11a4
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --url https://the-storybook-url-here.com
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
new file mode 100644
index 000000000000..345a549b73d0
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
new file mode 100644
index 000000000000..0e90b9012b2b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
new file mode 100644
index 000000000000..85f2437a74a0
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
@@ -0,0 +1,24 @@
+```js
+// .storybook/test-runner.js
+
+module.exports = {
+ // Hook that is executed before the test runner starts running tests
+ setup() {
+ // Add your configuration here.
+ },
+ /* Hook to execute before a story is rendered.
+ * The page argument is the Playwright's page object for the story.
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async preRender(page, context) {
+ // Add your configuration here.
+ },
+ /* Hook to execute after a story is rendered.
+ * The page argument is the Playwright's page object for the story
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async postRender(page, context) {
+ // Add your configuration here.
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
new file mode 100644
index 000000000000..bdc01f0f8c8b
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// .storybook/test-runner.ts
+
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+ // Hook that is executed before the test runner starts running tests
+ setup() {
+ // Add your configuration here.
+ },
+ /* Hook to execute before a story is rendered.
+ * The page argument is the Playwright's page object for the story.
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async preRender(page, context) {
+ // Add your configuration here.
+ },
+ /* Hook to execute after a story is rendered.
+ * The page argument is the Playwright's page object for the story
+ * The context argument is a Storybook object containing the story's id, title, and name.
+ */
+ async postRender(page, context) {
+ // Add your configuration here.
+ },
+};
+
+module.exports = config;
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.npm.js.mdx b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
new file mode 100644
index 000000000000..90f046c3ec62
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install @storybook/test-runner jest --save-dev
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
new file mode 100644
index 000000000000..3221e525779e
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/test-runner jest
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
new file mode 100644
index 000000000000..ce8e8658aaa5
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
@@ -0,0 +1,26 @@
+```yml
+# .github/workflows/storybook-tests.yml
+
+name: 'Storybook Tests'
+on: push
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '14.x'
+ - name: Install dependencies
+ run: yarn
+ - name: Install Playwright
+ run: npx playwright install --with-deps
+ - name: Build Storybook
+ run: yarn build-storybook --quiet
+ - name: Serve Storybook and run tests
+ run: |
+ npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+ "npx http-server storybook-static --port 6006 --silent" \
+ "npx wait-on tcp:6006 && yarn test-storybook"
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
new file mode 100644
index 000000000000..4a8705f7ec19
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
@@ -0,0 +1,24 @@
+```yml
+# .github/workflows/storybook-tests.yml
+
+name: Storybook Tests
+on: deployment_status
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ if: github.event.deployment_status.state == 'success'
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '14.x'
+ - name: Install dependencies
+ run: yarn
+ - name: Install Playwright
+ run: npx playwright install --with-deps
+ - name: Run Storybook tests
+ run: yarn test-storybook
+ env:
+ TARGET_URL: '${{ github.event.deployment_status.target_url }}'
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
new file mode 100644
index 000000000000..0199d36a8ba6
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm run test-storybook -- --stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
new file mode 100644
index 000000000000..8a5bf7838bda
--- /dev/null
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn test-storybook --stories-json
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
new file mode 100644
index 000000000000..f49ff3a0f3fb
--- /dev/null
+++ b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/testing-( react | vue | vue3 | angular)
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
new file mode 100644
index 000000000000..4b6378ec00d9
--- /dev/null
+++ b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/testing-( react | vue | vue3 | angular )
+```
\ No newline at end of file
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
index 5fcafab87256..6c3be843f097 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
@@ -8,5 +8,6 @@ export default create({
brandTitle: 'My custom storybook',
brandUrl: 'https://example.com',
brandImage: 'https://place-hold.it/350x150',
+ brandTarget: '_self',
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 24f9771bad36..4858c332aa17 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -37,5 +37,6 @@ export default create({
brandTitle: 'My custom storybook',
brandUrl: 'https://example.com',
brandImage: 'https://place-hold.it/350x150',
+ brandTarget: '_self',
});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 3466f20cbcd8..60feb2014547 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -1,7 +1,7 @@
```js
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index e3f866a17886..3130fc260de7 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/html';
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx
index b83ef27897a3..50e47094f092 100644
--- a/docs/snippets/html/your-component.js.mdx
+++ b/docs/snippets/html/your-component.js.mdx
@@ -6,7 +6,7 @@ import { createYourComponent } from './YourComponent';
// 👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx
index b41050449f72..52dcbbdb7f48 100644
--- a/docs/snippets/html/your-component.ts.mdx
+++ b/docs/snippets/html/your-component.ts.mdx
@@ -7,7 +7,7 @@ import { createYourComponent } from './YourComponent';
//👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx
new file mode 100644
index 000000000000..93b3a1b01943
--- /dev/null
+++ b/docs/snippets/preact/button-story-with-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { Button } from './Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+}
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => ;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+ primary: true,
+ label: 'Button',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx
index ffededb82f9c..db4f1887ada4 100644
--- a/docs/snippets/preact/button-story.js.mdx
+++ b/docs/snippets/preact/button-story.js.mdx
@@ -6,6 +6,10 @@ import { h } from 'preact';
import { Button } from './Button';
export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
}
diff --git a/docs/snippets/preact/your-component.js.mdx b/docs/snippets/preact/your-component.js.mdx
new file mode 100644
index 000000000000..48ed9e84991d
--- /dev/null
+++ b/docs/snippets/preact/your-component.js.mdx
@@ -0,0 +1,26 @@
+```js
+// YourComponent.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/preact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'YourComponent',
+ component: YourComponent,
+}
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => ;
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+ //👇 The args you need here will depend on your component
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx
deleted file mode 100644
index 73946a456b30..000000000000
--- a/docs/snippets/react/accessibility-testing-with-jest-axe.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// MyComponent.test.js
-
-import { render } from '@testing-library/react';
-
-import { composeStories } from '@storybook/testing-react';
-
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-import * as MyComponentStories from './MyComponent.stories';
-
-const { Accessible } = composeStories(MyComponentStories);
-
-expect.extend(toHaveNoViolations);
-
-test('Example accessiblity test', async () => {
- const { container } = render();
-
- const AxeResults = await axe(container);
-
- expect(AxeResults).toHaveNoViolations();
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index c4a139a0060f..b7baafb461b6 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -19,7 +19,7 @@ const Template = (args) => ;
// 👇 Each story then reuses that template
export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+Primary.args = { backgroundColor: '#ff0', label: 'Button' };
export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
diff --git a/docs/snippets/react/button-story-with-blue-args.mdx.mdx b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
index f9f69d188f71..7c5e3c682781 100644
--- a/docs/snippets/react/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import { Button } from './Button';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.mdx.mdx b/docs/snippets/react/button-story-with-emojis.mdx.mdx
index f2e62a5178f2..61a12324bdce 100644
--- a/docs/snippets/react/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/react/button-story-with-emojis.mdx.mdx
@@ -8,14 +8,14 @@ import { Button } from './Button';
-
+
-
+
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 271dec845b7e..67c84733adf7 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -21,10 +21,10 @@ export const Primary: ComponentStory = () => (
);
export const Secondary: ComponentStory = () => (
-
+
);
export const Tertiary: ComponentStory = () => (
-
+
);
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..57ecc2750431
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js|jsx
+
+import React from 'react';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = () => ;
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.mdx.mdx b/docs/snippets/react/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..455cb3a10eaa
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,27 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+
+
+export const Template = () => ;
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..1b54ea82e143
--- /dev/null
+++ b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import { MyComponent } from './MyComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as ComponentMeta;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = () => ;
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
index 160069be7840..86f04def6814 100644
--- a/docs/snippets/react/document-screen-fetch.js.mdx
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -22,7 +22,7 @@ function useFetchData() {
})
.then((res) => res.json())
.then((data) => {
- setStatus('sucess');
+ setStatus('success');
setData(data);
})
.catch(() => {
diff --git a/docs/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx
index 01d5427e4283..ca6e59d02331 100644
--- a/docs/snippets/react/login-form-with-play-function.js.mdx
+++ b/docs/snippets/react/login-form-with-play-function.js.mdx
@@ -5,6 +5,8 @@ import React from 'react';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
export default {
@@ -25,14 +27,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/login-form-with-play-function.mdx.mdx b/docs/snippets/react/login-form-with-play-function.mdx.mdx
index 2593c723fb15..327a8ae55c42 100644
--- a/docs/snippets/react/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/react/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
@@ -22,16 +24,22 @@ export const Template = (args) => ;
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
- // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
- await userEvent.click(canvas.getByRole('button'));
- }}>
- {Template.bind({})}
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+ // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
+ }}>
+ {Template.bind({})}
```
diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
index df528c066cf8..05b3e8395739 100644
--- a/docs/snippets/react/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -7,6 +7,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import { LoginForm } from './LoginForm';
export default {
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-play-function-composition.js.mdx b/docs/snippets/react/my-component-play-function-composition.js.mdx
index 69987e5d2e17..a6eb763cf286 100644
--- a/docs/snippets/react/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.js.mdx
@@ -20,7 +20,7 @@ const Template = (args) => ;
export const FirstStory = Template.bind({});
FirstStory.play = async () => {
- userEvent.type(screen.getByTestId('an-element'), 'example-value');
+ await userEvent.type(screen.getByTestId('an-element'), 'example-value');
};
export const SecondStory = Template.bind({});
diff --git a/docs/snippets/react/my-component-play-function-composition.ts.mdx b/docs/snippets/react/my-component-play-function-composition.ts.mdx
index 49a23764ec14..963c4333adb2 100644
--- a/docs/snippets/react/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.ts.mdx
@@ -22,7 +22,7 @@ const Template: ComponentStory = (args) => {
- userEvent.type(screen.getByTestId('an-element'), 'example-value');
+ await userEvent.type(screen.getByTestId('an-element'), 'example-value');
};
export const SecondStory = Template.bind({});
diff --git a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
index 2ace28d7a369..9244723af719 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
@@ -11,7 +11,7 @@ import { MyComponent } from './MyComponent';
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'WithAsync',
diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
index 434cd2304a6b..ffda0d5edec1 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
@@ -22,7 +22,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -32,4 +32,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
index 44dd26e7fd96..56ab5df2ebcc 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.mdx.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => ;
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -28,4 +28,4 @@ export const Template = (args) => ;
}}>
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index 93ce662baabd..0d806f32d210 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -24,7 +24,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -34,4 +34,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx b/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
index 60b244c3ff40..9bc7bbd7a6ba 100644
--- a/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
+++ b/docs/snippets/react/storybook-testing-addon-optional-config.js.mdx
@@ -1,5 +1,5 @@
```js
-// setupTests.js
+// setupFile.js
import { setGlobalConfig } from '@storybook/testing-react';
@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-react';
import * as globalStorybookConfig from './.storybook/preview';
setGlobalConfig(globalStorybookConfig);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 10c286edc0fb..5b3121d657ac 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -6,7 +6,7 @@ import { YourComponent } from './YourComponent';
//👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
- * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
@@ -21,4 +21,4 @@ export const FirstStory = {
//👇 The args you need here will depend on your component
},
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
index 68046a1c382a..c6d410ddc632 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx
@@ -3,7 +3,7 @@
import { Meta } from '@storybook/addon-docs';
-import Button from './Button.svelte';
+import Button from './Button.svelte';
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..a509ab634c30
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.svelte';
+
+// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: { MyComponent },
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+const Template = () => ({
+ props: {},
+ Component: MyComponent,
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..3dcfbcfd35e0
--- /dev/null
+++ b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,34 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.svelte';
+
+
+
+export const Template = () => ({
+ props: {},
+ Component: MyComponent,
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index e49f2f000811..e06ea2235a84 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -3,6 +3,8 @@
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.svelte';
export default {
@@ -26,14 +28,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
index b6545bb4cd51..8f5e3441bf6c 100644
--- a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.svelte';
@@ -22,19 +24,23 @@ export const Template = (args) => ({
{
-
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
}}>
{Template.bind({})}
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
index 2c84dca6544a..47ce8d030ca1 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -23,7 +23,7 @@ export const DelayedStory = Template.bind({});
DelayedStory.play = async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -33,4 +33,4 @@ DelayedStory.play = async () => {
delay: 100,
});
};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
index 79f0fee163c0..2706786d7110 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.mdx.mdx
@@ -19,7 +19,7 @@ export const Template = (args) => ({
play={async () => {
const exampleElement= screen.getByLabelText('example-element');
- // The delay option set the ammount of milliseconds between characters being typed
+ // The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
@@ -31,4 +31,4 @@ export const Template = (args) => ({
}}>
{Template.bind({})}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx b/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
deleted file mode 100644
index bb64b8201590..000000000000
--- a/docs/snippets/vue/accessibility-testing-with-jest-axe.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// MyComponent.test.js
-
-import { render } from '@testing-library/vue';
-
-import { composeStories } from '@storybook/testing-vue';
-
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-import * as MyComponentStories from './MyComponent.stories';
-
-const { Accessible } = composeStories(MyComponentStories);
-
-expect.extend(toHaveNoViolations);
-
-test('Example accessiblity test', async () => {
- const { container } = render(Accessible());
-
- const AxeResults = await axe(container);
-
- expect(AxeResults).toHaveNoViolations();
-});
-```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story-starter-example.mdx.mdx b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
index 1905cd91cac4..3b228d2840a9 100644
--- a/docs/snippets/vue/badge-story-starter-example.mdx.mdx
+++ b/docs/snippets/vue/badge-story-starter-example.mdx.mdx
@@ -76,4 +76,4 @@ with unique URLs and isolated snapshot tests.
}}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
index fb34bac4968d..32ed8f0726b5 100644
--- a/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/badge-story.mdx-2.mdx.mdx
@@ -69,4 +69,4 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index 73edf3359698..a083bfbce036 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index fba028c49219..6197ffd73ae4 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -1,5 +1,5 @@
```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..d0e1eb3adadc
--- /dev/null
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ButtonGroup',
+ component: ButtonGroup,
+} as Meta;
+
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { ButtonGroup },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-group-story.ts-3.ts.mdx b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..91b68cc272f6
--- /dev/null
+++ b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// ButtonGroup.stories.ts
+
+import ButtonGroup from './ButtonGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'ButtonGroup',
+ component: ButtonGroup,
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+ components: { ButtonGroup },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const Pair = Template.bind({});
+Pair.args = {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
new file mode 100644
index 000000000000..37a6ec4b52f0
--- /dev/null
+++ b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ decorators: [() => ({ template: '
' })],
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
new file mode 100644
index 000000000000..bc4678319e93
--- /dev/null
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ decorators: [() => ({ template: '
' })],
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
new file mode 100644
index 000000000000..3203b13bc70a
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
new file mode 100644
index 000000000000..afc5e65c7954
--- /dev/null
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 1b87c6bc4b53..95750d3d6c82 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -17,4 +17,4 @@ export const Primary = () => ({
template: '',
});
Primary.storyName = 'I am the primary';
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..14dfc01e1fc2
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..8925512e6961
--- /dev/null
+++ b/docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+Primary.storyName = 'I am the primary';
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..4bfe62dd1183
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { Button },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..b081e49bbe23
--- /dev/null
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn = (args) => ({
+ components: { Button },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
index 062da40594be..445dcaceb6bf 100644
--- a/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.mdx.mdx
@@ -20,5 +20,5 @@ import Button from './Button.vue';
}}
/>
-
+
```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
new file mode 100644
index 000000000000..c55b57c2ccc5
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
new file mode 100644
index 000000000000..00cd50dc5c04
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+ //👇 Creates specific parameters for the story
+ parameters: {
+ backgrounds: {
+ values: [
+ { name: 'red', value: '#f00' },
+ { name: 'green', value: '#0f0' },
+ { name: 'blue', value: '#00f' },
+ ],
+ },
+ },
+} as Meta;
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
new file mode 100644
index 000000000000..cf8c9ca28e53
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
new file mode 100644
index 000000000000..b292bb311fff
--- /dev/null
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Secondary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+
+export const Tertiary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
new file mode 100644
index 000000000000..38643023a710
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
new file mode 100644
index 000000000000..813792649c3d
--- /dev/null
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+
+import Button from './Button.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Button',
+ component: Button,
+} as Meta;
+
+export const Primary: StoryFn = () => ({
+ components: { Button },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
new file mode 100644
index 000000000000..c11f6fc3654b
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = () => ({
+ components: { MyComponent },
+ template: '',
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.mdx.mdx b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
new file mode 100644
index 000000000000..a75e89528830
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.mdx.mdx
@@ -0,0 +1,31 @@
+```md
+
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+
+
+export const Template = (args) => ({
+ // Components used in your story `template` are defined in the `components` object
+ components: { MyComponent },
+ template: 'MyComponent />',
+});
+
+
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
new file mode 100644
index 000000000000..0bacfcc5b3b3
--- /dev/null
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts
+
+import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+
+import { withDesign } from 'storybook-addon-designs';
+
+import MyComponent from './MyComponent.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+ title: 'FigmaExample',
+ component: MyComponent,
+ decorators: [withDesign],
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template: StoryFn = () => ({
+ components: { MyComponent },
+ template: '',
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/Sample-File',
+ },
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
index 1fdcc4039747..2b891162b950 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx
@@ -46,4 +46,4 @@ export const Template = (args) => ({
}}>
{Template.bind({})}
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
new file mode 100644
index 000000000000..429fe6f3fb76
--- /dev/null
+++ b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const Empty: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const OneItem: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: '',
+});
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
+
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
new file mode 100644
index 000000000000..74c9ea1a72b4
--- /dev/null
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -0,0 +1,47 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const Empty: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const OneItem: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { args };
+ },
+ template: `
+
+
+
+
+
+ `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
new file mode 100644
index 000000000000..225252c1575b
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const ManyItems: StoryFn = (args, { argTypes }) => ({
+ components: { List, ListItem },
+ props: Object.keys(argTypes),
+ template: `
+
+
+
+
+ `,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
new file mode 100644
index 000000000000..ff0fe53148d8
--- /dev/null
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -0,0 +1,38 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+import ListItem from './ListItem.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+export const ManyItems: StoryFn = (args) => ({
+ components: { List, ListItem },
+ setup() {
+ return { ...args };
+ },
+ template: `
+
+
+
+
+ `,
+});
+
+ManyItems.args = {
+ Selected: Selected.args.isSelected,
+ Unselected: Unselected.args.isSelected,
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
new file mode 100644
index 000000000000..ff6266df96ac
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { Meta, StoryFn } from '@storybook/vue';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args, { argTypes }) => ({
+ components: { List },
+ props: Object.keys(argTypes),
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
new file mode 100644
index 000000000000..c70cddcd7b08
--- /dev/null
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// List.stories.ts
+
+import List from './ListComponent.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'List',
+ component: List,
+} as Meta;
+
+// Always an empty list, not super interesting
+const Template: StoryFn = (args) => ({
+ components: { List },
+ setup() {
+ return { args };
+ },
+ template: '',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index 1e7b334e15d1..e82613674972 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -3,6 +3,8 @@
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
export default {
@@ -14,7 +16,7 @@ export default {
component: LoginForm,
};
-export const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes }) => ({
components: { LoginForm },
props: Object.keys(argTypes),
template: ``,
@@ -27,14 +29,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
index 223a8de39411..19c529bd529a 100644
--- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
@@ -3,6 +3,8 @@
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
export default {
@@ -29,14 +31,19 @@ FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
- await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
- delay: 100,
- });
- await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
- delay: 100,
- });
+ // 👇 Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
+
+ // 👇 Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
index 6ce5d75c93a0..c1e887057671 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
@@ -5,6 +5,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
import LoginForm from './LoginForm.vue';
@@ -17,7 +19,7 @@ export const Template = (args, { argTypes }) => ({