From bd59ed1a6f87190c81123046375e0c1e31dff59c Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Fri, 29 Dec 2023 14:49:41 +0530 Subject: [PATCH 01/18] fix: documentation bugs after storybook upgrade (#1917) --- packages/blade/src/components/SkipNav/SkipNav.stories.tsx | 1 + .../src/components/SpotlightPopoverTour/docs/Tour.stories.mdx | 2 +- packages/blade/src/components/Tooltip/Tooltip.stories.tsx | 1 + .../blade/src/components/Typography/Heading/Heading.stories.tsx | 1 + .../src/components/VisuallyHidden/VisuallyHidden.stories.tsx | 1 + 5 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx index 360f286a0b2..b384ec7b198 100644 --- a/packages/blade/src/components/SkipNav/SkipNav.stories.tsx +++ b/packages/blade/src/components/SkipNav/SkipNav.stories.tsx @@ -60,6 +60,7 @@ const SkipNavStoryMeta: Meta = { title: 'Components/Accessibility/SkipNav', component: SkipNavLink, args: {}, + tags: ['autodocs'], parameters: { docs: { page: () => , diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx index 3a94574f238..5b72f0b2294 100644 --- a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx +++ b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs'; import { TourDocs } from './TourDocs'; - + diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx index ef5e461260d..c5017530c49 100644 --- a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx @@ -56,6 +56,7 @@ const Page = (): React.ReactElement => { export default { title: 'Components/Tooltip', component: TooltipComponent, + tags: ['autodocs'], args: { placement: 'bottom', content: 'Amount reversed to customer bank account', diff --git a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx index d135160ec87..67d54a74df9 100644 --- a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx +++ b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx @@ -63,6 +63,7 @@ const HeadingStoryMeta: Meta contrast: 'low', as: undefined, }, + tags: ['autodocs'], argTypes: getHeadingArgTypes(), parameters: { docs: { diff --git a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx index ce51bf4eb03..48ad12f5eec 100644 --- a/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/packages/blade/src/components/VisuallyHidden/VisuallyHidden.stories.tsx @@ -51,6 +51,7 @@ const Page = (): ReactElement => { const VisuallyHiddenStoryMeta: Meta = { title: 'Components/Accessibility/VisuallyHidden', component: VisuallyHiddenComponent, + tags: ['autodocs'], args: { children: 'Toggle dark mode' }, parameters: { docs: { From 95063de96212ace969b19f1bc4f4af6250175a74 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Tue, 9 Jan 2024 14:38:05 +0530 Subject: [PATCH 02/18] chore: Update CODEOWNERS (#1939) --- CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CODEOWNERS b/CODEOWNERS index 56f1cf2b224..c683b2162b5 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1 @@ -/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani +/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani @anuraghazra @nashcheez @saurabhdaware @snitin315 From 6f89de9fa8a884ba37ea16870005f33d18ae08c0 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Tue, 9 Jan 2024 15:38:38 +0530 Subject: [PATCH 03/18] fix(Table): handle case where currentPage is greater than total pages (#1929) --- .changeset/famous-cats-push.md | 5 +++ .../components/Table/TablePagination.web.tsx | 12 ++++- .../Table/__tests__/Table.web.test.tsx | 44 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 .changeset/famous-cats-push.md diff --git a/.changeset/famous-cats-push.md b/.changeset/famous-cats-push.md new file mode 100644 index 00000000000..4f019d2537e --- /dev/null +++ b/.changeset/famous-cats-push.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix(Table): handle case where currentPage is greater than total pages diff --git a/packages/blade/src/components/Table/TablePagination.web.tsx b/packages/blade/src/components/Table/TablePagination.web.tsx index af3834edd18..7c3d004bf6e 100644 --- a/packages/blade/src/components/Table/TablePagination.web.tsx +++ b/packages/blade/src/components/Table/TablePagination.web.tsx @@ -23,6 +23,7 @@ import { Button } from '~components/Button'; import { makeAccessible } from '~utils/makeAccessible'; import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects'; import { useTheme } from '~components/BladeProvider'; +import { throwBladeError } from '~utils/logger'; const pageSizeOptions: NonNullable[] = [10, 25, 50]; @@ -212,7 +213,16 @@ const _TablePagination = ({ }, [controlledCurrentPage, currentPage, handlePageChange, onPageChange]); if (currentPage > totalPages - 1) { - handlePageChange(totalPages - 1); + if (!isUndefined(controlledCurrentPage)) { + if (__DEV__) { + throwBladeError({ + moduleName: 'TablePagination', + message: `Value of 'currentPage' prop cannot be greater than the total pages`, + }); + } + } else { + handlePageChange(totalPages - 1); + } } const handlePageSizeChange = (pageSize: number): void => { diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index 76db1a18e92..86a78386e3c 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -806,4 +806,48 @@ describe('', () => { fireEvent.click(goBack5PagesButton); expect(onPageChange).toHaveBeenLastCalledWith({ page: 0 }); }, 10000); + + it('should throw error if currentPage is greater than total pages', () => { + const mockConsoleError = jest.spyOn(console, 'error').mockImplementation(); + expect(() => + renderWithTheme( +
} + > + {(tableData) => ( + <> + + + Payment ID + Amount + Status + Type + Method + Name + + + + {tableData.map((tableItem, index) => ( + + {tableItem.paymentId} + {tableItem.amount} + {tableItem.status} + {tableItem.type} + {tableItem.method} + {tableItem.name} + + ))} + + + )} +
, + ), + ).toThrow( + `[Blade: TablePagination]: Value of 'currentPage' prop cannot be greater than the total pages`, + ); + mockConsoleError.mockRestore(); + }); }); From 0a48d185878966a34f4e27ede17ef819bbe0819d Mon Sep 17 00:00:00 2001 From: rzpcibot <64553331+rzpcibot@users.noreply.github.com> Date: Tue, 9 Jan 2024 16:08:35 +0530 Subject: [PATCH 04/18] build(blade): update version (#1941) Co-authored-by: github-actions[bot] --- .changeset/famous-cats-push.md | 5 ----- packages/blade/CHANGELOG.md | 6 ++++++ packages/blade/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/famous-cats-push.md diff --git a/.changeset/famous-cats-push.md b/.changeset/famous-cats-push.md deleted file mode 100644 index 4f019d2537e..00000000000 --- a/.changeset/famous-cats-push.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@razorpay/blade": patch ---- - -fix(Table): handle case where currentPage is greater than total pages diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md index d6692c2af7f..bf5f7aacbb6 100644 --- a/packages/blade/CHANGELOG.md +++ b/packages/blade/CHANGELOG.md @@ -1,5 +1,11 @@ # @razorpay/blade +## 10.23.1 + +### Patch Changes + +- 6f89de9f: fix(Table): handle case where currentPage is greater than total pages + ## 10.23.0 ### Minor Changes diff --git a/packages/blade/package.json b/packages/blade/package.json index 0b7dcf09611..93aad2824e1 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -1,7 +1,7 @@ { "name": "@razorpay/blade", "description": "The Design System that powers Razorpay", - "version": "10.23.0", + "version": "10.23.1", "license": "MIT", "engines": { "node": ">=18.12.1" From 8854ff5a9fa39070a8b65afa13010e1042a7c9a1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:51:52 +0530 Subject: [PATCH 05/18] build(deps): bump follow-redirects (#1945) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .../examples/with-react-hook-form/yarn.lock | 364 +++++++++++++++++- 1 file changed, 356 insertions(+), 8 deletions(-) diff --git a/packages/examples/with-react-hook-form/yarn.lock b/packages/examples/with-react-hook-form/yarn.lock index 397513466e9..7d9f12ddad6 100644 --- a/packages/examples/with-react-hook-form/yarn.lock +++ b/packages/examples/with-react-hook-form/yarn.lock @@ -207,6 +207,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-module-imports@^7.16.7": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" + integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== + dependencies: + "@babel/types" "^7.22.15" + "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.20.2": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712" @@ -1097,6 +1104,20 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.10" +"@babel/runtime@7.20.0": + version "7.20.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a" + integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q== + dependencies: + regenerator-runtime "^0.13.10" + +"@babel/runtime@^7.0.0", "@babel/runtime@^7.18.3": + version "7.23.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650" + integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4": version "7.20.1" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9" @@ -1272,6 +1293,39 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" + +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + "@emotion/is-prop-valid@^1.1.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" @@ -1284,6 +1338,41 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/react@11.11.1": + version "11.11.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" + integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.2": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0" + integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" @@ -1294,6 +1383,26 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== + +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== + "@eslint/eslintrc@^1.3.3": version "1.3.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95" @@ -1309,6 +1418,47 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.5.3": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a" + integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q== + dependencies: + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/dom@^1.5.4": + version "1.5.4" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb" + integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ== + dependencies: + "@floating-ui/core" "^1.5.3" + "@floating-ui/utils" "^0.2.0" + +"@floating-ui/react-dom@^2.0.2": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.5.tgz#851522899c34e3e2be1e29f3294f150834936e28" + integrity sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q== + dependencies: + "@floating-ui/dom" "^1.5.4" + +"@floating-ui/react@0.25.4": + version "0.25.4" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.4.tgz#82507e14460aee70f435ad2fd717ea182b6d5c61" + integrity sha512-lWRQ/UiTvSIBxohn0/2HFHEmnmOVRjl7j6XcRJuLH0ls6f/9AyHMWVzkAJFuwx0n9gaEeCmg9VccCSCJzbEJig== + dependencies: + "@floating-ui/react-dom" "^2.0.2" + "@floating-ui/utils" "^0.1.1" + tabbable "^6.0.1" + +"@floating-ui/utils@^0.1.1": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + +"@floating-ui/utils@^0.2.0": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== + "@fontsource/lato@^4.5.10": version "4.5.10" resolved "https://registry.yarnpkg.com/@fontsource/lato/-/lato-4.5.10.tgz#1ab3d33282e605886e4a8b4c32b1f230a4cb5ea6" @@ -1673,8 +1823,19 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@razorpay/blade@../../packages/blade/build/": - version "0.0.0" +"@razorpay/blade@file:../../blade": + version "10.23.1" + dependencies: + "@babel/runtime" "7.20.0" + "@emotion/react" "11.11.1" + "@floating-ui/react" "0.25.4" + "@table-library/react-table-library" "4.1.7" + "@use-gesture/react" "10.2.24" + body-scroll-lock-upgrade "1.1.0" + patch-package "7.0.0" + tinycolor2 "1.6.0" + ts-deepmerge "6.2.0" + use-presence "1.1.0" "@rollup/plugin-babel@^5.2.0": version "5.3.1" @@ -1850,6 +2011,15 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@table-library/react-table-library@4.1.7": + version "4.1.7" + resolved "https://registry.yarnpkg.com/@table-library/react-table-library/-/react-table-library-4.1.7.tgz#90b71f959228f420d2deffeecc9eace879cb4c2e" + integrity sha512-KKFjdACvEUeD9yhgXBjZUJSdE9pxUbJdou4Pp71FW8dxQWc7LcMcSxpveSfGXw8KlcWY0hThJOwyjQb+UKOmnw== + dependencies: + clsx "1.1.1" + react-virtualized-auto-sizer "1.0.7" + react-window "1.8.7" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -2295,6 +2465,18 @@ "@typescript-eslint/types" "5.44.0" eslint-visitor-keys "^3.3.0" +"@use-gesture/core@10.2.24": + version "10.2.24" + resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.24.tgz#88d13a60954ba62463c774acb92d12bf7b3d810c" + integrity sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q== + +"@use-gesture/react@10.2.24": + version "10.2.24" + resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.24.tgz#bc13780381e786b286f099f69ea3801bb9ed27a5" + integrity sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg== + dependencies: + "@use-gesture/core" "10.2.24" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -2426,6 +2608,11 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== +"@yarnpkg/lockfile@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31" + integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ== + abab@^2.0.3, abab@^2.0.5: version "2.0.6" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" @@ -2923,6 +3110,11 @@ body-parser@1.20.1: type-is "~1.6.18" unpipe "1.0.0" +body-scroll-lock-upgrade@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/body-scroll-lock-upgrade/-/body-scroll-lock-upgrade-1.1.0.tgz#3df63fca3d1db2f896bd9a050bd14c33cd0085d2" + integrity sha512-nnfVAS+tB7CS9RaksuHVTpgHWHF7fE/ptIBJnwZrMqImIvWJF1OGcLnMpBhC6qhkx9oelvyxmWXwmIJXCV98Sw== + bonjour-service@^1.0.11: version "1.0.14" resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.14.tgz#c346f5bc84e87802d08f8d5a60b93f758e514ee7" @@ -3120,6 +3312,11 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.6.1.tgz#7594f1c95cb7fdfddee7af95a13af7dbc67afdcf" integrity sha512-up5ggbaDqOqJ4UqLKZ2naVkyqSJQgJi5lwD6b6mM748ysrghDBX0bx/qJTUHzw7zu6Mq4gycviSF5hJnwceD8w== +ci-info@^3.7.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4" + integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ== + cjs-module-lexer@^1.0.0: version "1.2.2" resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" @@ -3141,6 +3338,11 @@ cliui@^7.0.2: strip-ansi "^6.0.0" wrap-ansi "^7.0.0" +clsx@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -3278,7 +3480,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.9.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -4427,6 +4629,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -4450,6 +4657,13 @@ find-up@^5.0.0: locate-path "^6.0.0" path-exists "^4.0.0" +find-yarn-workspace-root@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd" + integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ== + dependencies: + micromatch "^4.0.2" + flat-cache@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11" @@ -4464,9 +4678,9 @@ flatted@^3.1.0: integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== follow-redirects@^1.0.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== fork-ts-checker-webpack-plugin@^6.5.0: version "6.5.2" @@ -4678,6 +4892,11 @@ globby@^11.0.4, globby@^11.1.0: merge2 "^1.4.1" slash "^3.0.0" +graceful-fs@^4.1.11: + version "4.2.11" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" + integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== + graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: version "4.2.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" @@ -4751,7 +4970,7 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -5172,7 +5391,7 @@ is-weakref@^1.0.2: dependencies: call-bind "^1.0.2" -is-wsl@^2.2.0: +is-wsl@^2.1.1, is-wsl@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271" integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww== @@ -5855,6 +6074,13 @@ kind-of@^6.0.2: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +klaw-sync@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c" + integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ== + dependencies: + graceful-fs "^4.1.11" + kleur@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e" @@ -6043,6 +6269,11 @@ memfs@^3.1.2, memfs@^3.4.3: dependencies: fs-monkey "^1.0.3" +"memoize-one@>=3.1.1 <6": + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -6349,6 +6580,14 @@ onetime@^5.1.2: dependencies: mimic-fn "^2.1.0" +open@^7.4.2: + version "7.4.2" + resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321" + integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q== + dependencies: + is-docker "^2.0.0" + is-wsl "^2.1.1" + open@^8.0.9, open@^8.4.0: version "8.4.0" resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8" @@ -6382,6 +6621,11 @@ optionator@^0.9.1: type-check "^0.4.0" word-wrap "^1.2.3" +os-tmpdir@~1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" + integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g== + p-limit@^2.0.0, p-limit@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" @@ -6473,6 +6717,26 @@ pascal-case@^3.1.2: no-case "^3.0.4" tslib "^2.0.3" +patch-package@7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-7.0.0.tgz#5c646b6b4b4bf37e5184a6950777b21dea6bb66e" + integrity sha512-eYunHbnnB2ghjTNc5iL1Uo7TsGMuXk0vibX3RFcE/CdVdXzmdbMsG/4K4IgoSuIkLTI5oHrMQk4+NkFqSed0BQ== + dependencies: + "@yarnpkg/lockfile" "^1.1.0" + chalk "^4.1.2" + ci-info "^3.7.0" + cross-spawn "^7.0.3" + find-yarn-workspace-root "^2.0.0" + fs-extra "^9.0.0" + klaw-sync "^6.0.0" + minimist "^1.2.6" + open "^7.4.2" + rimraf "^2.6.3" + semver "^5.6.0" + slash "^2.0.0" + tmp "^0.0.33" + yaml "^2.2.2" + path-exists@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515" @@ -7384,6 +7648,19 @@ react-scripts@^5.0.1: optionalDependencies: fsevents "^2.3.2" +react-virtualized-auto-sizer@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195" + integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA== + +react-window@1.8.7: + version "1.8.7" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4" + integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -7451,6 +7728,11 @@ regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.9: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== +regenerator-runtime@^0.14.0: + version "0.14.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" + integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== + regenerator-transform@^0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537" @@ -7593,6 +7875,13 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== +rimraf@^2.6.3: + version "2.7.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" + integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== + dependencies: + glob "^7.1.3" + rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" @@ -7729,6 +8018,11 @@ selfsigned@^2.1.1: dependencies: node-forge "^1" +semver@^5.6.0: + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== + semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" @@ -7848,6 +8142,11 @@ sisteransi@^1.0.5: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== +slash@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" + integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" @@ -7899,6 +8198,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +source-map@^0.5.7: + version "0.5.7" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" + integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ== + source-map@^0.7.3: version "0.7.4" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" @@ -8124,6 +8428,11 @@ stylehacks@^5.1.1: browserslist "^4.21.4" postcss-selector-parser "^6.0.4" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -8200,6 +8509,11 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== +tabbable@^6.0.1: + version "6.2.0" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" + integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== + tailwindcss@^3.0.2: version "3.2.4" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250" @@ -8307,6 +8621,18 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tinycolor2@1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e" + integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw== + +tmp@^0.0.33: + version "0.0.33" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" + integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw== + dependencies: + os-tmpdir "~1.0.2" + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -8358,6 +8684,11 @@ tryer@^1.0.1: resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== +ts-deepmerge@6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/ts-deepmerge/-/ts-deepmerge-6.2.0.tgz#77554381a4884d66cab799470bc2620a1c9d84e8" + integrity sha512-2qxI/FZVDPbzh63GwWIZYE7daWKtwXZYuyc8YNq0iTmMUwn4mL0jRLsp6hfFlgbdRSR4x2ppe+E86FnvEpN7Nw== + tsconfig-paths@^3.14.1: version "3.14.1" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a" @@ -8373,6 +8704,11 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tslib@^2.0.3: version "2.4.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" @@ -8522,6 +8858,13 @@ url-parse@^1.5.3: querystringify "^2.1.1" requires-port "^1.0.0" +use-presence@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/use-presence/-/use-presence-1.1.0.tgz#890b82e656f3a72fc15ee61be521ae1062afcedc" + integrity sha512-Tol+g7q81LLjhFMvrzhKXa4CCyZ0Tg4MRcPC2eSqdDLGQEA1MnjNc/jMFDKSB8CZDFchd7FOsq33glZyFX3zuw== + dependencies: + tslib "^2.0.0" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -9034,6 +9377,11 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== +yaml@^2.2.2: + version "2.3.4" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.4.tgz#53fc1d514be80aabf386dc6001eb29bf3b7523b2" + integrity sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA== + yargs-parser@^20.2.2: version "20.2.9" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" From 1ebb1790ec05ce28c90023109e463fb27b2f3da7 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:03 +0530 Subject: [PATCH 06/18] build(deps): bump follow-redirects in /packages/examples/basic (#1944) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/examples/basic/yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/examples/basic/yarn.lock b/packages/examples/basic/yarn.lock index b30d7853397..ea3a13d7b0f 100644 --- a/packages/examples/basic/yarn.lock +++ b/packages/examples/basic/yarn.lock @@ -1785,7 +1785,7 @@ source-map "^0.7.3" "@razorpay/blade@file:../../blade": - version "10.20.1" + version "10.23.1" dependencies: "@babel/runtime" "7.20.0" "@emotion/react" "11.11.1" @@ -4744,9 +4744,9 @@ flatted@^3.2.9: integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ== follow-redirects@^1.0.0: - version "1.15.3" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a" - integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" From 56dec96a1803dc7013eb71067a9f6762e5151562 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:18 +0530 Subject: [PATCH 07/18] build(deps): bump follow-redirects in /packages/blade-coverage-extension (#1943) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/blade-coverage-extension/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blade-coverage-extension/yarn.lock b/packages/blade-coverage-extension/yarn.lock index f6a5404967d..d0cecef9a3a 100644 --- a/packages/blade-coverage-extension/yarn.lock +++ b/packages/blade-coverage-extension/yarn.lock @@ -4589,9 +4589,9 @@ flatted@^3.1.0: integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== follow-redirects@^1.0.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" From 468fd1cfe6418ad4060bfb44200f66aa2410bc23 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 9 Jan 2024 17:52:35 +0530 Subject: [PATCH 08/18] build(deps): bump follow-redirects (#1942) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/examples/with-multiple-theme-providers/yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/examples/with-multiple-theme-providers/yarn.lock b/packages/examples/with-multiple-theme-providers/yarn.lock index f4b0367c9f7..75fc189368a 100644 --- a/packages/examples/with-multiple-theme-providers/yarn.lock +++ b/packages/examples/with-multiple-theme-providers/yarn.lock @@ -1850,7 +1850,7 @@ source-map "^0.7.3" "@razorpay/blade@file:../../blade": - version "10.20.1" + version "10.23.1" dependencies: "@babel/runtime" "7.20.0" "@emotion/react" "11.11.1" @@ -4844,9 +4844,9 @@ flatted@^3.1.0: integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== follow-redirects@^1.0.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" From d5f290bd154b2365d8e925782251bc3a43d3ee6e Mon Sep 17 00:00:00 2001 From: Kamlesh Chandnani Date: Wed, 10 Jan 2024 11:46:19 +0530 Subject: [PATCH 09/18] feat: setup interaction testing (#1895) Co-authored-by: Chaitanya Deorukhkar Co-authored-by: Nitin Kumar Co-authored-by: Nitin Kumar Co-authored-by: anuraghazra --- .github/workflows/blade-interaction-tests.yml | 37 + .github/workflows/blade-validate.yml | 2 +- .../react-native/storybook.requires.js | 189 ++- packages/blade/.storybook/react/main.ts | 1 + packages/blade/.storybook/react/preview.tsx | 16 +- packages/blade/package.json | 15 +- .../components/Carousel/Carousel.stories.tsx | 2 +- .../src/components/Carousel/Carousel.web.tsx | 41 +- .../__tests__/Carousel.test.stories.tsx | 205 +++ .../Carousel/__tests__/Carousel.web.test.tsx | 279 +--- .../__snapshots__/Carousel.web.test.tsx.snap | 58 +- .../AccessibilityInteropDemo.stories.tsx | 6 +- packages/blade/test-runner-jest.config.js | 31 + yarn.lock | 1474 ++++++++++++++++- 14 files changed, 1906 insertions(+), 450 deletions(-) create mode 100644 .github/workflows/blade-interaction-tests.yml create mode 100644 packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx create mode 100644 packages/blade/test-runner-jest.config.js diff --git a/.github/workflows/blade-interaction-tests.yml b/.github/workflows/blade-interaction-tests.yml new file mode 100644 index 00000000000..e1553cca858 --- /dev/null +++ b/.github/workflows/blade-interaction-tests.yml @@ -0,0 +1,37 @@ +name: Blade Interaction Tests + +# Runs the action when +# 1. 'Run Interaction Tests' label is added to PR +# 2. Workflow is trigerred manually +# 3. PR is merged to master + +on: + workflow_dispatch: + pull_request: + types: [labeled] + push: + branches: + - 'master' + +env: + GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }} + +jobs: + interaction-tests: + name: Run Interaction Tests + runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner + if: ${{ github.event_name == 'workflow_dispatch' || github.event.label.name == 'Run Interaction Tests' || github.event_name == 'push' }} + steps: + - name: Checkout Codebase + uses: actions/checkout@v3 + - name: Use Node v18 + uses: actions/setup-node@v3 + with: + node-version: 18.12.1 + - name: Setup Cache & Install Dependencies + uses: ./.github/actions/install-dependencies + - name: Run Interaction Tests + run: | + npx playwright install chromium firefox webkit --with-deps + yarn test:react:interaction:ci + working-directory: packages/blade diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml index a87d2048a53..35d1c959482 100644 --- a/.github/workflows/blade-validate.yml +++ b/.github/workflows/blade-validate.yml @@ -46,7 +46,7 @@ jobs: node-version: 18.12.1 - name: Setup Cache & Install Dependencies uses: ./.github/actions/install-dependencies - - name: Run React & React Native Tests + - name: Run Unit Tests run: yarn test working-directory: packages/blade env: diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js index b10be8d2338..343e22a6532 100644 --- a/packages/blade/.storybook/react-native/storybook.requires.js +++ b/packages/blade/.storybook/react-native/storybook.requires.js @@ -1,32 +1,37 @@ /* do not change this file, it is auto generated by storybook. */ -import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native'; +import { + configure, + addDecorator, + addParameters, + addArgsEnhancer, +} from "@storybook/react-native"; global.STORIES = [ { - titlePrefix: '', - directory: './src', - files: '**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)', + titlePrefix: "", + directory: "./src", + files: "**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)", importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', + "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?:(?!(?:_KitchenSink))[^/]*?)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$", }, { - titlePrefix: '', - directory: './src', - files: '**/*.stories.internal.?(ts|tsx|js|jsx)', + titlePrefix: "", + directory: "./src", + files: "**/*.stories.internal.?(ts|tsx|js|jsx)", importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$', + "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.internal\\.(?:ts|tsx|js|jsx)?)$", }, ]; -import '@storybook/addon-ondevice-notes/register'; -import '@storybook/addon-ondevice-controls/register'; -import '@storybook/addon-ondevice-backgrounds/register'; -import '@storybook/addon-ondevice-actions/register'; +import "@storybook/addon-ondevice-notes/register"; +import "@storybook/addon-ondevice-controls/register"; +import "@storybook/addon-ondevice-backgrounds/register"; +import "@storybook/addon-ondevice-actions/register"; -import { argsEnhancers } from '@storybook/addon-actions/dist/preview'; +import { argsEnhancers } from "@storybook/addon-actions/dist/preview"; -import { decorators, parameters } from './preview'; +import { decorators, parameters } from "./preview"; if (decorators) { decorators.forEach((decorator) => addDecorator(decorator)); @@ -42,83 +47,83 @@ try { const getStories = () => { return { - './src/components/Accordion/Accordion.stories.tsx': require('../../src/components/Accordion/Accordion.stories.tsx'), - './src/components/ActionList/ActionList.stories.tsx': require('../../src/components/ActionList/ActionList.stories.tsx'), - './src/components/Alert/Alert.stories.tsx': require('../../src/components/Alert/Alert.stories.tsx'), - './src/components/Amount/Amount.stories.tsx': require('../../src/components/Amount/Amount.stories.tsx'), - './src/components/Badge/Badge.stories.tsx': require('../../src/components/Badge/Badge.stories.tsx'), - './src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx': require('../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx'), - './src/components/BottomSheet/BottomSheet.stories.tsx': require('../../src/components/BottomSheet/BottomSheet.stories.tsx'), - './src/components/Box/BaseBox/BaseBox.internal.stories.tsx': require('../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx'), - './src/components/Box/Box.stories.tsx': require('../../src/components/Box/Box.stories.tsx'), - './src/components/Box/styledProps/StyledProps.stories.tsx': require('../../src/components/Box/styledProps/StyledProps.stories.tsx'), - './src/components/Button/BaseButton/BaseButton.internal.stories.tsx': require('../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx'), - './src/components/Button/Button/Button.stories.tsx': require('../../src/components/Button/Button/Button.stories.tsx'), - './src/components/Button/IconButton/IconButton.stories.tsx': require('../../src/components/Button/IconButton/IconButton.stories.tsx'), - './src/components/Card/Card.stories.tsx': require('../../src/components/Card/Card.stories.tsx'), - './src/components/Card/CardInteractive.stories.tsx': require('../../src/components/Card/CardInteractive.stories.tsx'), - './src/components/Carousel/Carousel.stories.tsx': require('../../src/components/Carousel/Carousel.stories.tsx'), - './src/components/Checkbox/Checkbox.stories.tsx': require('../../src/components/Checkbox/Checkbox.stories.tsx'), - './src/components/Checkbox/CheckboxGroup.stories.tsx': require('../../src/components/Checkbox/CheckboxGroup.stories.tsx'), - './src/components/Chip/Chip.stories.tsx': require('../../src/components/Chip/Chip.stories.tsx'), - './src/components/Chip/ChipGroup.stories.tsx': require('../../src/components/Chip/ChipGroup.stories.tsx'), - './src/components/Collapsible/Collapsible.stories.tsx': require('../../src/components/Collapsible/Collapsible.stories.tsx'), - './src/components/Counter/Counter.stories.tsx': require('../../src/components/Counter/Counter.stories.tsx'), - './src/components/Divider/Divider.stories.tsx': require('../../src/components/Divider/Divider.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithButton.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx'), - './src/components/Dropdown/docs/DropdownWithSelect.stories.tsx': require('../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx'), - './src/components/Icons/Icons.stories.tsx': require('../../src/components/Icons/Icons.stories.tsx'), - './src/components/Indicator/Indicator.stories.tsx': require('../../src/components/Indicator/Indicator.stories.tsx'), - './src/components/Input/BaseInput/BaseInput.stories.tsx': require('../../src/components/Input/BaseInput/BaseInput.stories.tsx'), - './src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx'), - './src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx': require('../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx'), - './src/components/Input/OTPInput/OTPInput.stories.tsx': require('../../src/components/Input/OTPInput/OTPInput.stories.tsx'), - './src/components/Input/PasswordInput/PasswordInput.stories.tsx': require('../../src/components/Input/PasswordInput/PasswordInput.stories.tsx'), - './src/components/Input/TextArea/TextArea.stories.tsx': require('../../src/components/Input/TextArea/TextArea.stories.tsx'), - './src/components/Input/TextInput/TextInput.stories.tsx': require('../../src/components/Input/TextInput/TextInput.stories.tsx'), - './src/components/Link/BaseLink/BaseLink.stories.tsx': require('../../src/components/Link/BaseLink/BaseLink.stories.tsx'), - './src/components/Link/Link/Link.stories.tsx': require('../../src/components/Link/Link/Link.stories.tsx'), - './src/components/List/List.stories.tsx': require('../../src/components/List/List.stories.tsx'), - './src/components/Modal/docs/ModalExamples.stories.tsx': require('../../src/components/Modal/docs/ModalExamples.stories.tsx'), - './src/components/Modal/docs/SimpleModal.stories.tsx': require('../../src/components/Modal/docs/SimpleModal.stories.tsx'), - './src/components/Popover/Popover.stories.tsx': require('../../src/components/Popover/Popover.stories.tsx'), - './src/components/ProgressBar/ProgressBar.stories.tsx': require('../../src/components/ProgressBar/ProgressBar.stories.tsx'), - './src/components/Radio/Radio.stories.tsx': require('../../src/components/Radio/Radio.stories.tsx'), - './src/components/Skeleton/Skeleton.stories.tsx': require('../../src/components/Skeleton/Skeleton.stories.tsx'), - './src/components/SkipNav/SkipNav.stories.tsx': require('../../src/components/SkipNav/SkipNav.stories.tsx'), - './src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx': require('../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx'), - './src/components/Spinner/Spinner/Spinner.stories.tsx': require('../../src/components/Spinner/Spinner/Spinner.stories.tsx'), - './src/components/SpotlightPopoverTour/docs/Tour.stories.tsx': require('../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx'), - './src/components/Switch/Switch.stories.tsx': require('../../src/components/Switch/Switch.stories.tsx'), - './src/components/Table/docs/APIStories/TableAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableRowAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx'), - './src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx': require('../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx'), - './src/components/Table/docs/BasicTable.stories.tsx': require('../../src/components/Table/docs/BasicTable.stories.tsx'), - './src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'), - './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'), - './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'), - './src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'), - './src/components/Typography/BaseText/BaseText.stories.tsx': require('../../src/components/Typography/BaseText/BaseText.stories.tsx'), - './src/components/Typography/Code/Code.stories.tsx': require('../../src/components/Typography/Code/Code.stories.tsx'), - './src/components/Typography/Display/Display.stories.tsx': require('../../src/components/Typography/Display/Display.stories.tsx'), - './src/components/Typography/Heading/Heading.stories.tsx': require('../../src/components/Typography/Heading/Heading.stories.tsx'), - './src/components/Typography/Text/Text.stories.tsx': require('../../src/components/Typography/Text/Text.stories.tsx'), - './src/components/Typography/Title/Title.stories.tsx': require('../../src/components/Typography/Title/Title.stories.tsx'), - './src/components/VisuallyHidden/VisuallyHidden.stories.tsx': require('../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx'), - './src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx': require('../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx'), - './src/storybook-recipes/SimpleDashboard.stories.tsx': require('../../src/storybook-recipes/SimpleDashboard.stories.tsx'), - './src/storybook-recipes/SimpleForm.stories.tsx': require('../../src/storybook-recipes/SimpleForm.stories.tsx'), + "./src/components/Accordion/Accordion.stories.tsx": require("../../src/components/Accordion/Accordion.stories.tsx"), + "./src/components/ActionList/ActionList.stories.tsx": require("../../src/components/ActionList/ActionList.stories.tsx"), + "./src/components/Alert/Alert.stories.tsx": require("../../src/components/Alert/Alert.stories.tsx"), + "./src/components/Amount/Amount.stories.tsx": require("../../src/components/Amount/Amount.stories.tsx"), + "./src/components/Badge/Badge.stories.tsx": require("../../src/components/Badge/Badge.stories.tsx"), + "./src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx": require("../../src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx"), + "./src/components/BottomSheet/BottomSheet.stories.tsx": require("../../src/components/BottomSheet/BottomSheet.stories.tsx"), + "./src/components/Box/BaseBox/BaseBox.internal.stories.tsx": require("../../src/components/Box/BaseBox/BaseBox.internal.stories.tsx"), + "./src/components/Box/Box.stories.tsx": require("../../src/components/Box/Box.stories.tsx"), + "./src/components/Box/styledProps/StyledProps.stories.tsx": require("../../src/components/Box/styledProps/StyledProps.stories.tsx"), + "./src/components/Button/BaseButton/BaseButton.internal.stories.tsx": require("../../src/components/Button/BaseButton/BaseButton.internal.stories.tsx"), + "./src/components/Button/Button/Button.stories.tsx": require("../../src/components/Button/Button/Button.stories.tsx"), + "./src/components/Button/IconButton/IconButton.stories.tsx": require("../../src/components/Button/IconButton/IconButton.stories.tsx"), + "./src/components/Card/Card.stories.tsx": require("../../src/components/Card/Card.stories.tsx"), + "./src/components/Card/CardInteractive.stories.tsx": require("../../src/components/Card/CardInteractive.stories.tsx"), + "./src/components/Carousel/Carousel.stories.tsx": require("../../src/components/Carousel/Carousel.stories.tsx"), + "./src/components/Checkbox/Checkbox.stories.tsx": require("../../src/components/Checkbox/Checkbox.stories.tsx"), + "./src/components/Checkbox/CheckboxGroup.stories.tsx": require("../../src/components/Checkbox/CheckboxGroup.stories.tsx"), + "./src/components/Chip/Chip.stories.tsx": require("../../src/components/Chip/Chip.stories.tsx"), + "./src/components/Chip/ChipGroup.stories.tsx": require("../../src/components/Chip/ChipGroup.stories.tsx"), + "./src/components/Collapsible/Collapsible.stories.tsx": require("../../src/components/Collapsible/Collapsible.stories.tsx"), + "./src/components/Counter/Counter.stories.tsx": require("../../src/components/Counter/Counter.stories.tsx"), + "./src/components/Divider/Divider.stories.tsx": require("../../src/components/Divider/Divider.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithAutoComplete.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithButton.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithButton.stories.tsx"), + "./src/components/Dropdown/docs/DropdownWithSelect.stories.tsx": require("../../src/components/Dropdown/docs/DropdownWithSelect.stories.tsx"), + "./src/components/Icons/Icons.stories.tsx": require("../../src/components/Icons/Icons.stories.tsx"), + "./src/components/Indicator/Indicator.stories.tsx": require("../../src/components/Indicator/Indicator.stories.tsx"), + "./src/components/Input/BaseInput/BaseInput.stories.tsx": require("../../src/components/Input/BaseInput/BaseInput.stories.tsx"), + "./src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx"), + "./src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx": require("../../src/components/Input/DropdownInputTriggers/SelectInput.stories.tsx"), + "./src/components/Input/OTPInput/OTPInput.stories.tsx": require("../../src/components/Input/OTPInput/OTPInput.stories.tsx"), + "./src/components/Input/PasswordInput/PasswordInput.stories.tsx": require("../../src/components/Input/PasswordInput/PasswordInput.stories.tsx"), + "./src/components/Input/TextArea/TextArea.stories.tsx": require("../../src/components/Input/TextArea/TextArea.stories.tsx"), + "./src/components/Input/TextInput/TextInput.stories.tsx": require("../../src/components/Input/TextInput/TextInput.stories.tsx"), + "./src/components/Link/BaseLink/BaseLink.stories.tsx": require("../../src/components/Link/BaseLink/BaseLink.stories.tsx"), + "./src/components/Link/Link/Link.stories.tsx": require("../../src/components/Link/Link/Link.stories.tsx"), + "./src/components/List/List.stories.tsx": require("../../src/components/List/List.stories.tsx"), + "./src/components/Modal/docs/ModalExamples.stories.tsx": require("../../src/components/Modal/docs/ModalExamples.stories.tsx"), + "./src/components/Modal/docs/SimpleModal.stories.tsx": require("../../src/components/Modal/docs/SimpleModal.stories.tsx"), + "./src/components/Popover/Popover.stories.tsx": require("../../src/components/Popover/Popover.stories.tsx"), + "./src/components/ProgressBar/ProgressBar.stories.tsx": require("../../src/components/ProgressBar/ProgressBar.stories.tsx"), + "./src/components/Radio/Radio.stories.tsx": require("../../src/components/Radio/Radio.stories.tsx"), + "./src/components/Skeleton/Skeleton.stories.tsx": require("../../src/components/Skeleton/Skeleton.stories.tsx"), + "./src/components/SkipNav/SkipNav.stories.tsx": require("../../src/components/SkipNav/SkipNav.stories.tsx"), + "./src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx": require("../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx"), + "./src/components/Spinner/Spinner/Spinner.stories.tsx": require("../../src/components/Spinner/Spinner/Spinner.stories.tsx"), + "./src/components/SpotlightPopoverTour/docs/Tour.stories.tsx": require("../../src/components/SpotlightPopoverTour/docs/Tour.stories.tsx"), + "./src/components/Switch/Switch.stories.tsx": require("../../src/components/Switch/Switch.stories.tsx"), + "./src/components/Table/docs/APIStories/TableAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableRowAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableRowAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarActionsAPI.stories.tsx"), + "./src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx": require("../../src/components/Table/docs/APIStories/TableToolbarAPI.stories.tsx"), + "./src/components/Table/docs/BasicTable.stories.tsx": require("../../src/components/Table/docs/BasicTable.stories.tsx"), + "./src/components/Table/docs/TableExamples.stories.tsx": require("../../src/components/Table/docs/TableExamples.stories.tsx"), + "./src/components/Tabs/Tabs.stories.tsx": require("../../src/components/Tabs/Tabs.stories.tsx"), + "./src/components/Tag/Tag.stories.tsx": require("../../src/components/Tag/Tag.stories.tsx"), + "./src/components/Tooltip/Tooltip.stories.tsx": require("../../src/components/Tooltip/Tooltip.stories.tsx"), + "./src/components/Typography/BaseText/BaseText.stories.tsx": require("../../src/components/Typography/BaseText/BaseText.stories.tsx"), + "./src/components/Typography/Code/Code.stories.tsx": require("../../src/components/Typography/Code/Code.stories.tsx"), + "./src/components/Typography/Display/Display.stories.tsx": require("../../src/components/Typography/Display/Display.stories.tsx"), + "./src/components/Typography/Heading/Heading.stories.tsx": require("../../src/components/Typography/Heading/Heading.stories.tsx"), + "./src/components/Typography/Text/Text.stories.tsx": require("../../src/components/Typography/Text/Text.stories.tsx"), + "./src/components/Typography/Title/Title.stories.tsx": require("../../src/components/Typography/Title/Title.stories.tsx"), + "./src/components/VisuallyHidden/VisuallyHidden.stories.tsx": require("../../src/components/VisuallyHidden/VisuallyHidden.stories.tsx"), + "./src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx": require("../../src/storybook-recipes/AccessibilityInterop/AccessibilityInteropDemo.stories.tsx"), + "./src/storybook-recipes/SimpleDashboard.stories.tsx": require("../../src/storybook-recipes/SimpleDashboard.stories.tsx"), + "./src/storybook-recipes/SimpleForm.stories.tsx": require("../../src/storybook-recipes/SimpleForm.stories.tsx"), }; }; diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 7460200550f..f108ec91156 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -29,6 +29,7 @@ const config: StorybookConfig = { '@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/preset-create-react-app', + '@storybook/addon-interactions' ], framework: { name: '@storybook/react-webpack5', diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index 7087b0a4e64..4072bac8c8d 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/packages/blade/.storybook/react/preview.tsx @@ -9,6 +9,7 @@ import { INTERNAL_STORY_ADDON_PARAM } from './constants'; const { GlobalStyle } = global; import { DocsContainer } from '@storybook/addon-docs'; import React from 'react'; +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; import './global.css'; export const parameters = { @@ -27,6 +28,19 @@ export const parameters = { disable: true, }, }, + viewport: { + viewports: { + ...MINIMAL_VIEWPORTS, + iPhone6: { + name: 'iPhone 6', + styles: { + height: '667px', + width: '375px', + }, + type: 'mobile', + }, + }, + }, // on development setting it to undefined so that on 'live reload' it won't switch // to docs panel while developing the component viewMode: process.env.NODE_ENV === 'development' ? undefined : 'docs', @@ -58,7 +72,7 @@ export const parameters = { 'useTheme', ], 'Components', - ['*', 'KitchenSink'], + ['*', 'Interaction Tests', 'KitchenSink'], 'Recipes', ], }, diff --git a/packages/blade/package.json b/packages/blade/package.json index 93aad2824e1..82770302dfe 100644 --- a/packages/blade/package.json +++ b/packages/blade/package.json @@ -105,8 +105,12 @@ "react-native:storybook:ios": "yarn react-native:get-stories && cross-env FRAMEWORK=REACT_NATIVE react-native run-ios", "react-native:storybook:start": "yarn react-native:get-stories && cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT_NATIVE react-native start --reset-cache", "react": "yarn run react:storybook", - "react:storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009", - "react:storybook:build": "cross-env NODE_OPTIONS=--openssl-legacy-provider FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site", + "react:storybook": "cross-env FRAMEWORK=REACT storybook dev -c ./.storybook/react -p 9009", + "react:storybook:build": "cross-env FRAMEWORK=REACT storybook build -c ./.storybook/react -o storybook-site --quiet", + "react:storybook:serve": "http-server storybook-site --port 9009 --silent", + "react:storybook:serve:test": "wait-on http://127.0.0.1:9009/ && yarn test:react:interaction", + "test:react:interaction": "cross-env FRAMEWORK=REACT test-storybook -c ./.storybook/react --url http://127.0.0.1:9009/", + "test:react:interaction:ci": "yarn react:storybook:build && run-p react:storybook:serve react:storybook:serve:test --race", "test:react": "cross-env FRAMEWORK=REACT jest -c ./jest.web.config.js --shard=$SHARD --forceExit", "test:react-native": "cross-env FRAMEWORK=REACT_NATIVE jest -c ./jest.native.config.js --shard=$SHARD --forceExit", "start:ios": "cross-env NODE_OPTIONS=--openssl-legacy-provider run-p react-native:storybook:start react-native:storybook:ios", @@ -135,6 +139,13 @@ "tinycolor2": "1.6.0" }, "devDependencies": { + "http-server": "14.1.1", + "wait-on": "7.2.0", + "@storybook/addon-interactions": "7.6.6", + "@storybook/testing-library": "0.2.2", + "@storybook/test-runner": "0.16.0", + "@storybook/jest": "0.2.3", + "playwright": "1.40.1", "chromatic": "6.22.0", "@babel/cli": "7.23.0", "@babel/core": "7.20.2", diff --git a/packages/blade/src/components/Carousel/Carousel.stories.tsx b/packages/blade/src/components/Carousel/Carousel.stories.tsx index c388c02f325..a1fd743830e 100644 --- a/packages/blade/src/components/Carousel/Carousel.stories.tsx +++ b/packages/blade/src/components/Carousel/Carousel.stories.tsx @@ -255,7 +255,7 @@ const TestimonialCard = ({ ); }; -const CarouselExample = (props: Omit): React.ReactElement => { +export const CarouselExample = (props: Omit): React.ReactElement => { const key = `${props.visibleItems}-${props.shouldAddStartEndSpacing}`; return ( diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx index 20e5af048b4..2384872bad4 100644 --- a/packages/blade/src/components/Carousel/Carousel.web.tsx +++ b/packages/blade/src/components/Carousel/Carousel.web.tsx @@ -13,18 +13,18 @@ import type { CarouselContextProps } from './CarouselContext'; import { CarouselContext } from './CarouselContext'; import { getCarouselItemId } from './utils'; import { CAROUSEL_AUTOPLAY_INTERVAL, componentIds } from './constants'; -import debounce from '~utils/lodashButBetter/debounce'; -import throttle from '~utils/lodashButBetter/throttle'; import getIn from '~utils/lodashButBetter/get'; +import throttle from '~utils/lodashButBetter/throttle'; +import debounce from '~utils/lodashButBetter/debounce'; import { Box } from '~components/Box'; import BaseBox from '~components/Box/BaseBox'; -import { castWebType, makeMotionTime, useInterval } from '~utils'; +import { castWebType, makeMotionTime, useInterval, usePrevious } from '~utils'; import { useId } from '~utils/useId'; import { makeAccessible } from '~utils/makeAccessible'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; -import { useDidUpdate } from '~utils/useDidUpdate'; import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren'; import { useTheme } from '~components/BladeProvider'; +import { useFirstRender } from '~utils/useFirstRender'; type ControlsProp = Required< Pick< @@ -223,6 +223,29 @@ const CarouselBody = React.forwardRef( }, ); +/** + * A custom hook which syncs an effect with a state + * While ignoring the first render & only running the effect when the state changes + */ +function useSyncUpdateEffect( + effect: React.EffectCallback, + stateToSyncWith: T, + deps: React.DependencyList, +) { + const isFirst = useFirstRender(); + const prevState = usePrevious(stateToSyncWith); + + React.useEffect(() => { + if (!isFirst) { + // if the state is the same as the previous state + // we don't want to run the effect + if (prevState === stateToSyncWith) return; + return effect(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [stateToSyncWith, ...deps]); +} + const Carousel = ({ autoPlay, visibleItems = 1, @@ -450,9 +473,13 @@ const Carousel = ({ shouldAddStartEndSpacing, ]); - useDidUpdate(() => { - onChange?.(activeSlide); - }, [activeSlide, onChange]); + useSyncUpdateEffect( + () => { + onChange?.(activeSlide); + }, + activeSlide, + [onChange], + ); return ( diff --git a/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx b/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx new file mode 100644 index 00000000000..692fdc4d13f --- /dev/null +++ b/packages/blade/src/components/Carousel/__tests__/Carousel.test.stories.tsx @@ -0,0 +1,205 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import type { StoryFn } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; +import { expect, jest } from '@storybook/jest'; +import type { Mock } from 'jest-mock'; +import React from 'react'; +import type { CarouselProps } from '../'; +import { Carousel as CarouselComponent } from '../'; +import { CarouselExample } from '../Carousel.stories'; +import { Box } from '~components/Box'; + +const sleep = (ms: number): Promise => new Promise((resolve) => setTimeout(resolve, ms)); + +let onChange: Mock | null = null; + +const BasicCarousel = (props: CarouselProps): React.ReactElement => ( + + + +); + +export const TestCarouselOnChange: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestCarouselOnChange.play = async ({ canvasElement }) => { + const { getByRole, getByText } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(1); + await userEvent.click(previousButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(0); + getByText(/Single Flow To Collect And Disburse Payments/)?.scrollIntoView({ behavior: 'smooth' }); + await sleep(1000); + await expect(onChange).toBeCalledWith(3); + await expect(onChange).toBeCalledTimes(3); +}; + +export const TestIndicatorButton: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestIndicatorButton.play = async ({ canvasElement }) => { + const { getByLabelText } = within(canvasElement); + const indicatorButton = getByLabelText('Slide 7'); + await userEvent.click(indicatorButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(6); + await expect(onChange).toBeCalledTimes(1); +}; + +export const TestStartOverAfterStartEnd: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestStartOverAfterStartEnd.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(previousButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(6); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(0); + await expect(onChange).toBeCalledTimes(2); +}; + +export const TestAutoPlay: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestAutoPlay.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + await sleep(8000); + await expect(onChange).toBeCalledWith(1); + await expect(getByRole('tab', { selected: true })).toHaveAccessibleName('Slide 3'); + await expect(onChange).toBeCalledTimes(1); +}; + +export const TestAutofit: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ( + + ); +}; + +TestAutofit.play = async ({ canvasElement }) => { + await sleep(1000); + const { getByLabelText, queryByRole } = within(canvasElement); + const lastIndicatorButton = getByLabelText('Slide 7'); + await expect(onChange).not.toBeCalled(); + await userEvent.click(lastIndicatorButton); + await sleep(1000); + const nextButton = queryByRole('button', { name: 'Next Slide' }); + await expect(nextButton).toBeNull(); + const firstIndicatorButton = getByLabelText('Slide 1'); + await userEvent.click(firstIndicatorButton); + await sleep(1000); + const previousButton = queryByRole('button', { name: 'Previous Slide' }); + await expect(previousButton).toBeNull(); + await expect(onChange).toBeCalledTimes(2); +}; + +export const TestAutoPlayPause: StoryFn = (props): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestAutoPlayPause.play = async ({ canvasElement }) => { + const { getByText } = within(canvasElement); + const slide = getByText(/Acquire Customers From New Customer Segments/); + await userEvent.hover(slide); + await sleep(7000); + await expect(onChange).not.toHaveBeenCalled(); +}; + +export const TestVisibleItemsOnMobile: StoryFn = ( + props, +): React.ReactElement => { + onChange = jest.fn(); + return ; +}; + +TestVisibleItemsOnMobile.parameters = { + viewport: { + defaultViewport: 'iPhone6', + }, +}; + +TestVisibleItemsOnMobile.play = async ({ canvasElement }) => { + // on mobile regardless of the visible items prop we always show 1 item + const { getByRole } = within(canvasElement); + const nextButton = getByRole('button', { name: 'Next Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(onChange).toBeCalledWith(1); +}; + +// Test for onChange fires multiple times on parent component update +// https://github.com/razorpay/blade/issues/1863 +const multipleOnChange = jest.fn(); +export const TestOnChangeParentUpdate: StoryFn = ( + props, +): React.ReactElement => { + const [, setCount] = React.useState(0); + + React.useEffect(() => { + const intervalId = setInterval(() => { + setCount((prev) => prev++); + }, 100); + + return () => clearInterval(intervalId); + }, []); + + return ; +}; + +TestOnChangeParentUpdate.play = async ({ canvasElement }) => { + const { getByRole } = within(canvasElement); + await expect(multipleOnChange).not.toBeCalled(); + const nextButton = getByRole('button', { name: 'Next Slide' }); + const previousButton = getByRole('button', { name: 'Previous Slide' }); + await userEvent.click(nextButton); + await sleep(1000); + await expect(multipleOnChange).toBeCalledWith(1); + await userEvent.click(previousButton); + await sleep(1000); + await expect(multipleOnChange).toBeCalledWith(0); + await expect(multipleOnChange).toBeCalledTimes(2); +}; + +export default { + title: 'Components/Interaction Tests/Carousel', + component: CarouselComponent, + parameters: { + controls: { + disable: true, + }, + a11y: { disable: true }, + essentials: { disable: true }, + actions: { disable: true }, + }, +}; diff --git a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx index d5456886606..be99c081557 100644 --- a/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx +++ b/packages/blade/src/components/Carousel/__tests__/Carousel.web.test.tsx @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */ /* eslint-disable @typescript-eslint/require-await */ -import { fireEvent, act } from '@testing-library/react'; import { mockViewport } from 'jsdom-testing-mocks'; import { Carousel } from '../Carousel'; import { CarouselItem } from '../CarouselItem'; @@ -43,107 +42,9 @@ afterAll(() => { }); describe('', () => { - it('should go to next/previous slide', () => { + it('should render number of indicators basis visibleItems prop', () => { const onChange = jest.fn(); - const { getByRole, queryAllByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(nextButton); - fireEvent.click(nextButton); - - expect(nextButton).toBeInTheDocument(); - expect(previousButton).toBeInTheDocument(); - - expect(onChange).toHaveBeenLastCalledWith(2); - - fireEvent.click(previousButton); - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(0); - - expect(queryAllByRole('tab').length).toBe(4); - expect(onChange).toBeCalledTimes(4); - }); - - it('should go to specific slide when clicking on indicator button', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const indicatorButton = getByRole('tab', { name: 'Slide 3' }); - fireEvent.click(indicatorButton); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(1); - }); - - it('should wrap around when reaching start or end slide', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(3); - - fireEvent.click(nextButton); - expect(onChange).toHaveBeenLastCalledWith(0); - - expect(onChange).toBeCalledTimes(2); - }); - - it('should work with visibleItems prop', () => { - const onChange = jest.fn(); - const { getByRole, queryAllByRole, queryAllByTestId } = renderWithTheme( + const { queryAllByRole, queryAllByTestId } = renderWithTheme( @@ -164,183 +65,8 @@ describe('', () => { ); expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - const nextButton = getByRole('button', { name: 'Next Slide' }); - const previousButton = getByRole('button', { name: 'Previous Slide' }); - fireEvent.click(nextButton); - - expect(onChange).toHaveBeenLastCalledWith(1); - - fireEvent.click(previousButton); - - expect(onChange).toHaveBeenLastCalledWith(0); - // assert indicator button count expect(queryAllByRole('tab').length).toBe(3); - expect(onChange).toBeCalledTimes(2); - }); - - it('should auto play', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { queryAllByTestId } = renderWithTheme( - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(0); - expect(onChange).toBeCalledTimes(3); - }); - - it('should not auto play when mouse is over', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { getByLabelText, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover over carousel - fireEvent.mouseEnter(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover out of carousel - fireEvent.mouseLeave(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(2); - }); - - it('should not auto play when focus is inside carousel', async () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { getByLabelText } = renderWithTheme( - - - - - - - - - - - , - ); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover over carousel - fireEvent.focusIn(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(1); - - // hover out of carousel - fireEvent.focusOut(getByLabelText('My Carousel')); - - await act(async () => { - jest.advanceTimersByTime(6000); - }); - - expect(onChange).toHaveBeenLastCalledWith(2); - expect(onChange).toBeCalledTimes(2); - }); - - test('when visibleItems:autofit & navigationButtonPosition:side then next / previous buttons should be removed on reaching start/end slide', () => { - const onChange = jest.fn(); - const { queryByRole, queryAllByTestId } = renderWithTheme( - - - - - - - - - - - - - - , - ); - expect(queryAllByTestId('active-slide')[0]).toHaveTextContent('0'); - - const nextButton = queryByRole('button', { name: 'Next Slide' }); - - expect(queryByRole('button', { name: 'Next Slide' })).toBeInTheDocument(); - expect(queryByRole('button', { name: 'Previous Slide' })).not.toBeInTheDocument(); - - fireEvent.click(nextButton!); - - expect(onChange).toHaveBeenLastCalledWith(1); - - fireEvent.click(nextButton!); - fireEvent.click(nextButton!); - - expect(onChange).toHaveBeenLastCalledWith(3); - - expect(queryByRole('button', { name: 'Next Slide' })).not.toBeInTheDocument(); - expect(queryByRole('button', { name: 'Previous Slide' })).toBeInTheDocument(); - expect(onChange).toBeCalledTimes(3); }); test('when visibleItems:autofit & shouldAddStartEndSpacing is undefined then we hide the indicators since they are unnecessary', () => { @@ -451,6 +177,7 @@ describe('Carousel Snapshots', () => { expect(container).toMatchSnapshot(); }); + // add this it('should not render overlay on mobile devices', () => { const viewport = mockViewport({ width: '320px', height: '568px' }); diff --git a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap index 408502c57b7..382ffedfdc7 100644 --- a/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap +++ b/packages/blade/src/components/Carousel/__tests__/__snapshots__/Carousel.web.test.tsx.snap @@ -290,7 +290,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` class=" c4" data-blade-component="base-box" data-slide-index="0" - id="carousel-52-carousel-item-0" + id="carousel-15-carousel-item-0" role="tabpanel" >
@@ -307,7 +307,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` class=" c4" data-blade-component="base-box" data-slide-index="1" - id="carousel-52-carousel-item-1" + id="carousel-15-carousel-item-1" role="tabpanel" >
@@ -358,7 +358,7 @@ exports[`Carousel Snapshots should not render overlay on mobile devices 1`] = ` role="tablist" >

BottomSheet body

"`; +exports[` should render a BottomSheet ssr 1`] = `"
"`; exports[` should render a BottomSheet ssr 2`] = ` .c3.c3.c3.c3.c3 { @@ -248,7 +248,7 @@ exports[` should render a BottomSheet ssr 2`] = ` .c24.c24.c24.c24.c24:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -341,7 +341,7 @@ exports[` should render a BottomSheet ssr 2`] = ` } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -529,20 +529,20 @@ exports[` should render a BottomSheet ssr 2`] = ` } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap index 6cb444da0d3..8a4171c360d 100644 --- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap +++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap @@ -951,7 +951,7 @@ exports[` should render Header/Footer/Body properly on opened sta .c24.c24.c24.c24.c24:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -1044,7 +1044,7 @@ exports[` should render Header/Footer/Body properly on opened sta } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1217,20 +1217,20 @@ exports[` should render Header/Footer/Body properly on opened sta } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { @@ -1643,7 +1643,7 @@ exports[` should render empty header with padding 0 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap index 608e9739780..ba54c7c8242 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render button with default properties 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -196,7 +196,7 @@ exports[` should render button with full width 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -352,7 +352,7 @@ exports[` should render button with icon with default iconPosition defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -580,7 +580,7 @@ exports[` should render button with icon with left iconPosition 1` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -808,7 +808,7 @@ exports[` should render button with icon with right iconPosition 1 defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1036,7 +1036,7 @@ exports[` should render button with icon without text 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1225,13 +1225,13 @@ exports[` should render disabled button 1`] = ` buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={false} @@ -1253,7 +1253,7 @@ exports[` should render disabled button 1`] = ` { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -1273,7 +1273,7 @@ exports[` should render disabled button 1`] = ` "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -1385,7 +1385,7 @@ exports[` should render disabled information color primary button defaultBorderColor="hsla(200, 84%, 44%, 0.18)" focusBackgroundColor="hsla(200, 84%, 44%, 0.09)" focusBorderColor="hsla(200, 84%, 44%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)" hoverBorderColor="hsla(200, 84%, 44%, 0.18)" @@ -1541,7 +1541,7 @@ exports[` should render disabled information color secondary butto defaultBorderColor="hsla(200, 84%, 44%, 0.18)" focusBackgroundColor="hsla(200, 84%, 44%, 0.09)" focusBorderColor="hsla(200, 84%, 44%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.09)" hoverBorderColor="hsla(200, 84%, 44%, 0.18)" @@ -1697,7 +1697,7 @@ exports[` should render disabled negative color primary button 1`] defaultBorderColor="hsla(4, 74%, 49%, 0.18)" focusBackgroundColor="hsla(4, 74%, 49%, 0.09)" focusBorderColor="hsla(4, 74%, 49%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)" hoverBorderColor="hsla(4, 74%, 49%, 0.18)" @@ -1853,7 +1853,7 @@ exports[` should render disabled negative color secondary button 1 defaultBorderColor="hsla(4, 74%, 49%, 0.18)" focusBackgroundColor="hsla(4, 74%, 49%, 0.09)" focusBorderColor="hsla(4, 74%, 49%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.09)" hoverBorderColor="hsla(4, 74%, 49%, 0.18)" @@ -2009,7 +2009,7 @@ exports[` should render disabled neutral color primary button 1`] defaultBorderColor="hsla(214, 28%, 84%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(214, 28%, 84%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(214, 28%, 84%, 1)" @@ -2165,7 +2165,7 @@ exports[` should render disabled neutral color secondary button 1` defaultBorderColor="hsla(214, 28%, 84%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(214, 28%, 84%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(214, 28%, 84%, 1)" @@ -2321,7 +2321,7 @@ exports[` should render disabled notice color primary button 1`] = defaultBorderColor="hsla(25, 90%, 48%, 0.18)" focusBackgroundColor="hsla(25, 90%, 48%, 0.09)" focusBorderColor="hsla(25, 90%, 48%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)" hoverBorderColor="hsla(25, 90%, 48%, 0.18)" @@ -2477,7 +2477,7 @@ exports[` should render disabled notice color secondary button 1`] defaultBorderColor="hsla(25, 90%, 48%, 0.18)" focusBackgroundColor="hsla(25, 90%, 48%, 0.09)" focusBorderColor="hsla(25, 90%, 48%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.09)" hoverBorderColor="hsla(25, 90%, 48%, 0.18)" @@ -2633,7 +2633,7 @@ exports[` should render disabled positive color primary button 1`] defaultBorderColor="hsla(150, 100%, 32%, 0.18)" focusBackgroundColor="hsla(150, 100%, 32%, 0.09)" focusBorderColor="hsla(150, 100%, 32%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)" hoverBorderColor="hsla(150, 100%, 32%, 0.18)" @@ -2789,7 +2789,7 @@ exports[` should render disabled positive color secondary button 1 defaultBorderColor="hsla(150, 100%, 32%, 0.18)" focusBackgroundColor="hsla(150, 100%, 32%, 0.09)" focusBorderColor="hsla(150, 100%, 32%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.09)" hoverBorderColor="hsla(150, 100%, 32%, 0.18)" @@ -2941,13 +2941,13 @@ exports[` should render disabled primary color primary button 1`] buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={false} @@ -2969,7 +2969,7 @@ exports[` should render disabled primary color primary button 1`] { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -2989,7 +2989,7 @@ exports[` should render disabled primary color primary button 1`] "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -3101,7 +3101,7 @@ exports[` should render disabled primary color secondary button 1` defaultBorderColor="hsla(227, 100%, 59%, 0.18)" focusBackgroundColor="hsla(0, 0%, 100%, 0)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" @@ -3257,7 +3257,7 @@ exports[` should render disabled primary color tertiary button 1`] defaultBorderColor="hsla(214, 40%, 92%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.09)" focusBorderColor="hsla(214, 40%, 92%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)" hoverBorderColor="hsla(214, 40%, 92%, 1)" @@ -3408,13 +3408,13 @@ exports[` should render disabled white color primary button 1`] = buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(0, 0%, 100%, 0.48)" + defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)" defaultBorderColor="hsla(0, 0%, 100%, 0.32)" - focusBackgroundColor="hsla(0, 0%, 100%, 0.48)" + focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(0, 0%, 100%, 0.48)" + hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" isFullWidth={false} isLoading={false} @@ -3436,7 +3436,7 @@ exports[` should render disabled white color primary button 1`] = { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderColor": "hsla(0, 0%, 100%, 0.32)", "borderRadius": 4, "borderStyle": "solid", @@ -3456,7 +3456,7 @@ exports[` should render disabled white color primary button 1`] = "width": "auto", }, { - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderColor": "hsla(0, 0%, 100%, 0.32)", }, ] @@ -3568,7 +3568,7 @@ exports[` should render disabled white color secondary button 1`] defaultBorderColor="hsla(0, 0%, 100%, 0.32)" focusBackgroundColor="hsla(0, 0%, 100%, 0)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" @@ -3720,14 +3720,14 @@ exports[` should render disabled white color tertiary button 1`] = buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(0, 0%, 100%, 0.48)" - defaultBorderColor="hsla(0, 0%, 100%, 0.48)" - focusBackgroundColor="hsla(0, 0%, 100%, 0.48)" - focusBorderColor="hsla(0, 0%, 100%, 0.48)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(0, 0%, 100%, 0.18)" + defaultBorderColor="hsla(0, 0%, 100%, 0.18)" + focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" + focusBorderColor="hsla(0, 0%, 100%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(0, 0%, 100%, 0.48)" - hoverBorderColor="hsla(0, 0%, 100%, 0.48)" + hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" + hoverBorderColor="hsla(0, 0%, 100%, 0.18)" isFullWidth={false} isLoading={false} minHeight="36px" @@ -3748,8 +3748,8 @@ exports[` should render disabled white color tertiary button 1`] = { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", - "borderColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", + "borderColor": "hsla(0, 0%, 100%, 0.18)", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 0, @@ -3768,7 +3768,7 @@ exports[` should render disabled white color tertiary button 1`] = "width": "auto", }, { - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", }, ] } @@ -3879,7 +3879,7 @@ exports[` should render information color primary button 1`] = ` defaultBorderColor="hsla(200, 84%, 44%, 1)" focusBackgroundColor="hsla(200, 84%, 37%, 1)" focusBorderColor="hsla(200, 84%, 37%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 37%, 1)" hoverBorderColor="hsla(200, 84%, 37%, 1)" @@ -4035,7 +4035,7 @@ exports[` should render information color secondary button 1`] = ` defaultBorderColor="hsla(200, 84%, 44%, 1)" focusBackgroundColor="hsla(200, 84%, 44%, 0.18)" focusBorderColor="hsla(200, 84%, 44%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(200, 84%, 44%, 0.18)" hoverBorderColor="hsla(200, 84%, 44%, 1)" @@ -4191,7 +4191,7 @@ exports[` should render large size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -4343,13 +4343,13 @@ exports[` should render loading button 1`] = ` buttonPaddingTop="0px" collapsable={false} data-blade-component="button" - defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)" + defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)" defaultBorderColor="hsla(227, 100%, 59%, 0.18)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 0.18)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 0.18)" isFullWidth={false} isLoading={true} @@ -4371,7 +4371,7 @@ exports[` should render loading button 1`] = ` { "alignItems": "center", "alignSelf": "center", - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", "borderRadius": 4, "borderStyle": "solid", @@ -4391,7 +4391,7 @@ exports[` should render loading button 1`] = ` "width": "auto", }, { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderColor": "hsla(227, 100%, 59%, 0.18)", }, ] @@ -4655,7 +4655,7 @@ exports[` should render medium size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -4811,7 +4811,7 @@ exports[` should render negative color primary button 1`] = ` defaultBorderColor="hsla(4, 74%, 49%, 1)" focusBackgroundColor="hsla(4, 77%, 40%, 1)" focusBorderColor="hsla(4, 77%, 40%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 77%, 40%, 1)" hoverBorderColor="hsla(4, 77%, 40%, 1)" @@ -4967,7 +4967,7 @@ exports[` should render negative color secondary button 1`] = ` defaultBorderColor="hsla(4, 74%, 49%, 1)" focusBackgroundColor="hsla(4, 74%, 49%, 0.18)" focusBorderColor="hsla(4, 74%, 49%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(4, 74%, 49%, 0.18)" hoverBorderColor="hsla(4, 74%, 49%, 1)" @@ -5054,7 +5054,7 @@ exports[` should render negative color secondary button 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -5123,7 +5123,7 @@ exports[` should render neutral color primary button 1`] = ` defaultBorderColor="hsla(211, 20%, 52%, 1)" focusBackgroundColor="hsla(211, 33%, 21%, 1)" focusBorderColor="hsla(211, 20%, 52%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 33%, 21%, 1)" hoverBorderColor="hsla(211, 20%, 52%, 1)" @@ -5279,7 +5279,7 @@ exports[` should render neutral color secondary button 1`] = ` defaultBorderColor="hsla(211, 20%, 52%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.32)" focusBorderColor="hsla(211, 20%, 52%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.32)" hoverBorderColor="hsla(211, 20%, 52%, 1)" @@ -5435,7 +5435,7 @@ exports[` should render notice color primary button 1`] = ` defaultBorderColor="hsla(25, 90%, 48%, 1)" focusBackgroundColor="hsla(25, 85%, 42%, 1)" focusBorderColor="hsla(25, 85%, 42%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 85%, 42%, 1)" hoverBorderColor="hsla(25, 85%, 42%, 1)" @@ -5591,7 +5591,7 @@ exports[` should render notice color secondary button 1`] = ` defaultBorderColor="hsla(25, 90%, 48%, 1)" focusBackgroundColor="hsla(25, 90%, 48%, 0.18)" focusBorderColor="hsla(25, 90%, 48%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(25, 90%, 48%, 0.18)" hoverBorderColor="hsla(25, 90%, 48%, 1)" @@ -5747,7 +5747,7 @@ exports[` should render positive color primary button 1`] = ` defaultBorderColor="hsla(150, 100%, 32%, 1)" focusBackgroundColor="hsla(150, 100%, 27%, 1)" focusBorderColor="hsla(150, 100%, 27%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 27%, 1)" hoverBorderColor="hsla(150, 100%, 27%, 1)" @@ -5903,7 +5903,7 @@ exports[` should render positive color secondary button 1`] = ` defaultBorderColor="hsla(150, 100%, 32%, 1)" focusBackgroundColor="hsla(150, 100%, 32%, 0.18)" focusBorderColor="hsla(150, 100%, 32%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(150, 100%, 32%, 0.18)" hoverBorderColor="hsla(150, 100%, 32%, 1)" @@ -6059,7 +6059,7 @@ exports[` should render primary color primary button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -6213,11 +6213,11 @@ exports[` should render primary color secondary button 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={false} isLoading={false} @@ -6302,7 +6302,7 @@ exports[` should render primary color secondary button 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -6371,7 +6371,7 @@ exports[` should render primary color tertiary button 1`] = ` defaultBorderColor="hsla(211, 27%, 76%, 1)" focusBackgroundColor="hsla(211, 20%, 52%, 0.18)" focusBorderColor="hsla(211, 27%, 76%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)" hoverBorderColor="hsla(211, 27%, 76%, 1)" @@ -6526,7 +6526,7 @@ exports[` should render small size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -6682,7 +6682,7 @@ exports[` should render white color primary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 1)" focusBackgroundColor="hsla(0, 0%, 100%, 0.8)" focusBorderColor="hsla(0, 0%, 100%, 0.8)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.8)" hoverBorderColor="hsla(0, 0%, 100%, 0.8)" @@ -6838,7 +6838,7 @@ exports[` should render white color secondary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 0.8)" focusBackgroundColor="hsla(0, 0%, 100%, 0.18)" focusBorderColor="hsla(0, 0%, 100%, 0.8)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.18)" hoverBorderColor="hsla(0, 0%, 100%, 0.8)" @@ -6994,7 +6994,7 @@ exports[` should render white color tertiary button 1`] = ` defaultBorderColor="hsla(0, 0%, 100%, 0.18)" focusBackgroundColor="hsla(0, 0%, 100%, 0.32)" focusBorderColor="hsla(0, 0%, 100%, 0.32)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(0, 0%, 100%, 0.32)" hoverBorderColor="hsla(0, 0%, 100%, 0.32)" @@ -7149,7 +7149,7 @@ exports[` should render xsmall size button 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap index a4e6a1b9665..5b47c45ff36 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render button with icon with left iconPosition 1`] = `"
"`; +exports[` should render button with icon with left iconPosition 1`] = `"
"`; exports[` should render button with icon with left iconPosition 2`] = ` .c0.c0.c0.c0.c0 { @@ -54,7 +54,7 @@ exports[` should render button with icon with left iconPosition 2` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap index 67cdbb21306..0deb3f3db8b 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap @@ -52,7 +52,7 @@ exports[` should announce button loading accessibilityLabel 1`] = background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -68,7 +68,7 @@ exports[` should announce button loading accessibilityLabel 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -102,20 +102,20 @@ exports[` should announce button loading accessibilityLabel 1`] = } .c4.c4.c4.c4.c4:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c4.c4.c4.c4.c4:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c4.c4.c4.c4.c4:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c4.c4.c4.c4.c4 * { @@ -382,7 +382,7 @@ exports[` should render button with default properties 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -512,7 +512,7 @@ exports[` should render button with full width 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -642,7 +642,7 @@ exports[` should render button with icon with default iconPosition background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -810,7 +810,7 @@ exports[` should render button with icon with left iconPosition 1` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -978,7 +978,7 @@ exports[` should render button with icon with right iconPosition 1 background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1146,7 +1146,7 @@ exports[` should render button with icon without text 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1242,7 +1242,7 @@ exports[` should render disabled button 1`] = ` min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -1276,20 +1276,20 @@ exports[` should render disabled button 1`] = ` } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1420,7 +1420,7 @@ exports[` should render disabled information color primary button background-color: hsla(200,84%,44%,0.09); border-color: hsla(200,84%,44%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1551,7 +1551,7 @@ exports[` should render disabled information color secondary butto background-color: hsla(200,84%,44%,0.09); border-color: hsla(200,84%,44%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1682,7 +1682,7 @@ exports[` should render disabled negative color primary button 1`] background-color: hsla(4,74%,49%,0.09); border-color: hsla(4,74%,49%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1813,7 +1813,7 @@ exports[` should render disabled negative color secondary button 1 background-color: hsla(4,74%,49%,0.09); border-color: hsla(4,74%,49%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1944,7 +1944,7 @@ exports[` should render disabled neutral color primary button 1`] background-color: hsla(211,20%,52%,0.18); border-color: hsla(214,28%,84%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2075,7 +2075,7 @@ exports[` should render disabled neutral color secondary button 1` background-color: hsla(211,20%,52%,0.18); border-color: hsla(214,28%,84%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2206,7 +2206,7 @@ exports[` should render disabled notice color primary button 1`] = background-color: hsla(25,90%,48%,0.09); border-color: hsla(25,90%,48%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2337,7 +2337,7 @@ exports[` should render disabled notice color secondary button 1`] background-color: hsla(25,90%,48%,0.09); border-color: hsla(25,90%,48%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2468,7 +2468,7 @@ exports[` should render disabled positive color primary button 1`] background-color: hsla(150,100%,32%,0.09); border-color: hsla(150,100%,32%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2599,7 +2599,7 @@ exports[` should render disabled positive color secondary button 1 background-color: hsla(150,100%,32%,0.09); border-color: hsla(150,100%,32%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2683,7 +2683,7 @@ exports[` should render disabled primary color primary button 1`] min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); border-width: 0px; border-radius: 4px; @@ -2717,20 +2717,20 @@ exports[` should render disabled primary color primary button 1`] } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2861,7 +2861,7 @@ exports[` should render disabled primary color secondary button 1` background-color: hsla(0,0%,100%,0); border-color: hsla(227,100%,59%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2989,7 +2989,7 @@ exports[` should render disabled primary color tertiary button 1`] .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(211,20%,52%,0.09); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3073,7 +3073,7 @@ exports[` should render disabled white color primary button 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); border-width: 0px; border-radius: 4px; @@ -3107,20 +3107,20 @@ exports[` should render disabled white color primary button 1`] = } .c0.c0.c0.c0.c0:hover { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); } .c0.c0.c0.c0.c0:active { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3251,7 +3251,7 @@ exports[` should render disabled white color secondary button 1`] background-color: hsla(0,0%,100%,0); border-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3335,8 +3335,8 @@ exports[` should render disabled white color tertiary button 1`] = min-height: 36px; width: auto; cursor: not-allowed; - background-color: hsla(0,0%,100%,0.48); - border-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); + border-color: hsla(0,0%,100%,0.18); border-width: 0px; border-radius: 4px; border-style: solid; @@ -3369,17 +3369,17 @@ exports[` should render disabled white color tertiary button 1`] = } .c0.c0.c0.c0.c0:hover { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c0.c0.c0.c0.c0:active { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3510,7 +3510,7 @@ exports[` should render information color primary button 1`] = ` background-color: hsla(200,84%,37%,1); border-color: hsla(200,84%,37%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3640,7 +3640,7 @@ exports[` should render information color secondary button 1`] = ` background-color: hsla(200,84%,44%,0.18); border-color: hsla(200,84%,44%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3770,7 +3770,7 @@ exports[` should render large size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -3900,7 +3900,7 @@ exports[` should render medium size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4030,7 +4030,7 @@ exports[` should render negative color primary button 1`] = ` background-color: hsla(4,77%,40%,1); border-color: hsla(4,77%,40%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4160,7 +4160,7 @@ exports[` should render negative color secondary button 1`] = ` background-color: hsla(4,74%,49%,0.18); border-color: hsla(4,74%,49%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4173,7 +4173,7 @@ exports[` should render negative color secondary button 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -4290,7 +4290,7 @@ exports[` should render neutral color primary button 1`] = ` background-color: hsla(211,33%,21%,1); border-color: hsla(211,20%,52%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4420,7 +4420,7 @@ exports[` should render neutral color secondary button 1`] = ` background-color: hsla(211,20%,52%,0.32); border-color: hsla(211,20%,52%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4550,7 +4550,7 @@ exports[` should render notice color primary button 1`] = ` background-color: hsla(25,85%,42%,1); border-color: hsla(25,85%,42%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4680,7 +4680,7 @@ exports[` should render notice color secondary button 1`] = ` background-color: hsla(25,90%,48%,0.18); border-color: hsla(25,90%,48%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4810,7 +4810,7 @@ exports[` should render positive color primary button 1`] = ` background-color: hsla(150,100%,27%,1); border-color: hsla(150,100%,27%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -4940,7 +4940,7 @@ exports[` should render positive color secondary button 1`] = ` background-color: hsla(150,100%,32%,0.18); border-color: hsla(150,100%,32%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5070,7 +5070,7 @@ exports[` should render primary color primary button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5187,20 +5187,20 @@ exports[` should render primary color secondary button 1`] = ` } .c0.c0.c0.c0.c0:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c0.c0.c0.c0.c0:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c0.c0.c0.c0.c0:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5213,7 +5213,7 @@ exports[` should render primary color secondary button 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -5327,7 +5327,7 @@ exports[` should render primary color tertiary button 1`] = ` .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(211,20%,52%,0.18); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5457,7 +5457,7 @@ exports[` should render small size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5587,7 +5587,7 @@ exports[` should render white color primary button 1`] = ` background-color: hsla(0,0%,100%,0.8); border-color: hsla(0,0%,100%,0.8); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5717,7 +5717,7 @@ exports[` should render white color secondary button 1`] = ` background-color: hsla(0,0%,100%,0.18); border-color: hsla(0,0%,100%,0.8); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5844,7 +5844,7 @@ exports[` should render white color tertiary button 1`] = ` .c0.c0.c0.c0.c0:focus-visible { background-color: hsla(0,0%,100%,0.32); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -5974,7 +5974,7 @@ exports[` should render xsmall size button 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap index 66f21ed2a64..fbd194026da 100644 --- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap +++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[`"`; +exports[`"`; exports[`"`; +exports[` should render 1`] = `"
"`; exports[` should render 2`] = ` .c0.c0.c0.c0.c0 { @@ -36,7 +36,7 @@ exports[` should render 2`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap index 6519e51ca2d..a74e506a543 100644 --- a/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap +++ b/packages/blade/src/components/Button/IconButton/__tests__/__snapshots__/IconButton.web.test.tsx.snap @@ -34,7 +34,7 @@ exports[` should render 1`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -102,7 +102,7 @@ exports[` should render with emphasis 1`] = ` .c0.c0.c0.c0.c0:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap index 02823e41087..006ea8baa29 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap @@ -296,11 +296,11 @@ exports[` should render a Card with Footer 1`] = ` data-blade-component="button" defaultBackgroundColor="hsla(0, 0%, 100%, 0)" defaultBorderColor="hsla(227, 100%, 59%, 1)" - focusBackgroundColor="hsla(227, 100%, 59%, 0.18)" + focusBackgroundColor="hsla(227, 100%, 59%, 0.09)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} - hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)" + hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)" hoverBorderColor="hsla(227, 100%, 59%, 1)" isFullWidth={true} isLoading={false} @@ -385,7 +385,7 @@ exports[` should render a Card with Footer 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -465,7 +465,7 @@ exports[` should render a Card with Footer 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap index 3eee04548c6..a203e39d560 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render a Card with Header & Footer 1`] = `"

Card Header

12

Card subtitle

NEW

Plain Card

Card Footer

Card footer subtitle

"`; +exports[` should render a Card with Header & Footer 1`] = `"

Card Header

12

Card subtitle

NEW

Plain Card

Card Footer

Card footer subtitle

"`; exports[` should render a Card with Header & Footer 2`] = ` .c0.c0.c0.c0.c0 { @@ -390,7 +390,7 @@ exports[` should render a Card with Header & Footer 2`] = ` } .c35.c35.c35.c35.c35 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -463,20 +463,20 @@ exports[` should render a Card with Header & Footer 2`] = ` } .c32.c32.c32.c32.c32:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c32.c32.c32.c32.c32:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c32.c32.c32.c32.c32 * { @@ -539,7 +539,7 @@ exports[` should render a Card with Header & Footer 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c37.c37.c37.c37.c37 * { diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap index aafd8623932..832633b2155 100644 --- a/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap +++ b/packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap @@ -180,7 +180,7 @@ exports[` should render a Card with Footer 1`] = ` } .c17.c17.c17.c17.c17 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -253,20 +253,20 @@ exports[` should render a Card with Footer 1`] = ` } .c14.c14.c14.c14.c14:hover { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c14.c14.c14.c14.c14:active { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); } .c14.c14.c14.c14.c14:focus-visible { - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c14.c14.c14.c14.c14 * { @@ -329,7 +329,7 @@ exports[` should render a Card with Footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c19.c19.c19.c19.c19 * { diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap index 109fbd1cdb4..4b97fa71a09 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap @@ -89,7 +89,7 @@ exports[` should render checkbox with label 1`] = ` } .c10.c10.c10.c10.c10 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -178,7 +178,7 @@ exports[` should render checkbox with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c8.c8.c8.c8.c8 * { diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap index 1e00cc3e952..c9b38167799 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap @@ -75,7 +75,7 @@ exports[` should render with CollapsibleButton 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -571,7 +571,7 @@ exports[` should render with CollapsibleLink 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -667,7 +667,7 @@ exports[` should render with CollapsibleLink 1`] = ` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; +exports[` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; exports[` should render Collapsible on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -146,7 +146,7 @@ exports[` should render Collapsible on server 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap index bf5e64ef6b1..40001c0a640 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap @@ -139,7 +139,7 @@ exports[` should render with CollapsibleButton 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { @@ -428,7 +428,7 @@ exports[` should render with CollapsibleLink 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -548,7 +548,7 @@ exports[` should render with CollapsibleLink 1`] = ` } .c1.c1.c1.c1.c1:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c1.c1.c1.c1.c1 * { @@ -629,7 +629,7 @@ exports[` should render with CollapsibleLink 1`] = ` clip-rule="evenodd" d="M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z" data-blade-component="svg-path" - fill="hsla(227, 71%, 51%, 1)" + fill="hsla(227, 100%, 59%, 1)" fill-rule="evenodd" /> diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap index fdc835426a6..25398d1622c 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.native.test.tsx.snap @@ -85,7 +85,7 @@ exports[` should change the link to a visited state after click 1`] style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -200,7 +200,7 @@ exports[` should not change the button to a visited state after clic style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -315,7 +315,7 @@ exports[` should render button variant of link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -660,7 +660,7 @@ exports[` should render disabled negative color link 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1120,7 +1120,7 @@ exports[` should render disabled primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1397,7 +1397,7 @@ exports[` should render icon only link 1`] = ` > should render icon only link 1`] = ` /> should render icon only link 1`] = ` should render icon only link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1666,7 +1666,7 @@ exports[` should render link with default properties 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1828,7 +1828,7 @@ exports[` should render link with icon with default iconPosition 1`] > should render link with icon with default iconPosition 1`] /> should render link with icon with default iconPosition 1`] should render link with icon with default iconPosition 1`] style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2031,7 +2031,7 @@ exports[` should render link with icon with left iconPosition 1`] = > should render link with icon with left iconPosition 1`] = /> should render link with icon with left iconPosition 1`] = should render link with icon with left iconPosition 1`] = style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2187,7 +2187,7 @@ exports[` should render link with icon with right iconPosition 1`] = style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2269,7 +2269,7 @@ exports[` should render link with icon with right iconPosition 1`] = > should render link with icon with right iconPosition 1`] = /> should render link with icon with right iconPosition 1`] = should render negative color link 1`] = ` style={ [ { - "color": "hsla(4, 74%, 49%, 1)", + "color": "hsla(4, 86%, 58%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2850,7 +2850,7 @@ exports[` should render primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap index 49652fdadec..f8518c263f3 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render link with a default rel set when target is _blank 1`] = `""`; +exports[` should render link with a default rel set when target is _blank 1`] = `""`; exports[` should render link with a default rel set when target is _blank 2`] = ` .c0.c0.c0.c0.c0 { @@ -29,7 +29,7 @@ exports[` should render link with a default rel set when target is _ } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -56,7 +56,7 @@ exports[` should render link with a default rel set when target is _ } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; diff --git a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap index 97c16a1a185..fc1c2ea1205 100644 --- a/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap +++ b/packages/blade/src/components/Link/BaseLink/__tests__/__snapshots__/BaseLink.web.test.tsx.snap @@ -27,7 +27,7 @@ exports[` should change the link to a visited state after click 1`] } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -54,7 +54,7 @@ exports[` should change the link to a visited state after click 1`] } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -123,7 +123,7 @@ exports[` should not change the button to a visited state after clic } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -150,7 +150,7 @@ exports[` should not change the button to a visited state after clic } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -217,7 +217,7 @@ exports[` should render button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -244,7 +244,7 @@ exports[` should render button variant of link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -311,7 +311,7 @@ exports[` should render disabled button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -406,7 +406,7 @@ exports[` should render disabled information color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -499,7 +499,7 @@ exports[` should render disabled negative color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -526,7 +526,7 @@ exports[` should render disabled negative color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -592,7 +592,7 @@ exports[` should render disabled neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -685,7 +685,7 @@ exports[` should render disabled notice color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -778,7 +778,7 @@ exports[` should render disabled positive color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -871,7 +871,7 @@ exports[` should render disabled primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -898,7 +898,7 @@ exports[` should render disabled primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -964,7 +964,7 @@ exports[` should render disabled white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1057,7 +1057,7 @@ exports[` should render icon only link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1096,7 +1096,7 @@ exports[` should render icon only link 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1140,18 +1140,18 @@ exports[` should render icon only link 1`] = ` @@ -1192,7 +1192,7 @@ exports[` should render information color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1285,7 +1285,7 @@ exports[` should render link with default properties 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1312,7 +1312,7 @@ exports[` should render link with default properties 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1378,7 +1378,7 @@ exports[` should render link with icon with default iconPosition 1`] } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1417,7 +1417,7 @@ exports[` should render link with icon with default iconPosition 1`] } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1461,18 +1461,18 @@ exports[` should render link with icon with default iconPosition 1`] @@ -1515,7 +1515,7 @@ exports[` should render link with icon with left iconPosition 1`] = } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1554,7 +1554,7 @@ exports[` should render link with icon with left iconPosition 1`] = } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1598,18 +1598,18 @@ exports[` should render link with icon with left iconPosition 1`] = @@ -1652,7 +1652,7 @@ exports[` should render link with icon with right iconPosition 1`] = } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1691,7 +1691,7 @@ exports[` should render link with icon with right iconPosition 1`] = } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1741,18 +1741,18 @@ exports[` should render link with icon with right iconPosition 1`] = @@ -1789,7 +1789,7 @@ exports[` should render negative color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1816,7 +1816,7 @@ exports[` should render negative color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(4,74%,49%,1); + color: hsla(4,86%,58%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1882,7 +1882,7 @@ exports[` should render neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1975,7 +1975,7 @@ exports[` should render notice color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2068,7 +2068,7 @@ exports[` should render positive color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2161,7 +2161,7 @@ exports[` should render primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -2188,7 +2188,7 @@ exports[` should render primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -2254,7 +2254,7 @@ exports[` should render white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap index fc9a4532566..89cb6b2bca9 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.native.test.tsx.snap @@ -85,7 +85,7 @@ exports[` should render button variant of link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -430,7 +430,7 @@ exports[` should render disabled primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -660,7 +660,7 @@ exports[` should render link with default properties 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -822,7 +822,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` > should render link with icon with default iconPosition 1`] = ` /> should render link with icon with default iconPosition 1`] = ` should render link with icon with default iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1025,7 +1025,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` > should render link with icon with left iconPosition 1`] = ` /> should render link with icon with left iconPosition 1`] = ` should render link with icon with left iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1181,7 +1181,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1263,7 +1263,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` > should render link with icon with right iconPosition 1`] = ` /> should render link with icon with right iconPosition 1`] = ` should render link with icon without text 1`] = ` > should render link with icon without text 1`] = ` /> should render link with icon without text 1`] = ` should render link with icon without text 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1700,7 +1700,7 @@ exports[` should render primary color link 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1977,7 +1977,7 @@ exports[` should render with small size 1`] = ` > should render with small size 1`] = ` /> should render with small size 1`] = ` should render with small size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap index c40527ca84c..c590d2ceb23 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render link with a default rel set when target is _blank 1`] = `""`; +exports[` should render link with a default rel set when target is _blank 1`] = `""`; exports[` should render link with a default rel set when target is _blank 2`] = ` .c0.c0.c0.c0.c0 { @@ -29,7 +29,7 @@ exports[` should render link with a default rel set when target is _blan } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -56,7 +56,7 @@ exports[` should render link with a default rel set when target is _blan } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; diff --git a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap index 640c157ba80..379e95c24ab 100644 --- a/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap +++ b/packages/blade/src/components/Link/Link/__tests__/__snapshots__/Link.web.test.tsx.snap @@ -27,7 +27,7 @@ exports[` should render button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -54,7 +54,7 @@ exports[` should render button variant of link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -121,7 +121,7 @@ exports[` should render disabled button variant of link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -216,7 +216,7 @@ exports[` should render disabled neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -309,7 +309,7 @@ exports[` should render disabled primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -336,7 +336,7 @@ exports[` should render disabled primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -402,7 +402,7 @@ exports[` should render disabled white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -495,7 +495,7 @@ exports[` should render link with default properties 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -522,7 +522,7 @@ exports[` should render link with default properties 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -588,7 +588,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -627,7 +627,7 @@ exports[` should render link with icon with default iconPosition 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -671,18 +671,18 @@ exports[` should render link with icon with default iconPosition 1`] = ` @@ -725,7 +725,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -764,7 +764,7 @@ exports[` should render link with icon with left iconPosition 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -808,18 +808,18 @@ exports[` should render link with icon with left iconPosition 1`] = ` @@ -862,7 +862,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -901,7 +901,7 @@ exports[` should render link with icon with right iconPosition 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -951,18 +951,18 @@ exports[` should render link with icon with right iconPosition 1`] = ` @@ -999,7 +999,7 @@ exports[` should render link with icon without text 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1038,7 +1038,7 @@ exports[` should render link with icon without text 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1082,18 +1082,18 @@ exports[` should render link with icon without text 1`] = ` @@ -1134,7 +1134,7 @@ exports[` should render neutral color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1227,7 +1227,7 @@ exports[` should render primary color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1254,7 +1254,7 @@ exports[` should render primary color link 1`] = ` } .c2.c2.c2.c2.c2 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 500; @@ -1320,7 +1320,7 @@ exports[` should render white color link 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1413,7 +1413,7 @@ exports[` should render with small size 1`] = ` } .c0.c0.c0.c0.c0:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1452,7 +1452,7 @@ exports[` should render with small size 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 500; @@ -1496,18 +1496,18 @@ exports[` should render with small size 1`] = ` diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap index 6c7a9fc289c..ad090f386a8 100644 --- a/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap +++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.native.test.tsx.snap @@ -1166,7 +1166,7 @@ exports[` should render List with inline ListItemLink 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1504,7 +1504,7 @@ exports[` should render List with inline ListItemText 1`] = ` style={ [ { - "color": "hsla(227, 69%, 42%, 1)", + "color": "hsla(227, 71%, 51%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", diff --git a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap index e70c4e8fd51..a8ca1f21ebd 100644 --- a/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap +++ b/packages/blade/src/components/List/__tests__/__snapshots__/List.web.test.tsx.snap @@ -449,7 +449,7 @@ exports[` should render List with inline ListItemText 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(227,69%,42%,1); + color: hsla(227,71%,51%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; diff --git a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap index 14e68badc04..98fc2c1b121 100644 --- a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap +++ b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap @@ -342,7 +342,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = ` .c22.c22.c22.c22.c22:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -454,7 +454,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c28.c28.c28.c28.c28 * { diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap index 5b30516e406..1f648e5d40a 100644 --- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap +++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -557,7 +557,7 @@ exports[` should render popover with custom zIndex 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -1074,7 +1074,7 @@ exports[` should render with title,footer 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap index a11ff77ef5d..b6830a37d43 100644 --- a/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap +++ b/packages/blade/src/components/Popover/__tests__/__snapshots__/Popover.web.test.tsx.snap @@ -98,7 +98,7 @@ exports[` should render 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -192,7 +192,7 @@ exports[` should render 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -446,7 +446,7 @@ exports[` should render popover with custom zIndex 1`] = ` .c8.c8.c8.c8.c8:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -540,7 +540,7 @@ exports[` should render popover with custom zIndex 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -811,7 +811,7 @@ exports[` should render with title,footer 1`] = ` .c11.c11.c11.c11.c11:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } @@ -922,7 +922,7 @@ exports[` should render with title,footer 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap index 0f639825dba..e329f125748 100644 --- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap +++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap @@ -1723,7 +1723,7 @@ exports[` should update the progress value appropriately 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -2070,7 +2070,7 @@ exports[` should update the progress value appropriately 2`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap index f1e435e854e..b0022d4fdaf 100644 --- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap +++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap @@ -1586,7 +1586,7 @@ exports[` should update the progress value appropriately 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -1864,7 +1864,7 @@ exports[` should update the progress value appropriately 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap index aab26ca1ca8..d31a8e11ca4 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.native.test.tsx.snap @@ -347,7 +347,7 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(0, 0%, 100%, 0.48)", + "backgroundColor": "hsla(0, 0%, 100%, 0.18)", "borderRadius": 9999, "display": "flex", "flexShrink": 0, diff --git a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap index 64e6c92d7ed..3b038adf3f0 100644 --- a/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap +++ b/packages/blade/src/components/Switch/__tests__/__snapshots__/Switch.web.test.tsx.snap @@ -254,7 +254,7 @@ exports[` should set disabled state with isDisabled 1`] = ` border-radius: 9999px; -webkit-animation-duration: 150ms; animation-duration: 150ms; - background-color: hsla(0,0%,100%,0.48); + background-color: hsla(0,0%,100%,0.18); } .c3.c3.c3.c3.c3 { diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap index c4583d8b103..6fe6c8c60a8 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.native.test.tsx.snap @@ -395,7 +395,7 @@ exports[`Tabs should render 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -653,7 +653,7 @@ exports[`Tabs should render 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -883,7 +883,7 @@ exports[`Tabs should render with filled variant 1`] = ` collapsable={false} style={ { - "backgroundColor": "hsla(227, 100%, 59%, 0.18)", + "backgroundColor": "hsla(227, 100%, 59%, 0.09)", "borderRadius": 2, "bottom": 4, "height": -10, @@ -1214,7 +1214,7 @@ exports[`Tabs should render with filled variant 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -1509,7 +1509,7 @@ exports[`Tabs should render with filled variant 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2106,7 +2106,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2362,7 +2362,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2928,7 +2928,7 @@ exports[`Tabs should render with large size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 16, "fontStyle": "normal", @@ -3186,7 +3186,7 @@ exports[`Tabs should render with large size 1`] = ` style={ [ { - "color": "hsla(227, 71%, 51%, 1)", + "color": "hsla(227, 100%, 59%, 1)", "fontFamily": "Inter", "fontSize": 16, "fontStyle": "normal", diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap index c4f1814d66f..051a0e364f4 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render tabs ssr 1`] = `"

Refunds

"`; +exports[` should render tabs ssr 1`] = `"

Refunds

"`; exports[` should render tabs ssr 2`] = ` .c0.c0.c0.c0.c0 { @@ -103,7 +103,7 @@ exports[` should render tabs ssr 2`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -205,7 +205,7 @@ exports[` should render tabs ssr 2`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap index 49fc14516e2..fcb2b841842 100644 --- a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap +++ b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap @@ -101,7 +101,7 @@ exports[`Tabs should render 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -203,7 +203,7 @@ exports[`Tabs should render 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -469,7 +469,7 @@ exports[`Tabs should render with filled variant 1`] = ` position: absolute; top: 0px; left: 0px; - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); border-radius: 2px; pointer-events: none; } @@ -500,7 +500,7 @@ exports[`Tabs should render with filled variant 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -651,7 +651,7 @@ exports[`Tabs should render with filled variant 1`] = ` .c10.c10.c10.c10.c10:focus-visible { border-radius: 4px; box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); - background-color: hsla(227,100%,59%,0.18); + background-color: hsla(227,100%,59%,0.09); } .c10.c10.c10.c10.c10 * { @@ -668,7 +668,7 @@ exports[`Tabs should render with filled variant 1`] = ` } .c13.c13.c13.c13.c13:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c9.c9.c9.c9.c9 { @@ -1002,7 +1002,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; @@ -1105,7 +1105,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -1396,7 +1396,7 @@ exports[`Tabs should render with size 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 1rem; font-weight: 600; @@ -1498,7 +1498,7 @@ exports[`Tabs should render with size 1`] = ` } .c10.c10.c10.c10.c10:hover { - background-color: hsla(227,100%,59%,0.24); + background-color: hsla(227,100%,59%,0.18); } .c3.c3.c3.c3.c3::-webkit-scrollbar { @@ -1783,7 +1783,7 @@ exports[`Tabs should render with vertical orientation 1`] = ` } .c9.c9.c9.c9.c9 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 600; diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap index cec86ebab91..37b08241f78 100644 --- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render tag 1`] = `"

in:User

"`; +exports[` should render tag 1`] = `"

in:User

"`; exports[` should render tag 2`] = ` .c0.c0.c0.c0.c0 { @@ -92,7 +92,7 @@ exports[` should render tag 2`] = ` .c5.c5.c5.c5.c5:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap index 596bfbe21a4..66a2884f0e7 100644 --- a/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap +++ b/packages/blade/src/components/Tag/__tests__/__snapshots__/Tag.web.test.tsx.snap @@ -90,7 +90,7 @@ exports[` should render tag 1`] = ` .c5.c5.c5.c5.c5:focus-visible { outline: none; - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); color: hsla(211,26%,34%,1); } diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap index ec4a4247694..b1277ccaf93 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.native.test.tsx.snap @@ -40,7 +40,7 @@ exports[` should render 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -414,7 +414,7 @@ exports[` should render tooltip with custom zIndex 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" @@ -788,7 +788,7 @@ exports[` should render with title 1`] = ` defaultBorderColor="hsla(227, 100%, 59%, 1)" focusBackgroundColor="hsla(227, 71%, 51%, 1)" focusBorderColor="hsla(227, 100%, 59%, 1)" - focusRingColor="hsla(227, 100%, 59%, 0.18)" + focusRingColor="hsla(227, 100%, 59%, 0.09)" focusable={true} hoverBackgroundColor="hsla(227, 71%, 51%, 1)" hoverBorderColor="hsla(227, 100%, 59%, 1)" diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap index 0f45a60c680..2d560d0670e 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Tooltip ssr 1`] = `"
"`; +exports[` should render Tooltip ssr 1`] = `"
"`; exports[` should render Tooltip ssr 2`] = ` .c1.c1.c1.c1.c1 { @@ -94,7 +94,7 @@ exports[` should render Tooltip ssr 2`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap index f61bbfc3289..aaece673007 100644 --- a/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap +++ b/packages/blade/src/components/Tooltip/__tests__/__snapshots__/Tooltip.web.test.tsx.snap @@ -147,7 +147,7 @@ exports[` should render 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -411,7 +411,7 @@ exports[` should render tooltip with custom zIndex 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { @@ -692,7 +692,7 @@ exports[` should render with title 1`] = ` background-color: hsla(227,71%,51%,1); border-color: hsla(227,100%,59%,1); outline: 1px solid hsla(227,100%,59%,0.09); - box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); } .c0.c0.c0.c0.c0 * { diff --git a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap index a3b5c7017ee..819f2a83269 100644 --- a/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap +++ b/packages/blade/src/components/Typography/Text/__tests__/__snapshots__/Text.web.test.tsx.snap @@ -31,7 +31,7 @@ exports[` should render Text with center textAlign 1`] = ` exports[` should render Text with color 1`] = ` .c0.c0.c0.c0.c0 { - color: hsla(227,71%,51%,1); + color: hsla(227,100%,59%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; From a1fbac3b1501dda3bf06805bc4249b956f267fca Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Thu, 11 Jan 2024 16:07:19 +0530 Subject: [PATCH 18/18] refactor(blade): rebrand skeleton (#1935) * chore: rebrand skeleton * chore: update skeleton tests * chore: reexport * chore: update snaps --- packages/blade/.storybook/react/main.ts | 1 + packages/blade/rebranded-components.js | 1 + .../Skeleton/PulseAnimation.native.tsx | 9 +++---- .../Skeleton/PulseAnimation.web.tsx | 20 ++++++---------- .../components/Skeleton/Skeleton.stories.tsx | 24 ++++++++----------- .../src/components/Skeleton/Skeleton.tsx | 2 -- .../__snapshots__/Skeleton.ssr.test.tsx.snap | 8 +++---- .../__snapshots__/Skeleton.web.test.tsx.snap | 12 +++++----- .../blade/src/components/Skeleton/types.ts | 1 - packages/blade/src/components/index.ts | 1 + 10 files changed, 33 insertions(+), 46 deletions(-) diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 1bff0d9e760..595f41d1af4 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -42,6 +42,7 @@ const config: StorybookConfig = { '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Skeleton/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', '../../docs/**/*.stories.mdx', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index b698558f269..294aa75dd17 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -30,6 +30,7 @@ const rebrandedComponents = [ 'SkipNav', 'VisuallyHidden', 'Tooltip', + 'Skeleton', 'Switch', 'Radio', 'Checkbox', diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx index a2c82f780aa..ecebd076f75 100644 --- a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx +++ b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx @@ -17,10 +17,7 @@ import { useTheme } from '~components/BladeProvider'; const AnimatedBox = Animated.createAnimatedComponent(BaseBox); -const PulseAnimation = ({ - contrast, - ...props -}: { contrast: 'low' | 'high' } & SkeletonProps): React.ReactElement => { +const PulseAnimation = (props: SkeletonProps): React.ReactElement => { const { theme } = useTheme(); const durationPluseOff = theme.motion.duration.xmoderate; const durationPluseOn = theme.motion.duration['2xgentle']; @@ -68,8 +65,8 @@ const PulseAnimation = ({ progress.value, [1, 0], [ - theme.colors.brand.gray.a50[`${contrast}Contrast`], - theme.colors.brand.gray.a100[`${contrast}Contrast`], + theme.colors.interactive.background.gray.highlighted, + theme.colors.interactive.background.gray.default, ], ), }; diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx index b48dcdaa93a..1352ed59b5d 100644 --- a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx +++ b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx @@ -4,21 +4,15 @@ import styled, { css, keyframes } from 'styled-components'; import BaseBox from '~components/Box/BaseBox'; import { castWebType, makeMotionTime } from '~utils'; -const pulseKeyframes = ({ - theme, - contrast, -}: { - theme: DefaultTheme; - contrast: 'low' | 'high'; -}): Keyframes => keyframes` +const pulseKeyframes = ({ theme }: { theme: DefaultTheme }): Keyframes => keyframes` 0% { - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.default}; } 25% { - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.default}; } 100% { - background-color: ${theme.colors.brand.gray.a50[`${contrast}Contrast`]}; + background-color: ${theme.colors.interactive.background.gray.highlighted}; } `; @@ -31,7 +25,7 @@ const fadeInKeyframes = (): Keyframes => keyframes` } `; -const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, contrast }) => { +const PulseAnimation = styled(BaseBox)(({ theme }) => { // We need to delay the animation in between keyframes // Since we also offset the animation to have 300ms delay in 25% keyframe // https://css-tricks.com/css-keyframe-animation-delay-iterations/ @@ -43,8 +37,8 @@ const PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, c return css` opacity: 0; - background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]}; - animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ contrast, theme })}; + background-color: ${theme.colors.interactive.background.gray.default}; + animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ theme })}; animation-duration: ${duration}, ${totalDuration}; animation-delay: 0ms, ${duration}; animation-timing-function: ${easing}, ${easing}; diff --git a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx index 65d4adebfb3..9b88e731d59 100644 --- a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx @@ -141,7 +141,7 @@ const BasicSkeleton = (): React.ReactElement => { width="100%" padding="spacing.5" borderRadius="medium" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" > Total Repayable Amount - + Principal:{' '} - + ₹16000 {' '} Interest:{' '} - + ₹450 @@ -326,7 +326,7 @@ const SkeletonCardTemplate: StoryFn = () => { display="flex" gap="spacing.2" flexDirection="column" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" elevation="lowRaised" borderRadius="medium" > @@ -341,9 +341,7 @@ const SkeletonCardTemplate: StoryFn = () => { - UPI} - /> + UPI} /> @@ -410,7 +408,7 @@ const SkeletonAccessibilityTemplate: StoryFn = () => { display="flex" gap="spacing.2" flexDirection="column" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" elevation="lowRaised" borderRadius="medium" > @@ -425,9 +423,7 @@ const SkeletonAccessibilityTemplate: StoryFn = () => { - UPI} - /> + UPI} /> diff --git a/packages/blade/src/components/Skeleton/Skeleton.tsx b/packages/blade/src/components/Skeleton/Skeleton.tsx index e5c5f7b482f..bc66ed9330d 100644 --- a/packages/blade/src/components/Skeleton/Skeleton.tsx +++ b/packages/blade/src/components/Skeleton/Skeleton.tsx @@ -6,7 +6,6 @@ import { makeAccessible } from '~utils/makeAccessible'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; const Skeleton = ({ - contrast = 'low', width, maxWidth, minWidth, @@ -54,7 +53,6 @@ const Skeleton = ({ placeSelf={placeSelf} placeItems={placeItems} order={order} - contrast={contrast} {...getStyledProps(props)} {...makeAccessible({ hidden: true })} {...metaAttribute({ name: MetaConstants.Skeleton, testID })} diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap index 175b9e7f04f..3f22e847c34 100644 --- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap +++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render 1`] = `"
"`; +exports[` should render 1`] = `"
"`; exports[` should render 2`] = ` .c0.c0.c0.c0.c0 { @@ -11,9 +11,9 @@ exports[` should render 2`] = ` .c1.c1.c1.c1.c1 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; diff --git a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap index 76802b22ffd..396cac9f835 100644 --- a/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap +++ b/packages/blade/src/components/Skeleton/__tests__/__snapshots__/Skeleton.web.test.tsx.snap @@ -8,9 +8,9 @@ exports[` should render skeleton 1`] = ` .c1.c1.c1.c1.c1 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; @@ -50,9 +50,9 @@ exports[` should support margin and other layout props 1`] = ` .c2.c2.c2.c2.c2 { opacity: 0; - background-color: hsla(216,15%,54%,0.18); - -webkit-animation-name: lbWRkT-450290765,fZZrNN-450290765; - animation-name: lbWRkT-450290765,fZZrNN-450290765; + background-color: hsla(211,20%,52%,0.09); + -webkit-animation-name: lbWRkT-450290765,iRXnvq-450290765; + animation-name: lbWRkT-450290765,iRXnvq-450290765; -webkit-animation-duration: 900ms,1200ms; animation-duration: 900ms,1200ms; -webkit-animation-delay: 0ms,900ms; diff --git a/packages/blade/src/components/Skeleton/types.ts b/packages/blade/src/components/Skeleton/types.ts index 08383defb7b..be14d384492 100644 --- a/packages/blade/src/components/Skeleton/types.ts +++ b/packages/blade/src/components/Skeleton/types.ts @@ -8,7 +8,6 @@ type SkeletonProps = StyledPropsBlade & 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius' > & Partial & { - contrast?: 'low' | 'high'; testID?: string; }; diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index a5e5b1c2423..5881cb628b8 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -22,6 +22,7 @@ export * from './Spinner'; export * from './Tabs'; export * from './Tag'; export * from './Tooltip'; +export * from './Skeleton'; export * from './Switch'; export * from './Typography'; export * from './SkipNav';