@@ -13,9 +16,14 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
If you use multiple topic teasers on one page, each topic teaser must have a different background.
-
-
+
+
+
+
+
-
+
+
+
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
index 127280968d..8b69ba1dc0 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -7,6 +7,7 @@ const meta: Meta = {
title: 'Components/Topic Teaser',
parameters: {
badges: [BADGE.NEEDS_REVISION],
+ layout: 'fullscreen',
},
args: {
title: 'Loremipsum',
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss
new file mode 100644
index 0000000000..aeeee57ac2
--- /dev/null
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss
@@ -0,0 +1,6 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.topic-teaser-full-width-storybook > div > div:first-child {
+ overflow: hidden;
+ @include post.responsive-size('huge', 'padding-bottom', 'calc($value + 2rem)');
+}
diff --git a/packages/documentation/src/stories/foundation/layout/Columns/columns.docs.mdx b/packages/documentation/src/stories/foundation/layout/Columns/columns.docs.mdx
new file mode 100644
index 0000000000..d5d154b512
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/Columns/columns.docs.mdx
@@ -0,0 +1,87 @@
+import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import * as ColumnStories from './columns.stories';
+import './columns.styles.scss';
+
+
+
+# Columns
+
+{/* prettier-ignore */}
+
+- Columns build on the grid’s flexbox architecture which is based on [Bootstrap](https://getbootstrap.com/docs/4.0/layout/grid/). Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.
+- When building grid layouts, all content goes in columns. The hierarchy of our grid goes from container to row to column to your content.
+
+
+### Alignment
+
+Use flexbox alignment utilities to vertically and horizontally align columns.
+
+#### Vertical alignment
+
+Change the vertical alignment with any of the responsive
align-items-\* classes.
+
+Or, change the alignment of each column individually with any of the responsive
align-self-\* classes.
+
+
+
+
+
+
+#### Horizontal alignment
+
+Change the horizontal alignment with any of the responsive
justify-content-\* classes.
+
+
+
+
+
+
+#### Column wrapping
+
+If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
+
+
+
+
+
+
+#### Column breaks
+
+Breaking columns to a new line in flexbox requires a small hack: add an element with
width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple
.rows, but not every implementation method can account for this.
+
+
+
+
+
+
+### Reorderning
+
+#### Order classes
+
+Use
.order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g.
.order-1.order-md-2). Includes support for 1 through 5 across all seven grid tiers. If you need more
.order-\* classes.
+
+
+
+
+
+
+There are also responsive
.order-first and
.order-last classes that change the order of an element by applying
order: -1 and
order: 6, respectively. These classes can also be intermixed with the numbered
.order-\* classes as needed.
+
+
+
+### Offsetting columns
+
+You can offset grid columns in two ways: our responsive
.offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
+
+#### Offset classes
+
+Move columns to the right using
.offset-\* classes. These classes increase the left margin of a column by \* columns. For example,
.offset-4 moves
.col-1 over four columns. You can also apply the offset above a certain breakpoint with the breakpoint infixes e.g.
offset-md-4.
+
+
+
+
+
+
+In addition to column clearing at responsive breakpoints, you may need to reset offsets.
+
+
diff --git a/packages/documentation/src/stories/foundation/layout/Columns/columns.stories.ts b/packages/documentation/src/stories/foundation/layout/Columns/columns.stories.ts
new file mode 100644
index 0000000000..47c79c8c94
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/Columns/columns.stories.ts
@@ -0,0 +1,284 @@
+import type { Args, Meta, StoryFn, StoryObj, StoryContext } from '@storybook/web-components';
+import { BADGE } from '../../../../../.storybook/constants';
+import { html, nothing } from 'lit';
+
+const meta: Meta = {
+ title: 'Foundations/Layout/Columns',
+ parameters: {
+ badges: [BADGE.NEEDS_REVISION],
+ },
+ decorators: [
+ (story: StoryFn, { args, context }: StoryContext) => html`
+
${story(args, context)}
+ `,
+ ],
+ args: {
+ alignItems: 'align-items-start',
+ alignSelf: 'no self alignment',
+ justifyContent: 'justify-content-start',
+ offsetItem: 'offset-1',
+ renderBreakingElement: true,
+ ColumnOneOrder: 'no order',
+ ColumnTwoOrder: 'order-5',
+ ColumnThreeOrder: 'order-1',
+ ColumnWidth: 'col-4',
+ },
+ argTypes: {
+ alignItems: {
+ name: 'Align Items',
+ description: 'Aligns the whole row vertically.',
+ control: {
+ type: 'select',
+ },
+ options: ['align-items-start', 'align-items-center', 'align-items-end'],
+ },
+ alignSelf: {
+ name: 'Align Item 1',
+ description: 'Aligns the Item 1 vertically.',
+ control: {
+ type: 'select',
+ },
+ options: ['no self alignment', 'align-self-start', 'align-self-center', 'align-self-end'],
+ },
+ justifyContent: {
+ name: 'Horizontal Alignement',
+ description: 'Aligns the Items horizontally.',
+ control: {
+ type: 'select',
+ },
+ options: [
+ 'justify-content-start',
+ 'justify-content-center',
+ 'justify-content-end',
+ 'justify-content-around',
+ 'justify-content-between',
+ 'justify-content-evenly',
+ ],
+ },
+ offsetItem: {
+ name: 'Offset classes',
+ description: 'Increases the left margin of a column',
+ control: {
+ type: 'select',
+ },
+ options: [
+ 'offset-1',
+ 'offset-2',
+ 'offset-3',
+ 'offset-4',
+ 'offset-5',
+ 'offset-6',
+ 'offset-7',
+ 'offset-8',
+ 'offset-9',
+ 'offset-10',
+ 'offset-11',
+ ],
+ },
+ renderBreakingElement: {
+ name: 'Render breaking element',
+ description: 'Toggle rendering of breaking element',
+ control: {
+ type: 'boolean',
+ },
+ },
+ ColumnOneOrder: {
+ name: 'Order first column',
+ description: 'Set order-class for first element',
+ control: {
+ type: 'select',
+ },
+ options: ['no order class', 'order-0', 'order-1', 'order-2', 'order-3', 'order-4', 'order-5'],
+ },
+ ColumnTwoOrder: {
+ name: 'Order second column',
+ description: 'Set order-class for second element',
+ control: {
+ type: 'select',
+ },
+ options: ['no order class', 'order-0', 'order-1', 'order-2', 'order-3', 'order-4', 'order-5'],
+ },
+ ColumnThreeOrder: {
+ name: 'Order third column',
+ description: 'Set order-class for third element',
+ control: {
+ type: 'select',
+ },
+ options: ['no order class', 'order-0', 'order-1', 'order-2', 'order-3', 'order-4', 'order-5'],
+ },
+ ColumnWidth: {
+ name: 'Width of second Column',
+ description: 'Set width for second column to see line breaking',
+ control: {
+ type: 'select',
+ },
+ options: [
+ 'col-1',
+ 'col-2',
+ 'col-3',
+ 'col-4',
+ 'col-5',
+ 'col-6',
+ 'col-7',
+ 'col-8',
+ 'col-9',
+ 'col-10',
+ 'col-11',
+ 'col-12',
+ ],
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const VerticalExample: Story = {
+ parameters: {
+ controls: {
+ include: ['Align Items', 'Align Item 1'],
+ },
+ },
+ render: (args: Args) => html`
+
+
+
+ Item 1
+
+
Item 2
+
Item 3
+
+
+ `,
+};
+
+export const HorizontalExample: Story = {
+ parameters: {
+ controls: {
+ include: ['Horizontal Alignement'],
+ },
+ },
+ render: (args: Args) => html`
+
+ `,
+};
+
+export const OrderExample: Story = {
+ parameters: {
+ controls: {
+ include: ['Order first column', 'Order second column', 'Order third column'],
+ },
+ },
+ render: (args: Args) => html`
+
+
+
+ First in DOM
+
+
+ Second in DOM
+
+
+ Third in DOM
+
+
+
+ `,
+};
+
+export const OrderMaxExample: Story = {
+ render: () => html`
+
+
+
First in DOM, ordered last
+
Second in DOM, unordered
+
Third in DOM, ordered first
+
+
+ `,
+};
+
+export const OffsetExample: Story = {
+ parameters: {
+ controls: {
+ include: ['Offset classes'],
+ },
+ },
+ render: (args: Args) => html`
+
+ `,
+};
+
+export const ColumnBreakExample: Story = {
+ parameters: {
+ controls: {
+ include: ['Render breaking element'],
+ },
+ },
+ render: (args: Args) => html`
+
+
.col-3
+
.col-3
+ ${args.renderBreakingElement
+ ? html`
+
+
+ `
+ : nothing}
+
.col-3
+
.col-3
+
+ `,
+};
+
+export const ResetOffsetExample: Story = {
+ decorators: [
+ (story: StoryFn, { args, context }: StoryContext) => html`
+ ${story(args, context)}
+
Resize the browser window to see changes.
+ `,
+ ],
+ render: () => html`
+
+
.col-sm-5 .col-md-6
+
+ .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
+
+ `,
+};
+
+export const ColumnWrapping: Story = {
+ parameters: {
+ controls: {
+ include: ['Width of second Column'],
+ },
+ },
+ render: (args: Args) => html`
+
+
.col-9
+
${args.ColumnWidth}
+
+ .col-6
+
+ Subsequent columns continue along the new line.
+
+
+ `,
+};
diff --git a/packages/documentation/src/stories/foundation/layout/Columns/columns.styles.scss b/packages/documentation/src/stories/foundation/layout/Columns/columns.styles.scss
new file mode 100644
index 0000000000..6946909b68
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/Columns/columns.styles.scss
@@ -0,0 +1,25 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.column-example {
+ font-size: post.$font-size-sm;
+
+ .row > *:not(.w-100) {
+ padding-block: 0.75rem;
+ background-color: lighten(post.$nightblue-bright, 55%);
+ border: 1px solid lighten(post.$nightblue-dark, 45%);
+ }
+
+ .row {
+ background-color: lighten(post.$nightblue-bright, 61.5%);
+ }
+
+ .row-height {
+ min-height: 10rem;
+ }
+
+ .standalone-columns > *:not(p){
+ padding-block: 0.75rem;
+ background-color: lighten(post.$nightblue-bright, 55%);
+ border: 1px solid lighten(post.$nightblue-dark, 45%);
+ }
+}
\ No newline at end of file
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss
deleted file mode 100644
index 98df3dfd65..0000000000
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-available.sample.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-@each $key, $value in post.$grid-breakpoints {
- ...
-}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss
index 19b499f360..f1d8a8c71a 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-between.sample.scss
@@ -1,3 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
@include post.media-breakpoint-between(sm, lg) {
.custom-class {
display: block;
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss
index febe98b129..5db268f38a 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-max-width.sample.scss
@@ -1,3 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
@include post.media-breakpoint-down(lg) {
.custom-class {
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss
index 1f7ab6b26c..20603a62c9 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-min-width.sample.scss
@@ -1,3 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
.custom-class {
display: none;
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss
index 149edc020c..6cce81517c 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints-single.sample.scss
@@ -1,3 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
@include post.media-breakpoint-only(xs) {
.custom-class {
display: block;
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
index 171d3426bb..1b7135f6b0 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -1,33 +1,36 @@
import { forEach } from '../../../../utils/react';
import { parse } from '../../../../utils/sass-export';
+import { SpecTable } from '../shared.blocks';
import scss from './breakpoints.module.scss';
export const SCSS_VARIABLES = parse(scss);
export const BreakpointTable = () => (
-
-
-
-
- |
- Class infix |
- Dimensions |
-
-
-
- {forEach(
- SCSS_VARIABLES.breakpoint,
- (data: { key: number; value: { name: string; infix: any; dimensions: string } }) => {
- return (
-
- | {data.value.name} |
- |
- {data.value.dimensions} |
-
- );
- },
- )}
-
-
-
+
+
+ | Name |
+ {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { name: string } }) => (
+
+ {data.value.name}
+ |
+ ))}
+
+
+
+ | Code name |
+ {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string }) => (
+
+ {data.key}
+ |
+ ))}
+
+
+ | Class infix |
+ {forEach(SCSS_VARIABLES.breakpoint, (data: { key: string; value: { infix: string } }) => (
+
+ {data.value.infix === 'none' ? 'none' : -{data.value.infix}-}
+ |
+ ))}
+
+
);
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
index 01c0ff390f..bd479ccdda 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
@@ -1,7 +1,7 @@
import { Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '../../../../utils/sass-export';
import { BreakpointTable, SCSS_VARIABLES } from './breakpoints.blocks';
import * as BreakpointStories from './breakpoints.stories';
-import SampleAvailable from './breakpoints-available.sample.scss?raw';
import SampleMinWidth from './breakpoints-min-width.sample.scss?raw';
import SampleMaxWidth from './breakpoints-max-width.sample.scss?raw';
import SampleSingle from './breakpoints-single.sample.scss?raw';
@@ -24,18 +24,25 @@ breakpoints, sometimes referred to as grid tiers, for building responsively. The
-You’ll find these breakpoints in a Sass map in our styles core.
+## CSS
+
+When using our source Sass files, you have the option of using Sass variables to change the breakpoints (not recommended).
+
+### Sass variables
+ dark
+ code={Object.entries(SCSS_VARIABLES.variables)
+ .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
+ .join('\n')}
+>
-## Mixins
+### Sass mixins
There are several mixins available to use in your own Sass to help with building responsive layouts.
-### Min-width
+#### Min-width
We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
@@ -44,7 +51,7 @@ We primarily use the following media query ranges—or breakpoints—in our sour
language="scss"
/>
-### Max-width
+#### Max-width
We occasionally use media queries that go in the other direction.
@@ -53,7 +60,7 @@ We occasionally use media queries that go in the other direction.
language="scss"
/>
-### Single breakpoint
+#### Single breakpoint
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
@@ -62,7 +69,7 @@ There are also media queries and mixins for targeting a single segment of screen
language="scss"
/>
-### Between breakpoints
+#### Between breakpoints
Similarly, media queries may span multiple breakpoint widths.
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
index 27545bd139..4eca9d885c 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
@@ -1,24 +1,11 @@
-@use 'sass:list';
-@use 'sass:map';
@use '@swisspost/design-system-styles/core' as post;
-@use '../layout.shared' as shared;
+@use '../shared.module' as shared;
:export {
- @each $breakpoint, $value in post.$grid-breakpoints {
- $i: list.index(post.$grid-breakpoints, $breakpoint $value);
- $name: map.get(shared.$breakpointNames, $breakpoint) or $breakpoint;
-
- breakpoint_#{$breakpoint}_name: $name;
+ // Variables used in the spec table (some variables used on the page are defined in the shared module)
- @if $i == 1 {
- $keys: map.keys(post.$grid-breakpoints);
- $nextValue: map.get(post.$grid-breakpoints, list.nth($keys, $i + 1));
-
- breakpoint_#{$breakpoint}_infix: none;
- breakpoint_#{$breakpoint}_dimensions: #{'<' + $nextValue};
- } @else {
- breakpoint_#{$breakpoint}_infix: #{'
' + $breakpoint + ''};
- breakpoint_#{$breakpoint}_dimensions: #{'≥' + $value};
- }
+ // Variables to expose under sass variables section
+ @each $breakpoint, $value in post.$grid-breakpoints {
+ variables_grid-breakpoints_#{$breakpoint}: $value;
}
}
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx b/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx
new file mode 100644
index 0000000000..111bbe27c3
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.blocks.tsx
@@ -0,0 +1,42 @@
+import { parse } from '../../../../utils/sass-export';
+import { forEach } from '../../../../utils/react';
+import { SpecTable } from '../shared.blocks';
+import scss from './containers.module.scss';
+
+export const SCSS_VARIABLES = parse(scss);
+
+export const ContainersTable = () => (
+
+
+
+ Container max-width
+ |
+ {forEach(
+ SCSS_VARIABLES.container,
+ (data: { key: string; value: { ['max-width']: string } }) => (
+ {data.value['max-width']} |
+ ),
+ )}
+
+
+
+ Container padding
+ |
+ {forEach(SCSS_VARIABLES.container, (data: { key: string; value: { padding: string } }) => (
+ {data.value.padding} |
+ ))}
+
+
+
+
+ Container-Fluid padding
+ |
+ {forEach(
+ SCSS_VARIABLES.container,
+ (data: { key: string; value: { fluid: { padding: string } } }) => (
+ {data.value.fluid.padding} |
+ ),
+ )}
+
+
+);
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx
new file mode 100644
index 0000000000..1efc2ac81a
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.docs.mdx
@@ -0,0 +1,47 @@
+import { Meta, Source } from '@storybook/blocks';
+import { formatAsMap } from '../../../../utils/sass-export';
+import { ContainersTable, SCSS_VARIABLES } from './containers.blocks';
+import * as ContainerStories from './containers.stories';
+
+
+
+# Containers
+
+
Containers are a fundamental building block of our Design-System that contain, pad, and align your content within a given device or viewport. They are required, when using our grid-system. While containers can be nested, most layouts do not require a nested container.
+
+We can distinguish between two different container types:
+
+-
.container, which defines a
max-width on some breakpoints.
+-
.container-fluid, which is
width: 100% at all breakpoints.
+
+
+
+## Default container
+
+Our default `.container` class is a responsive, fixed-width container.
+
+
+
+`} language="scss"/>
+
+## Fluid containers
+
+Use `.container-fluid` for a full width container, spanning the entire width of the viewport on every breakpoint.
+
+