Skip to content

Commit

Permalink
chore(documentation): align all tables in the documentation (#1952)
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliverschuerch
oliverschuerch authored Sep 20, 2023
1 parent 097bed9 commit 380ec09
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 144 deletions.
48 changes: 25 additions & 23 deletions packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@ import scss from './breakpoints.module.scss';
export const SCSS_VARIABLES = parse(scss);

export const BreakpointTable = () => (
<table className="table table-sm table-striped table-bordered">
<thead>
<tr>
<th>Breakpoint</th>
<th>Class infix</th>
<th>Dimensions</th>
</tr>
</thead>
<tbody>
{forEach(
SCSS_VARIABLES.breakpoint,
(data: { key: number; value: { name: string; infix: any; dimensions: string } }) => {
return (
<tr>
<td>{data.value.name}</td>
<td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
<td>{data.value.dimensions}</td>
</tr>
);
},
)}
</tbody>
</table>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th></th>
<th>Class infix</th>
<th>Dimensions</th>
</tr>
</thead>
<tbody>
{forEach(
SCSS_VARIABLES.breakpoint,
(data: { key: number; value: { name: string; infix: any; dimensions: string } }) => {
return (
<tr>
<th>{data.value.name}</th>
<td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
<td>{data.value.dimensions}</td>
</tr>
);
},
)}
</tbody>
</table>
</div>
);
34 changes: 19 additions & 15 deletions packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export function FontFace(props: { face: string; family: string; weight: string;
export function FontSizesAndLineheights() {
return (
<div className="sb-fontsizes table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Name</th>
Expand Down Expand Up @@ -90,7 +90,7 @@ export function FontSizesAndLineheights() {
export function FontCurves() {
return (
<div className="sb-fontcurves table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -121,7 +121,7 @@ export function FontCurves() {
export function Headings() {
return (
<div className="sb-headings table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
Expand Down Expand Up @@ -186,7 +186,7 @@ export function Headings() {
export function Paragraphs() {
return (
<div className="sb-paragraphs table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
Expand Down Expand Up @@ -230,7 +230,7 @@ export function Paragraphs() {
export function Links() {
return (
<div className="sb-links table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
Expand Down Expand Up @@ -280,7 +280,7 @@ export function Links() {
export function Inlines() {
return (
<div className="sb-inlines table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
Expand Down Expand Up @@ -398,7 +398,7 @@ export function Inlines() {
export function Lists() {
return (
<div className="sb-inlines table-responsive">
<table className="table table-striped table-bordered">
<table className="table">
<thead>
<tr>
<th className="w-25">Tag</th>
Expand Down Expand Up @@ -498,14 +498,18 @@ export function Lists() {
</code>
</td>
<td>
<dl className="row">
<dt className="col-3">Title</dt>
<dd className="col-9">Nullam quis risus eget urna mollis.</dd>
<dt className="col-3">Second Title</dt>
<dd className="col-9">At vero eos et justo accusam et duo dolores et ea rebum.</dd>
<dt className="col-3">Third Title</dt>
<dd className="col-9">Invidunt ut labore et dolore magna aliquyam erat.</dd>
</dl>
<div className="overflow-hidden">
<dl className="row">
<dt className="col-3">Title</dt>
<dd className="col-9">Nullam quis risus eget urna mollis.</dd>
<dt className="col-3">Second Title</dt>
<dd className="col-9">
At vero eos et justo accusam et duo dolores et ea rebum.
</dd>
<dt className="col-3">Third Title</dt>
<dd className="col-9">Invidunt ut labore et dolore magna aliquyam erat.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
Expand Down
83 changes: 44 additions & 39 deletions packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,21 @@ import SampleVariable from './styles-variable.sample.scss?raw';
The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components.

<ul>
<li><a href="#installation" target="_self">Installation</a></li>
<li><a href="#usage" target="_self">Usage</a></li>
<li>
<a href="#installation" target="_self">
Installation
</a>
</li>
<li>
<a href="#usage" target="_self">
Usage
</a>
</li>
</ul>

## Installation

<Source
code={`npm install @swisspost/design-system-styles`}
language="bash"
/>
<Source code={`npm install @swisspost/design-system-styles`} language="bash" />

## Usage

Expand All @@ -33,42 +38,42 @@ Import one of our stylesheets into your project (for example into your `/src/sty

### Available bundles

<table className="table table-sm table-bordered table-striped ">
<thead>
<tr>
<td>Bundle name</td>
<td>Bundle extensions</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>`index`</td>
<td>`css`, `scss`</td>
<td>everything for internet facing applications</td>
</tr>
<tr>
<td>`intranet`</td>
<td>`css`, `scss`</td>
<td>everything for internal applications</td>
</tr>
<tr>
<td>`basics`</td>
<td>`css`, `scss`</td>
<td>atomic styles for font, buttons, lists, etc. (no component styles)</td>
</tr>
</tbody>
</table>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>&lt;bundle-name&gt;</th>
<th>&lt;extension&gt;</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>`index`</td>
<td>`css`, `scss`</td>
<td>everything for internet facing applications</td>
</tr>
<tr>
<td>`intranet`</td>
<td>`css`, `scss`</td>
<td>everything for internal applications</td>
</tr>
<tr>
<td>`basics`</td>
<td>`css`, `scss`</td>
<td>atomic styles for font, buttons, lists, etc. (no component styles)</td>
</tr>
</tbody>
</table>
</div>

### Variables, mixins, functions and placeholders

Use the SCSS core for your custom styles and make sure you're always using the most up to date definitions:

<p className="alert alert-info alert-md">NOTE: The core file itself, does not produce any CSS output. It only contains
variables, functions and mixins.</p>

<Source
code={SampleVariable}
language="scss"
/>
<p className="alert alert-info alert-md">
NOTE: The core file itself, does not produce any CSS output. It only contains variables, functions
and mixins.
</p>

<Source code={SampleVariable} language="scss" />
103 changes: 51 additions & 52 deletions packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,64 +11,72 @@ import SamplePostweb from './intranet-header-postweb.sample.html?raw';

[![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)

{/* prettier-ignore */}
<div className="alert alert-info alert-md">
The intranet header is an <a href="//Angular.io" target="_blank">Angular</a> component, as such it only works within
Angular projects.
<h2 className="alert-heading">Angular only component</h2>
<p>The intranet header is an <a href="//Angular.io" target="_blank">Angular</a> component, as such it only works within Angular projects.</p>
</div>

The Header Angular component for internal usage.

<ul>
<li><a href="#installation" target="_self">Installation</a></li>
<li><a href="#usage" target="_self">Usage</a></li>
<li><a href="#examples" target="_self">Examples</a></li>
<li>
<a href="#installation" target="_self">
Installation
</a>
</li>
<li>
<a href="#usage" target="_self">
Usage
</a>
</li>
<li>
<a href="#examples" target="_self">
Examples
</a>
</li>
</ul>

## Installation

<Source
code={`npm install @swisspost/design-system-intranet-header`}
language="bash"
/>
<Source code={`npm install @swisspost/design-system-intranet-header`} language="bash" />

## Usage

1. In `app.module.ts`, import `SwissPostIntranetHeaderModule` and add it to the `imports` array property.

<Source
code={SampleUse}
language="typescript"
/>

<Source code={SampleUse} language="typescript" />

2. In `app.component.html`, create a `section` container and assign it the CSS classes that best suit your desired layout:

<table className="table table-sm table-bordered table-striped">
<thead>
<tr>
<th>Class</th>
<th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>`layout-container`</td>
<td>Always</td>
</tr>
<tr>
<td>`header-big`</td>
<td>To use the header with a navigation bar</td>
</tr>
<tr>
<td>`header-small`</td>
<td>To use the header without a navigation bar</td>
</tr>
<tr>
<td>`with-searchbar`</td>
<td>To use the header with a search bar</td>
</tr>
</tbody>
</table>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>Class</th>
<th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>`layout-container`</td>
<td>Always</td>
</tr>
<tr>
<td>`header-big`</td>
<td>To use the header with a navigation bar</td>
</tr>
<tr>
<td>`header-small`</td>
<td>To use the header without a navigation bar</td>
</tr>
<tr>
<td>`with-searchbar`</td>
<td>To use the header with a search bar</td>
</tr>
</tbody>
</table>
</div>

3. In the layout container, add the `post-intranet-header` component and configure it as needed using the properties described below.

Expand All @@ -82,21 +90,12 @@ The Header Angular component for internal usage.

### Header with a navigation bar

<Source
code={SampleNavigationBar}
language="html"
/>
<Source code={SampleNavigationBar} language="html" />

### Header with a side navigation

<Source
code={SampleSideNavigation}
language="html"
/>
<Source code={SampleSideNavigation} language="html" />

### "Postweb" intranet header

<Source
code={SamplePostweb}
language="html"
/>
<Source code={SamplePostweb} language="html" />
Loading

0 comments on commit 380ec09

Please sign in to comment.