diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..e818a64 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..7ca3bca Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..7d2fc46 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..9b40af6 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..d599734 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..a1cd532 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..f7de689 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..9a96717 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..733ee0c Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..99bbadc Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..f9b3c77 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..c8c8b85 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..0b257f8 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..27dcab5 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..0bd0ae8 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..88cff57 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..82277f1 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..bb63e72 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..5419ebc Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..520ae90 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..18b470f Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..3259576 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..9e97877 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..2d09761 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaContainerScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..8c29f05 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..9f4d133 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..6bd0853 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..3a584dd Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---collapse-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..c1a8575 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..d28b105 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..65527da Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..290f133 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon---expand-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..edf7526 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..40a606d Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..7e1141e Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..e6a1644 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-chevron-collapse-icon-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..b7f2858 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..9c488f9 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..6a57443 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..2a3d149 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---collapse-all-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..ee97b30 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..bdfd7c1 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..e0b108f Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..f88a508 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar---search-interaction-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png new file mode 100644 index 0000000..211975c Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png new file mode 100644 index 0000000..01b4116 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-dark-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png new file mode 100644 index 0000000..6dc1106 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-chromium-1-chromium-linux.png differ diff --git a/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png new file mode 100644 index 0000000..13008e4 Binary files /dev/null and b/src/ReactUnipika/__snapshots__/ReactUnipikaWindowScroll.visual.test.tsx-snapshots/ReactUnipika-with-custom-toolbar-light-webkit-1-webkit-linux.png differ diff --git a/src/ReactUnipika/__stories__/CustomToolbarExample.tsx b/src/ReactUnipika/__stories__/CustomToolbarExample.tsx new file mode 100644 index 0000000..c014500 --- /dev/null +++ b/src/ReactUnipika/__stories__/CustomToolbarExample.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import type {ToolbarProps} from '../../StructuredYson/types'; + +export function CustomToolbarExample({ + onFilterChange, + onExpandAll, + onCollapseAll, + isCollapsed, +}: ToolbarProps) { + return ( +
+ onFilterChange(e.target.value)} + data-qa="custom-toolbar-search" + style={{ + padding: '4px 8px', + border: '1px solid var(--g-color-line-generic)', + borderRadius: '4px', + flex: 1, + }} + /> + +
+ ); +} diff --git a/src/ReactUnipika/__stories__/ReactUnipikaContainerScroll.stories.tsx b/src/ReactUnipika/__stories__/ReactUnipikaContainerScroll.stories.tsx index fc27b76..d96c348 100644 --- a/src/ReactUnipika/__stories__/ReactUnipikaContainerScroll.stories.tsx +++ b/src/ReactUnipika/__stories__/ReactUnipikaContainerScroll.stories.tsx @@ -6,6 +6,7 @@ import {Meta, StoryObj} from '@storybook/react'; import {ReactUnipika, ReactUnipikaProps} from '../../container-scroll'; import data from './data.json'; +import {CustomToolbarExample} from './CustomToolbarExample'; function WithScrollContainerComponent(props: Omit) { const scrollContainerRef = React.useRef(null); @@ -113,3 +114,25 @@ export const WithError: StoryObj = { }, }, }; + +export const WithChevronCollapseIcon: StoryObj = { + args: { + value: data, + collapseIconType: 'chevron', + }, +}; + +export const WithChevronCollapseIconInitiallyCollapsed: StoryObj = { + args: { + value: data, + collapseIconType: 'chevron', + initiallyCollapsed: true, + }, +}; + +export const WithCustomToolbar: StoryObj = { + args: { + value: data, + renderToolbar: CustomToolbarExample, + }, +}; diff --git a/src/ReactUnipika/__stories__/ReactUnipikaWindowScroll.stories.tsx b/src/ReactUnipika/__stories__/ReactUnipikaWindowScroll.stories.tsx index 6904aec..b57962b 100644 --- a/src/ReactUnipika/__stories__/ReactUnipikaWindowScroll.stories.tsx +++ b/src/ReactUnipika/__stories__/ReactUnipikaWindowScroll.stories.tsx @@ -7,6 +7,7 @@ import {Meta, StoryObj} from '@storybook/react'; import {ReactUnipika, ReactUnipikaProps} from '../../window-scroll'; import data from './data.json'; +import {CustomToolbarExample} from './CustomToolbarExample'; const meta: Meta = { title: 'ReactUnipika/Window Scroll', @@ -98,3 +99,25 @@ export const WithError: StoryObj = { }, }, }; + +export const WithChevronCollapseIcon: StoryObj = { + args: { + value: data, + collapseIconType: 'chevron', + }, +}; + +export const WithChevronCollapseIconInitiallyCollapsed: StoryObj = { + args: { + value: data, + collapseIconType: 'chevron', + initiallyCollapsed: true, + }, +}; + +export const WithCustomToolbar: StoryObj = { + args: { + value: data, + renderToolbar: CustomToolbarExample, + }, +}; diff --git a/src/ReactUnipika/__tests__/ReactUnipikaContainerScroll.visual.test.tsx b/src/ReactUnipika/__tests__/ReactUnipikaContainerScroll.visual.test.tsx index f0a5655..0fceb02 100644 --- a/src/ReactUnipika/__tests__/ReactUnipikaContainerScroll.visual.test.tsx +++ b/src/ReactUnipika/__tests__/ReactUnipikaContainerScroll.visual.test.tsx @@ -295,3 +295,65 @@ test('ReactUnipika: with case sensitive search with matches', async ({ await expectScreenshot({component: page}); }); + +test('ReactUnipika: with chevron collapse icon', async ({mount, expectScreenshot, page}) => { + await mount(, {width: 1280}); + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with chevron collapse icon - collapse', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the first chevron button to collapse (chevron should change from Up to Right) + await page.locator('.g-ru-cell__collapse button').first().click(); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with chevron collapse icon - expand', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the first chevron button to expand (chevron should change from Right to Up) + await page.locator('.g-ru-cell__collapse button').first().click(); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar', async ({mount, expectScreenshot, page}) => { + await mount(, {width: 1280}); + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar - search interaction', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Type in the custom search input + await page.locator('[data-qa="custom-toolbar-search"]').fill('level8_item4'); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar - collapse all', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the toggle button to collapse all + await page.locator('[data-qa="custom-toolbar-toggle"]').click(); + + await expectScreenshot({component: page}); +}); diff --git a/src/ReactUnipika/__tests__/ReactUnipikaWindowScroll.visual.test.tsx b/src/ReactUnipika/__tests__/ReactUnipikaWindowScroll.visual.test.tsx index c450ff8..e5b4395 100644 --- a/src/ReactUnipika/__tests__/ReactUnipikaWindowScroll.visual.test.tsx +++ b/src/ReactUnipika/__tests__/ReactUnipikaWindowScroll.visual.test.tsx @@ -252,3 +252,65 @@ test('ReactUnipika: with case sensitive search with matches', async ({ await expectScreenshot({component: page}); }); + +test('ReactUnipika: with chevron collapse icon', async ({mount, expectScreenshot, page}) => { + await mount(, {width: 1280}); + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with chevron collapse icon - collapse', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the first chevron button to collapse (chevron should change from Up to Right) + await page.locator('.g-ru-cell__collapse button').first().click(); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with chevron collapse icon - expand', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the first chevron button to expand (chevron should change from Right to Up) + await page.locator('.g-ru-cell__collapse button').first().click(); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar', async ({mount, expectScreenshot, page}) => { + await mount(, {width: 1280}); + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar - search interaction', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Type in the custom search input + await page.locator('[data-qa="custom-toolbar-search"]').fill('level8_item4'); + + await expectScreenshot({component: page}); +}); + +test('ReactUnipika: with custom toolbar - collapse all', async ({ + mount, + expectScreenshot, + page, +}) => { + await mount(, {width: 1280}); + + // Click the toggle button to collapse all + await page.locator('[data-qa="custom-toolbar-toggle"]').click(); + + await expectScreenshot({component: page}); +});