feat(styles): implemented Bootsrap typography classes to DS

.changeset/long-walls-greet.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Moved the Bootstrap `.text-start`, `.text-center` and `.text-end` helper classes to design system styles.

.changeset/orange-bears-relate.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Implemented `.fs-small`, `.fs-regular` and `.fs-large` helper classes and documented them.

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

@@ -35,6 +35,16 @@ The font style classes available are `.fst-normal` and `.fst-italic`.
 
 <Canvas of={TextStories.FontStyle} sourceState="shown" />
 
+### Font Size
+
+<div class="alert alert-warning">
+`.small` class for font-size is deprecated and will be replaced with `.fs-small`.
+</div>
+
+The font size classes available are `.fs-small`, `.fs-regular`, and `.fs-large`.
+
+<Canvas of={TextStories.TextSize} sourceState="shown" />
+
 ### Line Heights
 
 The line height classes available are `.lh-1`, `.lh-sm` and `.lh-lg`.

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

@@ -30,6 +30,12 @@ function getTextUtility(type: string) {
           (val: string) => html`<p class="fw-${val}">Font weight ${val}</p>`,
         )}
       `;
+    case 'Text Size':
+      return html`
+        ${['small', 'regular', 'large'].map(
+          val => html`<p class="fs-${val}">This text has a ${val} font size.</p>`,
+        )}
+      `;
     case 'Line height':
       return html`
         ${['1', 'sm', 'lg'].map(

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

@@ -35,6 +35,14 @@ export const FontStyle: Story = {
     `,
 };
 
+export const TextSize: Story = {
+  render: () => html`
+    <p class="fs-small">This text has a small font size.</p>
+    <p class="fs-regular">This text has a regular font size.</p>
+    <p class="fs-large">This text has a large font size.</p>
+  `,
+};
+
 export const LineHeight: Story = {
   render: () =>
     html`

packages/styles/src/helpers/_index.scss

@@ -1,3 +1,5 @@
 @use 'clearfix';
 @use 'visually-hidden';
 @use 'focus-ring';
+@use 'text-align';
+@use 'text-size';

packages/styles/src/helpers/text-align.scss

@@ -0,0 +1,11 @@
+.text-start {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-end {
+  text-align: right !important;
+}

packages/styles/src/helpers/text-size.scss

@@ -0,0 +1,17 @@
+@use './../tokens/utilities' as utilities;
+@use './../functions/tokens' as tokens;
+
+tokens.$default-map: utilities.$post-typo;
+
+.small,
+.fs-small {
+  font-size: tokens.get('utility-font-size-sm');
+}
+
+.fs-regular {
+  font-size: tokens.get('utility-font-size-md');
+}
+
+.fs-large {
+  font-size: tokens.get('utility-font-size-lg');
+}