Skip to content

Commit

Permalink
feat(documentation): add active state to version switch (#3050)
Browse files Browse the repository at this point in the history 
Co-authored-by: Oliver Schürch <[email protected]>
  • Loading branch information
@davidritter-dotcom @oliverschuerch
davidritter-dotcom and oliverschuerch authored May 16, 2024
1 parent 8bc46eb commit 12e475e
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 93 deletions.
127 changes: 62 additions & 65 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 BROWSED_VERSION = getVersion(
packageJson.dependencies['@swisspost/design-system-styles'] || '',
'majorminor',
);

interface Version {
title: string;
Expand Down Expand Up @@ -30,82 +35,74 @@ function VersionSwitcher() {
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>;
}

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={() => (
<>
<IconButton
placeholder="Versions"
className="version_switcher__sizing_placeholder"
aria-hidden="true"
>
v{BROWSED_VERSION}
<post-icon name="2052"></post-icon>
</IconButton>
<div className="version-switcher__dropdown">
{versions.map(version => {
const isActive =
getVersion(version.version || '', 'majorminor') === BROWSED_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{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 {latestVersionMajorMinor}</IconButton>
</WithTooltip>
</Fragment>
);
})}
</div>
</>
)}
>
<IconButton placeholder="Versions">
v{BROWSED_VERSION}
<post-icon name="2052"></post-icon>
</IconButton>
</WithTooltip>
);
}

Expand Down
68 changes: 40 additions & 28 deletions packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,64 @@
@use '@swisspost/design-system-styles/variables/type';
@use '@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: 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 {
}
}
6 changes: 6 additions & 0 deletions packages/documentation/.storybook/manager.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { addons } from '@storybook/manager-api';
import themes from './styles/themes';
import { applyPolyfills as componentsPolyfills } from '@swisspost/design-system-components/loader';
import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon.js';

componentsPolyfills().then(() => {
definePostIcon();
});

if (process.env.NODE_ENV) document.documentElement.setAttribute('data-env', process.env.NODE_ENV);

Expand Down

0 comments on commit 12e475e

Please sign in to comment.