chore(documentation): add package design-system-tokens on start page … (

#3997)

Note, that the GUID in
packages/documentation/src/stories/getting-started/packages/tokens/tokens.stories.ts
is randomly generated. I'm not sure if this correct, but as far as I
understand that's where it's defined.

---------

Co-authored-by: Philipp Gfeller <[email protected]>

.changeset/rotten-bats-look.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added tokens package icon to the home page

packages/documentation/package.json

@@ -32,6 +32,7 @@
     "@swisspost/design-system-components-react": "workspace:9.0.0-next.7",
     "@swisspost/design-system-icons": "workspace:9.0.0-next.7",
     "@swisspost/design-system-styles": "workspace:9.0.0-next.7",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.7",
     "@swisspost/internet-header": "workspace:2.0.0-next.7",
     "bootstrap": "5.3.3"
   },

packages/documentation/src/shared/packages.data.ts

@@ -1,10 +1,12 @@
 import { DEPENDENCIES, getVersion } from '@/utils/version';
+
 import metaStyles from '@/stories/packages/styles/styles.stories';
 import metaComponents from '@/stories/packages/components/components.stories';
 import metaComponentsAngular from '@/stories/packages/components-angular/components-angular.stories';
 import metaInternetHeader from '@/stories/packages/internet-header/internet-header.stories';
 import metaIntranetHeader from '@/stories/packages/intranet-header/intranet-header.stories';
 import metaIcons from '@/stories/packages/icons/package-icons.stories';
+import metaTokens from '@/stories/packages/tokens/tokens.stories';
 import { PackageType } from '@/../types';
 
 interface IPackage {
@@ -145,6 +147,26 @@ export const packages: IPackage[] = [
     },
     version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-icons'])}`,
   },
+  {
+    name: 'Tokens',
+    docsStoryId: metaTokens.id,
+    type: PackageType.Assets,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/tokens',
+        ariaLabel: 'Source of Tokens package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaTokens.id),
+        ariaLabel: 'Getting started with Tokens package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/tokens.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-tokens'])}`,
+  },
 ];
 
 function generateDocsRelativeLink(storyId: string) {

packages/documentation/src/stories/packages/tokens/tokens.stories.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: 'c0af5a11-2b2f-427d-9cd3-cc323f49e56e',
+  title: 'Getting Started/Packages/Tokens',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};