From c4ce372dc6244db4f186782558b1b79069814323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Mon, 7 Oct 2024 18:33:49 +0200
Subject: [PATCH] improve grid and column docs

---
 .../stories/foundation/layout/breakpoints.module.scss    | 9 ---------
 .../src/stories/foundation/layout/column.styles.scss     | 8 --------
 .../stories/foundation/layout/columns/columns.docs.mdx   | 2 +-
 .../foundation/layout/columns/columns.styles.scss        | 6 +++---
 .../src/stories/foundation/layout/grid/grid.docs.mdx     | 5 ++---
 .../src/stories/foundation/layout/grid/grid.stories.ts   | 7 ++++---
 .../src/stories/foundation/layout/grid/grid.styles.scss  | 2 +-
 .../src/stories/foundation/layout/shared.styles.scss     | 8 ++++++++
 8 files changed, 19 insertions(+), 28 deletions(-)
 delete mode 100644 packages/documentation/src/stories/foundation/layout/breakpoints.module.scss
 delete mode 100644 packages/documentation/src/stories/foundation/layout/column.styles.scss
 create mode 100644 packages/documentation/src/stories/foundation/layout/shared.styles.scss

diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints.module.scss b/packages/documentation/src/stories/foundation/layout/breakpoints.module.scss
deleted file mode 100644
index 42c53f6379..0000000000
--- a/packages/documentation/src/stories/foundation/layout/breakpoints.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-@use 'shared.module' as shared;
-
-:export {
-  // 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/column.styles.scss b/packages/documentation/src/stories/foundation/layout/column.styles.scss
deleted file mode 100644
index 62427234b7..0000000000
--- a/packages/documentation/src/stories/foundation/layout/column.styles.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-@mixin column-styles {
-  background: linear-gradient(lighten(post.$nightblue-bright, 55%), lighten(post.$nightblue-bright, 55%)), linear-gradient(lighten(post.$nightblue-bright, 60%), lighten(post.$nightblue-bright, 60%));
-  background-clip: content-box, border-box;
-  border: 1px solid lighten(post.$nightblue-dark, 55%);
-  line-height: 3;
-}
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.docs.mdx b/packages/documentation/src/stories/foundation/layout/columns/columns.docs.mdx
index d5d154b512..8b69787347 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Controls } from '@storybook/blocks';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as ColumnStories from './columns.stories';
 import './columns.styles.scss';
 
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss b/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss
index e1cfba0206..db3b56abd9 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss
@@ -1,5 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
-@use '../column.styles' as *;
+@use '../shared.styles' as *;
 
 .column-example {
   font-size: post.$font-size-sm;
@@ -9,14 +9,14 @@
   }
 
   .row {
-    background-color: lighten(post.$nightblue-bright, 63%);
+    background-color: lighten(post.$petrol-dark, 75%);
   }
 
   .row-height .row {
     min-height: 10rem;
   }
 
-  .standalone-columns > *:not(p){
+  .standalone-columns > *:not(p) {
     @include column-styles;
   }
 }
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
index 43872d5e81..3ac9b81297 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
@@ -1,11 +1,10 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
 import { parse } from '@/utils/sass-export';
-import scss from '../breakpoints.module.scss';
+import scss from '../shared.module.scss';
 import SampleContainer from './grid-container.sample.html?raw';
 import * as GridStories from './grid.stories';
-import './grid.styles.scss';
 
-export const BREAKPOINT_COUNT = Object.keys(parse(scss).breakpoint).length;
+export const BREAKPOINT_COUNT = parse(scss)['breakpoint-count'];
 
 <Meta of={GridStories} />
 
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index 46ebbc5a03..8d9e7dcd47 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,6 +1,7 @@
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
+import './grid.styles.scss';
 
 const meta: MetaExtended = {
   id: '7240f2ef-216a-490e-9bd8-c0cef19f7b31',
@@ -9,9 +10,9 @@ const meta: MetaExtended = {
     badges: [],
   },
   decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="grid-example text-center ${args?.additionalDecoratorsClasses}">
-        ${story(args, context)}
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="grid-example text-center ${context.args?.additionalDecoratorsClasses}">
+        ${story(context.args, context)}
       </div>
     `,
   ],
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
index 8f9e81d29d..a002eee884 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
@@ -1,5 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
-@use '../column.styles' as *;
+@use '../shared.styles' as *;
 
 .grid-example {
   font-size: post.$font-size-sm;
diff --git a/packages/documentation/src/stories/foundation/layout/shared.styles.scss b/packages/documentation/src/stories/foundation/layout/shared.styles.scss
new file mode 100644
index 0000000000..ff5483ad74
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/shared.styles.scss
@@ -0,0 +1,8 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+@mixin column-styles {
+  background: linear-gradient(lighten(post.$nightblue-bright, 60%), lighten(post.$nightblue-bright, 60%)), linear-gradient(lighten(post.$nightblue-bright, 65%), lighten(post.$nightblue-bright, 65%));
+  background-clip: content-box, border-box;
+  border: 1px solid lighten(post.$nightblue-dark, 60%);
+  line-height: 3;
+}