Skip to content

Commit

Permalink
feat(documentation,demo): Create a compatibility table (#2159)
Browse files Browse the repository at this point in the history
  • Loading branch information
imagoiq and gfellerph authored Nov 10, 2023
1 parent 89a1258 commit b624eb4
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 23 deletions.
73 changes: 70 additions & 3 deletions packages/demo/src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,81 @@ <h4 class="alert-heading">The Swiss Post Design System is now compatible with An
rel="noopener"
target="_blank"
>
Support chanel
Support channel
</a>
in Teams.
</p>
</div>
<section>
<h3>Compatibility</h3>

<section class="migration-options mb-huge">
<div class="row">
<p id="compatibility-desc">List of compatible version numbers with external dependencies.</p>

<div class="row gx-5 mt-4">
<div class="col-md-6 col-sm-12 table-responsive">
<h4>Styles</h4>
<table aria-describedby="compatibility-desc" class="table caption-top">
<caption>Package @swisspost/design-system-styles</caption>
<thead>
<tr>
<th scope="col">Version</th>
<th scope="col">Bootstrap</th>
<th scope="col">Angular</th>
<th scope="col">Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="col">5.x</th>
<td>5.0</td>
<td>14.x</td>
<td>13.x</td>
</tr>
<tr>
<th scope="col">6.2</th>
<td>5.2</td>
<td>15.x</td>
<td>14.x</td>
</tr>
<tr>
<th scope="col">6.4</th>
<td>5.3</td>
<td>16.x</td>
<td>15.x</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6 col-sm-12 table-responsive">
<h4>Common Web Frontend</h4>
<table aria-describedby="compatibility-desc" class="table caption-top">
<caption>Package @ch-post-common/common-web-frontend</caption>
<thead>
<tr>
<th scope="col">Version</th>
<th scope="col">Bootstrap</th>
<th scope="col">Angular</th>
<th scope="col">Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="col">4.x</th>
<td>4.6</td>
<td>12.x</td>
<td>9.x</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

<section>
<h3>Setup for migration instructions</h3>
<div class="row migration-options mb-huge">
<div class="col-md-6">
<fieldset>
<legend class="font-curve-small bold">What environment is your application for?</legend>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,40 @@ <h2 class="bold">Installation</h2>
<a href="https://angular.io/">Angular</a>
component and as such, only works with Angular projects.
</p>
<p id="version-support">The supported Angular versions are:</p>
<table aria-describedby="version-support" class="table table-sm w-auto mb-regular-r">
<thead>
<tr>
<th scope="col" class="pe-regular">Intranet Header</th>
<th scope="col">Angular</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4.x</th>
<td>15.x</td>
</tr>
<tr>
<th scope="row">5.x</th>
<td>16.x</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table caption-top mb-regular-r">
<caption>List of compatible version numbers with external dependencies.</caption>
<thead>
<tr>
<th scope="col">Intranet-header</th>
<th scope="col">Bootstrap</th>
<th scope="col">Angular</th>
<th scope="col">Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">3.x</th>
<td>4.x</td>
<td>14.x</td>
<td>13.x</td>
</tr>
<tr>
<th scope="row">4.x</th>
<td>5.2</td>
<td>15.x</td>
<td>14.x</td>
</tr>
<tr>
<th scope="row">5.x</th>
<td>5.2</td>
<td>16.x</td>
<td>15.x</td>
</tr>
</tbody>
</table>
</div>
<p>Install the latest version of the Intranet Header with:</p>
<code
class="block mb-regular-r bash"
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const preview: Preview = {
order: [
'Home',
'Getting Started',
['Styles', 'Components'],
['Styles', 'Components', 'Compatibility'],
'Foundations',
[
'Typography',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { Meta } from '@storybook/blocks';
import * as GettingStartedStories from './compatibility.stories';

<Meta of={GettingStartedStories} />

# Compatibility

<p id="compatibility-desc">List of compatible version numbers with external dependencies.</p>

## Intranet-header

<div className="table-responsive">
<table aria-describedby="compatibility-desc" className="table caption-top">
<caption>Package @swisspost/design-system-intranet-header</caption>
<thead>
<tr>
<th>Version</th>
<th>Bootstrap</th>
<th>Angular</th>
<th>Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">3.x</th>
<td>4.x</td>
<td>14.x</td>
<td>13.x</td>
</tr>
<tr>
<th scope="row">4.x</th>
<td>5.2</td>
<td>15.x</td>
<td>14.x</td>
</tr>
<tr>
<th scope="row">5.x</th>
<td>5.2</td>
<td>16.x</td>
<td>15.x</td>
</tr>
</tbody>
</table>
</div>

## Styles

<div className="table-responsive">
<table aria-describedby="compatibility-desc" className="table caption-top">
<caption>Package @swisspost/design-system-styles</caption>
<thead>
<tr>
<th scope="col">Version</th>
<th scope="col">Bootstrap</th>
<th scope="col">Angular</th>
<th scope="col">Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="col">5.x</th>
<td>5.0</td>
<td>14.x</td>
<td>13.x</td>
</tr>
<tr>
<th scope="col">6.2</th>
<td>5.2</td>
<td>15.x</td>
<td>14.x</td>
</tr>
<tr>
<th scope="col">6.4</th>
<td>5.3</td>
<td>16.x</td>
<td>15.x</td>
</tr>
</tbody>
</table>
</div>

## Common Web Frontend

<div className="table-responsive">
<table aria-describedby="compatibility-desc" className="table caption-top">
<caption>Package @.../common-web-frontend</caption>
<thead>
<tr>
<th scope="col">Version</th>
<th scope="col">Bootstrap</th>
<th scope="col">Angular</th>
<th scope="col">Ng-Bootstrap</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="col">4.x</th>
<td>4.6</td>
<td>12.x</td>
<td>9.x</td>
</tr>
</tbody>
</table>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Meta, StoryObj } from '@storybook/web-components';
import { BADGE } from '../../../../.storybook/constants';

const meta: Meta = {
title: 'Getting Started/Compatibility',
parameters: {
badges: [BADGE.NEEDS_REVISION],
},
};

export default meta;

type Story = StoryObj;

export const Default: Story = {};

0 comments on commit b624eb4

Please sign in to comment.