diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 5ef8e3827..c165f05a6 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -44,7 +44,9 @@ jobs: cache: yarn - run: yarn install --immutable --inline-builds - - run: yarn test + - run: | + yarn test + yarn storyshots env: CI: 'true' 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__/mdx.ts b/__mocks__/mdx.ts new file mode 100644 index 000000000..37146aeea --- /dev/null +++ b/__mocks__/mdx.ts @@ -0,0 +1 @@ +export default '' 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/docs/yarn.lock b/docs/yarn.lock index 3903c536e..751f4e891 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -162,38 +162,38 @@ __metadata: linkType: hard "@charcoal-ui/foundation@file:../packages/foundation::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=f171f8&locator=charcoal-web-docs%40workspace%3A." - checksum: c870992f52889299bf7f6822aea364ab5fda2eaa45aba8215ba84c3c26951cf153dd6b02bcc4ff2d7a70807ac962bbfd73f43cec707b7ed788e0b12b79ca7267 + version: 3.4.0 + resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=3039ca&locator=charcoal-web-docs%40workspace%3A." + checksum: cb7e4049b9b706cd6cf0ddcc3b8151d47e91bc7b91d2203ab1d410a6fe9320dd8f30445b257985dbb3330a312959f89a3cd7d418db5be5ac38eb6f575a080f38 languageName: node linkType: hard "@charcoal-ui/icon-files@file:../packages/icon-files::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=238a46&locator=charcoal-web-docs%40workspace%3A." - checksum: e952e88fe1b29b068e768572119c4528647e1a192e53430dba9b775085b1dda0bcb98c36ed9d34638ffc01ebc28d24e36d251c88202ec7904a75f6039b5976e0 + version: 3.4.0 + resolution: "@charcoal-ui/icon-files@file:../packages/icon-files#../packages/icon-files::hash=53fd85&locator=charcoal-web-docs%40workspace%3A." + checksum: 5762e5d62db05edaa6023288a8af79c64637d9c6cf99b0d97bbcac77533eff192c43678bd9956c4786f1e11f1491e819a19ae7a9151752ad682f930757946b75 languageName: node linkType: hard "@charcoal-ui/icons@file:../packages/icons::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=133bde&locator=charcoal-web-docs%40workspace%3A." + version: 3.4.0 + resolution: "@charcoal-ui/icons@file:../packages/icons#../packages/icons::hash=d9757e&locator=charcoal-web-docs%40workspace%3A." dependencies: - "@charcoal-ui/icon-files": ^3.3.0 + "@charcoal-ui/icon-files": ^3.4.0 dompurify: ^2.3.6 warning: ^4.0.3 - checksum: c215e4257abda94f58f8854a3c303170176183a6d3f708f42674e496b3e13399b4f0aba155571da50d2da84a904ec4b76f6d050563e18a246cb57fb4c4286959 + checksum: 0a54af0ecfe99ed71c8c657470f9128953f5d28f708da0fec6ce64186b98a2a2b297a5b27fc8961478a796ce28d5f929732b665ab02e9b80255f5200afacd69f languageName: node linkType: hard "@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=cbff5d&locator=charcoal-web-docs%40workspace%3A." + version: 3.4.0 + resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=cee995&locator=charcoal-web-docs%40workspace%3A." dependencies: - "@charcoal-ui/icons": ^3.3.0 - "@charcoal-ui/styled": ^3.3.0 - "@charcoal-ui/theme": ^3.3.0 - "@charcoal-ui/utils": ^3.3.0 + "@charcoal-ui/icons": ^3.4.0 + "@charcoal-ui/styled": ^3.4.0 + "@charcoal-ui/theme": ^3.4.0 + "@charcoal-ui/utils": ^3.4.0 "@react-aria/button": ^3.7.0 "@react-aria/checkbox": ^3.8.0 "@react-aria/dialog": ^3.5.0 @@ -215,43 +215,43 @@ __metadata: peerDependencies: react: ">=17.0.0" styled-components: ">=5.1.1" - checksum: fb09a1770b3bbb63089765eb8124c3e6ae89997d43a9eef9cf04cf915475921ef89ae1ab0fd2c63191170aca2e3e432d6134780af99edc2343f393f93ba36aba + checksum: 7489604933439ca511a04e4979e8a5a1b8dc548276631defa2511f27915321698a40f8065dd7ad955853f0fb28158409735bd624b6b649d73990b17f7ea9b1d0 languageName: node linkType: hard "@charcoal-ui/styled@file:../packages/styled::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=d4801e&locator=charcoal-web-docs%40workspace%3A." + version: 3.4.0 + resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=3defa7&locator=charcoal-web-docs%40workspace%3A." dependencies: - "@charcoal-ui/foundation": ^3.3.0 - "@charcoal-ui/theme": ^3.3.0 - "@charcoal-ui/utils": ^3.3.0 + "@charcoal-ui/foundation": ^3.4.0 + "@charcoal-ui/theme": ^3.4.0 + "@charcoal-ui/utils": ^3.4.0 warning: ^4.0.3 peerDependencies: react: ">=17.0.0" styled-components: ">=5.1.1" - checksum: cdd2c78b97c17f6542a0d01554e8591514a424bfd4ad3ea5866361c3b727e6c30281f205b7ed42fcb971ca6fde8cc188979b4839488d2416bb88d5ed8b990870 + checksum: 9f66d1d6ee56fac0d4b7a0f38066b3bcb7453a2a7feb4aa862aaff754fc3e0b542c53af78fbf792afa789602ad37f72cb38637bcc8350f4fbfb76a025bb712f3 languageName: node linkType: hard "@charcoal-ui/theme@file:../packages/theme::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=d3e7d3&locator=charcoal-web-docs%40workspace%3A." + version: 3.4.0 + resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=096d54&locator=charcoal-web-docs%40workspace%3A." dependencies: - "@charcoal-ui/foundation": ^3.3.0 - "@charcoal-ui/utils": ^3.3.0 + "@charcoal-ui/foundation": ^3.4.0 + "@charcoal-ui/utils": ^3.4.0 polished: ^4.1.4 - checksum: 647656c05f4b1edaa70f558f65c0757c9cbfd03cbf677ecb7b1f0d523ac4be0f86017249c984e56ac7db9a0966c93a5651d0f36e67a313be6700bdec36a78d28 + checksum: ed797d242073ac8f218053f30d76dfc3a032cf8141ec3af5b938fd190d1c9be5e2fda0ecab38797ab2aa79be8c4e1db408299f29b677560750fe4733e694c379 languageName: node linkType: hard "@charcoal-ui/utils@file:../packages/utils::locator=charcoal-web-docs%40workspace%3A.": - version: 3.3.0 - resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=bd0f39&locator=charcoal-web-docs%40workspace%3A." + version: 3.4.0 + resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=9fb075&locator=charcoal-web-docs%40workspace%3A." dependencies: - "@charcoal-ui/foundation": ^3.3.0 + "@charcoal-ui/foundation": ^3.4.0 polished: ^4.1.4 - checksum: 91fc0cdfcd4c6a0907c5d788c02ca94504876be29697af36592347d91d448fa1ca4d2b27da400701330df6cfbd84a63a42cd76a77089d86c93b46d5748ef361c + checksum: e515ae50c86967485fa7c6cc79b125c3f64bbcdd8be461e99143f2aafe7531c81aecba12d41aa00c8f90e22bd69e4f4fe9437a7a5417024dfacc9853ccc5d7b3 languageName: node linkType: hard diff --git a/jest.setup.ts b/jest.setup.ts index c6c625001..a7ae362c5 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -1,3 +1,5 @@ +import type { ReactNode } from 'react' + export {} globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({ @@ -5,3 +7,24 @@ 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(), +})) + +jest.mock('@react-aria/utils', () => ({ + ...jest.requireActual('@react-aria/utils'), + useId: () => 'test-id', +})) + +jest.mock('@react-aria/overlays', () => ({ + ...jest.requireActual('@react-aria/overlays'), + Overlay: jest.fn(({ children }: { children: ReactNode }) => children), +})) diff --git a/lerna.json b/lerna.json index bf42cfd16..726258dcf 100644 --- a/lerna.json +++ b/lerna.json @@ -86,5 +86,5 @@ "packages": [ "packages/*" ], - "version": "3.3.0" + "version": "3.4.0" } diff --git a/package.json b/package.json index 66b4925db..1fb1196bd 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,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", @@ -41,10 +42,12 @@ "@commitlint/config-lerna-scopes": "^16.0.0", "@originjs/vite-plugin-commonjs": "^1.0.3", "@storybook/addon-a11y": "^7.4.1", + "@storybook/addon-docs": "^7.5.1", "@storybook/addon-essentials": "^7.4.1", "@storybook/addon-interactions": "^7.4.1", "@storybook/addon-links": "^7.4.1", "@storybook/addon-onboarding": "^1.0.8", + "@storybook/addon-storyshots": "7.4.1", "@storybook/addon-storysource": "^7.4.1", "@storybook/addon-styling": "^1.3.7", "@storybook/addon-styling-webpack": "^0.0.5", @@ -84,6 +87,7 @@ "prettier": "^2.8.4", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-test-renderer": "17.0.2", "storybook": "^7.4.1", "storybook-dark-mode": "^3.0.1", "styled-components": "^5.3.3", @@ -102,5 +106,8 @@ "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" } }, - "packageManager": "yarn@3.1.0" + "packageManager": "yarn@3.1.0", + "resolutions": { + "react-test-renderer": "17.0.2" + } } diff --git a/packages/foundation/package.json b/packages/foundation/package.json index 1a79487c7..98d12762b 100644 --- a/packages/foundation/package.json +++ b/packages/foundation/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/foundation", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", diff --git a/packages/icon-files/package.json b/packages/icon-files/package.json index a7c510b3b..080093602 100644 --- a/packages/icon-files/package.json +++ b/packages/icon-files/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/icon-files", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "type": "module", "main": "./src/index.cjs", diff --git a/packages/icons-cli/package.json b/packages/icons-cli/package.json index 1ec486381..a837d5a2a 100644 --- a/packages/icons-cli/package.json +++ b/packages/icons-cli/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/icons-cli", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "bin": "./dist/index.js", "scripts": { diff --git a/packages/icons/package.json b/packages/icons/package.json index 6da6a6f51..81822412e 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/icons", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", @@ -30,7 +30,7 @@ "typescript": "^4.9.5" }, "dependencies": { - "@charcoal-ui/icon-files": "^3.3.0", + "@charcoal-ui/icon-files": "^3.4.0", "dompurify": "^2.3.6", "warning": "^4.0.3" }, diff --git a/packages/icons/src/__snapshots__/PixivIcon.story.storyshot b/packages/icons/src/__snapshots__/PixivIcon.story.storyshot new file mode 100644 index 000000000..fcdea450e --- /dev/null +++ b/packages/icons/src/__snapshots__/PixivIcon.story.storyshot @@ -0,0 +1,3346 @@ +// 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/Archive +
+
+
+ +
+ 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/Nextworks +
+
+
+ +
+ 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/package.json b/packages/react-sandbox/package.json index e81a28d9b..4c17e58bc 100644 --- a/packages/react-sandbox/package.json +++ b/packages/react-sandbox/package.json @@ -1,6 +1,6 @@ { "name": "@charcoal-ui/react-sandbox", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", @@ -47,11 +47,11 @@ "typescript": "^4.9.5" }, "dependencies": { - "@charcoal-ui/foundation": "^3.3.0", - "@charcoal-ui/react": "^3.3.0", - "@charcoal-ui/styled": "^3.3.0", - "@charcoal-ui/theme": "^3.3.0", - "@charcoal-ui/utils": "^3.3.0", + "@charcoal-ui/foundation": "^3.4.0", + "@charcoal-ui/react": "^3.4.0", + "@charcoal-ui/styled": "^3.4.0", + "@charcoal-ui/theme": "^3.4.0", + "@charcoal-ui/utils": "^3.4.0", "polished": "^4.1.4", "react-spring": "^9.0.0", "warning": "^4.0.3" 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; +} + +
+ +
+
+
+
+ This is link with target "_blank" +
+
+
+
+ +
+`; + +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; +} + +
+ +
+
+
+
+
+
+
+
+ Link with 24px icon +
+
+
+
+
+ +
+`; + +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..549553679 --- /dev/null +++ b/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot @@ -0,0 +1,1894 @@ +// 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 Little Page Range Displayed 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); +} + +
+