feat(docs): update layout documentation (#4048)

swisspost · Dec 2, 2024 · 5a564da · 5a564da
1 parent 1954224
commit 5a564da
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 267 deletions.
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -38,11 +38,15 @@ const preview: Preview = {
 
           // Category - Foundations
           'Foundations',
-          ['Logo', 'Icons', 'Palettes', 'Typography', ['Overview']],
-
-          // Category - Layout
-          'Layout',
-          ['Breakpoints', 'Containers', 'Grid', 'Columns'],
+          [
+            'Logo',
+            'Icons',
+            'Palettes',
+            'Typography',
+            ['Overview'],
+            'Layout',
+            ['Breakpoints', 'Containers', 'Grid', 'Columns'],
+          ],
 
           // Category - Raw Components (INTERNAL ONLY)
           'Raw Components',

diff --git a/...s/documentation/src/stories/foundations/layout/breakpoints/breakpoints.docs.mdx b/...s/documentation/src/stories/foundations/layout/breakpoints/breakpoints.docs.mdx
@@ -18,21 +18,10 @@ import SampleBetween from './breakpoints-between.sample.scss?raw';
 
 ## Available breakpoints
 
-The Swiss Post Design System includes
-
-<span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>
+The Swiss Post Design System includes <span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>
 breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be
 customized if you’re using our source Sass files.
 
-<div className="banner banner-md banner-warning">
-  <h2 className="banner-heading">
-    The <code>regular</code> Breakpoint is deprecated
-  </h2>
-  <p>
-    Its CSS helper classes, as well as its SASS variables and mixins will be removed in the future.
-  </p>
-</div>
-
 <BreakpointTable />
 
 ## CSS

diff --git a/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
@@ -141,9 +141,14 @@ export const VerticalExample: Story = {
       include: ['Align Items', 'Align Item 1'],
     },
   },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="high-row">${story(context.args, context)}</div>
+    `,
+  ],
   render: (args: Args) => html`
     <div class="container">
-      <div class="row-height row ${args.alignItems}">
+      <div class="row ${args.alignItems}">
         <div class="col${args.alignSelf === 'no self alignment' ? '' : ` ${args.alignSelf}`}">
           Item 1
         </div>

diff --git a/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss b/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss
@@ -13,11 +13,7 @@
     background-color: lighten(#0076a8, 61.5%);
   }
 
-  .row-height {
+  .high-row .row {
     min-height: 10rem;
   }
-
-  .standalone-columns > *:not(p){
-    padding-block: 0.75rem;
-  }
 }
diff --git a/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx
@@ -1,10 +1,11 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { GridTable, SCSS_VARIABLES } from './grid.blocks';
+import { parse } from '@/utils/sass-export';
+import scss from './grid.module.scss';
 import * as GridStories from './grid.stories';
 import './grid.styles.scss';
 import SampleContainer from './grid-container.sample.html?raw';
-import SampleScssMixins from './grid-scss-mixins.sample.scss?raw';
+
+export const SCSS_VARIABLES = parse(scss);
 
 <Meta of={GridStories} />
 
@@ -47,13 +48,6 @@ Breaking it down, here’s how the grid system comes together:
 - **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
-## Grid options
-
-Our grid system can adapt across all <span>{SCSS_VARIABLES['breakpoint-count']}</span> breakpoints.
-Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers.
-
-<GridTable />
-
 ## Auto-layout columns
 
 Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
@@ -119,25 +113,3 @@ To nest your content with the default grid, add a new `.row` and set of `.col-*`
 Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
 
 <Canvas of={GridStories.Nested} />
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
-
-### Sass variables
-
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
-
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SCSS_VARIABLES.variables)
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
-
-### Sass mixins
-
-Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
-
-<Source language="scss" dark code={SampleScssMixins}></Source>