Merge branch 'main' into feat/3461-component-footer

.changeset/nervous-lizards-laugh.md

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

.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/smooth-bugs-explode.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-documentation': patch
+---
+
+Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state.

.changeset/twenty-chairs-kick.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`.

.github/actions/preview/message/create/action.yaml

@@ -5,14 +5,20 @@ inputs:
   access-token:
     description: The access token to use for commenting.
     required: true
+  issue-number:
+    description: The issue number from the caller workflow.
+    required: true
 
 runs:
   using: composite
   steps:
     - uses: actions/github-script@v7
+      env:
+        ISSUE_NUMBER: ${{ inputs.issue-number }}
       with:
         github-token: ${{ inputs.access-token }}
         script: |
+          const { ISSUE_NUMBER } = process.env
           const commentTitle = '**Related Previews**'
           const commentInitialBody = 'Preview URLs will be added here, once they are ready... ![loader](https://github.com/swisspost/design-system/assets/9716662/49a75898-7093-4ffb-9460-071ff194459d)'
 
@@ -25,7 +31,7 @@ runs:
             await github.rest.issues.createComment({
               repo: context.repo.repo,
               owner: context.repo.owner,
-              issue_number: context.issue.number,
+              issue_number: ISSUE_NUMBER,
               body: `${commentTitle}\n${commentInitialBody}`
             })
 
@@ -45,7 +51,7 @@ runs:
             comments = (await github.rest.issues.listComments({
               repo: context.repo.repo,
               owner: context.repo.owner,
-              issue_number: context.issue.number
+              issue_number: ISSUE_NUMBER
             })).data || []
 
             previewComment = comments.find(c => c.user.login === 'swisspost-bot' && c.body.includes(commentTitle))

.github/workflows/build-documentation.yaml

@@ -25,11 +25,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Create preview message
-        uses: ./.github/actions/preview/message/create
-        with:
-          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
-
       - name: Setup
         uses: ./.github/actions/setup-pnpm
 

.github/workflows/deploy-demo.yaml

@@ -0,0 +1,54 @@
+###
+#
+# Not used for v9 anymore
+# But since workflows run always from the `main` branch we need to keep it for older versions
+#
+###
+
+name: Deploy Demo App Preview to Netlify
+on:
+  workflow_run:
+    workflows: ['Build Demo App']
+    types:
+      - completed
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.workflow_run.head_branch }}
+
+      - name: Setup
+        uses: ./.github/actions/setup-pnpm
+
+      - name: Download build artifacts
+        uses: ./.github/actions/artifact-download
+        id: build
+        with:
+          name: design-system-demo
+          folder: build-output
+
+      - name: Deploy demo app to netlify
+        uses: swisspost/design-system/.github/actions/deploy-to-netlify@release/v8
+        id: deploy
+        with:
+          id: ${{ steps.build.outputs.id }}
+          netlify_auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          netlify_site_id: ${{ secrets.NETLIFY_SITE_ID }}
+          netlify_site_url: swisspost-web-frontend.netlify.app
+          folder: ${{ steps.build.outputs.folder }}
+          package_name: '@swisspost/design-system-demo'
+
+      - name: Update preview message
+        uses: ./.github/actions/preview/message/update
+        with:
+          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+          issue-number: ${{ steps.build.outputs.id }}
+          preview-url: ${{ steps.deploy.outputs.preview-url }}

.github/workflows/deploy-documentation.yaml

@@ -26,6 +26,12 @@ jobs:
           name: design-system-documentation
           folder: build-output
 
+      - name: Create preview message
+        uses: ./.github/actions/preview/message/create
+        with:
+          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+          issue-number: ${{ steps.build.outputs.id }}
+
       - name: Get netlify config
         id: netlify-config
         uses: actions/github-script@v7

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

@@ -1,114 +1,113 @@
 const TOGGLE_BUTTON_ID = '1a6f47c2-5e8a-45a0-b1c3-9f7e2b834c24';
 
 describe('togglebutton', () => {
-  beforeEach(() => {
-    cy.visit('/iframe.html?id=snapshots--toggle-button');
-    cy.get('post-togglebutton', { timeout: 30000 }).should('be.visible');
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('togglebutton', TOGGLE_BUTTON_ID);
+    });
 
-  describe('default behavior', () => {
-    it('should toggle state when clicked', () => {
-      cy.get('post-togglebutton')
-        .first()
-        .as('button')
-        .shadow()
-        .find('slot[name="untoggled"]')
-        .should('exist');
+    it('should show expected content', () => {
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.hidden');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.visible');
+    });
 
-      cy.get('@button').click();
+    it('should have correct ARIA attributes', () => {
+      cy.get('@togglebutton')
+        .should('have.attr', 'role', 'button')
+        .and('have.attr', 'aria-pressed', 'false')
+        .and('have.attr', 'tabindex', '0');
+    });
+
+    it('should toggle state when clicked', () => {
+      cy.get('@togglebutton').click();
 
-      cy.get('@button').shadow().find('slot[name="toggled"]').should('exist');
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.visible');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.hidden');
+      cy.get('@togglebutton').should('have.attr', 'aria-pressed', 'true');
     });
 
     it('should toggle state when pressing Enter key', () => {
-      cy.get('post-togglebutton')
-        .first()
-        .as('button')
-        .shadow()
-        .find('slot[name="untoggled"]')
-        .should('exist');
+      cy.get('@togglebutton').trigger('keydown', { key: 'Enter' });
 
-      cy.get('@button').trigger('keydown', { key: 'Enter' });
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.visible');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.hidden');
+      cy.get('@togglebutton').should('have.attr', 'aria-pressed', 'true');
+    });
+  });
 
-      cy.get('@button').shadow().find('slot[name="toggled"]').should('exist');
+  describe('initially toggled', () => {
+    beforeEach(() => {
+      cy.getComponent('togglebutton', TOGGLE_BUTTON_ID, 'initially-toggled');
+    });
+
+    it('should show expected content', () => {
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.visible');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.hidden');
     });
 
     it('should have correct ARIA attributes', () => {
-      cy.get('post-togglebutton')
-        .first()
-        .as('button')
+      cy.get('@togglebutton')
         .should('have.attr', 'role', 'button')
-        .and('have.attr', 'aria-pressed', 'false')
+        .and('have.attr', 'aria-pressed', 'true')
         .and('have.attr', 'tabindex', '0');
-
-      cy.get('@button').click();
-
-      cy.get('@button').should('have.attr', 'aria-pressed', 'true');
     });
-  });
 
-  describe('initial state', () => {
-    it('should respect initial toggled state', () => {
-      cy.get('post-togglebutton[toggled]')
-        .first()
-        .as('toggledButton')
-        .shadow()
-        .find('slot[name="toggled"]')
-        .should('exist');
+    it('should toggle state when clicked', () => {
+      cy.get('@togglebutton').click();
 
-      cy.get('@toggledButton').should('have.attr', 'aria-pressed', 'true');
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.hidden');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.visible');
+      cy.get('@togglebutton').should('have.attr', 'aria-pressed', 'false');
     });
 
-    it('should respect untoggled state', () => {
-      cy.get('post-togglebutton:not([toggled])')
-        .first()
-        .as('untoggledButton')
-        .shadow()
-        .find('slot[name="untoggled"]')
-        .should('exist');
+    it('should toggle state when pressing Enter key', () => {
+      cy.get('@togglebutton').trigger('keydown', { key: 'Enter' });
 
-      cy.get('@untoggledButton').should('have.attr', 'aria-pressed', 'false');
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.hidden');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.visible');
+      cy.get('@togglebutton').should('have.attr', 'aria-pressed', 'false');
     });
   });
 
-  describe('slot content', () => {
-    it('should display correct slot content based on toggle state', () => {
-      cy.get('post-togglebutton').first().as('button');
+  describe('content visibility', () => {
+    beforeEach(() => {
+      cy.getComponent('togglebutton', TOGGLE_BUTTON_ID, 'content-visibility');
+    });
 
-      cy.get('@button').shadow().find('slot[name="untoggled"]').should('exist');
+    it('should display correct contents on initial state', () => {
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.hidden');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.visible');
+      cy.get('@togglebutton').find(':not([data-showwhen])').should('be.visible');
+    });
 
-      cy.get('@button').click();
+    it('should display correct contents when clicked', () => {
+      cy.get('@togglebutton').click();
 
-      cy.get('@button').shadow().find('slot[name="toggled"]').should('exist');
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.visible');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.hidden');
+      cy.get('@togglebutton').find(':not([data-showwhen])').should('be.visible');
+    });
 
-      cy.get('@button').click();
+    it('should display correct contents when clicked twice', () => {
+      cy.get('@togglebutton').dblclick();
 
-      cy.get('@button').shadow().find('slot[name="untoggled"]').should('exist');
+      cy.get('@togglebutton').find('[data-showwhen="toggled"]').should('be.hidden');
+      cy.get('@togglebutton').find('[data-showwhen="untoggled"]').should('be.visible');
+      cy.get('@togglebutton').find(':not([data-showwhen])').should('be.visible');
     });
   });
+});
 
-  describe('version attribute', () => {
-    it('should have the correct version data attribute', () => {
-      cy.get('post-togglebutton').first().should('have.attr', 'data-version');
-    });
+describe('Accessibility', () => {
+  beforeEach(() => {
+    cy.getSnapshots('togglebutton');
   });
 
-  describe('Accessibility', () => {
-    beforeEach(() => {
-      cy.injectAxe();
-    });
-
-    it('Has no detectable a11y violations on load for all variants', () => {
-      cy.checkA11y('#root-inner');
-    });
+  it('Has no detectable a11y violations on load for all variants', () => {
+    cy.checkA11y('#root-inner');
+  });
 
-    it('Should be keyboard navigable', () => {
-      cy.get('post-togglebutton')
-        .first()
-        .focus()
-        .should('have.focus')
-        .trigger('keydown', { key: 'Enter' })
-        .should('have.attr', 'aria-pressed', 'true');
-    });
+  it('Should be keyboard navigable', () => {
+    cy.get('post-togglebutton').first().focus().should('have.focus');
   });
 });

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,

packages/components/src/components.d.ts

@@ -181,6 +181,10 @@ export namespace Components {
         "label": string;
     }
     interface PostHeader {
+        /**
+          * Toggles the mobile navigation.
+         */
+        "toggleMobileMenu": () => Promise<void>;
     }
     /**
      * @class PostIcon - representing a stencil component

packages/components/src/components/post-back-to-top/post-back-to-top.scss

@@ -8,7 +8,7 @@
 tokens.$default-map: components.$post-floating-button;
 
 :host {
-  --post-floating-button-translate-y: #{tokens.get('post-floating-button-translate-y')};
+  --post-floating-button-translate-y: calc(-1 * #{tokens.get('post-floating-button-translate-y')});
   position: fixed;
   top: tokens.get('post-floating-button-position-top');
   right: tokens.get('post-floating-button-position-right');