feat(documentation): implement new docs styles and webfonts (#3161)

packages/components/src/components/post-alert/post-alert.tsx

@@ -156,7 +156,7 @@ export class PostAlert {
 
     return (
       <Host data-version={version}>
-        <div role="alert" class={this.classes}>
+        <div role="alert" class={this.classes} part={this.classes}>
           {this.dismissible && (
             <button class="btn-close" onClick={this.onDismissButtonClick}>
               <span class="visually-hidden">{this.dismissLabel}</span>

packages/components/src/components/post-tabs/post-tabs.tsx

@@ -5,6 +5,8 @@ import { fadeIn, fadeOut } from '@/animations';
 /**
  * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
  * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
+ * @part tabs - Add custom styles for the tab header container.
+ * @part content - Add custom styles for the tab panel container.
  */
 
 @Component({
@@ -196,12 +198,12 @@ export class PostTabs {
   render() {
     return (
       <Host data-version={version}>
-        <div class="tabs-wrapper">
+        <div class="tabs-wrapper" part="tabs">
           <div class="tabs" role="tablist">
             <slot name="tabs" onSlotchange={() => this.enableTabs()} />
           </div>
         </div>
-        <div class="tab-content">
+        <div class="tab-content" part="content">
           <slot onSlotchange={() => this.moveMisplacedTabs()} />
         </div>
       </Host>

packages/components/src/components/post-tabs/readme.md

@@ -47,6 +47,14 @@ Type: `Promise<void>`
 | `"tabs"`    | Slot for placing tab headers. Each tab header should be a <post-tab-header> element. |
 
 
+## Shadow Parts
+
+| Part        | Description                                     |
+| ----------- | ----------------------------------------------- |
+| `"content"` | Add custom styles for the tab panel container.  |
+| `"tabs"`    | Add custom styles for the tab header container. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/documentation/.storybook/blocks/layout.tsx → packages/documentation/.storybook/blocks/layout/layout.tsx

@@ -1,8 +1,8 @@
 import { DocsContainer, DocsContainerProps, Unstyled } from '@storybook/blocks';
 import { PropsWithChildren } from 'react';
-import '../styles/layout.scss';
-import Footer from './footer';
-import Header from './header';
+import './layout.scss';
+import Footer from '../footer';
+import Header from '../header';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 function shouldShowHeader() {

packages/documentation/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/web-components';
 import { extractArgTypes, extractComponentDescription } from '@kurbar/storybook-addon-docs-stencil';
 import { format } from 'prettier';
-import DocsLayout from './blocks/layout';
+import DocsLayout from './blocks/layout/layout';
 import { openFullScreenDemo, prettierOptions, resetComponents } from './helpers';
 import './helpers/register-web-components';
 import './addons/cypress-storybook/client';

packages/documentation/.storybook/styles/components/alert.scss

@@ -0,0 +1,134 @@
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+$post-docs-alert-border-width: post.$size-line;
+$post-docs-alert-border-style: solid;
+$post-docs-alert-border-radius: post.$size-mini;
+$post-docs-alert-box-shadow: none;
+
+$post-docs-alert-padding-md: 1em 2em 1em 3.5em;
+$post-docs-alert-padding-sm: 0.25em 1em 0.25em 2.25em;
+
+$post-docs-alert-icon-size-md: 2em;
+$post-docs-alert-icon-size-sm: 1.4em;
+
+$post-docs-alert-line-height-md: 1.35;
+$post-docs-alert-line-height-sm: 1.25;
+
+$post-docs-alert-variants: (
+  info: (
+    background-color: '250, 249, 248',
+    border-color: #1ea0d6,
+    color: #0776a4,
+  ),
+  warning: (
+    background-color: '250, 249, 248',
+    border-color: #db8b12,
+    color: #b16a00,
+  ),
+  danger: (
+    background-color: '250, 249, 248',
+    border-color: #d12e35,
+    color: #a1050b,
+  ),
+);
+
+@include mixins.style-docs-only-guard('.alert') {
+  border-width: $post-docs-alert-border-width;
+  border-style: $post-docs-alert-border-style;
+  border-radius: $post-docs-alert-border-radius;
+  box-shadow: $post-docs-alert-box-shadow;
+  font-size: 1rem;
+
+  &:not(.alert-action) {
+    > :only-child:not(code),
+    > :first-child:not(code) + :last-child:not(code) {
+      font-size: inherit;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.alert-sm,
+  &.alert-md {
+    display: block;
+    min-height: 0;
+    font-family: inherit;
+
+    a {
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+
+      &:hover {
+        color: black;
+      }
+    }
+  }
+
+  &.alert-sm {
+    padding: $post-docs-alert-padding-sm;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: $post-docs-alert-line-height-sm;
+
+    &::before {
+      top: list.nth($post-docs-alert-padding-sm, 1) +
+        (($post-docs-alert-line-height-sm - $post-docs-alert-icon-size-sm) * 0.5);
+      left: (list.nth($post-docs-alert-padding-sm, 4) - $post-docs-alert-icon-size-sm) * 0.5;
+      width: $post-docs-alert-icon-size-sm;
+      height: $post-docs-alert-icon-size-sm;
+    }
+
+    code {
+      font-size: 0.833333em;
+    }
+  }
+
+  &.alert-md {
+    padding: $post-docs-alert-padding-md;
+    font-size: 0.9rem;
+    line-height: $post-docs-alert-line-height-md;
+
+    &::before {
+      top: list.nth($post-docs-alert-padding-md, 1) +
+        (($post-docs-alert-line-height-md - $post-docs-alert-icon-size-md) * 0.5);
+      left: (list.nth($post-docs-alert-padding-md, 4) - $post-docs-alert-icon-size-md) * 0.5;
+      width: $post-docs-alert-icon-size-md;
+      height: $post-docs-alert-icon-size-md;
+    }
+  }
+
+  @each $name, $colorMap in $post-docs-alert-variants {
+    &.alert-#{$name} {
+      --post-bg-rgb: #{map.get($colorMap, 'background-color')};
+      --post-contrast-color: #{map.get($colorMap, 'color')};
+
+      border-color: map.get($colorMap, 'border-color');
+    }
+  }
+}
+
+@include mixins.style-docs-only-guard('post-alert') {
+  &::part(alert) {
+    border-width: $post-docs-alert-border-width;
+    border-style: $post-docs-alert-border-style;
+    border-radius: $post-docs-alert-border-radius;
+    box-shadow: $post-docs-alert-box-shadow;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  @each $name, $colorMap in $post-docs-alert-variants {
+    &::part(alert-#{$name}) {
+      --post-bg-rgb: #{map.get($colorMap, 'background-color')};
+      --post-contrast-color: #{map.get($colorMap, 'color')};
+      border-color: map.get($colorMap, 'border-color');
+    }
+  }
+}

packages/documentation/.storybook/styles/components/blockquote.scss

@@ -0,0 +1,13 @@
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+@include mixins.style-docs-only-guard('.blockquote') {
+  padding: 0;
+  border-left: 0 none;
+  font-style: italic;
+}
+
+@include mixins.style-docs-only-guard('.blockquote-footer') {
+  padding: 0;
+  border-left: 0 none;
+}

packages/documentation/.storybook/styles/components/blocks.scss

@@ -0,0 +1,49 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+#storybook-docs {
+  .sbdocs-preview {
+    border-color: post.$border-color;
+    border-radius: post.$size-mini;
+    box-shadow: none;
+  }
+
+  .docblock-argstable {
+    border-radius: post.$size-mini;
+
+    tbody {
+      position: relative;
+      -webkit-filter: none;
+      filter: none;
+
+      &:before {
+        display: block;
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: post.$border-width solid post.$border-color;
+        border-radius: post.$size-mini;
+        z-index: -1;
+      }
+
+      > tr {
+        > th,
+        > td {
+          background-color: transparent;
+          border: 0 none;
+        }
+
+        &:not(:first-child) {
+          > th,
+          > td {
+            border-top: post.$border-width solid post.$border-color;
+          }
+        }
+      }
+    }
+  }
+
+  .docblock-source {
+    border-radius: post.$size-mini;
+    box-shadow: none;
+  }
+}

packages/documentation/.storybook/styles/components/fonts.scss

@@ -0,0 +1,44 @@
+// FiraCode WebFonts
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-bold.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-regular.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 300;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-light.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-light.woff') format('woff');
+}
+
+// Reddit Mono WebFonts
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 700;
+  src: local('Reddit Mono Bold'), url('/assets/fonts/reddit/reddit-mono-bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 400;
+  src: local('Reddit Mono Regular'),
+    url('/assets/fonts/reddit/reddit-mono-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 300;
+  src: local('Reddit Mono Light'), url('/assets/fonts/reddit/reddit-mono-light.woff') format('woff');
+}

packages/documentation/.storybook/styles/components/index.scss

@@ -0,0 +1,8 @@
+@use './fonts.scss';
+@use './typo.scss';
+@use './blocks.scss';
+
+// styles to apply only when components used in the docs, not in the iframe
+@use './alert.scss';
+@use './tabs.scss';
+@use './blockquote.scss';

packages/documentation/.storybook/styles/components/tabs.scss

@@ -0,0 +1,67 @@
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+@include mixins.style-docs-only-guard('post-tabs') {
+  &::part(tabs) {
+    background: none;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 100vw;
+      height: 1px;
+      background-color: post.$border-color;
+      transform: translateX(-50%);
+    }
+  }
+
+  &::part(content) {
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: post.$size-regular * -1;
+      left: calc(100% + #{post.$size-mini});
+      border-left: post.$size-hair dotted post.$border-color;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      position: absolute;
+      top: calc(100% + #{post.$size-regular});
+      left: 0;
+      right: post.$size-mini * -1;
+      border-top: post.$size-hair dotted post.$border-color;
+    }
+  }
+}
+
+@include mixins.style-docs-only-guard('post-tab-header.tab-title[role="tab"]') {
+  border-top-left-radius: post.$border-radius;
+  border-top-right-radius: post.$border-radius;
+
+  &:first-child {
+    margin-left: post.$size-big;
+  }
+
+  &.active {
+    border-top-left-radius: post.$border-radius;
+    border-top-right-radius: post.$border-radius;
+
+    &::before {
+      background-color: post.$black;
+      border-radius: inherit;
+    }
+  }
+
+  ~ post-tab-header {
+    margin-left: 1px;
+  }
+}