Skip to content

Commit

Permalink
chore(documentation): update version switcher to match v7 format/styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliverschuerch
oliverschuerch committed May 27, 2024
1 parent 23b05e9 commit 19923a2
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 103 deletions.
139 changes: 66 additions & 73 deletions packages/documentation/.storybook/addons/version-switcher/VersionSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +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 currentVersionMajorMinor = getVersion(
packageJson.dependencies['@swisspost/design-system-styles'] || '',
'majorminor',
);
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 @@ -23,95 +22,89 @@ interface Version {
bootstrap: string;
};
}

function VersionSwitcher() {
const [versions, setVersions] = useState<Version[]>([]);
const [loading, setLoading] = useState(true);

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 className="version-switcher-loading">Loading...</div>;
}
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${
getVersion(version.version || '', 'majorminor') === currentVersionMajorMinor
? ' active'
: ''
}`}
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">Version {currentVersionMajorMinor}</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>
);
}

export default VersionSwitcher;
68 changes: 38 additions & 30 deletions packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,64 @@
@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-loading {
.version-switcher__loading {
display: flex;
align-items: center;
font-size: type.$font-size-14;
font-size: post.$font-size-14;
}

.version-switcher-dropdown {
.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: var(--post-gray-10);
background-color: post.$gray-10;
}

&.active {
background-color: rgba(var(--post-yellow-rgb), 0.4);
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 {
}
}

0 comments on commit 19923a2

Please sign in to comment.