From 1f5a23137eda575063eb744d8e39ddee41638a67 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 20 Oct 2022 15:58:52 -0400 Subject: [PATCH 01/27] convertion of 3 tests to CSF --- .../avatar/tests/chromatic/Avatar.chroma.jsx | 184 +++++++++--------- .../src/box/tests/chromatic/Box.chroma.jsx | 41 ++-- .../src/dot/tests/chromatic/Dot.chroma.jsx | 105 +++++----- 3 files changed, 163 insertions(+), 167 deletions(-) diff --git a/packages/components/src/avatar/tests/chromatic/Avatar.chroma.jsx b/packages/components/src/avatar/tests/chromatic/Avatar.chroma.jsx index 4bc6fb595..da7f82eca 100644 --- a/packages/components/src/avatar/tests/chromatic/Avatar.chroma.jsx +++ b/packages/components/src/avatar/tests/chromatic/Avatar.chroma.jsx @@ -2,98 +2,96 @@ import { Avatar } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { Person } from "./assets"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Avatar") - .segment(segment) - .parameters(paramsBuilder() - .a11y({ - config: { - rules: [ - { id: "color-contrast", enabled: false } - ] - } - }) - .build()) - .build(); -} +export default { + title: "Chromatic/Avatar", + component: Avatar, + parameters: { + a11y: { + config: { + rules: [ + { + id: "color-contrast", + enabled: false + } + ] + } + } + } +}; -stories() - .add("local image", () => - - - - - - - - - - ) - .add("remote image", () => - , - { - ...paramsBuilder() - .chromaticDelay(500) - .build() - } - ) - .add("failing remote src", () => - - - - - - - - - - ) - .add("initials", () => - - - - - - - - - - - - - - - - - - ) - .add("empty src", () => - - - - - - - - - - ) - .add("zoom", () => - -
- -
-
- -
- - ) - .add("styling", () => - - - - - - ); +export const LocalImage = () => + + + + + + + +; + +export const RemoteImage = () => ; + +export const FailingRemoteSrc = () => + + + + + + + +; + +export const Initials = () => + + + + + + + + + + + + + + + +; + +export const EmptySrc = () => + + + + + + + +; + +export const Zoom = () => +
+ +
+
+ +
+; + +export const Styling = () => + + + +; + +LocalImage.storyName = "local image"; +RemoteImage.storyName = "remote image"; +RemoteImage.parameters = { + chromatic: { delay: 500 } +}; +FailingRemoteSrc.storyName = "failing remote src"; +Initials.storyName = "initials"; +EmptySrc.storyName = "empty src"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/box/tests/chromatic/Box.chroma.jsx b/packages/components/src/box/tests/chromatic/Box.chroma.jsx index 5a80b5549..fc6ba2a38 100644 --- a/packages/components/src/box/tests/chromatic/Box.chroma.jsx +++ b/packages/components/src/box/tests/chromatic/Box.chroma.jsx @@ -1,24 +1,25 @@ import { Box } from "@components/box"; import { Inline } from "@components/layout"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Box") - .segment(segment) - .parameters(paramsBuilder() - .chromaticDelay(100) - .build()) - .build(); -} +export default { + title: "Chromatic/Box", + component: Box, + parameters: { + chromatic: { delay: 100 } + } +}; -stories() - .add("default", () => - The Universe is under no obligation to make sense to you. - ) - .add("styling", () => - - The Universe is under no obligation to make sense to you. - The Universe is under no obligation to make sense to you. - The Universe is under no obligation to make sense to you. - - ); +export const Default = () => The Universe is under no obligation to make sense to you.; + +export const Styling = () => + The Universe is under no obligation to make sense to you. + The Universe is under no obligation to make sense to you. + The Universe is under no obligation to make sense to you. +; + +Default.storyName = "default"; +Default.parameters = { + chromatic: { delay: 100 } +}; + +Styling.storyName = "styling"; diff --git a/packages/components/src/dot/tests/chromatic/Dot.chroma.jsx b/packages/components/src/dot/tests/chromatic/Dot.chroma.jsx index c5f93c19e..23fbb7f79 100644 --- a/packages/components/src/dot/tests/chromatic/Dot.chroma.jsx +++ b/packages/components/src/dot/tests/chromatic/Dot.chroma.jsx @@ -1,60 +1,57 @@ import { Div } from "@components/html"; import { Dot } from "@components/dot"; import { Inline, Stack } from "@components/layout"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Dot") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/Dot", + component: Dot +}; -stories() - .add("default", () => +export const Default = () => ; + +export const Label = () => Habitable; + +export const Color = () => + + + + + + + + +; + +export const Disabled = () => + + Habitable +; + +export const Zoom = () => +
- ) - .add("label", () => - Habitable - ) - .add("color", () => - - - - - - - - - - - ) - .add("disabled", () => - - - Habitable - - ) - .add("zoom", () => - -
- -
-
- -
- - ) - .add("styling", () => - - - - - - - - Habitable - Habitable - Habitable - - - ); +
+
+ +
+; + +export const Styling = () => + + + + + + + Habitable + Habitable + Habitable + +; + +Default.storyName = "default"; +Label.storyName = "label"; +Color.storyName = "color"; +Disabled.storyName = "disabled"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; From 2ee71861dc0aa6d3b0cdff8e91db7383df820e66 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 24 Oct 2022 16:35:23 -0400 Subject: [PATCH 02/27] added missing dependencies to make the interaction testing run --- package.json | 4 +- .../components/src/avatar/src/AvatarGroup.tsx | 5 +- .../tests/chromatic/AvatarGroup.chroma.jsx | 320 ++++--- storybook/main.js | 6 + storybook/package.json | 4 + storybook/yarn.lock | 888 ++++++++++++++++++ yarn.lock | 338 ++++++- 7 files changed, 1410 insertions(+), 155 deletions(-) diff --git a/package.json b/package.json index 65475459f..7e9afc105 100644 --- a/package.json +++ b/package.json @@ -90,13 +90,15 @@ "@sharegate/stylelint-config-recommended": "2.1.1", "@storybook/addon-a11y": "6.5.13-alpha.0", "@storybook/addon-essentials": "6.5.13-alpha.0", + "@storybook/addon-interactions": "^6.5.13", "@storybook/react": "6.5.13-alpha.0 ", + "@storybook/testing-library": "^0.0.13", "@svgr/core": "6.2.1", "@svgr/webpack": "5.5.0", "@testing-library/dom": "^8.18.1", "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "13.4.0", - "@testing-library/user-event": "14.0.0", + "@testing-library/user-event": "14.4.3", "@types/jest": "27.4.0", "@types/react": "18.0.21", "@types/react-dom": "18.0.6", diff --git a/packages/components/src/avatar/src/AvatarGroup.tsx b/packages/components/src/avatar/src/AvatarGroup.tsx index b27a50015..bd285cc0a 100644 --- a/packages/components/src/avatar/src/AvatarGroup.tsx +++ b/packages/components/src/avatar/src/AvatarGroup.tsx @@ -9,6 +9,7 @@ import { Tooltip, TooltipTrigger } from "../../tooltip"; const DefaultElement = "div"; export interface InnerAvatarGroupProps extends Omit, "gap" | "orientation"> { + remainingAvatarsProps?: any; /** * The avatars of the group can vary in size. */ @@ -58,7 +59,7 @@ function RemainingAvatars({ avatars, size, ...rest }: RemainingAvatarsProps) { })} - + ); } @@ -70,6 +71,7 @@ export function InnerAvatarGroup({ children, wrap = true, forwardedRef, + remainingAvatarsProps, ...rest }: InnerAvatarGroupProps) { const sizeValue = useResponsiveValue(size); @@ -99,6 +101,7 @@ export function InnerAvatarGroup({ ); diff --git a/packages/components/src/avatar/tests/chromatic/AvatarGroup.chroma.jsx b/packages/components/src/avatar/tests/chromatic/AvatarGroup.chroma.jsx index 5f0216691..68ec51382 100644 --- a/packages/components/src/avatar/tests/chromatic/AvatarGroup.chroma.jsx +++ b/packages/components/src/avatar/tests/chromatic/AvatarGroup.chroma.jsx @@ -1,205 +1,233 @@ import { Avatar, AvatarGroup } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; +import { screen } from "@testing-library/react"; +import { userEvent } from "@storybook/testing-library"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/AvatarGroup") - .segment(segment) - .parameters(paramsBuilder() - .a11y({ - config: { - rules: [ - { id: "color-contrast", enabled: false } - ] - } - }) - .build()) - .build(); -} +export default { + component: AvatarGroup, + parameters: { + a11y: { + config: { + rules: [ + { + id: "color-contrast", + enabled: false + } + ] + } + } + }, + title: "Chromatic/AvatarGroup" +}; -stories() - .add("default", () => - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) - .add("no wrap", () => -
- +export const Default = { + render: () => + + - - - -
- ) - .add("with remainings", () => + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - ) - .add("overflow", () => -
- + +}; + +export const NoWrap = { + render: () =>
+ + + + + + + +
+}; + +export const WithRemainings = { + render: () => + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +}; + +export const Overflow = { + render: () =>
+ + + + + + +
+}; + +export const Zoom = { + render: () => +
+ - -
- ) - .add("zoom", () => - -
- - - - -
-
- - - - -
- - ) - .add("styling", () => - - - - - - - - - - +
+ - - ); +
+ +}; + +export const Styling = { + render: () => + + + + + + + + + + + + + +}; + +export const WithRemainingsHover = { + render: () => + + + + + + , + play: async () => { + await userEvent.hover(screen.getByTestId("remaining-avatars")); + } +}; + +Default.storyName = "default"; +NoWrap.storyName = "no wrap"; +Overflow.storyName = "overflow"; +WithRemainings.storyName = "with remainings"; +Styling.storyName = "styling"; +Zoom.storyName = "zoom"; +WithRemainingsHover.storyName = "with remainings hover"; diff --git a/storybook/main.js b/storybook/main.js index c36cce347..3087788d9 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -41,8 +41,14 @@ const config = { values: ["wcag2a", "wcag2aa"] } } + }, + { + name: "@storybook/addon-interactions" } ], + features: { + previewCsfV3: true + }, webpackFinal: customizeWebpack, reactOptions: { strictMode: true diff --git a/storybook/package.json b/storybook/package.json index 936a27db7..8e929acb9 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -20,5 +20,9 @@ "clean": "rimraf dist", "chromatic": "chromatic test -b=build-sb-for-chroma --debug", "chromatic-ci": "yarn chromatic --no-interactive" + }, + "devDependencies": { + "@storybook/testing-library": "^0.0.13", + "@storybook/testing-react": "^1.3.0" } } diff --git a/storybook/yarn.lock b/storybook/yarn.lock index fb57ccd13..d69c7e794 100644 --- a/storybook/yarn.lock +++ b/storybook/yarn.lock @@ -2,3 +2,891 @@ # yarn lockfile v1 +"@babel/code-frame@^7.10.4": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a" + integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q== + dependencies: + "@babel/highlight" "^7.18.6" + +"@babel/helper-validator-identifier@^7.18.6": + version "7.19.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2" + integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w== + +"@babel/highlight@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" + integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g== + dependencies: + "@babel/helper-validator-identifier" "^7.18.6" + chalk "^2.0.0" + js-tokens "^4.0.0" + +"@babel/runtime@^7.12.5": + version "7.19.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" + integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== + dependencies: + regenerator-runtime "^0.13.4" + +"@storybook/addons@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" + integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== + dependencies: + "@storybook/api" "6.5.13" + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/theming" "6.5.13" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + +"@storybook/api@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" + integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== + dependencies: + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + +"@storybook/channels@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.13.tgz#f3f86b90a7832484ee3dcbc6845f5a47f62f028f" + integrity sha512-sGYSilE30bz0jG+HdHnkv0B4XkAv2hP+KRZr4xmnv+MOOQpRnZpJ5Z3HVU16s17cj/83NWihKj6BuKcEVzyilg== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + +"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.4.0": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" + integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + +"@storybook/core-events@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" + integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== + dependencies: + core-js "^3.8.2" + +"@storybook/csf@0.0.2--canary.4566f4d.1": + version "0.0.2--canary.4566f4d.1" + resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz#dac52a21c40ef198554e71fe4d20d61e17f65327" + integrity sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ== + dependencies: + lodash "^4.17.15" + +"@storybook/csf@0.0.2--canary.87bc651.0": + version "0.0.2--canary.87bc651.0" + resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.2--canary.87bc651.0.tgz#c7b99b3a344117ef67b10137b6477a3d2750cf44" + integrity sha512-ajk1Uxa+rBpFQHKrCcTmJyQBXZ5slfwHVEaKlkuFaW77it8RgbPJp/ccna3sgoi8oZ7FkkOyvv1Ve4SmwFqRqw== + dependencies: + lodash "^4.17.15" + +"@storybook/instrumenter@^6.4.0": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.13.tgz#bcb743e2a2c92ba284b2d5cac41bbe3d2c8e8d12" + integrity sha512-izRF64BU+gGCP7qE1N3kOVLSv5Xk4M0OWcRmFIXoIS46qNDzmd8hmbkkx3M9wrvw0kcQ97kIyADF+UInbcr/dQ== + dependencies: + "@storybook/addons" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + core-js "^3.8.2" + global "^4.4.0" + +"@storybook/router@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.13.tgz#c8bfed96f2343b097d416cfc95194038365fce94" + integrity sha512-sf5aogfirH5ucD0d0hc2mKf2iyWsZsvXhr5kjxUQmgkcoflkGUWhc34sbSQVRQ1i8K5lkLIDH/q2s1Zr2SbzhQ== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + +"@storybook/semver@^7.3.2": + version "7.3.2" + resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" + integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg== + dependencies: + core-js "^3.6.5" + find-up "^4.1.0" + +"@storybook/testing-library@^0.0.13": + version "0.0.13" + resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.0.13.tgz#417c87d4ea62895092ec5fdf67027ae201254f45" + integrity sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw== + dependencies: + "@storybook/client-logger" "^6.4.0" + "@storybook/instrumenter" "^6.4.0" + "@testing-library/dom" "^8.3.0" + "@testing-library/user-event" "^13.2.1" + ts-dedent "^2.2.0" + +"@storybook/testing-react@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@storybook/testing-react/-/testing-react-1.3.0.tgz#cd69cae6f48b337ee992520e142c7904cb0bbea7" + integrity sha512-TfxzflxwBHSPhetWKuYt239t+1iN8gnnUN8OKo5UGtwwirghKQlApjH23QXW6j8YBqFhmq+yP29Oqf8HgKCFLw== + dependencies: + "@storybook/csf" "0.0.2--canary.87bc651.0" + +"@storybook/theming@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" + integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + +"@testing-library/dom@^8.3.0": + version "8.19.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f" + integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^4.2.0" + aria-query "^5.0.0" + chalk "^4.1.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.4.4" + pretty-format "^27.0.2" + +"@testing-library/user-event@^13.2.1": + version "13.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295" + integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg== + dependencies: + "@babel/runtime" "^7.12.5" + +"@types/aria-query@^4.2.0": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" + integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== + +"@types/is-function@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.1.tgz#2d024eace950c836d9e3335a66b97960ae41d022" + integrity sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q== + +"@types/webpack-env@^1.16.0": + version "1.18.0" + resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.0.tgz#ed6ecaa8e5ed5dfe8b2b3d00181702c9925f13fb" + integrity sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg== + +ansi-regex@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" + integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== + +ansi-styles@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" + integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== + dependencies: + color-convert "^1.9.0" + +ansi-styles@^4.1.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" + integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg== + dependencies: + color-convert "^2.0.1" + +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + +aria-query@^5.0.0: + version "5.1.1" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.1.tgz#e930bc77378f0db1c705049fe73d90d9cb657600" + integrity sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA== + dependencies: + deep-equal "^2.0.5" + +available-typed-arrays@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" + integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== + +call-bind@^1.0.0, call-bind@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c" + integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA== + dependencies: + function-bind "^1.1.1" + get-intrinsic "^1.0.2" + +chalk@^2.0.0: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + +chalk@^4.1.0: + version "4.1.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" + integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + +color-convert@^1.9.0: + version "1.9.3" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" + integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== + dependencies: + color-name "1.1.3" + +color-convert@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" + integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== + dependencies: + color-name "~1.1.4" + +color-name@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== + +color-name@~1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + +core-js@^3.6.5, core-js@^3.8.2: + version "3.26.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.0.tgz#a516db0ed0811be10eac5d94f3b8463d03faccfe" + integrity sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw== + +deep-equal@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9" + integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw== + dependencies: + call-bind "^1.0.0" + es-get-iterator "^1.1.1" + get-intrinsic "^1.0.1" + is-arguments "^1.0.4" + is-date-object "^1.0.2" + is-regex "^1.1.1" + isarray "^2.0.5" + object-is "^1.1.4" + object-keys "^1.1.1" + object.assign "^4.1.2" + regexp.prototype.flags "^1.3.0" + side-channel "^1.0.3" + which-boxed-primitive "^1.0.1" + which-collection "^1.0.1" + which-typed-array "^1.1.2" + +define-properties@^1.1.3, define-properties@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1" + integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA== + dependencies: + has-property-descriptors "^1.0.0" + object-keys "^1.1.1" + +dom-accessibility-api@^0.5.9: + version "0.5.14" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56" + integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg== + +dom-walk@^0.1.0: + version "0.1.2" + resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" + integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== + +es-abstract@^1.19.0, es-abstract@^1.19.5, es-abstract@^1.20.0: + version "1.20.4" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861" + integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA== + dependencies: + call-bind "^1.0.2" + es-to-primitive "^1.2.1" + function-bind "^1.1.1" + function.prototype.name "^1.1.5" + get-intrinsic "^1.1.3" + get-symbol-description "^1.0.0" + has "^1.0.3" + has-property-descriptors "^1.0.0" + has-symbols "^1.0.3" + internal-slot "^1.0.3" + is-callable "^1.2.7" + is-negative-zero "^2.0.2" + is-regex "^1.1.4" + is-shared-array-buffer "^1.0.2" + is-string "^1.0.7" + is-weakref "^1.0.2" + object-inspect "^1.12.2" + object-keys "^1.1.1" + object.assign "^4.1.4" + regexp.prototype.flags "^1.4.3" + safe-regex-test "^1.0.0" + string.prototype.trimend "^1.0.5" + string.prototype.trimstart "^1.0.5" + unbox-primitive "^1.0.2" + +es-get-iterator@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7" + integrity sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.0" + has-symbols "^1.0.1" + is-arguments "^1.1.0" + is-map "^2.0.2" + is-set "^2.0.2" + is-string "^1.0.5" + isarray "^2.0.5" + +es-to-primitive@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" + integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA== + dependencies: + is-callable "^1.1.4" + is-date-object "^1.0.1" + is-symbol "^1.0.2" + +escape-string-regexp@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" + integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== + +fast-deep-equal@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" + integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== + +find-up@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" + integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw== + dependencies: + locate-path "^5.0.0" + path-exists "^4.0.0" + +for-each@^0.3.3: + version "0.3.3" + resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e" + integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw== + dependencies: + is-callable "^1.1.3" + +function-bind@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" + integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== + +function.prototype.name@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621" + integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.3" + es-abstract "^1.19.0" + functions-have-names "^1.2.2" + +functions-have-names@^1.2.2: + version "1.2.3" + resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" + integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== + +get-intrinsic@^1.0.1, get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385" + integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A== + dependencies: + function-bind "^1.1.1" + has "^1.0.3" + has-symbols "^1.0.3" + +get-symbol-description@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6" + integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.1" + +global@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" + integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== + dependencies: + min-document "^2.19.0" + process "^0.11.10" + +has-bigints@^1.0.1, has-bigints@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" + integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ== + +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== + +has-flag@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" + integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== + +has-property-descriptors@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861" + integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ== + dependencies: + get-intrinsic "^1.1.1" + +has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8" + integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A== + +has-tostringtag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25" + integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ== + dependencies: + has-symbols "^1.0.2" + +has@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" + integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== + dependencies: + function-bind "^1.1.1" + +internal-slot@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c" + integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA== + dependencies: + get-intrinsic "^1.1.0" + has "^1.0.3" + side-channel "^1.0.4" + +is-arguments@^1.0.4, is-arguments@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b" + integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA== + dependencies: + call-bind "^1.0.2" + has-tostringtag "^1.0.0" + +is-bigint@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3" + integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg== + dependencies: + has-bigints "^1.0.1" + +is-boolean-object@^1.1.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719" + integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA== + dependencies: + call-bind "^1.0.2" + has-tostringtag "^1.0.0" + +is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7: + version "1.2.7" + resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055" + integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA== + +is-date-object@^1.0.1, is-date-object@^1.0.2: + version "1.0.5" + resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f" + integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ== + dependencies: + has-tostringtag "^1.0.0" + +is-function@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08" + integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ== + +is-map@^2.0.1, is-map@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" + integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg== + +is-negative-zero@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150" + integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA== + +is-number-object@^1.0.4: + version "1.0.7" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc" + integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ== + dependencies: + has-tostringtag "^1.0.0" + +is-regex@^1.1.1, is-regex@^1.1.2, is-regex@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" + integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg== + dependencies: + call-bind "^1.0.2" + has-tostringtag "^1.0.0" + +is-set@^2.0.1, is-set@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec" + integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g== + +is-shared-array-buffer@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79" + integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA== + dependencies: + call-bind "^1.0.2" + +is-string@^1.0.5, is-string@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd" + integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg== + dependencies: + has-tostringtag "^1.0.0" + +is-symbol@^1.0.2, is-symbol@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c" + integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg== + dependencies: + has-symbols "^1.0.2" + +is-typed-array@^1.1.9: + version "1.1.9" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.9.tgz#246d77d2871e7d9f5aeb1d54b9f52c71329ece67" + integrity sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A== + dependencies: + available-typed-arrays "^1.0.5" + call-bind "^1.0.2" + es-abstract "^1.20.0" + for-each "^0.3.3" + has-tostringtag "^1.0.0" + +is-weakmap@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" + integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== + +is-weakref@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2" + integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ== + dependencies: + call-bind "^1.0.2" + +is-weakset@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d" + integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.1" + +isarray@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + +isobject@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" + integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== + +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + +locate-path@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0" + integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== + dependencies: + p-locate "^4.1.0" + +lodash@^4.17.15, lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + +lz-string@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" + integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ== + +map-or-similar@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08" + integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== + +memoizerific@^1.11.3: + version "1.11.3" + resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" + integrity sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog== + dependencies: + map-or-similar "^1.5.0" + +min-document@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" + integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ== + dependencies: + dom-walk "^0.1.0" + +object-inspect@^1.12.2, object-inspect@^1.9.0: + version "1.12.2" + resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea" + integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ== + +object-is@^1.1.4: + version "1.1.5" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac" + integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.3" + +object-keys@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" + integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== + +object.assign@^4.1.2, object.assign@^4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f" + integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.4" + has-symbols "^1.0.3" + object-keys "^1.1.1" + +p-limit@^2.2.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" + integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w== + dependencies: + p-try "^2.0.0" + +p-locate@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07" + integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A== + dependencies: + p-limit "^2.2.0" + +p-try@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" + integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== + +path-exists@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3" + integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w== + +pretty-format@^27.0.2: + version "27.5.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" + integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + +process@^0.11.10: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== + +qs@^6.10.0: + version "6.11.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a" + integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q== + dependencies: + side-channel "^1.0.4" + +react-is@^17.0.1: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + +regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: + version "0.13.10" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" + integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== + +regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.4.3: + version "1.4.3" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac" + integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.3" + functions-have-names "^1.2.2" + +safe-regex-test@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295" + integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.1.3" + is-regex "^1.1.4" + +side-channel@^1.0.3, side-channel@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf" + integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw== + dependencies: + call-bind "^1.0.0" + get-intrinsic "^1.0.2" + object-inspect "^1.9.0" + +store2@^2.12.0: + version "2.14.2" + resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" + integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== + +string.prototype.trimend@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0" + integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.4" + es-abstract "^1.19.5" + +string.prototype.trimstart@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef" + integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.4" + es-abstract "^1.19.5" + +supports-color@^5.3.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + +supports-color@^7.1.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da" + integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw== + dependencies: + has-flag "^4.0.0" + +telejson@^6.0.8: + version "6.0.8" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-6.0.8.tgz#1c432db7e7a9212c1fbd941c3e5174ec385148f7" + integrity sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg== + dependencies: + "@types/is-function" "^1.0.0" + global "^4.4.0" + is-function "^1.0.2" + is-regex "^1.1.2" + is-symbol "^1.0.3" + isobject "^4.0.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + +ts-dedent@^2.0.0, ts-dedent@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5" + integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ== + +unbox-primitive@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e" + integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw== + dependencies: + call-bind "^1.0.2" + has-bigints "^1.0.2" + has-symbols "^1.0.3" + which-boxed-primitive "^1.0.2" + +util-deprecate@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" + integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== + +which-boxed-primitive@^1.0.1, which-boxed-primitive@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6" + integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg== + dependencies: + is-bigint "^1.0.1" + is-boolean-object "^1.1.0" + is-number-object "^1.0.4" + is-string "^1.0.5" + is-symbol "^1.0.3" + +which-collection@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" + integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== + dependencies: + is-map "^2.0.1" + is-set "^2.0.1" + is-weakmap "^2.0.1" + is-weakset "^2.0.1" + +which-typed-array@^1.1.2: + version "1.1.8" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.8.tgz#0cfd53401a6f334d90ed1125754a42ed663eb01f" + integrity sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw== + dependencies: + available-typed-arrays "^1.0.5" + call-bind "^1.0.2" + es-abstract "^1.20.0" + for-each "^0.3.3" + has-tostringtag "^1.0.0" + is-typed-array "^1.1.9" diff --git a/yarn.lock b/yarn.lock index fc7ac59c3..631c0d2a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1363,6 +1363,13 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" +"@babel/runtime@7.7.2": + version "7.7.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a" + integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.17.8" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2" @@ -1370,6 +1377,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.11.2": + version "7.19.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78" + integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.17.8": version "7.19.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259" @@ -1377,6 +1391,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@~7.5.4": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" + integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" @@ -1536,6 +1557,52 @@ enabled "2.0.x" kuler "^2.0.0" +"@design-systems/utils@2.12.0": + version "2.12.0" + resolved "https://registry.yarnpkg.com/@design-systems/utils/-/utils-2.12.0.tgz#955c108be07cb8f01532207cbfea8f848fa760c9" + integrity sha512-Y/d2Zzr+JJfN6u1gbuBUb1ufBuLMJJRZQk+dRmw8GaTpqKx5uf7cGUYGTwN02dIb3I+Tf+cW8jcGBTRiFxdYFg== + dependencies: + "@babel/runtime" "^7.11.2" + clsx "^1.0.4" + focus-lock "^0.8.0" + react-merge-refs "^1.0.0" + +"@devtools-ds/object-inspector@^1.1.2": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@devtools-ds/object-inspector/-/object-inspector-1.2.0.tgz#64a132fbd4159affa5a87c8cf6cf8540c337aed2" + integrity sha512-VztcwqVwScSvYdvJVZBJYsVO/2Pew3JPpFV3T9fuCHQLlHcLYOV3aU/kBS2ScuE2O1JN0ZbobLqFLa3vQF54Fw== + dependencies: + "@babel/runtime" "7.7.2" + "@devtools-ds/object-parser" "^1.2.0" + "@devtools-ds/themes" "^1.2.0" + "@devtools-ds/tree" "^1.2.0" + clsx "1.1.0" + +"@devtools-ds/object-parser@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@devtools-ds/object-parser/-/object-parser-1.2.0.tgz#8da39bf481687afdf113c78dbac5ced6fd8e30d1" + integrity sha512-SjGGyiFFY8dtUpiWXAvRSzRT+hE11EAAysrq2PsC/GVLf2ZLyT2nHlQO5kDStywyTz+fjw7S7pyDRj1HG9YTTA== + dependencies: + "@babel/runtime" "~7.5.4" + +"@devtools-ds/themes@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@devtools-ds/themes/-/themes-1.2.0.tgz#2fda60af9741e97bc09257b512e49a7aecf6f4bc" + integrity sha512-LimEITorE6yWZWWuMc6OiBfLQgPrQqWbyMEmfRUDPa3PHXoAY4SpDxczfg31fgyRDUNWnZhjaJH5bBbu8VEbIw== + dependencies: + "@babel/runtime" "~7.5.4" + "@design-systems/utils" "2.12.0" + clsx "1.1.0" + +"@devtools-ds/tree@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@devtools-ds/tree/-/tree-1.2.0.tgz#e882d10ae13a30f2aa02e75c3eeb6c44a47a80c3" + integrity sha512-hC4g4ocuo2eg7jsnzKdauxH0sDQiPW3KSM2+uK3kRgcmr9PzpBD5Kob+Y/WFSVKswFleftOGKL4BQLuRv0sPxA== + dependencies: + "@babel/runtime" "7.7.2" + "@devtools-ds/themes" "^1.2.0" + clsx "1.1.0" + "@discoveryjs/json-ext@^0.5.3": version "0.5.7" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" @@ -3503,6 +3570,27 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" +"@storybook/addon-interactions@^6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-6.5.13.tgz#622d6672785045fa71a7677f49076ae2beae351a" + integrity sha512-FPOeS7AT/Odxl6z7E0qYI4F0Sh06jFRttRvSgpKC5P2lYUWUstLP5TC8N+F5ijBeLfIdIsf5zBK7l5Y/cluueg== + dependencies: + "@devtools-ds/object-inspector" "^1.1.2" + "@storybook/addons" "6.5.13" + "@storybook/api" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/components" "6.5.13" + "@storybook/core-common" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/instrumenter" "6.5.13" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + global "^4.4.0" + jest-mock "^27.0.6" + polished "^4.2.2" + ts-dedent "^2.2.0" + "@storybook/addon-measure@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.13-alpha.0.tgz#6e3ad0286b2f19ebae9e71c4beb2f3b63f3b5294" @@ -3563,6 +3651,23 @@ prop-types "^15.7.2" regenerator-runtime "^0.13.7" +"@storybook/addons@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" + integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== + dependencies: + "@storybook/api" "6.5.13" + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/theming" "6.5.13" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + "@storybook/addons@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13-alpha.0.tgz#d7c3ad9324b170f70fc120ae108f94365a9ad34b" @@ -3580,6 +3685,29 @@ global "^4.4.0" regenerator-runtime "^0.13.7" +"@storybook/api@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" + integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== + dependencies: + "@storybook/channels" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/router" "6.5.13" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.21" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/api@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13-alpha.0.tgz#2594a5aa0b944dd4f07cca27df4d77092c931034" @@ -3680,6 +3808,15 @@ global "^4.4.0" telejson "^6.0.8" +"@storybook/channels@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.13.tgz#f3f86b90a7832484ee3dcbc6845f5a47f62f028f" + integrity sha512-sGYSilE30bz0jG+HdHnkv0B4XkAv2hP+KRZr4xmnv+MOOQpRnZpJ5Z3HVU16s17cj/83NWihKj6BuKcEVzyilg== + dependencies: + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/channels@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.13-alpha.0.tgz#7d2474cc13b263916a535decbffd2487841a1ea0" @@ -3715,6 +3852,14 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.4.0": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" + integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + "@storybook/client-logger@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13-alpha.0.tgz#fce6f3134fda1c417bfea269b27a5663bfbf092a" @@ -3723,6 +3868,20 @@ core-js "^3.8.2" global "^4.4.0" +"@storybook/components@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030" + integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ== + dependencies: + "@storybook/client-logger" "6.5.13" + "@storybook/csf" "0.0.2--canary.4566f4d.1" + "@storybook/theming" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + util-deprecate "^1.0.2" + "@storybook/components@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13-alpha.0.tgz#e3e4e38a14f0fd8fb42e04914531c1229a16c138" @@ -3763,6 +3922,62 @@ unfetch "^4.2.0" util-deprecate "^1.0.2" +"@storybook/core-common@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.13.tgz#941fe2aea3326c2d524d095870a4150b9f9b1845" + integrity sha512-+DVZrRsteE9pw0X5MNffkdBgejQnbnL+UOG3qXkE9xxUamQALnuqS/w1BzpHE9WmOHuf7RWMKflyQEW3OLKAJg== + dependencies: + "@babel/core" "^7.12.10" + "@babel/plugin-proposal-class-properties" "^7.12.1" + "@babel/plugin-proposal-decorators" "^7.12.12" + "@babel/plugin-proposal-export-default-from" "^7.12.1" + "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1" + "@babel/plugin-proposal-object-rest-spread" "^7.12.1" + "@babel/plugin-proposal-optional-chaining" "^7.12.7" + "@babel/plugin-proposal-private-methods" "^7.12.1" + "@babel/plugin-proposal-private-property-in-object" "^7.12.1" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-transform-arrow-functions" "^7.12.1" + "@babel/plugin-transform-block-scoping" "^7.12.12" + "@babel/plugin-transform-classes" "^7.12.1" + "@babel/plugin-transform-destructuring" "^7.12.1" + "@babel/plugin-transform-for-of" "^7.12.1" + "@babel/plugin-transform-parameters" "^7.12.1" + "@babel/plugin-transform-shorthand-properties" "^7.12.1" + "@babel/plugin-transform-spread" "^7.12.1" + "@babel/preset-env" "^7.12.11" + "@babel/preset-react" "^7.12.10" + "@babel/preset-typescript" "^7.12.7" + "@babel/register" "^7.12.1" + "@storybook/node-logger" "6.5.13" + "@storybook/semver" "^7.3.2" + "@types/node" "^14.0.10 || ^16.0.0" + "@types/pretty-hrtime" "^1.0.0" + babel-loader "^8.0.0" + babel-plugin-macros "^3.0.1" + babel-plugin-polyfill-corejs3 "^0.1.0" + chalk "^4.1.0" + core-js "^3.8.2" + express "^4.17.1" + file-system-cache "^1.0.5" + find-up "^5.0.0" + fork-ts-checker-webpack-plugin "^6.0.4" + fs-extra "^9.0.1" + glob "^7.1.6" + handlebars "^4.7.7" + interpret "^2.2.0" + json5 "^2.1.3" + lazy-universal-dotenv "^3.0.1" + picomatch "^2.3.0" + pkg-dir "^5.0.0" + pretty-hrtime "^1.0.3" + resolve-from "^5.0.0" + slash "^3.0.0" + telejson "^6.0.8" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + webpack "4" + "@storybook/core-common@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.13-alpha.0.tgz#657702869250af6b53e53c0e0b4576e3a7fbf057" @@ -3819,6 +4034,13 @@ util-deprecate "^1.0.2" webpack "4" +"@storybook/core-events@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" + integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== + dependencies: + core-js "^3.8.2" + "@storybook/core-events@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13-alpha.0.tgz#7066fff9adbef217640bd2424b82814986b00a11" @@ -3925,6 +4147,17 @@ lodash "^4.17.21" regenerator-runtime "^0.13.7" +"@storybook/instrumenter@6.5.13", "@storybook/instrumenter@^6.4.0": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.13.tgz#bcb743e2a2c92ba284b2d5cac41bbe3d2c8e8d12" + integrity sha512-izRF64BU+gGCP7qE1N3kOVLSv5Xk4M0OWcRmFIXoIS46qNDzmd8hmbkkx3M9wrvw0kcQ97kIyADF+UInbcr/dQ== + dependencies: + "@storybook/addons" "6.5.13" + "@storybook/client-logger" "6.5.13" + "@storybook/core-events" "6.5.13" + core-js "^3.8.2" + global "^4.4.0" + "@storybook/manager-webpack4@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.13-alpha.0.tgz#68ece99d4057428a40a57c0e9041fd5f09410dab" @@ -3983,6 +4216,17 @@ prettier ">=2.2.1 <=2.3.0" ts-dedent "^2.0.0" +"@storybook/node-logger@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.13.tgz#f4833ae220efe841747c4fead26419d6625af8d9" + integrity sha512-/r5aVZAqZRoy5FyNk/G4pj7yKJd3lJfPbAaOHVROv2IF7PJP/vtRaDkcfh0g2U6zwuDxGIqSn80j+qoEli9m5A== + dependencies: + "@types/npmlog" "^4.1.2" + chalk "^4.1.0" + core-js "^3.8.2" + npmlog "^5.0.1" + pretty-hrtime "^1.0.3" + "@storybook/node-logger@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.13-alpha.0.tgz#4d339730d9d90b2aa2d0a3d3794121abd3f86c4f" @@ -4077,6 +4321,17 @@ util-deprecate "^1.0.2" webpack ">=4.43.0 <6.0.0" +"@storybook/router@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.13.tgz#c8bfed96f2343b097d416cfc95194038365fce94" + integrity sha512-sf5aogfirH5ucD0d0hc2mKf2iyWsZsvXhr5kjxUQmgkcoflkGUWhc34sbSQVRQ1i8K5lkLIDH/q2s1Zr2SbzhQ== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + "@storybook/router@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.13-alpha.0.tgz#c228618dd800766b3774ef76e4180dc66e726ccf" @@ -4151,6 +4406,27 @@ read-pkg-up "^7.0.1" regenerator-runtime "^0.13.7" +"@storybook/testing-library@^0.0.13": + version "0.0.13" + resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.0.13.tgz#417c87d4ea62895092ec5fdf67027ae201254f45" + integrity sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw== + dependencies: + "@storybook/client-logger" "^6.4.0" + "@storybook/instrumenter" "^6.4.0" + "@testing-library/dom" "^8.3.0" + "@testing-library/user-event" "^13.2.1" + ts-dedent "^2.2.0" + +"@storybook/theming@6.5.13": + version "6.5.13" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" + integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== + dependencies: + "@storybook/client-logger" "6.5.13" + core-js "^3.8.2" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + "@storybook/theming@6.5.13-alpha.0": version "6.5.13-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13-alpha.0.tgz#b42ddfc4f1559e8a215e721847b3d960fbf8826a" @@ -4408,6 +4684,20 @@ lz-string "^1.4.4" pretty-format "^27.0.2" +"@testing-library/dom@^8.3.0": + version "8.19.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f" + integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^4.2.0" + aria-query "^5.0.0" + chalk "^4.1.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.4.4" + pretty-format "^27.0.2" + "@testing-library/jest-dom@5.16.1": version "5.16.1" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz#3db7df5ae97596264a7da9696fe14695ba02e51f" @@ -4432,10 +4722,17 @@ "@testing-library/dom" "^8.5.0" "@types/react-dom" "^18.0.0" -"@testing-library/user-event@14.0.0": - version "14.0.0" - resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.0.0.tgz#3906aa6f0e56fd012d73559f5f05c02e63ba18dd" - integrity sha512-hZhjNrle/DMi1ziHwHy8LS0fYJtf+cID7fuG5+4h+Bk83xQaRDQT/DlqfL4hJYw3mxW6KTIxoODrhGnhqJebdQ== +"@testing-library/user-event@14.4.3": + version "14.4.3" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591" + integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q== + +"@testing-library/user-event@^13.2.1": + version "13.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295" + integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg== + dependencies: + "@babel/runtime" "^7.12.5" "@tootallnate/once@1": version "1.1.2" @@ -7184,6 +7481,16 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= +clsx@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702" + integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA== + +clsx@^1.0.4: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + cmd-shim@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd" @@ -9935,6 +10242,13 @@ fn.name@1.x.x: resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc" integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw== +focus-lock@^0.8.0: + version "0.8.1" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.8.1.tgz#bb36968abf77a2063fa173cb6c47b12ac8599d33" + integrity sha512-/LFZOIo82WDsyyv7h7oc0MJF9ACOvDRdx9rWPZ2pgMfNWu/z8hQDBtOchuB/0BVLmuFOZjV02YwUVzNsWx/EzA== + dependencies: + tslib "^1.9.3" + folder-walker@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/folder-walker/-/folder-walker-3.2.0.tgz#98e00e59773f43416a6dcf0926d4c9436f65121d" @@ -12231,7 +12545,7 @@ jest-message-util@^27.5.1: slash "^3.0.0" stack-utils "^2.0.3" -jest-mock@^27.5.1: +jest-mock@^27.0.6, jest-mock@^27.5.1: version "27.5.1" resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6" integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og== @@ -16149,6 +16463,11 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-merge-refs@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" + integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ== + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -16414,6 +16733,11 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== +regenerator-runtime@^0.13.2: + version "0.13.10" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" + integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== + regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: version "0.13.9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" @@ -18575,7 +18899,7 @@ trough@^1.0.0: resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406" integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA== -ts-dedent@^2.0.0: +ts-dedent@^2.0.0, ts-dedent@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5" integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ== @@ -18613,7 +18937,7 @@ tsconfig-paths@^3.12.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== From 1ee50365d5f5a84e19d305d91afba0711a107a98 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 25 Oct 2022 20:50:17 -0400 Subject: [PATCH 03/27] converted alert trigger, asyncimage and autocomplete chroma --- .../tests/chromatic/AlertTrigger.chroma.jsx | 48 +- .../tests/chromatic/Autocomplete.chroma.jsx | 811 +++++++++--------- .../tests/chromatic/AsyncImage.chroma.jsx | 32 +- 3 files changed, 437 insertions(+), 454 deletions(-) diff --git a/packages/components/src/alert/tests/chromatic/AlertTrigger.chroma.jsx b/packages/components/src/alert/tests/chromatic/AlertTrigger.chroma.jsx index 26cc2f6ff..318020286 100644 --- a/packages/components/src/alert/tests/chromatic/AlertTrigger.chroma.jsx +++ b/packages/components/src/alert/tests/chromatic/AlertTrigger.chroma.jsx @@ -2,30 +2,28 @@ import { Alert, AlertTrigger } from "@components/alert"; import { Button } from "@components/button"; import { Content } from "@components/placeholders"; import { Heading } from "@components/typography"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/AlertTrigger") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/AlertTrigger", + component: AlertTrigger +}; -stories() - .add("default", () => - - - - Launch - Are you sure you want to launch the space shuttle? - - - ) - .add("default open", () => - - - - Launch - Are you sure you want to launch the space shuttle? - - - ); +export const Default = () => + + + Launch + Are you sure you want to launch the space shuttle? + +; + + +export const DefaultOpen = () => + + + Launch + Are you sure you want to launch the space shuttle? + +; + +Default.storyName = "default"; +DefaultOpen.storyName = "default open"; diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.chroma.jsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.chroma.jsx index 6b5e52ace..f189c8419 100644 --- a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.chroma.jsx +++ b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.chroma.jsx @@ -3,452 +3,445 @@ import { Div } from "@components/html"; import { GroupIcon } from "@components/icons"; import { Inline, Stack } from "@components/layout"; import { Item } from "@components/collection"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Autocomplete") - .segment(segment) - .parameters(paramsBuilder() - .chromaticDelay(100) - .chromaticPauseAnimationAtEnd() - .build()) - .build(); -} +export default { + title: "Chromatic/Autocomplete", + component: Autocomplete, + parameters: { + chromatic: { + delay: 100, + chromaticPauseAnimationAtEnd: true + } + } +}; -stories() - .add("default", () => - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
-
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
-
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
- - ) - .add("placeholder", () => - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - - - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
-
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
-
- - Earth - Mars - Saturn - Jupiter - Mercury - Neptune - Uranus - -
- - ) - .add("default value", () => - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - -
- - Earth - Mars - Saturn - -
-
- - Earth - Mars - Saturn - -
-
- - Earth - Mars - Saturn - -
- - ) - .add("default value not matching any item", () => - +export const Default = () => + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+ Earth Mars Saturn + Jupiter + Mercury + Neptune + Uranus - ) - .add("trigger icon", () => - - } placeholder="Select a planet" aria-label="Planets"> - Earth - Mars - Saturn - - } placeholder="Select a planet" aria-label="Planets"> - Earth - Mars - Saturn - - } placeholder="Select a planet" aria-label="Planets"> - Earth - Mars - Saturn - -
- } placeholder="Select a planet" aria-label="Planets"> - Earth - Mars - Saturn - -
-
- } placeholder="Select a planet" aria-label="Planets"> - Earth - Mars - Saturn - -
- - ) - .add("can clear value", () => +
+
+ + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+
+ + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+; + +export const Placeholder = () => + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + + + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+ + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+
+ + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+
+ + Earth + Mars + Saturn + Jupiter + Mercury + Neptune + Uranus + +
+; + +export const DefaultValue = () => + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + Earth Mars Saturn - ) - .add("validation", () => - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - ) - .add("overflowing value", () => - + Earth Mars Saturn - ) - .add("trigger states", () => - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - - ) - .add("no results", () => - - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - - Earth - Mars - Saturn - - -
- - Earth - Mars - Saturn - -
-
- - Earth - Mars - Saturn - -
- - ) - .add("custom trigger width", () => - + +
+ Earth Mars Saturn - ) - .add("custom menu width", () => - +
+
+ Earth Mars Saturn - ) - .add("direction bottom", () => - +
+
+ Earth Mars Saturn - ) - .add("direction top", () => - +
+; + +export const DefaultValueNotMatching = () => + Earth + Mars + Saturn +; + +export const TriggerIcon = () => + } placeholder="Select a planet" aria-label="Planets"> + Earth + Mars + Saturn + + } placeholder="Select a planet" aria-label="Planets"> + Earth + Mars + Saturn + + } placeholder="Select a planet" aria-label="Planets"> + Earth + Mars + Saturn + +
+ } placeholder="Select a planet" aria-label="Planets"> Earth Mars Saturn - ) - .add("align start", () => - +
+
+ } placeholder="Select a planet" aria-label="Planets"> Earth Mars Saturn - , - { - ...paramsBuilder() - .canvasLayout({ paddingLeft: "200px" }) - .build() - } - ) - .add("align end", () => - + +
+; + +export const CanClearValue = () => + Earth + Mars + Saturn +; + +export const Validation = () => + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + +; + +export const OverflowingValue = () => + Earth + Mars + Saturn +; + +export const TriggerStates = () => + + Earth Mars Saturn - , - { - ...paramsBuilder() - .canvasLayout({ paddingLeft: "400px" }) - .build() - } - ) - .add("conditional rendering", () => - - {false && Earth} + + + Earth Mars Saturn - ) - .add("zoom", () => - -
- - Earth - Jupiter - Mars - -
-
- - Earth - Jupiter - Mars - -
- - ) - .add("styling", () => - - - Earth - Jupiter - Mars - - - Earth - Jupiter - Mars - - - Earth - Jupiter - Mars - - - ); + + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + +; + +export const NoResults = () => + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + + Earth + Mars + Saturn + + +
+ + Earth + Mars + Saturn + +
+
+ + Earth + Mars + Saturn + +
+; + +export const CustomTriggerWidth = () => + Earth + Mars + Saturn +; + +export const CustomMenuWidth = () => + Earth + Mars + Saturn +; + +export const DirectionBottom = () => + Earth + Mars + Saturn +; + +export const DirectionTop = () => + Earth + Mars + Saturn +; + +export const AlignStart = () => + Earth + Mars + Saturn +; + +AlignStart.decorators = [Story =>
]; + +export const AlignEnd = () => + Earth + Mars + Saturn +; + +AlignEnd.decorators = [Story =>
]; + +export const ConditionnalRendering = () => + {false && Earth} + Mars + Saturn +; + +export const Zoom = () => +
+ + Earth + Jupiter + Mars + +
+
+ + Earth + Jupiter + Mars + +
+; + +export const Styling = () => + + Earth + Jupiter + Mars + + + Earth + Jupiter + Mars + + + Earth + Jupiter + Mars + +; + +Default.storyName = "default"; +Placeholder.storyName = "placeholder"; +DefaultValue.storyName = "default value"; +DefaultValueNotMatching.storyName = "default value not matching any item"; +TriggerIcon.storyName = "trigger icon"; +CanClearValue.storyName = "can clear value"; +Validation.storyName = "validation"; +OverflowingValue.storyName = "overflowing value"; +TriggerStates.storyName = "trigger states"; +NoResults.storyName = "no results"; +CustomTriggerWidth.storyName = "custom trigger width"; +CustomMenuWidth.storyName = "custom menu width"; +DirectionBottom.storyName = "direction bottom"; +DirectionTop.storyName = "direction top"; +AlignStart.storyName = "align start"; +AlignEnd.storyName = "align end"; +ConditionnalRendering.storyName = "conditional rendering"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/image/tests/chromatic/AsyncImage.chroma.jsx b/packages/components/src/image/tests/chromatic/AsyncImage.chroma.jsx index df4a54b0e..821ae3414 100644 --- a/packages/components/src/image/tests/chromatic/AsyncImage.chroma.jsx +++ b/packages/components/src/image/tests/chromatic/AsyncImage.chroma.jsx @@ -1,27 +1,19 @@ import { AsyncImage } from "@components/image"; import { Img } from "@components/html"; import { Launch } from "./assets"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/AsyncImage") - .segment(segment) - .parameters(paramsBuilder() - .chromaticDelay(500) - .build()) - .build(); -} +export default { + title: "Chromatic/AsyncImage", + component: AsyncImage +}; -stories() - .add("completing", () => - - Launch - - ) - .add("failing", () => - - Launch - - ); +export const Completing = () => + Launch +; +export const Failing = () => + Launch +; +Completing.storyName = "completing"; +Failing.storyName = "failing"; From 47038893d32f09013e94a6bd4dbc891cbdd89b8b Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 27 Oct 2022 13:03:26 -0400 Subject: [PATCH 04/27] reworked stories to CSF --- .../badge/tests/chromatic/Badge.chroma.jsx | 174 -- .../tests/chromatic/BadgeCount.chroma.jsx | 78 + .../badge/tests/chromatic/BadgeDot.chroma.jsx | 34 + .../tests/chromatic/BadgeIcon.chroma.jsx | 50 + .../src/badge/tests/chromatic/BadgeUtils.jsx | 45 + .../tests/chromatic/CrossButton.chroma.jsx | 45 +- .../tests/chromatic/Counter.chroma.jsx | 235 +-- .../dialog/tests/chromatic/Dialog.chroma.jsx | 823 ++++---- .../tests/chromatic/DialogTrigger.chroma.jsx | 141 +- .../tests/chromatic/Disclosure.chroma.jsx | 137 +- .../chromatic/DisclosureArrow.chroma.jsx | 71 +- .../tests/chromatic/Divider.chroma.jsx | 179 +- .../chromatic/DividerVertical.chroma.jsx | 83 + .../field/tests/chromatic/Field.chroma.jsx | 410 ++-- .../tests/chromatic/FieldMessage.chroma.jsx | 219 +-- .../tests/chromatic/GroupField.chroma.jsx | 208 +- .../field/tests/chromatic/Label.chroma.jsx | 51 +- .../form/tests/chromatic/Fieldset.chroma.jsx | 272 +-- .../src/form/tests/chromatic/Form.chroma.jsx | 591 ++---- .../tests/chromatic/FormFlexInline.chroma.jsx | 190 ++ .../tests/chromatic/FormGridInline.chroma.jsx | 143 ++ .../src/html/tests/chromatic/html.chroma.jsx | 70 +- .../icons/tests/chromatic/IconList.chroma.jsx | 49 +- .../icons/tests/chromatic/Icons.chroma.jsx | 105 +- .../chromatic/IllustratedMessage.chroma.jsx | 189 +- .../image/tests/chromatic/Image.chroma.jsx | 183 +- .../tests/chromatic/InputGroup.chroma.jsx | 1668 +++++++++-------- .../layout/tests/chromatic/Flex.chroma.jsx | 359 +--- .../tests/chromatic/FlexColumn.chroma.jsx | 151 ++ .../layout/tests/chromatic/FlexRow.chroma.jsx | 151 ++ .../layout/tests/chromatic/Grid.chroma.jsx | 915 ++++----- .../layout/tests/chromatic/Inline.chroma.jsx | 193 +- .../tests/chromatic/Listbox.chroma.jsx | 998 +++++----- .../tests/chromatic/Heading.chroma.jsx | 129 +- 34 files changed, 4839 insertions(+), 4500 deletions(-) delete mode 100644 packages/components/src/badge/tests/chromatic/Badge.chroma.jsx create mode 100644 packages/components/src/badge/tests/chromatic/BadgeCount.chroma.jsx create mode 100644 packages/components/src/badge/tests/chromatic/BadgeDot.chroma.jsx create mode 100644 packages/components/src/badge/tests/chromatic/BadgeIcon.chroma.jsx create mode 100644 packages/components/src/badge/tests/chromatic/BadgeUtils.jsx create mode 100644 packages/components/src/divider/tests/chromatic/DividerVertical.chroma.jsx create mode 100644 packages/components/src/form/tests/chromatic/FormFlexInline.chroma.jsx create mode 100644 packages/components/src/form/tests/chromatic/FormGridInline.chroma.jsx create mode 100644 packages/components/src/layout/tests/chromatic/FlexColumn.chroma.jsx create mode 100644 packages/components/src/layout/tests/chromatic/FlexRow.chroma.jsx diff --git a/packages/components/src/badge/tests/chromatic/Badge.chroma.jsx b/packages/components/src/badge/tests/chromatic/Badge.chroma.jsx deleted file mode 100644 index 7ad71f901..000000000 --- a/packages/components/src/badge/tests/chromatic/Badge.chroma.jsx +++ /dev/null @@ -1,174 +0,0 @@ -import { CheckCircleIcon, EmailIcon } from "@components/icons"; - -import { Badge } from "@components/badge"; -import { Div } from "@components/html"; -import { Inline } from "@components/layout"; -import { Text } from "@components/typography"; -import { storiesOfBuilder } from "@stories/utils"; - -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Badge") - .segment(segment) - .build(); -} - -function SquareBadge({ children, ...rest }) { - return ( - - {children} -
- - ); -} - -function CircleBadge({ children, ...rest }) { - return ( - - {children} -
- - ); -} - -function IconBadge({ children, ...rest }) { - return ( - - {children} - - - ); -} - -function TextBadge({ children, ...rest }) { - return ( - - {children} - Notifications - - ); -} - -stories("/count") - .add("default", () => - - - 5 - - - 5+ - - - 50 - - - 500 - - - 500+ - - - ) - .add("overlap", () => - - - 50 - - - 50 - - - 50 - - - ) - .add("zoom", () => - -
- - 5 - - -
-
- - 5 - -
- - - ) - .add("styling", () => - - - 100 - - - 100 - - - 100 - - - ); - -stories("/dot") - .add("default", () => - - ) - .add("overlap", () => - - - - - - - ) - .add("styling", () => - - - - - - ); - -stories("/icon") - .add("default", () => - - - - ) - .add("overlap", () => - - - - - - - - - - - - - - - ) - .add("styling", () => - - - - - - - - - - - - ); diff --git a/packages/components/src/badge/tests/chromatic/BadgeCount.chroma.jsx b/packages/components/src/badge/tests/chromatic/BadgeCount.chroma.jsx new file mode 100644 index 000000000..9c9ca1c72 --- /dev/null +++ b/packages/components/src/badge/tests/chromatic/BadgeCount.chroma.jsx @@ -0,0 +1,78 @@ +import { Badge } from "@components/badge"; +import { Div } from "@components/html"; +import { Inline } from "@components/layout"; +import { CircleBadge, IconBadge, SquareBadge } from "./BadgeUtils"; +import { Text } from "@components/typography"; + +export default { + component: Badge, + title: "Chromatic/Badge/count" +}; + +export const Default = { + render: () => + + 5 + + + 5+ + + + 50 + + + 500 + + + 500+ + + +}; + +export const Overlap = { + render: () => + + 50 + + + 50 + + + 50 + + +}; + +export const Zoom = { + render: () => +
+ + 5 + +
+
+ + 5 + +
+ +}; + +export const Styling = { + render: () => + + 100 + + + 100 + + + 100 + + +}; + +Default.storyName = "default"; +Overlap.storyName = "overlap"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/badge/tests/chromatic/BadgeDot.chroma.jsx b/packages/components/src/badge/tests/chromatic/BadgeDot.chroma.jsx new file mode 100644 index 000000000..4967d79b4 --- /dev/null +++ b/packages/components/src/badge/tests/chromatic/BadgeDot.chroma.jsx @@ -0,0 +1,34 @@ +import { Badge } from "@components/badge"; +import { CircleBadge, IconBadge, SquareBadge, TextBadge } from "./BadgeUtils"; +import { Inline } from "@components/layout"; + +export default { + component: Badge, + title: "Chromatic/Badge/dot" +}; + + +export const Default = { + render: () => +}; + +export const Overlap = { + render: () => + + + + + +}; + +export const Styling = { + render: () => + + + + +}; + +Default.storyName = "default"; +Overlap.storyName = "overlap"; +Styling.storyName = "styling"; diff --git a/packages/components/src/badge/tests/chromatic/BadgeIcon.chroma.jsx b/packages/components/src/badge/tests/chromatic/BadgeIcon.chroma.jsx new file mode 100644 index 000000000..863c7742a --- /dev/null +++ b/packages/components/src/badge/tests/chromatic/BadgeIcon.chroma.jsx @@ -0,0 +1,50 @@ +import { CheckCircleIcon } from "@components/icons"; +import { Badge } from "@components/badge"; +import { CircleBadge, IconBadge, SquareBadge, TextBadge } from "./BadgeUtils"; +import { Inline } from "@components/layout"; + +export default { + component: Badge, + title: "Chromatic/Badge/icon" +}; + +export const Default = { + render: () => + + +}; + +export const Overlap = { + render: () => + + + + + + + + + + + + + +}; + +export const Styling = { + render: () => + + + + + + + + + + +}; + +Default.storyName = "default"; +Overlap.storyName = "overlap"; +Styling.storyName = "styling"; diff --git a/packages/components/src/badge/tests/chromatic/BadgeUtils.jsx b/packages/components/src/badge/tests/chromatic/BadgeUtils.jsx new file mode 100644 index 000000000..3fce6253e --- /dev/null +++ b/packages/components/src/badge/tests/chromatic/BadgeUtils.jsx @@ -0,0 +1,45 @@ +import { Badge } from "@components/badge"; +import { Div } from "@components/html"; +import { EmailIcon } from "@components/icons"; + +export function SquareBadge({ children, ...rest }) { + return ( + + {children} +
+ + ); +} + +export function CircleBadge({ children, ...rest }) { + return ( + + {children} +
+ + ); +} + +export function IconBadge({ children, ...rest }) { + return ( + + {children} + + + ); +} + +export function TextBadge({ children, ...rest }) { + return ( + + {children} + Notifications + + ); +} diff --git a/packages/components/src/button/tests/chromatic/CrossButton.chroma.jsx b/packages/components/src/button/tests/chromatic/CrossButton.chroma.jsx index d96d25069..693aca319 100644 --- a/packages/components/src/button/tests/chromatic/CrossButton.chroma.jsx +++ b/packages/components/src/button/tests/chromatic/CrossButton.chroma.jsx @@ -1,27 +1,26 @@ import { CrossButton } from "@components/button"; import { Inline } from "@components/layout"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/CrossButton") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/CrossButton", + component: CrossButton +}; -stories() - .add("default", () => - - - - - - - ) - .add("condensed", () => - - - - - - - ); +export const Default = () => + + + + + + ; + +export const Condensed = () => + + + + + + ; + +Default.storyName = "default"; +Condensed.storyName = "condensed"; diff --git a/packages/components/src/counter/tests/chromatic/Counter.chroma.jsx b/packages/components/src/counter/tests/chromatic/Counter.chroma.jsx index a858e86d6..dece94ab3 100644 --- a/packages/components/src/counter/tests/chromatic/Counter.chroma.jsx +++ b/packages/components/src/counter/tests/chromatic/Counter.chroma.jsx @@ -2,128 +2,133 @@ import { Counter } from "@components/counter"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { Text } from "@components/typography"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Counter") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/Counter", + component: Counter +}; -stories() - .add("default", () => - - - 15 +export const Default = () => + + 15 + 15 + + + + 15 + + + 15 + + + 15 + + + 15 + + +; + +export const Divider = () => + + + 15 + 15 + + + + 15 + + + 15 + + + 15 + + + 15 + + + ; + +export const Pushed = () => + +
+ Planets Visited + 15 +
+
+ Planets Visited + 15 +
+ ; + +export const Reverse = () => + +
+ 15 + Planets Visited +
+
+ 15 + Planets Visited +
+ ; + +export const Color = () => + + 15 + 15 + ; + +export const Highlight = () => + + 15 + 15 + ; + +export const Disabled = () => + + 15 + 15 + ; + +export const Zoom = () => + +
+ 15 - - - - 15 - - - 15 - - - 15 - - - 15 - - - - ) - .add("divider", () => - - - 15 15 - - - 15 - - - 15 - - - 15 - - - 15 - +
+
+ + 15 + 15 - - ) - .add("pushed", () => - -
- Planets Visited - 15 -
-
- Planets Visited - 15 -
- - ) - .add("reverse", () => - -
- 15 - Planets Visited -
-
- 15 - Planets Visited -
- - ) - .add("color", () => - - 15 - 15 - - ) - .add("highlight", () => +
+ ; + +export const Styling = () => + - 15 - 15 + 15 + 15 + 15 - ) - .add("disabled", () => - 15 - 15 + 15 + 15 + 15 - ) - .add("zoom", () => - -
- - 15 - 15 - -
-
- - 15 - 15 - -
- - ) - .add("styling", () => - - - 15 - 15 - 15 - - - 15 - 15 - 15 - - - ); + ; + +Default.storyName = "default"; +Divider.storyName = "divider"; +Pushed.storyName = "pushed"; +Reverse.storyName = "reverse"; +Color.storyName = "color"; +Highlight.storyName = "highlight"; +Disabled.storyName = "disabled"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/dialog/tests/chromatic/Dialog.chroma.jsx b/packages/components/src/dialog/tests/chromatic/Dialog.chroma.jsx index e18f9da2c..65b968654 100644 --- a/packages/components/src/dialog/tests/chromatic/Dialog.chroma.jsx +++ b/packages/components/src/dialog/tests/chromatic/Dialog.chroma.jsx @@ -10,330 +10,401 @@ import { Div } from "@components/html"; import { Illustration } from "@components/illustration"; import { Image } from "@components"; import { TextLink } from "@components/link"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Dialog") - .segment(segment) - .build(); -} -stories() - .add("default", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("text header", () => - - Iconic Arecibo Observatory collapses -
02 December 2020
- - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("link header", () => - - Iconic Arecibo Observatory collapses -
- View the whole story -
- - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("text footer", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
02 December 2020
- - ) - .add("link footer", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
- View the whole story -
- - ) - .add("button", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - +export default { + title: "Chromatic/Dialog", + component: Dialog +}; + +export const Default = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const TextHeader = () => + + Iconic Arecibo Observatory collapses +
02 December 2020
+ + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const LinkHeader = () => + + Iconic Arecibo Observatory collapses +
+ View the whole story +
+ + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const TextFooter = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
02 December 2020
+ ; + +export const LinkFooter = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
+ View the whole story +
+ ; + +export const DialogButton = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + ; + +export const DialogButtonGroup = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + - - ) - .add("button group", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - - - - ) - .add("footer & button group", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
02 December 2020
- - - - - - ) - .add("image too small", () => - - Apollo 11 - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("image too big", () => - - The Martian - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("illustration", () => - - - Nasa - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("all sections", () => - - - Nasa - - Iconic Arecibo Observatory collapses -
- View the whole story -
- - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
02 December 2020
- - - - - - ) - .add("heading overflow", () => - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi. - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("header overflow", () => - - Iconic Arecibo Observatory collapses -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
- - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("footer overflow", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
- - - - - - ) - .add("button overflow", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - - - - - ) - .add("everything overflow", () => + + + ; + +export const FooterButtonGroup = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
02 December 2020
+ + + + + ; + +export const ImageTooSmall = () => + + Apollo 11 + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const ImageTooBig = () => + + The Martian + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const DialogueIllustration = () => + + + Nasa + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const AllSections = () => + + + Nasa + + Iconic Arecibo Observatory collapses +
+ View the whole story +
+ + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
02 December 2020
+ + + + + ; + +export const HeadingOverflow = () => + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi. + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const HeaderOverflow = () => + + Iconic Arecibo Observatory collapses +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
+ + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const FooterOverflow = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
+ + + + + ; + +export const ButtonOverflow = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + + + + + ; + +export const EverythingOverflow = () => + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi. +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
+ + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
+ + + + + + ; + +export const NotDismissable = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const Small = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + + + + ; + +export const Medium = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + + + + ; + +export const Large = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + + + + ; + +export const Scrolling = () => + + Iconic Arecibo Observatory collapses + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna tempor libero feugiat tincidunt vitae eget elit. Vivamus pretium euismod leo, vitae rutrum justo luctus euismod. Suspendisse blandit lobortis ipsum nec fringilla. Nulla ex enim, faucibus non consectetur id, molestie nec ante. Morbi massa diam, cursus eget efficitur vitae, fermentum quis ligula. Suspendisse ac turpis eget sapien scelerisque consectetur non vitae lorem. Nulla mollis lacus eget diam sollicitudin vestibulum. Sed iaculis velit orci, aliquet aliquam odio pharetra et. Vestibulum sit amet scelerisque justo. Nulla facilisi. Integer vitae justo aliquam, interdum mi in, pulvinar velit. Vestibulum convallis nisi nibh, vel venenatis lacus lacinia in. + Nunc eu aliquam justo. Nulla blandit, mauris nec bibendum viverra, turpis ipsum laoreet urna, eget ullamcorper arcu eros id neque. Donec tincidunt aliquet accumsan. Aliquam ac dolor nec nisl auctor bibendum. Pellentesque iaculis leo purus, eu sodales libero porttitor vitae. Fusce eget nisi eu neque dapibus pharetra. Proin eget porttitor justo, id luctus metus. Nam mattis elementum neque, ac placerat arcu. Sed ornare, quam a elementum fringilla, justo lacus tristique purus, at lacinia ipsum lorem in eros. Maecenas eget turpis non massa bibendum ullamcorper non sed mauris. Aliquam sagittis augue sit amet lacus mattis pretium. Proin magna nisi, aliquam ac varius quis, dictum vel eros. + Nam ac ipsum vulputate, vulputate lorem sit amet, egestas odio. Sed dignissim, lorem vitae ultricies auctor, neque est tincidunt nunc, ut congue odio erat eget mauris. Etiam a mattis turpis, nec porttitor elit. Proin dolor dolor, semper sed pretium a, consectetur id lacus. Nulla mattis placerat turpis, mattis commodo quam feugiat at. Sed ullamcorper dui vitae odio tempor, a porta tortor fringilla. Sed at dictum nibh, eu faucibus leo. Quisque a arcu porta, condimentum odio a, blandit massa. Nulla luctus mollis eros, ac porttitor neque euismod et. + Maecenas tincidunt dignissim nisl, quis vestibulum lectus finibus et. Morbi justo justo, varius nec lacus nec, dignissim porttitor tellus. Fusce ullamcorper tristique ante, quis porttitor lectus interdum non. Donec pellentesque, eros at molestie ultricies, risus lacus ullamcorper neque, in ornare massa sapien nec dolor. Cras eros neque, aliquam eu faucibus eu, semper porttitor metus. Aenean quis ex ipsum. Sed congue purus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla at magna et sapien sodales ullamcorper. Aliquam erat volutpat. Etiam eu tincidunt tellus. Pellentesque rutrum lacus ut ultricies condimentum. + Donec malesuada turpis sapien, quis eleifend nulla euismod quis. Donec pulvinar dui vitae nibh mattis, sed feugiat magna fringilla. Vivamus nibh magna, pretium vel molestie et, consequat venenatis sem. Etiam sit amet metus eu leo tincidunt efficitur eu ut lectus. Ut molestie convallis congue. Ut nec tristique velit. Morbi efficitur massa quis sem sagittis, vitae venenatis felis pharetra. + Sed imperdiet massa sed ipsum pharetra, id gravida nulla scelerisque. In hac habitasse platea dictumst. Sed eget erat malesuada, malesuada risus eu, consectetur mauris. Nunc mattis ultricies risus non viverra. Quisque libero lacus, finibus at ligula ut, finibus mattis arcu. Phasellus non lacus malesuada urna suscipit faucibus ac eget libero. Mauris eget dui sollicitudin, suscipit purus sed, pharetra lectus. Donec auctor metus eget orci scelerisque, sit amet rhoncus mi egestas. Proin ultrices porttitor feugiat. Nulla et sodales lectus. Proin ut turpis eget ipsum venenatis aliquam. Morbi non egestas lectus. + Nunc sed odio quis ex lacinia tempor rhoncus ut est. Morbi dapibus, turpis congue tempus euismod, augue lorem posuere est, ut rhoncus arcu massa ut urna. Sed in enim quis magna facilisis consequat in nec dui. Vivamus eleifend id ex in pretium. Proin accumsan tincidunt ligula quis aliquet. Donec iaculis, nisi in ultricies facilisis, nisi neque blandit enim, sed lobortis erat magna id nisi. Cras imperdiet lacus eu ante mattis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam ornare tortor eu blandit condimentum. Duis sollicitudin lectus sit amet ullamcorper dignissim. Vivamus a massa ut velit laoreet posuere in sit amet mi. + Suspendisse eu leo convallis metus pharetra viverra. Donec aliquet tempor eros, consectetur porta leo tempus vel. Ut at nibh sit amet erat mollis porta. Etiam eget libero ut nulla volutpat tristique. Sed laoreet hendrerit aliquam. Vivamus sagittis neque sed ante porttitor ornare. Donec aliquam auctor lorem vitae elementum. Phasellus in sem id lectus molestie dapibus. Donec est ante, efficitur id massa quis, luctus fermentum lacus. + Proin hendrerit volutpat diam, at cursus elit euismod ac. Donec in enim quis diam fermentum auctor. Suspendisse dignissim eros quis consectetur mattis. Vestibulum vel hendrerit libero. Vestibulum auctor nisl a ligula accumsan pharetra. Morbi blandit tristique est ac pulvinar. Vestibulum ornare, nulla a elementum facilisis, erat justo tristique tortor, eget rutrum nisi tortor id sapien. Morbi mattis semper urna vitae ornare. + Donec ut purus tempus, eleifend lacus sit amet, varius tellus. Aliquam sed fringilla enim. Suspendisse luctus neque volutpat justo finibus, id auctor purus pellentesque. Fusce vulputate commodo enim ut consequat. Sed elit justo, feugiat ac augue a, rhoncus imperdiet nulla. Maecenas rutrum nulla non massa elementum, sit amet volutpat ex dignissim. Duis vulputate turpis a nisi dictum, a finibus erat feugiat. Donec mollis tristique neque at commodo. Suspendisse quis lacus in erat gravida iaculis et a nisi. + + ; + +export const NoAutofocus = () => + + Iconic Arecibo Observatory collapses + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nunc nibh. Duis quis viverra urna. Proin pharetra justo sit amet quam faucibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque enim, ornare quis accumsan quis, dapibus eget augue. Quisque ultricies risus laoreet, pharetra libero eu, hendrerit eros. In feugiat sed elit et consectetur. Pellentesque blandit egestas mi id volutpat. + Mauris eget ex non nisi finibus sollicitudin in eu quam. In tincidunt purus eu dui aliquam semper. Curabitur a rutrum lorem. Ut interdum risus ac est mattis laoreet id ut velit. Curabitur semper tincidunt justo. Mauris et neque eget lacus imperdiet tempus. Aenean sit amet commodo odio. Maecenas volutpat finibus libero ultrices sagittis. Proin in nisi scelerisque, convallis leo ut, scelerisque velit. Fusce non imperdiet urna, dictum scelerisque quam. Proin tincidunt metus quis eros sollicitudin vestibulum. Maecenas sem sapien, iaculis vel vehicula a, ullamcorper eget ex. Ut dignissim congue semper. Pellentesque bibendum a purus id ultrices. + Donec nec lacus diam. Quisque ut tellus eu dui egestas varius. Vivamus quis urna sem. Aliquam leo nisi, viverra eget leo vitae, finibus elementum nibh. Donec a scelerisque justo. Integer aliquam aliquet purus, dapibus ultrices sapien. Aenean eu suscipit sem, non sollicitudin metus. Pellentesque et magna ornare, feugiat magna malesuada, ullamcorper erat. Etiam sit amet suscipit magna, ac consequat lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse lorem lacus, elementum ultricies nunc eget, blandit iaculis quam. Phasellus mattis ut nibh non feugiat. Nullam nisi neque, placerat ut vestibulum vel, efficitur sit amet enim. + Mauris at finibus velit, tempus tincidunt ligula. Phasellus pretium justo vel neque commodo, non mattis orci malesuada. Fusce ornare non nisi vitae commodo. Aenean vitae rhoncus orci. In ante dui, convallis in scelerisque sit amet, tempor non nibh. Fusce et lobortis massa. Ut vitae condimentum nisl. Fusce pretium dolor sit amet nibh bibendum, at efficitur magna fringilla. Phasellus iaculis elementum est, ut malesuada nunc fermentum ac. Sed eu ultricies felis, vel porta ante. Mauris pharetra efficitur faucibus. + Nulla mollis mauris ut cursus maximus. Suspendisse vitae condimentum turpis, at posuere purus. Fusce viverra justo non turpis gravida, maximus vulputate velit tincidunt. Integer volutpat pulvinar diam, at auctor felis consequat non. Nam ultrices, felis id maximus cursus, nulla quam aliquet turpis, nec feugiat magna urna sit amet nibh. Aenean quis sollicitudin nibh, sit amet feugiat dui. Phasellus maximus luctus arcu in aliquam. Ut a tortor quis justo ullamcorper euismod at sit amet leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam malesuada neque ac pulvinar malesuada. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nunc nibh. Duis quis viverra urna. Proin pharetra justo sit amet quam faucibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque enim, ornare quis accumsan quis, dapibus eget augue. Quisque ultricies risus laoreet, pharetra libero eu, hendrerit eros. In feugiat sed elit et consectetur. Pellentesque blandit egestas mi id volutpat. + Mauris eget ex non nisi finibus sollicitudin in eu quam. In tincidunt purus eu dui aliquam semper. Curabitur a rutrum lorem. Ut interdum risus ac est mattis laoreet id ut velit. Curabitur semper tincidunt justo. Mauris et neque eget lacus imperdiet tempus. Aenean sit amet commodo odio. Maecenas volutpat finibus libero ultrices sagittis. Proin in nisi scelerisque, convallis leo ut, scelerisque velit. Fusce non imperdiet urna, dictum scelerisque quam. Proin tincidunt metus quis eros sollicitudin vestibulum. Maecenas sem sapien, iaculis vel vehicula a, ullamcorper eget ex. Ut dignissim congue semper. Pellentesque bibendum a purus id ultrices. + Donec nec lacus diam. Quisque ut tellus eu dui egestas varius. Vivamus quis urna sem. Aliquam leo nisi, viverra eget leo vitae, finibus elementum nibh. Donec a scelerisque justo. Integer aliquam aliquet purus, dapibus ultrices sapien. Aenean eu suscipit sem, non sollicitudin metus. Pellentesque et magna ornare, feugiat magna malesuada, ullamcorper erat. Etiam sit amet suscipit magna, ac consequat lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse lorem lacus, elementum ultricies nunc eget, blandit iaculis quam. Phasellus mattis ut nibh non feugiat. Nullam nisi neque, placerat ut vestibulum vel, efficitur sit amet enim. + Mauris at finibus velit, tempus tincidunt ligula. Phasellus pretium justo vel neque commodo, non mattis orci malesuada. Fusce ornare non nisi vitae commodo. Aenean vitae rhoncus orci. In ante dui, convallis in scelerisque sit amet, tempor non nibh. Fusce et lobortis massa. Ut vitae condimentum nisl. Fusce pretium dolor sit amet nibh bibendum, at efficitur magna fringilla. Phasellus iaculis elementum est, ut malesuada nunc fermentum ac. Sed eu ultricies felis, vel porta ante. Mauris pharetra efficitur faucibus. + Nulla mollis mauris ut cursus maximus. Suspendisse vitae condimentum turpis, at posuere purus. Fusce viverra justo non turpis gravida, maximus vulputate velit tincidunt. Integer volutpat pulvinar diam, at auctor felis consequat non. Nam ultrices, felis id maximus cursus, nulla quam aliquet turpis, nec feugiat magna urna sit amet nibh. Aenean quis sollicitudin nibh, sit amet feugiat dui. Phasellus maximus luctus arcu in aliquam. Ut a tortor quis justo ullamcorper euismod at sit amet leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam malesuada neque ac pulvinar malesuada. + +
02 December 2020
+ + + + + ; + +export const Focused = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const WrapperStyledSystem = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const WrapperClassName = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const WrapperStyle = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const StyledSystem = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const ClassName = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; + +export const ZoomIn = () => +
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi. -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
- - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.
- - - - - - - ) - .add("not dismissable", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("small", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - - - - ) - .add("medium", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - - - - ) - .add("large", () => - Iconic Arecibo Observatory collapses This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - - ) - .add("scrolling", () => - - Iconic Arecibo Observatory collapses - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna tempor libero feugiat tincidunt vitae eget elit. Vivamus pretium euismod leo, vitae rutrum justo luctus euismod. Suspendisse blandit lobortis ipsum nec fringilla. Nulla ex enim, faucibus non consectetur id, molestie nec ante. Morbi massa diam, cursus eget efficitur vitae, fermentum quis ligula. Suspendisse ac turpis eget sapien scelerisque consectetur non vitae lorem. Nulla mollis lacus eget diam sollicitudin vestibulum. Sed iaculis velit orci, aliquet aliquam odio pharetra et. Vestibulum sit amet scelerisque justo. Nulla facilisi. Integer vitae justo aliquam, interdum mi in, pulvinar velit. Vestibulum convallis nisi nibh, vel venenatis lacus lacinia in. - Nunc eu aliquam justo. Nulla blandit, mauris nec bibendum viverra, turpis ipsum laoreet urna, eget ullamcorper arcu eros id neque. Donec tincidunt aliquet accumsan. Aliquam ac dolor nec nisl auctor bibendum. Pellentesque iaculis leo purus, eu sodales libero porttitor vitae. Fusce eget nisi eu neque dapibus pharetra. Proin eget porttitor justo, id luctus metus. Nam mattis elementum neque, ac placerat arcu. Sed ornare, quam a elementum fringilla, justo lacus tristique purus, at lacinia ipsum lorem in eros. Maecenas eget turpis non massa bibendum ullamcorper non sed mauris. Aliquam sagittis augue sit amet lacus mattis pretium. Proin magna nisi, aliquam ac varius quis, dictum vel eros. - Nam ac ipsum vulputate, vulputate lorem sit amet, egestas odio. Sed dignissim, lorem vitae ultricies auctor, neque est tincidunt nunc, ut congue odio erat eget mauris. Etiam a mattis turpis, nec porttitor elit. Proin dolor dolor, semper sed pretium a, consectetur id lacus. Nulla mattis placerat turpis, mattis commodo quam feugiat at. Sed ullamcorper dui vitae odio tempor, a porta tortor fringilla. Sed at dictum nibh, eu faucibus leo. Quisque a arcu porta, condimentum odio a, blandit massa. Nulla luctus mollis eros, ac porttitor neque euismod et. - Maecenas tincidunt dignissim nisl, quis vestibulum lectus finibus et. Morbi justo justo, varius nec lacus nec, dignissim porttitor tellus. Fusce ullamcorper tristique ante, quis porttitor lectus interdum non. Donec pellentesque, eros at molestie ultricies, risus lacus ullamcorper neque, in ornare massa sapien nec dolor. Cras eros neque, aliquam eu faucibus eu, semper porttitor metus. Aenean quis ex ipsum. Sed congue purus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla at magna et sapien sodales ullamcorper. Aliquam erat volutpat. Etiam eu tincidunt tellus. Pellentesque rutrum lacus ut ultricies condimentum. - Donec malesuada turpis sapien, quis eleifend nulla euismod quis. Donec pulvinar dui vitae nibh mattis, sed feugiat magna fringilla. Vivamus nibh magna, pretium vel molestie et, consequat venenatis sem. Etiam sit amet metus eu leo tincidunt efficitur eu ut lectus. Ut molestie convallis congue. Ut nec tristique velit. Morbi efficitur massa quis sem sagittis, vitae venenatis felis pharetra. - Sed imperdiet massa sed ipsum pharetra, id gravida nulla scelerisque. In hac habitasse platea dictumst. Sed eget erat malesuada, malesuada risus eu, consectetur mauris. Nunc mattis ultricies risus non viverra. Quisque libero lacus, finibus at ligula ut, finibus mattis arcu. Phasellus non lacus malesuada urna suscipit faucibus ac eget libero. Mauris eget dui sollicitudin, suscipit purus sed, pharetra lectus. Donec auctor metus eget orci scelerisque, sit amet rhoncus mi egestas. Proin ultrices porttitor feugiat. Nulla et sodales lectus. Proin ut turpis eget ipsum venenatis aliquam. Morbi non egestas lectus. - Nunc sed odio quis ex lacinia tempor rhoncus ut est. Morbi dapibus, turpis congue tempus euismod, augue lorem posuere est, ut rhoncus arcu massa ut urna. Sed in enim quis magna facilisis consequat in nec dui. Vivamus eleifend id ex in pretium. Proin accumsan tincidunt ligula quis aliquet. Donec iaculis, nisi in ultricies facilisis, nisi neque blandit enim, sed lobortis erat magna id nisi. Cras imperdiet lacus eu ante mattis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam ornare tortor eu blandit condimentum. Duis sollicitudin lectus sit amet ullamcorper dignissim. Vivamus a massa ut velit laoreet posuere in sit amet mi. - Suspendisse eu leo convallis metus pharetra viverra. Donec aliquet tempor eros, consectetur porta leo tempus vel. Ut at nibh sit amet erat mollis porta. Etiam eget libero ut nulla volutpat tristique. Sed laoreet hendrerit aliquam. Vivamus sagittis neque sed ante porttitor ornare. Donec aliquam auctor lorem vitae elementum. Phasellus in sem id lectus molestie dapibus. Donec est ante, efficitur id massa quis, luctus fermentum lacus. - Proin hendrerit volutpat diam, at cursus elit euismod ac. Donec in enim quis diam fermentum auctor. Suspendisse dignissim eros quis consectetur mattis. Vestibulum vel hendrerit libero. Vestibulum auctor nisl a ligula accumsan pharetra. Morbi blandit tristique est ac pulvinar. Vestibulum ornare, nulla a elementum facilisis, erat justo tristique tortor, eget rutrum nisi tortor id sapien. Morbi mattis semper urna vitae ornare. - Donec ut purus tempus, eleifend lacus sit amet, varius tellus. Aliquam sed fringilla enim. Suspendisse luctus neque volutpat justo finibus, id auctor purus pellentesque. Fusce vulputate commodo enim ut consequat. Sed elit justo, feugiat ac augue a, rhoncus imperdiet nulla. Maecenas rutrum nulla non massa elementum, sit amet volutpat ex dignissim. Duis vulputate turpis a nisi dictum, a finibus erat feugiat. Donec mollis tristique neque at commodo. Suspendisse quis lacus in erat gravida iaculis et a nisi. - - - ) - .add("do not autofocus an element which is not in the initial viewport", () => +
; + +export const ZoomOut = () => +
- Iconic Arecibo Observatory collapses - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nunc nibh. Duis quis viverra urna. Proin pharetra justo sit amet quam faucibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque enim, ornare quis accumsan quis, dapibus eget augue. Quisque ultricies risus laoreet, pharetra libero eu, hendrerit eros. In feugiat sed elit et consectetur. Pellentesque blandit egestas mi id volutpat. - Mauris eget ex non nisi finibus sollicitudin in eu quam. In tincidunt purus eu dui aliquam semper. Curabitur a rutrum lorem. Ut interdum risus ac est mattis laoreet id ut velit. Curabitur semper tincidunt justo. Mauris et neque eget lacus imperdiet tempus. Aenean sit amet commodo odio. Maecenas volutpat finibus libero ultrices sagittis. Proin in nisi scelerisque, convallis leo ut, scelerisque velit. Fusce non imperdiet urna, dictum scelerisque quam. Proin tincidunt metus quis eros sollicitudin vestibulum. Maecenas sem sapien, iaculis vel vehicula a, ullamcorper eget ex. Ut dignissim congue semper. Pellentesque bibendum a purus id ultrices. - Donec nec lacus diam. Quisque ut tellus eu dui egestas varius. Vivamus quis urna sem. Aliquam leo nisi, viverra eget leo vitae, finibus elementum nibh. Donec a scelerisque justo. Integer aliquam aliquet purus, dapibus ultrices sapien. Aenean eu suscipit sem, non sollicitudin metus. Pellentesque et magna ornare, feugiat magna malesuada, ullamcorper erat. Etiam sit amet suscipit magna, ac consequat lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse lorem lacus, elementum ultricies nunc eget, blandit iaculis quam. Phasellus mattis ut nibh non feugiat. Nullam nisi neque, placerat ut vestibulum vel, efficitur sit amet enim. - Mauris at finibus velit, tempus tincidunt ligula. Phasellus pretium justo vel neque commodo, non mattis orci malesuada. Fusce ornare non nisi vitae commodo. Aenean vitae rhoncus orci. In ante dui, convallis in scelerisque sit amet, tempor non nibh. Fusce et lobortis massa. Ut vitae condimentum nisl. Fusce pretium dolor sit amet nibh bibendum, at efficitur magna fringilla. Phasellus iaculis elementum est, ut malesuada nunc fermentum ac. Sed eu ultricies felis, vel porta ante. Mauris pharetra efficitur faucibus. - Nulla mollis mauris ut cursus maximus. Suspendisse vitae condimentum turpis, at posuere purus. Fusce viverra justo non turpis gravida, maximus vulputate velit tincidunt. Integer volutpat pulvinar diam, at auctor felis consequat non. Nam ultrices, felis id maximus cursus, nulla quam aliquet turpis, nec feugiat magna urna sit amet nibh. Aenean quis sollicitudin nibh, sit amet feugiat dui. Phasellus maximus luctus arcu in aliquam. Ut a tortor quis justo ullamcorper euismod at sit amet leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam malesuada neque ac pulvinar malesuada. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nunc nibh. Duis quis viverra urna. Proin pharetra justo sit amet quam faucibus pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque enim, ornare quis accumsan quis, dapibus eget augue. Quisque ultricies risus laoreet, pharetra libero eu, hendrerit eros. In feugiat sed elit et consectetur. Pellentesque blandit egestas mi id volutpat. - Mauris eget ex non nisi finibus sollicitudin in eu quam. In tincidunt purus eu dui aliquam semper. Curabitur a rutrum lorem. Ut interdum risus ac est mattis laoreet id ut velit. Curabitur semper tincidunt justo. Mauris et neque eget lacus imperdiet tempus. Aenean sit amet commodo odio. Maecenas volutpat finibus libero ultrices sagittis. Proin in nisi scelerisque, convallis leo ut, scelerisque velit. Fusce non imperdiet urna, dictum scelerisque quam. Proin tincidunt metus quis eros sollicitudin vestibulum. Maecenas sem sapien, iaculis vel vehicula a, ullamcorper eget ex. Ut dignissim congue semper. Pellentesque bibendum a purus id ultrices. - Donec nec lacus diam. Quisque ut tellus eu dui egestas varius. Vivamus quis urna sem. Aliquam leo nisi, viverra eget leo vitae, finibus elementum nibh. Donec a scelerisque justo. Integer aliquam aliquet purus, dapibus ultrices sapien. Aenean eu suscipit sem, non sollicitudin metus. Pellentesque et magna ornare, feugiat magna malesuada, ullamcorper erat. Etiam sit amet suscipit magna, ac consequat lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse lorem lacus, elementum ultricies nunc eget, blandit iaculis quam. Phasellus mattis ut nibh non feugiat. Nullam nisi neque, placerat ut vestibulum vel, efficitur sit amet enim. - Mauris at finibus velit, tempus tincidunt ligula. Phasellus pretium justo vel neque commodo, non mattis orci malesuada. Fusce ornare non nisi vitae commodo. Aenean vitae rhoncus orci. In ante dui, convallis in scelerisque sit amet, tempor non nibh. Fusce et lobortis massa. Ut vitae condimentum nisl. Fusce pretium dolor sit amet nibh bibendum, at efficitur magna fringilla. Phasellus iaculis elementum est, ut malesuada nunc fermentum ac. Sed eu ultricies felis, vel porta ante. Mauris pharetra efficitur faucibus. - Nulla mollis mauris ut cursus maximus. Suspendisse vitae condimentum turpis, at posuere purus. Fusce viverra justo non turpis gravida, maximus vulputate velit tincidunt. Integer volutpat pulvinar diam, at auctor felis consequat non. Nam ultrices, felis id maximus cursus, nulla quam aliquet turpis, nec feugiat magna urna sit amet nibh. Aenean quis sollicitudin nibh, sit amet feugiat dui. Phasellus maximus luctus arcu in aliquam. Ut a tortor quis justo ullamcorper euismod at sit amet leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam malesuada neque ac pulvinar malesuada. - -
02 December 2020
- - - - - - ) - .add("focused", () => - Iconic Arecibo Observatory collapses This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." @@ -341,89 +412,47 @@ stories() The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - ) - .add("wrapper styled system", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("wrapper className", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("wrapper style", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("styled system", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("className", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ) - .add("zoom in", () => -
- - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - -
- ) - .add("zoom out", () => -
- - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - -
- ) - .add("style", () => - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - ); +
; + +export const Style = () => + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + ; +Default.storyName = "default"; +TextHeader.storyName = "text header"; +LinkHeader.storyName = "link header"; +TextFooter.storyName = "text footer"; +LinkFooter.storyName = "link footer"; +DialogButton.storyName = "button"; +DialogButtonGroup.storyName = "button group"; +FooterButtonGroup.storyName = "footer & button group"; +ImageTooSmall.storyName = "image too small"; +ImageTooBig.storyName = "image too big"; +DialogueIllustration.storyName = "illustration"; +AllSections.storyName = "all sections"; +HeadingOverflow.storyName = "heading overflow"; +HeaderOverflow.storyName = "header overflow"; +FooterOverflow.storyName = "footer overflow"; +ButtonOverflow.storyName = "button overflow"; +EverythingOverflow.storyName = "everything overflow"; +NotDismissable.storyName = "not dismissable"; +Small.storyName = "small"; +Medium.storyName = "medium"; +Large.storyName = "large"; +Scrolling.storyName = "scrolling"; +NoAutofocus.storyName = "do not autofocus an element which is not in the initial viewport"; +Focused.storyName = "focused"; +WrapperStyledSystem.storyName = "wrapper styled system"; +WrapperClassName.storyName = "wrapper className"; +WrapperStyle.storyName = "wrapper style"; +StyledSystem.storyName = "styled system"; +ClassName.storyName = "className"; +ZoomIn.storyName = "zoom in"; +ZoomOut.storyName = "zoom out"; +Style.storyName = "style"; diff --git a/packages/components/src/dialog/tests/chromatic/DialogTrigger.chroma.jsx b/packages/components/src/dialog/tests/chromatic/DialogTrigger.chroma.jsx index d9f009425..c376ddfe1 100644 --- a/packages/components/src/dialog/tests/chromatic/DialogTrigger.chroma.jsx +++ b/packages/components/src/dialog/tests/chromatic/DialogTrigger.chroma.jsx @@ -2,74 +2,77 @@ import { Button } from "@components/button"; import { Content } from "@components/placeholders"; import { Dialog, DialogTrigger } from "@components/dialog"; import { Heading, Paragraph } from "@components/typography"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/DialogTrigger") - .segment(segment) - .parameters(paramsBuilder() - .chromaticDelay(100) - .chromaticPauseAnimationAtEnd() - .build()) - .build(); -} +export default { + title: "Chromatic/DialogTrigger", + component: DialogTrigger, + parameters: { + chromatic: { + delay: 100, + chromaticPauseAnimationAtEnd: true + } + } +}; -stories() - .add("default", () => - - - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - ) - .add("default open", () => - - - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - ) - .add("not dismissable", () => - - - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - ) - .add("functional content", () => - - {() => { - return ( - <> - - - Iconic Arecibo Observatory collapses - - This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." - The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. - The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. - - - - ); - }} - - ); +export const Default = () => + + + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + ; + +export const DefaultOpen = () => + + + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + ; + +export const NotDismissable = () => + + + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + ; + +export const FunctionalContent = () => + + {() => { + return ( + <> + + + Iconic Arecibo Observatory collapses + + This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye." + The facility suffered two cable failures this year, and then in early December, the suspended platform above the radio dish came crashing down. + The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children. + + + + ); + }} + ; + +Default.storyName = "default"; +DefaultOpen.storyName = "default open"; +NotDismissable.storyName = "not dismissable"; +FunctionalContent.storyName = "functional content"; diff --git a/packages/components/src/disclosure/tests/chromatic/Disclosure.chroma.jsx b/packages/components/src/disclosure/tests/chromatic/Disclosure.chroma.jsx index 292a1d04e..fae379039 100644 --- a/packages/components/src/disclosure/tests/chromatic/Disclosure.chroma.jsx +++ b/packages/components/src/disclosure/tests/chromatic/Disclosure.chroma.jsx @@ -1,85 +1,84 @@ import { Disclosure, useDisclosureContext } from "@components/disclosure"; import { Flex, Stack } from "@components/layout"; - import { ArrowIcon } from "@components/icons"; import { Button } from "@components/button"; import { Div } from "@components/html"; import { TextLinkAsButton } from "@components/link"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Disclosure") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/Disclosure", + component: Disclosure +}; -stories() - .add("default", () => - +const Trigger = ({ children, ...rest }) => { + const { isOpen } = useDisclosureContext(); + + return ( + + {children} + + + ); +}; + +export const Default = () => + + +
+ Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System (in adherence with the IAU's controversial 2006 definition of planet), + being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".[17][18] The latter refers + to the effect of the iron oxide prevalent on Mars's surface, which gives it a reddish appearance distinctive among the astronomical bodies visible to the naked eye. + [19] Mars is a terrestrial planet with a thin atmosphere, with surface features reminiscent of the impact craters of the Moon and the valleys, deserts and polar ice caps of Earth. +
+ ; + +export const Opened = () => + + -
- Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System (in adherence with the IAU's controversial 2006 definition of planet), - being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".[17][18] The latter refers - to the effect of the iron oxide prevalent on Mars's surface, which gives it a reddish appearance distinctive among the astronomical bodies visible to the naked eye. - [19] Mars is a terrestrial planet with a thin atmosphere, with surface features reminiscent of the impact craters of the Moon and the valleys, deserts and polar ice caps of Earth. -
+
Mars is the fourth planet from the Sun and the second-smallest planet.
 - ) - .add("opened", () => - - - -
Mars is the fourth planet from the Sun and the second-smallest planet.
- - - -
Mars is the fourth planet from the Sun and the second-smallest planet.
- - - ) - .add("custom trigger", () => { - const Trigger = ({ children, ...rest }) => { - const { isOpen } = useDisclosureContext(); - - return ( - - {children} - - - ); - }; + + +
Mars is the fourth planet from the Sun and the second-smallest planet.
+ + ; - return ( - - - Mars -
Mars is the fourth planet from the Sun and the second-smallest planet.
- - - Mars -
Mars is the fourth planet from the Sun and the second-smallest planet.
- - - ); - }) - .add("text link", () => +export const CustomTrigger = () => + - Mars + Mars
Mars is the fourth planet from the Sun and the second-smallest planet.
 - ) - .add("functional content", () => - {() => { - return ( - <> - -
Mars is the fourth planet from the Sun and the second-smallest planet.
- - ); - }} + Mars +
Mars is the fourth planet from the Sun and the second-smallest planet.
 - ); + ; + +export const TextLink = () => + + Mars +
Mars is the fourth planet from the Sun and the second-smallest planet.
+ ; + +export const FunctionalContent = () => + + {() => { + return ( + <> + +
Mars is the fourth planet from the Sun and the second-smallest planet.
+ + ); + }} + ; + +Default.storyName = "default"; +Opened.storyName = "opened"; +CustomTrigger.storyName = "custom trigger"; +TextLink.storyName = "text link"; +FunctionalContent.storyName = "functional content"; diff --git a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.chroma.jsx b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.chroma.jsx index 85b3740d4..c355dc6c9 100644 --- a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.chroma.jsx +++ b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.chroma.jsx @@ -1,39 +1,42 @@ import { DisclosureArrow, DisclosureContext } from "@components/disclosure"; import { Inline } from "@components/layout"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/DisclosureArrow") - .segment(segment) - .parameters(paramsBuilder() - .chromaticDelay(100) - .build()) - .build(); -} +export default { + title: "Chromatic/DisclosureArrow", + component: DisclosureArrow, + parameters: { + chromatic: { + delay: 100 + } + } +}; -stories() - .add("default", () => +export const Default = () => + ; + +export const Controlled = () => + + - ) - .add("controlled", () => - - - - - ) - .add("context", () => - - - - - - - - - ) - .add("styling", () => - - - - - ); + ; + +export const Context = () => + + + + + + + + ; + +export const Styling = () => + + + + ; + +Default.storyName = "default"; +Controlled.storyName = "controlled"; +Context.storyName = "context"; +Styling.storyName = "styling"; diff --git a/packages/components/src/divider/tests/chromatic/Divider.chroma.jsx b/packages/components/src/divider/tests/chromatic/Divider.chroma.jsx index 4b685acc0..99bb8fcbc 100644 --- a/packages/components/src/divider/tests/chromatic/Divider.chroma.jsx +++ b/packages/components/src/divider/tests/chromatic/Divider.chroma.jsx @@ -1,130 +1,69 @@ import { Div } from "@components/html"; import { Divider } from "@components/divider"; -import { Dot } from "@components/dot"; -import { Flex, Inline, Stack } from "@components/layout"; +import { Stack } from "@components/layout"; import { Text } from "@components/typography"; -import { TextLink } from "@components/link"; -import { storiesOfBuilder } from "@stories/utils"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Divider") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/Divider", + component: Divider +}; -stories() - .add("default", () => +export const Default = () => + ; + +export const Surrounded = () => +
+ Apollo 8 - 1968 - ) - .add("surrounded", () => -
- Apollo 8 - 1968 - - Apollo 11 - 1969 -
- ) - .add("multiple separators", () => -
- Apollo 8 - 1968 - - Apollo 11 - 1969 - - Luna 16 - 1970 - - Salyut 1 - 1971 -
- ) - .add("labelled", () => + Apollo 11 - 1969 +
; + +export const MultipleSeparators = () => +
+ Apollo 8 - 1968 + + Apollo 11 - 1969 + + Luna 16 - 1970 + + Salyut 1 - 1971 +
; + +export const Labelled = () => + Since 1978; + +export const LongLabel = () => + Since 1978 there have been more than 10 space exploration missions.; + +export const LabelledSurrounded = () => +
+ Apollo 11 - 1969 Since 1978 - ) - .add("long label", () => - Since 1978 there have been more than 10 space exploration missions. - ) - .add("labelled + surrounded", () => -
- Apollo 11 - 1969 - Since 1978 - Voyager 1 - 1990 -
- ) - .add("zoom", () => - -
- Since 1978 -
-
- Since 1978 -
- - ) - .add("styling", () => - - - - - - ); + Voyager 1 - 1990 +
; -stories("/vertical") - .add("default", () => -
- -
- ) - .add("dot", () => - - Engines ready - - Falcon 9 - - ) - .add("multiple separators", () => - - Starlink - - Delivery #9 - - View details - - ) - .add("labelled", () => -
- Since 1978 +export const Zoom = () => + +
+ Since 1978
- ) - .add("long label", () => -
- Since 1978 there have been more than 10 space exploration missions. +
+ Since 1978
- ) - .add("labelled + surrounded", () => - - Mission goals - Since 1978 - Mission post mortem - - ) - .add("align items", () => - - Mission goals - - Mission post mortem - - ) - .add("zoom", () => - -
- Since 1978 -
-
- Since 1978 -
- - ) - .add("styling", () => - - - - - - ); + ; + +export const Styling = () => + + + + + ; + +Default.storyName = "default"; +Surrounded.storyName = "surrounded"; +MultipleSeparators.storyName = "multiple separators"; +Labelled.storyName = "labelled"; +LongLabel.storyName = "long label"; +LabelledSurrounded.storyName = "labelled surrounded"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/divider/tests/chromatic/DividerVertical.chroma.jsx b/packages/components/src/divider/tests/chromatic/DividerVertical.chroma.jsx new file mode 100644 index 000000000..834d6ffbb --- /dev/null +++ b/packages/components/src/divider/tests/chromatic/DividerVertical.chroma.jsx @@ -0,0 +1,83 @@ +import { Div } from "@components/html"; +import { Divider } from "@components/divider"; +import { Dot } from "@components/dot"; +import { Flex, Inline } from "@components/layout"; +import { Text } from "@components/typography"; +import { TextLink } from "@components/link"; + +export default { + title: "Chromatic/Divider/vertical", + component: Divider +}; + +export const Default = () => +
+ +
; + +export const DividerDot = () => + + Engines ready + + Falcon 9 + ; + +export const MultipleSeparators = () => + + Starlink + + Delivery #9 + + View details + ; + +export const Labelled = () => +
+ Since 1978 +
; + +export const LongLabel = () => +
+ Since 1978 there have been more than 10 space exploration missions. +
; + +export const LabelledSurrounded = () => + + Mission goals + Since 1978 + Mission post mortem + ; + +export const AlignItems = () => + + Mission goals + + Mission post mortem + ; + +export const Zoom = () => + +
+ Since 1978 +
+
+ Since 1978 +
+ ; + +export const Styling = () => + + + + + ; + +Default.storyName = "default"; +DividerDot.storyName = "dot"; +MultipleSeparators.storyName = "multiple separators"; +Labelled.storyName = "labelled"; +LongLabel.storyName = "long label"; +LabelledSurrounded.storyName = "labelled surrounded"; +AlignItems.storyName = "align items"; +Zoom.storyName = "zoom"; +Styling.storyName = "styling"; diff --git a/packages/components/src/field/tests/chromatic/Field.chroma.jsx b/packages/components/src/field/tests/chromatic/Field.chroma.jsx index 14914e9fc..4b01a1dc0 100644 --- a/packages/components/src/field/tests/chromatic/Field.chroma.jsx +++ b/packages/components/src/field/tests/chromatic/Field.chroma.jsx @@ -2,7 +2,6 @@ import { DateInput, DateRangeInput } from "@components/date-input"; import { ErrorMessage, Field, HelpMessage, Label, ValidMessage } from "@components/field"; import { Inline, Stack } from "@components/layout"; import { PasswordInput, TextInput } from "@components/text-input"; -import { paramsBuilder, storiesOfBuilder } from "@stories/utils"; import { Autocomplete } from "@components/autocomplete"; import { Checkbox } from "@components/checkbox"; @@ -15,181 +14,179 @@ import { Switch } from "@components/switch"; import { Text } from "@components/typography"; import { TextArea } from "@components/text-area"; -function stories(segment) { - return storiesOfBuilder(module, "Chromatic/Field") - .segment(segment) - .build(); -} +export default { + title: "Chromatic/Field", + component: Field +}; -stories() - .add("default", () => +export const Default = () => + + + ; + +export const FieldLabel = () => + + + + ; + +export const Message = () => + + Must be a planet in earth solar system. - ) - .add("label", () => - - + + It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. - ) - .add("message", () => - - - - Must be a planet in earth solar system. - - - - It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. - - , - { - ...paramsBuilder() - .a11y({ - config: { - rules: [{ id: "label-title-only", enabled: false }] - } - }) - .build() - } - ) - .add("validation", () => - - - - - Must be a planet in earth solar system. - Thank you! - This is not a valid destination. - - - - - Must be a planet in earth solar system. - Thank you! - This is not a valid destination. - - - - - Must be a planet in earth solar system. - Thank you! - This is not a valid destination. - - - ) - .add("fluid", () => - -
- - - - It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. - -
-
- - - - It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. - -
- - ) - .add("required", () => - + ; + +export const Validation = () => + + Must be a planet in earth solar system. + Thank you! + This is not a valid destination. - ) - .add("states", () => - + Must be a planet in earth solar system. + Thank you! + This is not a valid destination. - ) - .add("text input", () => - + - - Must be a planet in earth solar system. - - ) - .add("password input", () => - - - - Must be a planet in earth solar system. - - ) - .add("number input", () => - - - - How long ago are you born? - - ) - .add("text area", () => - - - +
-
- -
- - - ) - .add("placeholder", () => - - + ; + +export const Placeholder = () => + + +
-
- -
- - - ) - .add("value", () => - +
+ + ; + +export const Value = () => + + +
-
- -
- - - ) - .add("button", () => - - + ; + +export const Button = () => + +
- ; + +); -export const Placeholder = () => +Default.storyName = "default"; + +export const Placeholder = () => (
- ; + +); + +Placeholder.storyName = "placeholder"; -export const Value = () => +export const Value = () => (
- ; + +); -export const Button = () => +Value.storyName = "value"; + +export const Button = () => (