Skip to content

Commit

Permalink
Add source highlighting languages
Browse files Browse the repository at this point in the history
  • Loading branch information
@shilman
shilman committed Nov 25, 2020
1 parent 03b284a commit 6316d49
Showing 1 changed file with 18 additions and 25 deletions.
43 changes: 18 additions & 25 deletions docs/writing-docs/doc-blocks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ The API documentation of `ArgTypes` is detailed in a [separate section](../api/a
| **type.required** | The stories to be show, ordered by supplied name |
| **description** | A Markdown description for the property |
| **table.type.summary** | A short version of the type |
| **table.type.detail** | A long version of the type |
| **table.defaultValue.summary** | A short version of the default value |
| **table.defaultValue.detail** | A long version of the default value |
| **table.type.detail** | A long version of the type |
| **table.defaultValue.summary** | A short version of the default value |
| **table.defaultValue.detail** | A long version of the default value |
| **control** | See [addon-controls README ](https://github.com/storybookjs/storybook/tree/next/addons/controls) |

For instance:
Expand Down Expand Up @@ -130,20 +130,17 @@ Looking at the following component:

<!-- prettier-ignore-end -->


Similar properties could be grouped together to allow better structuring and organization.

We could use the following pattern to group them:

| Field | Category |
| :----------------------------- | :----------------------------------------------------------------------------------------------: |
| **backgroundColor** | Colors |
| **primary** | Colors |
| **label** | Text |
| **onClick** | Events |
| **size** | Sizes |


| Field | Category |
| :------------------ | :------: |
| **backgroundColor** | Colors |
| **primary** | Colors |
| **label** | Text |
| **onClick** | Events |
| **size** | Sizes |

Which will result in the following story implementation:

Expand All @@ -161,20 +158,17 @@ And the following change in the Storybook UI:

![button story with args grouped into categories](./button-args-grouped-categories.png)


The formula used above can be improved even further and include subcategories.

Turning the table above into:


| Field | Category | Subcategory |
| :----------------------------- | :----------------------------------------------------------------------------------------------: |:----------------------------------------------------------------------------------------------:
| **backgroundColor** | Colors | Button colors |
| **primary** | Colors | Button style |
| **label** | Text | Button contents |
| **onClick** | Events | Button Events |
| **size** | Sizes | |

| Field | Category | Subcategory |
| :------------------ | :------: | :-------------: |
| **backgroundColor** | Colors | Button colors |
| **primary** | Colors | Button style |
| **label** | Text | Button contents |
| **onClick** | Events | Button Events |
| **size** | Sizes | |

Leading to the following change in the story implementation and UI:

Expand All @@ -190,7 +184,6 @@ Leading to the following change in the story implementation and UI:

![button story with args grouped into categories](./button-args-grouped-subcategories.png)


#### MDX

To customize `argTypes` in MDX, you can set an `mdx` prop on the `Meta` or `Story` components:
Expand Down Expand Up @@ -285,7 +278,7 @@ The pattern described will be applied to all the stories for the component. If y

### MDX

You can also use the `Source` block in MDX. It accepts either a story ID or `code` snippet. Use the `language` for syntax highlighting.
You can also use the `Source` block in MDX. It accepts either a story ID or `code` snippet. Use the `language` for syntax highlighting. It supports the following languages: `javascript`, `jsx`, `json`, `yml`, ,`md`, `bash`, `css`, `html`, `tsx`, `typescript`, `graphql`.

<!-- prettier-ignore-start -->

Expand Down

0 comments on commit 6316d49

Please sign in to comment.