chore(components): update crypto to nanoid (#4369)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Jan 8, 2025 · ea5c638 · ea5c638
1 parent bf95c9b
commit ea5c638
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/lucky-grapes-wink.md b/.changeset/lucky-grapes-wink.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+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).
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
@@ -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
@@ -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
@@ -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 || 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
@@ -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 || 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
@@ -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 || nanoid(6)}`;
   }
 
   render() {