Added storybook check to CI (#17092)

* added storybook test runner

* added test runner in ci

* updated test for ci and fixed lint error

* updated lavamoat policy

* updated test command

* updated playwright

* changed command to storybook;ci

* updated command

* updated instance for test-storybook

* updated playwright

* added playwright step

* replaced concurrently with start-server-and-test

* updated the static storybook directory

* replaced first with last

* updated lock file

* replaced first with last

* updated test-storybook with maxworkers

* updated .depchechrc

* updated yml

* removed id from banner base

* replaced broken stories with .stories-to-do.js extesnsion

* updated token allowance story

* removed duplicacies from yarn

* fixed lavamoat

* removed filename comment

* updated links for docs

* fixed file extension for stories

* updated path for stories.json

* updated stories.json path

* yarn updated

* updated stories

* updated yarn

* updated wait on

.circleci/config.yml

@@ -111,6 +111,10 @@ workflows:
       - test-unit-global:
           requires:
             - prep-deps
+      - test-storybook:
+          requires:
+            - prep-deps
+            - prep-build-storybook
       - validate-source-maps:
           requires:
             - prep-build
@@ -154,6 +158,7 @@ workflows:
             - test-e2e-firefox
             - test-e2e-chrome-snaps
             - test-e2e-firefox-snaps
+            - test-storybook
       - benchmark:
           requires:
             - prep-build-test
@@ -511,6 +516,19 @@ jobs:
           name: Verify locales
           command: yarn verify-locales --quiet
 
+  test-storybook:
+    executor: node-browsers-medium-plus
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Install Playwright browsers
+          command: yarn dlx playwright install
+      - run:
+          name: Test Storybook
+          command: yarn test-storybook:ci
+
   test-lint-shellcheck:
     executor: shellcheck
     steps:

.depcheckrc.yml

@@ -34,6 +34,8 @@ ignores:
   - 'lavamoat-viz'
   - 'prettier-plugin-sort-json' # automatically imported by prettier
   - 'source-map-explorer'
+  - 'playwright'
+  - 'wait-on'
   # development tool
   - 'improved-yarn-audit'
   - 'nyc'

.storybook/2.DOCUMENTATION.stories.mdx

@@ -32,7 +32,7 @@ import MyComponent from '.';
 
 export default {
   title: 'Components/UI/MyComponent', // title should follow the folder structure location of the component. Don't use spaces.
-  id: __filename,
+
 };
 
 export const DefaultStory = () => <MyComponent />;
@@ -59,7 +59,6 @@ export default {
   // The `title` effects the components tile and location in storybook
   // It should follow the folder structure location of the component. Don't use spaces.
   title: 'Components/UI/Button',
-  id: __filename, // The file name id is used to track what storybook files have changed in CI
   component: Button, // The component you are documenting
   parameters: {
     docs: {

.storybook/main.js

@@ -9,6 +9,7 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  features: { buildStoriesJson: true },
   stories: [
     '../ui/**/*.stories.js',
     '../ui/**/*.stories.mdx',

development/highlights/storybook.js

@@ -1,11 +1,16 @@
 const path = require('path');
 const { promisify } = require('util');
 const exec = promisify(require('child_process').exec);
+const fs = require('fs');
 const dependencyTree = require('dependency-tree');
 
+const stories = fs.readFileSync(
+  path.join(__dirname, '..', '..', 'storybook-build', 'stories.json'),
+  'utf8',
+);
+
 const cwd = process.cwd();
 const resolutionCache = {};
-
 // 1. load stories
 // 2. load list per story
 // 3. filter against files
@@ -65,27 +70,22 @@ async function getLocalDependencyList(filename) {
 }
 
 function urlForStoryFile(filename, artifactBase) {
-  const storyId = sanitize(filename);
+  const storyId = getStoryId(filename);
   return `${artifactBase}/storybook/index.html?path=/story/${storyId}`;
 }
 
 /**
- * Remove punctuation and illegal characters from a story ID.
+ * @param {fileName} string - The fileName to get the story id.
- * See:
+ * @returns The id of the story.
- * https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
- * https://github.com/ComponentDriven/csf/blame/7ac941eee85816a4c567ca85460731acb5360f50/src/index.ts
- *
- * @param {string} string - The string to sanitize.
- * @returns The sanitized string.
  */
-function sanitize(string) {
+
-  return (
+function getStoryId(fileName) {
-    string
+  const storiesArray = Object.values(stories.stories);
-      .toLowerCase()
+  const foundStory = storiesArray.find((story) => {
-      // eslint-disable-next-line no-useless-escape
+    return story.importPath.includes(fileName);
-      .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/giu, '-')
+  });
-      .replace(/-+/gu, '-')
+  if (!foundStory) {
-      .replace(/^-+/u, '')
+    throw new Error(`story for ${fileName} not found`);
-      .replace(/-+$/u, '')
+  }
-  );
+  return foundStory.id;
 }

lavamoat/build-system/policy.json

@@ -92,6 +92,7 @@
         "@babel/core>@babel/helper-compilation-targets>semver": true,
         "@babel/preset-env>@babel/compat-data": true,
         "@babel/preset-env>@babel/helper-validator-option": true,
+        "mockttp>@httptoolkit/proxy-agent>lru-cache": true,
         "webpack>browserslist": true
       }
     },
@@ -357,6 +358,7 @@
       "packages": {
         "@babel/core": true,
         "@babel/core>@babel/helper-compilation-targets": true,
+        "@babel/preset-env>@babel/compat-data": true,
         "@babel/preset-env>@babel/helper-plugin-utils": true,
         "@babel/preset-env>@babel/plugin-syntax-object-rest-spread": true,
         "@babel/preset-env>@babel/plugin-transform-parameters": true
@@ -530,6 +532,7 @@
     "@babel/preset-env>@babel/plugin-transform-classes": {
       "packages": {
         "@babel/core": true,
+        "@babel/core>@babel/helper-compilation-targets": true,
         "@babel/preset-env>@babel/helper-plugin-utils": true,
         "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-annotate-as-pure": true,
         "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-optimise-call-expression": true,
@@ -552,6 +555,7 @@
     },
     "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-replace-supers": {
       "packages": {
+        "@babel/core>@babel/template": true,
         "@babel/core>@babel/types": true,
         "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-optimise-call-expression": true,
         "@babel/preset-env>@babel/plugin-transform-classes>@babel/helper-replace-supers>@babel/helper-member-expression-to-functions": true,
@@ -674,8 +678,7 @@
       "packages": {
         "@babel/core": true,
         "@babel/core>@babel/helper-module-transforms": true,
-        "@babel/preset-env>@babel/helper-plugin-utils": true,
+        "@babel/preset-env>@babel/helper-plugin-utils": true
-        "@babel/preset-env>@babel/plugin-transform-modules-amd>babel-plugin-dynamic-import-node": true
       }
     },
     "@babel/preset-env>@babel/plugin-transform-modules-commonjs": {
@@ -683,8 +686,7 @@
         "@babel/core": true,
         "@babel/core>@babel/helper-module-transforms": true,
         "@babel/core>@babel/helper-module-transforms>@babel/helper-simple-access": true,
-        "@babel/preset-env>@babel/helper-plugin-utils": true,
+        "@babel/preset-env>@babel/helper-plugin-utils": true
-        "@babel/preset-env>@babel/plugin-transform-modules-amd>babel-plugin-dynamic-import-node": true
       }
     },
     "@babel/preset-env>@babel/plugin-transform-modules-systemjs": {
@@ -695,7 +697,6 @@
         "@babel/core": true,
         "@babel/core>@babel/helper-module-transforms": true,
         "@babel/preset-env>@babel/helper-plugin-utils": true,
-        "@babel/preset-env>@babel/plugin-transform-modules-amd>babel-plugin-dynamic-import-node": true,
         "depcheck>@babel/traverse>@babel/helper-hoist-variables": true,
         "lavamoat>@babel/highlight>@babel/helper-validator-identifier": true
       }
@@ -862,17 +863,6 @@
         "@babel/preset-env>babel-plugin-polyfill-corejs3>@babel/helper-define-polyfill-provider": true
       }
     },
-    "@babel/preset-env>core-js-compat": {
-      "packages": {
-        "@babel/preset-env>core-js-compat>semver": true
-      }
-    },
-    "@babel/preset-env>core-js-compat>semver": {
-      "globals": {
-        "console.error": true,
-        "process": true
-      }
-    },
     "@babel/preset-env>semver": {
       "globals": {
         "console": true,
@@ -1122,6 +1112,13 @@
         "@metamask/jazzicon>color>color-convert>color-name": true
       }
     },
+    "@sentry/cli>mkdirp": {
+      "builtin": {
+        "fs": true,
+        "path.dirname": true,
+        "path.resolve": true
+      }
+    },
     "@storybook/api>telejson>is-symbol": {
       "packages": {
         "string.prototype.matchall>has-symbols": true
@@ -2571,7 +2568,7 @@
       "packages": {
         "eslint-plugin-import>tsconfig-paths>json5": true,
         "eslint-plugin-import>tsconfig-paths>strip-bom": true,
-        "react-devtools>minimist": true
+        "wait-on>minimist": true
       }
     },
     "eslint-plugin-import>tsconfig-paths>json5": {
@@ -4350,17 +4347,12 @@
         "util.inspect": true
       },
       "packages": {
-        "gulp-watch>chokidar>braces>fill-range>extend-shallow": true,
+        "gulp-watch>chokidar>braces>extend-shallow": true,
         "gulp-watch>chokidar>braces>fill-range>is-number": true,
         "gulp-watch>chokidar>braces>fill-range>to-regex-range": true,
         "stylelint>@stylelint/postcss-markdown>remark>remark-parse>repeat-string": true
       }
     },
-    "gulp-watch>chokidar>braces>fill-range>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
     "gulp-watch>chokidar>braces>fill-range>is-number": {
       "packages": {
         "gulp-watch>chokidar>braces>fill-range>is-number>kind-of": true
@@ -4387,10 +4379,10 @@
         "__filename": true
       },
       "packages": {
+        "gulp-watch>chokidar>braces>extend-shallow": true,
         "gulp-watch>chokidar>braces>snapdragon>base": true,
         "gulp-watch>chokidar>braces>snapdragon>debug": true,
         "gulp-watch>chokidar>braces>snapdragon>define-property": true,
-        "gulp-watch>chokidar>braces>snapdragon>extend-shallow": true,
         "gulp-watch>chokidar>braces>snapdragon>map-cache": true,
         "gulp-watch>chokidar>braces>snapdragon>source-map": true,
         "gulp-watch>chokidar>braces>snapdragon>use": true,
@@ -4496,16 +4488,11 @@
     "gulp-watch>chokidar>braces>snapdragon>base>cache-base>set-value": {
       "packages": {
         "@babel/register>clone-deep>is-plain-object": true,
+        "gulp-watch>chokidar>braces>extend-shallow": true,
         "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true,
-        "gulp-watch>chokidar>braces>snapdragon>base>cache-base>set-value>extend-shallow": true,
         "gulp-watch>chokidar>braces>split-string": true
       }
     },
-    "gulp-watch>chokidar>braces>snapdragon>base>cache-base>set-value>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
     "gulp-watch>chokidar>braces>snapdragon>base>cache-base>to-object-path": {
       "packages": {
         "gulp-watch>chokidar>braces>snapdragon>base>cache-base>to-object-path>kind-of": true
@@ -4637,11 +4624,6 @@
         "browserify>insert-module-globals>is-buffer": true
       }
     },
-    "gulp-watch>chokidar>braces>snapdragon>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
     "gulp-watch>chokidar>braces>snapdragon>use": {
       "packages": {
         "@babel/register>clone-deep>kind-of": true
@@ -4649,14 +4631,25 @@
     },
     "gulp-watch>chokidar>braces>split-string": {
       "packages": {
-        "gulp-zip>plugin-error>extend-shallow": true
+        "gulp-watch>chokidar>braces>split-string>extend-shallow": true
+      }
+    },
+    "gulp-watch>chokidar>braces>split-string>extend-shallow": {
+      "packages": {
+        "gulp-watch>chokidar>braces>split-string>extend-shallow>is-extendable": true,
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true
+      }
+    },
+    "gulp-watch>chokidar>braces>split-string>extend-shallow>is-extendable": {
+      "packages": {
+        "@babel/register>clone-deep>is-plain-object": true
       }
     },
     "gulp-watch>chokidar>braces>to-regex": {
       "packages": {
         "gulp-watch>chokidar>braces>to-regex>define-property": true,
+        "gulp-watch>chokidar>braces>to-regex>extend-shallow": true,
         "gulp-watch>chokidar>braces>to-regex>safe-regex": true,
-        "gulp-zip>plugin-error>extend-shallow": true,
         "gulp>gulp-cli>matchdep>micromatch>regex-not": true
       }
     },
@@ -4666,6 +4659,17 @@
         "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
       }
     },
+    "gulp-watch>chokidar>braces>to-regex>extend-shallow": {
+      "packages": {
+        "gulp-watch>chokidar>braces>to-regex>extend-shallow>is-extendable": true,
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true
+      }
+    },
+    "gulp-watch>chokidar>braces>to-regex>extend-shallow>is-extendable": {
+      "packages": {
+        "@babel/register>clone-deep>is-plain-object": true
+      }
+    },
     "gulp-watch>chokidar>braces>to-regex>safe-regex": {
       "packages": {
         "enzyme>rst-selector-parser>nearley>randexp>ret": true
@@ -4846,10 +4850,10 @@
         "gulp-watch>chokidar>braces>snapdragon": true,
         "gulp-watch>chokidar>braces>to-regex": true,
         "gulp-watch>chokidar>readdirp>micromatch>define-property": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob": true,
+        "gulp-watch>chokidar>readdirp>micromatch>extend-shallow": true,
         "gulp-zip>plugin-error>arr-diff": true,
-        "gulp-zip>plugin-error>extend-shallow": true,
         "gulp>gulp-cli>liftoff>fined>object.pick": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob": true,
         "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
         "gulp>gulp-cli>matchdep>micromatch>nanomatch": true,
         "gulp>gulp-cli>matchdep>micromatch>regex-not": true
@@ -4861,97 +4865,15 @@
         "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
       }
     },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob": {
+    "gulp-watch>chokidar>readdirp>micromatch>extend-shallow": {
       "packages": {
-        "gulp-watch>chokidar>braces>array-unique": true,
+        "gulp-watch>chokidar>readdirp>micromatch>extend-shallow>is-extendable": true,
-        "gulp-watch>chokidar>braces>snapdragon": true,
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true
-        "gulp-watch>chokidar>braces>to-regex": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>define-property": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>extend-shallow": true,
-        "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
-        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
       }
     },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>define-property": {
+    "gulp-watch>chokidar>readdirp>micromatch>extend-shallow>is-extendable": {
       "packages": {
-        "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
+        "@babel/register>clone-deep>is-plain-object": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets": {
-      "globals": {
-        "__filename": true
-      },
-      "packages": {
-        "gulp-watch>chokidar>braces>snapdragon": true,
-        "gulp-watch>chokidar>braces>to-regex": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>debug": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>extend-shallow": true,
-        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>posix-character-classes": true,
-        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>debug": {
-      "builtin": {
-        "fs.SyncWriteStream": true,
-        "net.Socket": true,
-        "tty.WriteStream": true,
-        "tty.isatty": true,
-        "util": true
-      },
-      "globals": {
-        "chrome": true,
-        "console": true,
-        "document": true,
-        "localStorage": true,
-        "navigator": true,
-        "process": true
-      },
-      "packages": {
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>debug>ms": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property": {
-      "packages": {
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor": {
-      "packages": {
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor": true,
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>kind-of": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor": {
-      "packages": {
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor>kind-of": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor>kind-of": {
-      "packages": {
-        "browserify>insert-module-globals>is-buffer": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor": {
-      "packages": {
-        "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor>kind-of": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor>kind-of": {
-      "packages": {
-        "browserify>insert-module-globals>is-buffer": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>expand-brackets>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
-    "gulp-watch>chokidar>readdirp>micromatch>extglob>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
       }
     },
     "gulp-watch>chokidar>upath": {
@@ -5217,11 +5139,11 @@
         "gulp-watch>chokidar>braces>snapdragon": true,
         "gulp-watch>chokidar>braces>to-regex": true,
         "gulp-zip>plugin-error>arr-diff": true,
-        "gulp-zip>plugin-error>extend-shallow": true,
         "gulp>glob-watcher>anymatch>micromatch>define-property": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob": true,
+        "gulp>glob-watcher>anymatch>micromatch>extend-shallow": true,
         "gulp>glob-watcher>chokidar>braces": true,
         "gulp>gulp-cli>liftoff>fined>object.pick": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob": true,
         "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
         "gulp>gulp-cli>matchdep>micromatch>nanomatch": true,
         "gulp>gulp-cli>matchdep>micromatch>regex-not": true
@@ -5233,97 +5155,15 @@
         "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
       }
     },
-    "gulp>glob-watcher>anymatch>micromatch>extglob": {
+    "gulp>glob-watcher>anymatch>micromatch>extend-shallow": {
       "packages": {
-        "gulp-watch>chokidar>braces>array-unique": true,
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true,
-        "gulp-watch>chokidar>braces>snapdragon": true,
+        "gulp>glob-watcher>anymatch>micromatch>extend-shallow>is-extendable": true
-        "gulp-watch>chokidar>braces>to-regex": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>define-property": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>extend-shallow": true,
-        "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
-        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
       }
     },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>define-property": {
+    "gulp>glob-watcher>anymatch>micromatch>extend-shallow>is-extendable": {
       "packages": {
-        "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
+        "@babel/register>clone-deep>is-plain-object": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets": {
-      "globals": {
-        "__filename": true
-      },
-      "packages": {
-        "gulp-watch>chokidar>braces>snapdragon": true,
-        "gulp-watch>chokidar>braces>to-regex": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>debug": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>extend-shallow": true,
-        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>posix-character-classes": true,
-        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>debug": {
-      "builtin": {
-        "fs.SyncWriteStream": true,
-        "net.Socket": true,
-        "tty.WriteStream": true,
-        "tty.isatty": true,
-        "util": true
-      },
-      "globals": {
-        "chrome": true,
-        "console": true,
-        "document": true,
-        "localStorage": true,
-        "navigator": true,
-        "process": true
-      },
-      "packages": {
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>debug>ms": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property": {
-      "packages": {
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor": {
-      "packages": {
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor": true,
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>kind-of": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor": {
-      "packages": {
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor>kind-of": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-accessor-descriptor>kind-of": {
-      "packages": {
-        "browserify>insert-module-globals>is-buffer": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor": {
-      "packages": {
-        "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor>kind-of": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>define-property>is-descriptor>is-data-descriptor>kind-of": {
-      "packages": {
-        "browserify>insert-module-globals>is-buffer": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>expand-brackets>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
-    "gulp>glob-watcher>anymatch>micromatch>extglob>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
       }
     },
     "gulp>glob-watcher>anymatch>normalize-path": {
@@ -5391,38 +5231,28 @@
     "gulp>glob-watcher>chokidar>braces": {
       "packages": {
         "gulp-watch>chokidar>braces>array-unique": true,
+        "gulp-watch>chokidar>braces>extend-shallow": true,
         "gulp-watch>chokidar>braces>repeat-element": true,
         "gulp-watch>chokidar>braces>snapdragon": true,
         "gulp-watch>chokidar>braces>snapdragon-node": true,
         "gulp-watch>chokidar>braces>split-string": true,
         "gulp-watch>chokidar>braces>to-regex": true,
-        "gulp>glob-watcher>chokidar>braces>extend-shallow": true,
         "gulp>glob-watcher>chokidar>braces>fill-range": true,
         "gulp>gulp-cli>isobject": true,
         "gulp>undertaker>arr-flatten": true
       }
     },
-    "gulp>glob-watcher>chokidar>braces>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
     "gulp>glob-watcher>chokidar>braces>fill-range": {
       "builtin": {
         "util.inspect": true
       },
       "packages": {
-        "gulp>glob-watcher>chokidar>braces>fill-range>extend-shallow": true,
+        "gulp-watch>chokidar>braces>extend-shallow": true,
         "gulp>glob-watcher>chokidar>braces>fill-range>is-number": true,
         "gulp>glob-watcher>chokidar>braces>fill-range>to-regex-range": true,
         "stylelint>@stylelint/postcss-markdown>remark>remark-parse>repeat-string": true
       }
     },
-    "gulp>glob-watcher>chokidar>braces>fill-range>extend-shallow": {
-      "packages": {
-        "gulp-watch>chokidar>braces>extend-shallow>is-extendable": true
-      }
-    },
     "gulp>glob-watcher>chokidar>braces>fill-range>is-number": {
       "packages": {
         "gulp>glob-watcher>chokidar>braces>fill-range>is-number>kind-of": true
@@ -5528,6 +5358,57 @@
         "@babel/register>clone-deep>kind-of": true
       }
     },
+    "gulp>gulp-cli>matchdep>micromatch>extglob": {
+      "packages": {
+        "gulp-watch>chokidar>braces>array-unique": true,
+        "gulp-watch>chokidar>braces>extend-shallow": true,
+        "gulp-watch>chokidar>braces>snapdragon": true,
+        "gulp-watch>chokidar>braces>to-regex": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob>define-property": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets": true,
+        "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
+        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>extglob>define-property": {
+      "packages": {
+        "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets": {
+      "globals": {
+        "__filename": true
+      },
+      "packages": {
+        "gulp-watch>chokidar>braces>extend-shallow": true,
+        "gulp-watch>chokidar>braces>snapdragon": true,
+        "gulp-watch>chokidar>braces>snapdragon>define-property": true,
+        "gulp-watch>chokidar>braces>to-regex": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>debug": true,
+        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>posix-character-classes": true,
+        "gulp>gulp-cli>matchdep>micromatch>regex-not": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>debug": {
+      "builtin": {
+        "fs.SyncWriteStream": true,
+        "net.Socket": true,
+        "tty.WriteStream": true,
+        "tty.isatty": true,
+        "util": true
+      },
+      "globals": {
+        "chrome": true,
+        "console": true,
+        "document": true,
+        "localStorage": true,
+        "navigator": true,
+        "process": true
+      },
+      "packages": {
+        "gulp>gulp-cli>matchdep>micromatch>extglob>expand-brackets>debug>ms": true
+      }
+    },
     "gulp>gulp-cli>matchdep>micromatch>fragment-cache": {
       "packages": {
         "gulp-watch>chokidar>braces>snapdragon>map-cache": true
@@ -5545,10 +5426,10 @@
         "gulp-watch>chokidar>braces>snapdragon": true,
         "gulp-watch>chokidar>braces>to-regex": true,
         "gulp-zip>plugin-error>arr-diff": true,
-        "gulp-zip>plugin-error>extend-shallow": true,
         "gulp>gulp-cli>liftoff>fined>object.pick": true,
         "gulp>gulp-cli>matchdep>micromatch>fragment-cache": true,
         "gulp>gulp-cli>matchdep>micromatch>nanomatch>define-property": true,
+        "gulp>gulp-cli>matchdep>micromatch>nanomatch>extend-shallow": true,
         "gulp>gulp-cli>matchdep>micromatch>nanomatch>is-odd": true,
         "gulp>gulp-cli>matchdep>micromatch>regex-not": true,
         "nyc>spawn-wrap>is-windows": true
@@ -5560,6 +5441,17 @@
         "gulp>gulp-cli>matchdep>micromatch>define-property>is-descriptor": true
       }
     },
+    "gulp>gulp-cli>matchdep>micromatch>nanomatch>extend-shallow": {
+      "packages": {
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true,
+        "gulp>gulp-cli>matchdep>micromatch>nanomatch>extend-shallow>is-extendable": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>nanomatch>extend-shallow>is-extendable": {
+      "packages": {
+        "@babel/register>clone-deep>is-plain-object": true
+      }
+    },
     "gulp>gulp-cli>matchdep>micromatch>nanomatch>is-odd": {
       "packages": {
         "gulp>undertaker>bach>array-last>is-number": true
@@ -5568,7 +5460,18 @@
     "gulp>gulp-cli>matchdep>micromatch>regex-not": {
       "packages": {
         "gulp-watch>chokidar>braces>to-regex>safe-regex": true,
-        "gulp-zip>plugin-error>extend-shallow": true
+        "gulp>gulp-cli>matchdep>micromatch>regex-not>extend-shallow": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>regex-not>extend-shallow": {
+      "packages": {
+        "gulp-zip>plugin-error>extend-shallow>assign-symbols": true,
+        "gulp>gulp-cli>matchdep>micromatch>regex-not>extend-shallow>is-extendable": true
+      }
+    },
+    "gulp>gulp-cli>matchdep>micromatch>regex-not>extend-shallow>is-extendable": {
+      "packages": {
+        "@babel/register>clone-deep>is-plain-object": true
       }
     },
     "gulp>gulp-cli>replace-homedir>is-absolute": {
@@ -6380,13 +6283,6 @@
         "stylelint>balanced-match": true
       }
     },
-    "mocha>mkdirp": {
-      "builtin": {
-        "fs": true,
-        "path.dirname": true,
-        "path.resolve": true
-      }
-    },
     "mocha>supports-color": {
       "builtin": {
         "os.release": true
@@ -6434,6 +6330,11 @@
         "process.platform": true
       }
     },
+    "mockttp>@httptoolkit/proxy-agent>lru-cache": {
+      "packages": {
+        "mockttp>@httptoolkit/proxy-agent>lru-cache>yallist": true
+      }
+    },
     "nock>debug": {
       "builtin": {
         "tty.isatty": true,
@@ -7278,7 +7179,7 @@
         "path.dirname": true
       },
       "packages": {
-        "mocha>mkdirp": true
+        "@sentry/cli>mkdirp": true
       }
     },
     "stylelint>global-modules": {

package.json

@@ -83,7 +83,9 @@
     "ts-migration:enumerate": "ts-node development/ts-migration-dashboard/scripts/write-list-of-files-to-convert.ts",
     "ts-migration:dashboard:watch": "ts-node development/ts-migration-dashboard/scripts/build.ts --watch",
     "ts-migration:dashboard:build": "ts-node development/ts-migration-dashboard/scripts/build.ts",
-    "ts-migration:dashboard:deploy": "gh-pages --dist development/ts-migration-dashboard/build --remote ts-migration-dashboard"
+    "ts-migration:dashboard:deploy": "gh-pages --dist development/ts-migration-dashboard/build --remote ts-migration-dashboard",
+    "test-storybook": "test-storybook -c .storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn storybook:build && npx http-server storybook-build --port 6006 \" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers=2\""
   },
   "resolutions": {
     "analytics-node/axios": "^0.21.2",
@@ -302,6 +304,7 @@
     "nonce-tracker": "^1.0.0",
     "obj-multiplex": "^1.0.0",
     "pify": "^5.0.0",
+    "playwright": "^1.29.2",
     "promise-to-callback": "^1.0.0",
     "prop-types": "^15.6.1",
     "pubnub": "4.27.3",
@@ -336,6 +339,7 @@
     "unicode-confusables": "^0.1.1",
     "uuid": "^8.3.2",
     "valid-url": "^1.0.9",
+    "wait-on": "^7.0.1",
     "web3-stream-provider": "^4.0.0",
     "zxcvbn": "^4.4.2"
   },
@@ -375,6 +379,7 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/test-runner": "^0.9.2",
     "@storybook/theming": "^6.5.13",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^10.4.8",
@@ -573,7 +578,9 @@
       "@keystonehq/metamask-airgapped-keyring>@keystonehq/base-eth-keyring>hdkey>secp256k1": false,
       "@metamask/base-controller>simple-git-hooks": false,
       "@storybook/core>@storybook/core-server>webpack>watchpack>watchpack-chokidar2>chokidar>fsevents": false,
-      "resolve-url-loader>es6-iterator>es5-ext": false
+      "resolve-url-loader>es6-iterator>es5-ext": false,
+      "@storybook/test-runner>playwright": true,
+      "playwright": false
     }
   },
   "packageManager": "yarn@3.2.4"

ui/components/app/account-list-item/README.mdx

@@ -6,7 +6,7 @@ import AccountListItem from '.';
 Account List Item is referred for each account item on the Account List's component
 
 <Canvas>
-  <Story id="ui-components-app-account-list-item-account-list-item-stories-js--default-story" />
+  <Story id="components-app-accountlistitem--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/account-list-item/account-list-item.stories.js

@@ -4,7 +4,7 @@ import AccountListItem from './account-list-item';
 
 export default {
   title: 'Components/App/AccountListItem',
-  id: __filename,
+
   component: AccountListItem,
   parameters: {
     docs: {

ui/components/app/add-network/add-network.stories.js

@@ -10,7 +10,7 @@ const BSC_IMAGE_URL = './images/bsc-filled.svg';
 
 export default {
   title: 'Components/APP/AddNetwork',
-  id: __filename,
+
   argTypes: {
     onBackClick: {
       action: 'onBackClick',

ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js

@@ -4,7 +4,6 @@ import AdvancedGasControls from '.';
 
 export default {
   title: 'Components/App/AdvancedGasControls',
-  id: __filename,
 };
 
 export const DefaultStory = () => {

ui/components/app/app-header/app-header.stories.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import AppHeader from '.';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Components/App/AppHeader',
-  id: __filename,
+
   argTypes: {
     hideNetworkIndicator: {
       control: 'boolean',

ui/components/app/approve-content-card/approve-content-card.stories.js

@@ -3,7 +3,7 @@ import ApproveContentCard from './approve-content-card';
 
 export default {
   title: 'Components/App/ApproveContentCard',
-  id: __filename,
+
   argTypes: {
     showHeader: {
       control: 'boolean',

ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.stories.js

@@ -10,7 +10,7 @@ const store = configureStore(testData);
 export default {
   title: 'Components/App/AssetList/DetectedTokensLink',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
-  id: __filename,
+
   argTypes: {
     setShowDetectedTokens: { control: 'func' },
   },

ui/components/app/beta-header/beta-header.stories.js

@@ -12,7 +12,6 @@ const store = configureStore({
 export default {
   title: 'Components/App/BetaHeader',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
-  id: __filename,
 };
 
 export const DefaultStory = () => (

ui/components/app/collectible-default-image/collectible-default-image.stories.js

@@ -3,7 +3,7 @@ import CollectibleDefaultImage from '.';
 
 export default {
   title: 'Components/App/CollectibleDefaultImage',
-  id: __filename,
+
   argTypes: {
     name: {
       control: 'text',

ui/components/app/collectible-details/collectible-details.stories.js

@@ -12,7 +12,7 @@ const collectible = {
 
 export default {
   title: 'Components/App/CollectiblesDetail',
-  id: __filename,
+
   argTypes: {
     collectible: {
       control: 'object',

ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js

@@ -3,7 +3,7 @@ import ConfirmDetailRow from '.';
 
 export default {
   title: 'Components/App/ConfirmPageContainer/ConfirmDetailRow',
-  id: __filename,
+
   argTypes: {
     headerText: {
       control: 'text',

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js

@@ -3,7 +3,7 @@ import ConfirmPageContainerWarning from '.';
 
 export default {
   title: 'Components/UI/ConfirmPageContainerWarning', // title should follow the folder structure location of the component. Don't use spaces.
-  id: __filename,
+
   argTypes: {
     warning: {
       control: 'text',

ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.stories.js

@@ -3,7 +3,7 @@ import ConfirmPageContainerHeader from '.';
 
 export default {
   title: 'Components/App/ConfirmPageContainer/ConfirmPageContainerHeader',
-  id: __filename,
+
   argTypes: {
     accountAddress: {
       control: 'text',

ui/components/app/confirmation-warning-modal/confirm-warning-modal.stories.js

@@ -3,7 +3,6 @@ import ConfirmationWarningModal from '.';
 
 export default {
   title: 'Components/App/ConfirmationWarningModal',
-  id: __filename,
 };
 
 export const DefaultStory = (args) => <ConfirmationWarningModal {...args} />;

ui/components/app/connected-accounts-list/connected-accounts-list.stories.js

@@ -3,7 +3,7 @@ import ConnectedAccountsList from '.';
 
 export default {
   title: 'Components/App/ConnectedAccountsList',
-  id: __filename,
+
   argTypes: {
     connectedAccounts: {
       control: 'array',

ui/components/app/create-new-vault/create-new-vault.stories.js

@@ -3,7 +3,7 @@ import CreateNewVault from '.';
 
 export default {
   title: 'Components/App/CreateNewVault',
-  id: __filename,
+
   argTypes: {
     disabled: { control: 'boolean' },
     submitText: { control: 'text' },

ui/components/app/currency-input/currency-input.stories.js

@@ -3,7 +3,7 @@ import CurrencyInput from '.';
 
 export default {
   title: 'Components/App/CurrencyInput',
-  id: __filename,
+
   argTypes: {
     hexValue: {
       control: 'text',

ui/components/app/custom-spending-cap/custom-spending-cap.stories.js

@@ -3,7 +3,7 @@ import CustomSpendingCap from './custom-spending-cap';
 
 export default {
   title: 'Components/App/CustomSpendingCap',
-  id: __filename,
+
   argTypes: {
     tokenName: {
       control: { type: 'text' },

ui/components/app/detected-token/detected-token-address/detected-token-address.stories.js

@@ -4,7 +4,7 @@ import DetectedTokenAddress from './detected-token-address';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenAddress',
-  id: __filename,
+
   argTypes: {
     tokenAddress: { control: 'text' },
   },

ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js

@@ -6,7 +6,7 @@ import DetectedTokenAggregators from './detected-token-aggregators';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenAggregators',
-  id: __filename,
+
   argTypes: {
     aggregators: { control: 'array' },
   },

ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js

@@ -4,7 +4,7 @@ import DetectedTokenDetails from './detected-token-details';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenDetails',
-  id: __filename,
+
   argTypes: {
     token: { control: 'object' },
     handleTokenSelection: { control: 'func' },

ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.stories.js

@@ -4,7 +4,7 @@ import DetectedTokenIgnoredPopover from './detected-token-ignored-popover';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenIgnoredPopover',
-  id: __filename,
+
   argTypes: {
     onCancelIgnore: {
       control: 'func',

ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.stories.js

@@ -10,7 +10,7 @@ const store = configureStore(testData);
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenSelectionPopover',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
-  id: __filename,
+
   argTypes: {
     selectedTokens: { control: 'array' },
     handleTokenSelection: { control: 'func' },

ui/components/app/detected-token/detected-token-values/detected-token-values.stories.js

@@ -4,7 +4,7 @@ import DetectedTokenValues from './detected-token-values';
 
 export default {
   title: 'Components/App/DetectedToken/DetectedTokenValues',
-  id: __filename,
+
   argTypes: {
     token: { control: 'object' },
     handleTokenSelection: { control: 'func' },

ui/components/app/edit-gas-display/edit-gas-display.stories.js

@@ -3,7 +3,7 @@ import EditGasDisplay from '.';
 
 export default {
   title: 'Components/App/EditGasDisplay',
-  id: __filename,
+
   args: {
     transaction: {},
   },

ui/components/app/edit-gas-popover/edit-gas-popover.stories.js

@@ -15,7 +15,7 @@ const store = configureStore(testData);
 export default {
   title: 'Components/App/EditGasPopover',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
-  id: __filename,
+
   argTypes: {
     editGasDisplayProps: {
       control: 'object',

ui/components/app/flask/experimental-area/experimental-area.stories.js

@@ -4,7 +4,7 @@ import ExperimentalArea from '.';
 
 export default {
   title: 'Components/App/Flask/ExperimentalArea',
-  id: __filename,
+
   component: ExperimentalArea,
 };
 

ui/components/app/flask/snap-content-footer/snap-content-footer.stories.js

@@ -4,7 +4,7 @@ import SnapContentFooter from '.';
 
 export default {
   title: 'Components/App/Flask/SnapContentFooter',
-  id: __filename,
+
   component: SnapContentFooter,
   args: {
     snapName: 'Test Snap',

ui/components/app/flask/snap-delineator/snap-delineator.stories.js

@@ -3,7 +3,6 @@ import { SnapDelineator } from '.';
 
 export default {
   title: 'Components/App/SnapDelineator',
-  id: __filename,
 };
 
 export const DefaultStory = () => (

ui/components/app/flask/snap-settings-card/README.mdx

@@ -7,7 +7,7 @@ import SnapSettingsCard from '.';
 A card component that displays information and the status of a snap. The `SnapSettingsCard` component is made up of the `Card`, `IconBorder`, `IconWithFallback`, `ToggleButton`, `Chip`, `ColorIndicator` and `Button` components
 
 <Canvas>
-  <Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--default-story" />
+  <Story id="components-app-flask-snapsettingscard--default-story" />
 </Canvas>
 
 ## Props
@@ -23,7 +23,7 @@ The following describes the props and example usage for this component.
 There are 4 statuses the `SnapSettingsCard` can have: `'installing'`,`'running'`,`'stopped'` and `'crashed'`.
 
 <Canvas>
-  <Story id="ui-components-app-flask-snap-settings-card-snap-settings-card-stories-js--status" />
+  <Story id="components-app-flask-snapsettingscard--status" />
 </Canvas>
 
 ### isEnabled / onToggle

ui/components/app/flask/snap-settings-card/snap-settings-card.stories.js

@@ -6,7 +6,7 @@ import SnapSettingsCard from '.';
 
 export default {
   title: 'Components/App/Flask/SnapSettingsCard',
-  id: __filename,
+
   component: SnapSettingsCard,
   parameters: {
     docs: {

ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.stories.js

@@ -10,7 +10,7 @@ const store = configureStore(testData);
 
 export default {
   title: 'Components/App/SnapUIRenderer',
-  id: __filename,
+
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.stories.js

@@ -3,7 +3,7 @@ import SnapsAuthorshipPill from '.';
 
 export default {
   title: 'Components/App/Flask/SnapsAuthorshipPill',
-  id: __filename,
+
   component: SnapsAuthorshipPill,
   argTypes: {
     snapId: {

ui/components/app/hold-to-reveal-button/hold-to-reveal-button.stories.js

@@ -3,7 +3,7 @@ import HoldToRevealButton from './hold-to-reveal-button';
 
 export default {
   title: 'Components/App/HoldToRevealButton',
-  id: __filename,
+
   argTypes: {
     buttonText: { control: 'text' },
     onLongPressed: { action: 'Revealing the SRP' },

ui/components/app/home-notification/home-notification.stories.js

@@ -4,7 +4,7 @@ import HomeNotification from './home-notification.component';
 
 export default {
   title: 'Components/App/HomeNotification',
-  id: __filename,
+
   component: HomeNotification,
   argTypes: {
     acceptText: {

ui/components/app/info-box/info-box.stories.js

@@ -4,7 +4,7 @@ import InfoBox from '.';
 
 export default {
   title: 'Components/App/InfoBox',
-  id: __filename,
+
   component: InfoBox,
   argTypes: {
     title: 'string',

ui/components/app/menu-bar/account-options-menu.stories.js

@@ -3,7 +3,7 @@ import AccountOptionsMenu from '.';
 
 export default {
   title: 'Components/App/AccountOptionsMenu',
-  id: __filename,
+
   argTypes: {
     anchorElement: {
       control: 'func',

ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js

@@ -5,7 +5,6 @@ import MetaMaskTemplateRenderer from '.';
 
 export default {
   title: 'Components/App/MetamaskTemplateRenderer',
-  id: __filename,
 };
 
 const SECTIONS = {

ui/components/app/metamask-translation/README.mdx

@@ -20,7 +20,7 @@ the safeComponentList for what kind of components we allow these special
 trees to contain.
 
 <Canvas>
-  <Story id="ui-components-app-metamask-translation-metamask-translation-stories-js--default-story" />
+  <Story id="components-app-metamasktranslation--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/metamask-translation/metamask-translation.stories.js

@@ -13,7 +13,7 @@ const { keysWithoutSubstitution } = groupBy(Object.keys(en), (key) => {
 
 export default {
   title: 'Components/App/MetamaskTranslation',
-  id: __filename,
+
   component: MetaMaskTranslation,
   parameters: {
     docs: {

ui/components/app/modals/confirm-remove-account/confirm-remove-account.stories.js

@@ -3,7 +3,7 @@ import ConfirmRemoveAccount from '.';
 
 export default {
   title: 'Components/App/Modals/ConfirmRemoveAccount',
-  id: __filename,
+
   component: ConfirmRemoveAccount,
   argTypes: {
     identity: {

ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js

@@ -3,7 +3,7 @@ import ContractDetailsModal from './contract-details-modal';
 
 export default {
   title: 'Components/App/Modals/ContractDetailsModal',
-  id: __filename,
+
   argTypes: {
     onClose: {
       action: 'onClose',

ui/components/app/modals/export-private-key-modal/export-private-key-modal.stories.js

@@ -3,7 +3,6 @@ import ExportPrivateKeyModal from '.';
 
 export default {
   title: 'Components/App/Modals/ExportPrivateKeyModal',
-  id: __filename,
 };
 
 export const DefaultStory = () => <ExportPrivateKeyModal />;

ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation.stories.js

@@ -3,7 +3,6 @@ import HideTokenConfirmationModal from '.';
 
 export default {
   title: 'Components/App/Modals/HideTokenConfirmationModal',
-  id: __filename,
 };
 
 export const DefaultStory = () => <HideTokenConfirmationModal />;

ui/components/app/modals/new-account-modal/new-account-modal.stories.js

@@ -3,7 +3,6 @@ import NewAccountModal from './new-account-modal.component';
 
 export default {
   title: 'Components/App/Modals/NewAccountModal',
-  id: __filename,
 };
 
 export const DefaultStory = () => <NewAccountModal />;

ui/components/app/modals/transaction-confirmed/transaction-confirmed.stories.js

@@ -3,7 +3,6 @@ import TransactionConfirmed from '.';
 
 export default {
   title: 'Components/App/Modals/TransactionConfirmed',
-  id: __filename,
 };
 
 export const DefaultStory = () => <TransactionConfirmed />;

ui/components/app/network-account-balance-header/network-account-balance-header.stories.js

@@ -3,7 +3,7 @@ import NetworkAccountBalanceHeader from './network-account-balance-header';
 
 export default {
   title: 'Components/App/NetworkAccountBalanceHeader',
-  id: __filename,
+
   argTypes: {
     networkName: {
       control: { type: 'text' },

ui/components/app/network-display/network-display.stories.js

@@ -10,7 +10,7 @@ import NetworkDisplay from '.';
 
 export default {
   title: 'Components/App/NetworkDisplay',
-  id: __filename,
+
   argTypes: {
     indicatorSize: {
       control: 'select',

ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.stories.js

@@ -4,7 +4,7 @@ import PermissionsConnectList from '.';
 
 export default {
   title: 'Components/App/PermissionsConnectList',
-  id: __filename,
+
   component: PermissionsConnectList,
   argTypes: {
     permissions: {

ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.stories.js

@@ -4,7 +4,7 @@ import SetApproveForAllWarning from '.';
 
 export default {
   title: 'Components/App/SetApproveForAllWarning',
-  id: __filename,
+
   argTypes: {
     collectionName: {
       control: 'text',

ui/components/app/signature-request-original/README.mdx

@@ -7,7 +7,7 @@ import SignatureRequestOriginal from '.';
 dApp requesting a signature from the user. This component appears for eth_signTypedData signatures are not v3 or v4. For other signatures, please see SignatureRequest.
 
 <Canvas>
-  <Story id="ui-components-app-signature-request-signature-request-original-stories-js--default-story" />
+  <Story id="components-app-signaturerequestoriginal--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/signature-request-original/signature-request-original.stories.js

@@ -41,7 +41,7 @@ const MOCK_SIGN_DATA = JSON.stringify({
 
 export default {
   title: 'Components/App/SignatureRequestOriginal',
-  id: __filename,
+
   component: SignatureRequestOriginal,
   parameters: {
     docs: {

ui/components/app/signature-request-siwe/README.mdx

@@ -7,7 +7,7 @@ import SignatureRequestSIWE from '.';
 dApp requesting the user to Sign in with Ethereum.
 
 <Canvas>
-  <Story id="ui-components-app-signature-request-siwe-signature-request-siwe-stories-js--default-story" />
+  <Story id="components-app-signaturerequestsiwe--default-story" />
 </Canvas>
 
 ## Component API

ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.stories.js

@@ -11,7 +11,7 @@ const subjectMetadata = {
 
 export default {
   title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWEHeader',
-  id: __filename,
+
   argTypes: {
     fromAccount: {
       table: {

ui/components/app/signature-request-siwe/signature-request-siwe-icon/signature-request-siwe-icon.stories.js

@@ -3,7 +3,6 @@ import SignatureRequestSIWEIcon from '.';
 
 export default {
   title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWEIcon',
-  id: __filename,
 };
 
 export const DefaultStory = (args) => <SignatureRequestSIWEIcon {...args} />;

ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.stories.js

@@ -3,7 +3,7 @@ import SignatureRequestMessage from '.';
 
 export default {
   title: 'Components/App/SignatureRequestSIWE/SignatureRequestMessage',
-  id: __filename,
+
   argTypes: {
     data: {
       controls: 'object',

ui/components/app/signature-request-siwe/signature-request-siwe-tag/signature-request-siwe-tag.stories.js

@@ -3,7 +3,7 @@ import SignatureRequestSIWETag from '.';
 
 export default {
   title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWETag',
-  id: __filename,
+
   argTypes: {
     text: { control: 'text' },
   },

ui/components/app/signature-request-siwe/signature-request-siwe.stories.js

@@ -8,7 +8,7 @@ const otherIdentity = Object.values(identities)[0];
 
 export default {
   title: 'Components/App/SignatureRequestSIWE',
-  id: __filename,
+
   component: SignatureRequestSIWE,
   parameters: {
     docs: {

ui/components/app/signature-request/README.mdx

@@ -7,7 +7,7 @@ import SignatureRequest from '.';
 dApp requesting a signature from the user.
 
 <Canvas>
-  <Story id="ui-components-app-signature-request-signature-request-stories-js--default-story" />
+  <Story id="components-app-signaturerequest--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/signature-request/signature-request-data/signature-request-data.stories.js

@@ -3,7 +3,7 @@ import SignatureRequestData from './signature-request-data';
 
 export default {
   title: 'Components/App/SignatureRequest/SignatureRequestData',
-  id: __filename,
+
   component: SignatureRequestData,
   argTypes: {
     data: { control: 'object' },

ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js

@@ -3,7 +3,6 @@ import SignatureRequestHeader from '.';
 
 export default {
   title: 'Components/App/SignatureRequest/SignatureRequestHeader',
-  id: __filename,
 };
 
 export const DefaultStory = () => <SignatureRequestHeader />;

ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js

@@ -3,7 +3,7 @@ import SignatureRequestMessage from './signature-request-message';
 
 export default {
   title: 'Components/App/SignatureRequestMessage',
-  id: __filename,
+
   component: SignatureRequestMessage,
   argTypes: {
     data: { control: 'object' },

ui/components/app/signature-request/signature-request.stories.js

@@ -7,7 +7,7 @@ const [MOCK_PRIMARY_IDENTITY] = Object.values(testData.metamask.identities);
 
 export default {
   title: 'Components/App/SignatureRequest',
-  id: __filename,
+
   component: SignatureRequest,
   parameters: {
     docs: {

ui/components/app/srp-input/srp-input.stories.js

@@ -3,7 +3,7 @@ import SrpInput from '.';
 
 export default {
   title: 'Components/App/SrpInput',
-  id: __filename,
+
   component: SrpInput,
   argTypes: {
     onChange: { action: 'changed' },

ui/components/app/tab-bar/tab-bar.stories.js

@@ -3,7 +3,7 @@ import TabBar from '.';
 
 export default {
   title: 'Components/App/TabBar',
-  id: __filename,
+
   argTypes: {
     isActive: {
       action: 'isActive',

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.stories.js

@@ -4,7 +4,7 @@ import TransactionActivityLogIcon from '.';
 
 export default {
   title: 'Components/App/TransactionActivityLog/TransactionActivityLogIcon',
-  id: __filename,
+
   argTypes: {
     className: {
       control: 'text',

ui/components/app/transaction-detail-item/README.mdx

@@ -7,7 +7,7 @@ import TransactionDetailItem from '.';
 Transaction detail that includes estimated gas fees. Intended to be used as an array item in the array passed to the `rows` prop of `<TransactionDetail />`
 
 <Canvas>
-  <Story id="ui-components-app-transaction-detail-item-transaction-detail-item-stories-js--default-story" />
+  <Story id="components-app-transactiondetailitem--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/transaction-detail-item/transaction-detail-item.stories.js

@@ -8,7 +8,7 @@ import TransactionDetailItem from '.';
 
 export default {
   title: 'Components/App/TransactionDetailItem',
-  id: __filename,
+
   component: TransactionDetailItem,
   parameters: {
     docs: {

ui/components/app/transaction-detail/README.mdx

@@ -7,7 +7,7 @@ import TransactionDetail from '.';
 Show transaction detail including estimated gas fee and total fee.
 
 <Canvas>
-  <Story id="ui-components-app-transaction-detail-transaction-detail-stories-js--default-story" />
+  <Story id="components-app-transactiondetail--default-story" />
 </Canvas>
 
 ## Props

ui/components/app/transaction-detail/transaction-detail.stories.js

@@ -7,7 +7,7 @@ import TransactionDetail from '.';
 
 export default {
   title: 'Components/App/TransactionDetail',
-  id: __filename,
+
   component: TransactionDetail,
   parameters: {
     docs: {

ui/components/app/transaction-list-item/transaction-list-item.stories.js

@@ -41,7 +41,7 @@ const getMockTransactionGroup = (args) => {
  */
 export default {
   title: 'Components/App/TransactionListItem',
-  id: __filename,
+
   argTypes: {
     isEarliestNonce: { control: 'boolean' },
     'transactionGroup.hasCancelled': { control: 'boolean' },

ui/components/app/transaction-list/transaction-list.stories.js

@@ -4,7 +4,6 @@ import TransactionList from '.';
 
 export default {
   title: 'Components/App/TransactionList',
-  id: __filename,
 };
 
 const PageSet = ({ children }) => {

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.stories.js

@@ -5,7 +5,7 @@ import UserPreferencedCurrencyDisplay from '.';
 
 export default {
   title: 'Components/App/UserPreferencedCurrencyDisplay',
-  id: __filename,
+
   argTypes: {
     className: {
       control: 'text',

ui/components/component-library/avatar-account/README.mdx

@@ -8,16 +8,16 @@ import { AvatarBase } from '../';
 The `AvatarAccount` is a type of avatar reserved for representing accounts.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--default-story" />
+  <Story id="components-componentlibrary-avataraccount--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarAccount` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
+The `AvatarAccount` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={AvatarAccount} />
 
-`AvatarAccount` accepts all [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props)
+`AvatarAccount` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story))
 component props
 
 <ArgsTable of={AvatarBase} />
@@ -39,7 +39,7 @@ Possible sizes include:
 Defaults to `SIZES.MD`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--size" />
+  <Story id="components-componentlibrary-avataraccount--size" />
 </Canvas>
 
 ```jsx
@@ -58,7 +58,7 @@ import { AvatarAccount } from '../ui/component-library';
 Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--type" />
+  <Story id="components-componentlibrary-avataraccount--type" />
 </Canvas>
 
 ```jsx
@@ -74,7 +74,7 @@ import { AvatarAccount } from '../ui/component-library';
 Use the required `address` for generating images
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--address" />
+  <Story id="components-componentlibrary-avataraccount--address" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-account/avatar-account.stories.js

@@ -15,7 +15,7 @@ import README from './README.mdx';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarAccount',
-  id: __filename,
+
   component: AvatarAccount,
   parameters: {
     docs: {

ui/components/component-library/avatar-base/README.mdx

@@ -9,12 +9,12 @@ import { AvatarBase } from './avatar-base';
 The `AvatarBase` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--default-story" />
+  <Story id="components-componentlibrary-avatarbase--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+The `AvatarBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
 
 <ArgsTable of={AvatarBase} />
 
@@ -33,7 +33,7 @@ Possible sizes include:
 Defaults to `md`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--size" />
+  <Story id="components-componentlibrary-avatarbase--size" />
 </Canvas>
 
 ```jsx
@@ -51,7 +51,7 @@ import { AvatarBase } from '../../component-library';
 The `AvatarBase` component can contain images, icons or text
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--children" />
+  <Story id="components-componentlibrary-avatarbase--children" />
 </Canvas>
 
 ```jsx
@@ -73,7 +73,7 @@ import { AvatarBase } from '../../component-library';
 Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarBase`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--color-background-color-and-border-color" />
+  <Story id="components-componentlibrary-avatarbase--color-background-color-and-border-color" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-base/avatar-base.stories.js

@@ -33,7 +33,7 @@ const marginSizeKnobOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/AvatarBase',
-  id: __filename,
+
   component: AvatarBase,
   parameters: {
     docs: {

ui/components/component-library/avatar-favicon/README.mdx

@@ -9,16 +9,16 @@ import { AvatarFavicon } from './avatar-favicon';
 The `AvatarFavicon` is an image component that renders an icon that is provided in the form of a URL.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--default-story" />
+  <Story id="components-componentlibrary-avatarfavicon--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarFavicon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
+The `AvatarFavicon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={AvatarFavicon} />
 
-`AvatarFavicon` accepts all [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props)
+`AvatarFavicon` accepts all [AvatarBase](components-componentlibrary-avatarbase--default-story))
 component props
 
 <ArgsTable of={AvatarBase} />
@@ -40,7 +40,7 @@ Possible sizes include:
 Defaults to `SIZES.MD`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--size" />
+  <Story id="components-componentlibrary-avatarfavicon--size" />
 </Canvas>
 
 ```jsx
@@ -59,7 +59,7 @@ import { AvatarFavicon } from '../ui/component-library';
 Use the `src` prop to set the image to be rendered of the `AvatarFavicon`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--src" />
+  <Story id="components-componentlibrary-avatarfavicon--src" />
 </Canvas>
 
 ```jsx
@@ -71,5 +71,5 @@ import { AvatarFavicon } from '../ui/component-library';
 
 ### Fallback Icon Props
 
-If there is no `src` then in that case an [icon](/docs/ui-components-component-library-icon-icon-stories-js--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.
+If there is no `src` then in that case an [icon](/docs/components-componentlibrary-icon--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.
 

ui/components/component-library/avatar-favicon/avatar-favicon.stories.js

@@ -13,7 +13,7 @@ import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarFavicon',
-  id: __filename,
+
   component: AvatarFavicon,
   parameters: {
     docs: {

ui/components/component-library/avatar-icon/README.mdx

@@ -5,19 +5,19 @@ import { AvatarIcon } from './avatar-icon';
 
 # AvatarIcon
 
-The `AvatarIcon` is an avatar component that renders only an icon inside and is built off the [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props) component
+The `AvatarIcon` is an avatar component that renders only an icon inside and is built off the [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story)) component
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-icon-avatar-icon-stories-js--default-story" />
+  <Story id="components-componentlibrary-avataricon--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarIcon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
+The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={AvatarIcon} />
 
-`AvatarIcon` accepts all [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props)
+`AvatarIcon` accepts all [AvatarBase](/docs/components-componentlibrary-avatarbase--default-story))
 component props
 
 <ArgsTable of={AvatarBase} />
@@ -39,7 +39,7 @@ Possible sizes include:
 Defaults to `SIZES.MD`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-icon-avatar-icon-stories-js--size" />
+  <Story id="components-componentlibrary-avataricon--size" />
 </Canvas>
 
 ```jsx
@@ -57,10 +57,10 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
 
 Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon
 
-Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.
+Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-icon-avatar-icon-stories-js--icon-name" />
+  <Story id="components-componentlibrary-avataricon--icon-name" />
 </Canvas>
 
 ```jsx
@@ -81,7 +81,7 @@ Use the `color` and `backgroundColor` props with the `COLORS` object from `./ui/
 `backgroundColor` default: `COLORS.COLORS.PRIMARY_MUTED`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-icon-avatar-icon-stories-js--color-and-background-color" />
+  <Story id="components-componentlibrary-avataricon--color-and-background-color" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-icon/avatar-icon.stories.js

@@ -34,7 +34,7 @@ const marginSizeControlOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/AvatarIcon',
-  id: __filename,
+
   component: AvatarIcon,
   parameters: {
     docs: {

ui/components/component-library/avatar-network/README.mdx

@@ -7,12 +7,12 @@ import { AvatarNetwork } from './avatar-network';
 The `AvatarNetwork` is a component responsible for display of the image of a given network
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--default-story" />
+  <Story id="components-componentlibrary-avatarnetwork--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarNetwork` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
+The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={AvatarNetwork} />
 
@@ -31,7 +31,7 @@ Possible sizes include:
 Defaults to `md`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--size" />
+  <Story id="components-componentlibrary-avatarnetwork--size" />
 </Canvas>
 
 ```jsx
@@ -49,7 +49,7 @@ import { AvatarNetwork } from '../../component-library';
 Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--name" />
+  <Story id="components-componentlibrary-avatarnetwork--name" />
 </Canvas>
 
 ```jsx
@@ -62,7 +62,7 @@ import { AvatarNetwork } from '../../component-library';
 Use the `src` prop to set the image to be rendered of the `AvatarNetwork`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--src" />
+  <Story id="components-componentlibrary-avatarnetwork--src" />
 </Canvas>
 
 ```jsx
@@ -83,7 +83,7 @@ import { AvatarNetwork } from '../../component-library';
 Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--show-halo" />
+  <Story id="components-componentlibrary-avatarnetwork--show-halo" />
 </Canvas>
 
 ```jsx
@@ -96,7 +96,7 @@ import { AvatarNetwork } from '../../component-library';
 Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarNetwork`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--color-background-color-and-border-color" />
+  <Story id="components-componentlibrary-avatarnetwork--color-background-color-and-border-color" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-network/avatar-network.stories.js

@@ -17,7 +17,7 @@ import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarNetwork',
-  id: __filename,
+
   component: AvatarNetwork,
   parameters: {
     docs: {

ui/components/component-library/avatar-token/README.mdx

@@ -7,12 +7,12 @@ import { AvatarToken } from './avatar-token';
 The `AvatarToken` is a component responsible for display of the image of a given token
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--default-story" />
+  <Story id="components-componentlibrary-avatartoken--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarToken` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+The `AvatarToken` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={AvatarToken} />
 
@@ -31,7 +31,7 @@ Possible sizes include:
 Defaults to `md`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--size" />
+  <Story id="components-componentlibrary-avatartoken--size" />
 </Canvas>
 
 ```jsx
@@ -49,7 +49,7 @@ import { AvatarToken } from '../../component-library';
 Use the `name` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `src` prop.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--name" />
+  <Story id="components-componentlibrary-avatartoken--name" />
 </Canvas>
 
 ```jsx
@@ -62,7 +62,7 @@ import { AvatarToken } from '../../component-library';
 Use the `src` prop to set the image to be rendered of the `AvatarToken`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--src" />
+  <Story id="components-componentlibrary-avatartoken--src" />
 </Canvas>
 
 ```jsx
@@ -82,7 +82,7 @@ import { AvatarToken } from '../../component-library';
 Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--show-halo" />
+  <Story id="components-componentlibrary-avatartoken--show-halo" />
 </Canvas>
 
 ```jsx
@@ -97,7 +97,7 @@ import { AvatarToken } from '../../component-library';
 Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarToken`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--color-background-color-and-border-color" />
+  <Story id="components-componentlibrary-avatartoken--color-background-color-and-border-color" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-token/avatar-token.stories.js

@@ -17,7 +17,7 @@ import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarToken',
-  id: __filename,
+
   component: AvatarToken,
   parameters: {
     docs: {

ui/components/component-library/avatar-with-badge/README.mdx

@@ -7,12 +7,12 @@ import { AvatarWithBadge } from './avatar-with-badge';
 The `AvatarWithBadge` is a wrapper component that adds badge display options to avatars.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--default-story" />
+  <Story id="components-componentlibrary-avatarwithbadge--default-story" />
 </Canvas>
 
 ## Props
 
-The `AvatarWithBadge` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props.
+The `AvatarWithBadge` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
 
 <ArgsTable of={AvatarWithBadge} />
 
@@ -21,7 +21,7 @@ The `AvatarWithBadge` accepts all props below as well as all [Box](/docs/ui-comp
 Use the `badgePosition` prop to set the position of the badge, it can have two values `Top` and `Bottom`
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--badge-position" />
+  <Story id="components-componentlibrary-avatarwithbadge--badge-position" />
 </Canvas>
 
 ```jsx

ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js

@@ -14,7 +14,7 @@ import { AvatarWithBadge } from './avatar-with-badge';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarWithBadge',
-  id: __filename,
+
   component: AvatarWithBadge,
   parameters: {
     docs: {

ui/components/component-library/banner-base/README.mdx

@@ -8,12 +8,12 @@ import { BannerBase } from './banner-base';
 The `BannerBase` is the base component for banners
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--default-story" />
+  <Story id="components-componentlibrary-bannerbase--default-story" />
 </Canvas>
 
 ## Props
 
-The `BannerBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+The `BannerBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={BannerBase} />
 
@@ -22,7 +22,7 @@ The `BannerBase` accepts all props below as well as all [Box](/docs/ui-component
 Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--title" />
+  <Story id="components-componentlibrary-bannerbase--title" />
 </Canvas>
 
 ```jsx
@@ -38,7 +38,7 @@ import { BannerBase } from '../../component-library';
 The `children` is the description area of the `BannerBase` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--children" />
+  <Story id="components-componentlibrary-bannerbase--children" />
 </Canvas>
 
 ```jsx
@@ -55,10 +55,10 @@ import { BannerBase } from '../../component-library';
 
 ### Action Button Label, onClick, & Props
 
-Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/ui-components-component-library-button-link-button-link-stories-js--default-story) for the action
+Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--action-button" />
+  <Story id="components-componentlibrary-bannerbase--action-button" />
 </Canvas>
 
 ```jsx
@@ -86,7 +86,7 @@ Use the `onClose` prop to pass a function to the close button. The close button
 Additional props can be passed to the close button with `closeButtonProps`
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--on-close" />
+  <Story id="components-componentlibrary-bannerbase--on-close" />
 </Canvas>
 
 ```jsx
@@ -105,7 +105,7 @@ import { BannerBase } from '../../component-library';
 Use the `startAccessory` prop to add components such as icons or fox image to the start (default: left) of the `BannerBase` content
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
-  <Story id="ui-components-component-library-banner-base-banner-base-stories-js--start-accessory" />
+  <Story id="components-componentlibrary-bannerbase--start-accessory" />
 </Canvas>
 
 ```jsx

ui/components/component-library/banner-base/banner-base.stories.js

@@ -25,7 +25,6 @@ const marginSizeControlOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/BannerBase',
-  id: __filename,
   component: BannerBase,
   parameters: {
     docs: {

ui/components/component-library/button-base/README.mdx

@@ -8,12 +8,12 @@ import { ButtonBase } from './button-base';
 The `ButtonBase` is the base component for buttons.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--default-story" />
+  <Story id="components-componentlibrary-buttonbase--default-story" />
 </Canvas>
 
 ## Props
 
-The `ButtonBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+The `ButtonBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={ButtonBase} />
 
@@ -32,7 +32,7 @@ Possible sizes include:
 - `SIZES.LG` 48px
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--size" />
+  <Story id="components-componentlibrary-buttonbase--size" />
 </Canvas>
 
 ```jsx
@@ -50,7 +50,7 @@ import { ButtonBase } from '../../ui/components/component-library';
 Use boolean `block` prop to quickly enable a full width block button
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--block" />
+  <Story id="components-componentlibrary-buttonbase--block" />
 </Canvas>
 
 ```jsx
@@ -73,7 +73,7 @@ Button `as` options:
 - `a`
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--as" />
+  <Story id="components-componentlibrary-buttonbase--as" />
 </Canvas>
 
 ```jsx
@@ -91,7 +91,7 @@ import { ButtonBase } from '../../ui/components/component-library';
 When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--href" />
+  <Story id="components-componentlibrary-buttonbase--href" />
 </Canvas>
 
 ```jsx
@@ -105,7 +105,7 @@ import { ButtonBase } from '../../ui/components/component-library';
 Use the boolean `disabled` prop to disable button
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--disabled" />
+  <Story id="components-componentlibrary-buttonbase--disabled" />
 </Canvas>
 
 ```jsx
@@ -119,7 +119,7 @@ import { ButtonBase } from '../../ui/components/component-library';
 Use the boolean `loading` prop to set loading spinner
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--loading" />
+  <Story id="components-componentlibrary-buttonbase--loading" />
 </Canvas>
 
 ```jsx
@@ -133,7 +133,7 @@ import { ButtonBase } from '../../ui/components/component-library';
 Use the `iconName` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-base-button-base-stories-js--iconName" />
+  <Story id="components-componentlibrary-buttonbase--icon" />
 </Canvas>
 
 ```jsx

ui/components/component-library/button-base/button-base.stories.js

@@ -33,7 +33,7 @@ const marginSizeControlOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/ButtonBase',
-  id: __filename,
+
   component: ButtonBase,
   parameters: {
     docs: {

ui/components/component-library/button-icon/README.mdx

@@ -6,12 +6,12 @@ import { ButtonIcon } from './button-icon';
 The `ButtonIcon` is used for icons associated with a user action.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--default-story" />
+  <Story id="components-componentlibrary-buttonicon--default-story" />
 </Canvas>
 
 ## Props
 
-The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
 
 <ArgsTable of={ButtonIcon} />
 
@@ -19,10 +19,10 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-component
 
 Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
 
-Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.
+Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon-name" />
+  <Story id="components-componentlibrary-buttonicon--icon-name" />
 </Canvas>
 
 ```jsx
@@ -45,7 +45,7 @@ Possible sizes include:
 - `SIZES.LG` 32px
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--size" />
+  <Story id="components-componentlibrary-buttonicon--size" />
 </Canvas>
 
 ```jsx
@@ -61,7 +61,7 @@ import { ButtonIcon } from '../ui/component-library';
 Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibility
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--aria-label" />
+  <Story id="components-componentlibrary-buttonicon--aria-label" />
 </Canvas>
 
 ```jsx
@@ -82,7 +82,7 @@ Button `as` options:
 - `a`
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--as" />
+  <Story id="components-componentlibrary-buttonicon--as" />
 </Canvas>
 
 ```jsx
@@ -98,7 +98,7 @@ import { ButtonIcon } from '../ui/component-library';
 When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--href" />
+  <Story id="components-componentlibrary-buttonicon--href" />
 </Canvas>
 
 ```jsx
@@ -118,7 +118,7 @@ import { ButtonIcon } from '../ui/component-library';
 Use the `color` prop and the `COLORS` object to change the color of the `ButtonIcon`. Defaults to `COLORS.ICON_DEFAULT`.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--color" />
+  <Story id="components-componentlibrary-buttonicon--color" />
 </Canvas>
 
 ```jsx
@@ -136,7 +136,7 @@ import { ButtonIcon } from '../ui/component-library';
 Use the boolean `disabled` prop to disable button
 
 <Canvas>
-  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--disabled" />
+  <Story id="components-componentlibrary-buttonicon--disabled" />
 </Canvas>
 
 ```jsx

ui/components/component-library/button-icon/button-icon.stories.js

@@ -32,7 +32,7 @@ const marginSizeControlOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/ButtonIcon',
-  id: __filename,
+
   component: ButtonIcon,
   parameters: {
     docs: {