From c5c3bb8dfb02062b5dbf36395774b665b23db5fb Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 31 Dec 2024 11:32:07 +0100 Subject: [PATCH 1/6] chore(components): update crypto to nanoid --- .changeset/lucky-grapes-wink.md | 5 +++++ .../components/post-accordion-item/post-accordion-item.tsx | 3 ++- .../components/src/components/post-banner/post-banner.tsx | 3 ++- packages/components/src/components/post-list/post-list.tsx | 3 ++- .../src/components/post-tab-header/post-tab-header.tsx | 3 ++- .../src/components/post-tab-panel/post-tab-panel.tsx | 3 ++- 6 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 .changeset/lucky-grapes-wink.md diff --git a/.changeset/lucky-grapes-wink.md b/.changeset/lucky-grapes-wink.md new file mode 100644 index 0000000000..30f1364d03 --- /dev/null +++ b/.changeset/lucky-grapes-wink.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Used nanoid instead of crypto to generate random IDs. 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 index 235d9ce6e1..60f129dda8 100644 --- a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx +++ b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx @@ -2,6 +2,7 @@ import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from import { version } from '@root/package.json'; import { HEADING_LEVELS, HeadingLevel } from '@/types'; import { checkEmptyOrOneOf } from '@/utils'; +import { nanoid } from 'nanoid'; /** * @part button - The pseudo-element, used to override styles on the components internal header `button` element. @@ -46,7 +47,7 @@ export class PostAccordionItem { } componentWillLoad() { - this.id = this.host.id || `a${crypto.randomUUID()}`; + this.id = this.host.id || `p${nanoid(6)}`; } componentDidLoad() { diff --git a/packages/components/src/components/post-banner/post-banner.tsx b/packages/components/src/components/post-banner/post-banner.tsx index 26d4f10794..8aed59c285 100644 --- a/packages/components/src/components/post-banner/post-banner.tsx +++ b/packages/components/src/components/post-banner/post-banner.tsx @@ -14,6 +14,7 @@ import { version } from '@root/package.json'; import { fadeOut } from '@/animations'; import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '@/utils'; import { BANNER_TYPES, BannerType } from './banner-types'; +import { nanoid } from 'nanoid'; /** * @slot heading - Slot for placing custom content within the banner's heading. @@ -29,7 +30,7 @@ import { BANNER_TYPES, BannerType } from './banner-types'; export class PostBanner { @Element() host: HTMLPostBannerElement; - @State() bannerId = crypto.randomUUID(); + @State() bannerId = `p${nanoid(6)}`; @State() classes: string; @State() hasActions: boolean; @State() hasHeading: boolean; diff --git a/packages/components/src/components/post-list/post-list.tsx b/packages/components/src/components/post-list/post-list.tsx index 47efe5a797..2279f7fb9b 100644 --- a/packages/components/src/components/post-list/post-list.tsx +++ b/packages/components/src/components/post-list/post-list.tsx @@ -1,5 +1,6 @@ import { Component, Element, Prop, Host, State, h } from '@stencil/core'; import { version } from '@root/package.json'; +import { nanoid } from 'nanoid'; /** * @slot default - Slot for placing the list title. @@ -35,7 +36,7 @@ export class PostList { /** * Get the id set on the host element or use a random id by default */ - this.titleId = `title-${this.host.id || crypto.randomUUID()}`; + this.titleId = `title-${this.host.id || `p${nanoid(6)}`}`; } componentDidLoad() { diff --git a/packages/components/src/components/post-tab-header/post-tab-header.tsx b/packages/components/src/components/post-tab-header/post-tab-header.tsx index 4f84fd6afe..6b33679c40 100644 --- a/packages/components/src/components/post-tab-header/post-tab-header.tsx +++ b/packages/components/src/components/post-tab-header/post-tab-header.tsx @@ -1,6 +1,7 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'; import { version } from '@root/package.json'; import { checkNonEmpty } from '@/utils'; +import { nanoid } from 'nanoid'; /** * @slot default - Slot for the content of the tab header. @@ -27,7 +28,7 @@ export class PostTabHeader { } componentWillLoad() { - this.tabId = `tab-${this.host.id || crypto.randomUUID()}`; + this.tabId = `tab-${this.host.id || `p${nanoid(6)}`}`; } render() { diff --git a/packages/components/src/components/post-tab-panel/post-tab-panel.tsx b/packages/components/src/components/post-tab-panel/post-tab-panel.tsx index 7b76213692..7ff680ad5e 100644 --- a/packages/components/src/components/post-tab-panel/post-tab-panel.tsx +++ b/packages/components/src/components/post-tab-panel/post-tab-panel.tsx @@ -1,5 +1,6 @@ import { Component, Element, h, Host, Prop, State } from '@stencil/core'; import { version } from '@root/package.json'; +import { nanoid } from 'nanoid'; /** * @slot default - Slot for placing the content of the tab panel. @@ -22,7 +23,7 @@ export class PostTabPanel { componentWillLoad() { // get the id set on the host element or use a random id by default - this.panelId = `panel-${this.host.id || crypto.randomUUID()}`; + this.panelId = `panel-${this.host.id || `p${nanoid(6)}`}`; } render() { From a54705c9807cc5be2eef7dff28d8589f576f9546 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 31 Dec 2024 11:35:54 +0100 Subject: [PATCH 2/6] remove nested template literals --- packages/components/src/components/post-list/post-list.tsx | 2 +- .../src/components/post-tab-header/post-tab-header.tsx | 2 +- .../components/src/components/post-tab-panel/post-tab-panel.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/post-list/post-list.tsx b/packages/components/src/components/post-list/post-list.tsx index 2279f7fb9b..086859699b 100644 --- a/packages/components/src/components/post-list/post-list.tsx +++ b/packages/components/src/components/post-list/post-list.tsx @@ -36,7 +36,7 @@ export class PostList { /** * Get the id set on the host element or use a random id by default */ - this.titleId = `title-${this.host.id || `p${nanoid(6)}`}`; + this.titleId = `title-${this.host.id || nanoid(6)}`; } componentDidLoad() { diff --git a/packages/components/src/components/post-tab-header/post-tab-header.tsx b/packages/components/src/components/post-tab-header/post-tab-header.tsx index 6b33679c40..966988162b 100644 --- a/packages/components/src/components/post-tab-header/post-tab-header.tsx +++ b/packages/components/src/components/post-tab-header/post-tab-header.tsx @@ -28,7 +28,7 @@ export class PostTabHeader { } componentWillLoad() { - this.tabId = `tab-${this.host.id || `p${nanoid(6)}`}`; + this.tabId = `tab-${this.host.id || nanoid(6)}`; } render() { diff --git a/packages/components/src/components/post-tab-panel/post-tab-panel.tsx b/packages/components/src/components/post-tab-panel/post-tab-panel.tsx index 7ff680ad5e..7b5a1445e4 100644 --- a/packages/components/src/components/post-tab-panel/post-tab-panel.tsx +++ b/packages/components/src/components/post-tab-panel/post-tab-panel.tsx @@ -23,7 +23,7 @@ export class PostTabPanel { componentWillLoad() { // get the id set on the host element or use a random id by default - this.panelId = `panel-${this.host.id || `p${nanoid(6)}`}`; + this.panelId = `panel-${this.host.id || nanoid(6)}`; } render() { From 3b53fd8427d2157e686bc94a52c9c22b44840081 Mon Sep 17 00:00:00 2001 From: Lea Date: Tue, 7 Jan 2025 16:09:41 +0100 Subject: [PATCH 3/6] Update .changeset/lucky-grapes-wink.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/lucky-grapes-wink.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lucky-grapes-wink.md b/.changeset/lucky-grapes-wink.md index 30f1364d03..5ff9ef321f 100644 --- a/.changeset/lucky-grapes-wink.md +++ b/.changeset/lucky-grapes-wink.md @@ -2,4 +2,4 @@ '@swisspost/design-system-components': patch --- -Used nanoid instead of crypto to generate random IDs. +Reduced the length of random IDs generated in the components; they are now generated using the [nanoid library](https://github.com/ai/nanoid) instead of the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API). From 588711c50b00a3326cf0b27c1f3bd0fbbedfcc63 Mon Sep 17 00:00:00 2001 From: Lea Date: Tue, 7 Jan 2025 16:10:01 +0100 Subject: [PATCH 4/6] Update .changeset/lucky-grapes-wink.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> From 059ec489097b1fa7e2cdaac632c2ddcc696beb49 Mon Sep 17 00:00:00 2001 From: Lea Date: Tue, 7 Jan 2025 16:10:26 +0100 Subject: [PATCH 5/6] Update .changeset/lucky-grapes-wink.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> From adf2f96fa4c3b0f7f2421915d5202e6377527910 Mon Sep 17 00:00:00 2001 From: Lea Date: Tue, 7 Jan 2025 16:11:19 +0100 Subject: [PATCH 6/6] Update .changeset/lucky-grapes-wink.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>