Update all videos

storybookjs · Jun 14, 2024 · d1c2a50 · d1c2a50
1 parent 2ab5d8c
commit d1c2a50
Show file tree

Hide file tree

Showing 18 changed files with 38 additions and 114 deletions.
diff --git a/docs/addons/writing-addons.mdx b/docs/addons/writing-addons.mdx
@@ -11,9 +11,7 @@ Storybook addons are a powerful way to extend Storybook's functionality and cust
 
 This reference guide is to help you develop a mental model for how Storybook addons work by building a simple addon based on the popular [Outline addon](https://storybook.js.org/addons/@storybook/addon-outline/). Throughout this guide, you'll learn how addons are structured, Storybook's APIs, how to test your addon locally, and how to publish it.
 
-<video autoPlay muted playsInline loop>
-  <source src="storybook-addon-finished-state.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/addons/storybook-addon-finished-state.mp4" />
 
 ## Addon anatomy
 
@@ -36,9 +34,7 @@ The addon built in this guide is a UI-based addon, specifically a [toolbar](./ad
 
 To create your first addon, you're going to use the [Addon Kit](https://github.com/storybookjs/addon-kit), a ready-to-use template featuring all the required building blocks, dependencies and configurations to help you get started building your addon. In the Addon Kit repository, click the **Use this template** button to create a new repository based on the Addon Kit's code.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-kit-clone-repo.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/addons/addon-kit-clone-repo.mp4" />
 
 Clone the repository you just created and install its dependencies. When the installation process finishes, you will be prompted with questions to configure your addon. Answer them, and when you're ready to start building your addon, run the following command to start Storybook in development mode and develop your addon in watch mode:
 

diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx
@@ -9,9 +9,7 @@ sidebar:
 
 The actions addon is used to display data received by event handler (callback) arguments in your stories.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-actions-demo-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-actions-demo-optimized.mp4" />
 
 ## Action args
 

diff --git a/docs/essentials/backgrounds.mdx b/docs/essentials/backgrounds.mdx
@@ -7,9 +7,7 @@ sidebar:
 
 The backgrounds toolbar addon allows you to set the background color in which the story renders in the UI:
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-backgrounds-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-backgrounds-optimized.mp4" />
 
 ## Configuration
 

diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
@@ -9,9 +9,7 @@ sidebar:
 
 Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-controls-demo-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-controls-demo-optimized.mp4" />
 
 Controls do not require any modification to your components. Stories for controls are:
 
@@ -248,25 +246,19 @@ The Controls addon allows you to create or edit stories, directly from the Contr
 
 Open the Controls panel for a story and adjust the value of a control. Then save those changes as a new story.
 
-<video autoPlay muted playsInline loop>
-  <source src="../get-started/new-story-from-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/new-story-from-controls-optimized.mp4" />
 
 <If renderer="react">
   If you're working on a component that does not yet have any stories, you can click the ➕ button in the sidebar to search for your component and have a basic story created for you.
 
-  <video autoPlay muted playsInline loop>
-    <source src="../get-started/new-component-story-from-plus-button-optimized.mp4" type="video/mp4" />
-  </video>
+  <Video src="../_assets/get-started/new-component-story-from-plus-button-optimized.mp4" />
 </If>
 
 ### Edit a story
 
 You can also update a control's value, then save the changes to the story. The story file's code will be updated for you.
 
-<video autoPlay muted playsInline loop>
-  <source src="../get-started/edit-story-from-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
 
 ## Configuration
 
@@ -383,9 +375,7 @@ Suppose you want to turn off Controls for a property called `foo` in a component
 
 Resulting in the following change in Storybook UI:
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-controls-disable-specific-prop-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-controls-disable-specific-prop-optimized.mp4" />
 
 The previous example also removed the prop documentation from the table. In some cases, this is fine. However, sometimes you might want to render the prop documentation without a control. The following example illustrates how:
 

diff --git a/docs/essentials/measure-and-outline.mdx b/docs/essentials/measure-and-outline.mdx
@@ -15,9 +15,7 @@ While working with composite components or page layouts, dealing with whitespace
 
 With Storybook's Measure addon, you can quickly visualize each component's measurements through a click of a button in Storybook's toolbar.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-measure-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-measure-optimized.mp4" />
 
 <Callout variant="info" icon="💡">
   Alternatively you can press the `m` key on your keyboard to toggle the addon.
@@ -29,9 +27,7 @@ When building your layouts, checking the visual alignment of all components can
 
 With Storybook's Outline addon, you can toggle the outlines associated with all your UI elements, allowing you to spot bugs and broken layouts instantly with a click of a button.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-outline-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-outline-optimized.mp4" />
 
 ## API
 

diff --git a/docs/essentials/viewport.mdx b/docs/essentials/viewport.mdx
@@ -9,9 +9,7 @@ sidebar:
 
 The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-viewports-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/essentials/addon-viewports-optimized.mp4" />
 
 ## Configuration
 

diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx
@@ -12,9 +12,7 @@ Last chapter, we learned that stories correspond with discrete component states.
 
 A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
 
-<video autoPlay muted playsInline loop>
-  <source src="example-browse-all-stories-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/example-browse-all-stories-optimized.mp4" />
 
 Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name.
 
@@ -33,9 +31,7 @@ Storybook ships with time-saving tools built-in. The toolbar contains tools that
 * 🎚️ Outline displays the component's bounding box so you can verify if your component is positioned correctly.
 * 📱 Viewport renders the component in a variety of dimensions and orientations. It’s ideal for checking the responsiveness of components.
 
-<video autoPlay muted playsInline loop>
-  <source src="toolbar-walkthrough-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/toolbar-walkthrough-optimized.mp4" />
 
 The [“Docs”](../writing-docs/index.md) page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application.
 
@@ -54,9 +50,7 @@ Addons are plugins that extend Storybook's core functionality. You can find them
 * **Interactions** provides a helpful user interface for debugging [interaction tests](../writing-tests/interaction-testing.md) with the `play` function.
 * **Visual Tests** lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.
 
-<video autoPlay muted playsInline loop>
-  <source src="addons-walkthrough-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/addons-walkthrough-optimized.mp4" />
 
 Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../addons/index.md).
 

diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx
@@ -35,9 +35,7 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
 <If renderer="react">
   If you're working on a component that does not yet have any stories, you can click the ➕ button in the sidebar to search for your component and have a basic story created for you.
 
-  <video autoPlay muted playsInline loop>
-    <source src="new-component-story-from-plus-button-optimized.mp4" type="video/mp4" />
-  </video>
+  <Video src="../_assets/get-started/new-component-story-from-plus-button-optimized.mp4" />
 
   You can also create a story file for your new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
@@ -46,41 +44,29 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
   If you're working on a component that does not yet have any stories, you can create a story file for your component with a new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
 
-<video autoPlay muted playsInline loop>
-  <source src="new-component-story-in-code-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/new-component-story-in-code-optimized.mp4" />
 
 If you're working on a component that already has other stories, you can use the [Controls addon](../essentials/controls.md) to adjust the value of a control and then save those changes as a new story.
 
-<video autoPlay muted playsInline loop>
-  <source src="new-story-from-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/new-story-from-controls-optimized.mp4" />
 
 Or, if you prefer, edit the story file's code to add a new named export for your story:
 
-<video autoPlay muted playsInline loop>
-  <source src="new-story-in-code-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/new-story-in-code-optimized.mp4" />
 
 ### Edit a story
 
 Using the [Controls addon](../essentials/controls.md), update a control's value for a story. You can then save the changes to the story and the story file's code will be updated for you.
 
-<video autoPlay muted playsInline loop>
-  <source src="edit-story-from-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
 
 Of course, you can always update the story's code directly too:
 
-<video autoPlay muted playsInline loop>
-  <source src="edit-story-in-code-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/edit-story-in-code-optimized.mp4" />
 
 Stories are also helpful for checking that UI continues to look correct as you make changes. The `Button` component has four stories that show it in different use cases. View those stories now to confirm that your change to `Primary` didn’t introduce unintentional bugs in the other stories.
 
-<video autoPlay muted playsInline loop>
-  <source src="example-button-browse-stories-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/example-button-browse-stories-optimized.mp4" />
 
 Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/index.md) for you.
 

diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
@@ -25,9 +25,7 @@ Every piece of UI is now a [component](https://www.componentdriven.org/). The su
 
 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 autoPlay muted playsInline loop>
-  <source src="./whats-a-story.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/whats-a-story.mp4" />
 
 #### Capture UI variations as “stories”
 
@@ -45,9 +43,7 @@ You write stories for granular UI component variation and then use those stories
 
 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.
 
-<video autoPlay muted playsInline loop>
-  <source src="./7.0-storybook-hero-video.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/7.0-storybook-hero-video.mp4" />
 
 <details>
   <summary>Where does Storybook fit into my project?</summary>

diff --git a/docs/sharing/design-integrations.mdx b/docs/sharing/design-integrations.mdx
@@ -18,9 +18,7 @@ Storybook integrates with design tools to speed up your development workflow. Th
 
 [Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook), a publishing tool created by the Storybook team.
 
-<video autoPlay muted playsInline loop>
-  <source src="figma-plugin-open-story.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/sharing/figma-plugin-open-story.mp4" />
 
 #### Install plugin
 
@@ -126,9 +124,7 @@ Zeroheight integrates with [Storybook](https://zeroheight.com/3xlwst8/p/507ba7-s
 
 UXPin allows you to [use interactive stories](https://www.uxpin.com/docs/merge/storybook-integration/) to design user flows.
 
-<video autoPlay muted playsInline loop>
-  <source src="storybook-uxpin.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/sharing/storybook-uxpin.mp4" />
 
 ## InVision Design System Manager
 

diff --git a/docs/sharing/embed.mdx b/docs/sharing/embed.mdx
@@ -94,9 +94,7 @@ Every platform has different levels of embed support. Check the documentation of
 
   While editing an article, Medium renders all embeds non-interactive. Once your article is published, it will become interactive. [Preview a demo on Medium](https://medium.com/@ghengeveld/embedding-storybook-on-medium-ce8a280c03ad).
 
-  <video autoPlay muted playsInline loop>
-    <source src="embed-medium-optimized.mp4" type="video/mp4" />
-  </video>
+  <Video src="../_assets/sharing/embed-medium-optimized.mp4" />
 </details>
 
 <details>

diff --git a/docs/sharing/publish-storybook.mdx b/docs/sharing/publish-storybook.mdx
@@ -9,9 +9,7 @@ sidebar:
 
 Teams publish Storybook online to review and collaborate on works in progress. That allows developers, designers, PMs, and other stakeholders to check if the UI looks right without touching code or requiring a local dev environment.
 
-<video autoPlay muted playsInline loop>
-  <source src="storybook-workflow-publish.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/sharing/storybook-workflow-publish.mp4" />
 
 ## Build Storybook as a static web application
 

diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
@@ -114,21 +114,15 @@ When Button’s signature changes, you only need to change Button’s stories to
 
 That’s not all! Each of the args from the story function are live editable using Storybook’s [Controls](../essentials/controls.md) panel. It means your team can dynamically change components in Storybook to stress test and find edge cases.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-controls-demo-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-stories/addon-controls-demo-optimized.mp4" />
 
 You can also use the Controls panel to edit or save a new story after adjusting its control values.
 
-<video autoPlay muted playsInline loop>
-  <source src="../get-started/edit-story-from-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
 
 Addons can enhance args. For instance, [Actions](../essentials/actions.md) auto-detects which args are callbacks and appends a logging function to them. That way, interactions (like clicks) get logged in the actions panel.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-actions-demo-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-stories/addon-actions-demo-optimized.mp4" />
 
 ### Using the play function
 

diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
@@ -11,9 +11,7 @@ Accessibility is the practice of making websites inclusive to all. That means su
 
 Accessibility tests audit the rendered DOM against a set of heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. They act as the first line of QA to catch blatant accessibility violations.
 
-<video autoPlay muted playsInline loop>
-  <source src="component-accessibility-testing.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/component-accessibility-testing.mp4" />
 
 ## Accessibility checks with a11y addon
 

diff --git a/docs/writing-tests/index.mdx b/docs/writing-tests/index.mdx
@@ -10,9 +10,7 @@ Storybook provides a clean-room environment for testing components in isolation.
 
 That means stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, testing those stories is a low-effort way to prevent UI bugs over time.
 
-<video autoPlay muted playsInline loop>
-  <source src="stories-are-tests-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/stories-are-tests-optimized.mp4" />
 
 The simplest testing method is manual “spot checking”. You run Storybook locally, then eyeball every story to verify its appearance and behavior. [Publish](../sharing/publish-storybook.md) your Storybook online to share reproductions and get teammates involved.
 

diff --git a/docs/writing-tests/interaction-testing.mdx b/docs/writing-tests/interaction-testing.mdx
@@ -11,9 +11,7 @@ In a nutshell, you start by supplying the appropriate props for the initial stat
 
 In Storybook, this familiar workflow happens in your browser. That makes it easier to debug failures because you're running tests in the same environment as you develop components: the browser.
 
-<video autoPlay muted playsInline loop>
-  <source src="component-interaction-testing.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/component-interaction-testing.mp4" />
 
 ## How does component testing in Storybook work?
 
@@ -56,9 +54,7 @@ The test itself is defined inside a `play` function connected to a story. Here's
 
 Once the story loads in the UI, it simulates the user's behavior and verifies the underlying logic.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-interaction-example-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/addon-interaction-example-optimized.mp4" />
 
 ### Run code before each test
 
@@ -136,9 +132,7 @@ You can then import the mocked module (which has all of the helpful methods of a
 
 If you check your interactions panel, you'll see the step-by-step flow. It also offers a handy set of UI controls to pause, resume, rewind, and step through each interaction.
 
-<video autoPlay muted playsInline loop>
-  <source src="addon-interactions-playback-controls-optimized.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/addon-interactions-playback-controls-optimized.mp4" />
 
 ### Permalinks for reproductions
 

diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
@@ -11,9 +11,7 @@ Test coverage is the practice of measuring whether existing tests fully cover yo
 
 Coverage tests examine the instrumented code against a set of industry-accepted best practices. They act as the last line of QA to improve the quality of your test suite.
 
-<video autoPlay muted playsInline loop>
-  <source src="component-test-coverage-whitebg.mp4" type="video/mp4" />
-</video>
+<Video src="../_assets/writing-tests/component-test-coverage-whitebg.mp4" />
 
 ## Code instrumentation with the coverage addon