chore(documentation, styles): text utilities (#4360)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Jan 31, 2025 · 006e7c0 · 006e7c0
1 parent ac5d5f2
commit 006e7c0
Showing 15 changed files with 242 additions and 178 deletions.
diff --git a/.changeset/clever-cups-swim.md b/.changeset/clever-cups-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.lh-base` utility class.
diff --git a/.changeset/three-geese-run.md b/.changeset/three-geese-run.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Internalized Bootstrap text utilities into the Design System.
diff --git a/packages/documentation/src/stories/utilities/text/text-color.sample.scss b/packages/documentation/src/stories/utilities/text/text-color.sample.scss
diff --git a/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss
diff --git a/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss
diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss
diff --git a/packages/documentation/src/stories/utilities/text/text.blocks.tsx b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -1,11 +1,6 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
-import { SCSS_VARIABLES, TextUtilityAPI } from './text.blocks';
 import * as TextStories from './text.stories';
 import SampleFontFamily from './text-font-family.sample.scss?raw';
-import SampleFontSize from './text-font-size.sample.scss?raw';
-import SampleFontWeight from './text-font-weight.sample.scss?raw';
-import SampleLineHeight from './text-line-height.sample.scss?raw';
-import SampleColor from './text-color.sample.scss?raw';
 import './text.styles.scss';
 
 <Meta of={TextStories} />
@@ -20,93 +15,38 @@ import './text.styles.scss';
 
 ### Font Family
 
+Use the class `.font-sans-serif` to set the text as the default font-family.
+
 <Canvas of={TextStories.FontFamily} sourceState="shown" />
 
 #### Set Font Family in SCSS
 
 <Source code={SampleFontFamily} language="scss" />
 
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontFamilies} cssPrefix="font" scssPrefix="font-family" />
-
-### Font Size
-
-<Canvas of={TextStories.FontSize} sourceState="shown" />
-
-#### Set Font Size in SCSS
-
-<Source code={SampleFontSize} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontSizes} cssPrefix="fs" scssPrefix="font-size" />
-
 ### Font Weight
 
-<div className="banner banner-warning my-24">
-  The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
-</div>
+The font weight classes available are `.fw-normal`, `.fw-bold` and `.fw-black`.
 
 <Canvas of={TextStories.FontWeight} sourceState="shown" />
 
-#### Set Font Weight in SCSS
-
-<Source code={SampleFontWeight} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontWeights} cssPrefix="fw" scssPrefix="font-weight" />
-
 ### Font Style
 
-<Canvas of={TextStories.FontStyle} sourceState="shown" />
-
-<p className="mb-32">
-  <em>There are no Sass variables for font styles at this time.</em>
-</p>
+The font style classes available are `.fst-normal` and `.fst-italic`.
 
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontStyles} cssPrefix="fst" />
+<Canvas of={TextStories.FontStyle} sourceState="shown" />
 
 ### Line Heights
 
-<Canvas of={TextStories.LineHeight} sourceState="shown" />
-
-#### Set Line Height in SCSS
+The line height classes available are `.lh-1`, `.lh-sm` and `.lh-lg`.
 
-<Source code={SampleLineHeight} language="scss" />
+For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings by default.
 
-#### Possible Values
-
-##### 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" />
+<Canvas of={TextStories.LineHeight} sourceState="shown" />
 
 ## Text
 
 Define how text-blocks are displayed.
 
-### Color
-
-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={TextStories.TextColor} sourceState="shown" />
-
-#### Set the Color in SCSS
-
-<Source code={SampleColor} language="scss" />
-
-#### Possible Values
-
-<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.
@@ -146,6 +86,6 @@ Transform text with the following text capitalization classes: `.text-lowercase`
 
 ### Decorations
 
-Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`.
+Decorate text with the following text decoration classes: `text-decoration-underline`, `.text-decoration-line-through` and `.text-decoration-none`.
 
 <Canvas of={TextStories.TextDecoration} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss
diff --git a/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
@@ -0,0 +1,108 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+import meta from './text.stories';
+import './text.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+  decorators: null,
+};
+
+type Story = StoryObj;
+
+function getTextUtility(type: string) {
+  switch (type) {
+    case 'Family':
+      return html`<p class="font-sans-serif">Font sans-serif</p>`;
+    case 'Style':
+      return html`
+        ${['normal', 'italic'].map(
+          (val: string) => html`<p class="fst-${val}">Font style ${val}</p>`,
+        )}
+      `;
+    case 'Weight':
+      return html`
+        ${['normal', 'bold', 'black'].map(
+          (val: string) => html`<p class="fw-${val}">Font weight ${val}</p>`,
+        )}
+      `;
+    case 'Line height':
+      return html`
+        ${['1', 'sm', 'lg'].map(
+          (val: string) => html`<p class="text-example-bordered lh-${val}">Line height ${val}</p>`,
+        )}
+      `;
+    case 'Text align':
+      return html`
+        ${['start', 'end', 'center'].map(
+          val => html`
+            <div class="text-${val}">
+              <p>Text align ${val}</p>
+            </div>
+          `,
+        )}
+      `;
+    case 'Text decoration':
+      return html`
+        ${['none', 'underline', 'line-through'].map(
+          val => html`<p class="text-decoration-${val}">Text decoration ${val}</p>`,
+        )}
+      `;
+    case 'Text transform':
+      return html`
+        ${['lowercase', 'uppercase', 'capitalize'].map(
+          val => html`<p class="text-${val}">Text transform ${val}</p>`,
+        )}
+      `;
+    case 'White space':
+      return html`
+        ${['wrap', 'nowrap'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-100 text-${val}">
+                White space ${val} White space ${val} White space ${val} White space ${val}
+              </p>
+            `,
+        )}
+      `;
+    case 'Word wrap break':
+      return html`
+        ${['break'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-78 text-${val}">Averylongwordthatwillbreak</p>
+            `,
+        )}
+      `;
+  }
+}
+
+export const Text: Story = {
+  render: () => {
+    return schemes(
+      () => html` <div class="text-example">
+        <h1>Text utilities</h1>
+        ${[
+          'Family',
+          'Style',
+          'Weight',
+          'Line height',
+          'Text align',
+          'Text decoration',
+          'Text transform',
+          'White space',
+          'Word wrap break',
+        ].map(
+          val => html`
+            <h2>${val}</h2>
+            <div class="text-example-child gap-8 d-flex flex-column">${getTextUtility(val)}</div>
+          `,
+        )}
+      </div>`,
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -18,35 +18,37 @@ export const FontFamily: Story = {
   render: () => html` <p class="font-sans-serif">This is sans serif text.</p> `,
 };
 
-export const FontSize: Story = {
-  render: () => html` <p class="fs-tiny">This is tiny text.</p> `,
-};
-
 export const FontWeight: Story = {
-  render: () => html` <p class="fw-bold">This is bold text.</p> `,
+  render: () =>
+    html`
+      <p class="fw-normal">This is a normal text.</p>
+      <p class="fw-bold">This is a bold text.</p>
+      <p class="fw-black">This is a black text.</p>
+    `,
 };
 
 export const FontStyle: Story = {
-  render: () => html` <p class="fst-italic">This is italic text.</p> `,
+  render: () =>
+    html`
+      <p class="fst-normal">This is a normal text.</p>
+      <p class="fst-italic">This is an italic text.</p>
+    `,
 };
 
 export const LineHeight: Story = {
-  render: () => html` <p class="lh-1">This text has a line height equal to the font size.</p> `,
-};
-
-export const TextColor: Story = {
-  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
-  render: () => html`
-    <p class="text-success">This is colored text.</p>
-    <a href="#" class="link-warning">This is a colored link, it lightens on hover.</a>
-  `,
+  render: () =>
+    html`
+      <p class="my-text lh-1">This text has a line height equal to the font size.</p>
+      <p class="my-text lh-sm">This text has a small line height.</p>
+      <p class="my-text lh-lg">This text has a large line height.</p>
+    `,
 };
 
 export const TextColorReset: Story = {
   decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
-    <p class="text-danger">
-      This is colored text with a
+    <p class="my-colored-text">
+      This is a colored text with a
       <a href="#" class="text-reset">link</a>
       of the same color.
     </p>
@@ -86,16 +88,16 @@ export const WordBreak: Story = {
 
 export const TextTransform: Story = {
   render: () => html`
-    <p class="text-lowercase">Lowercased text.</p>
-    <p class="text-uppercase">Uppercased text.</p>
-    <p class="text-capitalize">CapiTaliZed text.</p>
+    <p class="text-lowercase">This is a Lowercased text.</p>
+    <p class="text-uppercase">This is an Uppercased text.</p>
+    <p class="text-capitalize">This is a CapiTaliZed text.</p>
   `,
 };
 
 export const TextDecoration: Story = {
   render: () => html`
     <p class="text-decoration-underline">This text has a line underneath it.</p>
     <p class="text-decoration-line-through">This text has a line going through it.</p>
-    <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
+    <a href="#" class="text-decoration-none">This link has its text decoration removed.</a>
   `,
 };
diff --git a/packages/documentation/src/stories/utilities/text/text.styles.scss b/packages/documentation/src/stories/utilities/text/text.styles.scss
@@ -1,5 +1,14 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-.my-container {
+.my-container,
+.my-text {
   background-color: post.$info;
 }
+
+.text-example-bordered {
+  border: 1px solid post.$gray-40;
+}
+
+.my-colored-text {
+  color: post.$error;
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -72,7 +72,16 @@ $utilities: map.remove($utilities, 'overflow');
 $utilities: map.remove($utilities, 'overflow-x');
 $utilities: map.remove($utilities, 'overflow-y');
 
+$utilities: map.remove($utilities, 'font-family');
+$utilities: map.remove($utilities, 'font-size');
+$utilities: map.remove($utilities, 'font-style');
 $utilities: map.remove($utilities, 'shadow');
 $utilities: map.remove($utilities, 'font-weight');
+$utilities: map.remove($utilities, 'line-height');
+$utilities: map.remove($utilities, 'text-align');
+$utilities: map.remove($utilities, 'text-decoration');
+$utilities: map.remove($utilities, 'text-transform');
+$utilities: map.remove($utilities, 'white-space');
+$utilities: map.remove($utilities, 'word-wrap');
 
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
@@ -3,6 +3,7 @@
 @use './functions' as *;
 
 @use '../variables/sizing' as *;
+@use '../variables/type';
 
 /*
   Utilities are generated with our utility API using bellow $utilities map.
@@ -443,14 +444,70 @@ $utilities: (
     property: overflow-y,
     values: auto hidden visible scroll,
   ),
+  'font-family': (
+    property: font-family,
+    class: font,
+    values: (
+      'sans-serif': type.$font-family-sans-serif,
+    ),
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
   'font-weight': (
     property: font-weight,
+    class: fw,
     values: (
-      black: 900,
-      bold: 700,
-      normal: 400,
+      black: type.$font-weight-black,
+      bold: type.$font-weight-bold,
+      normal: type.$font-weight-normal,
     ),
-    class: fw,
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: type.$line-height-1,
+      sm: type.$line-height-sm,
+      lg: type.$line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
   ),
   'elevation': (
     property: box-shadow,

diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
@@ -10,7 +10,7 @@
 @use './../tokens/utilities';
 @use './../tokens/elements' as element-tokens;
 
-tokens.$default-map: utilities.$post-spacing;
+tokens.$default-map: utilities.$post-typo;
 
 // Fonts
 //
@@ -54,13 +54,12 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
-$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-$font-weight-black: 900 !default;
+$font-weight-normal: tokens.get('utility-font-weight-regular') !default;
+$font-weight-bold: tokens.get('utility-font-weight-bold') !default;
+$font-weight-black: tokens.get('utility-font-weight-black') !default;
 
 // Deprecated
 $font-sizes: (
@@ -163,8 +162,9 @@ $font-curves: (
 $font-size-base: $font-size-regular !default;
 $font-weight-base: $font-weight-normal !default;
 $line-height-base: $line-height-copy;
-$line-height-sm: $line-height-heading;
-$line-height-lg: $line-height-copy;
+$line-height-1: tokens.get('utility-line-height-1');
+$line-height-sm: tokens.get('utility-line-height-sm');
+$line-height-lg: tokens.get('utility-line-height-lg');
 
 $headings-margin-bottom: (spacing.$spacer * 0.5) !default;
 $headings-font-family: inherit !default;
@@ -185,10 +185,10 @@ $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default;
-$blockquote-padding-left: tokens.get('utility-gap-12') !default;
-$blockquote-margin-top: tokens.get('utility-gap-24') !default;
-$blockquote-margin-y: tokens.get('utility-gap-16') !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
+$blockquote-padding-left: tokens.get('utility-gap-12', utilities.$post-spacing) !default;
+$blockquote-margin-top: tokens.get('utility-gap-24', utilities.$post-spacing) !default;
+$blockquote-margin-y: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;