feat(documentation): add SCSS syntax highlighting

packages/documentation-v7/.storybook/preview.ts

@@ -1,19 +1,24 @@
 import type { Preview } from '@storybook/web-components';
 
-import DocsLayout from './blocks/layout';
-import { format } from 'prettier';
-import { badgesConfig, prettierOptions, resetComponents } from './helpers';
-import './helpers/register-web-components';
 import {
   extractArgTypesFactory,
   extractComponentDescription,
   setStencilDocJson,
 } from '@pxtrn/storybook-addon-docs-stencil';
 import { StencilJsonDocs } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import { format } from 'prettier';
+import DocsLayout from './blocks/layout';
+import { badgesConfig, prettierOptions, resetComponents } from './helpers';
+import './helpers/register-web-components';
 
 import './styles/preview.scss';
 import themes from './styles/themes';
 
+import { SyntaxHighlighter } from '@storybook/components';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+SyntaxHighlighter.registerLanguage('scss', scss);
+
 import docJson from '@swisspost/design-system-components/dist/docs.json';
 
 if (docJson) setStencilDocJson(docJson as StencilJsonDocs);

packages/documentation-v7/package.json

@@ -37,17 +37,20 @@
     "@storybook/addon-essentials": "7.1.1",
     "@storybook/addon-links": "7.1.1",
     "@storybook/blocks": "7.1.1",
+    "@storybook/components": "^7.1.1",
     "@storybook/manager-api": "^7.0.26",
     "@storybook/testing-library": "0.2.0",
     "@storybook/theming": "6.5.16",
     "@storybook/web-components": "7.1.1",
     "@storybook/web-components-vite": "7.1.1",
     "@types/mdx": "2.0.5",
     "@types/react": "18.2.17",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "lit": "2.7.6",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "5.0.1",
     "sass": "1.64.1",
     "storybook": "7.1.1",

packages/documentation-v7/src/stories/foundation/color/color.docs.mdx

@@ -5,10 +5,7 @@ import { forEach } from '../../../utils/react';
 import { ColorSwatch, SCSS_VARIABLES } from './color.blocks';
 import './color.styles.scss';
 
-<Meta
-  title="Foundations/Color"
-  parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }}
-/>
+<Meta title="Foundations/Color" parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }} />
 
 # Color
 
@@ -18,7 +15,8 @@ They theme our elements and components.
 <div className="alert alert-info alert-md mt-regular">
   For accessibility reasons, you should always make sure that your individually created color combinations are sufficiently contrasting. There may be a better solution than coloring elements individually.
 
-  For example, use the <LinkTo kind="utilities-background--background-containers">background utilities</LinkTo> to get elements with a specific background color and the best possible contrast color for its content.
+For example, use the <LinkTo kind="utilities-background--background-containers">background utilities</LinkTo> to get elements with a specific background color and the best possible contrast color for its content.
+
 </div>
 
 ## Brand colors
@@ -85,7 +83,7 @@ CSS variables are globally available on your page.
 
 Import the color variables from the `core` file with `@use`. This way, the color variables are scoped and don't mix with your own variables.
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {

packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx

@@ -40,7 +40,7 @@ The easiest way to add an elevation to an element is to apply an elevation class
 
 Import the elevation variables from the Design System Styles package from the `core` sass file with `@use`. This way, the elevation variables are scoped and don't mix with your own variables.
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .elevated-element {

packages/documentation-v7/src/stories/utilities/text/text.docs.mdx

@@ -4,10 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { SCSS_VARIABLES, TextUtilityAPI } from './text.blocks';
 import * as TextDemos from './text.demo.stories';
 
-<Meta
-  title="Utilities/Text"
-  parameters={{ badges: [BADGE.NEEDS_REVISION] }}
-/>
+<Meta title="Utilities/Text" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
 
 # Text
 
@@ -19,11 +16,11 @@ import * as TextDemos from './text.demo.stories';
 
 ### Font Family
 
-<Canvas of={TextDemos.FontFamily} sourceState='shown' />
+<Canvas of={TextDemos.FontFamily} sourceState="shown" />
 
 #### Set Font Family in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -33,19 +30,15 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontFamilies}
-  cssPrefix="font"
-  scssPrefix="font-family"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontFamilies} cssPrefix="font" scssPrefix="font-family" />
 
 ### Font Size
 
-<Canvas of={TextDemos.FontSize} sourceState='shown' />
+<Canvas of={TextDemos.FontSize} sourceState="shown" />
 
 #### Set Font Size in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -55,23 +48,19 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontSizes}
-  cssPrefix="fs"
-  scssPrefix="font-size"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontSizes} cssPrefix="fs" scssPrefix="font-size" />
 
 ### Font Weight
 
 <div className="alert alert-warning my-4">
   The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
 </div>
 
-<Canvas of={TextDemos.FontWeight} sourceState='shown' />
+<Canvas of={TextDemos.FontWeight} sourceState="shown" />
 
 #### Set Font Weight in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -81,36 +70,31 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontWeights}
-  cssPrefix="fw"
-  scssPrefix="font-weight"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontWeights} cssPrefix="fw" scssPrefix="font-weight" />
 
 ### Font Style
 
-<Canvas of={TextDemos.FontStyle} sourceState='shown' />
+<Canvas of={TextDemos.FontStyle} sourceState="shown" />
 
-<p className="mb-big"><em>There are no Sass variables for font styles at this time.</em></p>
+<p className="mb-big">
+  <em>There are no Sass variables for font styles at this time.</em>
+</p>
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontStyles}
-  cssPrefix="fst"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontStyles} cssPrefix="fst" />
 
 ### Line Heights
 
 <div className="alert alert-warning my-4">
   Fixed-size line heights are deprecated in favor of relative line height utility classes.
 </div>
 
-<Canvas of={TextDemos.LineHeight} sourceState='shown' />
+<Canvas of={TextDemos.LineHeight} sourceState="shown" />
 
 #### Set Line Height in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -122,21 +106,15 @@ import * as TextDemos from './text.demo.stories';
 
 ##### Fixed-size (deprecated)
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fixedLineHeights}
-  cssPrefix="lh"
-  scssPrefix="line-height"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fixedLineHeights} cssPrefix="lh" scssPrefix="line-height" />
 
 ##### Relative
+
 For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
 To make the line height equal to the font size, you can use the `.lh-1` class.
 There are no Sass variables for these row heights.
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.relativeLineHeights}
-  cssPrefix="lh"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.relativeLineHeights} cssPrefix="lh" />
 
 ## Text
 
@@ -145,17 +123,18 @@ Define how text-blocks are displayed.
 ### Color
 
 <div className="alert alert-warning my-4">
-  The `.text-auto` class is deprecated since text color is now set by the <LinkTo href="utilities-background">backgrounds</LinkTo> themselves.
+  The `.text-auto` class is deprecated since text color is now set by the{' '}
+  <LinkTo href="utilities-background">backgrounds</LinkTo> themselves.
 </div>
 
 Colorize text with `.text-*` utility classes.
 To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
 
-<Canvas of={TextDemos.TextColor} sourceState='shown' />
+<Canvas of={TextDemos.TextColor} sourceState="shown" />
 
 #### Set the Color in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -165,22 +144,19 @@ To colorize links, use the `.link-*` classes instead as they also provide stylin
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.colors}
-  cssPrefix="text"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.colors} cssPrefix="text" />
 
 ### Reset Color
 
 Reset a text color with `.text-reset`, so that an element inherits the color from its parent.
 
-<Canvas of={TextDemos.TextColorReset} sourceState='shown' />
+<Canvas of={TextDemos.TextColorReset} sourceState="shown" />
 
 ### Alignment
 
 Easily realign text to components with text alignment classes.
 
-<Canvas of={TextDemos.TextAlign} sourceState='shown' />
+<Canvas of={TextDemos.TextAlign} sourceState="shown" />
 
 #### Responsive Alignment
 
@@ -193,22 +169,22 @@ For more detailed informations about breakpoints read our <LinkTo kind="foundati
 
 Wrap text or prevent it from wrapping with the `.text-wrap` and `.text-nowrap` utility classes.
 
-<Canvas of={TextDemos.TextWrapping} sourceState='shown' />
+<Canvas of={TextDemos.TextWrapping} sourceState="shown" />
 
 ### Word Break
 
 Prevent long strings of text from breaking your component's layout by using the utility class `.text-break`.
 
-<Canvas of={TextDemos.WordBreak} sourceState='shown' />
+<Canvas of={TextDemos.WordBreak} sourceState="shown" />
 
 ### Transform
 
 Transform text with the following text capitalization classes: `.text-lowercase`, `.text-uppercase` and `.text-capitalize`.
 
-<Canvas of={TextDemos.TextTransform} sourceState='shown' />
+<Canvas of={TextDemos.TextTransform} sourceState="shown" />
 
 ### Decorations
 
 Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`.
 
-<Canvas of={TextDemos.TextDecoration} sourceState='shown' />
+<Canvas of={TextDemos.TextDecoration} sourceState="shown" />