Merge branch 'main' into 2221-add-a-label-for-component-version

.changeset/big-carrots-join.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Removed badge size class at wrapper level. It's only used inside the label.

.changeset/breezy-knives-itch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the accordion styles.

.changeset/clever-dingos-add.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': patch
+'@swisspost/design-system-components': patch
+---
+
+Defined @stencil/core and @stencil/store as a devDependency to avoid compatibilities issues.

.changeset/cuddly-otters-compete.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed overflow on datepicker select variant.

.changeset/empty-rules-float.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-migrations': major
+'@swisspost/design-system-styles': minor
+---
+
+Separated the migration schematics from the styles to their own package `@swisspost/design-system-migrations`.

.changeset/few-baboons-count.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+- Deprecated Bootstrap accordions in favor of the post-accordion web component.
+- Updated ng-bootstrap component-based accordion example in favor of the directive-based implementation.

.changeset/nasty-spies-explain.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed intranet-header sticky navigation on mobile which prevent interactivity on the page within a certain viewport width.

.changeset/rotten-shirts-agree.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Update the commands to run the Design System migrations.

package.json

@@ -56,6 +56,7 @@
     "icons:test": "pnpm --filter design-system-icons test",
     "icons:unit": "pnpm --filter design-system-icons test",
     "icons:unit:watch": "pnpm --filter design-system-icons test:watch",
+    "migrations:build": "pnpm --filter design-system-migrations build",
     "changeset:publish": "pnpm bootstrap && pnpm changeset publish",
     "changeset:version": "pnpm changeset version && pnpm install --lockfile-only"
   },

packages/components/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: '@stencil/core/testing',
+  testEnvironment: 'node',
+};

packages/components/package.json

@@ -39,7 +39,6 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@oddbird/popover-polyfill": "0.3.2",
-    "@stencil/core": "4.7.2",
     "@swisspost/design-system-styles": "workspace:6.4.4",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
@@ -48,6 +47,7 @@
     "@percy/cli": "1.27.4",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
+    "@stencil/core": "4.7.2",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.7",
     "@types/jest": "27.5.2",
@@ -60,6 +60,7 @@
     "eslint-plugin-react": "7.33.2",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
+    "jest-environment-node": "27.5.1",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.5",
     "sass": "1.69.5",

packages/components/src/components/post-collapsible/post-collapsible.scss

@@ -2,8 +2,16 @@
 
 :host {
   display: block;
+}
+
+.accordion-button {
+  cursor: pointer;
 
-  .accordion-button > ::slotted(.text-truncate) {
+  > ::slotted(.text-truncate) {
     display: block;
   }
 }
+
+post-collapsible + post-collapsible::part(accordion-item) {
+  border-block-start: 0!important;
+}

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

@@ -1,4 +1,15 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import { version } from '../../../package.json';
 import { collapse, expand } from '../../animations/collapse';
 import { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';
@@ -27,7 +38,11 @@ export class PostCollapsible {
 
   @Watch('collapsed')
   validateCollapsed(newValue = this.collapsed) {
-    checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+    checkEmptyOrType(
+      newValue,
+      'boolean',
+      'The `collapsed` property of the `post-collapsible` must be a boolean.',
+    );
   }
 
   /**
@@ -37,7 +52,11 @@ export class PostCollapsible {
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
-    checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
+    checkEmptyOrOneOf(
+      newValue,
+      HEADING_LEVELS,
+      'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',
+    );
   }
 
   /**
@@ -73,7 +92,7 @@ export class PostCollapsible {
     this.isOpen = !this.isOpen;
     if (this.isLoaded) this.collapseChange.emit();
 
-    const animation = open ? expand(this.collapsible): collapse(this.collapsible);
+    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
 
     if (!this.isLoaded || isMotionReduced()) animation.finish();
 
@@ -90,22 +109,22 @@ export class PostCollapsible {
         aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}
         class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}
         id={`${this.id}--collapse`}
-        ref={el => this.collapsible = el}
+        ref={el => (this.collapsible = el)}
       >
         {this.hasHeader ? (
           <div class="accordion-body">
-            <slot/>
+            <slot />
           </div>
         ) : (
-          <slot/>
+          <slot />
         )}
       </div>
     );
 
     return (
       <Host id={this.id} data-version={version}>
         {this.hasHeader ? (
-          <div class="accordion-item">
+          <div part="accordion-item" class="accordion-item">
             <this.headingTag class="accordion-header" id={`${this.id}--header`}>
               <button
                 aria-controls={`${this.id}--collapse`}
@@ -114,13 +133,15 @@ export class PostCollapsible {
                 onClick={() => this.toggle()}
                 type="button"
               >
-                <slot name="header"/>
+                <slot name="header" />
               </button>
             </this.headingTag>
 
             {collapse}
           </div>
-        ) : collapse}
+        ) : (
+          collapse
+        )}
       </Host>
     );
   }

packages/components/src/components/post-collapsible/readme.md

@@ -35,6 +35,13 @@ Type: `Promise<boolean>`
 
 
 
+## Shadow Parts
+
+| Part               | Description |
+| ------------------ | ----------- |
+| `"accordion-item"` |             |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html

@@ -3,6 +3,21 @@ <h1 class="bold font-curve-large">Accordion</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-big">
+  <p class="alert-heading">Bootstrap accordions are deprecated and will soon be removed.</p>
+  <p>
+    For a similar behavior, check out our new
+    <a
+      href="https://next.design-system.post.ch/?path=/docs/components-accordion--docs"
+      rel="noopener"
+      target="_blank"
+    >
+      post-accordion component
+    </a>
+    .
+  </p>
+</div>
+
 <section>
   <h3>Using JavaScript</h3>
   <div class="alert alert-info my-large">

packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html

@@ -9,8 +9,8 @@ <h2 class="accordion-header" id="headingOne">
         aria-expanded="true"
         aria-controls="collapseOne"
       >
-        Default Title Wrapping - This accordion title is way too long, it wraps because there is not
-        enough space for it to display completely on one line.
+        Default title wrapping - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia curae nullam sagittis vel augue eget pellentesque lacus sapien.
       </button>
     </h2>
     <div
@@ -20,13 +20,16 @@ <h2 class="accordion-header" id="headingOne">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the first item's accordion body.</strong>
-        It is shown by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the first item's accordion body.</strong>
+          It is shown by default, until the collapse plugin adds the appropriate classes that we use
+          to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>
@@ -41,8 +44,8 @@ <h2 class="accordion-header" id="headingTwo">
         aria-controls="collapseTwo"
       >
         <span class="text-truncate">
-          Title truncated - This accordion title is way too long, it will be truncated in CSS
-          because there is not enough space for it to display completely.
+          Truncated title - Pellentesque interdum diam eget feugiat aliquet nullam tincidunt nunc eu
+          lorem vehicula, a porta nisl eleifend integer non ullamcorper massa
         </span>
       </button>
     </h2>
@@ -53,13 +56,16 @@ <h2 class="accordion-header" id="headingTwo">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the second item's accordion body.</strong>
-        It is hidden by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the second item's accordion body.</strong>
+          It is hidden by default, until the collapse plugin adds the appropriate classes that we
+          use to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>
@@ -73,9 +79,9 @@ <h2 class="accordion-header" id="headingThree">
         aria-expanded="false"
         aria-controls="collapseThree"
       >
-        &#9733;&nbsp;
-        <strong>Fancy</strong>
-        title&nbsp;&#9733;
+        &#9733;
+        <em>Fancy</em>
+        title &#9733;
       </button>
     </h2>
     <div
@@ -85,13 +91,16 @@ <h2 class="accordion-header" id="headingThree">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the third item's accordion body.</strong>
-        It is hidden by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the third item's accordion body.</strong>
+          It is hidden by default, until the collapse plugin adds the appropriate classes that we
+          use to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>

packages/demo/src/app/home/home.component.html

@@ -310,7 +310,7 @@ <h4 class="h5 bold">Automatic Migration ⚙️</h4>
                 appCopyToClipboard
                 class="d-block mt-1 p-3"
                 [languages]="['bash']"
-                highlight="npx ng update @swisspost/design-system-styles --from=5 --to=6 --migrate-only"
+                highlight="npx ng update @swisspost/design-system-migrations --from=5 --to=6 --migrate-only"
               ></code>
             </li>
           </ol>
@@ -498,7 +498,7 @@ <h4 class="h5 bold">Automatic Migration ⚙️</h4>
                 appCopyToClipboard
                 class="d-block mt-1 p-3"
                 [languages]="['bash']"
-                highlight="npx ng update @swisspost/design-system-styles --from=4 --to=5 --migrate-only"
+                highlight="npx ng update @swisspost/design-system-migrations --from=4 --to=5 --migrate-only"
               ></code>
             </li>
           </ol>