Merge branch 'main' into 3433-component-sizing-utilities

.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/nervous-lizards-laugh.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Removed outdated portal-specific styles, including subnavigation-related rules.

.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/nice-cycles-provide.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles.

.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/real-gorillas-behave.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution.

.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/animations/slide.ts

@@ -2,10 +2,10 @@ const easing: string = 'ease';
 const duration: number = 500;
 const fill: FillMode = 'forwards';
 
-export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+export const slideUp = (el: HTMLElement, translateSize: string = '100%'): Animation => {
   return el.animate(
     [
-      { transform: `translateY(-${translateSize})` }, // Starting position (no translation)
+      { transform: `translateY(${translateSize})` }, // Starting position (no translation)
       { transform: 'translateY(0)' }, // End position
     ],
     {
@@ -16,11 +16,11 @@ export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animat
   );
 };
 
-export const slideDown = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+export const slideDown = (el: HTMLElement, translateSize: string = '100%'): Animation => {
   return el.animate(
     [
       { transform: 'translateY(0)' }, // Starting position (no translation)
-      { transform: `translateY(-${translateSize})` }, // End position
+      { transform: `translateY(${translateSize})` }, // End position
     ],
     {
       duration: duration,