Skip to content

Commit

Permalink
feat(documentation): add version switch active state to v6 (#3049)
Browse files Browse the repository at this point in the history 
Co-authored-by: Philipp Gfeller <[email protected]>
Co-authored-by: Oliver Schürch <[email protected]>
  • Loading branch information
@davidritter-dotcom @gfellerph @oliverschuerch
3 people authored Jul 15, 2024
1 parent b3e9ac2 commit fcff18e
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 97 deletions.
5 changes: 5 additions & 0 deletions .changeset/spicy-drinks-relax.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-documentation': patch
---

Fixed version-switcher to show the same way like on design-system.post.ch.
135 changes: 68 additions & 67 deletions packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 <div>Loading...</div>;
}

const latestVersionMajorMinor = getVersion(
versions.find(version => version?.version)?.version || '',
'majorminor',
);
if (loading) return <div className="version-switcher__loading">Loading...</div>;

return (
<Fragment>
<WithTooltip
placement="bottom"
trigger="click"
closeOnOutsideClick
tooltip={() => {
return (
<div className="version-switcher-dropdown">
{versions.map(version => (
<WithTooltip
placement="bottom"
trigger="click"
closeOnOutsideClick
tooltip={() => (
<>
<div className="version-switcher__dropdown">
{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 (
<a
className="version-switcher-dropdown-item"
className={['dropdown__item', isActive].filter(c => c).join(' ')}
key={version.title}
href={version.url}
>
<span>{version.title}</span>
{version.dependencies ? (
<table className="version-switcher-dependencies">
<caption className="visually-hidden">Compatibility</caption>
<thead className="visually-hidden">
<tr>
<th scope="col">Angular</th>
<th scope="col">Bootstrap</th>
<th scope="col">Ng-bootstrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>
<img src="/assets/images/technologies/logo-angular.svg" alt="" />
{version.dependencies['@angular/core']}
</span>
</td>
<td>
<span>
<img src="/assets/images/technologies/logo-bootstrap.svg" alt="" />
{version.dependencies['bootstrap']}
</span>
</td>
<td>
<span>
<img src="/assets/images/technologies/logo-ng-bootstrap.svg" alt="" />
{version.dependencies['@ng-bootstrap/ng-bootstrap']}
</span>
</td>
</tr>
</tbody>
</table>
) : (
''
)}
<span className="item__title">
v{isActive ? CURRENT_VERSION : version.version}
</span>
<span className="item__deps">
{deps.map(d => (
<span key={d.key} className="deps_dep" title={d.key}>
{d.name !== null ? (
<img
className="dep__icon"
src={`/assets/images/technologies/logo-${d.name}.svg`}
alt={`${d.key} logo`}
/>
) : null}
<span className="dep__version">{d.version}</span>
</span>
))}
</span>
</a>
))}
</div>
);
}}
>
<IconButton placeholder="Versions">Versions {latestVersionMajorMinor}</IconButton>
</WithTooltip>
</Fragment>
);
})}
</div>
<IconButton
placeholder="Versions"
className="version_switcher__sizing_placeholder"
aria-hidden="true"
>
v{CURRENT_MINOR_VERSION}
<post-icon name="2052"></post-icon>
</IconButton>
</>
)}
>
<IconButton placeholder="Versions">
v{CURRENT_MINOR_VERSION}
<post-icon name="2052"></post-icon>
</IconButton>
</WithTooltip>
);
}

Expand Down
71 changes: 45 additions & 26 deletions packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
4 changes: 0 additions & 4 deletions packages/documentation/public/netlify.toml
View file

This file was deleted.

0 comments on commit fcff18e

Please sign in to comment.