From fd92294a186e78e5de018cb61f196fa68767ae5c Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Fri, 8 Sep 2023 14:16:03 +0900 Subject: [PATCH 01/68] feat(react): add storyshot --- jest.setup.ts | 11 + packages/react/__mocks__/empty.ts | 1 + packages/react/__mocks__/file.ts | 3 + packages/react/__mocks__/style.ts | 1 + packages/react/jest.storyshots.config.mjs | 12 + packages/react/package.json | 1 + .../react/src/components/storyshots.test.js | 13 + packages/react/test.storyshots.js | 11 + packages/react/tsconfig.json | 2 +- yarn.lock | 309 +++++++++++++++++- 10 files changed, 361 insertions(+), 3 deletions(-) create mode 100644 packages/react/__mocks__/empty.ts create mode 100644 packages/react/__mocks__/file.ts create mode 100644 packages/react/__mocks__/style.ts create mode 100644 packages/react/jest.storyshots.config.mjs create mode 100644 packages/react/src/components/storyshots.test.js create mode 100644 packages/react/test.storyshots.js diff --git a/jest.setup.ts b/jest.setup.ts index c6c625001..4d2857927 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -5,3 +5,14 @@ globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({ unobserve: jest.fn(), disconnect: jest.fn(), })) + +window.matchMedia = jest.fn().mockImplementation((query: string) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), +})) diff --git a/packages/react/__mocks__/empty.ts b/packages/react/__mocks__/empty.ts new file mode 100644 index 000000000..ff8b4c563 --- /dev/null +++ b/packages/react/__mocks__/empty.ts @@ -0,0 +1 @@ +export default {}; diff --git a/packages/react/__mocks__/file.ts b/packages/react/__mocks__/file.ts new file mode 100644 index 000000000..185e2a0d5 --- /dev/null +++ b/packages/react/__mocks__/file.ts @@ -0,0 +1,3 @@ +const file = 'test-file-stub'; + +export default file; diff --git a/packages/react/__mocks__/style.ts b/packages/react/__mocks__/style.ts new file mode 100644 index 000000000..56004c9f9 --- /dev/null +++ b/packages/react/__mocks__/style.ts @@ -0,0 +1 @@ +export default {} \ No newline at end of file diff --git a/packages/react/jest.storyshots.config.mjs b/packages/react/jest.storyshots.config.mjs new file mode 100644 index 000000000..2616d7561 --- /dev/null +++ b/packages/react/jest.storyshots.config.mjs @@ -0,0 +1,12 @@ +import config from './jest.config.mjs' + + +export default { + ...config, + moduleNameMapper: { + ...config.moduleNameMapper, + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/file.ts', + '\\.(styl|css|less|scss)$': '/__mocks__/style.ts', + }, + testMatch: ['/**/storyshots.test.(js|jsx|ts|tsx)'], +} \ No newline at end of file diff --git a/packages/react/package.json b/packages/react/package.json index f51207b58..9dbc034df 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -21,6 +21,7 @@ "@react-types/switch": "^3.1.2", "@storybook/addon-actions": "^6.4.17", "@storybook/addon-knobs": "^6.4.0", + "@storybook/addon-storyshots": "6.4.17", "@storybook/addons": "^6.4.17", "@storybook/api": "^6.4.17", "@storybook/components": "^6.4.17", diff --git a/packages/react/src/components/storyshots.test.js b/packages/react/src/components/storyshots.test.js new file mode 100644 index 000000000..f472de5fd --- /dev/null +++ b/packages/react/src/components/storyshots.test.js @@ -0,0 +1,13 @@ +import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; +import { styleSheetSerializer } from 'jest-styled-components'; +import { join } from 'path'; + +initStoryshots({ + integrityOptions: { cwd: join("..", "..", __dirname) }, + snapshotExtension: ".snap", + snapshotSerializers: [styleSheetSerializer], + test: multiSnapshotWithOptions(), + getStoryshotFile() { + + } +}) diff --git a/packages/react/test.storyshots.js b/packages/react/test.storyshots.js new file mode 100644 index 000000000..7f542f192 --- /dev/null +++ b/packages/react/test.storyshots.js @@ -0,0 +1,11 @@ +import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; +import { styleSheetSerializer } from 'jest-styled-components'; +import { join } from 'path'; + +initStoryshots({ + snapshotSerializers: [styleSheetSerializer], + integrityOptions: { + cwd: join(__dirname, "src", "components") + }, + test: multiSnapshotWithOptions() +}) diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index ce897777d..b9ce3a35a 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "../../tsconfig.base.json", - "include": ["./src"] + "include": ["./src", "test.storyshots.js"] } diff --git a/yarn.lock b/yarn.lock index 38a560585..e21e004d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1722,6 +1722,7 @@ __metadata: "@react-types/switch": ^3.1.2 "@storybook/addon-actions": ^6.4.17 "@storybook/addon-knobs": ^6.4.0 + "@storybook/addon-storyshots": 6.4.17 "@storybook/addons": ^6.4.17 "@storybook/api": ^6.4.17 "@storybook/components": ^6.4.17 @@ -5291,6 +5292,83 @@ __metadata: languageName: node linkType: hard +"@storybook/addon-storyshots@npm:6.4.17": + version: 6.4.17 + resolution: "@storybook/addon-storyshots@npm:6.4.17" + dependencies: + "@jest/transform": ^26.6.2 + "@storybook/addons": 6.4.17 + "@storybook/babel-plugin-require-context-hook": 1.0.1 + "@storybook/client-api": 6.4.17 + "@storybook/core": 6.4.17 + "@storybook/core-client": 6.4.17 + "@storybook/core-common": 6.4.17 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@types/glob": ^7.1.3 + "@types/jest": ^26.0.16 + "@types/jest-specific-snapshot": ^0.5.3 + core-js: ^3.8.2 + glob: ^7.1.6 + global: ^4.4.0 + jest-specific-snapshot: ^4.0.0 + preact-render-to-string: ^5.1.19 + pretty-format: ^26.6.2 + react-test-renderer: ^16.8.0 || ^17.0.0 + read-pkg-up: ^7.0.1 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + peerDependencies: + "@angular/core": ">=6.0.0" + "@angular/platform-browser-dynamic": ">=6.0.0" + "@storybook/angular": "*" + "@storybook/react": "*" + "@storybook/vue": "*" + "@storybook/vue3": "*" + jest: "*" + jest-preset-angular: "*" + jest-vue-preprocessor: "*" + preact: ^10.5.13 + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + rxjs: "*" + svelte: "*" + vue: "*" + vue-jest: "*" + peerDependenciesMeta: + "@angular/core": + optional: true + "@angular/platform-browser-dynamic": + optional: true + "@storybook/angular": + optional: true + "@storybook/react": + optional: true + "@storybook/vue": + optional: true + "@storybook/vue3": + optional: true + jest-preset-angular: + optional: true + jest-vue-preprocessor: + optional: true + preact: + optional: true + react: + optional: true + react-dom: + optional: true + rxjs: + optional: true + svelte: + optional: true + vue: + optional: true + vue-jest: + optional: true + checksum: 52655fc543a5022d44ba08a148e48b61910ee87ecc253f8d6c4032b38ba77f2495bc6f5771d054d19cb6943bbc41a59b40f7d2557f3b4760ad24353786948b85 + languageName: node + linkType: hard + "@storybook/addon-storysource@npm:^6.4.17": version: 6.4.17 resolution: "@storybook/addon-storysource@npm:6.4.17" @@ -5470,6 +5548,13 @@ __metadata: languageName: node linkType: hard +"@storybook/babel-plugin-require-context-hook@npm:1.0.1": + version: 1.0.1 + resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" + checksum: 6f86f8b9218bedd21e4e18b9cdaa504c4393539bf2dcff3ea896a89b7e3b366ac0ec2bef43c539fb438d7c62e52e4274405eccb001315f5a7aff0e10c683fd3b + languageName: node + linkType: hard + "@storybook/builder-vite@npm:^0.2.2": version: 0.2.2 resolution: "@storybook/builder-vite@npm:0.2.2" @@ -6790,6 +6875,15 @@ __metadata: languageName: node linkType: hard +"@types/jest-specific-snapshot@npm:^0.5.3": + version: 0.5.6 + resolution: "@types/jest-specific-snapshot@npm:0.5.6" + dependencies: + "@types/jest": "*" + checksum: 3acfe6f586e478b17245443cd5f8b91b3e6be86969b32a3de7e2b7fcc34ad9a6718d8aecf493a8537fb5d42f9bd14be7e13ff16fa8fbc16fc2becd987e643586 + languageName: node + linkType: hard + "@types/jest@npm:*, @types/jest@npm:^27.4.0": version: 27.4.0 resolution: "@types/jest@npm:27.4.0" @@ -6800,6 +6894,16 @@ __metadata: languageName: node linkType: hard +"@types/jest@npm:^26.0.16": + version: 26.0.24 + resolution: "@types/jest@npm:26.0.24" + dependencies: + jest-diff: ^26.0.0 + pretty-format: ^26.0.0 + checksum: ae39675412f08d884926254e9b12bfd2b5a4e4d204c94d3148cb942174a474930d0c60540133c968f22241d4712b7940c96cbc883096eb326a4d5b206fb78bd0 + languageName: node + linkType: hard + "@types/jsdom@npm:^16.2.14": version: 16.2.14 resolution: "@types/jsdom@npm:16.2.14" @@ -6937,6 +7041,13 @@ __metadata: languageName: node linkType: hard +"@types/prettier@npm:^2.0.0": + version: 2.7.3 + resolution: "@types/prettier@npm:2.7.3" + checksum: 705384209cea6d1433ff6c187c80dcc0b95d99d5c5ce21a46a9a58060c527973506822e428789d842761e0280d25e3359300f017fbe77b9755bc772ab3dc2f83 + languageName: node + linkType: hard + "@types/prettier@npm:^2.1.5, @types/prettier@npm:^2.4.3": version: 2.4.3 resolution: "@types/prettier@npm:2.4.3" @@ -8117,7 +8228,7 @@ __metadata: languageName: node linkType: hard -"ansi-regex@npm:^5.0.1": +"ansi-regex@npm:^5.0.0, ansi-regex@npm:^5.0.1": version: 5.0.1 resolution: "ansi-regex@npm:5.0.1" checksum: 2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b @@ -11359,6 +11470,13 @@ __metadata: languageName: node linkType: hard +"diff-sequences@npm:^26.6.2": + version: 26.6.2 + resolution: "diff-sequences@npm:26.6.2" + checksum: 79af871776ef149a7ff3345d6b1bf37fe6e81f68632aa5542787851f6f60fba19b0be22fdd1e06046f56ae7382763ccfe94a982c39ee72bd107aef435ecbc0cf + languageName: node + linkType: hard + "diff-sequences@npm:^27.4.0": version: 27.4.0 resolution: "diff-sequences@npm:27.4.0" @@ -13060,6 +13178,20 @@ __metadata: languageName: node linkType: hard +"expect@npm:^26.6.2": + version: 26.6.2 + resolution: "expect@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + ansi-styles: ^4.0.0 + jest-get-type: ^26.3.0 + jest-matcher-utils: ^26.6.2 + jest-message-util: ^26.6.2 + jest-regex-util: ^26.0.0 + checksum: 79a9b888c5c6d37d11f2cb76def6cf1dc8ff098d38662ee20c9f2ee0da67e9a93435f2327854b2e7554732153870621843e7f83e8cefb1250447ee2bc39883a4 + languageName: node + linkType: hard + "expect@npm:^27.4.6": version: 27.4.6 resolution: "expect@npm:27.4.6" @@ -15602,6 +15734,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-core-module@npm:^2.13.0": + version: 2.13.0 + resolution: "is-core-module@npm:2.13.0" + dependencies: + has: ^1.0.3 + checksum: 053ab101fb390bfeb2333360fd131387bed54e476b26860dc7f5a700bbf34a0ec4454f7c8c4d43e8a0030957e4b3db6e16d35e1890ea6fb654c833095e040355 + languageName: node + linkType: hard + "is-core-module@npm:^2.5.0, is-core-module@npm:^2.9.0": version: 2.10.0 resolution: "is-core-module@npm:2.10.0" @@ -16341,6 +16482,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-diff@npm:^26.0.0, jest-diff@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-diff@npm:26.6.2" + dependencies: + chalk: ^4.0.0 + diff-sequences: ^26.6.2 + jest-get-type: ^26.3.0 + pretty-format: ^26.6.2 + checksum: d00d297f31e1ac0252127089892432caa7a11c69bde29cf3bb6c7a839c8afdb95cf1fd401f9df16a4422745da2e6a5d94b428b30666a2540c38e1c5699915c2d + languageName: node + linkType: hard + "jest-diff@npm:^27.0.0, jest-diff@npm:^27.0.2, jest-diff@npm:^27.4.6": version: 27.4.6 resolution: "jest-diff@npm:27.4.6" @@ -16404,6 +16557,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-get-type@npm:^26.3.0": + version: 26.3.0 + resolution: "jest-get-type@npm:26.3.0" + checksum: 1cc6465ae4f5e880be22ba52fd270fa64c21994915f81b41f8f7553a7957dd8e077cc8d03035de9412e2d739f8bad6a032ebb5dab5805692a5fb9e20dd4ea666 + languageName: node + linkType: hard + "jest-get-type@npm:^27.0.1, jest-get-type@npm:^27.4.0": version: 27.4.0 resolution: "jest-get-type@npm:27.4.0" @@ -16507,6 +16667,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-matcher-utils@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-matcher-utils@npm:26.6.2" + dependencies: + chalk: ^4.0.0 + jest-diff: ^26.6.2 + jest-get-type: ^26.3.0 + pretty-format: ^26.6.2 + checksum: 74d2165c1ac7fe98fe27cd2b5407499478e6b2fe99dd54e26d8ee5c9f5f913bdd7bdc07c7221b9b04df0c15e9be0e866ff3455b03e38cc66c480d9996d6d5405 + languageName: node + linkType: hard + "jest-matcher-utils@npm:^27.4.6": version: 27.4.6 resolution: "jest-matcher-utils@npm:27.4.6" @@ -16519,6 +16691,23 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-message-util@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-message-util@npm:26.6.2" + dependencies: + "@babel/code-frame": ^7.0.0 + "@jest/types": ^26.6.2 + "@types/stack-utils": ^2.0.0 + chalk: ^4.0.0 + graceful-fs: ^4.2.4 + micromatch: ^4.0.2 + pretty-format: ^26.6.2 + slash: ^3.0.0 + stack-utils: ^2.0.2 + checksum: ffe5a715591c41240b9ed4092faf10f3eaf9ddfdf25d257a0c9f903aaa8d9eed5baa7e38016d2ec4f610fd29225e0f5231a91153e087a043e62824972c83d015 + languageName: node + linkType: hard + "jest-message-util@npm:^27.4.6": version: 27.4.6 resolution: "jest-message-util@npm:27.4.6" @@ -16583,6 +16772,22 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-resolve@npm:^26.6.2": + version: 26.6.2 + resolution: "jest-resolve@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + chalk: ^4.0.0 + graceful-fs: ^4.2.4 + jest-pnp-resolver: ^1.2.2 + jest-util: ^26.6.2 + read-pkg-up: ^7.0.1 + resolve: ^1.18.1 + slash: ^3.0.0 + checksum: d6264d3f39b098753802a237c8c54f3109f5f3b3b7fa6f8d7aec7dca01b357ddf518ce1c33a68454357c15f48fb3c6026a92b9c4f5d72f07e24e80f04bcc8d58 + languageName: node + linkType: hard + "jest-resolve@npm:^27.4.6": version: 27.4.6 resolution: "jest-resolve@npm:27.4.6" @@ -16681,6 +16886,30 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-snapshot@npm:^26.3.0": + version: 26.6.2 + resolution: "jest-snapshot@npm:26.6.2" + dependencies: + "@babel/types": ^7.0.0 + "@jest/types": ^26.6.2 + "@types/babel__traverse": ^7.0.4 + "@types/prettier": ^2.0.0 + chalk: ^4.0.0 + expect: ^26.6.2 + graceful-fs: ^4.2.4 + jest-diff: ^26.6.2 + jest-get-type: ^26.3.0 + jest-haste-map: ^26.6.2 + jest-matcher-utils: ^26.6.2 + jest-message-util: ^26.6.2 + jest-resolve: ^26.6.2 + natural-compare: ^1.4.0 + pretty-format: ^26.6.2 + semver: ^7.3.2 + checksum: 53f1de055b1d3840bc6e851fd674d5991b844d4695dadbd07354c93bf191048d8767b8606999847e97c4214a485b9afb45c1d2411772befa1870414ac973b3e2 + languageName: node + linkType: hard + "jest-snapshot@npm:^27.4.6": version: 27.4.6 resolution: "jest-snapshot@npm:27.4.6" @@ -16711,6 +16940,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jest-specific-snapshot@npm:^4.0.0": + version: 4.0.0 + resolution: "jest-specific-snapshot@npm:4.0.0" + dependencies: + jest-snapshot: ^26.3.0 + peerDependencies: + jest: ">= 26.0.0" + checksum: 2dfba02fcd8fc24b76975afd8d8a5d381eec506853a369075616f7c94a041f103da1fa4392cc6538e34afa5123b6a7f274af8f27cee17716e857303d2cb2f797 + languageName: node + linkType: hard + "jest-styled-components@npm:^7.0.8, jest-styled-components@npm:^7.1.1": version: 7.1.1 resolution: "jest-styled-components@npm:7.1.1" @@ -20430,6 +20670,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"preact-render-to-string@npm:^5.1.19": + version: 5.2.6 + resolution: "preact-render-to-string@npm:5.2.6" + dependencies: + pretty-format: ^3.8.0 + peerDependencies: + preact: ">=10" + checksum: be8d5d8fb502d422c503e68af7bcccb6facd942f3ae9a4d093ebe3f1d4f0b15c540624bdac434d53a2a8e8fb7afa4606383414e937c40933ca43445470a026ff + languageName: node + linkType: hard + "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -20483,6 +20734,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"pretty-format@npm:^26.0.0, pretty-format@npm:^26.6.2": + version: 26.6.2 + resolution: "pretty-format@npm:26.6.2" + dependencies: + "@jest/types": ^26.6.2 + ansi-regex: ^5.0.0 + ansi-styles: ^4.0.0 + react-is: ^17.0.1 + checksum: e3b808404d7e1519f0df1aa1f25cee0054ab475775c6b2b8c5568ff23194a92d54bf93274139b6f584ca70fd773be4eaa754b0e03f12bb0a8d1426b07f079976 + languageName: node + linkType: hard + "pretty-format@npm:^27.0.0, pretty-format@npm:^27.0.2, pretty-format@npm:^27.4.6": version: 27.4.6 resolution: "pretty-format@npm:27.4.6" @@ -20494,6 +20757,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"pretty-format@npm:^3.8.0": + version: 3.8.0 + resolution: "pretty-format@npm:3.8.0" + checksum: 21a114d43ef06978f8f7f6212be4649b0b094f05d9b30e14e37550bf35c8ca24d8adbca9e5adc4cc15d9eaf7a1e7a30478a4dc37b30982bfdf0292a5b385484c + languageName: node + linkType: hard + "pretty-hrtime@npm:^1.0.3": version: 1.0.3 resolution: "pretty-hrtime@npm:1.0.3" @@ -21237,7 +21507,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-test-renderer@npm:^17.0.2": +"react-test-renderer@npm:^16.8.0 || ^17.0.0, react-test-renderer@npm:^17.0.2": version: 17.0.2 resolution: "react-test-renderer@npm:17.0.2" dependencies: @@ -21866,6 +22136,19 @@ fsevents@^1.2.7: languageName: node linkType: hard +"resolve@npm:^1.18.1": + version: 1.22.4 + resolution: "resolve@npm:1.22.4" + dependencies: + is-core-module: ^2.13.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: 23f25174c2736ce24c6d918910e0d1f89b6b38fefa07a995dff864acd7863d59a7f049e691f93b4b2ee29696303390d921552b6d1b841ed4a8101f517e1d0124 + languageName: node + linkType: hard + "resolve@npm:^2.0.0-next.4": version: 2.0.0-next.4 resolution: "resolve@npm:2.0.0-next.4" @@ -21892,6 +22175,19 @@ fsevents@^1.2.7: languageName: node linkType: hard +"resolve@patch:resolve@^1.18.1#~builtin": + version: 1.22.4 + resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin::version=1.22.4&hash=07638b" + dependencies: + is-core-module: ^2.13.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: c45f2545fdc4d21883861b032789e20aa67a2f2692f68da320cc84d5724cd02f2923766c5354b3210897e88f1a7b3d6d2c7c22faeead8eed7078e4c783a444bc + languageName: node + linkType: hard + "resolve@patch:resolve@^2.0.0-next.4#~builtin": version: 2.0.0-next.4 resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin::version=2.0.0-next.4&hash=07638b" @@ -22870,6 +23166,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"stack-utils@npm:^2.0.2": + version: 2.0.6 + resolution: "stack-utils@npm:2.0.6" + dependencies: + escape-string-regexp: ^2.0.0 + checksum: 052bf4d25bbf5f78e06c1d5e67de2e088b06871fa04107ca8d3f0e9d9263326e2942c8bedee3545795fc77d787d443a538345eef74db2f8e35db3558c6f91ff7 + languageName: node + linkType: hard + "stack-utils@npm:^2.0.3": version: 2.0.5 resolution: "stack-utils@npm:2.0.5" From b44afaf92d73a06e6e936fdb52ceeb0c86b1efb8 Mon Sep 17 00:00:00 2001 From: toshusai Date: Fri, 8 Sep 2023 16:33:36 +0900 Subject: [PATCH 02/68] chore: update node-version --- .node-version | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.node-version b/.node-version index e65243f2e..4a1f488b6 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -16.19.0 +18.17.1 From 902a9a8c67928fe81d4ae51a4c913d0e646fff85 Mon Sep 17 00:00:00 2001 From: toshusai Date: Thu, 14 Sep 2023 18:55:33 +0900 Subject: [PATCH 03/68] fix: scroll of DropdownSelector in modal --- .../DropdownSelector/Popover/index.tsx | 7 +- .../DropdownSelector/index.story.tsx | 78 +++++++++++++++---- .../Modal/ModalBackgroundContext.tsx | 13 ++++ .../Modal/ModalBackgroundProvider.tsx | 19 +++++ packages/react/src/components/Modal/index.tsx | 11 +++ 5 files changed, 113 insertions(+), 15 deletions(-) create mode 100644 packages/react/src/components/Modal/ModalBackgroundContext.tsx create mode 100644 packages/react/src/components/Modal/ModalBackgroundProvider.tsx diff --git a/packages/react/src/components/DropdownSelector/Popover/index.tsx b/packages/react/src/components/DropdownSelector/Popover/index.tsx index 1fa36c8f3..4991db563 100644 --- a/packages/react/src/components/DropdownSelector/Popover/index.tsx +++ b/packages/react/src/components/DropdownSelector/Popover/index.tsx @@ -1,8 +1,9 @@ -import { RefObject, useRef } from 'react' +import { RefObject, useContext, useRef } from 'react' import { ReactNode } from 'react' import { DismissButton, Overlay, usePopover } from '@react-aria/overlays' import styled from 'styled-components' import { theme } from '../../../styled' +import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext' export type PopoverProps = { isOpen: boolean @@ -40,10 +41,12 @@ export default function Popover(props: PopoverProps) { } ) + const bgCtx = useContext(ModalBackgroundContext) + if (!props.isOpen) return null return ( - +
props.onClose()} /> diff --git a/packages/react/src/components/DropdownSelector/index.story.tsx b/packages/react/src/components/DropdownSelector/index.story.tsx index 415898351..9169e4c5b 100644 --- a/packages/react/src/components/DropdownSelector/index.story.tsx +++ b/packages/react/src/components/DropdownSelector/index.story.tsx @@ -4,6 +4,9 @@ import { Story } from '../../_lib/compat' import { Divider } from './Divider' import MenuItemGroup from './MenuItemGroup' import DropdownMenuItem from './DropdownMenuItem' +import Modal from '../Modal' +import { ModalBackgroundProvider } from '../Modal/ModalBackgroundProvider' +import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing' export default { title: 'DropdownSelector', @@ -51,27 +54,76 @@ Playground.args = { ...baseProps } export const Basic: Story = ( props: DropdownSelectorProps ) => { - const [selected, setSelected] = useState('') return (
- { - setSelected(value) - }} - value={selected} - label="label" - > - Apple - Banana - Orange - +
) } Basic.args = { ...baseProps } +function PlaygroundDropdownSelector(props: Partial) { + const [selected, setSelected] = useState('') + return ( + { + setSelected(value) + }} + value={selected} + label="label" + > + Apple + Banana + Orange + + ) +} + +export const InModal: Story = () => { + return ( +
+ + { + // + }} + > + + +
+ +
+ 1000px +
+
+ + + +
+ ) +} + export const InFormTag: Story = ( props: DropdownSelectorProps ) => { diff --git a/packages/react/src/components/Modal/ModalBackgroundContext.tsx b/packages/react/src/components/Modal/ModalBackgroundContext.tsx new file mode 100644 index 000000000..21e0a085d --- /dev/null +++ b/packages/react/src/components/Modal/ModalBackgroundContext.tsx @@ -0,0 +1,13 @@ +import * as React from 'react' + +/** + * ModalBackgroundのElementを取得、設定するコンテキスト + * Modal内でPopoverを利用する際のportalContainerとして利用する + */ +export const ModalBackgroundContext = React.createContext<{ + element: HTMLElement | null + setElement: (el: HTMLElement) => void +}>({ + element: null, + setElement: () => null, +}) diff --git a/packages/react/src/components/Modal/ModalBackgroundProvider.tsx b/packages/react/src/components/Modal/ModalBackgroundProvider.tsx new file mode 100644 index 000000000..9730c9712 --- /dev/null +++ b/packages/react/src/components/Modal/ModalBackgroundProvider.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' +import { ModalBackgroundContext } from './ModalBackgroundContext' + +/** + * ModalBackgroundのElementを利用するためのプロバイダー + */ +export function ModalBackgroundProvider(props: { children: React.ReactNode }) { + const [element, setElement] = React.useState(null) + return ( + + {props.children} + + ) +} diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx index 633172520..468e43b3a 100644 --- a/packages/react/src/components/Modal/index.tsx +++ b/packages/react/src/components/Modal/index.tsx @@ -19,6 +19,7 @@ import { animated, useTransition, easings } from 'react-spring' import Button, { ButtonProps } from '../Button' import IconButton from '../IconButton' import { useObjectRef } from '@react-aria/utils' +import { ModalBackgroundContext } from './ModalBackgroundContext' type BottomSheet = boolean | 'full' type Size = 'S' | 'M' | 'L' @@ -130,11 +131,21 @@ const Modal = forwardRef(function ModalInner( }) const showDismiss = !isMobile || bottomSheet !== true + const bgRef = React.useRef(null) + const bgCtx = useContext(ModalBackgroundContext) + + React.useEffect(() => { + if (bgRef.current && isOpen) { + bgCtx.setElement(bgRef.current) + } + }, [bgCtx, isOpen]) + return transition( ({ backgroundColor, transform }, item) => item && ( Date: Fri, 15 Sep 2023 11:10:43 +0900 Subject: [PATCH 04/68] fix: preventScroll in Modal --- .../DropdownSelector/Popover/index.tsx | 2 ++ .../Popover/usePreventScroll.tsx | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 packages/react/src/components/DropdownSelector/Popover/usePreventScroll.tsx diff --git a/packages/react/src/components/DropdownSelector/Popover/index.tsx b/packages/react/src/components/DropdownSelector/Popover/index.tsx index 4991db563..cfe520455 100644 --- a/packages/react/src/components/DropdownSelector/Popover/index.tsx +++ b/packages/react/src/components/DropdownSelector/Popover/index.tsx @@ -4,6 +4,7 @@ import { DismissButton, Overlay, usePopover } from '@react-aria/overlays' import styled from 'styled-components' import { theme } from '../../../styled' import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext' +import { usePreventScroll } from './usePreventScroll' export type PopoverProps = { isOpen: boolean @@ -42,6 +43,7 @@ export default function Popover(props: PopoverProps) { ) const bgCtx = useContext(ModalBackgroundContext) + usePreventScroll(bgCtx.element, props.isOpen) if (!props.isOpen) return null diff --git a/packages/react/src/components/DropdownSelector/Popover/usePreventScroll.tsx b/packages/react/src/components/DropdownSelector/Popover/usePreventScroll.tsx new file mode 100644 index 000000000..be3259343 --- /dev/null +++ b/packages/react/src/components/DropdownSelector/Popover/usePreventScroll.tsx @@ -0,0 +1,16 @@ +import { useEffect } from 'react' + +export function usePreventScroll(element: HTMLElement | null, isOpen: boolean) { + useEffect(() => { + if (isOpen && element) { + const defaultPaddingRight = element.style.paddingRight + const defaultOverflow = element.style.overflow + element.style.paddingRight = document.documentElement.style.paddingRight + element.style.overflow = 'hidden' + return () => { + element.style.paddingRight = defaultPaddingRight + element.style.overflow = defaultOverflow + } + } + }, [element, isOpen]) +} From 6228276a5edcca53919bedd961f84b320644eebb Mon Sep 17 00:00:00 2001 From: toshusai Date: Fri, 15 Sep 2023 11:10:54 +0900 Subject: [PATCH 05/68] refactor: add default value --- packages/react/src/components/DropdownSelector/index.story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/DropdownSelector/index.story.tsx b/packages/react/src/components/DropdownSelector/index.story.tsx index 9169e4c5b..bb94a38f7 100644 --- a/packages/react/src/components/DropdownSelector/index.story.tsx +++ b/packages/react/src/components/DropdownSelector/index.story.tsx @@ -64,7 +64,7 @@ export const Basic: Story = ( Basic.args = { ...baseProps } function PlaygroundDropdownSelector(props: Partial) { - const [selected, setSelected] = useState('') + const [selected, setSelected] = useState('10') return ( Date: Fri, 15 Sep 2023 11:11:45 +0900 Subject: [PATCH 06/68] feat: change to available --- packages/react/src/components/Modal/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx index 468e43b3a..c2fe4d2b1 100644 --- a/packages/react/src/components/Modal/index.tsx +++ b/packages/react/src/components/Modal/index.tsx @@ -204,7 +204,8 @@ const ModalBackground = animated(styled.div<{ zIndex: number }>` position: fixed; top: 0; left: 0; - width: 100%; + width: -webkit-fill-available; + width: -moz-available; height: 100%; ${theme((o) => [o.bg.surface4])} From 8b72468f59ad91d684806b95ff6c828481398aad Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 20 Sep 2023 05:53:35 +0900 Subject: [PATCH 07/68] feat: add storyshots --- __mocks__/file.ts | 3 + __mocks__/style.ts | 1 + jest.setup.ts | 5 + package.json | 2 + packages/react/__mocks__/empty.ts | 1 - packages/react/__mocks__/file.ts | 3 - packages/react/__mocks__/style.ts | 1 - packages/react/jest.storyshots.config.mjs | 12 - packages/react/package.json | 1 - .../react/src/components/storyshots.test.js | 13 - packages/react/test.storyshots.js | 11 - packages/react/tsconfig.json | 2 +- storyshots.config.mjs | 18 + storyshots.test.js | 9 + tsconfig.json | 4 +- yarn.lock | 1015 ++++++++++++++++- 16 files changed, 1029 insertions(+), 72 deletions(-) create mode 100644 __mocks__/file.ts create mode 100644 __mocks__/style.ts delete mode 100644 packages/react/__mocks__/empty.ts delete mode 100644 packages/react/__mocks__/file.ts delete mode 100644 packages/react/__mocks__/style.ts delete mode 100644 packages/react/jest.storyshots.config.mjs delete mode 100644 packages/react/src/components/storyshots.test.js delete mode 100644 packages/react/test.storyshots.js create mode 100644 storyshots.config.mjs create mode 100644 storyshots.test.js diff --git a/__mocks__/file.ts b/__mocks__/file.ts new file mode 100644 index 000000000..0f5fb1cbc --- /dev/null +++ b/__mocks__/file.ts @@ -0,0 +1,3 @@ +const file = 'test-file-stub' + +export default file diff --git a/__mocks__/style.ts b/__mocks__/style.ts new file mode 100644 index 000000000..b1c6ea436 --- /dev/null +++ b/__mocks__/style.ts @@ -0,0 +1 @@ +export default {} diff --git a/jest.setup.ts b/jest.setup.ts index 4d2857927..386cd71ac 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -16,3 +16,8 @@ window.matchMedia = jest.fn().mockImplementation((query: string) => ({ removeEventListener: jest.fn(), dispatchEvent: jest.fn(), })) + +jest.mock('@react-aria/utils', () => ({ + ...jest.requireActual('@react-aria/utils'), + useId: () => 'test-id', +})) diff --git a/package.json b/package.json index 21de79595..1c633bc0f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "build": "yarn workspaces foreach -vpt -j unlimited run build", "clean": "yarn workspaces foreach -vp run clean", "test": "jest", + "storyshots": "jest -c storyshots.config.mjs", "test:strict": "USE_STRICT=1 jest", "typecheck": "yarn workspaces foreach -vp run typecheck", "typecheck:config": "tsc", @@ -43,6 +44,7 @@ "@storybook/addon-knobs": "^6.4.0", "@storybook/addon-links": "^6.4.17", "@storybook/addon-postcss": "^2.0.0", + "@storybook/addon-storyshots": "^6.4.17", "@storybook/addon-storysource": "^6.4.17", "@storybook/builder-vite": "^0.2.2", "@storybook/react": "^6.4.17", diff --git a/packages/react/__mocks__/empty.ts b/packages/react/__mocks__/empty.ts deleted file mode 100644 index ff8b4c563..000000000 --- a/packages/react/__mocks__/empty.ts +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/packages/react/__mocks__/file.ts b/packages/react/__mocks__/file.ts deleted file mode 100644 index 185e2a0d5..000000000 --- a/packages/react/__mocks__/file.ts +++ /dev/null @@ -1,3 +0,0 @@ -const file = 'test-file-stub'; - -export default file; diff --git a/packages/react/__mocks__/style.ts b/packages/react/__mocks__/style.ts deleted file mode 100644 index 56004c9f9..000000000 --- a/packages/react/__mocks__/style.ts +++ /dev/null @@ -1 +0,0 @@ -export default {} \ No newline at end of file diff --git a/packages/react/jest.storyshots.config.mjs b/packages/react/jest.storyshots.config.mjs deleted file mode 100644 index 2616d7561..000000000 --- a/packages/react/jest.storyshots.config.mjs +++ /dev/null @@ -1,12 +0,0 @@ -import config from './jest.config.mjs' - - -export default { - ...config, - moduleNameMapper: { - ...config.moduleNameMapper, - '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/file.ts', - '\\.(styl|css|less|scss)$': '/__mocks__/style.ts', - }, - testMatch: ['/**/storyshots.test.(js|jsx|ts|tsx)'], -} \ No newline at end of file diff --git a/packages/react/package.json b/packages/react/package.json index 9dbc034df..f51207b58 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -21,7 +21,6 @@ "@react-types/switch": "^3.1.2", "@storybook/addon-actions": "^6.4.17", "@storybook/addon-knobs": "^6.4.0", - "@storybook/addon-storyshots": "6.4.17", "@storybook/addons": "^6.4.17", "@storybook/api": "^6.4.17", "@storybook/components": "^6.4.17", diff --git a/packages/react/src/components/storyshots.test.js b/packages/react/src/components/storyshots.test.js deleted file mode 100644 index f472de5fd..000000000 --- a/packages/react/src/components/storyshots.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; -import { styleSheetSerializer } from 'jest-styled-components'; -import { join } from 'path'; - -initStoryshots({ - integrityOptions: { cwd: join("..", "..", __dirname) }, - snapshotExtension: ".snap", - snapshotSerializers: [styleSheetSerializer], - test: multiSnapshotWithOptions(), - getStoryshotFile() { - - } -}) diff --git a/packages/react/test.storyshots.js b/packages/react/test.storyshots.js deleted file mode 100644 index 7f542f192..000000000 --- a/packages/react/test.storyshots.js +++ /dev/null @@ -1,11 +0,0 @@ -import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; -import { styleSheetSerializer } from 'jest-styled-components'; -import { join } from 'path'; - -initStoryshots({ - snapshotSerializers: [styleSheetSerializer], - integrityOptions: { - cwd: join(__dirname, "src", "components") - }, - test: multiSnapshotWithOptions() -}) diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index b9ce3a35a..ce897777d 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "../../tsconfig.base.json", - "include": ["./src", "test.storyshots.js"] + "include": ["./src"] } diff --git a/storyshots.config.mjs b/storyshots.config.mjs new file mode 100644 index 000000000..9a2e5c0f3 --- /dev/null +++ b/storyshots.config.mjs @@ -0,0 +1,18 @@ +import { config } from './jest.config.mjs' + +export default { + ...config(), + setupFilesAfterEnv: ['./jest.setup.ts'], + transform: { + ...config().transform, + '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx', + }, + moduleNameMapper: { + '^@charcoal-ui/(.*)$': '/packages/$1/src', + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/__mocks__/file.ts', + '\\.(styl|css|less|scss)$': '/__mocks__/style.ts', + '\\.(mdx)$': '/__mocks__/file.ts', + }, + testMatch: ['/**/storyshots.test.(js|jsx|ts|tsx)'], +} diff --git a/storyshots.test.js b/storyshots.test.js new file mode 100644 index 000000000..7b6417234 --- /dev/null +++ b/storyshots.test.js @@ -0,0 +1,9 @@ +import initStoryshots, { + multiSnapshotWithOptions, +} from '@storybook/addon-storyshots' +import { styleSheetSerializer } from 'jest-styled-components' + +initStoryshots({ + snapshotSerializers: [styleSheetSerializer], + test: multiSnapshotWithOptions(), +}) diff --git a/tsconfig.json b/tsconfig.json index af4bd6f3c..2bb260367 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,9 @@ "misc/*.mjs", "jest.setup.ts", "**/.*.cjs", - "**/.*.js" + "**/.*.js", + "storyshots.*", + "__mocks__/*.ts" ], "exclude": ["docs"] } diff --git a/yarn.lock b/yarn.lock index e21e004d8..f8bce4c16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1722,7 +1722,6 @@ __metadata: "@react-types/switch": ^3.1.2 "@storybook/addon-actions": ^6.4.17 "@storybook/addon-knobs": ^6.4.0 - "@storybook/addon-storyshots": 6.4.17 "@storybook/addons": ^6.4.17 "@storybook/api": ^6.4.17 "@storybook/components": ^6.4.17 @@ -5292,18 +5291,18 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-storyshots@npm:6.4.17": - version: 6.4.17 - resolution: "@storybook/addon-storyshots@npm:6.4.17" +"@storybook/addon-storyshots@npm:^6.4.17": + version: 6.5.16 + resolution: "@storybook/addon-storyshots@npm:6.5.16" dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.4.17 + "@storybook/addons": 6.5.16 "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 6.4.17 - "@storybook/core": 6.4.17 - "@storybook/core-client": 6.4.17 - "@storybook/core-common": 6.4.17 - "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/client-api": 6.5.16 + "@storybook/core": 6.5.16 + "@storybook/core-client": 6.5.16 + "@storybook/core-common": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 "@types/glob": ^7.1.3 "@types/jest": ^26.0.16 "@types/jest-specific-snapshot": ^0.5.3 @@ -5328,8 +5327,8 @@ __metadata: jest-preset-angular: "*" jest-vue-preprocessor: "*" preact: ^10.5.13 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 rxjs: "*" svelte: "*" vue: "*" @@ -5365,7 +5364,7 @@ __metadata: optional: true vue-jest: optional: true - checksum: 52655fc543a5022d44ba08a148e48b61910ee87ecc253f8d6c4032b38ba77f2495bc6f5771d054d19cb6943bbc41a59b40f7d2557f3b4760ad24353786948b85 + checksum: 7f8707e10a2ebfb6667418b9ffa47dc64554f3ac54ebefa4dcb380e55b372acb0c0f6da8ae31d91a23e05265b30fde2f4bff602e6ae188cb7f022ede0bc83f89 languageName: node linkType: hard @@ -5492,6 +5491,28 @@ __metadata: languageName: node linkType: hard +"@storybook/addons@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/addons@npm:6.5.16" + dependencies: + "@storybook/api": 6.5.16 + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/router": 6.5.16 + "@storybook/theming": 6.5.16 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 0463150e4cf7bd2b2aaafdbaadfb4420e4e0a31eb651cfc1a2d7f4b4974caf67878712602474585dfa18f583000608598045594909959d2e9e2ec32ba004392d + languageName: node + linkType: hard + "@storybook/api@npm:6.4.17": version: 6.4.17 resolution: "@storybook/api@npm:6.4.17" @@ -5548,6 +5569,34 @@ __metadata: languageName: node linkType: hard +"@storybook/api@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/api@npm:6.5.16" + dependencies: + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/router": 6.5.16 + "@storybook/semver": ^7.3.2 + "@storybook/theming": 6.5.16 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + store2: ^2.12.0 + telejson: ^6.0.8 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: c873189ac1e501825d647903baa125899c492cee962cb86ebb7455110bd09194eeb6943f5c58a1f808ce4ee2e20e305f5604a4e60b07003c82a6fc6ceaee5ea9 + languageName: node + linkType: hard + "@storybook/babel-plugin-require-context-hook@npm:1.0.1": version: 1.0.1 resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" @@ -5667,6 +5716,67 @@ __metadata: languageName: node linkType: hard +"@storybook/builder-webpack4@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/builder-webpack4@npm:6.5.16" + dependencies: + "@babel/core": ^7.12.10 + "@storybook/addons": 6.5.16 + "@storybook/api": 6.5.16 + "@storybook/channel-postmessage": 6.5.16 + "@storybook/channels": 6.5.16 + "@storybook/client-api": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/components": 6.5.16 + "@storybook/core-common": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/node-logger": 6.5.16 + "@storybook/preview-web": 6.5.16 + "@storybook/router": 6.5.16 + "@storybook/semver": ^7.3.2 + "@storybook/store": 6.5.16 + "@storybook/theming": 6.5.16 + "@storybook/ui": 6.5.16 + "@types/node": ^14.0.10 || ^16.0.0 + "@types/webpack": ^4.41.26 + autoprefixer: ^9.8.6 + babel-loader: ^8.0.0 + case-sensitive-paths-webpack-plugin: ^2.3.0 + core-js: ^3.8.2 + css-loader: ^3.6.0 + file-loader: ^6.2.0 + find-up: ^5.0.0 + fork-ts-checker-webpack-plugin: ^4.1.6 + glob: ^7.1.6 + glob-promise: ^3.4.0 + global: ^4.4.0 + html-webpack-plugin: ^4.0.0 + pnp-webpack-plugin: 1.6.4 + postcss: ^7.0.36 + postcss-flexbugs-fixes: ^4.2.1 + postcss-loader: ^4.2.0 + raw-loader: ^4.0.2 + stable: ^0.1.8 + style-loader: ^1.3.0 + terser-webpack-plugin: ^4.2.3 + ts-dedent: ^2.0.0 + url-loader: ^4.1.1 + util-deprecate: ^1.0.2 + webpack: 4 + webpack-dev-middleware: ^3.7.3 + webpack-filter-warnings-plugin: ^1.2.1 + webpack-hot-middleware: ^2.25.1 + webpack-virtual-modules: ^0.2.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 5e9137c390db00b4e166df3ca730eb1748f6bac92c841f3f75c37ad5277d6f5565f899de3bb0357fc51ce6821c8a8a8adba724e3dd7a3d1cc80816e09e5b7128 + languageName: node + linkType: hard + "@storybook/channel-postmessage@npm:6.4.17": version: 6.4.17 resolution: "@storybook/channel-postmessage@npm:6.4.17" @@ -5682,6 +5792,21 @@ __metadata: languageName: node linkType: hard +"@storybook/channel-postmessage@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/channel-postmessage@npm:6.5.16" + dependencies: + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + core-js: ^3.8.2 + global: ^4.4.0 + qs: ^6.10.0 + telejson: ^6.0.8 + checksum: d3560d81dbf4710cc23b227c12be328d87e627581afcb5fec959f1e795fb2b5824db2a7f03a4ddcd185ec9a37a7025415d8bb43b7a245f2466395908eb3e9bc3 + languageName: node + linkType: hard + "@storybook/channel-websocket@npm:6.4.17": version: 6.4.17 resolution: "@storybook/channel-websocket@npm:6.4.17" @@ -5695,6 +5820,19 @@ __metadata: languageName: node linkType: hard +"@storybook/channel-websocket@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/channel-websocket@npm:6.5.16" + dependencies: + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + core-js: ^3.8.2 + global: ^4.4.0 + telejson: ^6.0.8 + checksum: 355c85f22d7cc65764871852debe347c43c3fe92d6a0caa64aecbe2dce78d4bf73b98e997099f9e4e7c204ad5821b979939b0700e446fa26478c1e1ba48e7380 + languageName: node + linkType: hard + "@storybook/channels@npm:6.4.17": version: 6.4.17 resolution: "@storybook/channels@npm:6.4.17" @@ -5717,6 +5855,17 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/channels@npm:6.5.16" + dependencies: + core-js: ^3.8.2 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 3d7f7bc19ed7b250976e00e02ab544408806b439106bed18a5db9815612f6c5df9bdf7c1a97b5a40ba3194184ebe7e4c75e2bca5496025d6b26afefa95cfccbd + languageName: node + linkType: hard + "@storybook/client-api@npm:6.4.17": version: 6.4.17 resolution: "@storybook/client-api@npm:6.4.17" @@ -5748,6 +5897,37 @@ __metadata: languageName: node linkType: hard +"@storybook/client-api@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/client-api@npm:6.5.16" + dependencies: + "@storybook/addons": 6.5.16 + "@storybook/channel-postmessage": 6.5.16 + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/store": 6.5.16 + "@types/qs": ^6.9.5 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + store2: ^2.12.0 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: a62276fa67d2c3cc766ea9145d3798c0c8ef3f9de9fb18e7c43d67e39226f47a2546c4319ccc6075545df65dc4fc65bdb97e904062daf426be6534767eacada6 + languageName: node + linkType: hard + "@storybook/client-logger@npm:6.4.17": version: 6.4.17 resolution: "@storybook/client-logger@npm:6.4.17" @@ -5768,6 +5948,16 @@ __metadata: languageName: node linkType: hard +"@storybook/client-logger@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/client-logger@npm:6.5.16" + dependencies: + core-js: ^3.8.2 + global: ^4.4.0 + checksum: 0a86959b1bacb1b893e282173b48afe9c857b8cdc67a47ad87a7f11ba7dbc15ebc4f0d05c07dffb988e0cd3e1de0f09f300ee06c66afe4c50e9be83aaed75971 + languageName: node + linkType: hard + "@storybook/components@npm:6.4.17, @storybook/components@npm:^6.4.17": version: 6.4.17 resolution: "@storybook/components@npm:6.4.17" @@ -5803,6 +5993,25 @@ __metadata: languageName: node linkType: hard +"@storybook/components@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/components@npm:6.5.16" + dependencies: + "@storybook/client-logger": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/theming": 6.5.16 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 1caf822bf1293ca043822f1c77f05c0f01631e8a61adad6bc4651ba9be78c8f4822ba0905e39c8feaa3fb44ae10422e9ccd3004348b18531fb82c54cfcea4fa9 + languageName: node + linkType: hard + "@storybook/core-client@npm:6.4.17": version: 6.4.17 resolution: "@storybook/core-client@npm:6.4.17" @@ -5838,6 +6047,41 @@ __metadata: languageName: node linkType: hard +"@storybook/core-client@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/core-client@npm:6.5.16" + dependencies: + "@storybook/addons": 6.5.16 + "@storybook/channel-postmessage": 6.5.16 + "@storybook/channel-websocket": 6.5.16 + "@storybook/client-api": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/preview-web": 6.5.16 + "@storybook/store": 6.5.16 + "@storybook/ui": 6.5.16 + airbnb-js-shims: ^2.2.1 + ansi-to-html: ^0.6.11 + core-js: ^3.8.2 + global: ^4.4.0 + lodash: ^4.17.21 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + unfetch: ^4.2.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + webpack: "*" + peerDependenciesMeta: + typescript: + optional: true + checksum: 467710777ddd740c431cf65035ecc489daae2fc5f4844a40b7339b806535e239140f40442a0e1d89356e107169c39d9e84d726c01982ed4609c043b6861e0778 + languageName: node + linkType: hard + "@storybook/core-common@npm:6.4.17": version: 6.4.17 resolution: "@storybook/core-common@npm:6.4.17" @@ -5901,6 +6145,70 @@ __metadata: languageName: node linkType: hard +"@storybook/core-common@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/core-common@npm:6.5.16" + dependencies: + "@babel/core": ^7.12.10 + "@babel/plugin-proposal-class-properties": ^7.12.1 + "@babel/plugin-proposal-decorators": ^7.12.12 + "@babel/plugin-proposal-export-default-from": ^7.12.1 + "@babel/plugin-proposal-nullish-coalescing-operator": ^7.12.1 + "@babel/plugin-proposal-object-rest-spread": ^7.12.1 + "@babel/plugin-proposal-optional-chaining": ^7.12.7 + "@babel/plugin-proposal-private-methods": ^7.12.1 + "@babel/plugin-proposal-private-property-in-object": ^7.12.1 + "@babel/plugin-syntax-dynamic-import": ^7.8.3 + "@babel/plugin-transform-arrow-functions": ^7.12.1 + "@babel/plugin-transform-block-scoping": ^7.12.12 + "@babel/plugin-transform-classes": ^7.12.1 + "@babel/plugin-transform-destructuring": ^7.12.1 + "@babel/plugin-transform-for-of": ^7.12.1 + "@babel/plugin-transform-parameters": ^7.12.1 + "@babel/plugin-transform-shorthand-properties": ^7.12.1 + "@babel/plugin-transform-spread": ^7.12.1 + "@babel/preset-env": ^7.12.11 + "@babel/preset-react": ^7.12.10 + "@babel/preset-typescript": ^7.12.7 + "@babel/register": ^7.12.1 + "@storybook/node-logger": 6.5.16 + "@storybook/semver": ^7.3.2 + "@types/node": ^14.0.10 || ^16.0.0 + "@types/pretty-hrtime": ^1.0.0 + babel-loader: ^8.0.0 + babel-plugin-macros: ^3.0.1 + babel-plugin-polyfill-corejs3: ^0.1.0 + chalk: ^4.1.0 + core-js: ^3.8.2 + express: ^4.17.1 + file-system-cache: ^1.0.5 + find-up: ^5.0.0 + fork-ts-checker-webpack-plugin: ^6.0.4 + fs-extra: ^9.0.1 + glob: ^7.1.6 + handlebars: ^4.7.7 + interpret: ^2.2.0 + json5: ^2.2.3 + lazy-universal-dotenv: ^3.0.1 + picomatch: ^2.3.0 + pkg-dir: ^5.0.0 + pretty-hrtime: ^1.0.3 + resolve-from: ^5.0.0 + slash: ^3.0.0 + telejson: ^6.0.8 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + webpack: 4 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 886a701876599939950c3c98e306b373cd026c7b995ca08d88475b3f35624a53763459d6b202728ec703e99126813a254b956c2d0fe7e85f99dcb5765a999b19 + languageName: node + linkType: hard + "@storybook/core-common@npm:^6.4.3": version: 6.5.10 resolution: "@storybook/core-common@npm:6.5.10" @@ -5983,6 +6291,15 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/core-events@npm:6.5.16" + dependencies: + core-js: ^3.8.2 + checksum: 1844bdabfb7828af7ddd54129fbb321bf65d8b65459eaac99c8f3f94c7c2f0ee000468362758076444083f863a3bc835ecd1e4f2128524eb5c00c8a576473bc9 + languageName: node + linkType: hard + "@storybook/core-server@npm:6.4.17": version: 6.4.17 resolution: "@storybook/core-server@npm:6.4.17" @@ -6045,6 +6362,69 @@ __metadata: languageName: node linkType: hard +"@storybook/core-server@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/core-server@npm:6.5.16" + dependencies: + "@discoveryjs/json-ext": ^0.5.3 + "@storybook/builder-webpack4": 6.5.16 + "@storybook/core-client": 6.5.16 + "@storybook/core-common": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/csf-tools": 6.5.16 + "@storybook/manager-webpack4": 6.5.16 + "@storybook/node-logger": 6.5.16 + "@storybook/semver": ^7.3.2 + "@storybook/store": 6.5.16 + "@storybook/telemetry": 6.5.16 + "@types/node": ^14.0.10 || ^16.0.0 + "@types/node-fetch": ^2.5.7 + "@types/pretty-hrtime": ^1.0.0 + "@types/webpack": ^4.41.26 + better-opn: ^2.1.1 + boxen: ^5.1.2 + chalk: ^4.1.0 + cli-table3: ^0.6.1 + commander: ^6.2.1 + compression: ^1.7.4 + core-js: ^3.8.2 + cpy: ^8.1.2 + detect-port: ^1.3.0 + express: ^4.17.1 + fs-extra: ^9.0.1 + global: ^4.4.0 + globby: ^11.0.2 + ip: ^2.0.0 + lodash: ^4.17.21 + node-fetch: ^2.6.7 + open: ^8.4.0 + pretty-hrtime: ^1.0.3 + prompts: ^2.4.0 + regenerator-runtime: ^0.13.7 + serve-favicon: ^2.5.0 + slash: ^3.0.0 + telejson: ^6.0.8 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + watchpack: ^2.2.0 + webpack: 4 + ws: ^8.2.3 + x-default-browser: ^0.4.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@storybook/builder-webpack5": + optional: true + "@storybook/manager-webpack5": + optional: true + typescript: + optional: true + checksum: 2027adba39b2e0a5c3664241f48ec256a92866755aace96f3b8e2064b50237bbcd4e814bc58a1084006baae41c48d7d0eccefc9867d84e17d68d7f969e65f149 + languageName: node + linkType: hard + "@storybook/core@npm:6.4.17": version: 6.4.17 resolution: "@storybook/core@npm:6.4.17" @@ -6065,6 +6445,27 @@ __metadata: languageName: node linkType: hard +"@storybook/core@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/core@npm:6.5.16" + dependencies: + "@storybook/core-client": 6.5.16 + "@storybook/core-server": 6.5.16 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + webpack: "*" + peerDependenciesMeta: + "@storybook/builder-webpack5": + optional: true + "@storybook/manager-webpack5": + optional: true + typescript: + optional: true + checksum: f1732338741692007230a351419ef3aa4e387810d7d0c0e6ffb1159e1de4d757199f2b543cf4f6413fc40acda514b908d2fd9b3e0d56e3f6cec1e3a82c2fcc10 + languageName: node + linkType: hard + "@storybook/csf-tools@npm:6.4.17": version: 6.4.17 resolution: "@storybook/csf-tools@npm:6.4.17" @@ -6090,6 +6491,33 @@ __metadata: languageName: node linkType: hard +"@storybook/csf-tools@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/csf-tools@npm:6.5.16" + dependencies: + "@babel/core": ^7.12.10 + "@babel/generator": ^7.12.11 + "@babel/parser": ^7.12.11 + "@babel/plugin-transform-react-jsx": ^7.12.12 + "@babel/preset-env": ^7.12.11 + "@babel/traverse": ^7.12.11 + "@babel/types": ^7.12.11 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/mdx1-csf": ^0.0.1 + core-js: ^3.8.2 + fs-extra: ^9.0.1 + global: ^4.4.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + peerDependencies: + "@storybook/mdx2-csf": ^0.0.3 + peerDependenciesMeta: + "@storybook/mdx2-csf": + optional: true + checksum: ee71a47d90186c35fc1dbcb6ece2888ff4d730bde823bb1bd242d802b74045b482d2c469f3a91687b691b6f828ce449b182896d1912033846b9746457ee960ba + languageName: node + linkType: hard + "@storybook/csf@npm:0.0.2--canary.4566f4d.1": version: 0.0.2--canary.4566f4d.1 resolution: "@storybook/csf@npm:0.0.2--canary.4566f4d.1" @@ -6167,6 +6595,74 @@ __metadata: languageName: node linkType: hard +"@storybook/manager-webpack4@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/manager-webpack4@npm:6.5.16" + dependencies: + "@babel/core": ^7.12.10 + "@babel/plugin-transform-template-literals": ^7.12.1 + "@babel/preset-react": ^7.12.10 + "@storybook/addons": 6.5.16 + "@storybook/core-client": 6.5.16 + "@storybook/core-common": 6.5.16 + "@storybook/node-logger": 6.5.16 + "@storybook/theming": 6.5.16 + "@storybook/ui": 6.5.16 + "@types/node": ^14.0.10 || ^16.0.0 + "@types/webpack": ^4.41.26 + babel-loader: ^8.0.0 + case-sensitive-paths-webpack-plugin: ^2.3.0 + chalk: ^4.1.0 + core-js: ^3.8.2 + css-loader: ^3.6.0 + express: ^4.17.1 + file-loader: ^6.2.0 + find-up: ^5.0.0 + fs-extra: ^9.0.1 + html-webpack-plugin: ^4.0.0 + node-fetch: ^2.6.7 + pnp-webpack-plugin: 1.6.4 + read-pkg-up: ^7.0.1 + regenerator-runtime: ^0.13.7 + resolve-from: ^5.0.0 + style-loader: ^1.3.0 + telejson: ^6.0.8 + terser-webpack-plugin: ^4.2.3 + ts-dedent: ^2.0.0 + url-loader: ^4.1.1 + util-deprecate: ^1.0.2 + webpack: 4 + webpack-dev-middleware: ^3.7.3 + webpack-virtual-modules: ^0.2.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 873c871c822ecde30fbd95e9517549a18c5bb2de46d6160d6dcd7c1b5635fda2073b5bc4bd4d87e72de6e8df8bccf39b81f062e07cd7a23ffb4b43293e488fbb + languageName: node + linkType: hard + +"@storybook/mdx1-csf@npm:^0.0.1": + version: 0.0.1 + resolution: "@storybook/mdx1-csf@npm:0.0.1" + dependencies: + "@babel/generator": ^7.12.11 + "@babel/parser": ^7.12.11 + "@babel/preset-env": ^7.12.11 + "@babel/types": ^7.12.11 + "@mdx-js/mdx": ^1.6.22 + "@types/lodash": ^4.14.167 + js-string-escape: ^1.0.1 + loader-utils: ^2.0.0 + lodash: ^4.17.21 + prettier: ">=2.2.1 <=2.3.0" + ts-dedent: ^2.0.0 + checksum: 34f952f4d00d4fbf680aadea53ca0d9b02b10c94ea492a47a6df916474ea1e36d08eece70ffaba760a4cdf6f634a8684360dc49355cf8a1461050b8a470d2666 + languageName: node + linkType: hard + "@storybook/mdx1-csf@npm:^0.0.4": version: 0.0.4 resolution: "@storybook/mdx1-csf@npm:0.0.4" @@ -6213,6 +6709,19 @@ __metadata: languageName: node linkType: hard +"@storybook/node-logger@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/node-logger@npm:6.5.16" + dependencies: + "@types/npmlog": ^4.1.2 + chalk: ^4.1.0 + core-js: ^3.8.2 + npmlog: ^5.0.1 + pretty-hrtime: ^1.0.3 + checksum: 4ae47c03b6cec6b820e0e482e6f6675bf745fca5c124eb919240c0339b9f4a1b110c8fde7c5ddbc1748d3992773c61d37ba1f5c489b42279cf03517d4e1d51c5 + languageName: node + linkType: hard + "@storybook/postinstall@npm:6.4.17": version: 6.4.17 resolution: "@storybook/postinstall@npm:6.4.17" @@ -6249,6 +6758,33 @@ __metadata: languageName: node linkType: hard +"@storybook/preview-web@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/preview-web@npm:6.5.16" + dependencies: + "@storybook/addons": 6.5.16 + "@storybook/channel-postmessage": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + "@storybook/store": 6.5.16 + ansi-to-html: ^0.6.11 + core-js: ^3.8.2 + global: ^4.4.0 + lodash: ^4.17.21 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + unfetch: ^4.2.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 6161c96e9ee459ef93c3d972374ce339ae57d0c5fa25730007484e4824f79a34814110431db97031107558e5ce41259710f8a54564e8975db0215b78c5572a1b + languageName: node + linkType: hard + "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0": version: 1.0.2-canary.253f8c1.0 resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.253f8c1.0" @@ -6350,6 +6886,22 @@ __metadata: languageName: node linkType: hard +"@storybook/router@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/router@npm:6.5.16" + dependencies: + "@storybook/client-logger": 6.5.16 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 2812b93997026b1d85f02072d04f18e98e24de288efb73402f8d15ececd390e13dc620ef011268e09986c629f497ffa03230c2431e89b4e37c01b70761be2c6d + languageName: node + linkType: hard + "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -6430,6 +6982,52 @@ __metadata: languageName: node linkType: hard +"@storybook/store@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/store@npm:6.5.16" + dependencies: + "@storybook/addons": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/csf": 0.0.2--canary.4566f4d.1 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + slash: ^3.0.0 + stable: ^0.1.8 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: f438fb020af240e23348742b2936a326bef1f7ffd489fe9f39cfd516310ab592a11609205fdacd11090b0c0b6bc72c75dff986085a6a97acc5efa64829a49309 + languageName: node + linkType: hard + +"@storybook/telemetry@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/telemetry@npm:6.5.16" + dependencies: + "@storybook/client-logger": 6.5.16 + "@storybook/core-common": 6.5.16 + chalk: ^4.1.0 + core-js: ^3.8.2 + detect-package-manager: ^2.0.1 + fetch-retry: ^5.0.2 + fs-extra: ^9.0.1 + global: ^4.4.0 + isomorphic-unfetch: ^3.1.0 + nanoid: ^3.3.1 + read-pkg-up: ^7.0.1 + regenerator-runtime: ^0.13.7 + checksum: 21eef590b04db8ee85b0b1d875d8646e26492b3e90538a248314f92d6ab0642ec65db09c5d2bc0d7f547f0fa6b83ca4442bdc115b400861360e02d8cf179497e + languageName: node + linkType: hard + "@storybook/theming@npm:6.4.17": version: 6.4.17 resolution: "@storybook/theming@npm:6.4.17" @@ -6468,6 +7066,21 @@ __metadata: languageName: node linkType: hard +"@storybook/theming@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/theming@npm:6.5.16" + dependencies: + "@storybook/client-logger": 6.5.16 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 349affa5c5208240291a5d24c73d852e220bfaf36b8fda70564aec1cac6070248ce7566ccb755c55a6ce0844ab2bbfd55881f6f788240b38cb407714e393c6f3 + languageName: node + linkType: hard + "@storybook/ui@npm:6.4.17": version: 6.4.17 resolution: "@storybook/ui@npm:6.4.17" @@ -6507,6 +7120,31 @@ __metadata: languageName: node linkType: hard +"@storybook/ui@npm:6.5.16": + version: 6.5.16 + resolution: "@storybook/ui@npm:6.5.16" + dependencies: + "@storybook/addons": 6.5.16 + "@storybook/api": 6.5.16 + "@storybook/channels": 6.5.16 + "@storybook/client-logger": 6.5.16 + "@storybook/components": 6.5.16 + "@storybook/core-events": 6.5.16 + "@storybook/router": 6.5.16 + "@storybook/semver": ^7.3.2 + "@storybook/theming": 6.5.16 + core-js: ^3.8.2 + memoizerific: ^1.11.3 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + resolve-from: ^5.0.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: bfebcf4d56dc5fd6024eaa08fe50aecc3c348670b7c0ec6b467680d64d525421580b9c98839bcaf1e2a9e69b78478a21c9943a9a392b49a0405b4784038b2eba + languageName: node + linkType: hard + "@stylelint/postcss-css-in-js@npm:^0.37.2": version: 0.37.2 resolution: "@stylelint/postcss-css-in-js@npm:0.37.2" @@ -6876,11 +7514,11 @@ __metadata: linkType: hard "@types/jest-specific-snapshot@npm:^0.5.3": - version: 0.5.6 - resolution: "@types/jest-specific-snapshot@npm:0.5.6" + version: 0.5.7 + resolution: "@types/jest-specific-snapshot@npm:0.5.7" dependencies: "@types/jest": "*" - checksum: 3acfe6f586e478b17245443cd5f8b91b3e6be86969b32a3de7e2b7fcc34ad9a6718d8aecf493a8537fb5d42f9bd14be7e13ff16fa8fbc16fc2becd987e643586 + checksum: 0b540abd40b142168e8829c8c3819def2eeb3a8cae0e68f94cc4afe48dc70bdbc60ceca330c2e32e847981c2b4fdedfaecebcfbac38a32ffd1c65454b08d0e97 languageName: node linkType: hard @@ -8449,6 +9087,13 @@ __metadata: languageName: node linkType: hard +"array-find-index@npm:^1.0.1": + version: 1.0.2 + resolution: "array-find-index@npm:1.0.2" + checksum: aac128bf369e1ac6c06ff0bb330788371c0e256f71279fb92d745e26fb4b9db8920e485b4ec25e841c93146bf71a34dcdbcefa115e7e0f96927a214d237b7081 + languageName: node + linkType: hard + "array-flatten@npm:1.1.1": version: 1.1.1 resolution: "array-flatten@npm:1.1.1" @@ -9160,6 +9805,13 @@ __metadata: languageName: node linkType: hard +"big-integer@npm:^1.6.7": + version: 1.6.51 + resolution: "big-integer@npm:1.6.51" + checksum: 3d444173d1b2e20747e2c175568bedeebd8315b0637ea95d75fd27830d3b8e8ba36c6af40374f36bdaea7b5de376dcada1b07587cb2a79a928fccdb6e6e3c518 + languageName: node + linkType: hard + "big.js@npm:^5.2.2": version: 5.2.2 resolution: "big.js@npm:5.2.2" @@ -9277,6 +9929,15 @@ __metadata: languageName: node linkType: hard +"bplist-parser@npm:^0.1.0": + version: 0.1.1 + resolution: "bplist-parser@npm:0.1.1" + dependencies: + big-integer: ^1.6.7 + checksum: 1501d52f009c9f23ecee6855940e84ac55a6120c0f05570b1f51c8d494023416ec12f4d91b5ac97d6c0941d96dd41d7cb0bc1a9c0a02092df5b4b511acb8dda5 + languageName: node + linkType: hard + "brace-expansion@npm:^1.1.7": version: 1.1.11 resolution: "brace-expansion@npm:1.1.11" @@ -9746,6 +10407,16 @@ __metadata: languageName: node linkType: hard +"camelcase-keys@npm:^2.0.0": + version: 2.1.0 + resolution: "camelcase-keys@npm:2.1.0" + dependencies: + camelcase: ^2.0.0 + map-obj: ^1.0.0 + checksum: 97d2993da5db44d45e285910c70a54ce7f83a2be05afceaafd9831f7aeaf38a48dcdede5ca3aae2b2694852281d38dc459706e346942c5df0bf755f4133f5c39 + languageName: node + linkType: hard + "camelcase-keys@npm:^6.2.2": version: 6.2.2 resolution: "camelcase-keys@npm:6.2.2" @@ -9757,6 +10428,13 @@ __metadata: languageName: node linkType: hard +"camelcase@npm:^2.0.0": + version: 2.1.1 + resolution: "camelcase@npm:2.1.1" + checksum: 20a3ef08f348de832631d605362ffe447d883ada89617144a82649363ed5860923b021f8e09681624ef774afb93ff3597cfbcf8aaf0574f65af7648f1aea5e50 + languageName: node + linkType: hard + "camelcase@npm:^5.3.1": version: 5.3.1 resolution: "camelcase@npm:5.3.1" @@ -9905,6 +10583,7 @@ __metadata: "@storybook/addon-knobs": ^6.4.0 "@storybook/addon-links": ^6.4.17 "@storybook/addon-postcss": ^2.0.0 + "@storybook/addon-storyshots": ^6.4.17 "@storybook/addon-storysource": ^6.4.17 "@storybook/builder-vite": ^0.2.2 "@storybook/react": ^6.4.17 @@ -11100,6 +11779,15 @@ __metadata: languageName: node linkType: hard +"currently-unhandled@npm:^0.4.1": + version: 0.4.1 + resolution: "currently-unhandled@npm:0.4.1" + dependencies: + array-find-index: ^1.0.1 + checksum: 1f59fe10b5339b54b1a1eee110022f663f3495cf7cf2f480686e89edc7fa8bfe42dbab4b54f85034bc8b092a76cc7becbc2dad4f9adad332ab5831bec39ad540 + languageName: node + linkType: hard + "cyclist@npm:^1.0.1": version: 1.0.1 resolution: "cyclist@npm:1.0.1" @@ -11211,7 +11899,7 @@ __metadata: languageName: node linkType: hard -"decamelize@npm:^1.1.0, decamelize@npm:^1.2.0": +"decamelize@npm:^1.1.0, decamelize@npm:^1.1.2, decamelize@npm:^1.2.0": version: 1.2.0 resolution: "decamelize@npm:1.2.0" checksum: ad8c51a7e7e0720c70ec2eeb1163b66da03e7616d7b98c9ef43cce2416395e84c1e9548dd94f5f6ffecfee9f8b94251fc57121a8b021f2ff2469b2bae247b8aa @@ -11269,6 +11957,19 @@ __metadata: languageName: node linkType: hard +"default-browser-id@npm:^1.0.4": + version: 1.0.4 + resolution: "default-browser-id@npm:1.0.4" + dependencies: + bplist-parser: ^0.1.0 + meow: ^3.1.0 + untildify: ^2.0.0 + bin: + default-browser-id: cli.js + checksum: c6576428ebdd304d209e09c40803c974de3236232fdfa564d82bd1e985246a0d0f0b344f2b207fcbf663b925c20d30ab4d77fbe2755d2be3a6073f12620b9056 + languageName: node + linkType: hard + "defaults@npm:^1.0.3": version: 1.0.3 resolution: "defaults@npm:1.0.3" @@ -11437,6 +12138,15 @@ __metadata: languageName: node linkType: hard +"detect-package-manager@npm:^2.0.1": + version: 2.0.1 + resolution: "detect-package-manager@npm:2.0.1" + dependencies: + execa: ^5.1.1 + checksum: e72b910182d5ad479198d4235be206ac64a479257b32201bb06f3c842cc34c65ea851d46f72cc1d4bf535bcc6c4b44b5b86bb29fe1192b8c9c07b46883672f28 + languageName: node + linkType: hard + "detect-port@npm:^1.3.0": version: 1.3.0 resolution: "detect-port@npm:1.3.0" @@ -12022,7 +12732,7 @@ __metadata: languageName: node linkType: hard -"error-ex@npm:^1.3.1": +"error-ex@npm:^1.2.0, error-ex@npm:^1.3.1": version: 1.3.2 resolution: "error-ex@npm:1.3.2" dependencies: @@ -13130,7 +13840,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:^5.0.0": +"execa@npm:^5.0.0, execa@npm:^5.1.1": version: 5.1.1 resolution: "execa@npm:5.1.1" dependencies: @@ -13422,6 +14132,13 @@ __metadata: languageName: node linkType: hard +"fetch-retry@npm:^5.0.2": + version: 5.0.6 + resolution: "fetch-retry@npm:5.0.6" + checksum: 4ad8bca6ec7a7b1212e636bb422a9ae8bb9dce38df0b441c9eb77a29af99b368029d6248ff69427da67e3d43c53808b121135ea395e7fe4f8f383e0ad65b4f27 + languageName: node + linkType: hard + "figgy-pudding@npm:^3.5.1": version: 3.5.2 resolution: "figgy-pudding@npm:3.5.2" @@ -13577,6 +14294,16 @@ __metadata: languageName: node linkType: hard +"find-up@npm:^1.0.0": + version: 1.1.2 + resolution: "find-up@npm:1.1.2" + dependencies: + path-exists: ^2.0.0 + pinkie-promise: ^2.0.0 + checksum: a2cb9f4c9f06ee3a1e92ed71d5aed41ac8ae30aefa568132f6c556fac7678a5035126153b59eaec68da78ac409eef02503b2b059706bdbf232668d7245e3240a + languageName: node + linkType: hard + "find-up@npm:^2.0.0": version: 2.1.0 resolution: "find-up@npm:2.1.0" @@ -14173,6 +14900,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"get-stdin@npm:^4.0.1": + version: 4.0.1 + resolution: "get-stdin@npm:4.0.1" + checksum: 4f73d3fe0516bc1f3dc7764466a68ad7c2ba809397a02f56c2a598120e028430fcff137a648a01876b2adfb486b4bc164119f98f1f7d7c0abd63385bdaa0113f + languageName: node + linkType: hard + "get-stdin@npm:^8.0.0": version: 8.0.0 resolution: "get-stdin@npm:8.0.0" @@ -15400,6 +16134,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"indent-string@npm:^2.1.0": + version: 2.1.0 + resolution: "indent-string@npm:2.1.0" + dependencies: + repeating: ^2.0.0 + checksum: 2fe7124311435f4d7a98f0a314d8259a4ec47ecb221110a58e2e2073e5f75c8d2b4f775f2ed199598fbe20638917e57423096539455ca8bff8eab113c9bee12c + languageName: node + linkType: hard + "indent-string@npm:^4.0.0": version: 4.0.0 resolution: "indent-string@npm:4.0.0" @@ -15866,6 +16609,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-finite@npm:^1.0.0": + version: 1.1.0 + resolution: "is-finite@npm:1.1.0" + checksum: 532b97ed3d03e04c6bd203984d9e4ba3c0c390efee492bad5d1d1cd1802a68ab27adbd3ef6382f6312bed6c8bb1bd3e325ea79a8dc8fe080ed7a06f5f97b93e7 + languageName: node + linkType: hard + "is-fullwidth-code-point@npm:^1.0.0": version: 1.0.0 resolution: "is-fullwidth-code-point@npm:1.0.0" @@ -16170,6 +16920,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-utf8@npm:^0.2.0": + version: 0.2.1 + resolution: "is-utf8@npm:0.2.1" + checksum: 167ccd2be869fc228cc62c1a28df4b78c6b5485d15a29027d3b5dceb09b383e86a3522008b56dcac14b592b22f0a224388718c2505027a994fd8471465de54b3 + languageName: node + linkType: hard + "is-weakref@npm:^1.0.1, is-weakref@npm:^1.0.2": version: 1.0.2 resolution: "is-weakref@npm:1.0.2" @@ -16267,6 +17024,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"isomorphic-unfetch@npm:^3.1.0": + version: 3.1.0 + resolution: "isomorphic-unfetch@npm:3.1.0" + dependencies: + node-fetch: ^2.6.1 + unfetch: ^4.2.0 + checksum: 82b92fe4ec2823a81ab0fc0d11bd94d710e6f9a940d56b3cba31896d4345ec9ffc7949f4ff31ebcae84f6b95f7ebf3474c4c7452b834eb4078ea3f2c37e459c5 + languageName: node + linkType: hard + "isstream@npm:~0.1.2": version: 0.1.2 resolution: "isstream@npm:0.1.2" @@ -17697,6 +18464,19 @@ fsevents@^1.2.7: languageName: node linkType: hard +"load-json-file@npm:^1.0.0": + version: 1.1.0 + resolution: "load-json-file@npm:1.1.0" + dependencies: + graceful-fs: ^4.1.2 + parse-json: ^2.2.0 + pify: ^2.0.0 + pinkie-promise: ^2.0.0 + strip-bom: ^2.0.0 + checksum: 0e4e4f380d897e13aa236246a917527ea5a14e4fc34d49e01ce4e7e2a1e08e2740ee463a03fb021c04f594f29a178f4adb994087549d7c1c5315fcd29bf9934b + languageName: node + linkType: hard + "load-json-file@npm:^4.0.0": version: 4.0.0 resolution: "load-json-file@npm:4.0.0" @@ -17867,6 +18647,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"loud-rejection@npm:^1.0.0": + version: 1.6.0 + resolution: "loud-rejection@npm:1.6.0" + dependencies: + currently-unhandled: ^0.4.1 + signal-exit: ^3.0.0 + checksum: 750e12defde34e8cbf263c2bff16f028a89b56e022ad6b368aa7c39495b5ac33f2349a8d00665a9b6d25c030b376396524d8a31eb0dde98aaa97956d7324f927 + languageName: node + linkType: hard + "lower-case@npm:^2.0.1": version: 2.0.1 resolution: "lower-case@npm:2.0.1" @@ -18032,7 +18822,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"map-obj@npm:^1.0.0": +"map-obj@npm:^1.0.0, map-obj@npm:^1.0.1": version: 1.0.1 resolution: "map-obj@npm:1.0.1" checksum: 9949e7baec2a336e63b8d4dc71018c117c3ce6e39d2451ccbfd3b8350c547c4f6af331a4cbe1c83193d7c6b786082b6256bde843db90cb7da2a21e8fcc28afed @@ -18224,6 +19014,24 @@ fsevents@^1.2.7: languageName: node linkType: hard +"meow@npm:^3.1.0": + version: 3.7.0 + resolution: "meow@npm:3.7.0" + dependencies: + camelcase-keys: ^2.0.0 + decamelize: ^1.1.2 + loud-rejection: ^1.0.0 + map-obj: ^1.0.1 + minimist: ^1.1.3 + normalize-package-data: ^2.3.4 + object-assign: ^4.0.1 + read-pkg-up: ^1.0.1 + redent: ^1.0.0 + trim-newlines: ^1.0.0 + checksum: 65a412e5d0d643615508007a9292799bb3e4e690597d54c9e98eb0ca3adb7b8ca8899f41ea7cb7d8277129cdcd9a1a60202b31f88e0034e6aaae02894d80999a + languageName: node + linkType: hard + "meow@npm:^8.0.0": version: 8.1.2 resolution: "meow@npm:8.1.2" @@ -18498,6 +19306,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"minimist@npm:^1.1.3": + version: 1.2.8 + resolution: "minimist@npm:1.2.8" + checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0 + languageName: node + linkType: hard + "minipass-collect@npm:^1.0.2": version: 1.0.2 resolution: "minipass-collect@npm:1.0.2" @@ -18791,6 +19606,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"nanoid@npm:^3.3.1": + version: 3.3.6 + resolution: "nanoid@npm:3.3.6" + bin: + nanoid: bin/nanoid.cjs + checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3 + languageName: node + linkType: hard + "nanomatch@npm:^1.2.9": version: 1.2.13 resolution: "nanomatch@npm:1.2.13" @@ -19057,7 +19881,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.5.0": +"normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.3.4, normalize-package-data@npm:^2.5.0": version: 2.5.0 resolution: "normalize-package-data@npm:2.5.0" dependencies: @@ -20162,6 +20986,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"parse-json@npm:^2.2.0": + version: 2.2.0 + resolution: "parse-json@npm:2.2.0" + dependencies: + error-ex: ^1.2.0 + checksum: dda78a63e57a47b713a038630868538f718a7ca0cd172a36887b0392ccf544ed0374902eb28f8bf3409e8b71d62b79d17062f8543afccf2745f9b0b2d2bb80ca + languageName: node + linkType: hard + "parse-json@npm:^4.0.0": version: 4.0.0 resolution: "parse-json@npm:4.0.0" @@ -20247,6 +21080,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"path-exists@npm:^2.0.0": + version: 2.1.0 + resolution: "path-exists@npm:2.1.0" + dependencies: + pinkie-promise: ^2.0.0 + checksum: fdb734f1d00f225f7a0033ce6d73bff6a7f76ea08936abf0e5196fa6e54a645103538cd8aedcb90d6d8c3fa3705ded0c58a4da5948ae92aa8834892c1ab44a84 + languageName: node + linkType: hard + "path-exists@npm:^3.0.0": version: 3.0.0 resolution: "path-exists@npm:3.0.0" @@ -20313,6 +21155,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"path-type@npm:^1.0.0": + version: 1.1.0 + resolution: "path-type@npm:1.1.0" + dependencies: + graceful-fs: ^4.1.2 + pify: ^2.0.0 + pinkie-promise: ^2.0.0 + checksum: 59a4b2c0e566baf4db3021a1ed4ec09a8b36fca960a490b54a6bcefdb9987dafe772852982b6011cd09579478a96e57960a01f75fa78a794192853c9d468fc79 + languageName: node + linkType: hard + "path-type@npm:^3.0.0": version: 3.0.0 resolution: "path-type@npm:3.0.0" @@ -20395,7 +21248,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"pify@npm:^2.3.0": +"pify@npm:^2.0.0, pify@npm:^2.3.0": version: 2.3.0 resolution: "pify@npm:2.3.0" checksum: 9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba @@ -20416,6 +21269,22 @@ fsevents@^1.2.7: languageName: node linkType: hard +"pinkie-promise@npm:^2.0.0": + version: 2.0.1 + resolution: "pinkie-promise@npm:2.0.1" + dependencies: + pinkie: ^2.0.0 + checksum: b53a4a2e73bf56b6f421eef711e7bdcb693d6abb474d57c5c413b809f654ba5ee750c6a96dd7225052d4b96c4d053cdcb34b708a86fceed4663303abee52fcca + languageName: node + linkType: hard + +"pinkie@npm:^2.0.0": + version: 2.0.4 + resolution: "pinkie@npm:2.0.4" + checksum: b12b10afea1177595aab036fc220785488f67b4b0fc49e7a27979472592e971614fa1c728e63ad3e7eb748b4ec3c3dbd780819331dad6f7d635c77c10537b9db + languageName: node + linkType: hard + "pirates@npm:^4.0.0, pirates@npm:^4.0.1, pirates@npm:^4.0.4": version: 4.0.5 resolution: "pirates@npm:4.0.5" @@ -21638,6 +22507,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"read-pkg-up@npm:^1.0.1": + version: 1.0.1 + resolution: "read-pkg-up@npm:1.0.1" + dependencies: + find-up: ^1.0.0 + read-pkg: ^1.0.0 + checksum: d18399a0f46e2da32beb2f041edd0cda49d2f2cc30195a05c759ef3ed9b5e6e19ba1ad1bae2362bdec8c6a9f2c3d18f4d5e8c369e808b03d498d5781cb9122c7 + languageName: node + linkType: hard + "read-pkg-up@npm:^3.0.0": version: 3.0.0 resolution: "read-pkg-up@npm:3.0.0" @@ -21659,6 +22538,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"read-pkg@npm:^1.0.0": + version: 1.1.0 + resolution: "read-pkg@npm:1.1.0" + dependencies: + load-json-file: ^1.0.0 + normalize-package-data: ^2.3.2 + path-type: ^1.0.0 + checksum: a0f5d5e32227ec8e6a028dd5c5134eab229768dcb7a5d9a41a284ed28ad4b9284fecc47383dc1593b5694f4de603a7ffaee84b738956b9b77e0999567485a366 + languageName: node + linkType: hard + "read-pkg@npm:^3.0.0": version: 3.0.0 resolution: "read-pkg@npm:3.0.0" @@ -21761,6 +22651,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"redent@npm:^1.0.0": + version: 1.0.0 + resolution: "redent@npm:1.0.0" + dependencies: + indent-string: ^2.1.0 + strip-indent: ^1.0.1 + checksum: 2bb8f76fda9c9f44e26620047b0ba9dd1834b0a80309d0badcc23fdcf7bb27a7ca74e66b683baa0d4b8cb5db787f11be086504036d63447976f409dd3e73fd7d + languageName: node + linkType: hard + "redent@npm:^3.0.0": version: 3.0.0 resolution: "redent@npm:3.0.0" @@ -22005,6 +22905,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"repeating@npm:^2.0.0": + version: 2.0.1 + resolution: "repeating@npm:2.0.1" + dependencies: + is-finite: ^1.0.0 + checksum: d2db0b69c5cb0c14dd750036e0abcd6b3c3f7b2da3ee179786b755cf737ca15fa0fff417ca72de33d6966056f4695440e680a352401fc02c95ade59899afbdd0 + languageName: node + linkType: hard + "replace-ext@npm:1.0.0": version: 1.0.0 resolution: "replace-ext@npm:1.0.0" @@ -22137,15 +23046,15 @@ fsevents@^1.2.7: linkType: hard "resolve@npm:^1.18.1": - version: 1.22.4 - resolution: "resolve@npm:1.22.4" + version: 1.22.6 + resolution: "resolve@npm:1.22.6" dependencies: is-core-module: ^2.13.0 path-parse: ^1.0.7 supports-preserve-symlinks-flag: ^1.0.0 bin: resolve: bin/resolve - checksum: 23f25174c2736ce24c6d918910e0d1f89b6b38fefa07a995dff864acd7863d59a7f049e691f93b4b2ee29696303390d921552b6d1b841ed4a8101f517e1d0124 + checksum: d13bf66d4e2ee30d291491f16f2fa44edd4e0cefb85d53249dd6f93e70b2b8c20ec62f01b18662e3cd40e50a7528f18c4087a99490048992a3bb954cf3201a5b languageName: node linkType: hard @@ -22176,15 +23085,15 @@ fsevents@^1.2.7: linkType: hard "resolve@patch:resolve@^1.18.1#~builtin": - version: 1.22.4 - resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin::version=1.22.4&hash=07638b" + version: 1.22.6 + resolution: "resolve@patch:resolve@npm%3A1.22.6#~builtin::version=1.22.6&hash=07638b" dependencies: is-core-module: ^2.13.0 path-parse: ^1.0.7 supports-preserve-symlinks-flag: ^1.0.0 bin: resolve: bin/resolve - checksum: c45f2545fdc4d21883861b032789e20aa67a2f2692f68da320cc84d5724cd02f2923766c5354b3210897e88f1a7b3d6d2c7c22faeead8eed7078e4c783a444bc + checksum: 9d3b3c67aefd12cecbe5f10ca4d1f51ea190891096497c43f301b086883b426466918c3a64f1bbf1788fabb52b579d58809614006c5d0b49186702b3b8fb746a languageName: node linkType: hard @@ -23507,6 +24416,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"strip-bom@npm:^2.0.0": + version: 2.0.0 + resolution: "strip-bom@npm:2.0.0" + dependencies: + is-utf8: ^0.2.0 + checksum: 08efb746bc67b10814cd03d79eb31bac633393a782e3f35efbc1b61b5165d3806d03332a97f362822cf0d4dd14ba2e12707fcff44fe1c870c48a063a0c9e4944 + languageName: node + linkType: hard + "strip-bom@npm:^3.0.0": version: 3.0.0 resolution: "strip-bom@npm:3.0.0" @@ -23535,6 +24453,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"strip-indent@npm:^1.0.1": + version: 1.0.1 + resolution: "strip-indent@npm:1.0.1" + dependencies: + get-stdin: ^4.0.1 + bin: + strip-indent: cli.js + checksum: 81ad9a0b8a558bdbd05b66c6c437b9ab364aa2b5479ed89969ca7908e680e21b043d40229558c434b22b3d640622e39b66288e0456d601981ac9289de9700fbd + languageName: node + linkType: hard + "strip-indent@npm:^3.0.0": version: 3.0.0 resolution: "strip-indent@npm:3.0.0" @@ -24354,6 +25283,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"trim-newlines@npm:^1.0.0": + version: 1.0.0 + resolution: "trim-newlines@npm:1.0.0" + checksum: ed96eea318581c6f894c0a98d0c4f16dcce11a41794ce140a79db55f1cab709cd9117578ee5e49a9b52f41e9cd93eaf3efa6c4bddbc77afbf91128b396fadbc1 + languageName: node + linkType: hard + "trim-newlines@npm:^3.0.0": version: 3.0.0 resolution: "trim-newlines@npm:3.0.0" @@ -25065,6 +26001,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"untildify@npm:^2.0.0": + version: 2.1.0 + resolution: "untildify@npm:2.1.0" + dependencies: + os-homedir: ^1.0.0 + checksum: 071b394053fc94747d9df8c7f7ca50af41355c1207c8a0bf9f35f52b0d9ad5142a1920b018bc2b6ff04340a4f9c599ad50c9b8f4ff2c689ae52b1463ebbda94e + languageName: node + linkType: hard + "upath@npm:2.0.1, upath@npm:^2.0.1": version: 2.0.1 resolution: "upath@npm:2.0.1" @@ -26042,6 +26987,20 @@ fsevents@^1.2.7: languageName: node linkType: hard +"x-default-browser@npm:^0.4.0": + version: 0.4.0 + resolution: "x-default-browser@npm:0.4.0" + dependencies: + default-browser-id: ^1.0.4 + dependenciesMeta: + default-browser-id: + optional: true + bin: + x-default-browser: bin/x-default-browser.js + checksum: 9649fe6b4b91de93d5a48a5042b55a6e15c87d2514bc4f2e12582f8b25c1a6810fafc6f4c454fb531540e431e32a0a26ac130e418c0ce5c6ca892fb01945ea9e + languageName: node + linkType: hard + "xcase@npm:^2.0.1": version: 2.0.1 resolution: "xcase@npm:2.0.1" From 6d52b05787cf465fe53ca0f2e005ee239986838c Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 20 Sep 2023 05:55:11 +0900 Subject: [PATCH 08/68] feat: create snapshot from storybook --- .../__snapshots__/PixivIcon.story.storyshot | 3322 +++++++++++++++++ .../__snapshots__/index.story.storyshot | 360 ++ .../__snapshots__/index.story.storyshot | 168 + .../__snapshots__/index.story.storyshot | 239 ++ .../__snapshots__/index.story.storyshot | 119 + .../__snapshots__/index.story.storyshot | 1297 +++++++ .../__snapshots__/index.story.storyshot | 1389 +++++++ .../Pager/__snapshots__/index.story.storyshot | 1647 ++++++++ .../__snapshots__/index.story.storyshot | 507 +++ .../__snapshots__/index.story.storyshot | 32 + .../__snapshots__/index.story.storyshot | 852 +++++ .../__snapshots__/index.story.storyshot | 1954 ++++++++++ .../__snapshots__/index.story.storyshot | 390 ++ .../__snapshots__/index.story.storyshot | 83 + .../__snapshots__/index.story.storyshot | 245 ++ .../__snapshots__/index.story.storyshot | 555 +++ .../__snapshots__/index.story.storyshot | 174 + .../__snapshots__/index.story.storyshot | 663 ++++ .../Icon/__snapshots__/index.story.storyshot | 12 + .../__snapshots__/index.story.storyshot | 233 ++ .../__snapshots__/index.story.storyshot | 81 + .../Modal/__snapshots__/index.story.storyshot | 400 ++ .../__snapshots__/index.story.storyshot | 511 +++ .../Radio/__snapshots__/index.story.storyshot | 319 ++ .../__snapshots__/index.story.storyshot | 483 +++ .../__snapshots__/index.story.storyshot | 454 +++ .../__snapshots__/index.story.storyshot | 1181 ++++++ .../__snapshots__/TextArea.story.storyshot | 1271 +++++++ .../__snapshots__/TextField.story.storyshot | 1800 +++++++++ .../__snapshots__/PixivIcon.story.storyshot | 3322 +++++++++++++++++ .../__snapshots__/index.story.storyshot | 360 ++ .../__snapshots__/index.story.storyshot | 168 + .../__snapshots__/index.story.storyshot | 239 ++ .../__snapshots__/index.story.storyshot | 119 + .../__snapshots__/index.story.storyshot | 1297 +++++++ .../__snapshots__/index.story.storyshot | 1389 +++++++ .../Pager/__snapshots__/index.story.storyshot | 1647 ++++++++ .../__snapshots__/index.story.storyshot | 507 +++ .../__snapshots__/index.story.storyshot | 32 + .../__snapshots__/index.story.storyshot | 852 +++++ .../__snapshots__/index.story.storyshot | 1954 ++++++++++ .../__snapshots__/index.story.storyshot | 390 ++ .../__snapshots__/index.story.storyshot | 83 + .../__snapshots__/index.story.storyshot | 245 ++ .../__snapshots__/index.story.storyshot | 555 +++ .../__snapshots__/index.story.storyshot | 174 + .../__snapshots__/index.story.storyshot | 663 ++++ .../Icon/__snapshots__/index.story.storyshot | 12 + .../__snapshots__/index.story.storyshot | 233 ++ .../__snapshots__/index.story.storyshot | 81 + .../Modal/__snapshots__/index.story.storyshot | 400 ++ .../__snapshots__/index.story.storyshot | 511 +++ .../Radio/__snapshots__/index.story.storyshot | 319 ++ .../__snapshots__/index.story.storyshot | 483 +++ .../__snapshots__/index.story.storyshot | 454 +++ .../__snapshots__/index.story.storyshot | 1181 ++++++ .../__snapshots__/TextArea.story.storyshot | 1271 +++++++ .../__snapshots__/TextField.story.storyshot | 1800 +++++++++ .../src/__snapshots__/index.story.storyshot | 776 ++++ .../__snapshots__/TextBgColor.story.storyshot | 17 + .../src/__snapshots__/index.story.storyshot | 776 ++++ .../__snapshots__/TextBgColor.story.storyshot | 17 + 62 files changed, 43068 insertions(+) create mode 100644 packages/icons/src/__snapshots__/PixivIcon.story.storyshot create mode 100644 packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/TextEllipsis/__snapshots__/index.story.storyshot create mode 100644 packages/react-sandbox/src/components/WithIcon/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Button/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Checkbox/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Clickable/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Icon/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/IconButton/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/LoadingSpinner/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Modal/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Radio/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/Switch/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/TagItem/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot create mode 100644 packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot create mode 100644 packages/react/src/components/packages/icons/src/__snapshots__/PixivIcon.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/TextEllipsis/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react-sandbox/src/components/WithIcon/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Button/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Checkbox/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Icon/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/LoadingSpinner/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Modal/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Radio/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/Switch/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot create mode 100644 packages/react/src/components/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot create mode 100644 packages/react/src/components/packages/styled/src/__snapshots__/index.story.storyshot create mode 100644 packages/react/src/components/packages/tailwind-config/src/docs/colors/__snapshots__/TextBgColor.story.storyshot create mode 100644 packages/styled/src/__snapshots__/index.story.storyshot create mode 100644 packages/tailwind-config/src/docs/colors/__snapshots__/TextBgColor.story.storyshot diff --git a/packages/icons/src/__snapshots__/PixivIcon.story.storyshot b/packages/icons/src/__snapshots__/PixivIcon.story.storyshot new file mode 100644 index 000000000..23f4a80b7 --- /dev/null +++ b/packages/icons/src/__snapshots__/PixivIcon.story.storyshot @@ -0,0 +1,3322 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Icons/PixivIcon () Default 1`] = ` +.c2 { + display: grid; + gap: 8px; + grid-template-columns: 1fr 1fr 1fr; +} + +.c0 + .c0 { + margin-top: 64px; +} + +.c3 { + color: #000000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 32px; +} + +.c3 pixiv-icon { + display: block; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c3 pixiv-icon + div { + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; + margin-left: 8px; + font-size: 14px; + line-height: 22px; +} + +.c1 { + font-size: 20px; + line-height: 28px; + font-weight: bold; + margin: 16px 0; +} + +
+
+

+ 16 + (scale: + 1 + ) +

+
+
+ +
+ 16/Add +
+
+
+ +
+ 16/ArrowDown +
+
+
+ +
+ 16/Artwork +
+
+
+ +
+ 16/Back +
+
+
+ +
+ 16/Book +
+
+
+ +
+ 16/BookmarkOff +
+
+
+ +
+ 16/BookmarkOn +
+
+
+ +
+ 16/Check +
+
+
+ +
+ 16/Comment +
+
+
+ +
+ 16/Dot +
+
+
+ +
+ 16/Error +
+
+
+ +
+ 16/Filter +
+
+
+ +
+ 16/ImageResponse +
+
+
+ +
+ 16/Info +
+
+
+ +
+ 16/Like +
+
+
+ +
+ 16/Menu +
+
+
+ +
+ 16/More +
+
+
+ +
+ 16/Pencil +
+
+
+ +
+ 16/Question +
+
+
+ +
+ 16/Ranking +
+
+
+ +
+ 16/Remove +
+
+
+ +
+ 16/Search +
+
+
+ +
+ 16/Smile +
+
+
+ +
+ 16/Speaker +
+
+
+ +
+ 16/View +
+
+
+
+
+

+ 24 + (scale: + 1 + ) +

+
+
+ +
+ 24/Add +
+
+
+ +
+ 24/AddImage +
+
+
+ +
+ 24/AddModel +
+
+
+ +
+ 24/AddPeople +
+
+
+ +
+ 24/AddRubi +
+
+
+ +
+ 24/AddText +
+
+
+ +
+ 24/Alart +
+
+
+ +
+ 24/Announcement +
+
+
+ +
+ 24/Ar +
+
+
+ +
+ 24/Archive +
+
+
+ +
+ 24/ArrowDown +
+
+
+ +
+ 24/ArrowUp +
+
+
+ +
+ 24/Binet +
+
+
+ +
+ 24/Body +
+
+
+ +
+ 24/BodyEdit +
+
+
+ +
+ 24/Book +
+
+
+ +
+ 24/BringBackward +
+
+
+ +
+ 24/BringForward +
+
+
+ +
+ 24/Calendar +
+
+
+ +
+ 24/Camera +
+
+
+ +
+ 24/CameraVideo +
+
+
+ +
+ 24/ChangeCharactor +
+
+
+ +
+ 24/ChatBot +
+
+
+ +
+ 24/Check +
+
+
+ +
+ 24/ChromaticAberration +
+
+
+ +
+ 24/Close +
+
+
+ +
+ 24/Codes +
+
+
+ +
+ 24/Collapse +
+
+
+ +
+ 24/CommentFill +
+
+
+ +
+ 24/CommentOutline +
+
+
+ +
+ 24/Contest +
+
+
+ +
+ 24/Contrast +
+
+
+ +
+ 24/Description +
+
+
+ +
+ 24/DeviceRotation +
+
+
+ +
+ 24/Discovery +
+
+
+ +
+ 24/Dot +
+
+
+ +
+ 24/DotAlt +
+
+
+ +
+ 24/Down +
+
+
+ +
+ 24/DownloadAlt +
+
+
+ +
+ 24/Duplicate +
+
+
+ +
+ 24/Dust +
+
+
+ +
+ 24/Emoji +
+
+
+ +
+ 24/Error +
+
+
+ +
+ 24/ErrorOctagon +
+
+
+ +
+ 24/Events +
+
+
+ +
+ 24/Expand +
+
+
+ +
+ 24/FaceEdit +
+
+
+ +
+ 24/Fashion +
+
+
+ +
+ 24/Feed +
+
+
+ +
+ 24/File +
+
+
+ +
+ 24/Filter +
+
+
+ +
+ 24/Flare +
+
+
+ +
+ 24/FormatAlignCenter +
+
+
+ +
+ 24/FormatAlignLeft +
+
+
+ +
+ 24/FormatAlignRight +
+
+
+ +
+ 24/FormatColorFill +
+
+
+ +
+ 24/FormatColorFillNoColor +
+
+
+ +
+ 24/FormatFontFamily +
+
+
+ +
+ 24/FormatFontSize +
+
+
+ +
+ 24/FormatLetterSpacing +
+
+
+ +
+ 24/FormatLineSpacing +
+
+
+ +
+ 24/Fov +
+
+
+ +
+ 24/FrameEffect +
+
+
+ +
+ 24/FrameSize +
+
+
+ +
+ 24/Gift +
+
+
+ +
+ 24/Glow +
+
+
+ +
+ 24/Groups +
+
+
+ +
+ 24/HairEdit +
+
+
+ +
+ 24/Hashtag +
+
+
+ +
+ 24/Hide +
+
+
+ +
+ 24/Home +
+
+
+ +
+ 24/Hue +
+
+
+ +
+ 24/Idea +
+
+
+ +
+ 24/Image +
+
+
+ +
+ 24/ImageAlt +
+
+
+ +
+ 24/ImageHidden +
+
+
+ +
+ 24/ImageReplace +
+
+
+ +
+ 24/Images +
+
+
+ +
+ 24/ImgContain +
+
+
+ +
+ 24/ImgCover +
+
+
+ +
+ 24/Index +
+
+
+ +
+ 24/Info +
+
+
+ +
+ 24/Invalid +
+
+
+ +
+ 24/Invoice +
+
+
+ +
+ 24/ItemRemove +
+
+
+ +
+ 24/LatestWorks +
+
+
+ +
+ 24/LikeOff +
+
+
+ +
+ 24/LikeOn +
+
+
+ +
+ 24/Link +
+
+
+ +
+ 24/List +
+
+
+ +
+ 24/LockLock +
+
+
+ +
+ 24/LockUnlock +
+
+
+ +
+ 24/Logout +
+
+
+ +
+ 24/Manga +
+
+
+ +
+ 24/Menu +
+
+
+ +
+ 24/Message +
+
+
+ +
+ 24/Microphone +
+
+
+ +
+ 24/MobilePhone +
+
+
+ +
+ 24/Move1 +
+
+
+ +
+ 24/Next +
+
+
+ +
+ 24/NoImage +
+
+
+ +
+ 24/Notification +
+
+
+ +
+ 24/NotificationOff +
+
+
+ +
+ 24/Novels +
+
+
+ +
+ 24/OpenInNew +
+
+
+ +
+ 24/Options +
+
+
+ +
+ 24/OptionsAlt +
+
+
+ +
+ 24/Overlay +
+
+
+ +
+ 24/Palette +
+
+
+ +
+ 24/Pause +
+
+
+ +
+ 24/PauseAlt +
+
+
+ +
+ 24/Pencil +
+
+
+ +
+ 24/PencilDraw +
+
+
+ +
+ 24/PencilLive +
+
+
+ +
+ 24/PencilText +
+
+
+ +
+ 24/Person +
+
+
+ +
+ 24/Play +
+
+
+ +
+ 24/Pose +
+
+
+ +
+ 24/Prev +
+
+
+ +
+ 24/Projects +
+
+
+ +
+ 24/PullDown +
+
+
+ +
+ 24/PullUp +
+
+
+ +
+ 24/Question +
+
+
+ +
+ 24/QuestionOutline +
+
+
+ +
+ 24/Ranking +
+
+
+ +
+ 24/ReadHorizontalLeft +
+
+
+ +
+ 24/ReadHorizontalRight +
+
+
+ +
+ 24/ReadVertical +
+
+
+ +
+ 24/Reload +
+
+
+ +
+ 24/ReloadLoop +
+
+
+ +
+ 24/Reorder +
+
+
+ +
+ 24/Roll +
+
+
+ +
+ 24/Rotate90DegreesC +
+
+
+ +
+ 24/Rotate90DegreesCc +
+
+
+ +
+ 24/RotateRight +
+
+
+ +
+ 24/Saturation +
+
+
+ +
+ 24/Save +
+
+
+ +
+ 24/Search +
+
+
+ +
+ 24/Send +
+
+
+ +
+ 24/Services +
+
+
+ +
+ 24/Set +
+
+
+ +
+ 24/Settings +
+
+
+ +
+ 24/ShareAndroid +
+
+
+ +
+ 24/ShareIos +
+
+
+ +
+ 24/Shopping +
+
+
+ +
+ 24/Show +
+
+
+ +
+ 24/ShowOutline +
+
+
+ +
+ 24/Shutter +
+
+
+ +
+ 24/Star +
+
+
+ +
+ 24/Subtract +
+
+
+ +
+ 24/Sun +
+
+
+ +
+ 24/Temperature +
+
+
+ +
+ 24/Text +
+
+
+ +
+ 24/Trash +
+
+
+ +
+ 24/TrashAlt +
+
+
+ +
+ 24/Up +
+
+
+ +
+ 24/Upload +
+
+
+ +
+ 24/UploadAlt +
+
+
+ +
+ 24/Usagi +
+
+
+ +
+ 24/UsagiAlt +
+
+
+ +
+ 24/Users +
+
+
+ +
+ 24/Video +
+
+
+ +
+ 24/ViewGrid2Columns +
+
+
+ +
+ 24/ViewGrid3Columns +
+
+
+ +
+ 24/ViewList +
+
+
+ +
+ 24/Warning +
+
+
+
+
+

+ 32 + (scale: + 1 + ) +

+
+
+ +
+ 32/BookmarkOff +
+
+
+ +
+ 32/BookmarkOn +
+
+
+ +
+ 32/Camera +
+
+
+ +
+ 32/Close +
+
+
+ +
+ 32/Collapse +
+
+
+ +
+ 32/CommentOff +
+
+
+ +
+ 32/CommentOn +
+
+
+ +
+ 32/Delete +
+
+
+ +
+ 32/Dot +
+
+
+ +
+ 32/Edit +
+
+
+ +
+ 32/Expand +
+
+
+ +
+ 32/Gift +
+
+
+ +
+ 32/Home +
+
+
+ +
+ 32/HorizontalWriting +
+
+
+ +
+ 32/Index +
+
+
+ +
+ 32/LikeOff +
+
+
+ +
+ 32/LikeOn +
+
+
+ +
+ 32/LikeOnPrivate +
+
+
+ +
+ 32/Message +
+
+
+ +
+ 32/Next +
+
+
+ +
+ 32/Notification +
+
+
+ +
+ 32/NotificationOff +
+
+
+ +
+ 32/NovelViewerSettings +
+
+
+ +
+ 32/Pan +
+
+
+ +
+ 32/Prev +
+
+
+ +
+ 32/PullDown +
+
+
+ +
+ 32/PullUp +
+
+
+ +
+ 32/ReadHorizontalLeft +
+
+
+ +
+ 32/ReadHorizontalRight +
+
+
+ +
+ 32/ReadVertical +
+
+
+ +
+ 32/RollHorizontal +
+
+
+ +
+ 32/RollVertical +
+
+
+ +
+ 32/SansSerif +
+
+
+ +
+ 32/Serif +
+
+
+ +
+ 32/ShareAndroid +
+
+
+ +
+ 32/ShareIos +
+
+
+ +
+ 32/Shopping +
+
+
+ +
+ 32/Upload +
+
+
+ +
+ 32/User +
+
+
+ +
+ 32/VerticalWriting +
+
+
+ +
+ 32/ZoomIn +
+
+
+
+
+

+ Inline + (scale: + 1 + ) +

+
+
+ +
+ Inline/Add +
+
+
+ +
+ Inline/BookmarkOff +
+
+
+ +
+ Inline/BookmarkOn +
+
+
+ +
+ Inline/Breadcrumbs +
+
+
+ +
+ Inline/Check +
+
+
+ +
+ Inline/Comment +
+
+
+ +
+ Inline/ContextMenu +
+
+
+ +
+ Inline/External +
+
+
+ +
+ Inline/Filter +
+
+
+ +
+ Inline/Folder +
+
+
+ +
+ Inline/ImageResponse +
+
+
+ +
+ Inline/Images +
+
+
+ +
+ Inline/Like +
+
+
+ +
+ Inline/LikeOff +
+
+
+ +
+ Inline/List +
+
+
+ +
+ Inline/Location +
+
+
+ +
+ Inline/Lock +
+
+
+ +
+ Inline/More +
+
+
+ +
+ Inline/Nextworks +
+
+
+ +
+ Inline/OpenInNew +
+
+
+ +
+ Inline/Pencil +
+
+
+ +
+ Inline/Remove +
+
+
+ +
+ Inline/Smile +
+
+
+ +
+ Inline/SmileOn +
+
+
+ +
+ Inline/Users +
+
+
+ +
+ Inline/View +
+
+
+ +
+ Inline/ViewOutline +
+
+
+
+
+`; + +exports[`Storyshots Icons/PixivIcon () With Attributes 1`] = ` +.c0 { + color: #000000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 32px; +} + +.c0 pixiv-icon { + display: block; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 pixiv-icon + div { + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; + margin-left: 8px; + font-size: 14px; + line-height: 22px; +} + +
+
+ +
+ アイコンと文字 +
+
+
+`; + +exports[`Storyshots Icons/PixivIcon () With Unsafe 1`] = ` +.c0 { + color: #000000; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 32px; +} + +.c0 pixiv-icon { + display: block; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c0 pixiv-icon + div { + -webkit-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; + margin-left: 8px; + font-size: 14px; + line-height: 22px; +} + +
+
+ + アイコンと文字 +
+
+`; diff --git a/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..bf7aae142 --- /dev/null +++ b/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot @@ -0,0 +1,360 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Carousel Carousel 1`] = ` +.c12 { + stroke: none; + fill: currentColor; + width: 24px; + height: 24px; + line-height: 0; + font-size: 0; + vertical-align: middle; +} + +.c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(0,0,0,0.32); + -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + color: #ffffff; +} + +.c9 { + position: absolute; + top: 0; + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + min-width: 40px; + border: none; + outline: 0; + background: transparent; + cursor: pointer; + -webkit-transition: 0.4s visibility,0.4s opacity; + transition: 0.4s visibility,0.4s opacity; + z-index: 1; + visibility: hidden; + opacity: 0; + pointer-events: none; +} + +.c9:hover .c10 { + background-color: rgba(0,0,0,0.3472); + color: #f5f5f5; +} + +.c9:active .c10 { + background-color: rgba(0,0,0,0.4288); + color: #d6d6d6; +} + +.c3 { + vertical-align: top; + overflow: hidden; + list-style: none; + padding: 0; + min-width: 100%; + box-sizing: border-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin: 0; +} + +.c8 { + opacity: 0; + -webkit-transition: 0.4s opacity; + transition: 0.4s opacity; +} + +.c1 { + position: relative; + z-index: 0; +} + +.c1:hover .c7 { + opacity: 1; +} + +.c2 { + overflow-x: auto; + padding: 0; + margin: 0; + -webkit-scrollbar-width: none; + -moz-scrollbar-width: none; + -ms-scrollbar-width: none; + scrollbar-width: none; +} + +.c2::-webkit-scrollbar { + display: none; +} + +.c5 { + background-color: rgba(0,0,0,0.02); + border-radius: 8px; + color: #adadad; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 14px; + font-weight: bold; +} + +.c0 { + width: 100%; + padding: 0 108px; + box-sizing: border-box; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0 16px; +} + +.c4 > * + * { + margin-left: 4px; +} + +.c6 { + width: 118px; + height: 118px; +} + +
+
+
+
+
    +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    + Dummy +
    +
    +
+
+
+ + +
+
+
+
+`; diff --git a/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..cc24031aa --- /dev/null +++ b/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot @@ -0,0 +1,168 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Carousel/CarouselButton Carousel Button 1`] = ` +.c3 { + stroke: none; + fill: currentColor; + width: 24px; + height: 24px; + line-height: 0; + font-size: 0; + vertical-align: middle; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(0,0,0,0.32); + -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + color: #ffffff; +} + +.c0 { + position: absolute; + top: 0; + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + min-width: 40px; + border: none; + outline: 0; + background: transparent; + cursor: pointer; + -webkit-transition: 0.4s visibility,0.4s opacity; + transition: 0.4s visibility,0.4s opacity; + z-index: 1; +} + +.c0:hover .c1 { + background-color: rgba(0,0,0,0.3472); + color: #f5f5f5; +} + +.c0:active .c1 { + background-color: rgba(0,0,0,0.4288); + color: #d6d6d6; +} + +
+ +
+`; + +exports[`Storyshots Sandbox/Carousel/CarouselButton Scroll Hint Button 1`] = ` +.c2 { + stroke: none; + fill: currentColor; + width: 24px; + height: 24px; + line-height: 0; + font-size: 0; + vertical-align: middle; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: rgba(0,0,0,0.32); + -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; + color: #ffffff; +} + +.c1 { + cursor: pointer; +} + +.c1:hover { + background-color: rgba(0,0,0,0.3472); + color: #f5f5f5; +} + +.c1:active { + background-color: rgba(0,0,0,0.4288); + color: #d6d6d6; +} + +
+
+ + + +
+
+`; diff --git a/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..b6eda9cad --- /dev/null +++ b/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot @@ -0,0 +1,239 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Filter Button 1`] = ` +.c0 { + display: block; + outline: none; + border: none; + padding: 9px 24px; + font-size: 14px; + line-height: 22px; + font-weight: bold; + border-radius: 2000px; + -webkit-transition: color 0.2s; + transition: color 0.2s; + color: #858585; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + background-color: rgba(0,0,0,0.04); + color: #474747; + cursor: default; +} + +.c0:hover { + color: #474747; +} + +@media (max-width:743px) { + .c0 { + padding: 5px 16px; + } +} + +
+ +
+`; + +exports[`Storyshots Sandbox/Filter Default 1`] = ` +.c3 { + display: block; + outline: none; + border: none; + padding: 9px 24px; + font-size: 14px; + line-height: 22px; + font-weight: bold; + border-radius: 2000px; + -webkit-transition: color 0.2s; + transition: color 0.2s; + color: #858585; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; +} + +.c3:hover { + color: #474747; +} + +.c1 { + display: block; + outline: none; + border: none; + padding: 9px 24px; + font-size: 14px; + line-height: 22px; + font-weight: bold; + border-radius: 2000px; + -webkit-transition: color 0.2s; + transition: color 0.2s; + color: #858585; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; +} + +.c1:hover { + color: #474747; +} + +.c2 { + display: block; + outline: none; + border: none; + padding: 9px 24px; + font-size: 14px; + line-height: 22px; + font-weight: bold; + border-radius: 2000px; + -webkit-transition: color 0.2s; + transition: color 0.2s; + color: #858585; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + background-color: rgba(0,0,0,0.04); + color: #474747; + cursor: default; +} + +.c2:hover { + color: #474747; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +@media (max-width:743px) { + .c3 { + padding: 5px 16px; + } +} + +@media (max-width:743px) { + .c1 { + padding: 5px 16px; + } +} + +@media (max-width:743px) { + .c2 { + padding: 5px 16px; + } +} + +
+
+ + + 新しい順 + + + + 古い順 + + + + + これはリンク + + + +
+
+`; + +exports[`Storyshots Sandbox/Filter Link 1`] = ` +.c0 { + display: block; + outline: none; + border: none; + padding: 9px 24px; + font-size: 14px; + line-height: 22px; + font-weight: bold; + border-radius: 2000px; + -webkit-transition: color 0.2s; + transition: color 0.2s; + color: #858585; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + background-color: rgba(0,0,0,0.04); + color: #474747; + cursor: default; +} + +.c0:hover { + color: #474747; +} + +@media (max-width:743px) { + .c0 { + padding: 5px 16px; + } +} + +
+ + Label + +
+`; diff --git a/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..ddc03dda7 --- /dev/null +++ b/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot @@ -0,0 +1,119 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/HintText Default 1`] = ` +.c2 { + stroke: none; + fill: currentColor; + width: 16px; + height: 16px; + line-height: 0; + font-size: 0; + vertical-align: middle; +} + +.c3 { + fill: #ffffff; + fill-rule: evenodd; +} + +.c0 { + background-color: var(--charcoal-surface3); + border-radius: 8px; + padding-top: 16px; + padding-bottom: 16px; + padding-right: 16px; + padding-left: 16px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #adadad; + height: 22px; + margin: -4px 4px -4px 0; +} + +.c4 { + color: var(--charcoal-text2); + font-size: 14px; + line-height: 22px; + display: flow-root; + margin: 0; +} + +.c4::before { + display: block; + width: 0; + height: 0; + content: ''; + margin-top: -4px; +} + +.c4::after { + display: block; + width: 0; + height: 0; + content: ''; + margin-bottom: -4px; +} + +@media (max-width:743px) { + .c0 { + padding-top: 16px; + padding-bottom: 16px; + padding-right: 16px; + padding-left: 16px; + } +} + +
+
+
+ + + + +
+

+ ヒントテキストだよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお +

+
+
+`; diff --git a/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..137aca440 --- /dev/null +++ b/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot @@ -0,0 +1,1297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Layout Basic 1`] = ` +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #858585; + border-radius: 24px; + font-weight: bold; + font-size: 14px; + line-height: 22px; + padding: 0 16px; + height: 40px; + -webkit-transition: 0.2s color; + transition: 0.2s color; +} + +.c3:hover { + -webkit-transition: 0.2s color; + transition: 0.2s color; + color: #474747; +} + +.c3[aria-current] { + color: #474747; + background-color: rgba(0,0,0,0.04); +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #f5f5f5; +} + +.c1 { + min-width: 208px; + padding: 40px 0 40px 24px; + box-sizing: border-box; +} + +.c4 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + max-width: 1224px; + padding: 40px 72px; + margin: 0 auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c5 { + font-weight: bold; + margin-bottom: 12px; + font-size: 20px; + line-height: 28px; + color: #474747; +} + +.c6 { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-rows: auto; +} + +.c7 { + grid-column-start: auto; + grid-column-end: span 3; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c11 { + grid-column-start: auto; + grid-column-end: span 2; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c12 { + grid-column-start: auto; + grid-column-end: span 1; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c8 { + padding: 0 24px; + height: 48px; + display: grid; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 16px; + line-height: 24px; + font-weight: bold; + background-color: rgba(0,0,0,0.02); + color: #474747; + border-radius: 24px 24px 0 0; +} + +.c9 { + padding: 24px 24px; + width: 100%; + box-sizing: border-box; +} + +.c10 { + height: 184px; + color: #adadad; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 14px; + font-weight: bold; +} + +@media (max-width:743px) { + .c0 { + background-color: #ffffff; + } +} + +@media 1160 { + .c1 { + display: none; + } +} + +@media (max-width:743px) { + .c4 { + padding: 0; + } +} + +@media (max-width:743px) { + .c5 { + margin-bottom: 0; + padding: 12px; + font-size: 16px; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: rgba(0,0,0,0.02); + } +} + +@media (max-width:743px) { + .c6 { + gap: 0; + background-color: #ffffff; + padding-bottom: 60px; + } +} + +@media 1368 { + .c7 { + grid-column-end: span 2; + } +} + +@media (max-width:743px) { + .c7 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media 1368 { + +} + +@media (max-width:743px) { + .c11 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media 1368 { + +} + +@media (max-width:743px) { + .c12 { + border-radius: 0; + padding-bottom: 40px; + } +} + +@media (max-width:743px) { + .c8 { + margin-top: 4px; + padding: 0 16px; + background: none; + overflow-x: auto; + border-radius: unset; + } +} + +@media (max-width:743px) { + .c9 { + padding: 16px 16px 0; + } +} + +
+
+ +
+
+ Header +
+
+
+
+ Dummy +
+
+
+ Span 3 +
+
+
+
+
+ Dummy +
+
+
+ Span 2 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+
+
+`; + +exports[`Storyshots Sandbox/Layout Center 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #f5f5f5; +} + +.c1 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + max-width: 600px; + padding: 40px 72px; + margin: 0 auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + font-weight: bold; + margin-bottom: 12px; + font-size: 20px; + line-height: 28px; + color: #474747; +} + +.c3 { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-rows: auto; +} + +.c4 { + grid-column-start: auto; + grid-column-end: span 3; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c5 { + padding: 0 40px; + height: 64px; + display: grid; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 16px; + line-height: 24px; + font-weight: bold; + background-color: rgba(0,0,0,0.02); + color: #474747; + border-radius: 24px 24px 0 0; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c6 { + padding: 40px 40px; + width: 100%; + box-sizing: border-box; +} + +.c7 { + height: 184px; + color: #adadad; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 14px; + font-weight: bold; +} + +@media (max-width:743px) { + .c0 { + background-color: #ffffff; + } +} + +@media (max-width:743px) { + .c1 { + padding: 0; + } +} + +@media (max-width:743px) { + .c2 { + margin-bottom: 0; + padding: 12px; + font-size: 16px; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: rgba(0,0,0,0.02); + } +} + +@media (max-width:743px) { + .c3 { + gap: 0; + background-color: #ffffff; + padding-bottom: 60px; + } +} + +@media 1160 { + .c4 { + grid-column-end: span 2; + } +} + +@media (max-width:743px) { + .c4 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media (max-width:743px) { + .c5 { + margin-top: 4px; + padding: 0 16px; + background: none; + overflow-x: auto; + border-radius: unset; + height: 48px; + margin-top: 0; + } +} + +@media (max-width:743px) { + .c6 { + padding: 16px 16px 0; + } +} + +
+
+
+
+ Header +
+
+
+
+ Center +
+
+
+ Hello, Flexible Grid Layout! +
+
+
+
+
+
+
+`; + +exports[`Storyshots Sandbox/Layout No Menu 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #f5f5f5; +} + +.c1 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + max-width: 1224px; + padding: 40px 72px; + margin: 0 auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + font-weight: bold; + margin-bottom: 12px; + font-size: 20px; + line-height: 28px; + color: #474747; +} + +.c3 { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-rows: auto; +} + +.c4 { + grid-column-start: auto; + grid-column-end: span 3; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c8 { + grid-column-start: auto; + grid-column-end: span 2; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c9 { + grid-column-start: auto; + grid-column-end: span 1; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c5 { + padding: 0 24px; + height: 48px; + display: grid; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 16px; + line-height: 24px; + font-weight: bold; + background-color: rgba(0,0,0,0.02); + color: #474747; + border-radius: 24px 24px 0 0; +} + +.c6 { + padding: 24px 24px; + width: 100%; + box-sizing: border-box; +} + +.c7 { + height: 184px; + color: #adadad; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 14px; + font-weight: bold; +} + +@media (max-width:743px) { + .c0 { + background-color: #ffffff; + } +} + +@media (max-width:743px) { + .c1 { + padding: 0; + } +} + +@media (max-width:743px) { + .c2 { + margin-bottom: 0; + padding: 12px; + font-size: 16px; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: rgba(0,0,0,0.02); + } +} + +@media (max-width:743px) { + .c3 { + gap: 0; + background-color: #ffffff; + padding-bottom: 60px; + } +} + +@media 1160 { + .c4 { + grid-column-end: span 2; + } +} + +@media (max-width:743px) { + .c4 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media 1160 { + +} + +@media (max-width:743px) { + .c8 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media 1160 { + +} + +@media (max-width:743px) { + .c9 { + border-radius: 0; + padding-bottom: 40px; + } +} + +@media (max-width:743px) { + .c5 { + margin-top: 4px; + padding: 0 16px; + background: none; + overflow-x: auto; + border-radius: unset; + } +} + +@media (max-width:743px) { + .c6 { + padding: 16px 16px 0; + } +} + +
+
+
+
+ Header +
+
+
+
+ Dummy +
+
+
+ Span 3 +
+
+
+
+
+ Dummy +
+
+
+ Span 2 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+ Dummy +
+
+
+ Span 1 +
+
+
+
+
+
+
+`; + +exports[`Storyshots Sandbox/Layout Wide 1`] = ` +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #858585; + border-radius: 24px; + font-weight: bold; + font-size: 14px; + line-height: 22px; + padding: 0 16px; + height: 40px; + -webkit-transition: 0.2s color; + transition: 0.2s color; +} + +.c3:hover { + -webkit-transition: 0.2s color; + transition: 0.2s color; + color: #474747; +} + +.c3[aria-current] { + color: #474747; + background-color: rgba(0,0,0,0.04); +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #f5f5f5; +} + +.c1 { + min-width: 208px; + padding: 40px 0 40px 24px; + box-sizing: border-box; +} + +.c4 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + min-width: 0; + max-width: 1224px; + padding: 40px 72px; + margin: 0 auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c5 { + font-weight: bold; + margin-bottom: 12px; + font-size: 20px; + line-height: 28px; + color: #474747; +} + +.c6 { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + grid-auto-columns: 1fr; + grid-auto-rows: auto; +} + +.c7 { + grid-column-start: auto; + grid-column-end: span 3; + border-radius: 24px; + color: #474747; + background-color: #ffffff; + min-width: 0; +} + +.c8 { + padding: 0 40px; + height: 64px; + display: grid; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 16px; + line-height: 24px; + font-weight: bold; + background-color: rgba(0,0,0,0.02); + color: #474747; + border-radius: 24px 24px 0 0; +} + +.c9 { + padding: 40px 40px; + width: 100%; + box-sizing: border-box; +} + +.c10 { + height: 184px; + color: #adadad; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 14px; + font-weight: bold; +} + +@media (max-width:743px) { + .c0 { + background-color: #ffffff; + } +} + +@media 1160 { + .c1 { + display: none; + } +} + +@media (max-width:743px) { + .c4 { + padding: 0; + } +} + +@media (max-width:743px) { + .c5 { + margin-bottom: 0; + padding: 12px; + font-size: 16px; + line-height: 24px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + background-color: rgba(0,0,0,0.02); + } +} + +@media (max-width:743px) { + .c6 { + gap: 0; + background-color: #ffffff; + padding-bottom: 60px; + } +} + +@media 1368 { + .c7 { + grid-column-end: span 2; + } +} + +@media (max-width:743px) { + .c7 { + grid-column-end: span 1; + border-radius: 0; + padding-bottom: 40px; + } +} + +@media (max-width:743px) { + .c8 { + margin-top: 4px; + padding: 0 16px; + background: none; + overflow-x: auto; + border-radius: unset; + height: 48px; + margin-top: 0; + } +} + +@media (max-width:743px) { + .c9 { + padding: 16px 16px 0; + } +} + +
+
+ +
+
+ Header +
+
+
+
+ Wide +
+
+
+ Hello, Flexible Grid Layout! +
+
+
+
+
+
+
+`; diff --git a/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..ae7197341 --- /dev/null +++ b/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot @@ -0,0 +1,1389 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/MenuListItem Default 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +
+
+
+
+
+ Knob to change +
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Disabled 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +
+
+
+
+
+ Disabled item +
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Hard Link 1`] = ` +.c4 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c1:hover { + background-color: rgba(0,0,0,0.04); +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c1:disabled:hover, +.c1[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c0 { + display: block; +} + + +`; + +exports[`Storyshots Sandbox/MenuListItem Icon 1`] = ` +.c4 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c1:hover { + background-color: rgba(0,0,0,0.04); +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c1:disabled:hover, +.c1[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c0 { + display: block; +} + +.c5 { + display: grid; + gap: 8px; + grid-auto-flow: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c6 { + color: #858585; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c7 { + display: inline-block; + width: 24px; + height: 24px; + background-color: currentColor; +} + +
+ + +`; + +exports[`Storyshots Sandbox/MenuListItem Inline Icon 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c5 { + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + visibility: visible; + margin-left: 4px; +} + +.c7 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c7 > svg { + display: block; +} + +.c8 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: top; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c8::before { + content: ''; + display: inline-block; + height: 16px; + width: 16px; + background-color: currentColor; +} + +
+
+
+
+
+
+
+ Label with inline icon +
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Label 1`] = ` +.c4 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c1:hover { + background-color: rgba(0,0,0,0.04); +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c1:disabled:hover, +.c1[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c0 { + padding: 0 16px; + font-size: 12px; + line-height: 16px; + color: #858585; + margin-top: -2px; + margin-bottom: 6px; +} + +
+
+ Label +
+
+
+
+
+ Label grouped items +
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Link 1`] = ` +.c4 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c1:hover { + background-color: rgba(0,0,0,0.04); +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c1:disabled, +.c1[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c1:disabled:hover, +.c1[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c3 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c0 { + display: block; +} + + +`; + +exports[`Storyshots Sandbox/MenuListItem No Hover Effect 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + cursor: pointer; + outline: 0; +} + +.c4[aria-disabled='true'] { + cursor: auto; +} + +.c5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + z-index: 0; +} + +.c8 { + position: relative; + box-sizing: border-box; + width: 28px; + height: 16px; + border-radius: 16px; + border: 2px solid transparent; + background: #adadad; + -webkit-transition: box-shadow 0.2s,background-color 0.2s; + transition: box-shadow 0.2s,background-color 0.2s; +} + +.c10 { + position: absolute; + display: block; + top: 0; + left: 0; + width: 12px; + height: 12px; + background-color: #ffffff; + border-radius: 50%; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-transition: -webkit-transform 0.2s; + -webkit-transition: transform 0.2s; + transition: transform 0.2s; +} + +.c6 { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 16px; + opacity: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: none; + cursor: pointer; +} + +.c6:checked ~ .c7 { + background-color: #0096fa; +} + +.c6:checked ~ .c7 .c9 { + -webkit-transform: translateX(12px); + -ms-transform: translateX(12px); + transform: translateX(12px); +} + +.c6:disabled { + cursor: auto; +} + +.c6:disabled ~ .c7 { + opacity: 0.32; +} + +.c6:not(:disabled):focus ~ .c7 { + box-shadow: 0 0 0 4px rgba(0,150,250,0.32); +} + +
+
+
+
+
+ With toggle (no hover effect) +
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Simple 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 56px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c4 { + color: #858585; + line-height: 18px; + font-size: 10px; +} + +
+
+
+
+
+ Simple item +
+
+
+
+ with secondary +
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Spacer 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +.c4 { + height: 24px; +} + +
+
+
+
+
+ ↓ This is spacer +
+
+
+
+
+
+
+
+
+ ↑ This is spacer +
+
+
+
+
+`; + +exports[`Storyshots Sandbox/MenuListItem Text Ellipsis 1`] = ` +.c3 { + overflow: hidden; + line-height: 22px; + overflow-wrap: break-word; + text-overflow: ellipsis; + white-space: nowrap; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 40px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 24px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-transition: 0.2s background-color; + transition: 0.2s background-color; +} + +.c0:hover { + background-color: rgba(0,0,0,0.04); +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + opacity: 0.32; +} + +.c0:disabled, +.c0[aria-disabled]:not([aria-disabled=false]) { + cursor: default; + pointer-events: none; +} + +.c0:disabled:hover, +.c0[aria-disabled]:not([aria-disabled=false]):hover { + background-color: unset; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + color: #474747; + line-height: 22px; + font-size: 14px; + display: grid; +} + +
+
+
+
+
+
+ Loooooooooooooooooooooooooong texxxxxxxxxxxxxxxxxxxxxxxxxt +
+
+
+
+
+
+`; diff --git a/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..7fa5d224f --- /dev/null +++ b/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot @@ -0,0 +1,1647 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Pager Collapsed With Dots 1`] = ` +.c5 { + fill: currentColor; +} + +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c4.c4 { + color: #858585; + background: none; +} + + +`; + +exports[`Storyshots Sandbox/Pager Default 1`] = ` +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +
+ +
+`; + +exports[`Storyshots Sandbox/Pager Last Page 1`] = ` +.c5 { + fill: currentColor; +} + +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c4.c4 { + color: #858585; + background: none; +} + + +`; + +exports[`Storyshots Sandbox/Pager Link 1`] = ` +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + + +`; + +exports[`Storyshots Sandbox/Pager Not Collapsed 1`] = ` +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + + +`; + +exports[`Storyshots Sandbox/Pager One 1`] = ` +.c2 { + fill: none; + stroke-linejoin: round; + stroke-linecap: round; + stroke: currentColor; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c1[hidden] { + visibility: hidden; + display: block; +} + +.c1:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c1[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c1:hover { + background: transparent; +} + +.c3 { + font-size: 1rem; + line-height: calc(1em + 8px); + -webkit-text-decoration: none; + text-decoration: none; + border: none; + outline: none; + touch-action: manipulation; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: content-box; + min-width: 24px; + min-height: 24px; + padding: 8px; + cursor: pointer; + font-weight: bold; + -webkit-transform: translateZ(0); + border-radius: 48px; + background: transparent; + color: #858585; +} + +.c3[hidden] { + visibility: hidden; + display: block; +} + +.c3:hover { + background: rgba(0,0,0,0.04); + color: #474747; +} + +.c3[aria-current] { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +.c3[aria-current]:hover { + background-color: rgba(0,0,0,0.88); + color: #ffffff; +} + +
+ +
+`; diff --git a/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot new file mode 100644 index 000000000..d203c761c --- /dev/null +++ b/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot @@ -0,0 +1,507 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Sandbox/Selection Control/SwitchCheckbox Default 1`] = ` +.c7 { + margin-left: 8px; +} + +.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + cursor: pointer; + outline: 0; +} + +.c0[aria-disabled='true'] { + cursor: auto; +} + +.c1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + z-index: 0; +} + +.c4 { + position: relative; + box-sizing: border-box; + width: 28px; + height: 16px; + border-radius: 16px; + border: 2px solid transparent; + background: #adadad; + -webkit-transition: box-shadow 0.2s,background-color 0.2s; + transition: box-shadow 0.2s,background-color 0.2s; +} + +.c6 { + position: absolute; + display: block; + top: 0; + left: 0; + width: 12px; + height: 12px; + background-color: #ffffff; + border-radius: 50%; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-transition: -webkit-transform 0.2s; + -webkit-transition: transform 0.2s; + transition: transform 0.2s; +} + +.c2 { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 16px; + opacity: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: none; + cursor: pointer; +} + +.c2:checked ~ .c3 { + background-color: #0096fa; +} + +.c2:checked ~ .c3 .c5 { + -webkit-transform: translateX(12px); + -ms-transform: translateX(12px); + transform: translateX(12px); +} + +.c2:disabled { + cursor: auto; +} + +.c2:disabled ~ .c3 { + opacity: 0.32; +} + +.c2:not(:disabled):focus ~ .c3 { + box-shadow: 0 0 0 4px rgba(0,150,250,0.32); +} + +
+