chore(documentation, styles): text utilities

.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.

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

@@ -33,10 +33,6 @@ body {
       font-family: tokens.get('body-font-family');
     }
 
-    .font-sans-serif {
-      font-family: var(--bs-font-sans-serif) !important;
-    }
-
     .font-monospace {
       font-family: var(--bs-font-monospace) !important;
     }

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

@@ -1,11 +1,8 @@
 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,55 +17,29 @@ import './text.styles.scss';
 
 ### Font Family
 
+Use the class `.font-sans-serif` to set the text as the post sans-serif 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` and `.fw-bold`.
 
 <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>
-
-#### Possible Values
+The font style classes available are `.fst-normal` and `.fst-italic`.
 
-<TextUtilityAPI values={SCSS_VARIABLES.fontStyles} cssPrefix="fst" />
+<Canvas of={TextStories.FontStyle} sourceState="shown" />
 
 ### Line Heights
 
@@ -80,33 +51,19 @@ import './text.styles.scss';
 
 #### 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" />
+Available classes are:
+
+- `.lh-1`: line-height equal to the font-size
+- `.lh-base`: default line-height
+- `.lh-sm`: small line-height of 1.25
+- `.lh-lg`: large line-height of 2
 
 ## 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 +103,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" />

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'].map(
+          (val: string) => html`<p class="fw-${val}">Font weight ${val}</p>`,
+        )}
+      `;
+    case 'Line height':
+      return html`
+        ${['1', 'base', '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>`,
+    );
+  },
+};

packages/documentation/src/stories/utilities/text/text.stories.ts

@@ -18,10 +18,6 @@ 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> `,
 };
@@ -34,18 +30,10 @@ 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>
-  `,
-};
-
 export const TextColorReset: Story = {
   decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
-    <p class="text-danger">
+    <p class="my-colored-text">
       This is colored text with a
       <a href="#" class="text-reset">link</a>
       of the same color.
@@ -96,6 +84,6 @@ 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>
   `,
 };

packages/documentation/src/stories/utilities/text/text.styles.scss

@@ -3,3 +3,11 @@
 .my-container {
   background-color: post.$info;
 }
+
+.text-example-bordered {
+  border: 1px solid post.$gray-40;
+}
+
+.my-colored-text {
+  color: post.$error;
+}

packages/styles/src/themes/bootstrap/_utilities.scss

@@ -69,4 +69,15 @@ $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, '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';