chore(docs): group text truncation doc with other text utilities

.changeset/loose-times-attend.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Grouped the text truncation documentation with other text utilities.

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

@@ -109,3 +109,9 @@ Transform text with the following text capitalization classes: `.text-lowercase`
 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" />
+
+### Text Truncation
+
+The `.text-truncate` class helps in truncating long text when it exceeds a specified width.
+
+<Canvas sourceState="shown" of={TextStories.TextTruncation} />

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

@@ -82,9 +82,19 @@ function getTextUtility(type: string) {
             `,
         )}
       `;
+    case 'Text Truncation':
+      return html`
+        ${[100, 200, 300, 400].map(
+          val =>
+            html`
+              <p class="text-truncate" style="max-width: ${val}px">
+                This is a long text that should be truncated when it exceeds the defined max-width.
+              </p>
+            `,
+        )}
+      `;
   }
 }
-
 export const Text: Story = {
   render: () => {
     return schemes(
@@ -101,6 +111,7 @@ export const Text: Story = {
           'Text transform',
           'White space',
           'Word wrap break',
+          'Text Truncation',
         ].map(
           val => html`
             <h2>${val}</h2>

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

@@ -109,10 +109,20 @@ export const TextDecoration: Story = {
     <a href="#" class="text-decoration-none">This link has its text decoration removed.</a>
   `,
 };
+
+export const TextTruncation: StoryObj = {
+  render: () => html`
+    <p class="text-truncate" style="max-width: 200px">
+      This is a long text that should be truncated when it exceeds the defined max-width.
+    </p>
+  `,
+};
+
 export const SmallText: StoryObj = {
   render: () => html`
     <p>This is normal text</p>
     <p class="small">This is small text (80% of parent font size)</p>
     <h2>This is a title with <span class="small">smaller text inside</span></h2>
   `,
 };
+