Merge pull request #24709 from storybookjs/replace-aside

docs/addons/addon-knowledge-base.md

@@ -78,9 +78,11 @@ Complementing the components, also included is a set of UI primitives. Use the c
 | Icon                           | [See implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/icon/icons.tsx) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels)       |
 | Typography                     | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography)   | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-typography--all)    |
 
-<div class="aside">
-The color palette implemented by <code>@storybook/components</code> is a high-level abstraction of the <a href="https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src"><code>@storybook/theming</code></a> package.
-</div>
+<Callout variant="info">
+
+The color palette implemented by `@storybook/components` is a high-level abstraction of the [`@storybook/theming`](https://github.com/storybookjs/storybook/tree/next/code/lib/theming/src) package.
+
+</Callout>
 
 ### Build system
 
@@ -94,9 +96,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
 }
 ```
 
-<div class="aside">
-Run either <code>yarn</code> or <code>npm install</code> to install the addon.
-</div>
+<Callout variant="info">
+
+Run either `yarn` or `npm install` to install the addon.
+
+</Callout>
 
 ### Hot module replacement
 

docs/addons/addon-migration-guide.md

@@ -4,11 +4,11 @@ title: Addon migration guide for Storybook 7.0
 
 Storybook 7 is our first major release in over two years. While Storybook’s addon API has not changed much in the past couple of years, addons require several changes for compatibility with Storybook 7. This guide will walk you through the upgrade process.
 
-<div class="aside">
+<Callout variant="info">
 
 As we gather feedback from the community, we’ll update this page. We also have a general [Storybook migration guide](../migration-guide.md) if you’re looking for that.
 
-</div>
+</Callout>
 
 ## Dependencies
 

docs/addons/addon-types.md

@@ -10,7 +10,7 @@ UI-based addons allow you to customize Storybook's UI with the following element
 
 ### Panels
 
-Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [@storybook/actions](../essentials/actions.md) and [@storybook/a11y](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.
+Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [`@storybook/actions`](../essentials/actions.md) and [`@storybook/a11y`](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.
 
 ![Storybook panel](./storybook-panel.png)
 
@@ -28,7 +28,7 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:
 
 ### Toolbars
 
-Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [@storybook/backgrounds](../essentials/backgrounds.md) and the [@storybook/addon-outline/](../essentials/measure-and-outline.md#outline-addon) use this pattern.
+Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [`@storybook/backgrounds`](../essentials/backgrounds.md) and the [`@storybook/addon-outline`](../essentials/measure-and-outline.md#outline-addon) use this pattern.
 
 ![Storybook toolbar addon](./storybook-toolbar.png)
 
@@ -44,11 +44,11 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info">
 
-The <code>icon</code> element used in the example loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 
-</div>
+</Callout>
 
 ### Tabs
 
@@ -68,9 +68,11 @@ Use this boilerplate code to add a new `Tab` to Storybook's UI:
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-Learn how to write your own addon that includes these UI elements <a href="./writing-addons">here</a>.
-</div>
+<Callout variant="info">
+
+Learn how to write your own addon that includes these UI elements [here](./writing-addons.md).
+
+</Callout>
 
 ## Preset addons
 

docs/addons/addons-api.md

@@ -39,9 +39,11 @@ The `add` method allows you to register the type of UI component associated with
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-ℹ️  The render function is called with `active` and `key`. The `active` value will be true when the panel is focused on the UI.
-</div>
+<Callout variant="info">
+
+The render function is called with `active` and `key`. The `active` value will be true when the panel is focused on the UI.
+
+</Callout>
 
 ### addons.register()
 
@@ -89,11 +91,11 @@ Use the `makeDecorator` API to create decorators in the style of the official ad
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info">
 
-ℹ️ If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
+ If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
 
-</div>
+</Callout>
 
 The `makeDecorator` API requires the following arguments:
 

docs/addons/install-addons.md

@@ -35,9 +35,11 @@ Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info">
+
 Addons may also require addon-specific configuration. Read their respective READMEs.
-</div>
+
+</Callout>
 
 Now when you run Storybook the accessibility testing addon will be enabled.
 
@@ -60,9 +62,11 @@ For example, to use SCSS styling, run the following command to install the addon
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
- 💡 Tip: Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. 
-</div>
+<Callout variant="info" icon="💡" title="Tip:">
+
+Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. 
+
+</Callout>
 
 Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
 
@@ -99,8 +103,10 @@ Consider the following example:
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info">
+
 Preset addons may also have addon-specific configurations. Read their respective READMEs.
-</div>
+
+</Callout>
 
 Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined.

docs/addons/integration-catalog.md

@@ -15,11 +15,11 @@ Add your addon to the catalog by publishing a npm package that follows these req
 - `/dist` directory containing transpiled ES5 code
 - `preset.js` file written as an ES5 module at the root level
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
 Get a refresher on how to [write a Storybook addon](./writing-addons.md).
 
-</div>
+</Callout>
 
 ### Addon metadata
 
@@ -54,9 +54,11 @@ Use the list below as a reference when filling in the values for both the `suppo
 - preact
 - react-native
 
-<div class="aside">
-💡 Make sure to copy each item <strong>exactly</strong> as listed so that we can properly index your addon in our catalog.
-</div>
+<Callout variant="info" icon="💡">
+
+Make sure to copy each item **exactly** as listed so that we can properly index your addon in our catalog.
+
+</Callout>
 
 ```json
 {

docs/addons/writing-addons.md

@@ -63,11 +63,11 @@ Clone the repository you just created and install its dependencies. When the ins
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info">
 
-ℹ️ The Addon Kit uses [Typescript](https://www.typescriptlang.org/) by default. If you want to use JavaScript instead, you can run the `eject-ts` command to convert the project to JavaScript.
+The Addon Kit uses [Typescript](https://www.typescriptlang.org/) by default. If you want to use JavaScript instead, you can run the `eject-ts` command to convert the project to JavaScript.
 
-</div>
+</Callout>
 
 ### Understanding the build system
 
@@ -283,11 +283,11 @@ The second metadata category is related to the [integration catalog](https://sto
 }
 ```
 
-<div class="aside">
+<Callout variant="info">
 
-ℹ️ The `storybook` configuration element includes additional properties that help customize the addon's searchability and indexing. For more information, see the [Integration catalog documentation](./integration-catalog.md).
+The `storybook` configuration element includes additional properties that help customize the addon's searchability and indexing. For more information, see the [Integration catalog documentation](./integration-catalog.md).
 
-</div>
+</Callout>
 
 One essential item to note is the `keywords` property as it maps to the catalog's tag system. Adding the `storybook-addons` ensures that the addon is discoverable in the catalog when searching for addons. The remaining keywords help with the searchability and categorization of the addon.
 

docs/api/arg-types.md

@@ -166,11 +166,11 @@ Specifies the type of control used to change the arg value with the [controls ad
 |                | `'date'`         | Provides a datepicker to choose a date.<br /> `{ control: 'date' }`                                                                                                                    |
 |                | `'text'`         | Provides a freeform text input.<br/> `{ control: 'text' }`                                                                                                                             |
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
-💡 The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.
+The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.
 
-</div>
+</Callout>
 
 #### `control.accept`
 
@@ -304,13 +304,13 @@ The `argTypes` object uses the name of the arg as the key. By default, that key
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="warning">
 
-💡 Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed.
+Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed.
 
 For this reason, the `name` property is best used when defining an `argType` that is only used for documentation purposes and not an actual property of the component. For example, when [providing argTypes for each property of an object](https://stackblitz.com/edit/github-uplqzp?file=src/stories/Button.stories.tsx).
 
-</div>
+</Callout>
 
 ### `options`
 

docs/api/cli-options.md

@@ -4,11 +4,11 @@ title: 'CLI options'
 
 The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.
 
-<div class="aside">
+<Callout variant="info">
 
 Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information.
 
-</div>
+</Callout>
 
 ## API commands
 
@@ -45,11 +45,11 @@ Options include:
 | `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
 
-<div class="aside" id="static-dir-deprecation">
+<Callout variant="warning" id="static-dir-deprecation">
 
-💡 Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
+Starting in 6.4 the `-s` flag is deprecated. Instead, use a configuration object in your `.storybook/main.js` file. See the [images and assets documentation](../configure/images-and-assets.md#serving-static-files-via-storybook) for more information.
 
-</div>
+</Callout>
 
 ### `build`
 
@@ -75,6 +75,8 @@ Options include:
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                            |
 
-<div class="aside">
-💡  If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run storybook build -- -o ./path/to/build</code>.
-</div>
+<Callout variant="info" icon="💡">
+
+If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, `npm run storybook build -- -o ./path/to/build`.
+
+</Callout>

docs/api/csf.md

@@ -6,11 +6,11 @@ title: 'Component Story Format (CSF)'
 
 Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/introduction.md). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
-💡 If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md).
+If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md).
 
-</div>
+</Callout>
 
 In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
 

docs/api/doc-block-argtypes.md

@@ -6,11 +6,11 @@ title: 'ArgTypes'
 
 The `ArgTypes` block can be used to show a static table of [arg types](./argtypes.md) for a given component, as a way to document its interface.
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
-💡 If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.md) block instead.
+If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.md) block instead.
 
-</div>
+</Callout>
 
 ![Screenshot of ArgTypes block](./doc-block-argtypes.png)
 

docs/api/doc-block-canvas.md

@@ -23,11 +23,11 @@ import * as ButtonStories from './Button.stories';
 ```
 <!-- prettier-ignore-end -->
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
-💡 In previous versions of Storybook it was possible to pass in arbitrary components as children to `Canvas`. That is deprecated and the `Canvas` block now only supports a single story.
+In previous versions of Storybook it was possible to pass in arbitrary components as children to `Canvas`. That is deprecated and the `Canvas` block now only supports a single story.
 
-</div>
+</Callout>
 
 ## Canvas
 
@@ -172,11 +172,11 @@ Type: `SourceProps['code'] | SourceProps['format'] | SourceProps['language'] | S
 
 Specifies props passed to the inner `Source` block. See [SourceProps](./doc-block-source.md#sourceprops).
 
-<div class="aside">
+<Callout variant="info" icon="💡">
 
-💡 The dark prop is ignored, as the `Source` block is always rendered in dark mode when shown as part of a `Canvas` block.
+The dark prop is ignored, as the `Source` block is always rendered in dark mode when shown as part of a `Canvas` block.
 
-</div>
+</Callout>
 
 ### `sourceState`