Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a
@@ -49,7 +49,7 @@ Breaking it down, here’s how the grid system comes together:
Our grid system can adapt across all {Object.keys(SCSS_VARIABLES.breakpoint).length} breakpoints.
Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers.
-
## Auto-layout columns
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss
index 524ffb401d..cd9c6968b0 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.module.scss
@@ -1,48 +1,21 @@
@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 {
- // Variables to build the grid options table
- breakpoint-count: length(post.$grid-breakpoints);
+ // Variables used in the spec table (some variables used on the page are defined in the shared module)
grid-columns: post.$grid-columns;
@each $breakpoint, $value in post.$grid-breakpoints {
- $i: list.index(post.$grid-breakpoints, $breakpoint $value);
-
- breakpoint_#{$breakpoint}_name: map.get(shared.$breakpointNames, $breakpoint) or $breakpoint;
- breakpoint_#{$breakpoint}_dimensions: if(
- $i == 1,
- #{'<' + map.get(post.$grid-breakpoints, list.nth(map.keys(post.$grid-breakpoints), $i + 1))},
- #{'≥' + $value}
- );
- breakpoint_#{$breakpoint}_infix: if($i == 1, none, $breakpoint);
-
- container_#{$breakpoint}_max-width: map.get(post.$container-max-widths, $breakpoint) or none;
- container_#{$breakpoint}_padding: map.get(post.$grid-container-padding, $breakpoint);
- container_#{$breakpoint}_fluid_padding: map.get(
- post.$grid-container-fluid-padding,
- $breakpoint
- );
-
grid_#{$breakpoint}_gutter-width: map.get(post.$grid-gutter-x, $breakpoint);
}
// Variables to expose under sass variables section
variables_grid-columns: post.$grid-columns;
- variables_grid-gutter-width: post.$grid-gutter-width;
variables_grid-row-columns: post.$grid-row-columns;
@each $breakpoint, $value in post.$grid-breakpoints {
- variables_grid-breakpoints_#{$breakpoint}: $value;
- variables_grid-container-max-width_#{$breakpoint}: map.get(
- post.$container-max-widths,
- $breakpoint
- );
- variables_grid-container-padding_#{$breakpoint}: map.get(
- post.$grid-container-padding,
- $breakpoint
- );
+ variables_grid-gutter-x_#{$breakpoint}: map.get(post.$grid-gutter-x, $breakpoint);
}
}
diff --git a/packages/documentation/src/stories/foundation/layout/layout.docs.mdx b/packages/documentation/src/stories/foundation/layout/layout.docs.mdx
index 5344d33e57..d41e0e90e8 100644
--- a/packages/documentation/src/stories/foundation/layout/layout.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/layout.docs.mdx
@@ -8,9 +8,9 @@ import * as LayoutStories from './layout.stories';
TODO:
-
Breakpoints, Containers,
- Grid, Columns
-, Gutters
+
Breakpoints,
Containers,
+ Grid
+, Columns, Gutters
Document differences and link over to bootstrap for the rest
diff --git a/packages/documentation/src/stories/foundation/layout/layout.shared.scss b/packages/documentation/src/stories/foundation/layout/layout.shared.scss
deleted file mode 100644
index 7d29f39964..0000000000
--- a/packages/documentation/src/stories/foundation/layout/layout.shared.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$breakpointNames: (
- xs: Extra small,
- sm: Small,
- rg: Regular,
- md: Medium,
- lg: Large,
- xl: Extra large,
- xxl: Extra extra large,
-);
diff --git a/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx
new file mode 100644
index 0000000000..1225a1e01e
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx
@@ -0,0 +1,28 @@
+import { parse } from '../../../utils/sass-export';
+import { forEach } from '../../../utils/react';
+import scss from './shared.module.scss';
+
+export const SCSS_VARIABLES = parse(scss);
+
+export const SpecTable = (props: { children: string | JSX.Element | JSX.Element[] }) => (
+
+
+
+
+ |
+ {forEach(
+ SCSS_VARIABLES.breakpoint,
+ (data: { key: string; value: { dimensions: string } }) => (
+
+ {data.key}
+
+ {data.value.dimensions}
+ |
+ ),
+ )}
+
+
+ {props.children}
+
+
+);
diff --git a/packages/documentation/src/stories/foundation/layout/shared.module.scss b/packages/documentation/src/stories/foundation/layout/shared.module.scss
new file mode 100644
index 0000000000..2bb151d2fe
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/shared.module.scss
@@ -0,0 +1,29 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+
+$breakpointNames: (
+ xs: Extra small,
+ sm: Small,
+ rg: Regular,
+ md: Medium,
+ lg: Large,
+ xl: Extra large,
+ xxl: Extra extra large,
+);
+
+:export {
+ breakpoint-count: length(post.$grid-breakpoints);
+
+ @each $breakpoint, $value in post.$grid-breakpoints {
+ $i: list.index(post.$grid-breakpoints, $breakpoint $value);
+
+ breakpoint_#{$breakpoint}_name: map.get($breakpointNames, $breakpoint) or $breakpoint;
+ breakpoint_#{$breakpoint}_dimensions: if(
+ $i == 1,
+ #{'<' + map.get(post.$grid-breakpoints, list.nth(map.keys(post.$grid-breakpoints), $i + 1))},
+ #{'≥' + $value}
+ );
+ breakpoint_#{$breakpoint}_infix: if($i == 1, none, $breakpoint);
+ }
+}
diff --git a/packages/styles/src/variables/_grid.scss b/packages/styles/src/variables/_grid.scss
index f7ca5b9e27..3be0a4b33a 100644
--- a/packages/styles/src/variables/_grid.scss
+++ b/packages/styles/src/variables/_grid.scss
@@ -5,33 +5,11 @@
$grid-breakpoints-list: xs sm rg md lg xl xxl;
// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
xl: 1280px,
xxl: 1440px,
) !default;
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-
-/* Deprecated: $grid-gutter-width */
-$grid-gutter-width: 30px !default;
-
-/* Deprecated: "rg" breakpoint */
-$grid-gutter-x: (
- xs: 12px,
- sm: 16px,
- rg: 16px,
- md: 16px,
- lg: 16px,
- xl: 16px,
- xxl: 16px,
-) !default;
-
/* Deprecated: "rg" breakpoint */
$grid-container-padding: (
xs: 12px,
@@ -53,3 +31,20 @@ $grid-container-fluid-padding: (
xl: map.get($grid-container-padding, lg),
xxl: map.get($grid-container-padding, lg),
) !default;
+
+// Grid columns
+$grid-columns: 12 !default;
+
+/* Deprecated: $grid-gutter-width */
+$grid-gutter-width: 30px !default;
+
+/* Deprecated: "rg" breakpoint */
+$grid-gutter-x: (
+ xs: 12px,
+ sm: 16px,
+ rg: 16px,
+ md: 16px,
+ lg: 16px,
+ xl: 16px,
+ xxl: 16px,
+) !default;
From 895bd5bda069320f88c366843d1b1c8658141df3 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 14 Nov 2023 13:15:31 +0100
Subject: [PATCH 10/10] feat(documentation): fullwidth topic teaser docs
(#2246)
---
.../components/topic-teaser/topic-teaser.docs.mdx | 14 +++++++++++---
.../topic-teaser/topic-teaser.stories.ts | 1 +
.../topic-teaser/topic-teaser.styles.scss | 6 ++++++
3 files changed, 18 insertions(+), 3 deletions(-)
create mode 100644 packages/documentation/src/stories/components/topic-teaser/topic-teaser.styles.scss
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
index a8ab51994f..9ada585596 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,9 +1,12 @@
import { Canvas, Controls, Meta } from '@storybook/blocks';
import * as TopicTeaserStories from './topic-teaser.stories';
import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import './topic-teaser.styles.scss';
+
+
# Topic Teaser
@@ -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)');
+}