diff --git a/.changeset/shaggy-kids-rest.md b/.changeset/shaggy-kids-rest.md new file mode 100644 index 00000000000..b3aca5af97b --- /dev/null +++ b/.changeset/shaggy-kids-rest.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add support for experimental Banner component diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-colorblind-linux.png new file mode 100644 index 00000000000..4d4fa2d7828 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-dimmed-linux.png new file mode 100644 index 00000000000..c4782861e9e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-high-contrast-linux.png new file mode 100644 index 00000000000..bb526c1706a Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-linux.png new file mode 100644 index 00000000000..253373c5b3b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-tritanopia-linux.png new file mode 100644 index 00000000000..253373c5b3b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-colorblind-linux.png new file mode 100644 index 00000000000..c50b3ae7413 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-high-contrast-linux.png new file mode 100644 index 00000000000..cce3c8743d5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-linux.png new file mode 100644 index 00000000000..8496d2688ae Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-tritanopia-linux.png new file mode 100644 index 00000000000..8496d2688ae Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..7bf4ecd9ea8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..012940320e6 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..ec347457550 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-linux.png new file mode 100644 index 00000000000..7bf4ecd9ea8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..7bf4ecd9ea8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..01daba98a07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..c1f237d655b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-linux.png new file mode 100644 index 00000000000..01daba98a07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..01daba98a07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..5223bc7222b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..7cc8a943f6e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Default-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-colorblind-linux.png new file mode 100644 index 00000000000..003f5982348 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-dimmed-linux.png new file mode 100644 index 00000000000..b9dc0837dc5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6945125b554 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-linux.png new file mode 100644 index 00000000000..003f5982348 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-tritanopia-linux.png new file mode 100644 index 00000000000..003f5982348 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-colorblind-linux.png new file mode 100644 index 00000000000..2cf37a6ff0b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-high-contrast-linux.png new file mode 100644 index 00000000000..3e05533dced Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-linux.png new file mode 100644 index 00000000000..2cf37a6ff0b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-tritanopia-linux.png new file mode 100644 index 00000000000..2cf37a6ff0b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-With-Actions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-colorblind-linux.png new file mode 100644 index 00000000000..e909935fa96 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-dimmed-linux.png new file mode 100644 index 00000000000..2f33b0ccdfa Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-high-contrast-linux.png new file mode 100644 index 00000000000..3b6f10fb582 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-linux.png new file mode 100644 index 00000000000..e909935fa96 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e909935fa96 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-colorblind-linux.png new file mode 100644 index 00000000000..f333cef4a0e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-high-contrast-linux.png new file mode 100644 index 00000000000..2ece32d3d17 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-linux.png new file mode 100644 index 00000000000..f333cef4a0e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-tritanopia-linux.png new file mode 100644 index 00000000000..f333cef4a0e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Dismiss-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png new file mode 100644 index 00000000000..5448f98ae43 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-dimmed-linux.png new file mode 100644 index 00000000000..7dff548499f Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b78787db409 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png new file mode 100644 index 00000000000..5448f98ae43 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5448f98ae43 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png new file mode 100644 index 00000000000..5fa20361483 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png new file mode 100644 index 00000000000..dd0869af7d7 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png new file mode 100644 index 00000000000..5fa20361483 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png new file mode 100644 index 00000000000..5fa20361483 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-InSidebar-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-colorblind-linux.png new file mode 100644 index 00000000000..ebfb56d2dcb Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-dimmed-linux.png new file mode 100644 index 00000000000..cff16a6f78d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-high-contrast-linux.png new file mode 100644 index 00000000000..146586d4d20 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-linux.png new file mode 100644 index 00000000000..ebfb56d2dcb Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ebfb56d2dcb Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-colorblind-linux.png new file mode 100644 index 00000000000..6a53ec3c25e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-high-contrast-linux.png new file mode 100644 index 00000000000..1961d68af55 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-linux.png new file mode 100644 index 00000000000..6a53ec3c25e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-tritanopia-linux.png new file mode 100644 index 00000000000..6a53ec3c25e Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Info-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-colorblind-linux.png new file mode 100644 index 00000000000..3bc44cf0660 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-dimmed-linux.png new file mode 100644 index 00000000000..938c2c4cc5a Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-high-contrast-linux.png new file mode 100644 index 00000000000..2b6940b42be Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-linux.png new file mode 100644 index 00000000000..3bc44cf0660 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3bc44cf0660 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-colorblind-linux.png new file mode 100644 index 00000000000..99ab9c711a8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-high-contrast-linux.png new file mode 100644 index 00000000000..cc64bfd210b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-linux.png new file mode 100644 index 00000000000..99ab9c711a8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-tritanopia-linux.png new file mode 100644 index 00000000000..99ab9c711a8 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..edd75ca83c9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..60b0c8685aa Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Multiline-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-colorblind-linux.png new file mode 100644 index 00000000000..ab9b4dbf30b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-dimmed-linux.png new file mode 100644 index 00000000000..0b9c5e5ff05 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-high-contrast-linux.png new file mode 100644 index 00000000000..8406280543f Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-linux.png new file mode 100644 index 00000000000..facfe856d2c Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ab9b4dbf30b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-colorblind-linux.png new file mode 100644 index 00000000000..06fece3fffa Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-high-contrast-linux.png new file mode 100644 index 00000000000..de6dfd8515b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-linux.png new file mode 100644 index 00000000000..bcd242ad2eb Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-tritanopia-linux.png new file mode 100644 index 00000000000..06fece3fffa Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Success-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-colorblind-linux.png new file mode 100644 index 00000000000..ea2e3e19a45 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-dimmed-linux.png new file mode 100644 index 00000000000..ed658030847 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b16aa169289 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-linux.png new file mode 100644 index 00000000000..ea2e3e19a45 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ea2e3e19a45 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-colorblind-linux.png new file mode 100644 index 00000000000..34a773b4620 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-high-contrast-linux.png new file mode 100644 index 00000000000..55f8fe66b45 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-linux.png new file mode 100644 index 00000000000..34a773b4620 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-tritanopia-linux.png new file mode 100644 index 00000000000..34a773b4620 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Upsell-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-colorblind-linux.png new file mode 100644 index 00000000000..9f586311fc9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-dimmed-linux.png new file mode 100644 index 00000000000..9348779d496 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-high-contrast-linux.png new file mode 100644 index 00000000000..56006c4bb4c Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-linux.png new file mode 100644 index 00000000000..9f586311fc9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-tritanopia-linux.png new file mode 100644 index 00000000000..9f586311fc9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-colorblind-linux.png new file mode 100644 index 00000000000..27e6878f1cc Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-high-contrast-linux.png new file mode 100644 index 00000000000..687e5688d98 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-linux.png new file mode 100644 index 00000000000..27e6878f1cc Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-tritanopia-linux.png new file mode 100644 index 00000000000..27e6878f1cc Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Warning-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png new file mode 100644 index 00000000000..f6132e91cf5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png new file mode 100644 index 00000000000..aede6a9c848 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b0fc30e0692 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png new file mode 100644 index 00000000000..f6132e91cf5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png new file mode 100644 index 00000000000..f6132e91cf5 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png new file mode 100644 index 00000000000..984e86bb0e0 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png new file mode 100644 index 00000000000..9aae712f8e9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png new file mode 100644 index 00000000000..984e86bb0e0 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png new file mode 100644 index 00000000000..984e86bb0e0 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..6df9a141014 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..827176af975 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithActions-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-colorblind-linux.png new file mode 100644 index 00000000000..93e7d3e91e7 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-dimmed-linux.png new file mode 100644 index 00000000000..15a3a0bce50 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7ad08f712fe Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-linux.png new file mode 100644 index 00000000000..93e7d3e91e7 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-tritanopia-linux.png new file mode 100644 index 00000000000..93e7d3e91e7 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-colorblind-linux.png new file mode 100644 index 00000000000..3546bfdda07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-high-contrast-linux.png new file mode 100644 index 00000000000..89bfd3272a9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-linux.png new file mode 100644 index 00000000000..3546bfdda07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-tritanopia-linux.png new file mode 100644 index 00000000000..3546bfdda07 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitle-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png new file mode 100644 index 00000000000..24cde7526d4 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png new file mode 100644 index 00000000000..dd12029d5cd Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6254a40654b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png new file mode 100644 index 00000000000..24cde7526d4 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png new file mode 100644 index 00000000000..24cde7526d4 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png new file mode 100644 index 00000000000..0e85d1a597d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png new file mode 100644 index 00000000000..d7351303fd9 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png new file mode 100644 index 00000000000..0e85d1a597d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png new file mode 100644 index 00000000000..0e85d1a597d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png new file mode 100644 index 00000000000..b094a91a8dc Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png new file mode 100644 index 00000000000..305b2b3bced Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithHiddenTitleAndActions-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-colorblind-linux.png new file mode 100644 index 00000000000..fd499471585 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-dimmed-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-dimmed-linux.png new file mode 100644 index 00000000000..3d89d1ac631 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-high-contrast-linux.png new file mode 100644 index 00000000000..e81757a871b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-linux.png new file mode 100644 index 00000000000..ef55f42883b Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fd499471585 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-colorblind-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-colorblind-linux.png new file mode 100644 index 00000000000..2583f189a2d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-high-contrast-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-high-contrast-linux.png new file mode 100644 index 00000000000..9bf990d0dab Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-linux.png new file mode 100644 index 00000000000..570d67edbf4 Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-linux.png differ diff --git a/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-tritanopia-linux.png b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-tritanopia-linux.png new file mode 100644 index 00000000000..2583f189a2d Binary files /dev/null and b/.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-WithTitle-light-tritanopia-linux.png differ diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts new file mode 100644 index 00000000000..8182e8fe20f --- /dev/null +++ b/e2e/components/Banner.test.ts @@ -0,0 +1,112 @@ +import {test, expect} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' +import {viewports} from '../test-helpers/viewports' + +const stories: Array<{title: string; id: string; viewports?: Array}> = [ + { + title: 'Default', + id: 'drafts-components-banner--default', + viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'], + }, + { + title: 'Critical', + id: 'drafts-components-banner-features--critical', + }, + { + title: 'Dismiss', + id: 'drafts-components-banner-features--dismiss', + }, + { + title: 'Dismiss With Actions', + id: 'drafts-components-banner-features--dismiss-with-actions', + }, + { + title: 'Info', + id: 'drafts-components-banner-features--info', + }, + { + title: 'Success', + id: 'drafts-components-banner-features--success', + }, + { + title: 'Upsell', + id: 'drafts-components-banner-features--upsell', + }, + { + title: 'Warning', + id: 'drafts-components-banner-features--warning', + }, + { + title: 'WithActions', + id: 'drafts-components-banner-features--with-actions', + viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'], + }, + { + title: 'WithHiddenTitle', + id: 'drafts-components-banner-features--with-hidden-title', + }, + { + title: 'WithHiddenTitleAndActions', + id: 'drafts-components-banner-features--with-hidden-title-and-actions', + viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'], + }, + { + title: 'InSidebar', + id: 'drafts-components-banner-examples--in-sidebar', + }, + { + title: 'Multiline', + id: 'drafts-components-banner-examples--multiline', + viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'], + }, +] + +test.describe('Banner', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + + if (story.viewports) { + for (const name of story.viewports) { + test(`${name} @vrt`, async ({page}) => { + await visit(page, { + id: story.id, + }) + const width = viewports[name] + + await page.setViewportSize({ + width, + height: 667, + }) + expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${name}.png`) + }) + } + } + }) + } +}) diff --git a/e2e/test-helpers/viewports.ts b/e2e/test-helpers/viewports.ts index 172011f9906..a73f6c54465 100644 --- a/e2e/test-helpers/viewports.ts +++ b/e2e/test-helpers/viewports.ts @@ -1,8 +1,8 @@ // TODO: Import PrimerBreakpoints from src/utils/layout/breakpoints.ts and refactor the usage of this object -export const viewports: {[key: string]: number} = { +export const viewports = { 'primer.breakpoint.xs': 544, 'primer.breakpoint.sm': 768, 'primer.breakpoint.md': 1012, 'primer.breakpoint.lg': 1280, 'primer.breakpoint.xl': 1400, -} +} as const diff --git a/packages/react/src/Banner/Banner.docs.json b/packages/react/src/Banner/Banner.docs.json new file mode 100644 index 00000000000..a12ab01b984 --- /dev/null +++ b/packages/react/src/Banner/Banner.docs.json @@ -0,0 +1,68 @@ +{ + "id": "banner", + "name": "Banner", + "status": "alpha", + "a11yReviewed": false, + "importPath": "@primer/react/experimental", + "stories": [], + "props": [ + { + "name": "description", + "type": "React.ReactNode", + "description": "Provide an optional description for the Banner. This should provide supplemental information about the Banner" + }, + { + "name": "icon", + "type": "React.ReactNode", + "description": "Provide an icon for the banner" + }, + { + "name": "onDismiss", + "type": "() => void", + "description": "Optionally provide a handler to be called when the banner is dismissed. Providing this prop will show a dismiss button" + }, + { + "name": "primaryAction", + "type": "React.ReactNode", + "description": "" + }, + { + "name": "secondaryAction", + "type": "React.ReactNode", + "description": "" + }, + { + "name": "title", + "type": "React.ReactNode", + "description": "The title for the Banner. This will be used as the accessible name and is required unless `Banner.Title` is used as a child" + }, + { + "name": "variant", + "type": "'critical' | 'info' | 'success' | 'upsell' | 'warning'", + "description": "" + } + ], + "subcomponents": [ + { + "name": "Banner.Title", + "props": [ + { + "name": "as", + "type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" + } + ] + }, + { + "name": "Banner.Description", + "props": [] + }, + { + "name": "Banner.PrimaryAction", + "props": [] + }, + { + "name": "Banner.SecondaryAction", + "props": [] + } + ] +} diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx new file mode 100644 index 00000000000..fc4ecedb586 --- /dev/null +++ b/packages/react/src/Banner/Banner.examples.stories.tsx @@ -0,0 +1,152 @@ +import {Banner} from '../Banner' +import {action} from '@storybook/addon-actions' +import Link from '../Link' +import type {Meta} from '@storybook/react' +import {Status} from '../internal/components/Status' +import {Alert} from '../internal/components/Alert' +import FormControl from '../FormControl' +import RadioGroup from '../RadioGroup' +import Radio from '../Radio' +import {Button} from '../Button' +import React from 'react' +import {useFocus} from '../internal/hooks/useFocus' +import {PageLayout} from '../PageLayout' + +const meta = { + title: 'Drafts/Components/Banner/Examples', + component: Banner, +} satisfies Meta + +export default meta + +export const WithUserAction = () => { + const [hasError, setHasError] = React.useState(false) + const bannerRef = React.useRef>(null) + const focus = useFocus() + + return ( + <> + {hasError ? ( + Something went wrong. Please try again later.} + variant="critical" + /> + ) : null} + + + ) +} + +export const WithDynamicContent = () => { + type Choice = 'one' | 'two' | 'three' + const messages: Map = new Map([ + ['one', 'This is a message for choice one'], + ['two', 'This is a message for choice two'], + ['three', 'This is a message for choice three'], + ]) + const [selected, setSelected] = React.useState('one') + + return ( + <> + {messages.get(selected)}} + onDismiss={action('onDismiss')} + primaryAction={Button} + secondaryAction={Button} + /> + { + setSelected(selected as Choice) + }} + > + Choices + + + Choice one + + + + Choice two + + + + Choice three + + + + ) +} + +export const WithCustomHeading = () => { + return ( + Button} + secondaryAction={Button} + > + Info + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + + ) +} + +export const InSidebar = () => { + return ( + <> + + PageLayout Header + +

PageLayout Pane

+ + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + primaryAction={Button} + secondaryAction={Button} + /> + + +

PageLayout Content

+ + + + ) +} + +export const Multiline = () => { + return ( + Button} + secondaryAction={Button} + /> + ) +} diff --git a/packages/react/src/Banner/Banner.features.stories.tsx b/packages/react/src/Banner/Banner.features.stories.tsx new file mode 100644 index 00000000000..3c3bbe243fa --- /dev/null +++ b/packages/react/src/Banner/Banner.features.stories.tsx @@ -0,0 +1,204 @@ +import React from 'react' +import {action} from '@storybook/addon-actions' +import type {Meta} from '@storybook/react' +import {Banner} from '../Banner' +import Link from '../Link' + +const meta = { + title: 'Drafts/Components/Banner/Features', + component: Banner, +} satisfies Meta + +export default meta + +export const Critical = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + variant="critical" + /> + ) +} + +export const Info = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + variant="info" + > + ) +} + +export const Success = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + variant="success" + /> + ) +} + +export const Upsell = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + variant="upsell" + /> + ) +} + +export const Warning = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + variant="warning" + /> + ) +} + +export const Dismiss = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + /> + ) +} + +export const DismissWithActions = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + onDismiss={action('onDismiss')} + primaryAction={Button} + secondaryAction={Button} + /> + ) +} + +export const WithHiddenTitle = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + variant="warning" + /> + ) +} + +export const WithHiddenTitleAndActions = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + variant="warning" + primaryAction={Button} + secondaryAction={Button} + /> + ) +} + +export const WithActions = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + primaryAction={Button} + secondaryAction={Button} + variant="warning" + /> + ) +} diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx new file mode 100644 index 00000000000..630f8f7720b --- /dev/null +++ b/packages/react/src/Banner/Banner.stories.tsx @@ -0,0 +1,92 @@ +import type {Meta, StoryObj} from '@storybook/react' +import React from 'react' +import Link from '../Link' +import {Banner} from '../Banner' +import {PageLayout} from '../PageLayout' +import {action} from '@storybook/addon-actions' + +const meta = { + title: 'Drafts/Components/Banner', + component: Banner, +} satisfies Meta + +export default meta + +export const Default = () => { + return ( + + GitHub users are{' '} + + now required + {' '} + to enable two-factor authentication as an additional security measure. + + } + primaryAction={Button} + secondaryAction={Button} + /> + ) +} + +export const Playground: StoryObj = { + render: ({onDismiss, primaryAction, secondaryAction, ...rest}) => { + return ( + + + {primaryAction} : null} + secondaryAction={ + secondaryAction ? {secondaryAction} : null + } + {...rest} + /> + + + + {primaryAction} : null} + secondaryAction={ + secondaryAction ? {secondaryAction} : null + } + {...rest} + /> + + + ) + }, + args: { + title: 'Banner title', + description: + 'GitHub users are now required to en able two-factor authentication as an additional security measure.', + variant: 'info', + }, + argTypes: { + title: { + control: 'text', + defaultValue: 'Banner title', + }, + description: { + control: 'text', + }, + onDismiss: { + control: 'boolean', + defaultValue: false, + }, + primaryAction: { + control: 'text', + }, + secondaryAction: { + control: 'text', + }, + variant: { + control: 'select', + options: ['critical', 'info', 'success', 'upsell', 'warning'], + }, + }, +} diff --git a/packages/react/src/Banner/Banner.test.tsx b/packages/react/src/Banner/Banner.test.tsx new file mode 100644 index 00000000000..0da386c115e --- /dev/null +++ b/packages/react/src/Banner/Banner.test.tsx @@ -0,0 +1,230 @@ +import {render, screen} from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import React from 'react' +import {Banner} from '../Banner' + +describe('Banner', () => { + let spy: jest.SpyInstance + + beforeEach(() => { + // Note: this error occurs due to our usage of `@container` within a + // ` +
{icon && variant === 'info' ? icon : iconForVariant[variant]}
+
+
+ {title ? ( + hideTitle ? ( + + {title} + + ) : ( + {title} + ) + ) : null} + {description ? {description} : null} + {children} +
+ {hasActions ? : null} +
+ {dismissible ? ( + + ) : null} + + + ) +}) + +/** + * For styling, it's important that the icons and the text have the same height + * for alignment to occur in multi-line scenarios. Currently, we use a + * line-height of `20px` so that means that the height of icons should match + * that value. + */ +const StyledBanner = styled.div` + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: start; + background-color: var(--banner-bgColor); + border: var(--borderWidth-thin, 1px) solid var(--banner-borderColor); + padding: var(--base-size-8, 0.5rem); + border-radius: var(--borderRadius-medium, ${get('radii.2')}); + + @supports (container-type: inline-size) { + container: banner / inline-size; + } + + &[data-variant='critical'] { + --banner-bgColor: ${get('colors.danger.subtle')}; + --banner-borderColor: ${get('colors.danger.muted')}; + --banner-icon-fgColor: ${get('colors.danger.fg')}; + } + + &[data-variant='info'] { + --banner-bgColor: ${get('colors.accent.subtle')}; + --banner-borderColor: ${get('colors.accent.muted')}; + --banner-icon-fgColor: ${get('colors.accent.fg')}; + } + + &[data-variant='success'] { + --banner-bgColor: ${get('colors.success.subtle')}; + --banner-borderColor: ${get('colors.success.muted')}; + --banner-icon-fgColor: ${get('colors.success.fg')}; + } + + &[data-variant='upsell'] { + --banner-bgColor: var(--bgColor-upsell-muted, ${get('colors.done.subtle')}); + --banner-borderColor: var(--borderColor-upsell-muted, ${get('colors.done.muted')}); + --banner-icon-fgColor: var(--fgColor-upsell-muted, ${get('colors.done.fg')}); + } + + &[data-variant='warning'] { + --banner-bgColor: ${get('colors.attention.subtle')}; + --banner-borderColor: ${get('colors.attention.muted')}; + --banner-icon-fgColor: ${get('colors.attention.fg')}; + } + + /* BannerIcon ------------------------------------------------------------- */ + + .BannerIcon { + display: grid; + place-items: center; + padding: var(--base-size-8, 0.5rem); + } + + .BannerIcon svg { + color: var(--banner-icon-fgColor); + fill: var(--banner-icon-fgColor); + /* 20px is the line box height of the trailing action buttons */ + height: var(--base-size-20, 1.25rem); + } + + &[data-title-hidden=''] .BannerIcon svg { + height: var(--base-size-16, 1rem); + } + + /* BannerContainer -------------------------------------------------------- */ + + .BannerContainer { + font-size: var(--text-body-size-medium, 0.875rem); + align-items: start; + line-height: var(--text-body-lineHeight-medium, calc(20 / 14)); + row-gap: var(--base-size-4, 0.25rem); + column-gap: var(--base-size-4, 0.25rem); + } + + & :where(.BannerContainer) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + &[data-dismissible] .BannerContainer { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + } + + /* BannerContent ---------------------------------------------------------- */ + + .BannerContent { + display: grid; + row-gap: var(--base-size-4, 0.25rem); + grid-column-start: 1; + margin-block: var(--base-size-8, 0.5rem); + } + + &[data-title-hidden=''] .BannerContent { + margin-block: var(--space-small, 0.375rem); + } + + @media screen and (min-width: 544px) { + .BannerContent { + flex: 1 1 0%; + } + } + + .BannerTitle { + margin: 0; + font-size: inherit; + font-weight: var(--base-text-weight-semibold, 600); + } + + /* BannerActions ---------------------------------------------------------- */ + .BannerActionsContainer { + display: flex; + column-gap: var(--base-size-8, 0.5rem); + align-items: center; + } + + .BannerActions :where([data-primary-action='trailing']) { + display: none; + } + + @media screen and (min-width: 544px) { + .BannerActions :where([data-primary-action='trailing']) { + display: flex; + } + + .BannerActions :where([data-primary-action='leading']) { + display: none; + } + } + + &[data-dismissible] .BannerActions { + margin-block-end: var(--size-small, 0.375rem); + } + + &[data-dismissible] .BannerActionsContainer[data-primary-action='trailing'] { + display: none; + } + + &[data-dismissible] .BannerActionsContainer[data-primary-action='leading'] { + display: flex; + } + + /* BannerDismiss ---------------------------------------------------------- */ + + .BannerDismiss { + display: grid; + place-items: center; + padding: var(--base-size-8, 0.5rem); + margin-inline-start: var(--base-size-4, 0.25rem); + } + + .BannerDismiss svg { + color: var(--banner-icon-fgColor); + } +` + +const BannerContainerQuery = ` + @container banner (max-width: 500px) { + .BannerContainer { + display: grid; + grid-template-rows: auto auto; + } + + .BannerActions { + margin-block-end: var(--size-small, 0.375rem); + } + + .BannerActions [data-primary-action="trailing"] { + display: none; + } + + .BannerActions [data-primary-action="leading"] { + display: flex; + } + } + + @container banner (min-width: 500px) { + .BannerContainer { + display: grid; + grid-template-columns: auto auto; + } + + .BannerActions [data-primary-action="trailing"] { + display: flex; + } + + .BannerActions [data-primary-action="leading"] { + display: none; + } + } +` + +type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' + +export type BannerTitleProps = { + as?: As + className?: string +} & React.ComponentPropsWithoutRef + +export function BannerTitle(props: BannerTitleProps) { + const {as: Heading = 'h2', className, children, ...rest} = props + const banner = useBanner() + return ( + + {children} + + ) +} + +export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'> + +export function BannerDescription({children, className, ...rest}: BannerDescriptionProps) { + return ( +
+ {children} +
+ ) +} + +export type BannerActionsProps = { + primaryAction?: React.ReactNode + secondaryAction?: React.ReactNode +} + +export function BannerActions({primaryAction, secondaryAction}: BannerActionsProps) { + return ( +
+
+ {secondaryAction ?? null} + {primaryAction ?? null} +
+
+ {primaryAction ?? null} + {secondaryAction ?? null} +
+
+ ) +} + +export type BannerPrimaryActionProps = Omit, 'variant'> + +export function BannerPrimaryAction({children, className, ...rest}: BannerPrimaryActionProps) { + return ( + + ) +} + +export type BannerSecondaryActionProps = Omit, 'variant'> + +export function BannerSecondaryAction({children, className, ...rest}: BannerSecondaryActionProps) { + return ( + + ) +} + +type BannerContextValue = {titleId: string} +const BannerContext = createContext(null) + +function useBanner(): BannerContextValue { + const value = useContext(BannerContext) + if (value) { + return value + } + throw new Error('Component must be used within a component') +} diff --git a/packages/react/src/Banner/__snapshots__/Banner.test.tsx.snap b/packages/react/src/Banner/__snapshots__/Banner.test.tsx.snap new file mode 100644 index 00000000000..3a1a9768fbc --- /dev/null +++ b/packages/react/src/Banner/__snapshots__/Banner.test.tsx.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Banner should throw an error if no title is provided 1`] = `"The Banner component requires a title to be provided as the \`title\` prop or through \`Banner.Title\`"`; diff --git a/packages/react/src/Banner/index.ts b/packages/react/src/Banner/index.ts new file mode 100644 index 00000000000..f9d2f33a6e0 --- /dev/null +++ b/packages/react/src/Banner/index.ts @@ -0,0 +1,29 @@ +import { + Banner as BannerImpl, + BannerTitle, + BannerDescription, + BannerPrimaryAction, + BannerSecondaryAction, +} from './Banner' +import type { + BannerProps, + BannerTitleProps, + BannerDescriptionProps, + BannerPrimaryActionProps, + BannerSecondaryActionProps, +} from './Banner' + +export const Banner = Object.assign(BannerImpl, { + Title: BannerTitle, + Description: BannerDescription, + PrimaryAction: BannerPrimaryAction, + SecondaryAction: BannerSecondaryAction, +}) + +export type { + BannerProps, + BannerTitleProps, + BannerDescriptionProps, + BannerPrimaryActionProps, + BannerSecondaryActionProps, +} diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 9030c26ae71..c29dc006f94 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -239,6 +239,8 @@ exports[`@primer/react/drafts should not update exports without a semver change [ "ActionBar", "type ActionBarProps", + "Banner", + "type BannerProps", "Blankslate", "type BlankslateProps", "callbackCancelledResult", @@ -333,6 +335,8 @@ exports[`@primer/react/experimental should not update exports without a semver c [ "ActionBar", "type ActionBarProps", + "Banner", + "type BannerProps", "Blankslate", "type BlankslateProps", "callbackCancelledResult", diff --git a/packages/react/src/drafts/index.ts b/packages/react/src/drafts/index.ts index 3cbf49465fa..b26c9a7abfa 100644 --- a/packages/react/src/drafts/index.ts +++ b/packages/react/src/drafts/index.ts @@ -11,6 +11,9 @@ export {Blankslate} from '../Blankslate' export type {BlankslateProps} from '../Blankslate' +export {Banner} from '../Banner' +export type {BannerProps} from '../Banner' + export {DataTable, Table, createColumnHelper} from '../DataTable' export type { DataTableProps, diff --git a/packages/react/src/internal/hooks/useFocus.ts b/packages/react/src/internal/hooks/useFocus.ts new file mode 100644 index 00000000000..4965df88491 --- /dev/null +++ b/packages/react/src/internal/hooks/useFocus.ts @@ -0,0 +1,21 @@ +import {type RefObject, useEffect, useState} from 'react' + +export function useFocus() { + const [focusTarget, setFocusTarget] = useState | null>(null) + + useEffect(() => { + if (focusTarget === null) { + return + } + + if (focusTarget instanceof HTMLElement) { + focusTarget.focus() + } else { + focusTarget.current?.focus() + } + + setFocusTarget(null) + }, [focusTarget]) + + return setFocusTarget +}