diff --git a/docs/addons/addon-knowledge-base.md b/docs/addons/addon-knowledge-base.md index acb9c2a8fd54..2e174ca405fd 100644 --- a/docs/addons/addon-knowledge-base.md +++ b/docs/addons/addon-knowledge-base.md @@ -70,7 +70,7 @@ Complementing the components, also included is a set of UI primitives. Use the c | Component | Source | Story | | ------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| Color Pallette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) | +| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) | | Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) | | Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/lib/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) | diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md index ab9198c5f783..038223868c03 100644 --- a/docs/addons/writing-presets.md +++ b/docs/addons/writing-presets.md @@ -196,7 +196,7 @@ If it doesn't exist yet, create a file `.storybook/main.js`: It's also possible to programmatically modify the preview head/body HTML using a preset, similar to the way `preview-head.html`/`preview-body.html` can be used to [configure story rendering](../configure/story-rendering.md). The `previewHead` and `previewBody` functions accept a string, which is the existing head/body, and return a modified string. -For example, the following snippet adds a style tag to the preview head programatically: +For example, the following snippet adds a style tag to the preview head programmatically: 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/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx index 20b6d5cc2a49..cd28004a98a3 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, }); 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..8df09b4367a4 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, }); 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/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/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx index 434cd2304a6b..327268a81870 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, }); 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..6f75e352c88d 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, }); 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..6c825f89a95f 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, }); 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..41319b1a8b01 100644 --- a/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx +++ b/docs/snippets/svelte/button-story-with-blue-args.mdx.mdx @@ -20,5 +20,5 @@ import Button from './Button.svelte'; }} /> - + ``` \ No newline at end of file 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..b87c662fc8b7 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, }); 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..21ee812dd574 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, }); 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/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx index f055e9028968..2d1c49c9ac7f 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx +++ b/docs/snippets/vue/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, }); diff --git a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx index 3808d6a064df..162a4e518842 100644 --- a/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx +++ b/docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx @@ -19,7 +19,7 @@ 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, }); diff --git a/docs/writing-docs/doc-block-description.md b/docs/writing-docs/doc-block-description.md index 52726f124a1b..c2a25ea2931c 100644 --- a/docs/writing-docs/doc-block-description.md +++ b/docs/writing-docs/doc-block-description.md @@ -25,7 +25,7 @@ Storybook extracts the component's description and renders it at the top of the | `component` | Overrides the default component description.
`description: { component:'An example component description' }` | | `markdown` | Provides custom Markdown for the component description.
``
Only applicable to MDX. | | `story` | Overrides the story description.
`description: { story: 'An example story description' }` | -| `of` | Sets the description based either on a component or story.
``
``
Only applicable to MDX. | +| `of` | Sets the description based either on a component or story.
``
``
Only applicable to MDX. | ## Working with MDX diff --git a/docs/writing-docs/doc-block-icongallery.md b/docs/writing-docs/doc-block-icongallery.md index 82b948071d8a..bcbddfd13c1a 100644 --- a/docs/writing-docs/doc-block-icongallery.md +++ b/docs/writing-docs/doc-block-icongallery.md @@ -8,7 +8,7 @@ Storybook's `IconGallery` Doc Block enables you easily document all icons associ ## Working with MDX -Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-block-typeset.md), or [`ColorPallete`](./doc-block-colorpalette.md), the `IconGallery` is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options. +Similar to other documentation-oriented Doc Blocks such as [`TypeSet`](./doc-block-typeset.md), or [`ColorPalette`](./doc-block-colorpalette.md), the `IconGallery` is also typically used with MDX. It allows you to provide additional customization via options. Below is a condensed example and table featuring all the available options.