From 31a46cf6110ce80723926678eea808038438ddcf Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 21 Aug 2023 16:02:26 +0100 Subject: [PATCH] fix: snapshots --- .../__snapshots__/Accordion.test.tsx.snap | 131 +------- .../__snapshots__/BannerRegular.test.tsx.snap | 306 ++++-------------- .../__snapshots__/Calendar.test.tsx.snap | 10 +- .../CreatePasswordField.test.tsx.snap | 20 +- .../__snapshots__/DataTable.test.tsx.snap | 18 +- .../__snapshots__/DateInput.test.tsx.snap | 8 +- .../components/field-wrapper/FieldWrapper.tsx | 15 +- .../__snapshots__/FieldWrapper.test.tsx.snap | 2 + .../__snapshots__/FileInput.test.tsx.snap | 20 +- .../MarkdownContent.test.tsx.snap | 4 + .../__snapshots__/Pagination.test.tsx.snap | 131 +------- .../__snapshots__/Sidedrawer.test.tsx.snap | 20 +- .../__snapshots__/Stepper.test.tsx.snap | 36 ++- .../tabs/__snapshots__/Tabs.test.tsx.snap | 131 +------- .../TileInteractive.test.tsx.snap | 131 +------- .../TileToggleGroup.test.tsx.snap | 131 +------- .../tile/__snapshots__/Tile.test.tsx.snap | 131 +------- 17 files changed, 278 insertions(+), 967 deletions(-) diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap index 369d0ef22..e4be70ea9 100644 --- a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap +++ b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Accordion component renders an accordion 1`] = ` @media { :root, - .t-kAUxbu { + .t-kgHKNm { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -21,8 +21,8 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-grey200: hsl(0, 0%, 92%); --colors-grey300: hsl(0, 0%, 88%); --colors-grey400: hsl(0, 0%, 81%); - --colors-grey500: hsl(0, 0%, 73%); - --colors-grey600: hsl(0, 0%, 62%); + --colors-grey500: hsl(0, 0%, 76%); + --colors-grey600: hsl(0, 0%, 71%); --colors-grey700: hsl(0, 0%, 46%); --colors-grey800: hsl(0, 0%, 33%); --colors-grey900: hsl(0, 0%, 20%); @@ -32,126 +32,30 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-blue100: hsl(215, 100%, 98%); --colors-blue200: hsl(212, 100%, 95%); --colors-blue300: hsl(211, 100%, 92%); - --colors-blue400: hsl(211, 100%, 88%); - --colors-blue500: hsl(212, 100%, 80%); - --colors-blue600: hsl(213, 100%, 71%); - --colors-blue700: hsl(214, 100%, 58%); + --colors-blue400: hsl(212, 100%, 88%); + --colors-blue500: hsl(212, 87%, 84%); + --colors-blue600: hsl(216, 96%, 79%); + --colors-blue700: hsl(214, 92%, 63%); --colors-blue800: hsl(217, 92%, 51%); --colors-blue900: hsl(223, 78%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); - --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); + --colors-blue1200: hsl(228, 63%, 20%); + --colors-purple100: hsl(281, 100%, 98%); --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); + --colors-purple300: hsl(270, 100%, 92%); --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); + --colors-purple500: hsl(270, 87%, 84%); + --colors-purple600: hsl(264, 96%, 79%); + --colors-purple700: hsl(275, 100%, 51%); --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); + --colors-purple900: hsl(268, 78%, 42%); --colors-purple1000: hsl(266, 82%, 32%); --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); - --colors-cyan100: hsl(198, 100%, 97%); - --colors-cyan200: hsl(199, 100%, 94%); - --colors-cyan300: hsl(201, 100%, 89%); - --colors-cyan400: hsl(200, 100%, 84%); - --colors-cyan500: hsl(201, 96%, 73%); - --colors-cyan600: hsl(202, 85%, 60%); - --colors-cyan700: hsl(204, 81%, 46%); - --colors-cyan800: hsl(205, 100%, 38%); - --colors-cyan900: hsl(206, 100%, 30%); - --colors-cyan1000: hsl(205, 100%, 21%); - --colors-cyan1100: hsl(206, 97%, 15%); - --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); - --colors-magenta100: hsl(330, 100%, 99%); - --colors-magenta200: hsl(329, 100%, 96%); - --colors-magenta300: hsl(332, 100%, 92%); - --colors-magenta400: hsl(333, 100%, 90%); - --colors-magenta500: hsl(333, 90%, 80%); - --colors-magenta600: hsl(333, 87%, 72%); - --colors-magenta700: hsl(333, 75%, 59%); - --colors-magenta800: hsl(333, 69%, 49%); - --colors-magenta900: hsl(333, 74%, 36%); - --colors-magenta1000: hsl(333, 86%, 25%); - --colors-magenta1100: hsl(333, 95%, 16%); - --colors-magenta1200: hsl(334, 62%, 10%); - --colors-red100: hsl(0, 100%, 99%); - --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); - --colors-red500: hsl(356, 96%, 83%); - --colors-red600: hsl(357, 90%, 73%); - --colors-red700: hsl(357, 80%, 59%); - --colors-red800: hsl(357, 76%, 49%); - --colors-red900: hsl(357, 73%, 37%); - --colors-red1000: hsl(357, 79%, 26%); - --colors-red1100: hsl(357, 91%, 17%); - --colors-red1200: hsl(357, 73%, 10%); - --colors-teal100: hsl(180, 83%, 95%); - --colors-teal200: hsl(180, 75%, 88%); - --colors-teal300: hsl(180, 71%, 78%); - --colors-teal400: hsl(179, 70%, 71%); - --colors-teal500: hsl(179, 65%, 52%); - --colors-teal600: hsl(179, 76%, 41%); - --colors-teal700: hsl(179, 91%, 31%); - --colors-teal800: hsl(178, 100%, 25%); - --colors-teal900: hsl(180, 100%, 18%); - --colors-teal1000: hsl(183, 100%, 13%); - --colors-teal1100: hsl(187, 92%, 10%); - --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); - --colors-yellow100: hsl(53, 94%, 93%); - --colors-yellow200: hsl(54, 92%, 85%); - --colors-yellow300: hsl(54, 92%, 75%); - --colors-yellow400: hsl(52, 97%, 63%); - --colors-yellow500: hsl(51, 100%, 46%); - --colors-yellow600: hsl(49, 100%, 39%); - --colors-yellow700: hsl(48, 100%, 35%); - --colors-yellow800: hsl(46, 100%, 30%); - --colors-yellow900: hsl(44, 100%, 22%); - --colors-yellow1000: hsl(44, 100%, 18%); - --colors-yellow1100: hsl(41, 100%, 11%); - --colors-yellow1200: hsl(39, 100%, 8%); - --colors-lime100: hsl(73, 94%, 93%); - --colors-lime200: hsl(73, 94%, 87%); - --colors-lime300: hsl(73, 90%, 77%); - --colors-lime400: hsl(74, 82%, 69%); - --colors-lime500: hsl(74, 68%, 58%); - --colors-lime600: hsl(74, 77%, 41%); - --colors-lime700: hsl(75, 100%, 31%); - --colors-lime800: hsl(75, 100%, 27%); - --colors-lime900: hsl(75, 100%, 19%); - --colors-lime1000: hsl(75, 100%, 15%); - --colors-lime1100: hsl(75, 100%, 9%); - --colors-lime1200: hsl(74, 100%, 6%); + --colors-purple1200: hsl(265, 63%, 20%); --colors-tonal50: hsl(0, 0%, 96%); --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal200: hsl(0, 0%, 71%); --colors-tonal300: hsl(0, 0%, 46%); --colors-tonal400: hsl(0, 0%, 33%); --colors-tonal500: hsl(0, 0%, 20%); @@ -194,9 +98,6 @@ exports[`Accordion component renders an accordion 1`] = ` --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); --colors-subjectCreativeWriting: hsl(33, 100%, 50%); --colors-subjectExamSkills: hsl(256, 93%, 35%); - --colors-glBlueLight: hsl(222, 68%, 78%); - --colors-glBluePrimary: hsl(222, 56%, 55%); - --colors-glBlueDark: hsl(222, 35%, 43%); --space-0: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap index c251d1b3a..e946eb649 100644 --- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap +++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BannerRegular component renders 1`] = ` @media { :root, - .t-kAUxbu { + .t-kgHKNm { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -21,8 +21,8 @@ exports[`BannerRegular component renders 1`] = ` --colors-grey200: hsl(0, 0%, 92%); --colors-grey300: hsl(0, 0%, 88%); --colors-grey400: hsl(0, 0%, 81%); - --colors-grey500: hsl(0, 0%, 73%); - --colors-grey600: hsl(0, 0%, 62%); + --colors-grey500: hsl(0, 0%, 76%); + --colors-grey600: hsl(0, 0%, 71%); --colors-grey700: hsl(0, 0%, 46%); --colors-grey800: hsl(0, 0%, 33%); --colors-grey900: hsl(0, 0%, 20%); @@ -32,126 +32,30 @@ exports[`BannerRegular component renders 1`] = ` --colors-blue100: hsl(215, 100%, 98%); --colors-blue200: hsl(212, 100%, 95%); --colors-blue300: hsl(211, 100%, 92%); - --colors-blue400: hsl(211, 100%, 88%); - --colors-blue500: hsl(212, 100%, 80%); - --colors-blue600: hsl(213, 100%, 71%); - --colors-blue700: hsl(214, 100%, 58%); + --colors-blue400: hsl(212, 100%, 88%); + --colors-blue500: hsl(212, 87%, 84%); + --colors-blue600: hsl(216, 96%, 79%); + --colors-blue700: hsl(214, 92%, 63%); --colors-blue800: hsl(217, 92%, 51%); --colors-blue900: hsl(223, 78%, 44%); --colors-blue1000: hsl(228, 82%, 35%); --colors-blue1100: hsl(228, 63%, 23%); - --colors-blue1200: hsl(227, 57%, 11%); - --colors-purple100: hsl(282, 100%, 98%); + --colors-blue1200: hsl(228, 63%, 20%); + --colors-purple100: hsl(281, 100%, 98%); --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); + --colors-purple300: hsl(270, 100%, 92%); --colors-purple400: hsl(270, 100%, 89%); - --colors-purple500: hsl(270, 90%, 81%); - --colors-purple600: hsl(271, 97%, 69%); - --colors-purple700: hsl(273, 84%, 47%); + --colors-purple500: hsl(270, 87%, 84%); + --colors-purple600: hsl(264, 96%, 79%); + --colors-purple700: hsl(275, 100%, 51%); --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); + --colors-purple900: hsl(268, 78%, 42%); --colors-purple1000: hsl(266, 82%, 32%); --colors-purple1100: hsl(265, 63%, 23%); - --colors-purple1200: hsl(265, 61%, 14%); - --colors-cyan100: hsl(198, 100%, 97%); - --colors-cyan200: hsl(199, 100%, 94%); - --colors-cyan300: hsl(201, 100%, 89%); - --colors-cyan400: hsl(200, 100%, 84%); - --colors-cyan500: hsl(201, 96%, 73%); - --colors-cyan600: hsl(202, 85%, 60%); - --colors-cyan700: hsl(204, 81%, 46%); - --colors-cyan800: hsl(205, 100%, 38%); - --colors-cyan900: hsl(206, 100%, 30%); - --colors-cyan1000: hsl(205, 100%, 21%); - --colors-cyan1100: hsl(206, 97%, 15%); - --colors-cyan1200: hsl(207, 73%, 9%); - --colors-green100: hsl(135, 80%, 96%); - --colors-green200: hsl(135, 72%, 92%); - --colors-green300: hsl(135, 68%, 83%); - --colors-green400: hsl(135, 65%, 76%); - --colors-green500: hsl(136, 56%, 62%); - --colors-green600: hsl(137, 42%, 49%); - --colors-green700: hsl(138, 51%, 35%); - --colors-green800: hsl(138, 68%, 29%); - --colors-green900: hsl(138, 74%, 21%); - --colors-green1000: hsl(138, 89%, 14%); - --colors-green1100: hsl(135, 91%, 9%); - --colors-green1200: hsl(123, 56%, 6%); - --colors-magenta100: hsl(330, 100%, 99%); - --colors-magenta200: hsl(329, 100%, 96%); - --colors-magenta300: hsl(332, 100%, 92%); - --colors-magenta400: hsl(333, 100%, 90%); - --colors-magenta500: hsl(333, 90%, 80%); - --colors-magenta600: hsl(333, 87%, 72%); - --colors-magenta700: hsl(333, 75%, 59%); - --colors-magenta800: hsl(333, 69%, 49%); - --colors-magenta900: hsl(333, 74%, 36%); - --colors-magenta1000: hsl(333, 86%, 25%); - --colors-magenta1100: hsl(333, 95%, 16%); - --colors-magenta1200: hsl(334, 62%, 10%); - --colors-red100: hsl(0, 100%, 99%); - --colors-red200: hsl(0, 100%, 96%); - --colors-red300: hsl(357, 100%, 93%); - --colors-red400: hsl(356, 100%, 90%); - --colors-red500: hsl(356, 96%, 83%); - --colors-red600: hsl(357, 90%, 73%); - --colors-red700: hsl(357, 80%, 59%); - --colors-red800: hsl(357, 76%, 49%); - --colors-red900: hsl(357, 73%, 37%); - --colors-red1000: hsl(357, 79%, 26%); - --colors-red1100: hsl(357, 91%, 17%); - --colors-red1200: hsl(357, 73%, 10%); - --colors-teal100: hsl(180, 83%, 95%); - --colors-teal200: hsl(180, 75%, 88%); - --colors-teal300: hsl(180, 71%, 78%); - --colors-teal400: hsl(179, 70%, 71%); - --colors-teal500: hsl(179, 65%, 52%); - --colors-teal600: hsl(179, 76%, 41%); - --colors-teal700: hsl(179, 91%, 31%); - --colors-teal800: hsl(178, 100%, 25%); - --colors-teal900: hsl(180, 100%, 18%); - --colors-teal1000: hsl(183, 100%, 13%); - --colors-teal1100: hsl(187, 92%, 10%); - --colors-teal1200: hsl(186, 56%, 7%); - --colors-orange100: hsl(38, 100%, 95%); - --colors-orange200: hsl(38, 100%, 90%); - --colors-orange300: hsl(37, 100%, 84%); - --colors-orange400: hsl(36, 96%, 78%); - --colors-orange500: hsl(33, 100%, 67%); - --colors-orange600: hsl(31, 97%, 57%); - --colors-orange700: hsl(30, 92%, 46%); - --colors-orange800: hsl(29, 100%, 43%); - --colors-orange900: hsl(27, 100%, 36%); - --colors-orange1000: hsl(24, 100%, 26%); - --colors-orange1100: hsl(20, 97%, 15%); - --colors-orange1200: hsl(20, 96%, 11%); - --colors-yellow100: hsl(53, 94%, 93%); - --colors-yellow200: hsl(54, 92%, 85%); - --colors-yellow300: hsl(54, 92%, 75%); - --colors-yellow400: hsl(52, 97%, 63%); - --colors-yellow500: hsl(51, 100%, 46%); - --colors-yellow600: hsl(49, 100%, 39%); - --colors-yellow700: hsl(48, 100%, 35%); - --colors-yellow800: hsl(46, 100%, 30%); - --colors-yellow900: hsl(44, 100%, 22%); - --colors-yellow1000: hsl(44, 100%, 18%); - --colors-yellow1100: hsl(41, 100%, 11%); - --colors-yellow1200: hsl(39, 100%, 8%); - --colors-lime100: hsl(73, 94%, 93%); - --colors-lime200: hsl(73, 94%, 87%); - --colors-lime300: hsl(73, 90%, 77%); - --colors-lime400: hsl(74, 82%, 69%); - --colors-lime500: hsl(74, 68%, 58%); - --colors-lime600: hsl(74, 77%, 41%); - --colors-lime700: hsl(75, 100%, 31%); - --colors-lime800: hsl(75, 100%, 27%); - --colors-lime900: hsl(75, 100%, 19%); - --colors-lime1000: hsl(75, 100%, 15%); - --colors-lime1100: hsl(75, 100%, 9%); - --colors-lime1200: hsl(74, 100%, 6%); + --colors-purple1200: hsl(265, 63%, 20%); --colors-tonal50: hsl(0, 0%, 96%); --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal200: hsl(0, 0%, 71%); --colors-tonal300: hsl(0, 0%, 46%); --colors-tonal400: hsl(0, 0%, 33%); --colors-tonal500: hsl(0, 0%, 20%); @@ -194,9 +98,6 @@ exports[`BannerRegular component renders 1`] = ` --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); --colors-subjectCreativeWriting: hsl(33, 100%, 50%); --colors-subjectExamSkills: hsl(256, 93%, 35%); - --colors-glBlueLight: hsl(222, 68%, 78%); - --colors-glBluePrimary: hsl(222, 56%, 55%); - --colors-glBlueDark: hsl(222, 35%, 43%); --space-0: 0.125rem; --space-1: 0.25rem; --space-2: 0.5rem; @@ -428,12 +329,18 @@ exports[`BannerRegular component renders 1`] = ` margin-left: var(--space-2); } - .c-fkUJsw-eYnvrx-size-sm { + .c-fkUJsw-jMTgOB-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; height: var(--sizes-3); padding-left: var(--space-4); padding-right: var(--space-4); + gap: var(--space-2); + } + + .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt { + height: 16px; + width: 16px; } .c-fkUJsw-fGHEql-fullWidth-true { @@ -497,12 +404,20 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-fkUJsw-hnmcil-size-md { + .c-fkUJsw-dbnTtJ-size-md { font-size: var(--fontSizes-md); line-height: 1.5; height: var(--sizes-4); padding-left: var(--space-5); padding-right: var(--space-5); + gap: var(--space-3); + } +} + +@media (min-width: 800px) { + .c-fkUJsw-dbnTtJ-size-md .c-dbrbZt { + height: 20px; + width: 20px; } } @@ -586,13 +501,13 @@ exports[`BannerRegular component renders 1`] = ` class="c-jgdwfn c-jgdwfn-ejCoEP-direction-row c-jgdwfn-XefLA-wrap-wrap c-jgdwfn-awKDG-justify-start c-jgdwfn-jroWjL-align-center c-jgdwfn-dPMagj-gap-2 c-jgdwfn-hAgpth-gap-4" > + + ))} {description && ( {description} diff --git a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap index 7a69e00fe..446ed3112 100644 --- a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap +++ b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap @@ -216,6 +216,8 @@ exports[`FieldWrapper component renders 1`] = ` Example prompt diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap index 408426573..9077ca964 100644 --- a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap +++ b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap @@ -30,12 +30,18 @@ exports[`FileInput component renders 1`] = ` } @media { - .c-fkUJsw-elrwsr-size-md { + .c-fkUJsw-dXsdwv-size-md { font-size: var(--fontSizes-md); line-height: 1.5; height: var(--sizes-4); padding-left: var(--space-5); padding-right: var(--space-5); + gap: var(--space-3); + } + + .c-fkUJsw-dXsdwv-size-md .c-dbrbZt { + height: 20px; + width: 20px; } .c-dbrbZt-dMrjnF-size-md { @@ -68,22 +74,14 @@ exports[`FileInput component renders 1`] = ` } } -@media { - .c-dbrbZt-idQgHjC-css { - margin-right: var(--space-3); - height: 20px; - width: 20px; - } -} -