diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png new file mode 100644 index 00000000000..62a4d121c68 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png new file mode 100644 index 00000000000..6ef37308b14 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png new file mode 100644 index 00000000000..92702935401 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png new file mode 100644 index 00000000000..c794b92e8c7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png new file mode 100644 index 00000000000..62a4d121c68 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png new file mode 100644 index 00000000000..93e2abf1792 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png new file mode 100644 index 00000000000..d12fc62607d Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png new file mode 100644 index 00000000000..173af5d8721 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png new file mode 100644 index 00000000000..93e2abf1792 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Custom-Sticky-Header-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..5207b32b079 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..668a6cc90ba Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..32364b59bb3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png new file mode 100644 index 00000000000..4427de4169b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5207b32b079 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..4adc2354afb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..eb3a4b80d7f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png new file mode 100644 index 00000000000..21e890a560a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..4adc2354afb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png new file mode 100644 index 00000000000..d1da4890a0e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png new file mode 100644 index 00000000000..33f76f69ade Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png new file mode 100644 index 00000000000..8165bfe0bf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png new file mode 100644 index 00000000000..ecaf4bfeaf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d1da4890a0e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png new file mode 100644 index 00000000000..dbd02eabaa8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png new file mode 100644 index 00000000000..f325d139c96 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png new file mode 100644 index 00000000000..050fc6e26b6 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png new file mode 100644 index 00000000000..dbd02eabaa8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Nested-Scroll-Container-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png new file mode 100644 index 00000000000..12420c24b7f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png new file mode 100644 index 00000000000..b6b4c11b5e7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png new file mode 100644 index 00000000000..9af5cce2051 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png new file mode 100644 index 00000000000..1c45d34c3e2 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8652f5be69f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png new file mode 100644 index 00000000000..7da2310b237 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png new file mode 100644 index 00000000000..54f1fcf895b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png new file mode 100644 index 00000000000..8589749cc9a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png new file mode 100644 index 00000000000..4d52424a967 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Pull-Request-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..e32bca6a587 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..8700158a2e7 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..36cc6a8692a Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png new file mode 100644 index 00000000000..9b52a6555cf Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e32bca6a587 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..c2725cbd0be Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..c5585014a8b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png new file mode 100644 index 00000000000..21e00e98a3f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..c2725cbd0be Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Resizable-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..4341a310c57 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..9e5e802185f Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1d153dfcdd8 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png new file mode 100644 index 00000000000..2194b8c710d Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..4341a310c57 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..b266d36baeb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..cc4b42b37d5 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png new file mode 100644 index 00000000000..fde519ac54e Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..b266d36baeb Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Scroll-Container-Within-Page-Layout-Pane-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png new file mode 100644 index 00000000000..8abc3555290 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png new file mode 100644 index 00000000000..9414d5dc412 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f73cf005f9b Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png new file mode 100644 index 00000000000..279e0637b11 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png new file mode 100644 index 00000000000..8abc3555290 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png new file mode 100644 index 00000000000..819bf67ddf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png new file mode 100644 index 00000000000..348c3376fc3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png new file mode 100644 index 00000000000..a4f3d0c6e25 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-linux.png differ diff --git a/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png new file mode 100644 index 00000000000..819bf67ddf3 Binary files /dev/null and b/.playwright/snapshots/components/PageLayout.test.ts-snapshots/PageLayout-Sticky-Pane-light-tritanopia-linux.png differ diff --git a/e2e/components/PageLayout.test.ts b/e2e/components/PageLayout.test.ts new file mode 100644 index 00000000000..3263e89d17b --- /dev/null +++ b/e2e/components/PageLayout.test.ts @@ -0,0 +1,268 @@ +import {test, expect} from '@playwright/test' +import type {Page} from '@playwright/test' +import {visit} from '../test-helpers/storybook' +import {themes} from '../test-helpers/themes' + +const isInViewPort = (page: Page, boundingBox: {x: number; y: number; width: number; height: number}) => { + let width + let height + const viewportSize = page.viewportSize() + if (viewportSize !== null) { + width = viewportSize.width + height = viewportSize.height + } + + return ( + width !== undefined && + height !== undefined && + boundingBox.x >= 0 && + boundingBox.y >= 0 && + boundingBox.x + boundingBox.width <= width && + boundingBox.y + boundingBox.height <= height + ) +} + +test.describe('PageLayout', () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Pull Request', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--pull-request', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Pull Request.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--pull-request', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Sticky Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Sticky Pane.${theme}.png`) + + const content = page.getByTestId('content3') + content.scrollIntoViewIfNeeded() + + const paragraphRect = await page.getByTestId('paragraph0').boundingBox() + if (paragraphRect) { + expect(isInViewPort(page, paragraphRect)).toBe(true) + } + }) + + test('non sticky pane', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + args: { + sticky: false, + numParagraphsInPane: '6', + numParagraphsInContent: '30', + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot() + + const content3 = page.getByTestId('content3') + await content3.scrollIntoViewIfNeeded() + const paragraphRect = await page.getByTestId('paragraph0').boundingBox() + if (paragraphRect) { + expect(isInViewPort(page, paragraphRect)).toBe(true) + } + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--sticky-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Nested Scroll Container', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--nested-scroll-container', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Nested Scroll Container.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--nested-scroll-container', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Custom Sticky Header', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--custom-sticky-header', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Custom Sticky Header.${theme}.png`) + + const content = page.getByTestId('content3') + content.scrollIntoViewIfNeeded() + + const paragraphBoundaries = await page.getByTestId('paragraph0').boundingBox() + const stickyHeaderBoundaries = await page.getByTestId('sticky-header').boundingBox() + if (paragraphBoundaries) { + expect(isInViewPort(page, paragraphBoundaries)).toBe(true) + } + + if (stickyHeaderBoundaries) { + expect(isInViewPort(page, stickyHeaderBoundaries)).toBe(true) + } + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--custom-sticky-header', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Resizable Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--resizable-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`PageLayout.Resizable Pane.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--resizable-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) + + test.describe('Scroll Container Within Page Layout Pane', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot( + `PageLayout.Scroll Container Within Page Layout Pane.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations() + }) + }) + } + }) +}) diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 4c16f9408b0..0aefdba82f2 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -813,6 +813,41 @@ const components = new Map([ ], }, ], + [ + 'PageLayout', + { + stories: [ + { + id: 'components-pagelayout--default', + name: 'Default', + }, + { + id: 'components-pagelayout-features--pull-request', + name: 'Pull Request', + }, + { + id: 'components-pagelayout-features--sticky-pane', + name: 'Sticky Pane', + }, + { + id: 'components-pagelayout-features--nested-scroll-container', + name: 'Nested Scroll Container', + }, + { + id: 'components-pagelayout-features--custom-sticky-header', + name: 'Custom Sticky Header', + }, + { + id: 'components-pagelayout-features--resizable-pane', + name: 'Resizable Pane', + }, + { + id: 'components-pagelayout-features--scroll-container-within-page-layout-pane', + name: 'Scroll Container Within Page Layout Pane', + }, + ], + }, + ], [ 'Popover', { diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx new file mode 100644 index 00000000000..9a168985c56 --- /dev/null +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -0,0 +1,342 @@ +import React from 'react' +import {ComponentMeta, Story} from '@storybook/react' +import {PageLayout} from './PageLayout' +import {Placeholder} from '../Placeholder' +import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..' + +export default { + title: 'Components/PageLayout/Features', + component: PageLayout, +} as ComponentMeta + +export const PullRequestPage = () => ( + + + + + + Input validation styles #1831 + + + Open + + + mperrotti + {' '} + wants to merge 3 commits into main from{' '} + mp/validation-styles + + + + + + Conversation + + Commits + Checks + Files changed + + + + + + + This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When + this overflows, it should not break to overall page layout! + + + + + + Assignees + + No one –{' '} + + assign yourself + + + + + + Labels + None yet + + + + +) + +export const StickyPane: Story = args => ( + + + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + + ) + })} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. + + + ) + })} + + + + + + +) + +StickyPane.args = { + sticky: true, + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +StickyPane.argTypes = { + sticky: { + type: 'boolean', + }, + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const NestedScrollContainer: Story = args => ( + + + + + + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + ))} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus + et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet + massa purus. + + ))} + + + + + + + + + +) + +NestedScrollContainer.args = { + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +NestedScrollContainer.argTypes = { + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const CustomStickyHeader: Story = args => ( + // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component + + + Custom sticky header + + + + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae orci et magna consectetur + ullamcorper eget ac purus. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante + quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec + pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus. Nunc sem + lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut + blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam + tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + + + ) + })} + + + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius + tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec + sit amet massa purus. + + + ) + })} + + + + + + + +) + +CustomStickyHeader.args = { + sticky: true, + offsetHeader: '8rem', + numParagraphsInPane: 10, + numParagraphsInContent: 30, +} + +CustomStickyHeader.argTypes = { + sticky: { + type: 'boolean', + }, + offsetHeader: { + type: 'string', + }, + numParagraphsInPane: { + type: 'number', + }, + numParagraphsInContent: { + type: 'number', + }, +} + +export const ResizablePane: Story = () => ( + + + + + + + + + + + + + + +) + +export const ScrollContainerWithinPageLayoutPane: Story = () => ( + + + + + + + + + + + + + + + + + + + + +) diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index c749d50161a..a55c409d213 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,6 +1,5 @@ import React from 'react' import {Meta, Story} from '@storybook/react' -import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..' import {Placeholder} from '../Placeholder' import {PageLayout} from './PageLayout' @@ -422,336 +421,4 @@ const Template: Story = args => ( ) export const Default = Template.bind({}) - -export const PullRequestPage = () => ( - - - - - - Input validation styles #1831 - - - Open - - - mperrotti - {' '} - wants to merge 3 commits into main from{' '} - mp/validation-styles - - - - - - Conversation - - Commits - Checks - Files changed - - - - - - - This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When - this overflows, it should not break to overall page layout! - - - - - - Assignees - - No one –{' '} - - assign yourself - - - - - - Labels - None yet - - - - -) - -export const StickyPane: Story = args => ( - - - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - - ) - })} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. - - - ) - })} - - - - - - -) - -StickyPane.args = { - sticky: true, - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -StickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const NestedScrollContainer: Story = args => ( - - - - - - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - ))} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus - et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. - - ))} - - - - - - - - - -) - -NestedScrollContainer.args = { - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -NestedScrollContainer.argTypes = { - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const CustomStickyHeader: Story = args => ( - // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component - - - Custom sticky header - - - - - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae orci et magna consectetur - ullamcorper eget ac purus. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante - quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec - pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet massa purus. Nunc sem - lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus in imperdiet. Ut - blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod nisi. Nullam - tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. - - - ) - })} - - - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius - tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec - sit amet massa purus. - - - ) - })} - - - - - - - -) - -CustomStickyHeader.args = { - sticky: true, - offsetHeader: '8rem', - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -CustomStickyHeader.argTypes = { - sticky: { - type: 'boolean', - }, - offsetHeader: { - type: 'string', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -export const ResizablePane: Story = () => ( - - - - - - - - - - - - - - -) - -export const ScrollContainerWithinPageLayoutPane: Story = () => ( - - - - - - - - - - - - - - - - - - - - -) - export default meta diff --git a/src/PageLayout/interaction.stories.tsx b/src/PageLayout/interaction.stories.tsx deleted file mode 100644 index 9b5b92b1237..00000000000 --- a/src/PageLayout/interaction.stories.tsx +++ /dev/null @@ -1,438 +0,0 @@ -import {Meta} from '@storybook/react' -import {StickyPane, CustomStickyHeader} from './PageLayout.stories' -import {within} from '@storybook/testing-library' -import {expect} from '@storybook/jest' - -const meta: Meta = { - title: 'Components/PageLayout/Interactions', - // component: PageLayout, - parameters: { - layout: 'fullscreen', - controls: {expanded: true}, - }, - args: { - // Debug controls - 'Render header?': true, - 'Render pane?': true, - 'Render footer?': true, - 'Header placeholder height': 64, - 'Pane placeholder height': 200, - 'Content placeholder height': 400, - 'Footer placeholder height': 64, - containerWidth: 'xlarge', - padding: 'normal', - rowGap: 'normal', - columnGap: 'normal', - 'Header.divider.regular': 'none', - 'Header.divider.narrow': 'none', - 'Header.divider.wide': 'none', - 'Header.padding': 'none', - 'Header.hidden.regular': false, - 'Header.hidden.narrow': false, - 'Header.hidden.wide': false, - 'Content.width': 'full', - 'Content.padding': 'none', - 'Content.hidden.regular': false, - 'Content.hidden.narrow': false, - 'Content.hidden.wide': false, - 'Pane.position.regular': 'end', - 'Pane.position.narrow': 'end', - 'Pane.position.wide': 'end', - 'Pane.width': 'medium', - 'Pane.sticky': false, - 'Pane.padding': 'none', - 'Pane.divider.regular': 'none', - 'Pane.divider.narrow': 'none', - 'Pane.divider.wide': 'none', - 'Footer.divider.regular': 'none', - 'Footer.divider.narrow': 'none', - 'Footer.divider.wide': 'none', - 'Footer.padding': 'none', - 'Footer.hidden.regular': false, - 'Footer.hidden.narrow': false, - 'Footer.hidden.wide': false, - }, - argTypes: { - // Debug controls - 'Render header?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Render pane?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Render footer?': { - type: 'boolean', - table: {category: 'Debug'}, - }, - 'Header placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Pane placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Content placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - 'Footer placeholder height': { - type: 'number', - table: {category: 'Debug'}, - }, - - // PageLayout prop controls - containerWidth: { - type: { - name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - padding: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - rowGap: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - columnGap: { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'PageLayout props'}, - }, - - // Header prop controls - 'Header.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Header props', - }, - }, - 'Header.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Header props'}, - }, - 'Header.hidden.regular': { - type: 'boolean', - table: {category: 'Header props'}, - }, - 'Header.hidden.narrow': { - type: 'boolean', - table: {category: 'Header props'}, - }, - 'Header.hidden.wide': { - type: 'boolean', - table: {category: 'Header props'}, - }, - - // Content prop controls - 'Content.width': { - type: { - name: 'enum', - value: ['full', 'medium', 'large', 'xlarge'], - }, - control: {type: 'radio'}, - table: {category: 'Content props'}, - }, - 'Content.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Content props'}, - }, - 'Content.hidden.regular': { - type: 'boolean', - table: {category: 'Content props'}, - }, - 'Content.hidden.narrow': { - type: 'boolean', - table: {category: 'Content props'}, - }, - 'Content.hidden.wide': { - type: 'boolean', - table: {category: 'Content props'}, - }, - - // Pane prop controls - 'Pane.position.regular': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.narrow': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.wide': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.width': { - type: { - name: 'enum', - value: ['small', 'medium', 'large'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.sticky': { - type: 'boolean', - table: {category: 'Pane props'}, - }, - 'Pane.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - - // Footer prop controls - 'Footer.divider.regular': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.divider.narrow': { - type: { - name: 'enum', - value: ['none', 'line', 'filled'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.divider.wide': { - type: { - name: 'enum', - value: ['none', 'line'], - }, - control: { - type: 'radio', - }, - table: { - category: 'Footer props', - }, - }, - 'Footer.padding': { - type: { - name: 'enum', - value: ['none', 'condensed', 'normal'], - }, - control: {type: 'radio'}, - table: {category: 'Footer props'}, - }, - 'Footer.hidden.regular': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - 'Footer.hidden.narrow': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - 'Footer.hidden.wide': { - type: 'boolean', - table: {category: 'Footer props'}, - }, - }, -} - -StickyPane.args = { - sticky: true, - numParagraphsInPane: 3, - numParagraphsInContent: 30, -} - -StickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -const isInViewPort = (boundingRect: {top: number; left: number; right: number; bottom: number}) => { - return ( - boundingRect.top >= 0 && - boundingRect.left >= 0 && - boundingRect.right <= document.documentElement.clientWidth && - boundingRect.bottom <= document.documentElement.clientHeight - ) -} - -StickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const content3 = await canvas.getByTestId('content3') - content3.scrollIntoView() - const paragraph0 = await canvas.getByTestId('paragraph0') - const paragraphRect = paragraph0.getBoundingClientRect() - await expect(isInViewPort(paragraphRect)).toBe(true) -} - -const NonStickyPane = StickyPane.bind({}) - -NonStickyPane.args = { - sticky: false, - numParagraphsInPane: 6, - numParagraphsInContent: 30, -} - -NonStickyPane.argTypes = { - sticky: { - type: 'boolean', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -NonStickyPane.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const content3 = await canvas.getByTestId('content3') - content3.scrollIntoView() - const paragraph0 = await canvas.getByTestId('paragraph0') - const paragraphRect = paragraph0.getBoundingClientRect() - await expect(isInViewPort(paragraphRect)).toBe(false) -} - -CustomStickyHeader.args = { - sticky: true, - offsetHeader: '8rem', - numParagraphsInPane: 10, - numParagraphsInContent: 30, -} - -CustomStickyHeader.argTypes = { - sticky: { - type: 'boolean', - }, - offsetHeader: { - type: 'string', - }, - numParagraphsInPane: { - type: 'number', - }, - numParagraphsInContent: { - type: 'number', - }, -} - -CustomStickyHeader.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { - const canvas = within(canvasElement) - const contentToScroll = await canvas.getByTestId('content3') - contentToScroll.scrollIntoView() - - const stickyPaneFirstParagraph = await canvas.getByTestId('paragraph0') - const paragraphBoundaries = stickyPaneFirstParagraph.getBoundingClientRect() - const stickyHeader = await canvas.getByTestId('sticky-header') - const stickyHeaderBoundaries = stickyHeader.getBoundingClientRect() - await expect(isInViewPort(paragraphBoundaries)).toBe(true) - await expect(isInViewPort(stickyHeaderBoundaries)).toBe(true) -} -export default meta -export {StickyPane, NonStickyPane, CustomStickyHeader}