Merge branch 'main' into 3207-component_breadcrumb

.changeset/calm-rabbits-pull.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added composable footer component.

.changeset/gold-news-repair.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-megadropdown` component.

.changeset/gorgeous-needles-run.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added a fixed slot `post-list-item` on the `post-list-item` host element, so it is no longer necessary to add it manually.

.changeset/heavy-eyes-live.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed the used `headingLevel` in the `post-accorddion-item` component. The component now uses the value from its closest `post-accorddion` parent component, if this is specified and falls back to `h2` if not specified.

.changeset/hungry-penguins-turn.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the `btn-icon` styles, so icons within can no longer be rendered too small, because of the inline-padding on the button.

.changeset/new-cougars-count.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Added the parts `button` and `body` in the `post-accordion-item` component, so one can override styles from the outside.

.changeset/nine-baboons-rule.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the appstore-badge styles to get rid of the inline gap below.

.changeset/old-spiders-travel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added the possibility to define a `$child-selector` parameter with our list mixins, so they can be used also with custom elements.

.changeset/tender-laws-confess.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the css parts `button` and `body` in the `post-accorddion-item` component.

packages/components/cypress/e2e/footer.cy.ts

@@ -0,0 +1,54 @@
+const FOOTER_ID = 'd97528b3-a9ef-4201-bf28-9caf6e8997dc';
+
+describe('Footer', () => {
+  describe('Structure & Props', () => {
+    beforeEach(() => {
+      cy.getComponent('footer', FOOTER_ID);
+      cy.get('@footer').find('> footer h2.visually-hidden').as('label');
+    });
+
+    it('should render', () => {
+      cy.get('@footer').should('exist');
+    });
+
+    it('should set label text according to "label" prop', () => {
+      cy.get('@label').should('have.text', 'Footer label');
+    });
+
+    it('should render the post-accorddion on mobile', () => {
+      cy.viewport('iphone-3');
+      cy.get('@footer').find('post-accorddion').as('accorddion');
+
+      cy.get('@accorddion').should('exist');
+    });
+
+    it('should have accorddion-items with slotted elements on mobile', () => {
+      cy.viewport('iphone-3');
+      cy.get('@footer').find('post-accorddion').as('accorddion');
+      cy.get('@accorddion').find('post-accordion-item').as('accordionItems');
+
+      cy.get('@accordionItems').should('have.length', 4);
+      cy.get('@accordionItems')
+        .find('slot[name="header"]')
+        .each($slot => {
+          const headerSlot = $slot.get(0) as HTMLSlotElement;
+
+          expect(headerSlot.assignedElements().length).to.be.greaterThan(0);
+        });
+      cy.get('@accordionItems')
+        .find('slot:not([name])')
+        .each($slot => {
+          const slotDefault = $slot.get(0) as HTMLSlotElement;
+
+          expect(slotDefault.assignedElements().length).to.be.greaterThan(0);
+        });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('Has no detectable a11y violations', () => {
+      cy.getSnapshots('footer');
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/components/src/components.d.ts

@@ -184,6 +184,12 @@ export namespace Components {
          */
         "update": () => Promise<void>;
     }
+    interface PostFooter {
+        /**
+          * The label to add to the footer (visually hidden).
+         */
+        "label": string;
+    }
     interface PostHeader {
         /**
           * Toggles the mobile navigation.
@@ -285,25 +291,20 @@ export namespace Components {
     }
     interface PostMegadropdown {
         /**
-          * Hide megadropdown
-          * @returns boolean
+          * Displays the popover dropdown
+          * @param target - The HTML element relative to which the popover dropdown should be displayed.
          */
-        "hide": () => Promise<void>;
-        /**
-          * Show megadropdown
-          * @param element HTMLElement
-          * @returns boolean
-         */
-        "show": (element: HTMLElement) => Promise<void>;
+        "show": (target: HTMLElement) => Promise<void>;
         /**
-          * Toggle megadropdown
-          * @param element HTMLElement
-          * @param force boolean
-          * @returns boolean
+          * Toggles the dropdown visibility based on its current state.
          */
-        "toggle": (element: HTMLElement, force?: boolean) => Promise<boolean>;
+        "toggle": (target: HTMLElement) => Promise<void>;
     }
     interface PostMegadropdownTrigger {
+        /**
+          * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
+         */
+        "for": string;
     }
     interface PostMenu {
         /**
@@ -501,9 +502,9 @@ export interface PostMainnavigationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostMainnavigationElement;
 }
-export interface PostMegadropdownTriggerCustomEvent<T> extends CustomEvent<T> {
+export interface PostMegadropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLPostMegadropdownTriggerElement;
+    target: HTMLPostMegadropdownElement;
 }
 export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -625,6 +626,12 @@ declare global {
         prototype: HTMLPostCollapsibleTriggerElement;
         new (): HTMLPostCollapsibleTriggerElement;
     };
+    interface HTMLPostFooterElement extends Components.PostFooter, HTMLStencilElement {
+    }
+    var HTMLPostFooterElement: {
+        prototype: HTMLPostFooterElement;
+        new (): HTMLPostFooterElement;
+    };
     interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement {
     }
     var HTMLPostHeaderElement: {
@@ -698,25 +705,25 @@ declare global {
         prototype: HTMLPostMainnavigationElement;
         new (): HTMLPostMainnavigationElement;
     };
-    interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
-    }
-    var HTMLPostMegadropdownElement: {
-        prototype: HTMLPostMegadropdownElement;
-        new (): HTMLPostMegadropdownElement;
-    };
-    interface HTMLPostMegadropdownTriggerElementEventMap {
-        "postToggle": any;
+    interface HTMLPostMegadropdownElementEventMap {
+        "postToggleMegadropdown": boolean;
     }
-    interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+    interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostMegadropdownElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownElement, ev: PostMegadropdownCustomEvent<HTMLPostMegadropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostMegadropdownElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownElement, ev: PostMegadropdownCustomEvent<HTMLPostMegadropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
+    var HTMLPostMegadropdownElement: {
+        prototype: HTMLPostMegadropdownElement;
+        new (): HTMLPostMegadropdownElement;
+    };
+    interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
+    }
     var HTMLPostMegadropdownTriggerElement: {
         prototype: HTMLPostMegadropdownTriggerElement;
         new (): HTMLPostMegadropdownTriggerElement;
@@ -850,6 +857,7 @@ declare global {
         "post-closebutton": HTMLPostClosebuttonElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
+        "post-footer": HTMLPostFooterElement;
         "post-header": HTMLPostHeaderElement;
         "post-icon": HTMLPostIconElement;
         "post-language-option": HTMLPostLanguageOptionElement;
@@ -1025,6 +1033,12 @@ declare namespace LocalJSX {
          */
         "for"?: string;
     }
+    interface PostFooter {
+        /**
+          * The label to add to the footer (visually hidden).
+         */
+        "label": string;
+    }
     interface PostHeader {
     }
     /**
@@ -1125,12 +1139,16 @@ declare namespace LocalJSX {
         "onPostToggle"?: (event: PostMainnavigationCustomEvent<any>) => void;
     }
     interface PostMegadropdown {
+        /**
+          * Emits when the dropdown is shown or hidden. The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
+         */
+        "onPostToggleMegadropdown"?: (event: PostMegadropdownCustomEvent<boolean>) => void;
     }
     interface PostMegadropdownTrigger {
         /**
-          * Emits after each toggle
+          * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
          */
-        "onPostToggle"?: (event: PostMegadropdownTriggerCustomEvent<any>) => void;
+        "for": string;
     }
     interface PostMenu {
         /**
@@ -1276,6 +1294,7 @@ declare namespace LocalJSX {
         "post-closebutton": PostClosebutton;
         "post-collapsible": PostCollapsible;
         "post-collapsible-trigger": PostCollapsibleTrigger;
+        "post-footer": PostFooter;
         "post-header": PostHeader;
         "post-icon": PostIcon;
         "post-language-option": PostLanguageOption;
@@ -1318,6 +1337,7 @@ declare module "@stencil/core" {
             "post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             "post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
+            "post-footer": LocalJSX.PostFooter & JSXBase.HTMLAttributes<HTMLPostFooterElement>;
             "post-header": LocalJSX.PostHeader & JSXBase.HTMLAttributes<HTMLPostHeaderElement>;
             /**
              * @class PostIcon - representing a stencil component

packages/components/src/components/post-accordion-item/post-accordion-item.tsx

@@ -4,6 +4,8 @@ import { HEADING_LEVELS, HeadingLevel } from '@/types';
 import { checkEmptyOrOneOf } from '@/utils';
 
 /**
+ * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
+ * @part body - The pseudo-element, used to override styles on the components internal `body` element.
  * @slot logo - Slot for the placing a logo before the header.
  * @slot header - Slot for placing custom content within the accordion item's header.
  * @slot default - Slot for placing content within the accordion item's body.
@@ -79,14 +81,19 @@ export class PostAccordionItem {
   }
 
   render() {
-    const HeadingTag = `h${this.headingLevel ?? 2}`;
+    const headingLevel = this.host.closest('post-accorddion')?.getAttribute('heading-level');
+    const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
 
     return (
       <Host id={this.id} data-version={version}>
         <div part="accordion-item" class="accordion-item">
           <post-collapsible-trigger for={`${this.id}--collapse`}>
             <HeadingTag class="accordion-header" id={`${this.id}--header`}>
-              <button type="button" class={`accordion-button${this.collapsed ? ' collapsed' : ''}`}>
+              <button
+                type="button"
+                class={`accordion-button${this.collapsed ? ' collapsed' : ''}`}
+                part="button"
+              >
                 <span
                   class={{
                     'logo-container': true,
@@ -106,7 +113,7 @@ export class PostAccordionItem {
             collapsed={this.collapsed}
             ref={el => (this.collapsible = el)}
           >
-            <div class="accordion-body">
+            <div class="accordion-body" part="body">
               <slot />
             </div>
           </post-collapsible>

packages/components/src/components/post-accordion-item/readme.md

@@ -43,13 +43,19 @@ Type: `Promise<boolean>`
 
 ## Shadow Parts
 
-| Part               | Description |
-| ------------------ | ----------- |
-| `"accordion-item"` |             |
+| Part               | Description                                                                                     |
+| ------------------ | ----------------------------------------------------------------------------------------------- |
+| `"accordion-item"` |                                                                                                 |
+| `"body"`           | The pseudo-element, used to override styles on the components internal `body` element.          |
+| `"button"`         | The pseudo-element, used to override styles on the components internal header `button` element. |
 
 
 ## Dependencies
 
+### Used by
+
+ - [post-footer](../post-footer)
+
 ### Depends on
 
 - [post-collapsible-trigger](../post-collapsible-trigger)
@@ -62,6 +68,7 @@ graph TD;
   post-accordion-item --> post-collapsible-trigger
   post-accordion-item --> post-icon
   post-accordion-item --> post-collapsible
+  post-footer --> post-accordion-item
   style post-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/components/src/components/post-closebutton/post-closebutton.tsx

@@ -15,7 +15,7 @@ export class PostClosebutton {
     return (
       <Host data-version={version}>
         <button class="btn btn-icon-close">
-          <post-icon aria-hidden="true" name="2043"></post-icon>
+          <post-icon aria-hidden="true" name="closex"></post-icon>
           <span class="visually-hidden">
             <slot></slot>
           </span>