m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Added storybook check to CI (#17092)

Browse Source 
* 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
This commit is contained in:
Nidhi Kumari 2023-01-21 00:57:46 +05:30 committed by GitHub
parent b310c6dcca
commit c5368c152b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
293 changed files with 2565 additions and 1136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.circleci/config.yml
View File

@ -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:

2
.depcheckrc.yml
View File

@ -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'

3
.storybook/2.DOCUMENTATION.stories.mdx
View File

@ -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: {

1
.storybook/main.js
View File

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

38
development/highlights/storybook.js
View File

@ -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.
* See:
* 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.
* @param {fileName} string - The fileName to get the story id.
* @returns The id of the story.
*/
function sanitize(string) {
return (
string
.toLowerCase()
// eslint-disable-next-line no-useless-escape
.replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/giu, '-')
.replace(/-+/gu, '-')
.replace(/^-+/u, '')
.replace(/-+$/u, '')
);
function getStoryId(fileName) {
const storiesArray = Object.values(stories.stories);
const foundStory = storiesArray.find((story) => {
return story.importPath.includes(fileName);
});
if (!foundStory) {
throw new Error(`story for ${fileName} not found`);
}
return foundStory.id;
}

375
lavamoat/build-system/policy.json
View File

@ -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/plugin-transform-modules-amd>babel-plugin-dynamic-import-node": true
"@babel/preset-env>@babel/helper-plugin-utils": 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/plugin-transform-modules-amd>babel-plugin-dynamic-import-node": true
"@babel/preset-env>@babel/helper-plugin-utils": 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>braces>snapdragon": 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>extend-shallow>is-extendable": true,
"gulp-zip>plugin-error>extend-shallow>assign-symbols": 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
}
},
"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
"@babel/register>clone-deep>is-plain-object": 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-watch>chokidar>braces>snapdragon": 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-zip>plugin-error>extend-shallow>assign-symbols": true,
"gulp>glob-watcher>anymatch>micromatch>extend-shallow>is-extendable": 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
}
},
"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
"@babel/register>clone-deep>is-plain-object": 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": {

11
package.json
View File

@ -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"

2
ui/components/app/account-list-item/README.mdx
View File

@ -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

2
ui/components/app/account-list-item/account-list-item.stories.js
View File

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

2
ui/components/app/add-network/add-network.stories.js
View File

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

1
ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js
View File

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

3
ui/components/app/app-header/app-header.stories.js
View File

@ -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',

2
ui/components/app/approve-content-card/approve-content-card.stories.js
View File

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

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

@ -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' },
},

1
ui/components/app/beta-header/beta-header.stories.js
View File

@ -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 = () => (

2
ui/components/app/collectible-default-image/collectible-default-image.stories.js
View File

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

2
ui/components/app/collectible-details/collectible-details.stories.js
View File

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

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

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

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

@ -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',

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

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

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

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

2
ui/components/app/connected-accounts-list/connected-accounts-list.stories.js
View File

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

2
ui/components/app/create-new-vault/create-new-vault.stories.js
View File

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

2
ui/components/app/currency-input/currency-input.stories.js
View File

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

2
ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
View File

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

2
ui/components/app/detected-token/detected-token-address/detected-token-address.stories.js
View File

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

2
ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js
View File

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

2
ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js
View File

@ -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' },

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

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

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

@ -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' },

2
ui/components/app/detected-token/detected-token-values/detected-token-values.stories.js
View File

@ -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' },

2
ui/components/app/edit-gas-display/edit-gas-display.stories.js
View File

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

2
ui/components/app/edit-gas-popover/edit-gas-popover.stories.js
View File

@ -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',

2
ui/components/app/flask/experimental-area/experimental-area.stories.js
View File

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

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

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

1
ui/components/app/flask/snap-delineator/snap-delineator.stories.js
View File

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

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

@ -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

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

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

2
ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.stories.js
View File

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

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

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

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

@ -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' },

2
ui/components/app/home-notification/home-notification.stories.js
View File

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

2
ui/components/app/info-box/info-box.stories.js
View File

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

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

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

1
ui/components/app/metamask-template-renderer/metamask-template-renderer.stories.js
View File

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

2
ui/components/app/metamask-translation/README.mdx
View File

@ -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

2
ui/components/app/metamask-translation/metamask-translation.stories.js
View File

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

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

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

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

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

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

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

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

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

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

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

1
ui/components/app/modals/transaction-confirmed/transaction-confirmed.stories.js
View File

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

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

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

2
ui/components/app/network-display/network-display.stories.js
View File

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

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

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

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

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

2
ui/components/app/signature-request-original/README.mdx
View File

@ -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

2
ui/components/app/signature-request-original/signature-request-original.stories.js
View File

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

2
ui/components/app/signature-request-siwe/README.mdx
View File

@ -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

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

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

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

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

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

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

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

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

2
ui/components/app/signature-request-siwe/signature-request-siwe.stories.js
View File

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

2
ui/components/app/signature-request/README.mdx
View File

@ -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

2
ui/components/app/signature-request/signature-request-data/signature-request-data.stories.js
View File

@ -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' },

1
ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js
View File

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

2
ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
View File

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

2
ui/components/app/signature-request/signature-request.stories.js
View File

@ -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: {

2
ui/components/app/srp-input/srp-input.stories.js
View File

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

2
ui/components/app/tab-bar/tab-bar.stories.js
View File

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

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

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

2
ui/components/app/transaction-detail-item/README.mdx
View File

@ -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

2
ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
View File

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

2
ui/components/app/transaction-detail/README.mdx
View File

@ -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

2
ui/components/app/transaction-detail/transaction-detail.stories.js
View File

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

2
ui/components/app/transaction-list-item/transaction-list-item.stories.js
View File

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

1
ui/components/app/transaction-list/transaction-list.stories.js
View File

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

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

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

12
ui/components/component-library/avatar-account/README.mdx
View File

@ -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

2
ui/components/component-library/avatar-account/avatar-account.stories.js
View File

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

10
ui/components/component-library/avatar-base/README.mdx
View File

@ -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

2
ui/components/component-library/avatar-base/avatar-base.stories.js
View File

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

12
ui/components/component-library/avatar-favicon/README.mdx
View File

@ -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`.

2
ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
View File

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

16
ui/components/component-library/avatar-icon/README.mdx
View File

@ -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

2
ui/components/component-library/avatar-icon/avatar-icon.stories.js
View File

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

14
ui/components/component-library/avatar-network/README.mdx
View File

@ -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

2
ui/components/component-library/avatar-network/avatar-network.stories.js
View File

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

14
ui/components/component-library/avatar-token/README.mdx
View File

@ -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

2
ui/components/component-library/avatar-token/avatar-token.stories.js
View File

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

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

@ -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

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

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

16
ui/components/component-library/banner-base/README.mdx
View File

@ -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

1
ui/components/component-library/banner-base/banner-base.stories.js
View File

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

18
ui/components/component-library/button-base/README.mdx
View File

@ -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

2
ui/components/component-library/button-base/button-base.stories.js
View File

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

20
ui/components/component-library/button-icon/README.mdx
View File

@ -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

2
ui/components/component-library/button-icon/button-icon.stories.js
View File

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

Some files were not shown because too many files have changed in this diff Show More