Merge branch 'main' into 3438-component-check-list

swisspost · Sep 27, 2024 · ce49461 · ce49461
2 parents 8a73022 + d6033c5
commit ce49461
Show file tree

Hide file tree

Showing 98 changed files with 4,322 additions and 2,810 deletions.
diff --git a/.changeset/big-frogs-admire.md b/.changeset/big-frogs-admire.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements.
diff --git a/.changeset/cuddly-bears-check.md b/.changeset/cuddly-bears-check.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Removed global styles
diff --git a/.changeset/empty-islands-kneel.md b/.changeset/empty-islands-kneel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a toolbar for switching the theme, channel, and mode of all stories.
diff --git a/.changeset/lemon-clocks-clean.md b/.changeset/lemon-clocks-clean.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation outlining the mission statement of the Design System.
diff --git a/.changeset/six-spiders-smoke.md b/.changeset/six-spiders-smoke.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation for design principles.
diff --git a/.changeset/tame-terms-push.md b/.changeset/tame-terms-push.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+---
+
+Made the heading-level property required for the accordion and removed it from the accordion-item docs.
diff --git a/.changeset/yellow-yaks-jog.md b/.changeset/yellow-yaks-jog.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed typos in the Sass and HTML href paths.
diff --git a/.github/actions/setup-netlify-cli/action.yaml b/.github/actions/setup-netlify-cli/action.yaml
@@ -12,4 +12,4 @@ runs:
   steps:
     - name: Install netlify-cli
       shell: bash
-      run: pnpm i -g netlify-cli@17
+      run: pnpm i -g netlify-cli@17.36.1
diff --git a/.github/workflows/unit-tests.yaml b/.github/workflows/unit-tests.yaml
@@ -22,9 +22,8 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup-pnpm
 
-      # Install packages changed since main, as well as their dependants and dependencies
-      - name: Install dependencies
-        run: pnpm --filter "...[origin/main]" install
+      - name: Install dependencies and build packages
+        run: pnpm bootstrap
 
       - name: Run unit tests
         run: pnpm --filter "...[origin/main]" unit
diff --git a/README.md b/README.md
@@ -13,10 +13,10 @@
 ## Packages
 
 | Name                                                                                                    | Description                                                                                                                                             | Version                                                                                                                                                                                                                                                  | Changelog URL                                                                 |
-| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- |
+| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------------------------------------------------------------------------|
 | [Styles](https://design-system.post.ch/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs)          | The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components. | [![Styles pacakge version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-styles?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-styles)                            | [Styles changelog](/packages/styles/CHANGELOG.md)                             |
 | [Components](https://design-system.post.ch/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs)      | A set of standard web components for easy integration with every framework or no framework at all.                                                      | [![Components package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-components?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-components)                | [Components changelog](/packages/components/CHANGELOG.md)                     |
-| [Internet Header](https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) | The header for client facing applications.                                                                                                              | [![Internet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Finternet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/internet-header)                             | [Interet Header changelog](/packages/internet-header/CHANGELOG.md)            |
+| [Internet Header](https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) | The header for client facing applications.                                                                                                              | [![Internet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Finternet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/internet-header)                             | [Internet Header changelog](/packages/internet-header/CHANGELOG.md)           |
 | [Intranet Header](https://design-system.post.ch/?path=/docs/d59a459b-6f14-47c6-9f98-a36a3f79a6e3--docs) | The Angular component for internal usage.                                                                                                               | [![Intranet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-intranet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-intranet-header) | [Intranet Header changelog](/packages/intranet-header-workspace/CHANGELOG.md) |
 | [Icons](https://design-system.post.ch/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs)           | A collection of Post icons in svg format.                                                                                                               | [![Icons package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-icons?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-icons)                               | [Icons changelog](/packages/icons/CHANGELOG.md)                               |
 

diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="my-4">
   <h2>Post Accordion</h2>
-  <post-accordion>
+  <post-accordion [headingLevel]="3">
     <post-accordion-item>
       <span slot="header">Titulum 1</span>
       <p>Contentus momentus vero siteos et accusam iretea et justo.</p>

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -24,7 +24,7 @@ export namespace Components {
         /**
           * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
          */
-        "headingLevel"?: HeadingLevel;
+        "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
@@ -540,7 +540,7 @@ declare namespace LocalJSX {
         /**
           * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
          */
-        "headingLevel"?: HeadingLevel;
+        "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */

diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
@@ -29,7 +29,7 @@ export class PostAccordionItem {
    * Defines the hierarchical level of the accordion item header within the headings structure.
    * @deprecated set the `heading-level` property on the parent `post-accordion` instead.
    */
-  @Prop() readonly headingLevel?: HeadingLevel = 2;
+  @Prop() readonly headingLevel?: HeadingLevel;
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
@@ -51,7 +51,7 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
+    if (event.target === this.host && (event.target as HTMLElement).localName === 'post-accordion-item') {
       this.collapsed = !event.detail;
     }
   }

diff --git a/packages/components/src/components/post-accordion-item/readme.md b/packages/components/src/components/post-accordion-item/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                                                                                                                                  | Type                         | Default |
-| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
-| `collapsed`    | `collapsed`     | If `true`, the element is collapsed otherwise it is displayed.                                                                                                                                                               | `boolean`                    | `false` |
-| `headingLevel` | `heading-level` | <span style="color:red">**[DEPRECATED]**</span> set the `heading-level` property on the parent `post-accordion` instead.<br/><br/>Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`     |
+| Property       | Attribute       | Description                                                                                                                                                                                                                  | Type                         | Default     |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `collapsed`    | `collapsed`     | If `true`, the element is collapsed otherwise it is displayed.                                                                                                                                                               | `boolean`                    | `false`     |
+| `headingLevel` | `heading-level` | <span style="color:red">**[DEPRECATED]**</span> set the `heading-level` property on the parent `post-accordion` instead.<br/><br/>Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
 
 
 ## Methods

diff --git a/packages/components/src/components/post-accordion/post-accordion.tsx b/packages/components/src/components/post-accordion/post-accordion.tsx
@@ -21,7 +21,7 @@ export class PostAccordion {
   /**
    * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
    */
-  @Prop() readonly headingLevel?: HeadingLevel;
+  @Prop() readonly headingLevel!: HeadingLevel;
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
@@ -50,23 +50,26 @@ export class PostAccordion {
 
   @Listen('postToggle')
   collapseToggleHandler(event: CustomEvent<boolean>) {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
-      event.stopPropagation();
+    event.stopPropagation();
 
-      const toggledItem = event.target as HTMLPostAccordionItemElement;
-      const isClosing = this.expandedItems.has(toggledItem);
+    const toggledItem = event.target as HTMLElement;
+    const closestParentAccordion = toggledItem.closest('post-accordion');
+
+    if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+      const toggledAccordionItem = event.target as HTMLPostAccordionItemElement;
+      const isClosing = this.expandedItems.has(toggledAccordionItem);
 
       if (isClosing) {
-        this.expandedItems.delete(toggledItem);
+        this.expandedItems.delete(toggledAccordionItem);
       } else {
-        this.expandedItems.add(toggledItem);
+        this.expandedItems.add(toggledAccordionItem);
       }
 
       if (this.multiple || isClosing) return;
 
       // close other open accordion items to have only one opened at a time
       Array.from(this.expandedItems.values())
-        .filter(item => item !== toggledItem)
+        .filter(item => item !== toggledAccordionItem)
         .forEach(item => {
           item.toggle(false);
         });

diff --git a/packages/components/src/components/post-accordion/readme.md b/packages/components/src/components/post-accordion/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                        | Type                         | Default     |
-| -------------- | --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `headingLevel` | `heading-level` | Defines the hierarchical level of the `post-accordion-item` headers within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `multiple`     | `multiple`      | If `true`, multiple `post-accordion-item` can be open at the same time.                            | `boolean`                    | `false`     |
+| Property                    | Attribute       | Description                                                                                        | Type                         | Default     |
+| --------------------------- | --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `headingLevel` _(required)_ | `heading-level` | Defines the hierarchical level of the `post-accordion-item` headers within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `multiple`                  | `multiple`      | If `true`, multiple `post-accordion-item` can be open at the same time.                            | `boolean`                    | `false`     |
 
 
 ## Methods

diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
@@ -0,0 +1,39 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.addon-dropdown {
+  min-width: 12rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: post.$size-line;
+  position: absolute;
+  top: -5px;
+  right: 0;
+  padding: post.$size-mini;
+  background-color: post.$white;
+  border: post.$border-width solid post.$border-color;
+  border-radius: post.$border-radius;
+  font-size: post.$font-size-sm;
+
+  .addon-dropdown__item {
+    display: block;
+    padding: post.$size-mini post.$size-small-regular;
+    border-radius: post.$border-radius-sm;
+    text-decoration: none;
+    color: post.$body-color !important;
+
+    &:hover {
+      background-color: post.$gray-10;
+    }
+
+    &.active {
+      background-color: post.$yellow;
+    }
+  }
+}
+
+.addon-button {
+  post-icon {
+    font-size: post.$font-size-20;
+    margin-inline-end: post.$size-line;
+  }
+}