diff --git a/.eslintignore b/.eslintignore index cb06a6eae..58c9aadf5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,4 +13,4 @@ __mocks__ ./vite.config.ts ./vite.codemods.config.ts ./rollup.config.js -!.storybook +.storybook diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 2ec36e725..34834501c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -13,6 +13,7 @@ import { Tip, Note, Preview, + Alert, } from '../src/storybook'; import { TypographyResetFontSmooth, @@ -241,6 +242,7 @@ const preview: SBPreview = { Preview, SubsectionHeader, SectionHeader, + Alert, }, }, }, diff --git a/package.json b/package.json index 368b6aac4..14cc223d5 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,7 @@ "history": "^4.10.1", "husky": "^6.0.0", "identity-obj-proxy": "^3.0.0", - "jsdom": "^22.1.0", + "jsdom": "^25.0.0", "lint-staged": "^11.0.0", "prettier": "^2.6.2", "react": "^18.2.0", diff --git a/src/__storyshots__/Original Components/Modal-Modal.snap b/src/__storyshots__/Original Components/Modal-Modal.snap index 7629ab6aa..af2866ab9 100644 --- a/src/__storyshots__/Original Components/Modal-Modal.snap +++ b/src/__storyshots__/Original Components/Modal-Modal.snap @@ -112,6 +112,7 @@ > + +
+ +
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Inline Alert-WithTrigger.snap b/src/__storyshots__/Updated Components/Inline Alert-WithTrigger.snap new file mode 100644 index 000000000..2163f00d7 --- /dev/null +++ b/src/__storyshots__/Updated Components/Inline Alert-WithTrigger.snap @@ -0,0 +1,111 @@ +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 8px; + container-type: inline-size; + width: 100%; +} + +.emotion-2 { + position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.emotion-3 { + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + color: #ffffff; + height: 2.25rem; + background-color: #175BF5; + padding: 0rem 1rem 0rem 1rem; + border-radius: 0.25rem; + border: none; + cursor: pointer; + -webkit-transition: background-color,border 150ms linear; + transition: background-color,border 150ms linear; +} + +.emotion-3:focus-visible:not(:disabled) { + background-color: #5E8DF8; +} + +.emotion-3:disabled { + opacity: 50%; + cursor: not-allowed; +} + +.emotion-3:hover:not(:disabled) { + background-color: #5E8DF8; +} + +.emotion-3:active:not(:disabled), +.emotion-3[aria-expanded="true"] { + background-color: #194DCC; +} + +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + gap: 0.5rem; +} + +
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap b/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap new file mode 100644 index 000000000..061ec3bbf --- /dev/null +++ b/src/__storyshots__/Updated Components/Inline Alert-WithoutAction.snap @@ -0,0 +1,195 @@ +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 8px; + container-type: inline-size; + width: 100%; +} + +.emotion-2 { + --_border-width: 0.0625rem; + --_outline-width: 0.25rem; + --_min-height: 2.75rem; + --_min-content-width: 6.25rem; + box-sizing: border-box; + position: relative; + isolation: isolate; + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + display: inline-grid; + grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto; + grid-template-areas: 'icon content actions close'; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(200,206,255,0.20); + border-radius: 0.25rem; + border: 1px solid rgba(200,206,255,0.70); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 2px; + -webkit-transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); + transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.emotion-2:focus-visible { + outline-offset: 0; + outline: var(--_outline-width) solid #A566FF; +} + +.emotion-2:has([data-slot='button']) { + padding: calc(0.5rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); +} + +@container (max-width: calc(600px - 1px)) { + .emotion-2 { + grid-template-areas: 'icon content close' 'icon actions close'; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + } + + .emotion-2:has([data-slot='button']) { + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + } +} + +@media (prefers-reduced-motion) { + .emotion-2 { + -webkit-transition: none; + transition: none; + } +} + +.emotion-3 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-area: icon; + margin-right: 0.75rem; + pointer-events: none; +} + +.emotion-4 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-4 path { + fill: #5E8DF8!important; +} + +.emotion-5 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +.emotion-6 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + grid-area: close; + justify-self: end; + margin-left: 1rem; +} + +.emotion-6:hover, +.emotion-6:focus-visible { + -webkit-transition: all 0.2s; + transition: all 0.2s; + border-radius: 100%; + background: rgba(200,206,255,0.20); + box-shadow: 0px 0px 0px 8px rgba(200,206,255,0.20); +} + +.emotion-7 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-7 path { + fill: #52567a!important; +} + +
+
+
+ +
+ Alert copy should be short, easy to understand and actionable. +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap b/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap new file mode 100644 index 000000000..305c5600a --- /dev/null +++ b/src/__storyshots__/Updated Components/Inline Alert-WithoutDismiss.snap @@ -0,0 +1,144 @@ +.emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 8px; + container-type: inline-size; + width: 100%; +} + +.emotion-2 { + --_border-width: 0.0625rem; + --_outline-width: 0.25rem; + --_min-height: 2.75rem; + --_min-content-width: 6.25rem; + box-sizing: border-box; + position: relative; + isolation: isolate; + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + display: inline-grid; + grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto; + grid-template-areas: 'icon content actions close'; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: rgba(200,206,255,0.20); + border-radius: 0.25rem; + border: 1px solid rgba(200,206,255,0.70); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 2px; + -webkit-transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); + transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.emotion-2:focus-visible { + outline-offset: 0; + outline: var(--_outline-width) solid #A566FF; +} + +.emotion-2:has([data-slot='button']) { + padding: calc(0.5rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); +} + +@container (max-width: calc(600px - 1px)) { + .emotion-2 { + grid-template-areas: 'icon content close' 'icon actions close'; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + } + + .emotion-2:has([data-slot='button']) { + padding: calc(0.75rem - var(--_border-width)) calc(0.75rem - var(--_border-width)); + } +} + +@media (prefers-reduced-motion) { + .emotion-2 { + -webkit-transition: none; + transition: none; + } +} + +.emotion-3 { + width: 1.25rem; + height: 1.25rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-area: icon; + margin-right: 0.75rem; + pointer-events: none; +} + +.emotion-4 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-4 path { + fill: #5E8DF8!important; +} + +.emotion-5 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +
+
+
+ +
+ Alert copy should be short, easy to understand and actionable. +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/List/List-GroupList.snap b/src/__storyshots__/Updated Components/List/List-GroupList.snap index fdbfcea34..ca40810ae 100644 --- a/src/__storyshots__/Updated Components/List/List-GroupList.snap +++ b/src/__storyshots__/Updated Components/List/List-GroupList.snap @@ -140,9 +140,9 @@ style="height: 100%;" >