Docs(web, web-react, web-twig): Dealing with text truncate in Breadcrumb

refs #DS-960
lmc-eu · Oct 16, 2023 · d04ae3d · d04ae3d
1 parent 9cfc538
commit d04ae3d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>
+<!-- ... --->
+```