Merge pull request #17854 from hiro0218/fix/typo-docs

Fix typo docs files

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)    |
 

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:
 
 <!-- prettier-ignore-start -->
 

docs/snippets/angular/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import { Button } from './button.component';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```

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,
     });

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,
   });

docs/snippets/react/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import { Button } from './Button';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```

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(() => {

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,
   });

docs/snippets/react/my-component-play-function-with-delay.mdx.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => <MyComponent {...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,
     });

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,
   });

docs/snippets/svelte/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import Button  from './Button.svelte';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```

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,
   });

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,
     });

docs/snippets/vue/button-story-with-blue-args.mdx.mdx

@@ -20,5 +20,5 @@ import Button from './Button.vue';
   }}
 />
 
-<!-- Your story implmentation -->
+<!-- Your story implementation -->
 ```

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,
   });

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,
     });

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. <br/> `description: { component:'An example component description' }`                                                |
 | `markdown`  | Provides custom Markdown for the component description. <br/> `<Description markdown={dedent'# Custom Description'} />` <br/> Only applicable to MDX.             |
 | `story`     | Overrides the story description. <br/> `description: { story: 'An example story description' }`                                                                   |
-| `of`        | Sets the description based either on a component or story. <br/> `<Description of={Commponent} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
+| `of`        | Sets the description based either on a component or story. <br/> `<Description of={Component} />` <br/> `<Description of={'.'} />` <br/> Only applicable to MDX. |
 
 ## Working with MDX
 

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.
 
 <!-- prettier-ignore-start -->