diff --git a/.changeset/spicy-drinks-relax.md b/.changeset/spicy-drinks-relax.md new file mode 100644 index 0000000000..4385ff1e15 --- /dev/null +++ b/.changeset/spicy-drinks-relax.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Fixed version-switcher to show the same way like on design-system.post.ch. diff --git a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx index 0e18ee1ae7..53ca7fc967 100644 --- a/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx +++ b/packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx @@ -1,8 +1,13 @@ import { IconButton, WithTooltip } from '@storybook/components'; -import React, { Fragment, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { getVersion } from '../../../src/utils/version'; +import * as packageJson from '../../../package.json'; -const DESIGN_SYSTEM_URL = 'https://design-system.post.ch/assets/versions.json'; +const VERSIONS_URL = 'https://design-system.post.ch/assets/versions.json'; +const STYLES_VERSION = packageJson.dependencies['@swisspost/design-system-styles'] ?? ''; +const CURRENT_VERSION = getVersion(STYLES_VERSION, 'majorminorpatch') ?? ''; +const CURRENT_MINOR_VERSION = getVersion(STYLES_VERSION, 'majorminor') ?? ''; +const CURRENT_MAJOR_VERSION = getVersion(STYLES_VERSION, 'major') ?? ''; interface Version { title: string; @@ -25,87 +30,83 @@ function VersionSwitcher() { useEffect(() => { async function fetchVersions() { try { - const response = await fetch(DESIGN_SYSTEM_URL); + const response = await fetch(VERSIONS_URL); const versionsJSON = await response.json(); setVersions(versionsJSON); setLoading(false); } catch (error) { - console.log(`failed to fetch versions file. Errormessage: ${error}`); + console.log(`Failed to fetch versions file. Errormessage: ${error}`); } } void fetchVersions(); }, []); - if (loading) { - return
Loading...
; - } - - const latestVersionMajorMinor = getVersion( - versions.find(version => version?.version)?.version || '', - 'majorminor', - ); + if (loading) return
Loading...
; return ( - - { - return ( -
- {versions.map(version => ( + ( + <> +
+ {versions.map(version => { + const isActive = + getVersion(version.version ?? '', 'major') === CURRENT_MAJOR_VERSION + ? 'active' + : ''; + const deps = Object.entries(version.dependencies || []) + .filter(([k]) => !/^@swisspost\//.test(k)) + .map(([k, v]) => ({ + key: k, + name: k.match(/(?:@?)([^/]+)/)?.[1], + version: v, + })); + + return ( c).join(' ')} key={version.title} href={version.url} > - {version.title} - {version.dependencies ? ( - - - - - - - - - - - - - - - - -
Compatibility
AngularBootstrapNg-bootstrap
- - - {version.dependencies['@angular/core']} - - - - - {version.dependencies['bootstrap']} - - - - - {version.dependencies['@ng-bootstrap/ng-bootstrap']} - -
- ) : ( - '' - )} + + v{isActive ? CURRENT_VERSION : version.version} + + + {deps.map(d => ( + + {d.name !== null ? ( + {`${d.key} + ) : null} + {d.version} + + ))} + - ))} -
- ); - }} - > - Versions {latestVersionMajorMinor} - - + ); + })} +
+ + + )} + > + + v{CURRENT_MINOR_VERSION} + + + ); } diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss index f749079324..366e947df5 100644 --- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss +++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss @@ -1,46 +1,65 @@ -@use '../../../node_modules/@swisspost/design-system-styles/variables/type'; -@use '../../../node_modules/@swisspost/design-system-styles/variables/spacing'; +@use '@swisspost/design-system-styles/core' as post; -.version-switcher-dropdown { +.version-switcher__loading { + display: flex; + align-items: center; + font-size: post.$font-size-14; +} + +.version_switcher__sizing_placeholder { + visibility: hidden !important; +} + +.version-switcher__dropdown { display: flex; flex-flow: column nowrap; + gap: post.$size-line; + position: absolute; + top: -5px; + right: 0; + padding: post.$size-mini; background-color: var(--post-light); - font-size: type.$font-size-14; + border: post.$border-width solid post.$border-color; + border-radius: post.$border-radius; + font-size: post.$font-size-sm; - .version-switcher-dropdown-item { - padding: spacing.$size-mini spacing.$size-small-regular; + .dropdown__item { + display: block; + padding: post.$size-mini post.$size-small-regular; + border-radius: post.$border-radius-sm; text-decoration: none; color: inherit; - & + .version-switcher-dropdown-item { - border-top: 1px solid var(--post-black); + &:hover { + background-color: post.$gray-10; } - &:hover { - background-color: var(--post-gray-10); + &.active { + background-color: post.$yellow; } } -} -.version-switcher-dependencies { - margin-top: spacing.$size-micro; - font-size: type.$font-size-12; - border-spacing: 0; + .item__title { + display: block; + } - td { - width: 12ch; - & + td { - padding: spacing.$size-micro; - } + .item__deps { + display: flex; + gap: post.$size-small-regular; } - span { + .deps_dep { display: flex; - align-items: center; - gap: spacing.$size-micro; + gap: post.$size-line; + font-size: 85%; + } - img { - max-width: 1.5em; - } + .dep__icon { + display: block; + height: 1.1em; + } + + .dep__version { + white-space: nowrap; } } diff --git a/packages/documentation/public/netlify.toml b/packages/documentation/public/netlify.toml deleted file mode 100644 index ead1626fdd..0000000000 --- a/packages/documentation/public/netlify.toml +++ /dev/null @@ -1,4 +0,0 @@ -[[headers]] - for="/assets/versions.json" - [headers.values] - Access-Control-Allow-Origin = "*"