Merge pull request #222 from capitec/develop

Next RC to main
capitec · Dec 11, 2023 · 2520518 · 2520518
2 parents 7dd2caf + ba0d0f5
commit 2520518
Show file tree

Hide file tree

Showing 75 changed files with 2,211 additions and 40 deletions.
diff --git a/.tooling/scripts/eleventy-config.mjs b/.tooling/scripts/eleventy-config.mjs
@@ -95,7 +95,9 @@ export default async config => {
         }
     });
 
-    config.setBrowserSyncConfig({
+    config.setServerOptions({
+        module: "@11ty/eleventy-server-browsersync",
+
         logLevel: 'info',
         server: {
             baseDir: process.env.ELEVENTY_BASE_PATH ? '.' : 'docs',
@@ -105,7 +107,8 @@ export default async config => {
             }
         },
         startPath: process.env.ELEVENTY_BASE_PATH ? process.env.ELEVENTY_BASE_PATH : '/'
-    });
+
+    })
 
     return {
         dir: {

diff --git a/...enshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-after.png b/...enshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-after.png
diff --git a/...nshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-dialog.png b/...nshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-dialog.png
diff --git a/...shots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...shots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...eenshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-open.png b/...eenshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Chrome/select-open.png
diff --git a/...nshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Safari/select-dialog.png b/...nshots/Select---Async-Per-Item-Behaviour/darwin/Mobile-Safari/select-dialog.png
diff --git a/.../screenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-after.png b/.../screenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-after.png
diff --git a/...creenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-initial.png b/...creenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-initial.png
diff --git a/...ts/Select---Async-Per-Item-Behaviour/darwin/chromium/select-items-container.png b/...ts/Select---Async-Per-Item-Behaviour/darwin/chromium/select-items-container.png
diff --git a/...s/screenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-open.png b/...s/screenshots/Select---Async-Per-Item-Behaviour/darwin/chromium/select-open.png
diff --git a/...ots/Select---Async-Per-Item-Behaviour/darwin/firefox/select-items-container.png b/...ots/Select---Async-Per-Item-Behaviour/darwin/firefox/select-items-container.png
diff --git a/...ts/screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-after.png b/...ts/screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-after.png
diff --git a/.../screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-initial.png b/.../screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-initial.png
diff --git a/...hots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-items-container.png b/...hots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-items-container.png
diff --git a/...sts/screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-open.png b/...sts/screenshots/Select---Async-Per-Item-Behaviour/darwin/webkit/select-open.png
diff --git a/...ots/Select---Custom-Control-Slot-Visual/darwin/Mobile-Chrome/custom-control.png b/...ots/Select---Custom-Control-Slot-Visual/darwin/Mobile-Chrome/custom-control.png
diff --git a/...hots/Select---Custom-Control-Slot-Visual/darwin/Mobile-Chrome/more-slot-svg.png b/...hots/Select---Custom-Control-Slot-Visual/darwin/Mobile-Chrome/more-slot-svg.png
diff --git a/...eenshots/Select---Custom-Control-Slot-Visual/darwin/chromium/arrow-slot-svg.png b/...eenshots/Select---Custom-Control-Slot-Visual/darwin/chromium/arrow-slot-svg.png
diff --git a/...eenshots/Select---Custom-Control-Slot-Visual/darwin/chromium/custom-control.png b/...eenshots/Select---Custom-Control-Slot-Visual/darwin/chromium/custom-control.png
diff --git a/...reenshots/Select---Custom-Control-Slot-Visual/darwin/firefox/arrow-slot-svg.png b/...reenshots/Select---Custom-Control-Slot-Visual/darwin/firefox/arrow-slot-svg.png
diff --git a/...reenshots/Select---Custom-Control-Slot-Visual/darwin/firefox/custom-control.png b/...reenshots/Select---Custom-Control-Slot-Visual/darwin/firefox/custom-control.png
diff --git a/...eenshots/Select---Custom-Search-Behaviour/darwin/Mobile-Chrome/select-after.png b/...eenshots/Select---Custom-Search-Behaviour/darwin/Mobile-Chrome/select-after.png
diff --git a/...nshots/Select---Custom-Search-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...nshots/Select---Custom-Search-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...s/screenshots/Select---Custom-Search-Behaviour/darwin/chromium/search-field.png b/...s/screenshots/Select---Custom-Search-Behaviour/darwin/chromium/search-field.png
diff --git a/...s/screenshots/Select---Custom-Search-Behaviour/darwin/chromium/select-after.png b/...s/screenshots/Select---Custom-Search-Behaviour/darwin/chromium/select-after.png
diff --git a/...screenshots/Select---Custom-Search-Behaviour/darwin/chromium/select-initial.png b/...screenshots/Select---Custom-Search-Behaviour/darwin/chromium/select-initial.png
diff --git a/...ots/Select---Custom-Search-Behaviour/darwin/chromium/select-items-container.png b/...ots/Select---Custom-Search-Behaviour/darwin/chromium/select-items-container.png
diff --git a/...ts/screenshots/Select---Custom-Search-Behaviour/darwin/firefox/search-field.png b/...ts/screenshots/Select---Custom-Search-Behaviour/darwin/firefox/search-field.png
diff --git a/...ts/screenshots/Select---Custom-Search-Behaviour/darwin/firefox/select-after.png b/...ts/screenshots/Select---Custom-Search-Behaviour/darwin/firefox/select-after.png
diff --git a/.../screenshots/Select---Custom-Search-Behaviour/darwin/firefox/select-initial.png b/.../screenshots/Select---Custom-Search-Behaviour/darwin/firefox/select-initial.png
diff --git a/...hots/Select---Custom-Search-Behaviour/darwin/firefox/select-items-container.png b/...hots/Select---Custom-Search-Behaviour/darwin/firefox/select-items-container.png
diff --git a/.../Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png b/.../Select---Custom-Search-Slot-Behaviour/darwin/webkit/select-items-container.png
diff --git a/...screenshots/Select---Disabled-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...screenshots/Select---Disabled-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...ests/screenshots/Select---Disabled-Behaviour/darwin/chromium/select-initial.png b/...ests/screenshots/Select---Disabled-Behaviour/darwin/chromium/select-initial.png
diff --git a/...screenshots/Select---Searchable-Behaviour/darwin/Mobile-Chrome/select-after.png b/...screenshots/Select---Searchable-Behaviour/darwin/Mobile-Chrome/select-after.png
diff --git a/...reenshots/Select---Searchable-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...reenshots/Select---Searchable-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...ests/screenshots/Select---Searchable-Behaviour/darwin/chromium/search-field.png b/...ests/screenshots/Select---Searchable-Behaviour/darwin/chromium/search-field.png
diff --git a/...ests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-after.png b/...ests/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-after.png
diff --git a/...ts/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png b/...ts/screenshots/Select---Searchable-Behaviour/darwin/chromium/select-initial.png
diff --git a/...nshots/Select---Searchable-Behaviour/darwin/chromium/select-items-container.png b/...nshots/Select---Searchable-Behaviour/darwin/chromium/select-items-container.png
diff --git a/...tests/screenshots/Select---Searchable-Behaviour/darwin/firefox/search-field.png b/...tests/screenshots/Select---Searchable-Behaviour/darwin/firefox/search-field.png
diff --git a/...tests/screenshots/Select---Searchable-Behaviour/darwin/firefox/select-after.png b/...tests/screenshots/Select---Searchable-Behaviour/darwin/firefox/select-after.png
diff --git a/...sts/screenshots/Select---Searchable-Behaviour/darwin/firefox/select-initial.png b/...sts/screenshots/Select---Searchable-Behaviour/darwin/firefox/select-initial.png
diff --git a/...enshots/Select---Searchable-Behaviour/darwin/firefox/select-items-container.png b/...enshots/Select---Searchable-Behaviour/darwin/firefox/select-items-container.png
diff --git a/...ots/Select---Selection-Render-Behaviour/darwin/Mobile-Safari/select-initial.png b/...ots/Select---Selection-Render-Behaviour/darwin/Mobile-Safari/select-initial.png
diff --git a/...eenshots/Select---Selection-Render-Behaviour/darwin/chromium/select-initial.png b/...eenshots/Select---Selection-Render-Behaviour/darwin/chromium/select-initial.png
diff --git a/...screenshots/Select---Selection-Render-Behaviour/darwin/chromium/select-open.png b/...screenshots/Select---Selection-Render-Behaviour/darwin/chromium/select-open.png
diff --git a/...reenshots/Select---Selection-Render-Behaviour/darwin/firefox/select-initial.png b/...reenshots/Select---Selection-Render-Behaviour/darwin/firefox/select-initial.png
diff --git a/...creenshots/Select---Selection-Render-Behaviour/darwin/webkit/select-initial.png b/...creenshots/Select---Selection-Render-Behaviour/darwin/webkit/select-initial.png
diff --git a/...s/screenshots/Select---Selection-Render-Behaviour/darwin/webkit/select-open.png b/...s/screenshots/Select---Selection-Render-Behaviour/darwin/webkit/select-open.png
diff --git a/...elect---Server-Side-Filtering-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...elect---Server-Side-Filtering-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...shots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png b/...shots/Select---Server-Side-Filtering-Behaviour/darwin/chromium/select-after.png
diff --git a/...nshots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/search-field.png b/...nshots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/search-field.png
diff --git a/...nshots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/select-after.png b/...nshots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/select-after.png
diff --git a/...hots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/select-initial.png b/...hots/Select---Server-Side-Filtering-Behaviour/darwin/firefox/select-initial.png
diff --git a/...ect---Server-Side-Filtering-Behaviour/darwin/firefox/select-items-container.png b/...ect---Server-Side-Filtering-Behaviour/darwin/firefox/select-items-container.png
diff --git a/...reenshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-after.png b/...reenshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-after.png
diff --git a/...enshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-initial.png b/...enshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-initial.png
diff --git a/...creenshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-open.png b/...creenshots/Select---String-Array-Behaviour/darwin/Mobile-Chrome/select-open.png
diff --git a/...ts/screenshots/Select---String-Array-Behaviour/darwin/chromium/select-after.png b/...ts/screenshots/Select---String-Array-Behaviour/darwin/chromium/select-after.png
diff --git a/.../screenshots/Select---String-Array-Behaviour/darwin/chromium/select-initial.png b/.../screenshots/Select---String-Array-Behaviour/darwin/chromium/select-initial.png
diff --git a/...hots/Select---String-Array-Behaviour/darwin/chromium/select-items-container.png b/...hots/Select---String-Array-Behaviour/darwin/chromium/select-items-container.png
diff --git a/...sts/screenshots/Select---String-Array-Behaviour/darwin/chromium/select-open.png b/...sts/screenshots/Select---String-Array-Behaviour/darwin/chromium/select-open.png
diff --git a/...tests/screenshots/Select---String-Array-Behaviour/darwin/webkit/select-open.png b/...tests/screenshots/Select---String-Array-Behaviour/darwin/webkit/select-open.png
diff --git a/...ests/screenshots/Select---Visual-and-Behaviour/darwin/chromium/select-after.png b/...ests/screenshots/Select---Visual-and-Behaviour/darwin/chromium/select-after.png
diff --git a/...ts/screenshots/Select---Visual-and-Behaviour/darwin/chromium/select-initial.png b/...ts/screenshots/Select---Visual-and-Behaviour/darwin/chromium/select-initial.png
diff --git a/...nshots/Select---Visual-and-Behaviour/darwin/chromium/select-items-container.png b/...nshots/Select---Visual-and-Behaviour/darwin/chromium/select-items-container.png
diff --git a/...tests/screenshots/Select---Visual-and-Behaviour/darwin/firefox/select-after.png b/...tests/screenshots/Select---Visual-and-Behaviour/darwin/firefox/select-after.png
diff --git a/...sts/screenshots/Select---Visual-and-Behaviour/darwin/firefox/select-initial.png b/...sts/screenshots/Select---Visual-and-Behaviour/darwin/firefox/select-initial.png
diff --git a/...enshots/Select---Visual-and-Behaviour/darwin/firefox/select-items-container.png b/...enshots/Select---Visual-and-Behaviour/darwin/firefox/select-items-container.png
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,8 +12,8 @@
 	},
 	"[typescript]": {
 		"editor.codeActionsOnSave": {
-			"source.fixAll.eslint": true,
-			"source.organizeImports": false
+			"source.fixAll.eslint": "explicit",
+			"source.organizeImports": "never"
 		},
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@capitec/omni-components",
-    "version": "0.9.4",
+    "version": "0.9.5",
     "type": "module",
     "description": "Modern UI component library for mobile and web",
     "scripts": {
@@ -96,6 +96,7 @@
     "homepage": "https://capitec.github.io/open-source/docs/omni-components/",
     "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
+        "@11ty/eleventy-server-browsersync": "^1.0.2",
         "@appnest/readme": "^1.2.7",
         "@codemirror/lang-css": "^6.0.0",
         "@codemirror/lang-html": "^6.1.3",

diff --git a/src/select/Select.stories.ts b/src/select/Select.stories.ts
@@ -27,6 +27,8 @@ export interface Args extends BaseArgs {
     searchable: boolean;
     loading_indicator: string;
     filterItems: (filterValue: string, items: SelectTypes) => SelectItems;
+    arrow: string;
+    more: string;
 }
 
 const displayItems = [
@@ -85,6 +87,8 @@ export const Interactive: ComponentStoryFormat<Args> = {
             ?searchable="${args.searchable}"
             empty-message="${args.emptyMessage}"
             >${args.prefix ? html`${'\r\n'}${unsafeHTML(assignToSlot('prefix', args.prefix))}` : nothing}
+            ${args.arrow ? html`${'\r\n'}${unsafeHTML(assignToSlot('arrow', args.arrow))}` : nothing}
+            ${args.more ? html`${'\r\n'}${unsafeHTML(assignToSlot('more', args.more))}` : nothing}
             ${args.clear ? html`${'\r\n'}${unsafeHTML(assignToSlot('clear', args.clear))}` : nothing}${
         args.suffix ? html`${'\r\n'}${unsafeHTML(assignToSlot('suffix', args.suffix))}` : nothing
     }
@@ -154,6 +158,8 @@ export const Interactive: ComponentStoryFormat<Args> = {
         prefix: '',
         suffix: '',
         clear: '',
+        arrow: '',
+        more: '',
         items: displayItems as Record<string, unknown>[],
         displayField: 'label',
         idField: 'id',

diff --git a/src/select/Select.ts b/src/select/Select.ts
@@ -499,12 +499,14 @@ export class Select extends OmniFormElement {
 
                 /* Only applies styles to transform the control icon if on Desktop */
                 @media screen and (min-width: 767px) {
-                    .control.expanded {
+                    .control.expanded .arrow,
+                    .control.expanded ::slotted([slot='arrow']) {
                         transform: rotate(180deg);
                         transition: all linear 0.15s;
                     }
 
-                    .control.collapsed {
+                    .control.collapsed .arrow,
+                    .control.collapsed ::slotted([slot='arrow']) {
                         transform: none;
                         transition: all linear 0.15s;
                     }
@@ -762,6 +764,7 @@ export class Select extends OmniFormElement {
     // Render the control of the Select when clicked this will open up the items container
     protected override renderControl() {
         const controlIcon: ClassInfo = {
+            arrow: true, // Required for desktop slot rotation.
             icon: true,
             disabled: this.disabled,
             error: this.error as string