From ace2eabbb642fd7dad355a162ce884ecdff2982d Mon Sep 17 00:00:00 2001 From: imagoiq <{ID}+{username}@users.noreply.github.com> Date: Wed, 26 Jul 2023 14:55:53 +0200 Subject: [PATCH 1/2] feat(documentation): add SCSS syntax highlighting --- .../documentation-v7/.storybook/preview.ts | 13 +- packages/documentation-v7/package.json | 3 + pnpm-lock.yaml | 127 ++++++++++++++---- 3 files changed, 111 insertions(+), 32 deletions(-) diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation-v7/.storybook/preview.ts index ec8aa24698..412b18f19e 100644 --- a/packages/documentation-v7/.storybook/preview.ts +++ b/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); diff --git a/packages/documentation-v7/package.json b/packages/documentation-v7/package.json index 8c79428552..8af070ace7 100644 --- a/packages/documentation-v7/package.json +++ b/packages/documentation-v7/package.json @@ -37,6 +37,7 @@ "@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", @@ -44,10 +45,12 @@ "@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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53f65ed568..4fcd2af93b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -619,7 +619,7 @@ importers: devDependencies: '@geometricpanda/storybook-addon-badges': specifier: 1.1.1 - version: 1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@6.5.16)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0) + version: 1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@7.1.1)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0) '@open-wc/lit-helpers': specifier: ^0.6.0 version: 0.6.0(lit@2.7.6) @@ -638,6 +638,9 @@ importers: '@storybook/blocks': specifier: 7.1.1 version: 7.1.1(react-dom@18.2.0)(react@18.2.0) + '@storybook/components': + specifier: ^7.1.1 + version: 7.1.1(react-dom@18.2.0)(react@18.2.0) '@storybook/manager-api': specifier: ^7.0.26 version: 7.0.26(react-dom@18.2.0)(react@18.2.0) @@ -659,6 +662,9 @@ importers: '@types/react': specifier: 18.2.17 version: 18.2.17 + '@types/react-syntax-highlighter': + specifier: ^15.5.7 + version: 15.5.7 lit: specifier: 2.7.6 version: 2.7.6 @@ -671,6 +677,9 @@ importers: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-syntax-highlighter: + specifier: ^15.5.0 + version: 15.5.0(react@18.2.0) rimraf: specifier: 5.0.1 version: 5.0.1 @@ -1696,10 +1705,10 @@ packages: '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.19.3) '@babel/helper-module-transforms': 7.22.1 '@babel/helpers': 7.22.3 - '@babel/parser': 7.22.4 + '@babel/parser': 7.22.7 '@babel/template': 7.22.5 '@babel/traverse': 7.22.4 - '@babel/types': 7.22.4 + '@babel/types': 7.22.5 convert-source-map: 1.9.0 debug: 4.3.4(supports-color@8.1.1) gensync: 1.0.0-beta.2 @@ -2314,20 +2323,6 @@ packages: chalk: 2.4.2 js-tokens: 4.0.0 - /@babel/parser@7.22.4: - resolution: {integrity: sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.22.5 - - /@babel/parser@7.22.5: - resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - '@babel/types': 7.22.5 - /@babel/parser@7.22.7: resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==} engines: {node: '>=6.0.0'} @@ -4950,7 +4945,7 @@ packages: '@babel/helper-function-name': 7.22.5 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.5 - '@babel/parser': 7.22.5 + '@babel/parser': 7.22.7 '@babel/types': 7.22.5 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 @@ -4967,7 +4962,7 @@ packages: '@babel/helper-function-name': 7.22.5 '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.5 - '@babel/parser': 7.22.5 + '@babel/parser': 7.22.7 '@babel/types': 7.22.5 debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 @@ -4992,14 +4987,6 @@ packages: - supports-color dev: true - /@babel/types@7.22.4: - resolution: {integrity: sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 - to-fast-properties: 2.0.0 - /@babel/types@7.22.5: resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==} engines: {node: '>=6.9.0'} @@ -5988,6 +5975,31 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /@geometricpanda/storybook-addon-badges@1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@7.1.1)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-oruMaqUTq8kceJCQhoCHg4SJcCx/34j9t0g9P0krLH7cTgZQJVtmFyvtO9tMtOIU+FQUvizL+cDUt54TU5pIyQ==} + peerDependencies: + '@storybook/addons': ^6.5.8 + '@storybook/api': ^6.5.8 + '@storybook/components': ^6.5.8 + '@storybook/core-events': ^6.5.8 + '@storybook/theming': ^6.5.8 + react: ^16.8.0 || ^17.0.0 || >=18 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/addons': 6.5.16(react-dom@18.2.0)(react@18.2.0) + '@storybook/api': 6.5.16(react-dom@18.2.0)(react@18.2.0) + '@storybook/components': 7.1.1(react-dom@18.2.0)(react@18.2.0) + '@storybook/core-events': 6.5.16 + '@storybook/theming': 6.5.16(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + /@hapi/hoek@9.3.0: resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} dev: true @@ -10218,6 +10230,12 @@ packages: '@types/react': 18.2.17 dev: true + /@types/react-syntax-highlighter@15.5.7: + resolution: {integrity: sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==} + dependencies: + '@types/react': 18.2.17 + dev: true + /@types/react@17.0.59: resolution: {integrity: sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g==} requiresBuild: true @@ -15697,6 +15715,12 @@ packages: reusify: 1.0.4 dev: true + /fault@1.0.4: + resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==} + dependencies: + format: 0.2.2 + dev: true + /faye-websocket@0.11.4: resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==} engines: {node: '>=0.8.0'} @@ -16093,6 +16117,11 @@ packages: mime-types: 2.1.35 dev: true + /format@0.2.2: + resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} + engines: {node: '>=0.4.x'} + dev: true + /forwarded@0.2.0: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} @@ -17020,6 +17049,10 @@ packages: hasBin: true dev: true + /highlight.js@10.7.3: + resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} + dev: true + /highlight.js@11.8.0: resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==} engines: {node: '>=12.0.0'} @@ -18246,7 +18279,7 @@ packages: engines: {node: '>=8'} dependencies: '@babel/core': 7.22.9 - '@babel/parser': 7.22.5 + '@babel/parser': 7.22.7 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.0 semver: 6.3.0 @@ -20465,6 +20498,13 @@ packages: tslib: 2.6.1 dev: true + /lowlight@1.20.0: + resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==} + dependencies: + fault: 1.0.4 + highlight.js: 10.7.3 + dev: true + /lru-cache@4.1.5: resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==} dependencies: @@ -23084,6 +23124,16 @@ packages: engines: {node: '>= 0.8'} dev: true + /prismjs@1.27.0: + resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==} + engines: {node: '>=6'} + dev: true + + /prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: true + /proc-log@3.0.0: resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -23652,6 +23702,19 @@ packages: throttle-debounce: 3.0.1 dev: true + /react-syntax-highlighter@15.5.0(react@18.2.0): + resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==} + peerDependencies: + react: '>= 0.14.0 || >=18' + dependencies: + '@babel/runtime': 7.21.5 + highlight.js: 10.7.3 + lowlight: 1.20.0 + prismjs: 1.29.0 + react: 18.2.0 + refractor: 3.6.0 + dev: true + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -23854,6 +23917,14 @@ packages: /reflect-metadata@0.1.13: resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==} + /refractor@3.6.0: + resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==} + dependencies: + hastscript: 6.0.0 + parse-entities: 2.0.0 + prismjs: 1.27.0 + dev: true + /regenerate-unicode-properties@10.1.0: resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==} engines: {node: '>=4'} From 0e140693f22b12fab5d2841da33d9ceb174d884b Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 27 Jul 2023 15:40:15 +0200 Subject: [PATCH 2/2] Use scss language in current snippet --- .../stories/foundation/color/color.docs.mdx | 10 +-- .../foundation/elevation/elevation.docs.mdx | 2 +- .../src/stories/utilities/text/text.docs.mdx | 86 +++++++------------ 3 files changed, 36 insertions(+), 62 deletions(-) diff --git a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx b/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx index cd2b44a411..eb65d1d73e 100644 --- a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx +++ b/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'; - + # Color @@ -18,7 +15,8 @@ They theme our elements and components.
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 background utilities to get elements with a specific background color and the best possible contrast color for its content. +For example, use the background utilities to get elements with a specific background color and the best possible contrast color for its content. +
## 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 { diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx b/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx index 1085e145e8..b3c6648b83 100644 --- a/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx +++ b/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 { diff --git a/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx b/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx index 9d8c67aaa9..d58330e260 100644 --- a/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx +++ b/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'; - + # Text @@ -19,11 +16,11 @@ import * as TextDemos from './text.demo.stories'; ### Font Family - + #### 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 - + ### Font Size - + #### Set Font Size in SCSS -```css dark +```scss dark @use '@swisspost/design-system-styles/core' as post; .my-element { @@ -55,11 +48,7 @@ import * as TextDemos from './text.demo.stories'; #### Possible Values - + ### Font Weight @@ -67,11 +56,11 @@ import * as TextDemos from './text.demo.stories'; The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes. - + #### Set Font Weight in SCSS -```css dark +```scss dark @use '@swisspost/design-system-styles/core' as post; .my-element { @@ -81,24 +70,19 @@ import * as TextDemos from './text.demo.stories'; #### Possible Values - + ### Font Style - + -

There are no Sass variables for font styles at this time.

+

+ There are no Sass variables for font styles at this time. +

#### Possible Values - + ### Line Heights @@ -106,11 +90,11 @@ import * as TextDemos from './text.demo.stories'; Fixed-size line heights are deprecated in favor of relative line height utility classes. - + #### 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) - + ##### Relative + For good accessibility, the line height is set to 1.5 for body text and 1.2 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. - + ## Text @@ -145,17 +123,18 @@ Define how text-blocks are displayed. ### Color
- The `.text-auto` class is deprecated since text color is now set by the backgrounds themselves. + The `.text-auto` class is deprecated since text color is now set by the{' '} + backgrounds themselves.
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. - + #### 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 - + ### Reset Color Reset a text color with `.text-reset`, so that an element inherits the color from its parent. - + ### Alignment Easily realign text to components with text alignment classes. - + #### Responsive Alignment @@ -193,22 +169,22 @@ For more detailed informations about breakpoints read our ### Word Break Prevent long strings of text from breaking your component's layout by using the utility class `.text-break`. - + ### Transform Transform text with the following text capitalization classes: `.text-lowercase`, `.text-uppercase` and `.text-capitalize`. - + ### Decorations Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`. - +