From c15960d9da92c92b67847f16264b1d0e73cfb483 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 11 Dec 2024 16:07:53 +0100 Subject: [PATCH] remove name prop and use nanoid --- packages/components/package.json | 5 ++-- .../post-language-switch.tsx | 23 +++------------- .../language-switch.stories.ts | 3 --- pnpm-lock.yaml | 26 ++++++++++--------- 4 files changed, 20 insertions(+), 37 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index db4866c06a..2068ff5214 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -40,10 +40,11 @@ "dependencies": { "@floating-ui/dom": "1.6.8", "@oddbird/popover-polyfill": "0.3.7", - "@swisspost/design-system-styles": "workspace:9.0.0-next.8", "@swisspost/design-system-icons": "workspace:9.0.0-next.8", + "@swisspost/design-system-styles": "workspace:9.0.0-next.8", "ally.js": "1.4.1", - "long-press-event": "2.5.0" + "long-press-event": "2.5.0", + "nanoid": "5.0.9" }, "devDependencies": { "@percy/cli": "1.29.1", diff --git a/packages/components/src/components/post-language-switch/post-language-switch.tsx b/packages/components/src/components/post-language-switch/post-language-switch.tsx index b6f1ebe226..a34fe37267 100644 --- a/packages/components/src/components/post-language-switch/post-language-switch.tsx +++ b/packages/components/src/components/post-language-switch/post-language-switch.tsx @@ -2,6 +2,7 @@ import { Component, Element, Host, h, Prop, Watch, State } from '@stencil/core'; import { checkEmptyOrOneOf, checkType } from '@/utils'; import { version } from '@root/package.json'; import { SWITCH_VARIANTS, SwitchVariant } from './switch-variants'; +import { nanoid } from 'nanoid'; @Component({ tag: 'post-language-switch', @@ -25,20 +26,6 @@ export class PostLanguageSwitch { ); } - /** - * The name of the language switch, which will be used on the dropdown as an ID - */ - @Prop() name: string; - - @Watch('name') - validateName(value = this.name) { - checkType( - value, - 'string', - 'The "name" property of the post-language-switch component must be a string.', - ); - } - /** * A descriptive text for the list of language options */ @@ -74,12 +61,7 @@ export class PostLanguageSwitch { */ @State() activeLang: string; - private menuId: string; - connectedCallback() { - // Transforms name into an ID for the post-menu - this.menuId = this.name.replace(/\W/g, '_'); - this.updateChildrenVariant(); // Get the active language based on children's active state @@ -103,7 +85,6 @@ export class PostLanguageSwitch { this.validateCaption(); this.validateDescription(); this.validateVariant(); - this.validateName(); // Detects a change in the active language this.host.addEventListener('postChange', (el: CustomEvent) => { @@ -126,6 +107,8 @@ export class PostLanguageSwitch { }); } + private menuId = `p${nanoid(11)}`; + private renderList() { return ( = { variant: 'list', caption: 'Caption', description: 'Description', - name: 'language-switch-example', }, argTypes: { variant: { @@ -55,7 +54,6 @@ function renderLanguageSwitch(args: Partial) { caption=${args.caption} description=${args.description} variant=${args.variant} - name=${args.name} > DE EN @@ -68,7 +66,6 @@ function renderLanguageSwitchAsLinks(args: Partial DE =15.0.1} hasBin: true + nanoid@5.0.9: + resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==} + engines: {node: ^18 || >=20} + hasBin: true + natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} @@ -15795,7 +15803,7 @@ snapshots: axios@1.7.7: dependencies: - follow-redirects: 1.15.6(debug@4.3.6) + follow-redirects: 1.15.6(debug@4.3.7) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: @@ -18505,7 +18513,7 @@ snapshots: http-proxy-middleware@2.0.6(@types/express@4.17.21): dependencies: '@types/http-proxy': 1.17.15 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) is-glob: 4.0.3 is-plain-obj: 3.0.0 micromatch: 4.0.8 @@ -18525,14 +18533,6 @@ snapshots: transitivePeerDependencies: - supports-color - http-proxy@1.18.1: - dependencies: - eventemitter3: 4.0.7 - follow-redirects: 1.15.6(debug@4.3.6) - requires-port: 1.0.0 - transitivePeerDependencies: - - debug - http-proxy@1.18.1(debug@4.3.7): dependencies: eventemitter3: 4.0.7 @@ -18548,7 +18548,7 @@ snapshots: corser: 2.0.1 he: 1.2.0 html-encoding-sniffer: 3.0.0 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) mime: 1.6.0 minimist: 1.2.8 opener: 1.5.2 @@ -19684,7 +19684,7 @@ snapshots: dom-serialize: 2.2.1 glob: 7.2.3 graceful-fs: 4.2.11 - http-proxy: 1.18.1 + http-proxy: 1.18.1(debug@4.3.7) isbinaryfile: 4.0.10 lodash: 4.17.21 log4js: 6.9.1 @@ -20530,6 +20530,8 @@ snapshots: nanoid@3.3.7: {} + nanoid@5.0.9: {} + natural-compare@1.4.0: {} needle@3.2.0: