Merge branch 'main' into 4248-language-switch-improvement

swisspost · Dec 20, 2024 · a538ccc · a538ccc
2 parents f5054b1 + ede92e4
commit a538ccc
Show file tree

Hide file tree

Showing 117 changed files with 848 additions and 709 deletions.
diff --git a/.changeset/big-maps-pay.md b/.changeset/big-maps-pay.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-logo` slot explicitly.
diff --git a/.changeset/early-baboons-cross.md b/.changeset/early-baboons-cross.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added a `type="button"` attribute to the `post-close-button` to prevent it from submitting forms.
diff --git a/.changeset/early-knives-own.md b/.changeset/early-knives-own.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-togglebutton` component to enable more flexible usage.
diff --git a/.changeset/flat-badgers-fly.md b/.changeset/flat-badgers-fly.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed alignment of ´form-switch´ label.
diff --git a/.changeset/four-jokes-tease.md b/.changeset/four-jokes-tease.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`.
diff --git a/.changeset/fresh-files-crash.md b/.changeset/fresh-files-crash.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Removed all usage of deprecated utility sizing classes.
diff --git a/.changeset/fresh-schools-peel.md b/.changeset/fresh-schools-peel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added styles for text links and icon-buttons for Composible Footer in HCM.
diff --git a/.changeset/good-spoons-tie.md b/.changeset/good-spoons-tie.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Aligned `width` and `height` percentage classes, after utility update.
diff --git a/.changeset/metal-geese-swim.md b/.changeset/metal-geese-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed colors of validation icon in HCM on form elements.
diff --git a/.changeset/nice-beans-impress.md b/.changeset/nice-beans-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-logo` component to enable more flexible usage.
diff --git a/.changeset/olive-squids-enjoy.md b/.changeset/olive-squids-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed card control checkboxes' text color in HCM.
diff --git a/.changeset/real-phones-scream.md b/.changeset/real-phones-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Modified header megadropdown to close when focus is moved outside.
diff --git a/.changeset/smooth-spoons-matter.md b/.changeset/smooth-spoons-matter.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-togglebutton` slot explicitly.
diff --git a/.changeset/stale-guests-love.md b/.changeset/stale-guests-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins.
diff --git a/.changeset/warm-walls-stare.md b/.changeset/warm-walls-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored icon declarations to comply with Angular 18's new build system requirements.
diff --git a/.changeset/wicked-scissors-buy.md b/.changeset/wicked-scissors-buy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed focus from collapsible when in collapsed state.
diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -4,6 +4,10 @@
 @use '@swisspost/design-system-styles/components/form-check';
 @use '@swisspost/design-system-styles/components/checkbox';
 @use '@swisspost/design-system-styles/components/radio-button';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statements in this file.
@@ -22,7 +26,7 @@
 :host-context(fieldset) {
   &:host(:not(:last-child)) {
     .card-control {
-      margin-bottom: post.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -38,18 +42,18 @@
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 post.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   margin: 0;
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-12');
   background-color: var(--post-card-control-bg);
-  border: post.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color) !important;
   cursor: pointer;
 
   .card-control--input {
     grid-area: input;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
@@ -79,7 +83,7 @@
 
   .card-control--label {
     grid-area: label;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
@@ -101,8 +105,8 @@
 
   .card-control--icon {
     grid-area: icon;
-    width: post.$size-big;
-    height: post.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
 
     > slot {
@@ -195,11 +199,11 @@
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: post.$size-line solid Field;
-    outline-offset: post.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     .card-control--input {
-      outline: post.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
 
       // selector needed to override the .form-check styles
       &[type] {
@@ -264,7 +268,7 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -296,8 +300,8 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
-          border-radius: post.$size-line * 0.5;
+          inset: tokens.get('utility-gap-2');
+          border-radius: calc(tokens.get('utility-gap-2') * 0.5);
           background-color: SelectedItem;
         }
 
@@ -306,7 +310,7 @@
         }
 
         .card-control--input {
-          outline: post.$size-line solid Field;
+          outline: tokens.get('utility-gap-2') solid Field;
         }
       }
     }
@@ -432,7 +436,7 @@
 
 :host([data-context*='fieldset']:not(:last-child)) {
   .card-control {
-    margin-bottom: post.$size-regular;
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 

diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -14,7 +14,7 @@ export class PostClosebutton {
   render() {
     return (
       <Host data-version={version}>
-        <button class="btn btn-icon-close">
+        <button class="btn btn-icon-close" type="button">
           <post-icon aria-hidden="true" name="closex"></post-icon>
           <span class="visually-hidden">
             <slot></slot>

diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -96,7 +96,7 @@ export class PostCollapsible {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={version} tabindex={this.collapsed ? -1 : undefined}>
         <slot />
       </Host>
     );

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -110,6 +110,10 @@ slot[name='post-logo'] {
     z-index: 1;
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
+
+    &.title-header-mobile-extended {
+      border-bottom: 1px solid var(--post-core-color-sandgrey-012);
+    }
   }
 }
 

diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -150,7 +150,12 @@ export class PostHeader {
             </div>
           </div>
         </div>
-        <div class="title-header d-flex space-between align-center">
+        <div
+          class={
+            'title-header d-flex space-between align-center ' +
+            (this.mobileMenuExtended ? 'title-header-mobile-extended' : '')
+          }
+        >
           <slot name="title"></slot>
           <div class="global-sub">
             <slot name="local-controls"></slot>

diff --git a/packages/components/src/components/post-logo/post-logo.tsx b/packages/components/src/components/post-logo/post-logo.tsx
@@ -41,7 +41,7 @@ export class PostLogo {
     const LogoTag = logoLink ? 'a' : 'span';
 
     return (
-      <Host data-version={version} slot="post-logo">
+      <Host data-version={version}>
         <LogoTag class="logo" {...(logoLink ? { href: logoLink } : {})}>
           <span class="description">
             <slot onSlotchange={() => this.checkDescription()}></slot>

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -45,6 +45,7 @@ post-popovercontainer {
     left: 0;
     width: 100%;
     height: auto;
+    border-top: unset;
 
     &.slide-in {
       animation: slide-in;

diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -80,6 +80,14 @@ export class PostMegadropdown {
     this.popoverRef.hide();
   }
 
+  private handleFocusout(event: FocusEvent) {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    if (!megadropdown.contains(relatedTarget)) {
+      this.hide();
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -89,7 +97,7 @@ export class PostMegadropdown {
           edge-gap="0"
           ref={el => (this.popoverRef = el)}
         >
-          <div class="megadropdown">
+          <div class="megadropdown" onFocusout={e => this.handleFocusout(e)}>
             <div onClick={() => this.handleBackButtonClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>

diff --git a/packages/components/src/components/post-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss
@@ -1,4 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
 
 :host {
   display: inline-block;
@@ -8,7 +10,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  margin: 0 (-(post.$size-micro));
+  margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
   border-radius: post.$border-radius;
 
   .star {

diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -51,7 +51,6 @@ export class PostTogglebutton {
   render() {
     return (
       <Host
-        slot="post-togglebutton"
         data-version={version}
         role="button"
         tabindex="0"

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -3,11 +3,15 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 post-popovercontainer {
-  padding: spacing.$size-micro spacing.$size-mini;
-  max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
-  min-height: spacing.$size-regular;
+  padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
+  max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8'));
+  min-height: tokens.get('utility-gap-16');
 
   // Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip
   &[arrow] {

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -18,7 +18,7 @@
   <body style="min-height: 200vh">
     <post-header>
       <!-- Logo -->
-      <post-logo>Homepage</post-logo>
+      <post-logo slot="post-logo">Homepage</post-logo>
 
       <!-- Meta navigation -->
       <ul class="list-inline" slot="meta-navigation">
@@ -27,7 +27,7 @@
       </ul>
 
       <!-- Menu button for mobile -->
-      <post-togglebutton>
+      <post-togglebutton slot="post-togglebutton">
         <span class="visually-hidden-sm">Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>

diff --git a/packages/components/src/utils/get-focusable-children.ts b/packages/components/src/utils/get-focusable-children.ts
@@ -21,6 +21,7 @@ const focusDisablingSelector = `:where(${[
   '[popover]:not(:popover-open) *',
   'details:not([open]) > *:not(details > summary:first-of-type)',
   'details:not([open]) > *:not(details > summary:first-of-type) *',
+  '[tabindex^="-"]',
 ].join(',')})`;
 
 export const getFocusableChildren = (element: Element): NodeListOf<HTMLElement> => {