Merge pull request #29759 from storybookjs/shilman/fix-docs-no-skip-h…

…eadings Documentation: Fix skipped heading ranks
storybookjs · Dec 2, 2024 · 0e2d73f · 0e2d73f
2 parents 0fe1043 + 90442be
commit 0e2d73f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons.
 
-### Disable the addon panel
+## Disable the addon panel
 
 It’s possible to disable the addon panel for a particular story.
 
@@ -27,14 +27,14 @@ Then when adding a story, you can pass a disabled parameter.
 
 {/* prettier-ignore-end */}
 
-### Style your addon
+## Style your addon
 
 Storybook uses [Emotion](https://emotion.sh/docs/introduction) for styling. Alongside with a theme that you can customize!
 
 We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience.
 If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's `withTheme` HOC. [Read more about theming](../configure/user-interface/theming.mdx).
 
-### Storybook components
+## Storybook components
 
 Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get:
 
@@ -75,7 +75,7 @@ Complementing the components, also included is a set of UI primitives. Use the c
 
 </Callout>
 
-### Build system
+## Build system
 
 When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json:
 
@@ -91,11 +91,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
   Run either `yarn` or `npm install` to install the addon.
 </Callout>
 
-### Hot module replacement
+## Hot module replacement
 
 While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made.
 
-### Standalone Storybook addons
+## Standalone Storybook addons
 
 If you're developing a standalone addon, add a new script to `package.json` with the following:
 
@@ -107,11 +107,11 @@ If you're developing a standalone addon, add a new script to `package.json` with
 }
 ```
 
-#### Local Storybook addons
+### Local Storybook addons
 
 If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box.
 
-### Composing addons in presets
+## Composing addons in presets
 
 If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons:
 

diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx
@@ -40,7 +40,7 @@ You can also access these variables in your custom `<head>`/`<body>` using the s
   If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly, for example: `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`.
 </Callout>
 
-### Using .env files
+## Using .env files
 
 You can also use `.env` files to change Storybook's behavior in different modes. For example, if you add a `.env` file to your project with the following:
 
@@ -57,7 +57,7 @@ Then you can access this environment variable anywhere, even within your stories
 {/* prettier-ignore-end */}
 
 <IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
-  #### With Vite
+  ### With Vite
 
   Out of the box, Storybook provides a [Vite builder](../builders/vite.mdx), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example:
 
@@ -76,7 +76,7 @@ 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
+## Using Storybook configuration
 
 Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.mdx#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
 
@@ -94,7 +94,7 @@ When Storybook loads, it will enable you to access them in your stories similar
 
 {/* prettier-ignore-end */}
 
-### Using environment variables to choose the browser
+## 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.
 

diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these assets in your story files.
 
-### Import assets into stories
+## Import assets into stories
 
 You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files.
 
@@ -19,7 +19,7 @@ Afterward, you can use any asset in your stories:
 
 {/* prettier-ignore-end */}
 
-### Serving static files via Storybook Configuration
+## Serving static files via Storybook Configuration
 
 We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.
 
@@ -55,7 +55,7 @@ Or even use a configuration object to define the directories:
 
 {/* prettier-ignore-end */}
 
-### Reference assets from a CDN
+## Reference assets from a CDN
 
 Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.
 
@@ -65,7 +65,7 @@ Upload your files to an online CDN and reference them. In this example, we’re
 
 {/* prettier-ignore-end */}
 
-### Absolute versus relative paths
+## Absolute versus relative paths
 
 Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`.
 
@@ -75,7 +75,7 @@ If you load static content via importing, this is automatic, and you do not have
 
 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.
 
-### Referencing Fonts in Stories
+## Referencing Fonts in Stories
 
 After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](../story-rendering.mdx) file inside the configuration directory (i.e., `.storybook`) and add a `<link />` tag to reference your font.
 

diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
@@ -19,15 +19,15 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co
 
 ## The solution
 
-#### Build UIs in isolation
+### Build UIs in isolation
 
 Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events.
 
 Storybook is packaged as a small, development-only, [workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases.
 
 <Video src="../_assets/get-started/whats-a-story.mp4" />
 
-#### Capture UI variations as “stories”
+### Capture UI variations as “stories”
 
 When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
 
@@ -39,7 +39,7 @@ You write stories for granular UI component variation and then use those stories
 
 {/* prettier-ignore-end */}
 
-#### Storybook keeps track of every story
+### Storybook keeps track of every story
 
 Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state.
 

diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook seamlessly integrates with additional testing frameworks like [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/) to provide a comprehensive testing solution. By leveraging the Component Story Format (CSF), developers can write test cases that simulate user interactions and verify the behavior of individual components within the Storybook environment. This approach enables developers to thoroughly test their components' functionality, responsiveness, and visual appearance across different scenarios, resulting in more robust and reliable applications.
 
-### With Cypress
+## With Cypress
 
 [Cypress](https://www.cypress.io/) is an end-to-end testing framework. It enables you to test a complete instance of your application by simulating user behavior. With Component Story Format, your stories are reusable with Cypress. Each named export (in other words, a story) is renderable within your testing setup.
 
@@ -35,7 +35,7 @@ When Cypress runs your test, it loads Storybook's isolated iframe and checks if
 
 ![Cypress running successfully](../../_assets/writing-tests/cypress-success-run-tests-optimized.png)
 
-### With Playwright
+## With Playwright
 
 [Playwright](https://playwright.dev/) is a browser automation tool and end-to-end testing framework from Microsoft. It offers cross-browser automation, mobile testing with device emulation, and headless testing. With Component Story Format, your stories are reusable with Playwright. Each named export (in other words, a story) is renderable within your testing setup.
 
@@ -61,7 +61,7 @@ With Playwright, you can write a test to check if the inputs are filled and matc
 
 Once you execute Playwright, it opens a new browser window, loads Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal.
 
-#### Learn about other UI tests
+**Learn about other UI tests**
 
 * [Component tests](../component-testing.mdx) for user behavior simulation
 * [Visual tests](../visual-testing.mdx) for appearance