From d04ae3dc688fdd2686618e6bdd6df2d4926fadc9 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Fri, 13 Oct 2023 10:06:56 +0200
Subject: [PATCH] Docs(web, web-react, web-twig): Dealing with text truncate in
 Breadcrumb

refs #DS-960
---
 .../src/components/Breadcrumbs/README.md      |  5 +++++
 .../components/Breadcrumbs/README.md          |  9 ++++++++
 .../src/scss/components/Breadcrumbs/README.md | 21 +++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md
index 079245d809..f4e07ef028 100644
--- a/packages/web-react/src/components/Breadcrumbs/README.md
+++ b/packages/web-react/src/components/Breadcrumbs/README.md
@@ -91,4 +91,9 @@ Use the `BreadcrumbsItem` component for the ordered list as the component's chil
 | `UNSAFE_className` | `string`        | —               | ✕        | Wrapper custom class name                   |
 | `UNSAFE_style`     | `CSSProperties` | —               | ✕        | Wrapper custom style                        |
 
+### Dealing with long titles
+
+When you need to shorten the title of the BreadcrumbsItem you can use both helper class `text-truncate` or use any of the multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, e. g. `str.slice(0, num) + '...'`.
+You can also use any of the existing npm packages which deals with truncating the string.
+
 For detailed information see [Breadcrumbs](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Breadcrumbs/README.md) component
diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
index af0749dc14..f0b3cdac47 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/README.md
@@ -135,5 +135,14 @@ You can add `id`, `data-*` or `aria-*` attributes to further extend the componen
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
+### Dealing with long titles
+
+When you need to shorten the title of the BreadcrumbsItem you can use both helper class `text-truncate` or Twig's native implementation of text truncating using [`u` filter](https://twig.symfony.com/doc/3.x/filters/u.html).
+Please see the documentation for more details.
+
+```twig
+{{ 'Lorem ipsum'|u.truncate(8, '...') }}
+```
+
 [breadcrumbs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Breadcrumbs
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web/src/scss/components/Breadcrumbs/README.md b/packages/web/src/scss/components/Breadcrumbs/README.md
index 42fb4d1abe..67e161b683 100644
--- a/packages/web/src/scss/components/Breadcrumbs/README.md
+++ b/packages/web/src/scss/components/Breadcrumbs/README.md
@@ -1,5 +1,9 @@
 # Breadcrumbs
 
+Shows where the user is within the app hierarchy.
+
+## Usage
+
 ```html
 <nav aria-label="Breadcrumb" class="Breadcrumbs">
   <ol>
@@ -33,3 +37,20 @@
   </ol>
 </nav>
 ```
+
+### Dealing with long titles
+
+When you need to shorten the title of the Breadcrumbs item you can use a helper class `text-truncate`.
+
+```html
+<!-- ... --->
+<li class="d-none d-tablet-flex">
+  <svg class="Icon" width="24" height="24">
+    <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
+  </svg>
+  <a href="#currentUrl" aria-current="page" class="link-secondary text-truncate"
+    >This is a very long title of the current page</a
+  >
+</li>
+<!-- ... --->
+```