diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..255710bf3 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..3bac197ad Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..53886cada Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..ff581d6bc Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..3bac197ad Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Button-Alignment-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..bf741406e Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..785b21ced Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..042a62fbd Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..46a2c6f81 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..20973c5e8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Disabled-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..bfe242074 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..de6e904fa Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..a91f3b431 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..5c447c3aa Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..1a421bb75 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expand-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png new file mode 100644 index 000000000..21d2c086b Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..cc3b226e7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png new file mode 100644 index 000000000..202b11219 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..f47c012c6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png new file mode 100644 index 000000000..f85a7c0b5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..69ebb494e Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png new file mode 100644 index 000000000..216166df9 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..af3326e26 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png new file mode 100644 index 000000000..9bebee5bd Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-closed.png differ diff --git a/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..89897a21c Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Expanded-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..98c75607b Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..ef117bcd8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..eb1bb8509 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..9c61b5bfe Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..d797789df Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Header-Slotted-Icon-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png new file mode 100644 index 000000000..103e89258 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png new file mode 100644 index 000000000..4941e59d9 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png new file mode 100644 index 000000000..55fb070a7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png new file mode 100644 index 000000000..1c28308c1 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/Mobile-Safari/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png new file mode 100644 index 000000000..c99cff1a5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png new file mode 100644 index 000000000..ef07d95f5 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/chromium/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png new file mode 100644 index 000000000..321a89ac0 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png new file mode 100644 index 000000000..19d9763db Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/firefox/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png new file mode 100644 index 000000000..6e456049a Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png new file mode 100644 index 000000000..4a8a8a2f8 Binary files /dev/null and b/.tooling/tests/screenshots/Expander---Visual-and-Behaviour/darwin/webkit/expander-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png new file mode 100644 index 000000000..0daa1316f Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png new file mode 100644 index 000000000..86c3e654e Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png new file mode 100644 index 000000000..058d2f0e1 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png new file mode 100644 index 000000000..c6c01a76b Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png new file mode 100644 index 000000000..f4454ddb2 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png new file mode 100644 index 000000000..5609da92a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/chromium/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png new file mode 100644 index 000000000..4e391930a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png new file mode 100644 index 000000000..c5bb7ed7c Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/firefox/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png new file mode 100644 index 000000000..5cf4bd439 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-both-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png new file mode 100644 index 000000000..f75c40919 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Expand-Mode-Behaviour/darwin/webkit/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png new file mode 100644 index 000000000..5b91558e6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png new file mode 100644 index 000000000..f9b208894 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png new file mode 100644 index 000000000..c9540b713 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Chrome/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png new file mode 100644 index 000000000..713bf042a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png new file mode 100644 index 000000000..8cf14a54f Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png new file mode 100644 index 000000000..516465591 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/Mobile-Safari/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png new file mode 100644 index 000000000..5cd52e7e7 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png new file mode 100644 index 000000000..dd5854019 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png new file mode 100644 index 000000000..52b8728b4 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/chromium/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png new file mode 100644 index 000000000..6a09423aa Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png new file mode 100644 index 000000000..ae6bc199e Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png new file mode 100644 index 000000000..8322018e3 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/firefox/expander-group-second-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png new file mode 100644 index 000000000..fdaaf5de6 Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-expanded.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png new file mode 100644 index 000000000..236196ecf Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-initial.png differ diff --git a/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png new file mode 100644 index 000000000..fd178ae6a Binary files /dev/null and b/.tooling/tests/screenshots/Expander-Group---Visual-and-Behaviour/darwin/webkit/expander-group-second-expanded.png differ diff --git a/.vscode/settings.json b/.vscode/settings.json index d1d050a7f..bccd66c07 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -45,6 +45,7 @@ "modal": true, "tab": true, "toast": true, - "alert": true + "alert": true, + "expander": true } } \ No newline at end of file diff --git a/README.md b/README.md index 73e2ef4a8..8e8fa73a7 100644 --- a/README.md +++ b/README.md @@ -487,6 +487,22 @@ Email input control, used in forms for input validation and to display correct v +[omni-expander](/Users/runner/work/omni-components/omni-components/src/expander/README.md) + + + +Component that groups together content in an expanded box. + + + +[omni-expander-group](/Users/runner/work/omni-components/omni-components/src/expander/README.md) + + + +Layout container that groups expanders. + + + [omni-hyperlink](/Users/runner/work/omni-components/omni-components/src/hyperlink/README.md) diff --git a/package-lock.json b/package-lock.json index 270f490d0..3633bade9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@capitec/omni-components", - "version": "0.8.5", + "version": "0.8.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@capitec/omni-components", - "version": "0.8.5", + "version": "0.8.8", "license": "MIT", "dependencies": { "lit": "^2.3.1", @@ -414,17 +414,89 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", + "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", "dev": true, "dependencies": { - "@babel/highlight": "^7.18.6" + "@babel/highlight": "^7.22.13", + "chalk": "^2.4.2" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/code-frame/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/code-frame/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "node_modules/@babel/code-frame/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/code-frame/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/code-frame/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/compat-data": { "version": "7.20.14", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.14.tgz", @@ -480,13 +552,14 @@ } }, "node_modules/@babel/generator": { - "version": "7.20.14", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz", - "integrity": "sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", + "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", "dev": true, "dependencies": { - "@babel/types": "^7.20.7", + "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" }, "engines": { @@ -536,34 +609,34 @@ } }, "node_modules/@babel/helper-environment-visitor": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-function-name": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", - "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dev": true, "dependencies": { - "@babel/template": "^7.18.10", - "@babel/types": "^7.19.0" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-hoist-variables": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", - "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", "dev": true, "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" }, "engines": { "node": ">=6.9.0" @@ -622,30 +695,30 @@ } }, "node_modules/@babel/helper-split-export-declaration": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", - "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", "dev": true, "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", + "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.19.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true, "engines": { "node": ">=6.9.0" @@ -675,13 +748,13 @@ } }, "node_modules/@babel/highlight": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", - "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", + "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", "dev": true, "dependencies": { - "@babel/helper-validator-identifier": "^7.18.6", - "chalk": "^2.0.0", + "@babel/helper-validator-identifier": "^7.22.20", + "chalk": "^2.4.2", "js-tokens": "^4.0.0" }, "engines": { @@ -760,9 +833,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.20.15", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz", - "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -961,33 +1034,33 @@ } }, "node_modules/@babel/template": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", - "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/parser": "^7.20.7", - "@babel/types": "^7.20.7" + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.20.13", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz", - "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.20.7", - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-function-name": "^7.19.0", - "@babel/helper-hoist-variables": "^7.18.6", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.20.13", - "@babel/types": "^7.20.7", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -1005,13 +1078,13 @@ } }, "node_modules/@babel/types": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz", - "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", + "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", "dev": true, "dependencies": { - "@babel/helper-string-parser": "^7.19.4", - "@babel/helper-validator-identifier": "^7.19.1", + "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { @@ -14185,12 +14258,71 @@ } }, "@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", + "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", "dev": true, "requires": { - "@babel/highlight": "^7.18.6" + "@babel/highlight": "^7.22.13", + "chalk": "^2.4.2" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, "@babel/compat-data": { @@ -14237,13 +14369,14 @@ } }, "@babel/generator": { - "version": "7.20.14", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.14.tgz", - "integrity": "sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", + "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", "dev": true, "requires": { - "@babel/types": "^7.20.7", + "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" }, "dependencies": { @@ -14282,28 +14415,28 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "dev": true }, "@babel/helper-function-name": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", - "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dev": true, "requires": { - "@babel/template": "^7.18.10", - "@babel/types": "^7.19.0" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" } }, "@babel/helper-hoist-variables": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", - "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", "dev": true, "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" } }, "@babel/helper-module-imports": { @@ -14347,24 +14480,24 @@ } }, "@babel/helper-split-export-declaration": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", - "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", "dev": true, "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.22.5" } }, "@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", + "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", "dev": true }, "@babel/helper-validator-identifier": { - "version": "7.19.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true }, "@babel/helper-validator-option": { @@ -14385,13 +14518,13 @@ } }, "@babel/highlight": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", - "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", + "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.18.6", - "chalk": "^2.0.0", + "@babel/helper-validator-identifier": "^7.22.20", + "chalk": "^2.4.2", "js-tokens": "^4.0.0" }, "dependencies": { @@ -14454,9 +14587,9 @@ } }, "@babel/parser": { - "version": "7.20.15", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz", - "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "dev": true }, "@babel/plugin-syntax-async-generators": { @@ -14595,30 +14728,30 @@ } }, "@babel/template": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", - "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", "dev": true, "requires": { - "@babel/code-frame": "^7.18.6", - "@babel/parser": "^7.20.7", - "@babel/types": "^7.20.7" + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" } }, "@babel/traverse": { - "version": "7.20.13", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.13.tgz", - "integrity": "sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.20.7", - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-function-name": "^7.19.0", - "@babel/helper-hoist-variables": "^7.18.6", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.20.13", - "@babel/types": "^7.20.7", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -14632,13 +14765,13 @@ } }, "@babel/types": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz", - "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", + "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", "dev": true, "requires": { - "@babel/helper-string-parser": "^7.19.4", - "@babel/helper-validator-identifier": "^7.19.1", + "@babel/helper-string-parser": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" } }, diff --git a/package.json b/package.json index 06bd2bcfa..2714bf67a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@capitec/omni-components", - "version": "0.8.5", + "version": "0.8.8", "type": "module", "description": "Modern UI component library for mobile and web", "scripts": { @@ -73,7 +73,8 @@ "modal", "toast", "tab", - "alert" + "alert", + "expander" ], "exports": { "./*": "./dist/*/index.js" diff --git a/src/alert/Alert.ts b/src/alert/Alert.ts index d4be5ae27..d64326b5b 100644 --- a/src/alert/Alert.ts +++ b/src/alert/Alert.ts @@ -78,6 +78,11 @@ import '../modal/Modal.js'; * @cssprop --omni-alert-description-padding-left - Alert description left padding. * @cssprop --omni-alert-description-padding-right - Alert description right padding. * + * @cssprop --omni-alert-action-padding-top - Alert actions part top padding. + * @cssprop --omni-alert-action-padding-bottom - Alert actions part bottom padding. + * @cssprop --omni-alert-action-padding-left - Alert actions part left padding. + * @cssprop --omni-alert-action-padding-right - Alert actions part right padding. + * * @cssprop --omni-alert-action-button-padding-top - Alert action button(s) top padding. * @cssprop --omni-alert-action-button-padding-bottom - Alert action button(s) bottom padding. * @cssprop --omni-alert-action-button-padding-left - Alert action button(s) left padding. @@ -477,6 +482,11 @@ export class Alert extends OmniElement { flex-direction: row; justify-content: flex-end; align-items: center; + + padding-top: var(--omni-alert-action-padding-top, 0px); + padding-bottom: var(--omni-alert-action-padding-bottom, 0px); + padding-left: var(--omni-alert-action-padding-left, 0px); + padding-right: var(--omni-alert-action-padding-right, 0px); } .actions.center { diff --git a/src/alert/README.md b/src/alert/README.md index 515245744..ebc709787 100644 --- a/src/alert/README.md +++ b/src/alert/README.md @@ -74,6 +74,10 @@ Component that displays an alert. | `--omni-alert-action-button-padding-left` | Alert action button(s) left padding. | | `--omni-alert-action-button-padding-right` | Alert action button(s) right padding. | | `--omni-alert-action-button-padding-top` | Alert action button(s) top padding. | +| `--omni-alert-action-padding-bottom` | Alert actions part bottom padding. | +| `--omni-alert-action-padding-left` | Alert actions part left padding. | +| `--omni-alert-action-padding-right` | Alert actions part right padding. | +| `--omni-alert-action-padding-top` | Alert actions part top padding. | | `--omni-alert-animation-duration` | Alert fade in and out animation duration. | | `--omni-alert-border` | Alert border. | | `--omni-alert-border-radius` | Alert border radius. | diff --git a/src/date-picker/DatePicker.ts b/src/date-picker/DatePicker.ts index 819f3cf55..040f6a745 100644 --- a/src/date-picker/DatePicker.ts +++ b/src/date-picker/DatePicker.ts @@ -227,7 +227,7 @@ export class DatePicker extends OmniFormElement { } _dateSelected(e: Event) { - this.date = DateTime.fromJSDate((e).detail.date); + this.date = DateTime.fromJSDate((e).detail.date).setLocale(this.locale); this.value = this.date.toISODate() as string; @@ -423,7 +423,7 @@ export class DatePicker extends OmniFormElement { protected override renderPicker() { if (this._isMobile) { return html` - + { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Interactive').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + // The expanded attribute should be not set by default + await expect(expander).not.toHaveAttribute('expanded', ''); + + const expanderHeader = expander.locator('.header'); + await expanderHeader.click(); + // The expanded attribute should be set once the expander is expanded + await expect(expander).toHaveAttribute('expanded', ''); + + await expect(expander).toHaveScreenshot('expander-expanded.png'); + + await expanderHeader.click(); + + await expect(expander).not.toHaveAttribute('expanded', ''); + }); +}); + +test(`Expander - Disabled Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Disabled').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + + const animantionEnd = await mockEventListener(expander, 'animationend'); + + const expanderHeader = expander.locator('.header'); + await expanderHeader.click(); + + await expect(expander).not.toHaveAttribute('expanded', ''); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + await expect(animantionEnd).toBeCalledTimes(0); + }); +}); + +test(`Expander - Button Alignment Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Button_Alignment').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + + const header = expander.locator('.header'); + + // Confirm that there is 3 elements in the header + await expect(await header.evaluate((h) => h.childElementCount)).toBe(3); + + await expect(expander).toHaveAttribute('button-alignment', 'left'); + + const headerButton = header.locator('.expand-icon-container'); + await expect(headerButton).toHaveCount(1); + }); +}); + +test(`Expander - Expanded Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Expanded').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + await expect(expander).toHaveAttribute('expanded', 'true'); + + const expanderHeader = expander.locator('.header'); + await expanderHeader.click(); + + await expect(expander).not.toHaveAttribute('expanded', ''); + await expect(expander).toHaveScreenshot('expander-closed.png'); + }); +}); + +test(`Expander - Expand Slotted Icon Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Expand_Icon').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + + const header = expander.locator('.header'); + + const expandIconContainer = header.locator('.expand-icon-container'); + await expect(expandIconContainer).toHaveCount(1); + + const slotElement = expander.locator('slot[name="expand-icon"]'); + await expect(slotElement).toHaveCount(1); + }); +}); + +test(`Expander - Header Slotted Icon Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander/'); + const expander = page.locator('.Header_Icon').getByTestId('test-expander'); + + await expect(expander).toHaveScreenshot('expander-initial.png'); + const header = expander.locator('.header'); + + const headerIconContainer = header.locator('.header-icon-container'); + await expect(headerIconContainer).toHaveCount(1); + + const slotElement = expander.locator('slot[name="header-icon"]'); + await expect(slotElement).toHaveCount(1); + }); +}); diff --git a/src/expander/Expander.stories.ts b/src/expander/Expander.stories.ts new file mode 100644 index 000000000..73d81cce9 --- /dev/null +++ b/src/expander/Expander.stories.ts @@ -0,0 +1,210 @@ +import { html, nothing } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { ifNotEmpty } from '../utils/Directives.js'; +import { assignToSlot, ComponentStoryFormat, getSourceFromLit, raw } from '../utils/StoryUtils.js'; + +import '../label/Label.js'; +import '../icon/Icon.js'; +import './Expander.js'; +import './ExpanderGroup.js'; + +const buttonAlignment = ['left', 'right'] as const; + +interface Args { + label: string; + disabled: boolean; + expanded: boolean; + buttonAlignment: (typeof buttonAlignment)[number]; + '[Default Slot]': string; + expand_icon: string; + header_icon: string; +} + +export const Interactive: ComponentStoryFormat = { + render: (args: Args) => html` + + ${args.expand_icon ? html`${'\r\n'}${unsafeHTML(assignToSlot('expand-icon', args.expand_icon))}` : nothing} + ${args.header_icon ? html`${'\r\n'}${unsafeHTML(assignToSlot('header-icon', args.header_icon))}` : nothing} + ${args['[Default Slot]'] ? html`${'\r\n'}${unsafeHTML(args['[Default Slot]'])}` : nothing} + + `, + name: 'Interactive', + frameworkSources: [ + { + framework: 'Vue', + load: (args) => + getSourceFromLit(Interactive!.render!(args), undefined, (s) => + s.replace(' disabled', ' :disabled="true"').replace(' expanded', ' :expanded="true"') + ) + } + ], + args: { + label: 'Interactive Expander', + '[Default Slot]': raw``, + disabled: false, + expanded: false, + buttonAlignment: 'right', + expand_icon: '', + header_icon: '' + } +}; + +export const Disabled: ComponentStoryFormat = { + render: (args: Args) => html` + + + + `, + name: 'Disabled', + frameworkSources: [ + { + framework: 'Vue', + load: (args) => getSourceFromLit(Disabled!.render!(args), undefined, (s) => s.replace(' disabled', ' :disabled="true"')) + }, + { + framework: 'React', + load: (args) => `import { OmniExpander } from "@capitec/omni-components-react/expander"; +import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + +;` + } + ], + description: 'Prevent interaction (expanding/collapsing).', + args: { + label: 'Disabled expander', + disabled: true + } +}; + +export const Button_Alignment: ComponentStoryFormat = { + render: (args: Args) => html` + + + + `, + frameworkSources: [ + { + framework: 'React', + load: (args) => `import { OmniExpander } from "@capitec/omni-components-react/expander"; +import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + +;` + } + ], + name: 'Button Alignment', + description: 'Toggle where the expand button should be oriented.', + args: { + label: 'Left aligned button', + buttonAlignment: 'left' + } +}; + +export const Expanded: ComponentStoryFormat = { + render: (args: Args) => html` + + + + `, + name: 'Expanded', + frameworkSources: [ + { + framework: 'Vue', + load: (args) => getSourceFromLit(Expanded!.render!(args), undefined, (s) => s.replace(' expanded', ' :expanded="true"')) + }, + { + framework: 'React', + load: (args) => `import { OmniExpander } from "@capitec/omni-components-react/expander"; +import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + +;` + } + ], + description: 'Toggle expander expanded state', + args: { + label: 'Expanded expander state', + expanded: true + } +}; + +export const Expand_Icon: ComponentStoryFormat = { + render: (args: Args) => html` + + ${unsafeHTML(args.expand_icon)} + + + `, + frameworkSources: [ + { + framework: 'React', + load: (args) => `import { OmniExpander } from "@capitec/omni-components-react/expander"; +import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + + +;` + } + ], + name: 'Slotted Expand Icon', + description: 'Custom slotted expand icon', + args: { + label: 'Slotted Expand Icon', + expand_icon: raw`` + } +}; + +export const Header_Icon: ComponentStoryFormat = { + render: (args: Args) => html` + + ${unsafeHTML(args.header_icon)} + + + `, + frameworkSources: [ + { + framework: 'React', + load: (args) => `import { OmniExpander } from "@capitec/omni-components-react/expander"; +import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + + +;` + } + ], + name: 'Slotted Header Icon', + description: 'Custom slotted header icon', + args: { + label: 'Slotted Header Icon', + header_icon: raw`` + } +}; diff --git a/src/expander/Expander.ts b/src/expander/Expander.ts new file mode 100644 index 000000000..f71aa8422 --- /dev/null +++ b/src/expander/Expander.ts @@ -0,0 +1,449 @@ +import { css, html, nothing, TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { OmniElement } from '../core/OmniElement.js'; +import '../icons/ChevronDown.icon.js'; +import '../label/Label.js'; + +/** + * Component that groups together content in an expanded box. + * + * @import + * ```js + * import '@capitec/omni-components/expander'; + * ``` + * @example + * html``` + * + * + * + * ``` + * @element omni-expander + * + * @slot - Content to render inside the expander once expanded. + * @slot expand-icon - Replaces the expand icon by default this will be the omni-chevron-down-icon. + * @slot header-icon - Replaces the icon in the header which is usually placed on the opposite end of the expand icon. + * + * @fires expand - Dispatched when the expander is expanded. + * @fires collapse - Dispatched when the expander is collapsed. + * + * @cssprop --omni-expander-header-min-height - Expander component minimum height. + * @cssprop --omni-expander-header-max-height - Expander component maximum height. + * + * @cssprop --omni-expander-width - Expander component width. + * @cssprop --omni-expander-background - Expander component background. + * + * @cssprop --omni-expander-expanded-height - Expander component expanded height. + * + * @cssprop --omni-expander-header-width - Expander header width. + * @cssprop --omni-expander-header-height - Expander header height. + * @cssprop --omni-expander-header-padding - Expander header padding. + * @cssprop --omni-expander-header-border-top - Expander header border top. + * + * @cssprop --omni-expander-header-hover-background - Expander header hover background. + * + * @cssprop --omni-expander-header-label-font-color - Expander header label font color. + * @cssprop --omni-expander-header-label-font-size - Expander header label font size. + * @cssprop --omni-expander-header-label-font-weight - Expander header label font weight. + * + * @cssprop --omni-expander-header-disabled-background - Expander header disabled background. + * + * @cssprop --omni-expander-content-width - Expander content width. + * @cssprop --omni-expander-content-height - Expander content height. + * @cssprop --omni-expander-content-border - Expander content border. + * @cssprop --omni-expander-content-padding - Expander content padding. + * + * @cssprop --omni-expander-content-closed-padding-top - Expander content closed top padding. + * @cssprop --omni-expander-content-closed-padding-bottom - Expander content closed bottom padding. + * + * @cssprop --omni-expander-content-expanded-border-bottom - Bottom border of the expander content. + * + * @cssprop --omni-expander-header-icon-container-padding - Expander header icon container padding. + * + * @cssprop --omni-expander-header-icon-slot-width - Expander header icon slot width. + * @cssprop --omni-expander-header-icon-slot-height - Expander header icon slot height. + * + * @cssprop --omni-expander-expand-icon-container-padding - Expander expand icon container padding. + * + * @cssprop --omni-expander-expand-icon-width - Expander expand icon width. + * @cssprop --omni-expander-expand-icon-height - Expander expand icon height. + * @cssprop --omni-expander-expand-icon-color - Expander expand icon color. + * + * @cssprop --omni-expander-expanding-container-padding-top - Expander expanding content top padding. + * @cssprop --omni-expander-expanding-container-padding-bottom - Expander expanding content bottom padding. + * + */ +@customElement('omni-expander') +export class Expander extends OmniElement { + /** + * Expander component label. + * @attr + */ + @property({ type: String, reflect: true }) label?: string; + + /** + * Indicator if the expander is expanded. + * @attr + */ + @property({ type: Boolean, reflect: true }) expanded?: boolean; + + /** + * Indicator if the expander is disabled. + * @attr + */ + @property({ type: Boolean, reflect: true }) disabled?: boolean; + + /** + * Indicate where the Expander button should be positioned + * @attr [button-alignment] + */ + @property({ type: String, reflect: true, attribute: 'button-alignment' }) buttonAlignment: 'left' | 'right' = 'right'; + + override connectedCallback(): void { + super.connectedCallback(); + this.addEventListener('animationend', this._animationCompleted.bind(this), { + capture: true + }); + } + + override disconnectedCallback() { + // Stop listening for child label change events. + this.removeEventListener(`animationend`, this._animationCompleted.bind(this)); + + // Ensure the component is cleaned up correctly. + super.disconnectedCallback(); + } + + _headerClick(e: MouseEvent) { + // Prevent the event from bubbling up. + e.stopPropagation(); + + // Ignore the click event if the item is disabled. + if (this.disabled) { + return; + } + + // Toggle the expanded state of the item. + if (this.expanded) { + this._collapse(); + } else { + this._expand(); + } + } + + _animationCompleted() { + // Remove the expanding animation, if set. + if (this.hasAttribute(`expanding`)) { + this.removeAttribute(`expanding`); + this.expanded = true; + } + + // Remove the collapsing animation, if set. + if (this.hasAttribute(`collapsing`)) { + this.removeAttribute(`collapsing`); + this.expanded = false; + } + } + + _expand() { + const { matches: motionOK } = window.matchMedia('(prefers-reduced-motion: no-preference)'); + if (motionOK) { + // Ignore the request to expand if the component is already expanded. + if (this.expanded === true || this.hasAttribute(`expanding`)) { + return; + } + + // Trigger the expanding animation. + this.removeAttribute(`collapsing`); + this.setAttribute(`expanding`, ``); + } else { + this.expanded = true; + } + + // Notify any direct subscribers that the component was expanded. + this.dispatchEvent(new CustomEvent(`expand`)); + } + + _collapse() { + const { matches: motionOK } = window.matchMedia('(prefers-reduced-motion: no-preference)'); + + if (motionOK) { + // Ignore the request to collapse if the component is already collapsed. + if (this.expanded === false || this.hasAttribute(`collapsing`)) { + return; + } + + // Trigger the collapsing animation. + this.removeAttribute(`expanding`); + this.setAttribute(`collapsing`, ``); + } else { + this.expanded = false; + } + + // Notify any direct subscribers that the component was collapsed. + this.dispatchEvent(new CustomEvent(`collapse`)); + } + + static override get styles() { + return [ + super.styles, + + css` + :host { + min-height: var(--omni-expander-header-min-height, 50px); + max-height: var(--omni-expander-header-max-height, 50px); + } + `, + css` + + + :host { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + width: var(--omni-expander-width, 100%); + background: var(--omni-expander-background, var(--omni-background-color)); + } + + :host([expanded]) { + max-height: unset; + height: var(--omni-expander-expanded-height, 200px); + } + + /* HEADER STYLES */ + + :host > .header { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + width: var(--omni-expander-header-width, 100%); + height: var(--omni-expander-header-height, 50px); + padding: var(--omni-expander-header-padding, 10px); + border-top: var(--omni-expander-header-border-top, 1px solid var(--omni-primary-color)); + cursor: pointer; + } + + :host > .header:hover { + background: var(--omni-expander-header-hover-background, var(--omni-background-hover-color)); + } + + + :host > .header > omni-label { + --omni-label-font-color: var(--omni-expander-header-label-font-color, var(--omni-font-color)); + --omni-label-default-font-size: var(--omni-expander-header-label-font-size, var(--omni-font-size)); + --omni-label-default-font-weight: var(--omni-expander-header-label-font-weight, var(--omni-font-weight)); + margin-right: auto; + cursor: pointer; + } + + :host([expanded]) > .header { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + :host([expanded]) > .header > .expand-icon-container { + transform: rotate(180deg); + } + + :host(:not([expanded])) > .header > .expand-icon-container { + transform: none; + } + + :host([disabled]) > .header { + background: var(--omni-expander-header-disabled-background ,var(--omni-disabled-background-color)); + } + + /* EXPANDER CONTENT STYLES */ + :host > .expander-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + width: var(--omni-expander-content-width, 100%); + height: var(--omni-expander-content-height, 100%); + + flex: 1 1 auto; + + border-left: var(--omni-expander-content-border, 1px solid var(--omni-primary-color)); + border-right: var(--omni-expander-content-border, 1px solid var(--omni-primary-color)); + border-top: var(--omni-expander-content-border, 1px solid var(--omni-primary-color)); + + padding: var(--omni-expander-content-padding, 10px); + } + + :host(:not([expanded])) > .expander-content { + overflow: hidden; + padding-top: var(--omni-expander-content-closed-padding-top, 0px); + padding-bottom: var(--omni-expander-content-closed-padding-bottom, 0px); + } + + :host([expanding]) > .expander-content, + :host([expanded]) > .expander-content { + border-bottom: var(--omni-expander-content-expanded-border-bottom, 1px solid var(--omni-primary-color)); + } + + + + /* HEADER ICON */ + + .header-icon-container { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + cursor: pointer; + padding: var(--omni-expander-header-icon-container-padding, 10px 10px); + } + + ::slotted([slot='header-icon']) { + width: var(--omni-expander-header-icon-slot-width, 20px); + height: var(--omni-expander-header-icon-slot-height, 20px); + } + + + /* EXPAND ICON */ + .expand-icon-container { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + cursor: pointer; + padding: var(--omni-expander-expand-icon-container-padding, 10px 10px); + } + + .expand-icon { + width: var(--omni-expander-expand-icon-width, 20px); + height: var(--omni-expander-expand-icon-height, 20px); + fill: var(--omni-expander-expand-icon-color, var(--omni-primary-color)); + } + + ::slotted([slot='expand-icon']) { + height: var(--omni-expander-expand-icon-height, 20px); + width: var(--omni-expander-expand-icon-width, 20px); + } + + /* ANIMATIONS */ + + :host([expanding]) { + animation: expand 0.5s; + animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1); + animation-fill-mode: forwards; + } + + :host([expanding]) > .header > .expand-icon-container { + transition: all 0.15s linear 0s; + transform: rotate(180deg); + } + + :host([collapsing]) > .header > .expand-icon-container { + transition: all 0.15s linear 0s; + transform: none; + } + + :host([expanding]) > .expander-content { + transition: padding linear 0.2s; + padding-top: var(--omni-expander-expanding-container-padding-top, 10px); + padding-bottom: var(--omni-expander-expanding-container-padding-bottom 10px); + } + + :host([collapsing]) > .expander-content { + overflow: hidden; + } + + /* Hide scrollbar for Chrome, Safari and Opera */ + :host([collapsing]) > .expander-content::-webkit-scrollbar { + display: none; + } + + /* Hide scrollbar for IE and Edge */ + :host([collapsing]) > .expander-content { + -ms-overflow-style: none; + } + + :host([collapsing]) { + animation: collapse 0.5s; + animation-timing-function: cubic-bezier(0.2, 0.8, 0.5, 1); + animation-fill-mode: forwards; + } + + @media (prefers-reduced-motion) { + :host([expanding]) { + animation: unset; + } + + :host([collapsing]) { + animation: unset; + } + } + + @keyframes expand { + 0% { + max-height: var(--omni-expander-header-height, 50px); + height: var(--omni-expander-header-height, 50px); + } + 99% { + max-height: var(--omni-expander-expanding-max-height, 100vh); + height: var(--omni-expander-height, 200px); + } + 100% { + max-height: unset; + height: var(--omni-expander-height, 200px); + } + } + + @keyframes collapse { + 0% { + max-height: var(--omni-expander-height, 200px); + overflow: hidden; + } + 100% { + max-height: var(--omni-expander-header-height, 50px); + overflow: hidden; + } + } + + ` + ]; + } + + protected override render(): TemplateResult { + return html` +
+ ${this._renderHeader()} +
+
+ +
+ + `; + } + + _renderHeader(): TemplateResult { + return html` + ${ + this.buttonAlignment === 'left' + ? html`
` + : this._renderIcon() + } + ${this.label ? html`` : nothing} + ${ + this.buttonAlignment === 'right' + ? html`
` + : this._renderIcon() + } + `; + } + + _renderIcon(): TemplateResult { + return html` +
+ +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'omni-expander': Expander; + } +} diff --git a/src/expander/ExpanderGroup.spec.ts b/src/expander/ExpanderGroup.spec.ts new file mode 100644 index 000000000..75044637a --- /dev/null +++ b/src/expander/ExpanderGroup.spec.ts @@ -0,0 +1,54 @@ +import { test, expect, mockEventListener, withCoverage } from '../utils/JestPlaywright.js'; + +test(`Expander Group - Visual and Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander-group/'); + const expanderGroup = page.locator('.Interactive').getByTestId('test-expander-group'); + await expect(expanderGroup).toHaveCount(1); + + await expect(expanderGroup).toHaveScreenshot('expander-group-initial.png'); + await expect(expanderGroup).toHaveAttribute('expand-mode', 'single'); + + // Get all the omni-expanders + const nestedExpanders = expanderGroup.locator('omni-expander'); + await expect(nestedExpanders).toHaveCount(2); + + // Open the first expander. + const expander = nestedExpanders.first(); + await expander.click(); + + await expect(expanderGroup).toHaveScreenshot('expander-group-expanded.png'); + + const secondExpander = nestedExpanders.nth(1); + await secondExpander.click(); + + // Take a screenshot of the expected behaviour of the second expander expanding and the first one closing + await expect(expanderGroup).toHaveScreenshot('expander-group-second-expanded.png'); + }); +}); + +test(`Expander Group - Expand Mode Behaviour`, async ({ page }) => { + await withCoverage(page, async () => { + await page.goto('/components/expander-group/'); + const expanderGroup = page.locator('.Expand_Mode').getByTestId('test-expander-group'); + await expect(expanderGroup).toHaveCount(1); + // Check that the expander group has the expand-mode attribute set to multiple. + await expect(expanderGroup).toHaveAttribute('expand-mode', 'multiple'); + + // Get all the omni-expanders. + const nestedExpanders = expanderGroup.locator('omni-expander'); + await expect(nestedExpanders).toHaveCount(2); + + // Open the first expander. + const expander = nestedExpanders.first(); + await expander.click(); + + await expect(expanderGroup).toHaveScreenshot('expander-group-expanded.png'); + + const secondExpander = nestedExpanders.nth(1); + await secondExpander.click(); + + // Take a screenshot of the expected behaviour of both expanders being open due to the expander-groups expand-mode attribute being set to multiple. + await expect(expanderGroup).toHaveScreenshot('expander-group-both-expanded.png'); + }); +}); diff --git a/src/expander/ExpanderGroup.stories.ts b/src/expander/ExpanderGroup.stories.ts new file mode 100644 index 000000000..7e96ee4b6 --- /dev/null +++ b/src/expander/ExpanderGroup.stories.ts @@ -0,0 +1,77 @@ +import { html, nothing } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { ComponentStoryFormat, raw } from '../utils/StoryUtils.js'; + +import '../label/Label.js'; +import './Expander.js'; +import './ExpanderGroup.js'; + +interface Args { + expandMode: string; + '[Default Slot]': string; +} + +export const Interactive: ComponentStoryFormat = { + render: (args: Args) => html` + + ${args['[Default Slot]'] ? html`${'\r\n'}${unsafeHTML(args['[Default Slot]'])}` : nothing} + + `, + name: 'Interactive', + description: () => html`

+ The <omni-expander-group> should be used if grouping multiple <omni-expander> components together. +

`, + args: { + expandMode: 'single', + '[Default Slot]': raw` + + + + + ` + } +}; + +export const Expand_Mode: ComponentStoryFormat = { + render: (args: Args) => html` + + ${args['[Default Slot]'] ? html`${'\r\n'}${unsafeHTML(args['[Default Slot]'])}` : nothing} + + `, + name: 'Expand Mode', + frameworkSources: [ + { + framework: 'React', + load: (args) => `import { OmniExpanderGroup, OmniExpander } from "@capitec/omni-components-react/expander"; + import { OmniLabel } from "@capitec/omni-components-react/label"; + +const App = () => + + + + + + + +;` + } + ], + description: () => html`

+ The <omni-expander-group> opens one <omni-expander> by default, to expand mutiple set the attribute expand-mode="multiple". +

`, + args: { + expandMode: 'multiple', + '[Default Slot]': raw` + + + + + ` + } +}; diff --git a/src/expander/ExpanderGroup.ts b/src/expander/ExpanderGroup.ts new file mode 100644 index 000000000..94f182abd --- /dev/null +++ b/src/expander/ExpanderGroup.ts @@ -0,0 +1,112 @@ +import { css, html, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import { OmniElement } from '../core/OmniElement.js'; + +/** + * Layout container that groups expanders. + * + * @import + * ```js + * import '@capitec/omni-components/expander'; + * ``` + * @example + * html``` + * + * + * + * + * + * + * + * + * ``` + * + * @element omni-expander-group + * + * @slot - Default slot to slot multiple expanders. + * + * @cssprop --omni-expander-group-container-min-width - Expander group min width. + * @cssprop --omni-expander-group-container-min-height - Expander group min height. + * + * @cssprop --omni-expander-group-container-margin-bottom - Expander group container margin bottom. + */ +@customElement('omni-expander-group') +export class ExpanderGroup extends OmniElement { + /** + * Expander component label. + * @attr [expand-mode] + */ + @property({ type: String, reflect: true, attribute: 'expand-mode' }) expandMode?: 'multiple' | 'single' = 'single'; + + override connectedCallback(): void { + super.connectedCallback(); + this.addEventListener('expand', this._expanderExpanded.bind(this), { + capture: true + }); + } + + override disconnectedCallback() { + // Ensure the component is cleaned up correctly. + super.disconnectedCallback(); + } + + _expanderExpanded(e: Event) { + if (this.expandMode === 'single') { + const expanders = Array.from(this.children); + expanders.forEach((expander: any) => { + if (expander !== e.target) { + expander._collapse(); + } + }); + } + } + + static override get styles() { + return [ + super.styles, + css` + :host { + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + min-width: var(--omni-expander-group-container-min-width, 200px); + min-height: var(--omni-expander-group-container-min-height, 100px); + } + + .group-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + } + + ::slotted(*) { + margin-bottom: var(--omni-expander-group-container-margin-bottom, 0px); + } + + ::slotted(*[expanded]) { + flex: 1 1 auto; + } + + ::slotted(omni-expander:not(:last-of-type)) { + --omni-expander-content-expanded-border-bottom : none; + } + ` + ]; + } + + protected override render(): TemplateResult { + return html` +
+ +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'omni-expander-group': ExpanderGroup; + } +} diff --git a/src/expander/README.md b/src/expander/README.md new file mode 100644 index 000000000..6cb50cd22 --- /dev/null +++ b/src/expander/README.md @@ -0,0 +1,168 @@ +# omni-expander + +Component that groups together content in an expanded box. + +## Example + +html + +``` + + + +``` + +## Properties + +| Property | Attribute | Modifiers | Type | Default | Description | +|-------------------|--------------------|-----------|------------------------|---------|--------------------------------------------------| +| `buttonAlignment` | `button-alignment` | | `"left" \| "right"` | "right" | Indicate where the Expander button should be positioned | +| `dir` | | | `string` | | | +| `disabled` | `disabled` | | `boolean \| undefined` | | Indicator if the expander is disabled. | +| `expanded` | `expanded` | | `boolean \| undefined` | | Indicator if the expander is expanded. | +| `label` | `label` | | `string \| undefined` | | Expander component label. | +| `lang` | | | `string` | | | +| `override` | `override` | | | | Used to set the base direction of text for display | +| `styles` | | readonly | `CSSResultGroup[]` | | | + +## Events + +| Event | Description | +|------------|--------------------------------------------| +| `collapse` | Dispatched when the expander is collapsed. | +| `expand` | Dispatched when the expander is expanded. | + +## Slots + +| Name | Description | +|---------------------|--------------------------------------------------| +| | Content to render inside the expander once expanded. | +| `expand-icon` | Replaces the expand icon by default this will be the omni-chevron-down-icon. | +| `header-icon` | Replaces the icon in the header which is usually placed on the opposite end of the expand icon. | +| `loading_indicator` | Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called | + +## CSS Custom Properties + +| Property | Description | +|--------------------------------------------------|--------------------------------------------| +| `--omni-expander-background` | Expander component background. | +| `--omni-expander-content-border` | Expander content border. | +| `--omni-expander-content-closed-padding-bottom` | Expander content closed bottom padding. | +| `--omni-expander-content-closed-padding-top` | Expander content closed top padding. | +| `--omni-expander-content-expanded-border-bottom` | Bottom border of the expander content. | +| `--omni-expander-content-height` | Expander content height. | +| `--omni-expander-content-padding` | Expander content padding. | +| `--omni-expander-content-width` | Expander content width. | +| `--omni-expander-expand-icon-color` | Expander expand icon color. | +| `--omni-expander-expand-icon-container-padding` | Expander expand icon container padding. | +| `--omni-expander-expand-icon-height` | Expander expand icon height. | +| `--omni-expander-expand-icon-width` | Expander expand icon width. | +| `--omni-expander-expanded-height` | Expander component expanded height. | +| `--omni-expander-expanding-container-padding-bottom` | Expander expanding content bottom padding. | +| `--omni-expander-expanding-container-padding-top` | Expander expanding content top padding. | +| `--omni-expander-header-border-top` | Expander header border top. | +| `--omni-expander-header-disabled-background` | Expander header disabled background. | +| `--omni-expander-header-height` | Expander header height. | +| `--omni-expander-header-hover-background` | Expander header hover background. | +| `--omni-expander-header-icon-container-padding` | Expander header icon container padding. | +| `--omni-expander-header-icon-slot-height` | Expander header icon slot height. | +| `--omni-expander-header-icon-slot-width` | Expander header icon slot width. | +| `--omni-expander-header-label-font-color` | Expander header label font color. | +| `--omni-expander-header-label-font-size` | Expander header label font size. | +| `--omni-expander-header-label-font-weight` | Expander header label font weight. | +| `--omni-expander-header-max-height` | Expander component maximum height. | +| `--omni-expander-header-min-height` | Expander component minimum height. | +| `--omni-expander-header-padding` | Expander header padding. | +| `--omni-expander-header-width` | Expander header width. | +| `--omni-expander-width` | Expander component width. | +| `--omni-theme-accent-active-color` | Theme accent active color. | +| `--omni-theme-accent-color` | Theme accent color. | +| `--omni-theme-accent-hover-color` | Theme accent hover color. | +| `--omni-theme-background-active-color` | Theme background active color. | +| `--omni-theme-background-color` | Theme background color. | +| `--omni-theme-background-hover-color` | Theme background hover color. | +| `--omni-theme-border-radius` | Theme border radius. | +| `--omni-theme-border-width` | Theme border width. | +| `--omni-theme-box-shadow` | Theme box shadow. | +| `--omni-theme-box-shadow-color` | Theme inactive color. | +| `--omni-theme-disabled-background-color` | Theme disabled background color. | +| `--omni-theme-disabled-border-color` | Theme disabled border color. | +| `--omni-theme-error-border-color` | Theme error border color. | +| `--omni-theme-error-font-color` | Theme disabled background color. | +| `--omni-theme-font-color` | Theme font color. | +| `--omni-theme-font-family` | Theme font family. | +| `--omni-theme-font-size` | Theme font size. | +| `--omni-theme-font-weight` | Theme font weight. | +| `--omni-theme-hint-font-color` | Theme hint font color. | +| `--omni-theme-inactive-color` | Theme inactive color. | +| `--omni-theme-primary-active-color` | Theme primary active color. | +| `--omni-theme-primary-color` | Theme primary color. | +| `--omni-theme-primary-hover-color` | Theme primary hover color. | + + +# omni-expander-group + +Layout container that groups expanders. + +## Example + +html + +``` + + + + + + + + +``` + +## Properties + +| Property | Attribute | Modifiers | Type | Default | Description | +|--------------|---------------|-----------|---------------------------------------|----------|--------------------------------------------------| +| `dir` | | | `string` | | | +| `expandMode` | `expand-mode` | | `"multiple" \| "single" \| undefined` | "single" | Expander component label. | +| `lang` | | | `string` | | | +| `override` | `override` | | | | Used to set the base direction of text for display | +| `styles` | | readonly | `CSSResultGroup[]` | | | + +## Slots + +| Name | Description | +|---------------------|--------------------------------------------------| +| | Default slot to slot multiple expanders. | +| `loading_indicator` | Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called | + +## CSS Custom Properties + +| Property | Description | +|-------------------------------------------------|-----------------------------------------| +| `--omni-expander-group-container-margin-bottom` | Expander group container margin bottom. | +| `--omni-expander-group-container-min-height` | Expander group min height. | +| `--omni-expander-group-container-min-width` | Expander group min width. | +| `--omni-theme-accent-active-color` | Theme accent active color. | +| `--omni-theme-accent-color` | Theme accent color. | +| `--omni-theme-accent-hover-color` | Theme accent hover color. | +| `--omni-theme-background-active-color` | Theme background active color. | +| `--omni-theme-background-color` | Theme background color. | +| `--omni-theme-background-hover-color` | Theme background hover color. | +| `--omni-theme-border-radius` | Theme border radius. | +| `--omni-theme-border-width` | Theme border width. | +| `--omni-theme-box-shadow` | Theme box shadow. | +| `--omni-theme-box-shadow-color` | Theme inactive color. | +| `--omni-theme-disabled-background-color` | Theme disabled background color. | +| `--omni-theme-disabled-border-color` | Theme disabled border color. | +| `--omni-theme-error-border-color` | Theme error border color. | +| `--omni-theme-error-font-color` | Theme disabled background color. | +| `--omni-theme-font-color` | Theme font color. | +| `--omni-theme-font-family` | Theme font family. | +| `--omni-theme-font-size` | Theme font size. | +| `--omni-theme-font-weight` | Theme font weight. | +| `--omni-theme-hint-font-color` | Theme hint font color. | +| `--omni-theme-inactive-color` | Theme inactive color. | +| `--omni-theme-primary-active-color` | Theme primary active color. | +| `--omni-theme-primary-color` | Theme primary color. | +| `--omni-theme-primary-hover-color` | Theme primary hover color. | diff --git a/src/expander/index.ts b/src/expander/index.ts new file mode 100644 index 000000000..9af35dd98 --- /dev/null +++ b/src/expander/index.ts @@ -0,0 +1,2 @@ +export * from './Expander.js'; +export * from './ExpanderGroup.js'; diff --git a/src/modal/Modal.ts b/src/modal/Modal.ts index c67e856f9..7a0084b6d 100644 --- a/src/modal/Modal.ts +++ b/src/modal/Modal.ts @@ -345,6 +345,7 @@ export class Modal extends OmniElement { override render(): TemplateResult { return html`
diff --git a/src/password-field/PasswordField.ts b/src/password-field/PasswordField.ts index f3b48bb6b..4dc909277 100644 --- a/src/password-field/PasswordField.ts +++ b/src/password-field/PasswordField.ts @@ -1,4 +1,4 @@ -import { css, html } from 'lit'; +import { PropertyValueMap, css, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { ClassInfo, classMap } from 'lit/directives/class-map.js'; import { ifDefined, OmniFormElement } from '../core/OmniFormElement.js'; @@ -74,7 +74,6 @@ export class PasswordField extends OmniFormElement { private _inputElement?: HTMLInputElement; @query('.container') private container?: HTMLDivElement; - private _value? = ''; override connectedCallback() { super.connectedCallback(); @@ -90,26 +89,17 @@ export class PasswordField extends OmniFormElement { this._setInputValue(); } - constructor() { - super(); - this._value = this.value ?? ''; - Object.defineProperty(this, 'value', { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v ?? ''; - this._setInputValue(); - if (this._value) { - this.container?.classList?.add('float-label'); - this.container?.classList?.remove('no-float-label'); - } else { - this.container?.classList?.remove('float-label'); - this.container?.classList?.add('no-float-label'); - } - this.requestUpdate(); + protected override updated(_changedProperties: PropertyValueMap | Map): void { + if (_changedProperties.has('value')) { + if (this.value) { + this.container?.classList?.add('float-label'); + this.container?.classList?.remove('no-float-label'); + } else { + this.container?.classList?.remove('float-label'); + this.container?.classList?.add('no-float-label'); } - }); + this._setInputValue(); + } } // Set the value of the input component. diff --git a/src/pin-field/PinField.ts b/src/pin-field/PinField.ts index 54f461c85..ee450e67d 100644 --- a/src/pin-field/PinField.ts +++ b/src/pin-field/PinField.ts @@ -1,4 +1,4 @@ -import { css, html } from 'lit'; +import { PropertyValueMap, css, html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { ClassInfo, classMap } from 'lit/directives/class-map.js'; import { OmniFormElement } from '../core/OmniFormElement.js'; @@ -83,7 +83,6 @@ export class PinField extends OmniFormElement { private showPin?: boolean = false; // eslint-disable-next-line @typescript-eslint/no-explicit-any private isWebkit?: boolean; - private _value? = ''; override connectedCallback() { super.connectedCallback(); @@ -110,6 +109,19 @@ export class PinField extends OmniFormElement { this._sanitiseValue(); } + protected override updated(_changedProperties: PropertyValueMap | Map): void { + if (_changedProperties.has('value')) { + if (this.value) { + this.container?.classList?.add('float-label'); + this.container?.classList?.remove('no-float-label'); + } else { + this.container?.classList?.remove('float-label'); + this.container?.classList?.add('no-float-label'); + } + this._sanitiseValue(); + } + } + override focus(options?: FocusOptions | undefined): void { if (this._inputElement) { this._inputElement.focus(options); @@ -118,37 +130,17 @@ export class PinField extends OmniFormElement { } } - constructor() { - super(); - this._value = this.value ?? ''; - Object.defineProperty(this, 'value', { - get: () => { - return this._value; - }, - set: (v) => { - this._value = v ?? ''; - this._sanitiseValue(); - if (this._value) { - this.container?.classList?.add('float-label'); - this.container?.classList?.remove('no-float-label'); - } else { - this.container?.classList?.remove('float-label'); - this.container?.classList?.add('no-float-label'); - } - this.requestUpdate(); - } - }); - } - // Check if the value provided is valid and shorten according to the max length if provided, if there is invalid alpha characters they are removed. _sanitiseValue() { if (this.value) { if (this.maxLength && (this.value as string).length > this.maxLength) { - this._value = this.value?.slice(0, this.maxLength) as string; + this.value = this.value?.slice(0, this.maxLength) as string; } + } else { + this.value = ''; } - this._value = this.value?.toString()?.replace(/[^\d]/gi, ''); + this.value = this.value?.toString()?.replace(/[^\d]/gi, ''); if (this._inputElement) { this._inputElement.value = this.value as string; diff --git a/src/select/Select.spec.ts b/src/select/Select.spec.ts index e0a15ed24..9f67c10cc 100644 --- a/src/select/Select.spec.ts +++ b/src/select/Select.spec.ts @@ -74,6 +74,7 @@ test(`Select - Async Per Item Behaviour`, async ({ page, isMobile }) => { await page.waitForSelector('[data-testid]', {}); const selectComponent = page.locator('.Async_Per_Item').getByTestId('test-select'); + selectComponent.waitFor({ state: 'visible', timeout: 300 }); await expect(selectComponent).toHaveScreenshot('select-initial.png'); const valueChange = await mockEventListener(selectComponent, 'change'); @@ -162,7 +163,7 @@ test(`Select - Selection Render Behaviour`, async ({ page, isMobile }) => { const args = await getStoryArgs(page, 'Selection_Renderer'); const argItems = args.items as Record[]; const selectComponent = page.locator('.Selection_Renderer').getByTestId('test-select'); - await page.waitForTimeout(100); + selectComponent.waitFor({ state: 'visible', timeout: 300 }); await expect(selectComponent).toHaveScreenshot('select-initial.png'); const valueChange = await mockEventListener(selectComponent, 'change'); diff --git a/src/select/Select.ts b/src/select/Select.ts index c89a16da2..77bab5092 100644 --- a/src/select/Select.ts +++ b/src/select/Select.ts @@ -711,7 +711,7 @@ export class Select extends OmniFormElement { protected override renderPicker() { if (this._isMobile) { return html` - + ${this._isMobile && this.label ? html`
${this.label}
` : nothing} ${this._renderSearchField()}
${until( diff --git a/src/tab/TabGroup.ts b/src/tab/TabGroup.ts index 8cae09261..a8d9a193a 100644 --- a/src/tab/TabGroup.ts +++ b/src/tab/TabGroup.ts @@ -36,6 +36,8 @@ import { TabHeader } from './TabHeader.js'; * @slot - All omni-tab components that are managed by this component. * @slot header - Optional omni-tab-header components associated with each omni-tab component. * + * @cssprop --omni-tab-group-tab-bar-overflow-x - Tabs tab bar overflow x. + * @cssprop --omni-tab-group-tab-bar-overflow-y - Tabs tab bar overflow y. * @cssprop --omni-tab-group-tab-bar-width - Tabs tab bar width. * @cssprop --omni-tab-group-tab-bar-height - Tabs tab bar height. * @cssprop --omni-tab-group-tab-bar-border-bottom - Tabs tab bar bottom border. @@ -150,6 +152,8 @@ export class TabGroup extends OmniElement { display: flex; flex-direction: row; align-items: center; + overflow-x: var(--omni-tab-group-tab-bar-overflow-x, auto); + overflow-y: var(--omni-tab-group-tab-bar-overflow-y, hidden); width: var(--omni-tab-group-tab-bar-width, 100%); height: var(--omni-tab-group-tab-bar-height, 50px); border-bottom: var(--omni-tab-group-tab-bar-border-bottom, none);