Merge branch 'main' into 4326-update-megadropdown-styles

swisspost · Dec 20, 2024 · 4977faa · 4977faa
2 parents 653845e + 07824c4
commit 4977faa
Show file tree

Hide file tree

Showing 77 changed files with 654 additions and 672 deletions.
diff --git a/.changeset/few-ways-beam.md b/.changeset/few-ways-beam.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+---
+
+Renamed the "dropdown" variant to "menu" for the `post-language-switch` and `post-language-option` components.
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/moody-coats-kneel.md b/.changeset/moody-coats-kneel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated style and keyboard navigation of `post-language-switch`.
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/packages/components/cypress/e2e/language-option.cy.ts b/packages/components/cypress/e2e/language-option.cy.ts
@@ -4,15 +4,15 @@ describe('language-option', () => {
   describe('button', () => {
     beforeEach(() => {
       cy.getComponent('language-option', LANGUAGE_OPTION_ID);
-      cy.get('@language-option').shadow().find('button').as('button');
+      cy.get('@language-option').find('button').as('button');
     });
 
     it('should render', () => {
       cy.get('@language-option').should('exist');
     });
 
     it('should not render an anchor', () => {
-      cy.get('@language-option').shadow().find('a').should('not.exist');
+      cy.get('@language-option').find('a').should('not.exist');
     });
 
     it('should render a button with correct properties', () => {
@@ -35,15 +35,15 @@ describe('language-option', () => {
   describe('anchor', () => {
     beforeEach(() => {
       cy.getComponent('language-option', LANGUAGE_OPTION_ID, 'anchor');
-      cy.get('@language-option').shadow().find('a').as('anchor');
+      cy.get('@language-option').find('a').as('anchor');
     });
 
     it('should render', () => {
       cy.get('@language-option').should('exist');
     });
 
     it('should not render a button', () => {
-      cy.get('@language-option').shadow().find('button').should('not.exist');
+      cy.get('@language-option').find('button').should('not.exist');
     });
 
     it('should render an anchor', () => {

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-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -123,7 +123,7 @@ export class PostHeader {
   }
 
   private switchLanguageSwitchMode() {
-    const variant: SwitchVariant = this.device === 'desktop' ? 'dropdown' : 'list';
+    const variant: SwitchVariant = this.device === 'desktop' ? 'menu' : 'list';
     this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
   }
 

diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/packages/components/src/components/post-language-option/post-language-option.scss
@@ -1,64 +1,83 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
 
-:host {
+post-language-option {
   display: inline-block;
-  width: fit-content;
-}
 
-button {
-  @include post.reset-button;
-}
+  button {
+    @include post.reset-button;
+  }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 
-:is(a, button) {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  padding: var(--post-language-option-padding);
+  :is(a, button) {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: var(--post-language-option-padding);
+    border-radius: 2px;
+    @include utilities-mx.focus-style;
+  }
 }
 
-.post-language-option-list {
-  @include post.focus-style;
-  border-radius: 2px;
-  width: 40px;
-  height: 40px;
+post-language-option:where([variant='list']) {
+  :is(a, button) {
+    width: 40px;
+    height: 40px;
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    background-color: #050400;
-    color: #fff;
+    &:hover {
+      color: #504f4b;
+    }
+
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      background-color: #050400;
+      color: #fff;
+
+      &:hover {
+        background-color: #504f4b;
+      }
+    }
   }
 }
 
-.post-language-option-dropdown {
-  padding-block: 13px;
-  padding-inline: 24px;
-  box-sizing: border-box;
-  position: relative;
+post-language-option:where([variant='menu']) {
+  width: 100%;
+
+  :is(a, button) {
+    padding-block: 13px;
+    padding-inline: 24px;
+    box-sizing: border-box;
+    position: relative;
+    left: -1px;
+    width: calc(100% + 2px);
+
+    &[aria-current='true'],
+    &[aria-current='page'] {
+      &::after {
+        content: '';
+        left: 0;
+        height: 3px;
+        background-color: #050400;
+        width: 100%;
+        display: block;
+        position: absolute;
+        bottom: 3px;
+      }
 
-  &[aria-current='true'],
-  &[aria-current='page'] {
-    &::after {
-      content: '';
-      left: -2px;
-      height: 3px;
-      background-color: #504f4b;
-      width: calc(100% + 4px);
-      display: block;
-      position: absolute;
-      bottom: 3px;
+      &:hover::after {
+        background-color: #504f4b;
+      }
     }
 
-    &:focus::after {
-      width: calc(100% - 5px);
-      left: 2px;
+    &:hover {
+      color: #504f4b;
     }
   }
 }
diff --git a/packages/components/src/components/post-language-option/post-language-option.tsx b/packages/components/src/components/post-language-option/post-language-option.tsx
@@ -19,7 +19,6 @@ import { SwitchVariant } from '../post-language-switch/switch-variants';
 @Component({
   tag: 'post-language-option',
   styleUrl: 'post-language-option.scss',
-  shadow: true,
 })
 export class PostLanguageOption {
   @Element() host: HTMLPostLanguageOptionElement;
@@ -124,27 +123,33 @@ export class PostLanguageOption {
   render() {
     const lang = this.code.toLowerCase();
 
+    const emitOnKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        this.emitChange();
+      }
+    };
+
     return (
-      <Host data-version={version} role="listitem">
+      <Host data-version={version} role={this.variant ? `${this.variant}item` : null}>
         {this.url ? (
           <a
-            class={this.variant ? `post-language-option-${this.variant}` : ''}
             aria-current={this.active ? 'page' : undefined}
             aria-label={this.name}
             href={this.url}
             hrefLang={lang}
             lang={lang}
             onClick={() => this.emitChange()}
+            onKeyDown={emitOnKeyDown}
           >
             <slot />
           </a>
         ) : (
           <button
-            class={this.variant ? `post-language-option-${this.variant}` : ''}
             aria-current={this.active ? 'true' : undefined}
             aria-label={this.name}
             lang={lang}
             onClick={() => this.emitChange()}
+            onKeyDown={emitOnKeyDown}
           >
             <slot />
           </button>

diff --git a/packages/components/src/components/post-language-option/readme.md b/packages/components/src/components/post-language-option/readme.md
@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property            | Attribute | Description                                                                                                                                                 | Type                   | Default     |
-| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `active`            | `active`  | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`              | `undefined` |
-| `code` _(required)_ | `code`    | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`               | `undefined` |
-| `name`              | `name`    | The full name of the language. For example, "Deutsch".                                                                                                      | `string`               | `undefined` |
-| `url`               | `url`     | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`               | `undefined` |
-| `variant`           | `variant` | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"dropdown" \| "list"` | `undefined` |
+| Property            | Attribute | Description                                                                                                                                                 | Type               | Default     |
+| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| `active`            | `active`  | If set to `true`, the language option is considered the current language for the page.                                                                      | `boolean`          | `undefined` |
+| `code` _(required)_ | `code`    | The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".      | `string`           | `undefined` |
+| `name`              | `name`    | The full name of the language. For example, "Deutsch".                                                                                                      | `string`           | `undefined` |
+| `url`               | `url`     | The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor. | `string`           | `undefined` |
+| `variant`           | `variant` | The variant of the post-language-switch parent (dynamically set by the parent)                                                                              | `"list" \| "menu"` | `undefined` |
 
 
 ## Events