Merge branch 'develop' into Remove-default-clearable-div-in-input-com…

…ponents

.vscode/settings.json

@@ -45,6 +45,7 @@
 		"modal": true,
 		"tab": true,
 		"toast": true,
-		"alert": true
+		"alert": true,
+		"expander": true
 	}
 }

README.md

@@ -487,6 +487,22 @@ Email input control, used in forms for input validation and to display correct v
 
 </td></tr><tr><td>
 
+[omni-expander](/Users/runner/work/omni-components/omni-components/src/expander/README.md)
+
+</td><td>
+
+Component that groups together content in an expanded box.
+
+</td></tr><tr><td>
+
+[omni-expander-group](/Users/runner/work/omni-components/omni-components/src/expander/README.md)
+
+</td><td>
+
+Layout container that groups expanders.
+
+</td></tr><tr><td>
+
 [omni-hyperlink](/Users/runner/work/omni-components/omni-components/src/hyperlink/README.md)
 
 </td><td>

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"

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 {

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.                             |

src/date-picker/DatePicker.ts

@@ -227,7 +227,7 @@ export class DatePicker extends OmniFormElement {
     }
 
     _dateSelected(e: Event) {
-        this.date = DateTime.fromJSDate((<CustomEvent>e).detail.date);
+        this.date = DateTime.fromJSDate((<CustomEvent>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`
-            <dialog id="picker-dialog" class="picker-dialog">
+            <dialog id="picker-dialog" class="picker-dialog" @cancel="${(e: Event) => e.preventDefault()}">
                 <omni-calendar 
                     id="calendar" 
                     locale=${this.locale} 

src/expander/Expander.spec.ts

@@ -0,0 +1,110 @@
+import { test, expect, mockEventListener, withCoverage } from '../utils/JestPlaywright.js';
+
+test(`Expander - Visual and Behaviour`, async ({ page }) => {
+    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);
+    });
+});