From e10f039b25eae4537a1e5d95cf0591bf7b589c74 Mon Sep 17 00:00:00 2001 From: Tom Tschiller <55528873+tom-tschiller@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:51:28 +0100 Subject: [PATCH] =?UTF-8?q?chore(documentation):=20add=20package=20design-?= =?UTF-8?q?system-tokens=20on=20start=20page=20=E2=80=A6=20(#3997)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .changeset/rotten-bats-look.md | 5 +++++ packages/documentation/package.json | 1 + .../public/assets/images/packages/tokens.svg | 9 ++++++++ .../documentation/src/shared/packages.data.ts | 22 +++++++++++++++++++ .../stories/packages/tokens/tokens.stories.ts | 16 ++++++++++++++ pnpm-lock.yaml | 3 +++ 6 files changed, 56 insertions(+) create mode 100644 .changeset/rotten-bats-look.md create mode 100644 packages/documentation/public/assets/images/packages/tokens.svg create mode 100644 packages/documentation/src/stories/packages/tokens/tokens.stories.ts diff --git a/.changeset/rotten-bats-look.md b/.changeset/rotten-bats-look.md new file mode 100644 index 0000000000..e2cc836b86 --- /dev/null +++ b/.changeset/rotten-bats-look.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added tokens package icon to the home page diff --git a/packages/documentation/package.json b/packages/documentation/package.json index b51f01331e..5cf18b11dd 100644 --- a/packages/documentation/package.json +++ b/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" }, diff --git a/packages/documentation/public/assets/images/packages/tokens.svg b/packages/documentation/public/assets/images/packages/tokens.svg new file mode 100644 index 0000000000..50916efaae --- /dev/null +++ b/packages/documentation/public/assets/images/packages/tokens.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/documentation/src/shared/packages.data.ts b/packages/documentation/src/shared/packages.data.ts index 85f501d9a5..7e24982122 100644 --- a/packages/documentation/src/shared/packages.data.ts +++ b/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) { diff --git a/packages/documentation/src/stories/packages/tokens/tokens.stories.ts b/packages/documentation/src/stories/packages/tokens/tokens.stories.ts new file mode 100644 index 0000000000..3f34af08f7 --- /dev/null +++ b/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 = {}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ffe1c23ff..82167b431e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -311,6 +311,9 @@ importers: '@swisspost/design-system-styles': specifier: workspace:9.0.0-next.7 version: link:../styles/dist + '@swisspost/design-system-tokens': + specifier: workspace:9.0.0-next.7 + version: link:../tokens/dist '@swisspost/internet-header': specifier: workspace:2.0.0-next.7 version: link:../internet-header