From 49eb72e7804fe5b52de64f1b41cde7d97122c33f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C4=91elka=20Daki=C4=87?= Date: Fri, 2 Jun 2023 10:22:53 +0200 Subject: [PATCH 1/8] feat(ui-library): creates an internal component directory and moves form hint and label --- .../form-hint/index.ts | 3 +- .../form-label/index.ts | 2 +- .../src/components/text-input/index.ts | 4 +- .../test/__snapshots__/index.test.snap.js | 43 +++++++++++++++++++ .../foundation/semantic-tokens/form.css.js | 10 ++++- 5 files changed, 57 insertions(+), 5 deletions(-) rename packages/ui-library/src/components/{ => internal-components}/form-hint/index.ts (88%) rename packages/ui-library/src/components/{ => internal-components}/form-label/index.ts (89%) diff --git a/packages/ui-library/src/components/form-hint/index.ts b/packages/ui-library/src/components/internal-components/form-hint/index.ts similarity index 88% rename from packages/ui-library/src/components/form-hint/index.ts rename to packages/ui-library/src/components/internal-components/form-hint/index.ts index 22ed0ab7c..ec23d4696 100644 --- a/packages/ui-library/src/components/form-hint/index.ts +++ b/packages/ui-library/src/components/internal-components/form-hint/index.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; -import { InputSizesType } from '../../globals/types'; +import { InputSizesType } from '../../../globals/types'; type HintVariant = 'hint' | 'error'; @@ -14,6 +14,7 @@ type FormHintType = { export const BlrFormHint = ({ message, variant, iconName, size }: FormHintType) => { const classes = classMap({ [`${variant}`]: variant, + [`${size}`]: size, }); return html` diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/internal-components/form-label/index.ts similarity index 89% rename from packages/ui-library/src/components/form-label/index.ts rename to packages/ui-library/src/components/internal-components/form-label/index.ts index 96358e979..b1aa4e32b 100644 --- a/packages/ui-library/src/components/form-label/index.ts +++ b/packages/ui-library/src/components/internal-components/form-label/index.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { InputSizesType } from '../../globals/types'; +import { InputSizesType } from '../../../globals/types'; type FormLabelType = { labelText: string; diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts index e626ff45f..7089bc40e 100644 --- a/packages/ui-library/src/components/text-input/index.ts +++ b/packages/ui-library/src/components/text-input/index.ts @@ -4,8 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; import { form } from '../../foundation/semantic-tokens/form.css'; import { InputTypes, FormSizesType } from '../../globals/types'; -import { BlrFormLabel } from '../form-label'; -import { BlrFormHint } from '../form-hint'; +import { BlrFormLabel } from '../internal-components/form-label'; +import { BlrFormHint } from '../internal-components/form-hint'; import { IconType } from '@boiler/icons'; import { iconButton } from '../../foundation/component-tokens/action.css'; import { calculateIconName } from '../../utils/calculate-icon-name'; diff --git a/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js b/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js index 946df2d8c..028138016 100644 --- a/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js +++ b/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js @@ -84,3 +84,46 @@ snapshots['blr-text-input renders correctly'] = `
+ +
+ + + +
+ + + + + + +
+`; +/* end snapshot blr-text-input renders correctly */ diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.js b/packages/ui-library/src/foundation/semantic-tokens/form.css.js index c64a560ca..bc333b7c6 100644 --- a/packages/ui-library/src/foundation/semantic-tokens/form.css.js +++ b/packages/ui-library/src/foundation/semantic-tokens/form.css.js @@ -151,7 +151,6 @@ export const form = css` } .blr-form-hint { display: flex; - flex-direction: row; align-items: center; padding: ${Forms.MD.CaptionComponent.Padding}; font-weight: ${Forms.MD.Caption.fontWeight}; @@ -159,6 +158,8 @@ export const form = css` font-family: ${Forms.MD.Caption.fontFamily}, sans-serif; line-height: ${Forms.MD.Caption.lineHeight}; margin: ${Forms.MD.CaptionSlot.Margin}; + gap: ${Forms.MD.CaptionComponent.ItemSpacing}; + color: ${Forms.Caption.Hint}; &.sm { padding: ${Forms.SM.CaptionComponent.Padding}; font-weight: ${Forms.SM.Caption.fontWeight}; @@ -166,6 +167,7 @@ export const form = css` font-family: ${Forms.SM.Caption.fontFamily}, sans-serif; line-height: ${Forms.SM.Caption.lineHeight}; margin: ${Forms.SM.CaptionSlot.Margin}; + gap: ${Forms.SM.CaptionComponent.ItemSpacing}; } &.lg { padding: ${Forms.LG.CaptionComponent.Padding}; @@ -174,6 +176,7 @@ export const form = css` font-family: ${Forms.LG.Caption.fontFamily}, sans-serif; line-height: ${Forms.LG.Caption.lineHeight}; margin: ${Forms.LG.CaptionSlot.Margin}; + gap: ${Forms.LG.CaptionComponent.ItemSpacing}; } .blr-caption-text { padding-left: ${Forms.MD.LabelSlot.ItemSpacing}; @@ -183,11 +186,14 @@ export const form = css` } } .blr-form-label { + display: flex; + align-items: center; padding: ${Forms.MD.LabelSlot.Padding}; font-weight: ${Forms.MD.Label.fontWeight}; font-size: ${Forms.MD.Label.fontSize}; font-family: ${Forms.MD.Label.fontFamily}, sans-serif; line-height: ${Forms.MD.Label.lineHeight}; + gap: ${Forms.MD.FormsLabelComponent.ItemSpacing}; color: ${Forms.Label.Rest}; &:focus { color: ${Forms.Label.Focus}; @@ -207,6 +213,7 @@ export const form = css` font-size: ${Forms.SM.Label.fontSize}; font-family: ${Forms.SM.Label.fontFamily}, sans-serif; line-height: ${Forms.SM.Label.lineHeight}; + gap: ${Forms.SM.FormsLabelComponent.ItemSpacing}; color: ${Forms.Label.Rest}; } &.lg { @@ -216,6 +223,7 @@ export const form = css` font-family: ${Forms.LG.Label.fontFamily}, sans-serif; line-height: ${Forms.LG.Label.lineHeight}; color: ${Forms.Label.Rest}; + gap: ${Forms.LG.FormsLabelComponent.ItemSpacing}; } } .blr-form-label-appendix { From 96556534b246a3e6a5560dd47edd8888dfb5fc4b Mon Sep 17 00:00:00 2001 From: JpunktWpunkt <92968754+JpunktWpunkt@users.noreply.github.com> Date: Fri, 2 Jun 2023 12:09:51 +0200 Subject: [PATCH 2/8] feat(ui-library): link component (#193) --- .idea/.gitignore | 5 + .idea/BO1LER-Kitchen.iml | 12 + .idea/inspectionProfiles/Project_Default.xml | 7 + .idea/modules.xml | 8 + .idea/prettier.xml | 6 + .idea/rcb-settings.xml | 7 + .idea/vcs.xml | 6 + package-lock.json | 1177 ++--------------- .../src/components/link/index.css.ts | 21 + .../src/components/link/index.stories.ts | 94 ++ .../ui-library/src/components/link/index.ts | 65 + .../src/components/link/indexReact.ts | 13 + .../test/__snapshots__/index.test.snap.js | 77 ++ .../src/components/link/test/index.test.ts | 23 + packages/ui-library/src/globals/constants.ts | 17 + packages/ui-library/src/globals/types.ts | 15 +- .../src/utils/calculate-icon-name.ts | 2 +- 17 files changed, 466 insertions(+), 1089 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/BO1LER-Kitchen.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/prettier.xml create mode 100644 .idea/rcb-settings.xml create mode 100644 .idea/vcs.xml create mode 100644 packages/ui-library/src/components/link/index.css.ts create mode 100644 packages/ui-library/src/components/link/index.stories.ts create mode 100644 packages/ui-library/src/components/link/index.ts create mode 100644 packages/ui-library/src/components/link/indexReact.ts create mode 100644 packages/ui-library/src/components/link/test/__snapshots__/index.test.snap.js create mode 100644 packages/ui-library/src/components/link/test/index.test.ts diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/BO1LER-Kitchen.iml b/.idea/BO1LER-Kitchen.iml new file mode 100644 index 000000000..0c8867d7e --- /dev/null +++ b/.idea/BO1LER-Kitchen.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..7c4836fbe --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..b532a4388 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 000000000..b0ab31a95 --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/rcb-settings.xml b/.idea/rcb-settings.xml new file mode 100644 index 000000000..b77de4295 --- /dev/null +++ b/.idea/rcb-settings.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 64a9ba426..fa321fe60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,6 +64,7 @@ }, "node_modules/@ampproject/remapping": { "version": "2.2.0", + "dev": true, "license": "Apache-2.0", "dependencies": { "@jridgewell/gen-mapping": "^0.1.0", @@ -75,6 +76,7 @@ }, "node_modules/@ampproject/remapping/node_modules/@jridgewell/gen-mapping": { "version": "0.1.1", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.0.0", @@ -86,6 +88,7 @@ }, "node_modules/@babel/code-frame": { "version": "7.18.6", + "dev": true, "license": "MIT", "dependencies": { "@babel/highlight": "^7.18.6" @@ -96,6 +99,7 @@ }, "node_modules/@babel/compat-data": { "version": "7.20.10", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -103,6 +107,7 @@ }, "node_modules/@babel/core": { "version": "7.20.12", + "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.1.0", @@ -131,6 +136,7 @@ }, "node_modules/@babel/core/node_modules/semver": { "version": "6.3.0", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -138,6 +144,7 @@ }, "node_modules/@babel/generator": { "version": "7.20.7", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.20.7", @@ -173,6 +180,7 @@ }, "node_modules/@babel/helper-compilation-targets": { "version": "7.20.7", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.20.5", @@ -190,6 +198,7 @@ }, "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { "version": "5.1.1", + "dev": true, "license": "ISC", "dependencies": { "yallist": "^3.0.2" @@ -197,6 +206,7 @@ }, "node_modules/@babel/helper-compilation-targets/node_modules/semver": { "version": "6.3.0", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -204,6 +214,7 @@ }, "node_modules/@babel/helper-compilation-targets/node_modules/yallist": { "version": "3.1.1", + "dev": true, "license": "ISC" }, "node_modules/@babel/helper-create-class-features-plugin": { @@ -268,6 +279,7 @@ }, "node_modules/@babel/helper-environment-visitor": { "version": "7.18.9", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -286,6 +298,7 @@ }, "node_modules/@babel/helper-function-name": { "version": "7.19.0", + "dev": true, "license": "MIT", "dependencies": { "@babel/template": "^7.18.10", @@ -297,6 +310,7 @@ }, "node_modules/@babel/helper-hoist-variables": { "version": "7.18.6", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -318,6 +332,7 @@ }, "node_modules/@babel/helper-module-imports": { "version": "7.18.6", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -328,6 +343,7 @@ }, "node_modules/@babel/helper-module-transforms": { "version": "7.20.11", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-environment-visitor": "^7.18.9", @@ -397,6 +413,7 @@ }, "node_modules/@babel/helper-simple-access": { "version": "7.20.2", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.20.2" @@ -418,6 +435,7 @@ }, "node_modules/@babel/helper-split-export-declaration": { "version": "7.18.6", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.18.6" @@ -428,6 +446,7 @@ }, "node_modules/@babel/helper-string-parser": { "version": "7.19.4", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -442,6 +461,7 @@ }, "node_modules/@babel/helper-validator-option": { "version": "7.18.6", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -463,6 +483,7 @@ }, "node_modules/@babel/helpers": { "version": "7.20.7", + "dev": true, "license": "MIT", "dependencies": { "@babel/template": "^7.20.7", @@ -537,6 +558,7 @@ }, "node_modules/@babel/parser": { "version": "7.20.7", + "dev": true, "license": "MIT", "bin": { "parser": "bin/babel-parser.js" @@ -1936,6 +1958,7 @@ }, "node_modules/@babel/template": { "version": "7.20.7", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.18.6", @@ -1948,6 +1971,7 @@ }, "node_modules/@babel/traverse": { "version": "7.20.12", + "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.18.6", @@ -1967,6 +1991,7 @@ }, "node_modules/@babel/types": { "version": "7.20.7", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.19.4", @@ -2391,344 +2416,6 @@ "node": ">=10.0.0" } }, - "node_modules/@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz", - "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==", - "peerDependencies": { - "react": ">=16.8.0" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.15.tgz", - "integrity": "sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz", - "integrity": "sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.15.tgz", - "integrity": "sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz", - "integrity": "sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz", - "integrity": "sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz", - "integrity": "sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz", - "integrity": "sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz", - "integrity": "sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz", - "integrity": "sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz", - "integrity": "sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz", - "integrity": "sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==", - "cpu": [ - "loong64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz", - "integrity": "sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==", - "cpu": [ - "mips64el" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz", - "integrity": "sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==", - "cpu": [ - "ppc64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz", - "integrity": "sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==", - "cpu": [ - "riscv64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz", - "integrity": "sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==", - "cpu": [ - "s390x" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz", - "integrity": "sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz", - "integrity": "sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz", - "integrity": "sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz", - "integrity": "sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz", - "integrity": "sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz", - "integrity": "sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz", - "integrity": "sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.2.0.tgz", @@ -3061,6 +2748,7 @@ }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.2", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.0.1", @@ -3073,6 +2761,7 @@ }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.0", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3080,6 +2769,7 @@ }, "node_modules/@jridgewell/set-array": { "version": "1.1.2", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -3096,21 +2786,18 @@ }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.14", + "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.9", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "node_modules/@juggle/resize-observer": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", - "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" - }, "node_modules/@lit-labs/react": { "version": "1.1.1", "license": "BSD-3-Clause" @@ -4492,131 +4179,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/@storybook/blocks": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.0.2.tgz", - "integrity": "sha512-JzHmU8jZLzeQ6bunzci8j/2Ji18GBTyhrPFLk5RjEbMNGWpGjvER/yR127tZOdbPguVNr4iVbRfGzd1wGHlrzA==", - "dependencies": { - "@storybook/channels": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", - "@storybook/csf": "^0.1.0", - "@storybook/docs-tools": "7.0.2", - "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", - "@types/lodash": "^4.14.167", - "color-convert": "^2.0.1", - "dequal": "^2.0.2", - "lodash": "^4.17.21", - "markdown-to-jsx": "^7.1.8", - "memoizerific": "^1.11.3", - "polished": "^4.2.2", - "react-colorful": "^5.1.2", - "telejson": "^7.0.3", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/channels": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.2.tgz", - "integrity": "sha512-qkI8mFy9c8mxN2f01etayKhCaauL6RAsxRzbX1/pKj6UqhHWqqUbtHwymrv4hG5qDYjV1e9pd7ae5eNF8Kui0g==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/client-logger": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.2.tgz", - "integrity": "sha512-rv7W2BhzIQHbFpUM5/CP/acS6T5lTmaxT0MbZ9n+9h++9QQU/cFOdkZgSUbLVAb1AeUGoLsk0HYzcqPpV35Xsw==", - "dependencies": { - "@storybook/global": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/components": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.0.2.tgz", - "integrity": "sha512-Ee9pY6WlpricPUdYiyR0Ov8zgHkUt541yl1CZ6Ytaom2TA12cAnRjKewbLAgVPPhIE1LsMRhOPFYql0JMtnN4Q==", - "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", - "memoizerific": "^1.11.3", - "use-resize-observer": "^9.1.0", - "util-deprecate": "^1.0.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/core-events": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.2.tgz", - "integrity": "sha512-1DCHCwHRL3+rlvnVVc/BCfReP31XaT2WYgcLeGTmkX1E43Po1MkgcM7PnJPSaa9POvSqZ+6YLZv5Bs1SXbufow==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/csf": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.0.tgz", - "integrity": "sha512-uk+jMXCZ8t38jSTHk2o5btI+aV2Ksbvl6DoOv3r6VaCM1KZqeuMwtwywIQdflkA8/6q/dKT8z8L+g8hC4GC3VQ==", - "dependencies": { - "type-fest": "^2.19.0" - } - }, - "node_modules/@storybook/blocks/node_modules/@storybook/theming": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.2.tgz", - "integrity": "sha512-c9sE+QAZNbopPvLiJ6BMxBERfTaq1ATyIri97FBvTucuSotNXw7X5q+ip5/nrCOPZuvK2f5wF4DRyD2HnB/rIQ==", - "dependencies": { - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.0.2", - "@storybook/global": "^5.0.0", - "memoizerific": "^1.11.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/blocks/node_modules/telejson": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz", - "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==", - "dependencies": { - "memoizerific": "^1.11.3" - } - }, "node_modules/@storybook/builder-webpack4": { "version": "6.5.16", "dev": true, @@ -7998,394 +7560,6 @@ "lodash": "^4.17.15" } }, - "node_modules/@storybook/docs-tools": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.0.2.tgz", - "integrity": "sha512-w4D5BURrYjLbLGG9VKAaKU2dSdukszxRE3HWkJyhQU9R1JHvS3n8ntcMqYPqRfoHCOeBLBxP0edDYcAfzGNDYQ==", - "dependencies": { - "@babel/core": "^7.12.10", - "@storybook/core-common": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/types": "7.0.2", - "@types/doctrine": "^0.0.3", - "doctrine": "^3.0.0", - "lodash": "^4.17.21" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/docs-tools/node_modules/@storybook/core-common": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.0.2.tgz", - "integrity": "sha512-DayFPTCj695tnEKLuDlogclBim8mzdrbj9U1xzFm23BUReheGSGdLl2zrb3mP1l9Zj4xJ/Ctst1KN9SFbW84vw==", - "dependencies": { - "@storybook/node-logger": "7.0.2", - "@storybook/types": "7.0.2", - "@types/node": "^16.0.0", - "@types/pretty-hrtime": "^1.0.0", - "chalk": "^4.1.0", - "esbuild": "^0.17.0", - "esbuild-register": "^3.4.0", - "file-system-cache": "^2.0.0", - "find-up": "^5.0.0", - "fs-extra": "^11.1.0", - "glob": "^8.1.0", - "glob-promise": "^6.0.2", - "handlebars": "^4.7.7", - "lazy-universal-dotenv": "^4.0.0", - "picomatch": "^2.3.0", - "pkg-dir": "^5.0.0", - "pretty-hrtime": "^1.0.3", - "resolve-from": "^5.0.0", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/docs-tools/node_modules/@storybook/node-logger": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.0.2.tgz", - "integrity": "sha512-UENpXxB1yDqP7JXaODJo+pbGt5y3NFBNurBr4+pI4bMAC4ARjpgRE4wp6fxUKFPu9MAR10oCdcLEHkaVUAjYRg==", - "dependencies": { - "@types/npmlog": "^4.1.2", - "chalk": "^4.1.0", - "npmlog": "^5.0.1", - "pretty-hrtime": "^1.0.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/docs-tools/node_modules/@types/glob": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz", - "integrity": "sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==", - "dependencies": { - "@types/minimatch": "^5.1.2", - "@types/node": "*" - } - }, - "node_modules/@storybook/docs-tools/node_modules/@types/node": { - "version": "16.18.23", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.23.tgz", - "integrity": "sha512-XAMpaw1s1+6zM+jn2tmw8MyaRDIJfXxqmIQIS0HfoGYPuf7dUWeiUKopwq13KFX9lEp1+THGtlaaYx39Nxr58g==" - }, - "node_modules/@storybook/docs-tools/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@storybook/docs-tools/node_modules/dotenv": { - "version": "16.0.3", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", - "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", - "engines": { - "node": ">=12" - } - }, - "node_modules/@storybook/docs-tools/node_modules/dotenv-expand": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz", - "integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==", - "engines": { - "node": ">=12" - } - }, - "node_modules/@storybook/docs-tools/node_modules/esbuild": { - "version": "0.17.15", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz", - "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==", - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/android-arm": "0.17.15", - "@esbuild/android-arm64": "0.17.15", - "@esbuild/android-x64": "0.17.15", - "@esbuild/darwin-arm64": "0.17.15", - "@esbuild/darwin-x64": "0.17.15", - "@esbuild/freebsd-arm64": "0.17.15", - "@esbuild/freebsd-x64": "0.17.15", - "@esbuild/linux-arm": "0.17.15", - "@esbuild/linux-arm64": "0.17.15", - "@esbuild/linux-ia32": "0.17.15", - "@esbuild/linux-loong64": "0.17.15", - "@esbuild/linux-mips64el": "0.17.15", - "@esbuild/linux-ppc64": "0.17.15", - "@esbuild/linux-riscv64": "0.17.15", - "@esbuild/linux-s390x": "0.17.15", - "@esbuild/linux-x64": "0.17.15", - "@esbuild/netbsd-x64": "0.17.15", - "@esbuild/openbsd-x64": "0.17.15", - "@esbuild/sunos-x64": "0.17.15", - "@esbuild/win32-arm64": "0.17.15", - "@esbuild/win32-ia32": "0.17.15", - "@esbuild/win32-x64": "0.17.15" - } - }, - "node_modules/@storybook/docs-tools/node_modules/file-system-cache": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.0.2.tgz", - "integrity": "sha512-lp4BHO4CWqvRyx88Tt3quZic9ZMf4cJyquYq7UI8sH42Bm2ArlBBjKQAalZOo+UfaBassb7X123Lik5qZ/tSAA==", - "dependencies": { - "fs-extra": "^11.1.0", - "ramda": "^0.28.0" - } - }, - "node_modules/@storybook/docs-tools/node_modules/find-up": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", - "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", - "dependencies": { - "locate-path": "^6.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/docs-tools/node_modules/glob": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", - "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^5.0.1", - "once": "^1.3.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/@storybook/docs-tools/node_modules/glob-promise": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.2.tgz", - "integrity": "sha512-Ni2aDyD1ekD6x8/+K4hDriRDbzzfuK4yKpqSymJ4P7IxbtARiOOuU+k40kbHM0sLIlbf1Qh0qdMkAHMZYE6XJQ==", - "dependencies": { - "@types/glob": "^8.0.0" - }, - "engines": { - "node": ">=16" - }, - "funding": { - "type": "individual", - "url": "https://github.com/sponsors/ahmadnassri" - }, - "peerDependencies": { - "glob": "^8.0.3" - } - }, - "node_modules/@storybook/docs-tools/node_modules/lazy-universal-dotenv": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-4.0.0.tgz", - "integrity": "sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==", - "dependencies": { - "app-root-dir": "^1.0.2", - "dotenv": "^16.0.0", - "dotenv-expand": "^10.0.0" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/@storybook/docs-tools/node_modules/locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dependencies": { - "p-locate": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/docs-tools/node_modules/p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dependencies": { - "yocto-queue": "^0.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/docs-tools/node_modules/p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dependencies": { - "p-limit": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@storybook/docs-tools/node_modules/pkg-dir": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz", - "integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==", - "dependencies": { - "find-up": "^5.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@storybook/global": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", - "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==" - }, - "node_modules/@storybook/manager-api": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.0.2.tgz", - "integrity": "sha512-PbLj9Rc5uCMPfMdaXv1wE3koA3+d0rmZ3BJI8jeq+mfZEvpvfI4OOpRioT1q04CkkVomFOVFTyO0Q/o6Rb5N7g==", - "dependencies": { - "@storybook/channels": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/core-events": "7.0.2", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", - "@storybook/router": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", - "dequal": "^2.0.2", - "lodash": "^4.17.21", - "memoizerific": "^1.11.3", - "semver": "^7.3.7", - "store2": "^2.14.2", - "telejson": "^7.0.3", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/channels": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.2.tgz", - "integrity": "sha512-qkI8mFy9c8mxN2f01etayKhCaauL6RAsxRzbX1/pKj6UqhHWqqUbtHwymrv4hG5qDYjV1e9pd7ae5eNF8Kui0g==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/client-logger": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.2.tgz", - "integrity": "sha512-rv7W2BhzIQHbFpUM5/CP/acS6T5lTmaxT0MbZ9n+9h++9QQU/cFOdkZgSUbLVAb1AeUGoLsk0HYzcqPpV35Xsw==", - "dependencies": { - "@storybook/global": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/core-events": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.2.tgz", - "integrity": "sha512-1DCHCwHRL3+rlvnVVc/BCfReP31XaT2WYgcLeGTmkX1E43Po1MkgcM7PnJPSaa9POvSqZ+6YLZv5Bs1SXbufow==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/csf": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.0.tgz", - "integrity": "sha512-uk+jMXCZ8t38jSTHk2o5btI+aV2Ksbvl6DoOv3r6VaCM1KZqeuMwtwywIQdflkA8/6q/dKT8z8L+g8hC4GC3VQ==", - "dependencies": { - "type-fest": "^2.19.0" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/router": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.0.2.tgz", - "integrity": "sha512-ZB2vucfayZUrMLBlXju4v6CNOQQb0YKDLw5RoojdBxOsUFtnp5UiPOE+I8PQR63EBwnRjozeibV1XSM+GlQb5w==", - "dependencies": { - "@storybook/client-logger": "7.0.2", - "memoizerific": "^1.11.3", - "qs": "^6.10.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/manager-api/node_modules/@storybook/theming": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.0.2.tgz", - "integrity": "sha512-c9sE+QAZNbopPvLiJ6BMxBERfTaq1ATyIri97FBvTucuSotNXw7X5q+ip5/nrCOPZuvK2f5wF4DRyD2HnB/rIQ==", - "dependencies": { - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.0.2", - "@storybook/global": "^5.0.0", - "memoizerific": "^1.11.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/manager-api/node_modules/telejson": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz", - "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==", - "dependencies": { - "memoizerific": "^1.11.3" - } - }, "node_modules/@storybook/manager-webpack4": { "version": "6.5.16", "dev": true, @@ -10038,95 +9212,6 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/@storybook/preview-api": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.0.2.tgz", - "integrity": "sha512-QAlJM/r92+dQe/kB7MTTR9b/1mt9UJjxNjazGdEWipA/nw23kOF3o/hBcvKwBYkit4zGYsX70H+vuzW8hCo/lA==", - "dependencies": { - "@storybook/channel-postmessage": "7.0.2", - "@storybook/channels": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/core-events": "7.0.2", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", - "@storybook/types": "7.0.2", - "@types/qs": "^6.9.5", - "dequal": "^2.0.2", - "lodash": "^4.17.21", - "memoizerific": "^1.11.3", - "qs": "^6.10.0", - "synchronous-promise": "^2.0.15", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/preview-api/node_modules/@storybook/channel-postmessage": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-7.0.2.tgz", - "integrity": "sha512-SZ/KqnZcx10W9hJbrzBKcP9dmgaeTaXugUhcgw1IkmjKWdsKazqFZCPwQWZZKAmhO4wYbyYOhkz3wfSIeB4mFw==", - "dependencies": { - "@storybook/channels": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/core-events": "7.0.2", - "@storybook/global": "^5.0.0", - "qs": "^6.10.0", - "telejson": "^7.0.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/preview-api/node_modules/@storybook/channels": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.2.tgz", - "integrity": "sha512-qkI8mFy9c8mxN2f01etayKhCaauL6RAsxRzbX1/pKj6UqhHWqqUbtHwymrv4hG5qDYjV1e9pd7ae5eNF8Kui0g==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/preview-api/node_modules/@storybook/client-logger": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.0.2.tgz", - "integrity": "sha512-rv7W2BhzIQHbFpUM5/CP/acS6T5lTmaxT0MbZ9n+9h++9QQU/cFOdkZgSUbLVAb1AeUGoLsk0HYzcqPpV35Xsw==", - "dependencies": { - "@storybook/global": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/preview-api/node_modules/@storybook/core-events": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.0.2.tgz", - "integrity": "sha512-1DCHCwHRL3+rlvnVVc/BCfReP31XaT2WYgcLeGTmkX1E43Po1MkgcM7PnJPSaa9POvSqZ+6YLZv5Bs1SXbufow==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/preview-api/node_modules/@storybook/csf": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.0.tgz", - "integrity": "sha512-uk+jMXCZ8t38jSTHk2o5btI+aV2Ksbvl6DoOv3r6VaCM1KZqeuMwtwywIQdflkA8/6q/dKT8z8L+g8hC4GC3VQ==", - "dependencies": { - "type-fest": "^2.19.0" - } - }, - "node_modules/@storybook/preview-api/node_modules/telejson": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.1.0.tgz", - "integrity": "sha512-jFJO4P5gPebZAERPkJsqMAQ0IMA1Hi0AoSfxpnUaV6j6R2SZqlpkbS20U6dEUtA3RUYt2Ak/mTlkQzHH9Rv/hA==", - "dependencies": { - "memoizerific": "^1.11.3" - } - }, "node_modules/@storybook/preview-web": { "version": "6.5.16", "dev": true, @@ -10286,39 +9371,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/@storybook/types": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.0.2.tgz", - "integrity": "sha512-0OCt/kAexa8MCcljxA+yZxGMn0n2U2Ync0KxotItqNbKBKVkaLQUls0+IXTWSCpC/QJvNZ049jxUHHanNi/96w==", - "dependencies": { - "@storybook/channels": "7.0.2", - "@types/babel__core": "^7.0.0", - "@types/express": "^4.7.0", - "file-system-cache": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/types/node_modules/@storybook/channels": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.0.2.tgz", - "integrity": "sha512-qkI8mFy9c8mxN2f01etayKhCaauL6RAsxRzbX1/pKj6UqhHWqqUbtHwymrv4hG5qDYjV1e9pd7ae5eNF8Kui0g==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/types/node_modules/file-system-cache": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.0.2.tgz", - "integrity": "sha512-lp4BHO4CWqvRyx88Tt3quZic9ZMf4cJyquYq7UI8sH42Bm2ArlBBjKQAalZOo+UfaBassb7X123Lik5qZ/tSAA==", - "dependencies": { - "fs-extra": "^11.1.0", - "ramda": "^0.28.0" - } - }, "node_modules/@storybook/ui": { "version": "6.5.16", "dev": true, @@ -11445,45 +10497,9 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/babel__core": { - "version": "7.20.0", - "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz", - "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==", - "dependencies": { - "@babel/parser": "^7.20.7", - "@babel/types": "^7.20.7", - "@types/babel__generator": "*", - "@types/babel__template": "*", - "@types/babel__traverse": "*" - } - }, - "node_modules/@types/babel__generator": { - "version": "7.6.4", - "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz", - "integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==", - "dependencies": { - "@babel/types": "^7.0.0" - } - }, - "node_modules/@types/babel__template": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz", - "integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==", - "dependencies": { - "@babel/parser": "^7.1.0", - "@babel/types": "^7.0.0" - } - }, - "node_modules/@types/babel__traverse": { - "version": "7.18.3", - "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.18.3.tgz", - "integrity": "sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==", - "dependencies": { - "@babel/types": "^7.3.0" - } - }, "node_modules/@types/body-parser": { "version": "1.19.2", + "dev": true, "license": "MIT", "dependencies": { "@types/connect": "*", @@ -11530,6 +10546,7 @@ }, "node_modules/@types/connect": { "version": "3.4.35", + "dev": true, "license": "MIT", "dependencies": { "@types/node": "*" @@ -11561,11 +10578,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/doctrine": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.3.tgz", - "integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==" - }, "node_modules/@types/eslint": { "version": "8.4.10", "dev": true, @@ -11591,6 +10603,7 @@ }, "node_modules/@types/express": { "version": "4.17.17", + "dev": true, "license": "MIT", "dependencies": { "@types/body-parser": "*", @@ -11601,6 +10614,7 @@ }, "node_modules/@types/express-serve-static-core": { "version": "4.17.33", + "dev": true, "license": "MIT", "dependencies": { "@types/node": "*", @@ -11726,6 +10740,7 @@ }, "node_modules/@types/lodash": { "version": "4.14.191", + "dev": true, "license": "MIT" }, "node_modules/@types/mdast": { @@ -11738,6 +10753,7 @@ }, "node_modules/@types/mime": { "version": "3.0.1", + "dev": true, "license": "MIT" }, "node_modules/@types/mime-types": { @@ -11747,6 +10763,7 @@ }, "node_modules/@types/minimatch": { "version": "5.1.2", + "dev": true, "license": "MIT" }, "node_modules/@types/minimist": { @@ -11780,6 +10797,7 @@ }, "node_modules/@types/npmlog": { "version": "4.1.4", + "dev": true, "license": "MIT" }, "node_modules/@types/parse-json": { @@ -11796,6 +10814,7 @@ }, "node_modules/@types/pretty-hrtime": { "version": "1.0.1", + "dev": true, "license": "MIT" }, "node_modules/@types/prop-types": { @@ -11804,10 +10823,12 @@ }, "node_modules/@types/qs": { "version": "6.9.7", + "dev": true, "license": "MIT" }, "node_modules/@types/range-parser": { "version": "1.2.4", + "dev": true, "license": "MIT" }, "node_modules/@types/react": { @@ -11853,6 +10874,7 @@ }, "node_modules/@types/serve-static": { "version": "1.15.0", + "dev": true, "license": "MIT", "dependencies": { "@types/mime": "*", @@ -13128,16 +12150,19 @@ }, "node_modules/app-root-dir": { "version": "1.0.2", + "dev": true, "license": "MIT" }, "node_modules/aproba": { "version": "1.2.0", + "dev": true, "license": "ISC" }, "node_modules/are-we-there-yet": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", + "dev": true, "dependencies": { "delegates": "^1.0.0", "readable-stream": "^3.6.0" @@ -13150,6 +12175,7 @@ "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dev": true, "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -14046,6 +13072,7 @@ }, "node_modules/brace-expansion": { "version": "2.0.1", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0" @@ -14186,6 +13213,7 @@ }, "node_modules/browserslist": { "version": "4.21.4", + "dev": true, "funding": [ { "type": "opencollective", @@ -15154,6 +14182,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", + "dev": true, "bin": { "color-support": "bin.js" } @@ -15453,6 +14482,7 @@ }, "node_modules/console-control-strings": { "version": "1.1.0", + "dev": true, "license": "ISC" }, "node_modules/constant-case": { @@ -15554,6 +14584,7 @@ }, "node_modules/convert-source-map": { "version": "1.9.0", + "dev": true, "license": "MIT" }, "node_modules/cookie": { @@ -16832,6 +15863,7 @@ }, "node_modules/delegates": { "version": "1.0.0", + "dev": true, "license": "MIT" }, "node_modules/depd": { @@ -16850,14 +15882,6 @@ "node": ">= 0.6.0" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "engines": { - "node": ">=6" - } - }, "node_modules/des.js": { "version": "1.0.1", "dev": true, @@ -17177,6 +16201,7 @@ }, "node_modules/electron-to-chromium": { "version": "1.4.284", + "dev": true, "license": "ISC" }, "node_modules/elliptic": { @@ -17707,17 +16732,6 @@ "node": ">=12" } }, - "node_modules/esbuild-register": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.4.2.tgz", - "integrity": "sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==", - "dependencies": { - "debug": "^4.3.4" - }, - "peerDependencies": { - "esbuild": ">=0.12 <1" - } - }, "node_modules/esbuild-sunos-64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz", @@ -17800,6 +16814,7 @@ }, "node_modules/escalade": { "version": "3.1.1", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -19953,6 +18968,7 @@ }, "node_modules/fs-extra": { "version": "11.1.0", + "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", @@ -20041,6 +19057,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", + "dev": true, "dependencies": { "aproba": "^1.0.3 || ^2.0.0", "color-support": "^1.1.2", @@ -20060,6 +19077,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, "engines": { "node": ">=8" } @@ -20068,6 +19086,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -20093,6 +19112,7 @@ }, "node_modules/gensync": { "version": "1.0.0-beta.2", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -20332,6 +19352,7 @@ }, "node_modules/globals": { "version": "11.12.0", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -20448,6 +19469,7 @@ }, "node_modules/handlebars": { "version": "4.7.7", + "dev": true, "license": "MIT", "dependencies": { "minimist": "^1.2.5", @@ -20576,7 +19598,8 @@ "node_modules/has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==" + "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", + "dev": true }, "node_modules/has-value": { "version": "1.0.0", @@ -22609,6 +21632,7 @@ }, "node_modules/jsesc": { "version": "2.5.2", + "dev": true, "license": "MIT", "bin": { "jsesc": "bin/jsesc" @@ -22642,6 +21666,7 @@ }, "node_modules/json5": { "version": "2.2.3", + "dev": true, "license": "MIT", "bin": { "json5": "lib/cli.js" @@ -22657,6 +21682,7 @@ }, "node_modules/jsonfile": { "version": "6.1.0", + "dev": true, "license": "MIT", "dependencies": { "universalify": "^2.0.0" @@ -23518,6 +22544,7 @@ }, "node_modules/map-or-similar": { "version": "1.5.0", + "dev": true, "license": "MIT" }, "node_modules/map-visit": { @@ -23540,17 +22567,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/markdown-to-jsx": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.2.0.tgz", - "integrity": "sha512-3l4/Bigjm4bEqjCR6Xr+d4DtM1X6vvtGsMGSjJYyep8RjjIvcWtrXBS8Wbfe1/P+atKNMccpsraESIaWVplzVg==", - "engines": { - "node": ">= 10" - }, - "peerDependencies": { - "react": ">= 0.14.0" - } - }, "node_modules/marky": { "version": "1.2.5", "dev": true, @@ -23760,6 +22776,7 @@ }, "node_modules/memoizerific": { "version": "1.11.3", + "dev": true, "license": "MIT", "dependencies": { "map-or-similar": "^1.5.0" @@ -24102,6 +23119,7 @@ }, "node_modules/minimatch": { "version": "5.1.4", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^2.0.1" @@ -24340,6 +23358,7 @@ }, "node_modules/neo-async": { "version": "2.6.2", + "dev": true, "license": "MIT" }, "node_modules/nerf-dart": { @@ -24552,6 +23571,7 @@ }, "node_modules/node-releases": { "version": "2.0.8", + "dev": true, "license": "MIT" }, "node_modules/node.extend": { @@ -27203,6 +26223,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", + "dev": true, "dependencies": { "are-we-there-yet": "^2.0.0", "console-control-strings": "^1.1.0", @@ -28270,6 +27291,7 @@ }, "node_modules/polished": { "version": "4.2.2", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8" @@ -29139,6 +28161,7 @@ }, "node_modules/pretty-hrtime": { "version": "1.0.3", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.8" @@ -29506,6 +28529,7 @@ }, "node_modules/qs": { "version": "6.11.0", + "dev": true, "license": "BSD-3-Clause", "dependencies": { "side-channel": "^1.0.4" @@ -29559,6 +28583,7 @@ }, "node_modules/ramda": { "version": "0.28.0", + "dev": true, "license": "MIT", "funding": { "type": "opencollective", @@ -29664,15 +28689,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-colorful": { - "version": "5.6.1", - "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz", - "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==", - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, "node_modules/react-dom": { "version": "18.2.0", "dev": true, @@ -30350,6 +29366,7 @@ }, "node_modules/resolve-from": { "version": "5.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -30773,6 +29790,7 @@ }, "node_modules/safe-buffer": { "version": "5.1.2", + "dev": true, "license": "MIT" }, "node_modules/safe-identifier": { @@ -31319,6 +30337,7 @@ }, "node_modules/set-blocking": { "version": "2.0.0", + "dev": true, "license": "ISC" }, "node_modules/set-value": { @@ -31463,6 +30482,7 @@ }, "node_modules/signal-exit": { "version": "3.0.7", + "dev": true, "license": "ISC" }, "node_modules/sisteransi": { @@ -31720,6 +30740,7 @@ }, "node_modules/source-map": { "version": "0.6.1", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -31974,6 +30995,7 @@ }, "node_modules/store2": { "version": "2.14.2", + "dev": true, "license": "(MIT OR GPL-3.0)" }, "node_modules/stream-browserify": { @@ -32013,6 +31035,7 @@ }, "node_modules/string_decoder": { "version": "1.1.1", + "dev": true, "license": "MIT", "dependencies": { "safe-buffer": "~5.1.0" @@ -32594,6 +31617,7 @@ }, "node_modules/synchronous-promise": { "version": "2.0.17", + "dev": true, "license": "BSD-3-Clause" }, "node_modules/synckit": { @@ -33097,6 +32121,7 @@ }, "node_modules/to-fast-properties": { "version": "2.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -33463,17 +32488,6 @@ "dev": true, "license": "MIT" }, - "node_modules/type-fest": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", - "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", - "engines": { - "node": ">=12.20" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/type-is": { "version": "1.6.18", "dev": true, @@ -33551,6 +32565,7 @@ }, "node_modules/uglify-js": { "version": "3.17.4", + "dev": true, "license": "BSD-2-Clause", "optional": true, "bin": { @@ -33834,6 +32849,7 @@ }, "node_modules/universalify": { "version": "2.0.0", + "dev": true, "license": "MIT", "engines": { "node": ">= 10.0.0" @@ -33915,6 +32931,7 @@ }, "node_modules/update-browserslist-db": { "version": "1.0.10", + "dev": true, "funding": [ { "type": "opencollective", @@ -34071,18 +33088,6 @@ "node": ">=0.10.0" } }, - "node_modules/use-resize-observer": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", - "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==", - "dependencies": { - "@juggle/resize-observer": "^3.3.1" - }, - "peerDependencies": { - "react": "16.8.0 - 18", - "react-dom": "16.8.0 - 18" - } - }, "node_modules/util": { "version": "0.11.1", "dev": true, @@ -34093,6 +33098,7 @@ }, "node_modules/util-deprecate": { "version": "1.0.2", + "dev": true, "license": "MIT" }, "node_modules/util.promisify": { @@ -34828,6 +33834,7 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", + "dev": true, "dependencies": { "string-width": "^1.0.2 || 2 || 3 || 4" } @@ -34857,6 +33864,7 @@ }, "node_modules/wordwrap": { "version": "1.0.0", + "dev": true, "license": "MIT" }, "node_modules/wordwrapjs": { @@ -35135,9 +34143,6 @@ "name": "@boiler/storybook", "version": "0.0.1", "license": "ISC", - "dependencies": { - "@storybook/blocks": "^7.0.2" - }, "devDependencies": { "@boiler/ui-library": "^0.0.1", "@storybook/addon-actions": "^6.5.16", diff --git a/packages/ui-library/src/components/link/index.css.ts b/packages/ui-library/src/components/link/index.css.ts new file mode 100644 index 000000000..6e3bbdba1 --- /dev/null +++ b/packages/ui-library/src/components/link/index.css.ts @@ -0,0 +1,21 @@ +import { css } from 'lit'; + +export const styleCustom = css` + .blr-link { + display: flex; + align-items: center; + text-decoration: none; + width: fit-content; + } + + // + //.blr-link:disabled { + // pointer-events: none; + //} + // + //.blr-link:focus { + // /* Component Tokens for Outline are missing */ + // /* Need to make sure we meet AA requirements with this custom outline */ + // outline: 2px solid black; + //} +`; diff --git a/packages/ui-library/src/components/link/index.stories.ts b/packages/ui-library/src/components/link/index.stories.ts new file mode 100644 index 000000000..9ad07bce7 --- /dev/null +++ b/packages/ui-library/src/components/link/index.stories.ts @@ -0,0 +1,94 @@ +/* eslint-disable no-console */ +import { html } from 'lit-html'; +import { RelTypes, Sizes, TargetTypes } from '../../globals/constants'; +import { IconKeys } from '@boiler/icons'; +import { BlrLink as BlrLinkClass } from './index'; +import './index'; +import { getIconName } from '../../utils/get-icon-name'; +import { calculateIconName } from '../../utils/calculate-icon-name'; + +export default { + title: 'BlrLink', + argTypes: { + leadingIcon: { + options: [undefined, ...getIconName(IconKeys)], + control: { type: 'select' }, + }, + trailingIcon: { + options: [undefined, ...getIconName(IconKeys)], + control: { type: 'select' }, + }, + rel: { + options: [undefined, ...RelTypes], + control: { type: 'select' }, + }, + target: { + options: [undefined, ...TargetTypes], + control: { type: 'select' }, + }, + size: { + options: Sizes, + control: { type: 'select' }, + }, + variant: { + options: ['cta', 'primary', 'secondary', 'silent', 'destructive', 'encourage'], + control: { type: 'select' }, + }, + }, +}; +export const BlrLink = ({ + label, + ariaLabel, + onClick, + onBlur, + disabled, + linkId, + href, + target, + rel, + size, + leadingIcon, + loading, + trailingIcon, + loadingStatus, + variant, +}: BlrLinkClass) => + html` + + + `; +BlrLink.storyName = 'BlrLink'; +BlrLink.args = { + label: 'Link', + onClick: () => console.log('onClick'), + onBlur: () => console.log('onBlur'), + leadingIcon: undefined, + trailingIcon: 'blrChevronDown', + size: 'md', + iconPosition: 'left', + loadingStatus: 'Loading', + loading: false, + disabled: false, + variant: 'cta', + linkId: 'link-id', + href: '#', + target: '_self', + rel: 'nofollow', +}; diff --git a/packages/ui-library/src/components/link/index.ts b/packages/ui-library/src/components/link/index.ts new file mode 100644 index 000000000..0d24ed545 --- /dev/null +++ b/packages/ui-library/src/components/link/index.ts @@ -0,0 +1,65 @@ +import { LitElement, html, nothing } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { customElement, property } from 'lit/decorators.js'; +import { styleCustom } from './index.css'; +import { action } from '../../foundation/semantic-tokens/action.css'; +import { textButton } from '../../foundation/component-tokens/action.css'; +import { ActionVariants, RelTypes, SizesType, TargetTypes } from '../../globals/types'; +import { determineLoaderVariant } from '../../utils/determine-loader-variant'; +import { IconType } from '@boiler/icons'; + +@customElement('blr-link') +export class BlrLink extends LitElement { + static styles = [styleCustom, action, textButton]; + + @property() label!: string; + @property() onClick!: HTMLButtonElement['onclick']; + @property() onBlur?: HTMLButtonElement['onblur']; + @property() leadingIcon?: IconType; + @property() trailingIcon?: IconType; + @property() disabled?: boolean; + @property() linkId?: string; + @property() href!: string; + @property() target?: TargetTypes; + @property() rel?: RelTypes; + @property() ariaLabel!: string; + @property() variant: ActionVariants = 'primary'; + @property() loadingStatus!: string; + @property() loading!: boolean; + @property() size!: SizesType; + + render() { + const classes = classMap({ + 'blr-semantic-action': true, + 'blr-text-button': true, + [`${this.variant}`]: this.variant, + [`${this.size}`]: this.size || 'md', + 'blr-link': true, + }); + + const loaderVariant = determineLoaderVariant(this.variant); + return html` + ${this.loading + ? html`` + : html` + ${this.leadingIcon && html``} + ${this.label} + ${this.trailingIcon && html``} + `} + `; + } +} diff --git a/packages/ui-library/src/components/link/indexReact.ts b/packages/ui-library/src/components/link/indexReact.ts new file mode 100644 index 000000000..b4e6e86d0 --- /dev/null +++ b/packages/ui-library/src/components/link/indexReact.ts @@ -0,0 +1,13 @@ +import React from 'react'; +import { createComponent, EventName } from '@lit-labs/react'; + +import { BlrLink } from '.'; + +export const BlrLinkReact = createComponent({ + tagName: 'blr-link', + elementClass: BlrLink, + react: React, + events: { + onClick: 'pointerdown' as EventName, + }, +}); diff --git a/packages/ui-library/src/components/link/test/__snapshots__/index.test.snap.js b/packages/ui-library/src/components/link/test/__snapshots__/index.test.snap.js new file mode 100644 index 000000000..58af721e1 --- /dev/null +++ b/packages/ui-library/src/components/link/test/__snapshots__/index.test.snap.js @@ -0,0 +1,77 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots['blr-link renders correctly'] = ` +`; +/* end snapshot blr-text-button renders correctly */ +snapshots['blr-link renders correctly'] = ` + + + + Label + + + + +`; +/* end snapshot blr-link renders correctly */ +snapshots['blr-link renders correctly'] = ` + + + + Label + + + + +`; +/* end snapshot blr-link renders correctly */ diff --git a/packages/ui-library/src/components/link/test/index.test.ts b/packages/ui-library/src/components/link/test/index.test.ts new file mode 100644 index 000000000..7cb4cdc65 --- /dev/null +++ b/packages/ui-library/src/components/link/test/index.test.ts @@ -0,0 +1,23 @@ +/* eslint-disable @typescript-eslint/await-thenable */ +import '../index'; +import { fixture, expect } from '@open-wc/testing'; + +describe('blr-link', () => { + it('renders correctly', async () => { + const element = await fixture(` + + `); + + await expect(element).shadowDom.to.equalSnapshot(); + }); +}); diff --git a/packages/ui-library/src/globals/constants.ts b/packages/ui-library/src/globals/constants.ts index 51e0fd4d1..f1dfe99ae 100644 --- a/packages/ui-library/src/globals/constants.ts +++ b/packages/ui-library/src/globals/constants.ts @@ -1,5 +1,22 @@ export const Sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const; +export const ActionTypes = ['primary', 'secondary', 'cta', 'silent', 'destructive', 'encourage'] as const; export const InputSizes = ['sm', 'md', 'lg'] as const; export const FeedbackSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const; export const FormSizes = ['sm', 'md', 'lg'] as const; export const InputTypes = ['text', 'email', 'number', 'password'] as const; +export const RelTypes = [ + 'alternate', + 'author', + 'bookmark', + 'external', + 'help', + 'licence', + 'next', + 'nofollow', + 'noopener', + 'noreferrer', + 'prev', + 'search', + 'tag', +]; +export const TargetTypes = ['_blank', '_parent', '_self', '_top']; diff --git a/packages/ui-library/src/globals/types.ts b/packages/ui-library/src/globals/types.ts index f0b032ab4..3197afea0 100644 --- a/packages/ui-library/src/globals/types.ts +++ b/packages/ui-library/src/globals/types.ts @@ -1,9 +1,20 @@ -import { FeedbackSizes, Sizes, InputTypes, FormSizes, InputSizes } from './constants'; +import { + FeedbackSizes, + Sizes, + ActionTypes, + InputTypes, + FormSizes, + InputSizes, + RelTypes, + TargetTypes, +} from './constants'; export type SizesType = (typeof Sizes)[number]; -export type ActionVariants = 'primary' | 'secondary' | 'cta' | 'silent' | 'destructive' | 'encourage'; +export type ActionVariants = (typeof ActionTypes)[number]; export type FeedbackVariants = 'default' | 'inverted'; export type FeedbackSizesType = (typeof FeedbackSizes)[number]; export type FormSizesType = (typeof FormSizes)[number]; export type InputTypes = (typeof InputTypes)[number]; export type InputSizesType = (typeof InputSizes)[number]; +export type RelTypes = (typeof RelTypes)[number]; +export type TargetTypes = (typeof TargetTypes)[number]; diff --git a/packages/ui-library/src/utils/calculate-icon-name.ts b/packages/ui-library/src/utils/calculate-icon-name.ts index 416063068..f4d331079 100644 --- a/packages/ui-library/src/utils/calculate-icon-name.ts +++ b/packages/ui-library/src/utils/calculate-icon-name.ts @@ -18,7 +18,7 @@ const getSizeSubstitute = (icon: string) => { } }; -export const calculateIconName = (icon: string, size: SizesType) => { +export const calculateIconName = (icon: string | undefined, size: SizesType) => { if (!icon) { return undefined; } From 146ec29141c890fb9c754a9ce653df0d15bd7f9a Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 5 Jun 2023 14:06:29 +0200 Subject: [PATCH 3/8] feat(icons): adds error and error-filled icon (#204) --- packages/icons/icon-set/Error_filled_lg.svg | 3 + packages/icons/icon-set/Error_filled_md.svg | 3 + packages/icons/icon-set/Error_filled_sm.svg | 3 + packages/icons/icon-set/Error_filled_xl.svg | 3 + packages/icons/icon-set/Error_filled_xs.svg | 3 + packages/icons/icon-set/Error_filled_xxs.svg | 10 ++ packages/icons/icon-set/Error_lg.svg | 3 + packages/icons/icon-set/Error_md.svg | 3 + packages/icons/icon-set/Error_sm.svg | 3 + packages/icons/icon-set/Error_xl.svg | 3 + packages/icons/icon-set/Error_xs.svg | 3 + packages/icons/icon-set/Error_xxs.svg | 10 ++ .../icons/icons-optimized/Error_filled_lg.svg | 1 + .../icons/icons-optimized/Error_filled_md.svg | 1 + .../icons/icons-optimized/Error_filled_sm.svg | 1 + .../icons/icons-optimized/Error_filled_xl.svg | 1 + .../icons/icons-optimized/Error_filled_xs.svg | 1 + .../icons-optimized/Error_filled_xxs.svg | 1 + packages/icons/icons-optimized/Error_lg.svg | 1 + packages/icons/icons-optimized/Error_md.svg | 1 + packages/icons/icons-optimized/Error_sm.svg | 1 + packages/icons/icons-optimized/Error_xl.svg | 1 + packages/icons/icons-optimized/Error_xs.svg | 1 + packages/icons/icons-optimized/Error_xxs.svg | 1 + packages/icons/icons-optimized/icons.ts | 148 ++++++++++++++++++ 25 files changed, 210 insertions(+) create mode 100644 packages/icons/icon-set/Error_filled_lg.svg create mode 100644 packages/icons/icon-set/Error_filled_md.svg create mode 100644 packages/icons/icon-set/Error_filled_sm.svg create mode 100644 packages/icons/icon-set/Error_filled_xl.svg create mode 100644 packages/icons/icon-set/Error_filled_xs.svg create mode 100644 packages/icons/icon-set/Error_filled_xxs.svg create mode 100644 packages/icons/icon-set/Error_lg.svg create mode 100644 packages/icons/icon-set/Error_md.svg create mode 100644 packages/icons/icon-set/Error_sm.svg create mode 100644 packages/icons/icon-set/Error_xl.svg create mode 100644 packages/icons/icon-set/Error_xs.svg create mode 100644 packages/icons/icon-set/Error_xxs.svg create mode 100644 packages/icons/icons-optimized/Error_filled_lg.svg create mode 100644 packages/icons/icons-optimized/Error_filled_md.svg create mode 100644 packages/icons/icons-optimized/Error_filled_sm.svg create mode 100644 packages/icons/icons-optimized/Error_filled_xl.svg create mode 100644 packages/icons/icons-optimized/Error_filled_xs.svg create mode 100644 packages/icons/icons-optimized/Error_filled_xxs.svg create mode 100644 packages/icons/icons-optimized/Error_lg.svg create mode 100644 packages/icons/icons-optimized/Error_md.svg create mode 100644 packages/icons/icons-optimized/Error_sm.svg create mode 100644 packages/icons/icons-optimized/Error_xl.svg create mode 100644 packages/icons/icons-optimized/Error_xs.svg create mode 100644 packages/icons/icons-optimized/Error_xxs.svg diff --git a/packages/icons/icon-set/Error_filled_lg.svg b/packages/icons/icon-set/Error_filled_lg.svg new file mode 100644 index 000000000..0890c3c8d --- /dev/null +++ b/packages/icons/icon-set/Error_filled_lg.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_filled_md.svg b/packages/icons/icon-set/Error_filled_md.svg new file mode 100644 index 000000000..6a4b1320a --- /dev/null +++ b/packages/icons/icon-set/Error_filled_md.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_filled_sm.svg b/packages/icons/icon-set/Error_filled_sm.svg new file mode 100644 index 000000000..9996661b6 --- /dev/null +++ b/packages/icons/icon-set/Error_filled_sm.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_filled_xl.svg b/packages/icons/icon-set/Error_filled_xl.svg new file mode 100644 index 000000000..0fae7c5a4 --- /dev/null +++ b/packages/icons/icon-set/Error_filled_xl.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_filled_xs.svg b/packages/icons/icon-set/Error_filled_xs.svg new file mode 100644 index 000000000..39725172e --- /dev/null +++ b/packages/icons/icon-set/Error_filled_xs.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_filled_xxs.svg b/packages/icons/icon-set/Error_filled_xxs.svg new file mode 100644 index 000000000..a4b10a51d --- /dev/null +++ b/packages/icons/icon-set/Error_filled_xxs.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/icons/icon-set/Error_lg.svg b/packages/icons/icon-set/Error_lg.svg new file mode 100644 index 000000000..844f1ba9f --- /dev/null +++ b/packages/icons/icon-set/Error_lg.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_md.svg b/packages/icons/icon-set/Error_md.svg new file mode 100644 index 000000000..49ec2a476 --- /dev/null +++ b/packages/icons/icon-set/Error_md.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_sm.svg b/packages/icons/icon-set/Error_sm.svg new file mode 100644 index 000000000..a3f34ee3e --- /dev/null +++ b/packages/icons/icon-set/Error_sm.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_xl.svg b/packages/icons/icon-set/Error_xl.svg new file mode 100644 index 000000000..52c6ed437 --- /dev/null +++ b/packages/icons/icon-set/Error_xl.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_xs.svg b/packages/icons/icon-set/Error_xs.svg new file mode 100644 index 000000000..980f6c2b3 --- /dev/null +++ b/packages/icons/icon-set/Error_xs.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/icon-set/Error_xxs.svg b/packages/icons/icon-set/Error_xxs.svg new file mode 100644 index 000000000..dded5d273 --- /dev/null +++ b/packages/icons/icon-set/Error_xxs.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/icons/icons-optimized/Error_filled_lg.svg b/packages/icons/icons-optimized/Error_filled_lg.svg new file mode 100644 index 000000000..8e25b3b35 --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_lg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_filled_md.svg b/packages/icons/icons-optimized/Error_filled_md.svg new file mode 100644 index 000000000..4beb08acc --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_md.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_filled_sm.svg b/packages/icons/icons-optimized/Error_filled_sm.svg new file mode 100644 index 000000000..414b627df --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_sm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_filled_xl.svg b/packages/icons/icons-optimized/Error_filled_xl.svg new file mode 100644 index 000000000..caffa6cc8 --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_xl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_filled_xs.svg b/packages/icons/icons-optimized/Error_filled_xs.svg new file mode 100644 index 000000000..a33a5b10f --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_xs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_filled_xxs.svg b/packages/icons/icons-optimized/Error_filled_xxs.svg new file mode 100644 index 000000000..85535c155 --- /dev/null +++ b/packages/icons/icons-optimized/Error_filled_xxs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_lg.svg b/packages/icons/icons-optimized/Error_lg.svg new file mode 100644 index 000000000..a3bf06e84 --- /dev/null +++ b/packages/icons/icons-optimized/Error_lg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_md.svg b/packages/icons/icons-optimized/Error_md.svg new file mode 100644 index 000000000..a910b9b4f --- /dev/null +++ b/packages/icons/icons-optimized/Error_md.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_sm.svg b/packages/icons/icons-optimized/Error_sm.svg new file mode 100644 index 000000000..bcd0bc1b1 --- /dev/null +++ b/packages/icons/icons-optimized/Error_sm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_xl.svg b/packages/icons/icons-optimized/Error_xl.svg new file mode 100644 index 000000000..246b7f4e7 --- /dev/null +++ b/packages/icons/icons-optimized/Error_xl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_xs.svg b/packages/icons/icons-optimized/Error_xs.svg new file mode 100644 index 000000000..790ca87aa --- /dev/null +++ b/packages/icons/icons-optimized/Error_xs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/Error_xxs.svg b/packages/icons/icons-optimized/Error_xxs.svg new file mode 100644 index 000000000..48749a95f --- /dev/null +++ b/packages/icons/icons-optimized/Error_xxs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/icons/icons-optimized/icons.ts b/packages/icons/icons-optimized/icons.ts index f2657cf9e..7a9e24a04 100644 --- a/packages/icons/icons-optimized/icons.ts +++ b/packages/icons/icons-optimized/icons.ts @@ -3475,6 +3475,142 @@ const blrEqualXxs = (className: string) => /> `; +const blrErrorFilledLg = (className: string) => + html` + + `; + +const blrErrorFilledMd = (className: string) => + html` + + `; + +const blrErrorFilledSm = (className: string) => + html` + + `; + +const blrErrorFilledXl = (className: string) => + html` + + `; + +const blrErrorFilledXs = (className: string) => + html` + + `; + +const blrErrorFilledXxs = (className: string) => + html` + + + + + + + `; + +const blrErrorLg = (className: string) => + html` + + `; + +const blrErrorMd = (className: string) => + html` + + `; + +const blrErrorSm = (className: string) => + html` + + `; + +const blrErrorXl = (className: string) => + html` + + `; + +const blrErrorXs = (className: string) => + html` + + `; + +const blrErrorXxs = (className: string) => + html` + + + + + + + `; + const blrEyeLg = (className: string) => html` Date: Tue, 6 Jun 2023 16:21:33 +0200 Subject: [PATCH 4/8] fix(ui-library): hide canvas preview in stories (#205) --- .../ui-library/src/components/icon-button/index.stories.ts | 6 ++++++ .../ui-library/src/components/icon-link/index.stories.ts | 6 ++++++ packages/ui-library/src/components/icon/index.stories.ts | 6 ++++++ packages/ui-library/src/components/link/index.stories.ts | 6 ++++++ packages/ui-library/src/components/loader/index.stories.ts | 6 ++++++ .../ui-library/src/components/text-button/index.stories.ts | 6 ++++++ .../ui-library/src/components/text-input/index.stories.ts | 6 ++++++ 7 files changed, 42 insertions(+) diff --git a/packages/ui-library/src/components/icon-button/index.stories.ts b/packages/ui-library/src/components/icon-button/index.stories.ts index f740f3139..96b272d37 100644 --- a/packages/ui-library/src/components/icon-button/index.stories.ts +++ b/packages/ui-library/src/components/icon-button/index.stories.ts @@ -23,6 +23,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrIconButton = ({ diff --git a/packages/ui-library/src/components/icon-link/index.stories.ts b/packages/ui-library/src/components/icon-link/index.stories.ts index 4d34f590d..f83845e0f 100644 --- a/packages/ui-library/src/components/icon-link/index.stories.ts +++ b/packages/ui-library/src/components/icon-link/index.stories.ts @@ -23,6 +23,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrIconLink = ({ diff --git a/packages/ui-library/src/components/icon/index.stories.ts b/packages/ui-library/src/components/icon/index.stories.ts index 34ab6fd2a..0b0de53d8 100644 --- a/packages/ui-library/src/components/icon/index.stories.ts +++ b/packages/ui-library/src/components/icon/index.stories.ts @@ -15,6 +15,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; const allIcons = getIconName(IconKeys); diff --git a/packages/ui-library/src/components/link/index.stories.ts b/packages/ui-library/src/components/link/index.stories.ts index 9ad07bce7..aef235acf 100644 --- a/packages/ui-library/src/components/link/index.stories.ts +++ b/packages/ui-library/src/components/link/index.stories.ts @@ -35,6 +35,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrLink = ({ label, diff --git a/packages/ui-library/src/components/loader/index.stories.ts b/packages/ui-library/src/components/loader/index.stories.ts index a961384ec..9e3cfd03c 100644 --- a/packages/ui-library/src/components/loader/index.stories.ts +++ b/packages/ui-library/src/components/loader/index.stories.ts @@ -15,6 +15,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrLoader = ({ size, variant, loadingStatus }: BlrLoaderClass) => diff --git a/packages/ui-library/src/components/text-button/index.stories.ts b/packages/ui-library/src/components/text-button/index.stories.ts index 7012116dd..af7abec12 100644 --- a/packages/ui-library/src/components/text-button/index.stories.ts +++ b/packages/ui-library/src/components/text-button/index.stories.ts @@ -27,6 +27,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrTextButton = ({ diff --git a/packages/ui-library/src/components/text-input/index.stories.ts b/packages/ui-library/src/components/text-input/index.stories.ts index 147e5a33d..16b21f419 100644 --- a/packages/ui-library/src/components/text-input/index.stories.ts +++ b/packages/ui-library/src/components/text-input/index.stories.ts @@ -27,6 +27,12 @@ export default { control: { type: 'select' }, }, }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, }; export const BlrTextInput = ({ From 7a8a4420e3afe218816b936e5ddcea64ba4399cf Mon Sep 17 00:00:00 2001 From: Kundan <63604244+kundan0887@users.noreply.github.com> Date: Wed, 7 Jun 2023 10:28:50 +0200 Subject: [PATCH 5/8] Feature: Select component (#178) * feat(ui-library): select component * fix(ui-library): snapshot * fix(ui-library): correct error icon * fix(ui-library): made icons typesafe for internal use * fix(ui-library): minor stuff * fix(ui-library): exctracted icon rendering to function * fix(ui-library): use functional component in story * fix(ui-library): more typesafe things * fix(ui-library): refactored regex to use sizes array * fix(ui-library): added ability to diable pointer events to icons * fix(ui-library): prevent icon from blocking clicks on select * fix(ui-library): deactivated canvas preview for select component * fix(ui-library): my fault * fix(ui-library): minor * fix(ui-library): snapshot --------- Co-authored-by: christian.b.hoffmann --- .../src/components/icon-button/index.ts | 20 +- .../tests/__snapshots__/index.test.snap.js | 14 ++ .../src/components/icon/index.stories.ts | 20 +- .../ui-library/src/components/icon/index.ts | 36 ++- .../internal-components/form-label/index.ts | 4 +- .../src/components/select/index.css.ts | 16 ++ .../src/components/select/index.stories.ts | 108 +++++++++ .../ui-library/src/components/select/index.ts | 163 ++++++++++++++ .../src/components/select/indexReact.ts | 14 ++ .../test/__snapshots__/index.test.snap.js | 211 ++++++++++++++++++ .../src/components/select/test/index.test.ts | 25 +++ .../src/components/text-input/index.ts | 8 +- .../test/__snapshots__/index.test.snap.js | 82 ++++++- .../__component-tokens.generated.js | 2 +- .../__semantic-tokens.generated.js | 2 +- .../_border-radius.generated.scss | 2 +- .../_border-width.generated.scss | 2 +- .../_tokens-generated/_color.generated.scss | 2 +- .../_font-families.generated.scss | 2 +- .../_font-sizes.generated.scss | 2 +- .../_font-weights.generated.scss | 2 +- .../_letter-spacing.generated.scss | 2 +- .../_line-heights.generated.scss | 2 +- .../_pargraph-spacing.generated.scss | 2 +- .../__component-config.generated.js | 2 +- .../foundation/semantic-tokens/form.css.js | 21 +- .../src/utils/calculate-icon-name.ts | 29 ++- 27 files changed, 743 insertions(+), 52 deletions(-) create mode 100644 packages/ui-library/src/components/select/index.css.ts create mode 100644 packages/ui-library/src/components/select/index.stories.ts create mode 100644 packages/ui-library/src/components/select/index.ts create mode 100644 packages/ui-library/src/components/select/indexReact.ts create mode 100644 packages/ui-library/src/components/select/test/__snapshots__/index.test.snap.js create mode 100644 packages/ui-library/src/components/select/test/index.test.ts diff --git a/packages/ui-library/src/components/icon-button/index.ts b/packages/ui-library/src/components/icon-button/index.ts index 5209b4953..43a5dcb6c 100644 --- a/packages/ui-library/src/components/icon-button/index.ts +++ b/packages/ui-library/src/components/icon-button/index.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit'; +import { LitElement, html, nothing } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property } from 'lit/decorators.js'; import { IconType } from '@boiler/icons'; @@ -32,20 +32,20 @@ export class BlrIconButton extends LitElement { const loaderVariant = determineLoaderVariant(this.variant); return html``; } } diff --git a/packages/ui-library/src/components/icon-button/tests/__snapshots__/index.test.snap.js b/packages/ui-library/src/components/icon-button/tests/__snapshots__/index.test.snap.js index 5cf94fdc5..b0483d294 100644 --- a/packages/ui-library/src/components/icon-button/tests/__snapshots__/index.test.snap.js +++ b/packages/ui-library/src/components/icon-button/tests/__snapshots__/index.test.snap.js @@ -16,3 +16,17 @@ snapshots['blr-icon-button renders correctly'] = `
+export const BlrIcon = ({ size }: BlrIconClass) => { + const classes = classMap({ + 'icon-gallery-layout': true, + }); + + return html`
    ${allIcons.map((icon) => { - return html`
  • - + return html`
  • + ${BlrIconRenderFunction({ icon: calculateIconName(icon as string, size), size: size, classMap: classes })} ${icon}
    • `; })}
`; +}; BlrIcon.storyName = 'BlrIcon'; diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts index c6f57afee..8a2523643 100644 --- a/packages/ui-library/src/components/icon/index.ts +++ b/packages/ui-library/src/components/icon/index.ts @@ -2,9 +2,11 @@ import { LitElement, html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { IconMapping, IconType } from '@boiler/icons'; import { icon } from '../../foundation/component-tokens/ui.css'; -// import { Sizes } from '../../globals/constants'; import { styleCustom } from './index.css'; import { SizesType } from '../../globals/types'; +import { DirectiveResult } from 'lit-html/directive'; +import { ClassMapDirective } from 'lit-html/directives/class-map'; +import { styleMap } from 'lit/directives/style-map.js'; @customElement('blr-icon') export class BlrIcon extends LitElement { @@ -13,7 +15,7 @@ export class BlrIcon extends LitElement { @property() icon!: IconType; @property() size!: SizesType; - render() { + protected render() { if (IconMapping.hasOwnProperty(this.icon) && typeof IconMapping[this.icon] === 'function') { return html`${IconMapping[this.icon](`blr-icon ${this.size.toLowerCase()}`)}`; } else { @@ -21,3 +23,33 @@ export class BlrIcon extends LitElement { } } } + +// BlrIconType is a new Type containing all properties of BlrIcon without the properties of LitElement +// and some additional properties which are not part of the component +export type BlrIconType = Partial> & { + classMap?: DirectiveResult; + onClick?: HTMLElement['onclick']; + hideAria?: boolean; + name?: string; + disablePointerEvents?: boolean; +}; + +export const BlrIconRenderFunction = ({ + icon, + size, + classMap, + onClick, + hideAria, + name, + disablePointerEvents, +}: BlrIconType) => { + return html``; +}; diff --git a/packages/ui-library/src/components/internal-components/form-label/index.ts b/packages/ui-library/src/components/internal-components/form-label/index.ts index b1aa4e32b..ed9bc4279 100644 --- a/packages/ui-library/src/components/internal-components/form-label/index.ts +++ b/packages/ui-library/src/components/internal-components/form-label/index.ts @@ -1,4 +1,4 @@ -import { html } from 'lit'; +import { html, nothing } from 'lit'; import { InputSizesType } from '../../../globals/types'; type FormLabelType = { @@ -17,7 +17,7 @@ export const BlrFormLabel = ({ return html` `; }; diff --git a/packages/ui-library/src/components/select/index.css.ts b/packages/ui-library/src/components/select/index.css.ts new file mode 100644 index 000000000..0e7d1e8c3 --- /dev/null +++ b/packages/ui-library/src/components/select/index.css.ts @@ -0,0 +1,16 @@ +import { css } from 'lit'; + +export const styleCustom = css` + .blr-select { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + } + + .blr-select-option { + display: flex; + flex-direction: column; + align-items: flex-start; + } +`; diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts new file mode 100644 index 000000000..f18718b01 --- /dev/null +++ b/packages/ui-library/src/components/select/index.stories.ts @@ -0,0 +1,108 @@ +/* eslint-disable no-console */ +import { html } from 'lit-html'; +import { BlrSelectRenderFunction, BlrSelectType } from './index'; +import { FormSizes } from '../../globals/constants'; +import { IconKeys } from '@boiler/icons'; +import { getIconName } from '../../utils/get-icon-name'; +import './index'; + +export default { + title: 'BlrSelect', + argTypes: { + size: { + options: FormSizes, + control: { type: 'select' }, + }, + trailingIcon: { + options: [...getIconName(IconKeys)], + control: { type: 'select' }, + }, + hintIcon: { + options: [...getIconName(IconKeys)], + control: { type: 'select' }, + }, + options: { + control: 'array', + options: [ + { value: 'uschi', label: 'Uschi', selected: false, disabled: false }, + { value: '1', label: 'Option 1', selected: false, disabled: false }, + { value: '2', label: 'Option 2', selected: true, disabled: false }, + { value: 'dieter', label: 'Dieter', selected: true, disabled: false }, + ], + }, + onChange: { + action: 'onChange', + description: '(@change)="onChange($event)"', + }, + }, + parameters: { + previewTabs: { + canvas: { hidden: true }, + }, + viewMode: 'docs', + }, +}; + +export const BlrSelect = ({ + selectId, + onChange, + name, + options, + disabled, + size, + required, + errorMessage, + hint, + hintIcon, + hasError, + labelAppendix, + showTrailingIcon, + trailingIcon, + hasLabel, + label, +}: BlrSelectType) => + html` + ${BlrSelectRenderFunction({ + selectId, + onChange, + name, + options, + disabled, + size, + required, + errorMessage, + hint, + hintIcon, + hasError, + labelAppendix, + showTrailingIcon, + trailingIcon, + hasLabel, + label, + })} + `; + +BlrSelect.storyName = 'BlrSelect'; + +BlrSelect.args = { + name: 'Text Input', + hasLabel: true, + label: 'Label', + labelAppendix: '(Optional)', + showTrailingIcon: true, + size: 'md', + hasError: false, + errorMessage: 'This is error message', + disabled: false, + required: false, + hint: 'Field is used for hint', + hintIcon: 'blrInfo', + selectId: 'Peter', + trailingIcon: 'blr360', + options: [ + { value: 'uschi', label: 'Uschi', disabled: true }, + { value: '1', label: 'Option 1' }, + { value: '2', label: 'Option 2', selected: true }, + { value: 'dieter', label: 'Dieter' }, + ], +}; diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts new file mode 100644 index 000000000..5ba39654f --- /dev/null +++ b/packages/ui-library/src/components/select/index.ts @@ -0,0 +1,163 @@ +import { LitElement, html, nothing } from 'lit'; +import { ClassMapDirective, classMap } from 'lit/directives/class-map.js'; +import { customElement, property } from 'lit/decorators.js'; +import { styleCustom } from './index.css'; +import { FormSizesType } from '../../globals/types'; +import { BlrFormLabel } from '../internal-components/form-label'; +import { BlrFormHint } from '../internal-components/form-hint'; + +import { IconType } from '@boiler/icons'; +import { form } from '../../foundation/semantic-tokens/form.css'; +import { calculateIconName } from '../../utils/calculate-icon-name'; +import { DirectiveResult } from 'lit-html/directive'; +import { BlrIconRenderFunction } from '../icon'; + +type Option = { + value: string; + label: string; + selected?: boolean; + disabled?: boolean; +}; + +@customElement('blr-select') +export class BlrSelect extends LitElement { + static styles = [styleCustom, form]; + + @property() selectId!: string; + @property() labelAppendix?: string; + @property() name!: string; + @property() hasLabel?: boolean; + @property() label!: string; + @property() disabled?: boolean; + @property() size: FormSizesType = 'md'; + @property() required?: boolean; + @property() onChange?: HTMLElement['oninput']; + @property({ type: Array }) options: Option[] = []; + @property() hasError?: boolean; + @property() errorMessage?: string; + @property() hint?: string; + @property() hintIcon: IconType = 'blrInfoSm'; + @property() showTrailingIcon?: boolean; + @property() trailingIcon: IconType = 'blr360Sm'; + + protected renderTrailingIcon(classes: DirectiveResult) { + if (this.showTrailingIcon) { + if (this.hasError) { + return html`${BlrIconRenderFunction({ + icon: 'blrErrorFilledSm', + size: this.size, + classMap: classes, + hideAria: true, + disablePointerEvents: true, + })}`; + } else { + return html`${BlrIconRenderFunction({ + icon: calculateIconName(this.trailingIcon, this.size), + size: this.size, + classMap: classes, + hideAria: true, + disablePointerEvents: true, + })}`; + } + } + + return nothing; + } + + protected render() { + const classes = classMap({ + [`${this.size}`]: this.size || 'md', + disabled: this.disabled || false, + }); + + const inputClasses = classMap({ + 'error': this.hasError || false, + 'error-input': this.hasError || false, + [`${this.size}`]: this.size || 'md', + }); + + return html` +
+ ${this.hasLabel + ? BlrFormLabel({ + labelText: this.label, + labelAppendix: this.labelAppendix, + labelSize: 'md', + forValue: this.selectId, + }) + : nothing} +
+ + + ${this.renderTrailingIcon(inputClasses)} +
+ ${BlrFormHint({ + message: (this.hasError ? this.errorMessage : this.hint) || 'This is dummy message', + variant: this.hasError ? 'error' : 'hint', + size: 'sm', + iconName: calculateIconName(this.hintIcon, this.size), + })} +
+ `; + } +} + +export type BlrSelectType = Omit; + +export const BlrSelectRenderFunction = ({ + selectId, + labelAppendix, + name, + hasLabel, + label, + disabled, + size, + required, + onChange, + options, + hasError, + errorMessage, + hint, + hintIcon, + showTrailingIcon, + trailingIcon, +}: BlrSelectType) => { + return html``; +}; diff --git a/packages/ui-library/src/components/select/indexReact.ts b/packages/ui-library/src/components/select/indexReact.ts new file mode 100644 index 000000000..d97d83e3a --- /dev/null +++ b/packages/ui-library/src/components/select/indexReact.ts @@ -0,0 +1,14 @@ +import React from 'react'; +import { createComponent, EventName } from '@lit-labs/react'; + +import { BlrSelect } from '.'; + +export const BlrSelectReact = createComponent({ + tagName: 'blr-select', + elementClass: BlrSelect, + react: React, + events: { + onInput: 'pointerdown' as EventName, + onFocus: 'pointerdown' as EventName, + }, +}); diff --git a/packages/ui-library/src/components/select/test/__snapshots__/index.test.snap.js b/packages/ui-library/src/components/select/test/__snapshots__/index.test.snap.js new file mode 100644 index 000000000..fb0d80890 --- /dev/null +++ b/packages/ui-library/src/components/select/test/__snapshots__/index.test.snap.js @@ -0,0 +1,211 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots['blr-text-input renders correctly'] = ` +`; +/* end snapshot blr-text-input renders correctly */ + +snapshots['blr-select renders correctly'] = `
+ + + + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+ + + + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+ +
+ +
+ + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+ +
+ +
+ + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+
+ +
+ + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+
+ +
+ + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ +snapshots['blr-select renders correctly'] = `
+
+ +
+ + + + + This is dummy message + + +
+`; +/* end snapshot blr-select renders correctly */ diff --git a/packages/ui-library/src/components/select/test/index.test.ts b/packages/ui-library/src/components/select/test/index.test.ts new file mode 100644 index 000000000..af2584457 --- /dev/null +++ b/packages/ui-library/src/components/select/test/index.test.ts @@ -0,0 +1,25 @@ +/* eslint-disable @typescript-eslint/await-thenable */ +import '../index'; +import { fixture, expect } from '@open-wc/testing'; + +describe('blr-select', () => { + it('renders correctly', async () => { + const element = await fixture(` + + `); + + await expect(element).shadowDom.to.equalSnapshot(); + }); +}); diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts index 7089bc40e..7440d4ce7 100644 --- a/packages/ui-library/src/components/text-input/index.ts +++ b/packages/ui-library/src/components/text-input/index.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit'; +import { LitElement, html, nothing } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { customElement, property, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; @@ -99,7 +99,7 @@ export class BlrTextInput extends LitElement { size="sm" aria-hidden >` - : html``} + : nothing} ${wasInitialPasswordField ? html`` - : html``} + : nothing}
${this.showHint ? html` @@ -120,7 +120,7 @@ export class BlrTextInput extends LitElement { size: this.size, })} ` - : html``} + : nothing} `; } diff --git a/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js b/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js index 028138016..9820c3436 100644 --- a/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js +++ b/packages/ui-library/src/components/text-input/test/__snapshots__/index.test.snap.js @@ -90,8 +90,47 @@ snapshots['blr-text-input renders correctly'] = `
Test Input Name - + +
+ + + +
+ + + + + +
+`; +/* end snapshot blr-text-input renders correctly */ +snapshots['blr-text-input renders correctly'] = `
+
+ +
+ + + +
+ + + + + + +
+`; +/* end snapshot blr-text-input renders correctly */ diff --git a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.generated.js index 1f024309a..026e18be3 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__component-tokens.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:17 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ export const componentTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.generated.js b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.generated.js index 8bfb8a441..33dd44ad6 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:17 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ export const semanticTokens = { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss index c4b248363..4dcaea6b5 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:52 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss index 5556ced7e..7f6444190 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:52 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss index 60b0c02fb..31f236c55 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss index 9058423cf..d5dd2876a 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:52 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss index 5c663f44e..59deab744 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss index 0ca309d92..f22f6657f 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_font-weights.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss index 9bd899250..58231844a 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_letter-spacing.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss index 248cf839c..ce23ac178 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_line-heights.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss index 8435ca39a..b256d5725 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss +++ b/packages/ui-library/src/foundation/_tokens-generated/_pargraph-spacing.generated.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:16 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ :root { diff --git a/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js index e3bd225d9..a82d6931d 100644 --- a/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js +++ b/packages/ui-library/src/foundation/_tokens-generated/config-tokens/__component-config.generated.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 31 May 2023 16:00:17 GMT + * Generated on Fri, 02 Jun 2023 10:34:53 GMT */ export const componentConfig = { diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.js b/packages/ui-library/src/foundation/semantic-tokens/form.css.js index bc333b7c6..767e879f0 100644 --- a/packages/ui-library/src/foundation/semantic-tokens/form.css.js +++ b/packages/ui-library/src/foundation/semantic-tokens/form.css.js @@ -12,6 +12,8 @@ const forms = { export const form = css` .blr-form-element { + all: initial; + color: ${Forms.UserInput.Default.Rest}; font-weight: ${Forms.MD.UserInput.fontWeight}; font-size: ${Forms.MD.UserInput.fontSize}; font-family: ${Forms.MD.UserInput.fontFamily}, sans-serif; @@ -62,6 +64,8 @@ export const form = css` border-width: ${Forms.Input.Default.Disabled.width}; border-style: ${Forms.Input.Default.Disabled.style}; border-color: ${Forms.Input.Default.Disabled.color}; + background-color: ${Forms.SurfaceFill.Default.Disabled}; + color: ${Forms.UserInput.Default.Disabled}; &::placeholder { color: ${Forms.Placeholder.Default.Disabled}; @@ -129,7 +133,15 @@ export const form = css` } .blr-input-icon { - margin-left: -25px; + &.sm { + margin-left: -25px; + } + &.md { + margin-left: -32px; + } + &.lg { + margin-left: -40px; + } color: ${Forms.Placeholder.Default.Rest}; } @@ -149,6 +161,7 @@ export const form = css` padding-bottom: ${Forms.LG.LabelSlot.Padding}; } } + .blr-form-hint { display: flex; align-items: center; @@ -227,21 +240,21 @@ export const form = css` } } .blr-form-label-appendix { - padding-left: ${Forms.MD.LabelSlot.Padding}; + padding-left: ${Forms.MD.LabelSlot.ItemSpacing}; font-weight: ${Forms.MD.LabelAppendix.fontWeight}; font-size: ${Forms.MD.LabelAppendix.fontSize}; font-family: ${Forms.MD.LabelAppendix.fontFamily}, sans-serif; line-height: ${Forms.MD.LabelAppendix.lineHeight}; color: ${Forms.LabelAppendix.Rest}; &.sm { - padding-left: ${Forms.SM.LabelSlot.Padding}; + padding-left: ${Forms.SM.LabelSlot.ItemSpacing}; font-weight: ${Forms.SM.LabelAppendix.fontWeight}; font-size: ${Forms.SM.LabelAppendix.fontSize}; font-family: ${Forms.MD.LabelAppendix.fontFamily}, sans-serif; line-height: ${Forms.MD.LabelAppendix.lineHeight}; } &.lg { - padding-left: ${Forms.LG.LabelSlot.Padding}; + padding-left: ${Forms.LG.LabelSlot.ItemSpacing}; font-weight: ${Forms.LG.LabelAppendix.fontWeight}; font-size: ${Forms.LG.LabelAppendix.fontSize}; font-family: ${Forms.LG.LabelAppendix.fontFamily}, sans-serif; diff --git a/packages/ui-library/src/utils/calculate-icon-name.ts b/packages/ui-library/src/utils/calculate-icon-name.ts index f4d331079..ad9eabb50 100644 --- a/packages/ui-library/src/utils/calculate-icon-name.ts +++ b/packages/ui-library/src/utils/calculate-icon-name.ts @@ -1,7 +1,11 @@ -import { IconKeys } from '@boiler/icons'; +import { IconKeys, IconType } from '@boiler/icons'; import { SizesType } from '../globals/types'; +import { Sizes } from '../globals/constants'; -const capturingRegex = /(?Xxs|Xs|Sm|Md|Lg|Xl)/; +// 'Xxs|Xs|Sm|Md|Lg|Xl' but from same source as the type def +const keyws = Sizes.map((a) => a.charAt(0).toUpperCase() + a.substring(1)).join('|'); +// /(?Xxs|Xs|Sm|Md|Lg|Xl)/; +const capturingRegex = new RegExp('(?' + keyws + ')'); const hasIconSize = (icon: string) => IconKeys.includes(icon); @@ -22,13 +26,22 @@ export const calculateIconName = (icon: string | undefined, size: SizesType) => if (!icon) { return undefined; } - const formattedIcon = `${icon.toString()}${size.charAt(0).toUpperCase() + size.slice(1)}`; - return hasIconSize(formattedIcon) ? formattedIcon : getIconReplacement(icon); + const formattedIconKey = icon.toString() + size.charAt(0).toUpperCase() + size.slice(1); + + if (IconKeys.indexOf(formattedIconKey) !== -1 && hasIconSize(formattedIconKey)) { + return formattedIconKey as IconType; + } else { + return getIconReplacement(icon); + } }; -export const getIconReplacement = (icon: string) => { +export const getIconReplacement = (icon: string): IconType | undefined => { const sizeSubstitute = getSizeSubstitute(icon); - return sizeSubstitute - ? `${icon.toString()}${sizeSubstitute.charAt(0).toUpperCase() + sizeSubstitute.slice(1)}` - : 'Icon Does not exist in this size'; + const iconKey = icon.toString() + sizeSubstitute?.charAt(0).toUpperCase() + sizeSubstitute?.slice(1); + + if (IconKeys.indexOf(iconKey) !== -1 && sizeSubstitute) { + return iconKey as IconType; + } + + return undefined; }; From e5911da7b623173488e8789048ce1234faba40cd Mon Sep 17 00:00:00 2001 From: m-nti <117906965+m-nti@users.noreply.github.com> Date: Wed, 7 Jun 2023 13:54:39 +0200 Subject: [PATCH 6/8] design/checkbox radio tokens (#207) * feat(tokens): adds token paths to the descriptions of tokens * docs(tokens): adds more descriptions * docs(tokens): adds more descriptions * feat(tokens): removes semantic control styles in Forms * feat(tokens): moves and splits Forms control borders, now in CMP * feat(tokens): updates checkbox border tokens * feat(tokens): removes error from selected variants * feat(tokens): adds radio tokens * refactor(tokens): updates brand to Brand * feat(tokens): updates radio borders (for now) --- .../input/tokens/semantics/BLR_CMP.json | 582 +++++++++++++----- .../input/tokens/semantics/BLR_SEM.json | 156 +---- 2 files changed, 421 insertions(+), 317 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json b/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json index 6a67d09dd..4b5e5925e 100644 --- a/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json +++ b/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json @@ -565,7 +565,7 @@ "Background": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Background}", + "color": "{Feedback.Brand.Default.Shape.Background}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -573,7 +573,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Background}", + "color": "{Feedback.Brand.Inverted.Shape.Background}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -583,7 +583,7 @@ "Foreground": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Foreground}", + "color": "{Feedback.Brand.Default.Shape.Foreground}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -591,7 +591,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Foreground}", + "color": "{Feedback.Brand.Inverted.Shape.Foreground}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -611,7 +611,7 @@ "Background": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Background}", + "color": "{Feedback.Brand.Default.Shape.Background}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -619,7 +619,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Background}", + "color": "{Feedback.Brand.Inverted.Shape.Background}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -629,7 +629,7 @@ "Foreground": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Foreground}", + "color": "{Feedback.Brand.Default.Shape.Foreground}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -637,7 +637,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Foreground}", + "color": "{Feedback.Brand.Inverted.Shape.Foreground}", "width": "{core.dimensionPX.2}", "style": "solid" }, @@ -657,7 +657,7 @@ "Background": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Background}", + "color": "{Feedback.Brand.Default.Shape.Background}", "width": "{core.dimensionPX.3}", "style": "solid" }, @@ -665,7 +665,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Background}", + "color": "{Feedback.Brand.Inverted.Shape.Background}", "width": "{core.dimensionPX.3}", "style": "solid" }, @@ -675,7 +675,7 @@ "Foreground": { "Default": { "value": { - "color": "{Feedback.brand.Default.Shape.Foreground}", + "color": "{Feedback.Brand.Default.Shape.Foreground}", "width": "{core.dimensionPX.3}", "style": "solid" }, @@ -683,7 +683,7 @@ }, "Inverted": { "value": { - "color": "{Feedback.brand.Inverted.Shape.Foreground}", + "color": "{Feedback.Brand.Inverted.Shape.Foreground}", "width": "{core.dimensionPX.3}", "style": "solid" }, @@ -827,6 +827,66 @@ "Error": { "value": "{core.dimensionPX.16}", "type": "sizing" + }, + "Fill": { + "Rest": { + "value": "{q.surface.brand.primary.rest}", + "type": "color" + }, + "Hover": { + "value": "{q.surface.brand.primary.hover}", + "type": "color" + }, + "Pressed": { + "value": "{q.surface.brand.primary.pressed}", + "type": "color" + }, + "Focus": { + "value": "{q.surface.brand.primary.rest}", + "type": "color" + }, + "Disabled": { + "value": "{q.surface.disabled.alpha}", + "type": "color" + }, + "ReadOnly": { + "value": "{q.surface.disabled.alpha}", + "type": "color" + }, + "Error": { + "value": "{q.stroke.error}", + "type": "color" + } + }, + "Stroke": { + "Rest": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Hover": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Pressed": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Focus": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Disabled": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "ReadOnly": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Error": { + "value": "{core.color.neutral.transparent}", + "type": "color" + } } }, "Selected": { @@ -853,66 +913,58 @@ "ReadOnly": { "value": "{core.dimensionPX.16}", "type": "sizing" - } - }, - "Fill": { - "Rest": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Hover": { - "value": "{q.surface.brand.primary.hover}", - "type": "color" - }, - "Pressed": { - "value": "{q.surface.brand.primary.pressed}", - "type": "color" - }, - "Focus": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Disabled": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.stroke.error}", - "type": "color" - } - }, - "Stroke": { - "Rest": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Hover": { - "value": "{q.surface.brand.primary.hover}", - "type": "color" - }, - "Pressed": { - "value": "{q.surface.brand.primary.pressed}", - "type": "color" - }, - "Focus": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Disabled": { - "value": "{q.surface.disabled.alpha}", - "type": "color" }, - "ReadOnly": { - "value": "{q.surface.disabled.alpha}", - "type": "color" + "Fill": { + "Rest": { + "value": "{q.surface.brand.primary.rest}", + "type": "color" + }, + "Hover": { + "value": "{q.surface.brand.primary.hover}", + "type": "color" + }, + "Pressed": { + "value": "{q.surface.brand.primary.pressed}", + "type": "color" + }, + "Focus": { + "value": "{q.surface.brand.primary.rest}", + "type": "color" + }, + "Disabled": { + "value": "{q.surface.disabled.alpha}", + "type": "color" + }, + "ReadOnly": { + "value": "{q.surface.disabled.alpha}", + "type": "color" + } }, - "Error": { - "value": "{q.stroke.error}", - "type": "color" + "Stroke": { + "Rest": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Hover": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Pressed": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Focus": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Disabled": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "ReadOnly": { + "value": "{core.color.neutral.transparent}", + "type": "color" + } } } }, @@ -945,6 +997,66 @@ "Error": { "value": "{core.dimensionPX.14}", "type": "sizing" + }, + "Fill": { + "Rest": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Hover": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Pressed": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Focus": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Disabled": { + "value": "{q.content.ondisabled.inverted}", + "type": "color" + }, + "ReadOnly": { + "value": "{q.content.ondisabled.inverted}", + "type": "color" + }, + "Error": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + } + }, + "Stroke": { + "Rest": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Hover": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Pressed": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Focus": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Disabled": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "ReadOnly": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Error": { + "value": "{core.color.neutral.transparent}", + "type": "color" + } } }, "Selected": { @@ -971,37 +1083,117 @@ "ReadOnly": { "value": "{core.dimensionPX.6}", "type": "sizing" + }, + "Fill": { + "Rest": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Hover": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Pressed": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Focus": { + "value": "{q.content.onbrand.alpha}", + "type": "color" + }, + "Disabled": { + "value": "{q.content.ondisabled.inverted}", + "type": "color" + }, + "ReadOnly": { + "value": "{q.content.ondisabled.inverted}", + "type": "color" + } + }, + "Stroke": { + "Rest": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Hover": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Pressed": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Focus": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "Disabled": { + "value": "{core.color.neutral.transparent}", + "type": "color" + }, + "ReadOnly": { + "value": "{core.color.neutral.transparent}", + "type": "color" + } } + } + }, + "Unselected": { + "Rest": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Rest}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" }, - "Fill": { - "Rest": { - "value": "{q.content.onbrand.alpha}", - "type": "color" + "Hover": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Hover}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "Hover": { - "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "border" + }, + "Pressed": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Pressed}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "Pressed": { - "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "border" + }, + "Focus": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Focus}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "Focus": { - "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "border" + }, + "Disabled": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Disabled}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "Disabled": { - "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "border" + }, + "ReadOnly": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.ReadOnly}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "ReadOnly": { - "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "border" + }, + "Error": { + "value": { + "color": "{Forms.Radio.Control.Background.Unselected.Fill.Error}", + "width": "{core.dimensionPX.1}", + "style": "solid" }, - "Error": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - } + "type": "border" } } }, @@ -1087,61 +1279,75 @@ "Fill": { "Rest": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Rest" }, "Hover": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Hover" }, "Pressed": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Pressed" }, "Focus": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Focus" }, "Disabled": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Disabled" }, "ReadOnly": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.ReadOnly" }, "Error": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Fill.Error" } }, "Stroke": { "Rest": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Rest" }, "Hover": { "value": "{q.surface.brand.primary.hover}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Hover" }, "Pressed": { "value": "{q.surface.brand.primary.pressed}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Pressed" }, "Focus": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Focus" }, "Disabled": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Disabled" }, "ReadOnly": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.ReadOnly" }, "Error": { "value": "{q.stroke.error}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Unselected.Stroke.Error" } } }, @@ -1173,68 +1379,65 @@ "Fill": { "Rest": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.Rest\n//\nalso applies to indeterminate" }, "Hover": { "value": "{q.surface.brand.primary.hover}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.Hover\n//\nalso applies to indeterminate" }, "Pressed": { "value": "{q.surface.brand.primary.pressed}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.Pressed\n//\nalso applies to indeterminate" }, "Focus": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.Focus\n//\nalso applies to indeterminate" }, "Disabled": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.Disabled\n//\nalso applies to indeterminate" }, "ReadOnly": { "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.stroke.error}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Background.Selected.Fill.ReadOnly\n//\nalso applies to indeterminate" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.Rest\n//\nalso applies to indeterminate" }, "Hover": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.Hover\n//\nalso applies to indeterminate" }, "Pressed": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.Pressed\n//\nalso applies to indeterminate" }, "Focus": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.Focus\n//\nalso applies to indeterminate" }, "Disabled": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.Disabled\n//\nalso applies to indeterminate" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" - }, - "Error": { - "value": "{core.color.neutral.transparent}", - "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Background.Selected.Stroke.ReadOnly\n//\nalso applies to indeterminate" } } }, @@ -1299,69 +1502,69 @@ "Rest": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Focus" }, "Disabled": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.ReadOnly" }, "Error": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Fill.Error" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.Focus" }, "Disabled": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Unselected.Stroke.ReadOnly" }, "Error": { "value": "{core.color.neutral.transparent}", @@ -1398,68 +1601,65 @@ "Fill": { "Rest": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.Rest\n//\nalso applies to indeterminate" }, "Hover": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.Hover\n//\nalso applies to indeterminate" }, "Pressed": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.Pressed\n//\nalso applies to indeterminate" }, "Focus": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.Focus\n//\nalso applies to indeterminate" }, "Disabled": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.Disabled\n//\nalso applies to indeterminate" }, "ReadOnly": { "value": "{q.content.ondisabled.inverted}", - "type": "color" - }, - "Error": { - "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Checkbox.Control.Foreground.Selected.Fill.ReadOnly\n//\nalso applies to indeterminate" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.Rest\n//\nalso applies to indeterminate" }, "Hover": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.Hover\n//\nalso applies to indeterminate" }, "Pressed": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.Pressed\n//\nalso applies to indeterminate" }, "Focus": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.Focus\n//\nalso applies to indeterminate" }, "Disabled": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.Disabled\n//\nalso applies to indeterminate" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", "type": "color", - "description": "also applies to indeterminate" - }, - "Error": { - "value": "{core.color.neutral.transparent}", - "type": "color", - "description": "also applies to indeterminate" + "description": "Forms.Checkbox.Control.Foreground.Selected.Stroke.ReadOnly\n//\nalso applies to indeterminate" } } }, @@ -1493,6 +1693,64 @@ "IconSize": { "value": "SM", "type": "componentConfig" + }, + "Unselected": { + "Rest": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Rest}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "Hover": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Hover}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "Pressed": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Pressed}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "Focus": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Pressed}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "Disabled": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Disabled}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "ReadOnly": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.ReadOnly}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + }, + "Error": { + "value": { + "color": "{Forms.Checkbox.Control.Background.Unselected.Stroke.Error}", + "width": "{core.dimensionPX.1}", + "style": "solid" + }, + "type": "border" + } } }, "ControlBorderRadius": { diff --git a/packages/figma-design-tokens/input/tokens/semantics/BLR_SEM.json b/packages/figma-design-tokens/input/tokens/semantics/BLR_SEM.json index 47530dd04..f6c9d7587 100644 --- a/packages/figma-design-tokens/input/tokens/semantics/BLR_SEM.json +++ b/packages/figma-design-tokens/input/tokens/semantics/BLR_SEM.json @@ -1646,102 +1646,6 @@ "type": "color" } }, - "Control": { - "Background": { - "Fill": { - "Rest": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Hover": { - "value": "{q.surface.brand.primary.hover}", - "type": "color" - }, - "Pressed": { - "value": "{q.surface.brand.primary.pressed}", - "type": "color" - }, - "Focus": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Disabled": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.stroke.error}", - "type": "color" - } - }, - "Stroke": { - "Rest": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Hover": { - "value": "{q.surface.brand.primary.hover}", - "type": "color" - }, - "Pressed": { - "value": "{q.surface.brand.primary.pressed}", - "type": "color" - }, - "Focus": { - "value": "{q.surface.brand.primary.rest}", - "type": "color" - }, - "Disabled": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.surface.disabled.alpha}", - "type": "color" - }, - "Error": { - "value": "{q.stroke.error}", - "type": "color" - } - } - }, - "Foreground": { - "Fill": { - "Rest": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - }, - "Hover": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - }, - "Pressed": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - }, - "Focus": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - }, - "Disabled": { - "value": "{q.content.ondisabled.inverted}", - "type": "color" - }, - "ReadOnly": { - "value": "{q.content.ondisabled.inverted}", - "type": "color" - }, - "Error": { - "value": "{q.content.onbrand.alpha}", - "type": "color" - } - } - } - }, "LabelNextToControl": { "Rest": { "value": "{q.content.ondefault.alpha}", @@ -1771,64 +1675,6 @@ "value": "{q.content.ondefault.error}", "type": "color" } - }, - "Controls": { - "Rest": { - "value": { - "color": "{Forms.Control.Background.Fill.Rest}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "Hover": { - "value": { - "color": "{Forms.Control.Background.Fill.Hover}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "Pressed": { - "value": { - "color": "{Forms.Control.Background.Fill.Pressed}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "Focus": { - "value": { - "color": "{Forms.Control.Background.Fill.Focus}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "Disabled": { - "value": { - "color": "{Forms.Control.Background.Fill.Disabled}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "ReadOnly": { - "value": { - "color": "{Forms.Control.Background.Fill.ReadOnly}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - }, - "Error": { - "value": { - "color": "{Forms.Control.Background.Fill.Error}", - "width": "{core.dimensionPX.1}", - "style": "solid" - }, - "type": "border" - } } }, "Global": { @@ -1900,7 +1746,7 @@ "type": "color" } }, - "brand": { + "Brand": { "Default": { "Shape": { "Background": { From 782b1e7ba502dfab79c3010450da344df3a92b3b Mon Sep 17 00:00:00 2001 From: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com> Date: Wed, 7 Jun 2023 13:56:25 +0200 Subject: [PATCH 7/8] Comittlint fix (#208) * fix: no subject as intention * fix(all): enforce in commit message locally * fix(all): with scope test --- commitlint.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/commitlint.config.js b/commitlint.config.js index 0ef9d7484..30b411e7c 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -3,5 +3,6 @@ module.exports = { rules: { 'header-max-length': [2, 'always', 140], 'scope-enum': [2, 'always', ['all', 'ui-library', 'icons', 'figma-design-tokens', 'tokens', 'storybook']], + 'scope-empty': [2, 'never'], }, }; From 17ddf55abd20cbc1c6e546d522bead8347f74502 Mon Sep 17 00:00:00 2001 From: m-nti <117906965+m-nti@users.noreply.github.com> Date: Wed, 7 Jun 2023 14:29:29 +0200 Subject: [PATCH 8/8] design/Radio (#209) * docs(tokens): adds descriptions to radio * docs(tokens): adds more descriptions --- .../input/tokens/semantics/BLR_CMP.json | 156 ++++++++++++------ 1 file changed, 104 insertions(+), 52 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json b/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json index 4b5e5925e..120eeafb2 100644 --- a/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json +++ b/packages/figma-design-tokens/input/tokens/semantics/BLR_CMP.json @@ -831,61 +831,75 @@ "Fill": { "Rest": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Rest" }, "Hover": { "value": "{q.surface.brand.primary.hover}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Hover" }, "Pressed": { "value": "{q.surface.brand.primary.pressed}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Pressed" }, "Focus": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Focus" }, "Disabled": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Disabled" }, "ReadOnly": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.ReadOnly" }, "Error": { "value": "{q.stroke.error}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Fill.Error" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Focus" }, "Disabled": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.ReadOnly" }, "Error": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Unselected.Stroke.Error" } } }, @@ -917,53 +931,65 @@ "Fill": { "Rest": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.Rest" }, "Hover": { "value": "{q.surface.brand.primary.hover}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.Hover" }, "Pressed": { "value": "{q.surface.brand.primary.pressed}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.Pressed" }, "Focus": { "value": "{q.surface.brand.primary.rest}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.Focus" }, "Disabled": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.Disabled" }, "ReadOnly": { "value": "{q.surface.disabled.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Fill.ReadOnly" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.Focus" }, "Disabled": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Background.Selected.Stroke.ReadOnly" } } } @@ -1001,61 +1027,75 @@ "Fill": { "Rest": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Rest" }, "Hover": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Hover" }, "Pressed": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Pressed" }, "Focus": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Focus" }, "Disabled": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Disabled" }, "ReadOnly": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.ReadOnly" }, "Error": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Fill.Error" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Focus" }, "Disabled": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.ReadOnly" }, "Error": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Unselected.Stroke.Error" } } }, @@ -1087,53 +1127,65 @@ "Fill": { "Rest": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.Rest" }, "Hover": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.Hover" }, "Pressed": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.Pressed" }, "Focus": { "value": "{q.content.onbrand.alpha}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.Focus" }, "Disabled": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.Disabled" }, "ReadOnly": { "value": "{q.content.ondisabled.inverted}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Fill.ReadOnly" } }, "Stroke": { "Rest": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.Rest" }, "Hover": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.Hover" }, "Pressed": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.Pressed" }, "Focus": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.Pressed" }, "Disabled": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.Disabled" }, "ReadOnly": { "value": "{core.color.neutral.transparent}", - "type": "color" + "type": "color", + "description": "Forms.Radio.Control.Foreground.Selected.Stroke.ReadOnly" } } }