diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Error.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Error.snap new file mode 100644 index 000000000..417d47bdd --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Error.snap @@ -0,0 +1,282 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #BF1250; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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: #FF4D8D!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 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-6 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-7:hover, +.emotion-7[aria-expanded='true'] { + color: #111530; +} + +.emotion-7:hover path, +.emotion-7[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-7:visited { + color: #5F33AC; +} + +.emotion-7:visited path { + fill: #5F33AC!important; +} + +.emotion-7:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.emotion-8 { + 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-8:hover, +.emotion-8: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-9 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-9 path { + fill: #52567a!important; +} + +
+
+ +
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Informational.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Informational.snap new file mode 100644 index 000000000..fbccc6995 --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Informational.snap @@ -0,0 +1,284 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #5E8DF8; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-6 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-7:hover, +.emotion-7[aria-expanded='true'] { + color: #111530; +} + +.emotion-7:hover path, +.emotion-7[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-7:visited { + color: #5F33AC; +} + +.emotion-7:visited path { + fill: #5F33AC!important; +} + +.emotion-7:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.emotion-8 { + 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-8:hover, +.emotion-8: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-9 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-9 path { + fill: #52567a!important; +} + +
+
+
+ +
+ Broadcast copy should be short, easy to understand and actionable. +
+
+ + + Single Action + + +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Neutral.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Neutral.snap new file mode 100644 index 000000000..0700aae2c --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Neutral.snap @@ -0,0 +1,244 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) 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: 0.125rem; + -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 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +.emotion-4 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-4 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-5:hover, +.emotion-5[aria-expanded='true'] { + color: #111530; +} + +.emotion-5:hover path, +.emotion-5[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-5:visited { + color: #5F33AC; +} + +.emotion-5:visited path { + fill: #5F33AC!important; +} + +.emotion-5:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.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; +} + +
+
+
+
+ Broadcast copy should be short, easy to understand and actionable. +
+
+ + + Single Action + + +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Playground.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Playground.snap new file mode 100644 index 000000000..0700aae2c --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Playground.snap @@ -0,0 +1,244 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) 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: 0.125rem; + -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 { + font-family: Roboto; + font-weight: 400; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; + grid-area: content; + cursor: default; +} + +.emotion-4 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-4 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-5:hover, +.emotion-5[aria-expanded='true'] { + color: #111530; +} + +.emotion-5:hover path, +.emotion-5[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-5:visited { + color: #5F33AC; +} + +.emotion-5:visited path { + fill: #5F33AC!important; +} + +.emotion-5:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.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; +} + +
+
+
+
+ Broadcast copy should be short, easy to understand and actionable. +
+
+ + + Single Action + + +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Success.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Success.snap new file mode 100644 index 000000000..96604a06c --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Success.snap @@ -0,0 +1,282 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #1EBE96; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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: #1EBE96!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 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-6 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-7:hover, +.emotion-7[aria-expanded='true'] { + color: #111530; +} + +.emotion-7:hover path, +.emotion-7[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-7:visited { + color: #5F33AC; +} + +.emotion-7:visited path { + fill: #5F33AC!important; +} + +.emotion-7:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.emotion-8 { + 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-8:hover, +.emotion-8: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-9 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-9 path { + fill: #52567a!important; +} + +
+
+
+ +
+ Broadcast copy should be short, easy to understand and actionable. +
+
+ + + Single Action + + +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-Warning.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-Warning.snap new file mode 100644 index 000000000..1fa12a208 --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-Warning.snap @@ -0,0 +1,284 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #F5A300; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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: #F5A300!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 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-6 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.25rem; + color: #194DCC; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; + opacity: 1; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + pointer-events: default; + font-family: Roboto; + font-weight: 500; + line-height: 1.25rem; + font-size: 0.875rem; + letter-spacing: 0.015625rem; +} + +.emotion-7:hover, +.emotion-7[aria-expanded='true'] { + color: #111530; +} + +.emotion-7:hover path, +.emotion-7[aria-expanded='true'] path { + fill: #111530!important; +} + +.emotion-7:visited { + color: #5F33AC; +} + +.emotion-7:visited path { + fill: #5F33AC!important; +} + +.emotion-7:focus-visible:after { + content: ''; + position: absolute; + inset: -3px -6px; + border-radius: 0.25rem; + border: 0.25rem solid #A566FF; +} + +.emotion-8 { + 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-8:hover, +.emotion-8: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-9 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-9 path { + fill: #52567a!important; +} + +
+
+ +
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-WithButtons.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithButtons.snap new file mode 100644 index 000000000..ffbafddad --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithButtons.snap @@ -0,0 +1,375 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #5E8DF8; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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 { + grid-area: actions; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 1.25rem; +} + +@container (max-width: calc(600px - 1px)) { + .emotion-6 { + margin-left: 0; + margin-top: 0.5rem; + } +} + +.emotion-7 { + position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.emotion-8 { + font-family: Roboto; + font-weight: 500; + line-height: 1rem; + font-size: 0.75rem; + 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: #194DCC; + height: 1.75rem; + background-color: rgba(200,206,255,0); + padding: 0rem 0.5rem 0rem 0.5rem; + border-radius: 0.25rem; + border: none; + cursor: pointer; + -webkit-transition: background-color,border 150ms linear; + transition: background-color,border 150ms linear; +} + +.emotion-8:focus-visible:not(:disabled) { + background-color: rgba(200,206,255,0.20); +} + +.emotion-8:disabled { + opacity: 50%; + cursor: not-allowed; +} + +.emotion-8:hover:not(:disabled) { + background-color: rgba(200,206,255,0.20); +} + +.emotion-8:active:not(:disabled), +.emotion-8[aria-expanded="true"] { + background-color: rgba(200,206,255,0.30); +} + +.emotion-9 { + 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; +} + +.emotion-11 { + font-family: Roboto; + font-weight: 500; + line-height: 1rem; + font-size: 0.75rem; + 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: 1.75rem; + background-color: #175BF5; + padding: 0rem 0.5rem 0rem 0.5rem; + border-radius: 0.25rem; + border: none; + cursor: pointer; + -webkit-transition: background-color,border 150ms linear; + transition: background-color,border 150ms linear; +} + +.emotion-11:focus-visible:not(:disabled) { + background-color: #5E8DF8; +} + +.emotion-11:disabled { + opacity: 50%; + cursor: not-allowed; +} + +.emotion-11:hover:not(:disabled) { + background-color: #5E8DF8; +} + +.emotion-11:active:not(:disabled), +.emotion-11[aria-expanded="true"] { + background-color: #194DCC; +} + +.emotion-13 { + 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-13:hover, +.emotion-13: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-14 { + width: 1.25rem; + height: 1.25rem; +} + +.emotion-14 path { + fill: #52567a!important; +} + +
+
+
+ +
+ Broadcast copy should be short, easy to understand and actionable. +
+
+
+ +
+
+ +
+
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-WithTrigger.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithTrigger.snap new file mode 100644 index 000000000..b77d882c0 --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithTrigger.snap @@ -0,0 +1,108 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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/Notifications/Broadcast-WithoutAction.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithoutAction.snap new file mode 100644 index 000000000..51b5d048e --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithoutAction.snap @@ -0,0 +1,193 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #5E8DF8; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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; +} + +
+
+
+ +
+ Broadcast copy should be short, easy to understand and actionable. +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Broadcast-WithoutDismiss.snap b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithoutDismiss.snap new file mode 100644 index 000000000..cfcd70008 --- /dev/null +++ b/src/__storyshots__/Updated Components/Notifications/Broadcast-WithoutDismiss.snap @@ -0,0 +1,141 @@ +.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; + container-type: inline-size; + gap: 0.5rem; + 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: var(--_border-width) solid #5E8DF8; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: 0.125rem; + -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; +} + +
+
+
+ +
+ Broadcast copy should be short, easy to understand and actionable. +
+
+
+
\ No newline at end of file diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap index 677e6483b..84dbf93a7 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Error.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap index 706a653a4..9ea95da71 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Informational.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap index b43b0fac2..72964a38f 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Neutral.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap index b43b0fac2..72964a38f 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Playground.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap index d893e34a4..b28292adb 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Success.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap index 48f758420..6a3dfa2c6 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-Warning.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithButtons.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithButtons.snap index ae4d4cc94..04ba60c54 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithButtons.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithButtons.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutAction.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutAction.snap index adebbbf0b..90c3660b5 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutAction.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutAction.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutDismiss.snap b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutDismiss.snap index 1fe44b139..ac90e6d11 100644 --- a/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutDismiss.snap +++ b/src/__storyshots__/Updated Components/Notifications/Inline Alert-WithoutDismiss.snap @@ -32,7 +32,7 @@ align-items: center; background: rgba(200,206,255,0.20); border-radius: 0.25rem; - border: 1px solid rgba(200,206,255,0.70); + border: var(--_border-width) solid rgba(200,206,255,0.70); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/components/Broadcast/Broadcast.mdx b/src/components/Broadcast/Broadcast.mdx new file mode 100644 index 000000000..bf0972dad --- /dev/null +++ b/src/components/Broadcast/Broadcast.mdx @@ -0,0 +1,70 @@ +import { Meta, Canvas, ArgTypes, Story, Primary } from '@storybook/blocks'; +import * as BroadcastStories from './Broadcast.stories'; +import { Broadcast } from './Broadcast'; + + + + + +## Overview + +A broadcast is used to make an announcement or provide a notification from an admin to all users within a single instance. + + + +## Props + + + +## Usage + + + The Broadcast component uses CSS Container Queries for responsive design. To enable this feature + wrap the `Broadcast` in a parent element and set the `container-type` CSS property on this parent + element. + + + + + + +### Neutral + + + +### Informational + + + +### Error + + + +### Warning + + + +### Success + + + +### Playground + + diff --git a/src/components/Broadcast/Broadcast.stories.tsx b/src/components/Broadcast/Broadcast.stories.tsx new file mode 100644 index 000000000..8ad10f6d9 --- /dev/null +++ b/src/components/Broadcast/Broadcast.stories.tsx @@ -0,0 +1,128 @@ +import styled from '@emotion/styled'; +import type { Meta, StoryObj } from '@storybook/react'; +import Button from '../Button'; +import Link from '../Link'; +import { Broadcast } from './Broadcast'; +import { useState } from 'react'; + +const Container = styled.div` + display: inline-flex; + flex-direction: column; + container-type: inline-size; + gap: ${({ theme }) => theme.dimension.spacing.get('sm')}; + width: 100%; +`; + +const meta: Meta = { + title: 'Updated Components/Notifications/Broadcast', + component: Broadcast, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Neutral: Story = { + render: (args) => ( + Single Action} onDismiss={() => {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const Informational: Story = { + render: (args) => ( + Single Action} + onDismiss={() => {}} + {...args} + > + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const Error: Story = { + render: (args) => ( + Single Action} onDismiss={() => {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const Warning: Story = { + render: (args) => ( + Single Action} onDismiss={() => {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const Success: Story = { + render: (args) => ( + Single Action} onDismiss={() => {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const WithButtons: Story = { + render: (args) => ( + Tertiary, ]} + onDismiss={() => {}} + {...args} + > + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const WithoutAction: Story = { + render: (args) => ( + {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const WithoutDismiss: Story = { + render: (args) => ( + + Broadcast copy should be short, easy to understand and actionable. + + ), +}; + +export const WithTrigger: Story = { + render: (args) => { + const [show, setShow] = useState(false); + + return ( + <> + + {show && ( + setShow(false)} hasAutoFocus {...args}> + Broadcast copy should be short, easy to understand and actionable. + + )} + + ); + }, +}; + +export const Playground: Story = { + render: (args) => ( + Single Action} onDismiss={() => {}} {...args}> + Broadcast copy should be short, easy to understand and actionable. + + ), +}; diff --git a/src/components/Broadcast/Broadcast.style.ts b/src/components/Broadcast/Broadcast.style.ts new file mode 100644 index 000000000..39000be50 --- /dev/null +++ b/src/components/Broadcast/Broadcast.style.ts @@ -0,0 +1,137 @@ +import { css } from '@emotion/react'; +import { rem } from 'polished'; +import type { Theme } from 'theme'; + +import type { BroadcastProps } from './Broadcast.types'; +import { generateStylesFromTokens } from '../Typography/utils'; + +const broadcastStyles = (props: BroadcastProps) => (theme: Theme) => + css` + --_border-width: ${theme.dimension.borderWidth.get('default')}; + --_outline-width: ${theme.dimension.borderWidth.get('focused')}; + --_min-height: ${rem(44)}; + --_min-content-width: ${rem(100)}; + + box-sizing: border-box; + position: relative; + isolation: isolate; + padding: calc(${theme.dimension.spacing.get('md')} - var(--_border-width)) + calc(${theme.dimension.spacing.get('md')} - var(--_border-width)); + display: inline-grid; + grid-template-columns: auto minmax(var(--_min-content-width), 1fr) auto; + grid-template-areas: 'icon content actions close'; + align-items: center; + background: ${theme.tokens.colors.get('palette.secondary.muted')}; + border-radius: ${theme.dimension.borderRadius.get('md')}; + border: var(--_border-width) solid ${getBorderColor(props.status, theme)}; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-family: sans-serif; + min-height: var(--_min-height); + outline: none; + outline-offset: ${rem(2)}; + transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1); + + &:focus-visible { + outline-offset: 0; + outline: var(--_outline-width) solid + ${theme.tokens.colors.get('borderColor.interactive.focused')}; + } + + &:has([data-slot='button']) { + padding: calc(${theme.dimension.spacing.get('sm')} - var(--_border-width)) + calc(${theme.dimension.spacing.get('md')} - var(--_border-width)); + } + + /* Since we match desktop first, below 600px should become 599px */ + @container (max-width: calc(600px - 1px)) { + grid-template-areas: + 'icon content close' + 'icon actions close'; + align-items: flex-start; + + &:has([data-slot='button']) { + padding: calc(${theme.dimension.spacing.get('md')} - var(--_border-width)) + calc(${theme.dimension.spacing.get('md')} - var(--_border-width)); + } + } + + @media (prefers-reduced-motion) { + transition: none; + } + `; + +const iconStyles = () => (theme: Theme) => + css` + grid-area: icon; + margin-right: ${theme.dimension.spacing.get('md')}; + pointer-events: none; + `; + +const contentStyles = () => (theme: Theme) => + css` + ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))}; + + grid-area: content; + cursor: default; + `; + +const actionsStyles = () => (theme: Theme) => + css` + grid-area: actions; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + gap: ${theme.dimension.spacing.get('sm')}; + margin-left: ${theme.globals.spacing.get('7')}; + + @container (max-width: calc(600px - 1px)) { + margin-left: 0; + margin-top: ${theme.dimension.spacing.get('sm')}; + } + `; + +const dismissStyles = () => (theme: Theme) => + css` + grid-area: close; + justify-self: end; + margin-left: ${theme.dimension.spacing.get('lg')}; + `; + +const getBorderColor = (status: BroadcastProps['status'], theme: Theme) => { + switch (status) { + case 'informational': + return theme.tokens.colors.get('indicators.brand'); + case 'error': + return theme.tokens.colors.get('textColor.default.error'); + case 'warning': + return theme.tokens.colors.get('indicators.warning'); + case 'success': + return theme.tokens.colors.get('indicators.success'); + default: + return theme.tokens.colors.get('borderColor.decorative.default'); + } +}; + +export const getIconColor = (status: BroadcastProps['status'], theme: Theme) => { + switch (status) { + case 'informational': + return theme.tokens.colors.get('indicators.brand'); + case 'error': + return theme.tokens.colors.get('indicators.error'); + case 'warning': + return theme.tokens.colors.get('indicators.warning'); + case 'success': + return theme.tokens.colors.get('indicators.success'); + default: + return theme.tokens.colors.get('indicators.brand'); + } +}; + +export const styles = { + broadcast: broadcastStyles, + icon: iconStyles, + content: contentStyles, + actions: actionsStyles, + dismiss: dismissStyles, +}; diff --git a/src/components/Broadcast/Broadcast.tsx b/src/components/Broadcast/Broadcast.tsx new file mode 100644 index 000000000..32d75dfaf --- /dev/null +++ b/src/components/Broadcast/Broadcast.tsx @@ -0,0 +1,92 @@ +import React, { forwardRef, useEffect, useRef } from 'react'; +import type { ReactElement, RefObject } from 'react'; +import { useId } from 'react-aria'; + +import { getIconColor, styles } from './Broadcast.style'; +import type { BroadcastProps } from './Broadcast.types'; +import Icon from '../Icon'; +import { SlotProvider } from '../utils/Slots'; +import { useDOMRef } from '../utils/useDOMRef'; + +import useTheme from '~/hooks/useTheme'; + +export const Broadcast = forwardRef( + (props: BroadcastProps, ref: RefObject) => { + const { + status = 'neutral', + actions, + children, + onDismiss, + dataTestPrefixId = '', + hasAutoFocus, + ...otherProps + } = props; + const theme = useTheme(); + const dismissId = useId(); + const domRef = useDOMRef(ref); + + const actionElements = + actions && (actions as ReactElement).type === React.Fragment + ? (actions as ReactElement).props.children + : actions; + const actionsArray = React.Children.toArray(actionElements); + + const autoFocusRef = useRef(hasAutoFocus); + useEffect(() => { + if (autoFocusRef.current && domRef.current) { + domRef.current.focus(); + } + autoFocusRef.current = false; + }, [domRef]); + + return ( +
+ {status !== 'neutral' ? ( +
+ ); + } +); + +Broadcast.displayName = 'Broadcast'; diff --git a/src/components/Broadcast/Broadcast.types.ts b/src/components/Broadcast/Broadcast.types.ts new file mode 100644 index 000000000..5f5fa5b8b --- /dev/null +++ b/src/components/Broadcast/Broadcast.types.ts @@ -0,0 +1,43 @@ +import type { ReactElement, ReactNode } from 'react'; + +import type { TestProps } from '~/utils/types'; + +/** + * Represents the possible status values for a broadcast. + */ +export type BroadcastStatus = 'neutral' | 'informational' | 'error' | 'warning' | 'success'; + +export interface BroadcastProps extends TestProps { + /** + * The status of the broadcast. + * @default 'neutral' + */ + status?: BroadcastStatus; + /** + * The actions to be rendered within the broadcast. + * Can be a single ReactElement or an array of ReactElements. + * @example + * actions={[ + * , + * + * ]} + */ + actions?: ReactElement | ReactElement[]; + /** + * Callback function for the dismiss button. + * If not provided, the dismiss button will not be rendered. + */ + onDismiss?(): void; + /** + * The main content of the broadcast. + */ + children: ReactNode; + /** + * Whether the broadcast should receive focus automatically when rendered. + * Useful for scenarios where the broadcast is triggered programmatically. + * @default false + */ + hasAutoFocus?: boolean; + /** Optional css class */ + className?: string; +} diff --git a/src/components/Broadcast/index.ts b/src/components/Broadcast/index.ts new file mode 100644 index 000000000..efd1a1e21 --- /dev/null +++ b/src/components/Broadcast/index.ts @@ -0,0 +1 @@ +export { Broadcast } from './Broadcast'; diff --git a/src/components/Broadcast/tests/Broadcast.test.tsx b/src/components/Broadcast/tests/Broadcast.test.tsx new file mode 100644 index 000000000..aee3718fd --- /dev/null +++ b/src/components/Broadcast/tests/Broadcast.test.tsx @@ -0,0 +1,65 @@ +import { fireEvent, render, screen } from '~/test'; +import { Broadcast } from '../Broadcast'; +import Link from '~/components/Link'; +import Button from '~/components/Button'; +import { createRef } from 'react'; + +describe('', () => { + it('renders with default props', () => { + render(Default); + + expect(screen.getByText('Default')).toBeInTheDocument(); + expect(screen.getByRole('status')).toBeInTheDocument(); + }); + + it('applies correct ARIA attributes', () => { + render( + {}}> + ARIA test + + ); + + const alert = screen.getByRole('alert'); + + expect(alert).toHaveAttribute('role', 'alert'); + expect(alert).toHaveAttribute('aria-describedby'); + }); + + it('forwards ref correctly', () => { + const ref = createRef(); + + render(Ref test); + + expect(ref.current).toBeInstanceOf(HTMLDivElement); + }); + + describe('actions', () => { + it('renders with link', () => { + render(Single Action}>With actions); + + expect(screen.getByText('Single Action')).toBeInTheDocument(); + }); + + it('renders with buttons', () => { + render( + Button 1, ]}> + With actions + + ); + + expect(screen.getByText('Button 1')).toBeInTheDocument(); + expect(screen.getByText('Button 2')).toBeInTheDocument(); + }); + }); + + describe('onDismiss', () => { + it('calls onDismiss when close icon is clicked', () => { + const onDismiss = vi.fn(); + render(With dismiss); + + const closeButton = screen.getByRole('button', { name: 'Dismiss notification' }); + fireEvent.click(closeButton); + expect(onDismiss).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/src/components/InlineAlert/InlineAlert.style.ts b/src/components/InlineAlert/InlineAlert.style.ts index 2463a8b24..0da04dec4 100644 --- a/src/components/InlineAlert/InlineAlert.style.ts +++ b/src/components/InlineAlert/InlineAlert.style.ts @@ -25,7 +25,7 @@ const inlineAlertStyles = (props: InlineAlertProps) => (theme: Theme) => ? theme.tokens.colors.get('backgroundColor.default') : theme.tokens.colors.get('palette.secondary.muted')}; border-radius: ${theme.dimension.borderRadius.get('md')}; - border: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')}; + border: var(--_border-width) solid ${theme.tokens.colors.get('borderColor.decorative.default')}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; diff --git a/src/components/Notification/Banner/Banner.tsx b/src/components/Notification/Banner/Banner.tsx index 2f170ba2d..511773e41 100644 --- a/src/components/Notification/Banner/Banner.tsx +++ b/src/components/Notification/Banner/Banner.tsx @@ -8,6 +8,9 @@ import type { } from '../Notification'; import CompactNotification from '../subcomponents/CompactNotification'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports +import type { Broadcast } from '~/components/Broadcast'; + export type BannerProps = { /** Show notification icon based on the type */ hasIcon?: boolean; @@ -25,6 +28,11 @@ export type BannerProps = { dataTestId?: TestId; } & Pick; +/** + * + * @deprecated {@link Banner} has been deprecated; use {@link Broadcast} instead. + * + */ const Banner: React.FCC = ({ hasIcon = false, title, diff --git a/src/components/Notification/Notification.mdx b/src/components/Notification/Notification.mdx index 353a062dd..86d7389f8 100644 --- a/src/components/Notification/Notification.mdx +++ b/src/components/Notification/Notification.mdx @@ -63,6 +63,15 @@ import { InlineNotification } from '@orfium/ictinus'; ## Banner Notification + + ### Props diff --git a/src/index.ts b/src/index.ts index c1b1881aa..9e2e5b961 100644 --- a/src/index.ts +++ b/src/index.ts @@ -77,6 +77,7 @@ export * from './components/Notification/Snackbar'; export * from './components/Notification/Notification'; export { InlineAlert } from './components/InlineAlert'; +export { Broadcast } from './components/Broadcast'; export { default as Drawer } from './components/Drawer'; export * from './components/Drawer';