Merge branch 'develop' into 17191/onboarding-unit-tests

.circleci/config.yml

@@ -524,7 +524,7 @@ jobs:
           at: .
       - run:
           name: Install Playwright browsers
-          command: yarn dlx playwright install
+          command: yarn exec playwright install
       - run:
           name: Test Storybook
           command: yarn test-storybook:ci

.storybook/2.DOCUMENTATION.stories.mdx

@@ -18,7 +18,7 @@ Some general documentation best practices to follow:
 - Use the [controls](https://storybook.js.org/addons/@storybook/addon-controls/) over [knobs](https://storybook.js.org/addons/@storybook/addon-knobs)(deprecated)
 - Use the [action argType annotation](https://storybook.js.org/docs/react/essentials/actions#action-argtype-annotation) over importing the actions plugin directly
 
-See the [Button](https://metamask.github.io/metamask-storybook/index.html?path=/story/ui-components-ui-button-button-stories-js--default-story)(`ui/components/ui/button/button.stories.js`) component for reference
+See the [Button](https://metamask.github.io/metamask-storybook/index.html?path=/story/components-ui-button--default-story)(`ui/components/ui/button/button.stories.js`) component for reference
 
 ## Creating a Story
 
@@ -163,7 +163,7 @@ Buttons communicate actions that users can take.
 <!-- Embed the DefaultStory using the storybook url  -->
 
 <Canvas>
-  <Story id="ui-components-ui-button-button-stories-js--default-story" />
+  <Story id="components-ui-button--default-story" />
 </Canvas>
 
 ## Props
@@ -196,7 +196,7 @@ By changing the `type` prop you can use different styles of the button.
 <!-- Embed other stories to further illustrate component usage  -->
 
 <Canvas>
-  <Story id="ui-components-ui-button-button-stories-js--types" />
+  <Story id="components-ui-button--type" />
 </Canvas>
 ```