Merge remote-tracking branch 'origin/SLB-390-Truncate-long-breadcrumb…

…s' into dev
AmazeeLabs · Jun 19, 2024 · 0c7733b · 0c7733b
2 parents c296d9a + 2626958
commit 0c7733b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -40,12 +40,12 @@ export function BreadCrumbs() {
                   <div aria-hidden="true">
                     <ChevronRightIcon
                       className={
-                        'hidden sm:flex rotate-180 sm:rotate-0 w-4 h-4 text-gray-400 mr-4'
+                        'hidden xl:flex rotate-180 xl:rotate-0 w-4 h-4 text-gray-400 mr-4'
                       }
                     />
                   </div>
                   <button
-                    className="mr-4 hidden sm:flex items-center rounded-sm px-1 py-2 bg-gray-100 hover:bg-gray-200 h-2"
+                    className="mr-4 hidden xl:flex items-center rounded-sm px-1 py-2 bg-gray-100 hover:bg-gray-200 h-2"
                     onClick={() => {
                       setHideInnerBreadcrumbs(false);
                       setToggleMoreBreadcrumbs(true);
@@ -59,7 +59,7 @@ export function BreadCrumbs() {
                 className={clsx(
                   '',
                   index < breadcrumbs.length - 1
-                    ? 'hidden sm:inline-flex sm:items-center'
+                    ? 'hidden xl:inline-flex xl:items-center'
                     : 'inline-flex items-center',
                 )}
                 key={id}
@@ -76,7 +76,7 @@ export function BreadCrumbs() {
                   >
                     <ChevronRightIcon
                       className={
-                        'rotate-180 sm:rotate-0 w-4 h-4 text-gray-400 mr-4'
+                        'rotate-180 xl:rotate-0 w-4 h-4 text-gray-400 mr-4'
                       }
                     />
                   </div>
@@ -88,7 +88,7 @@ export function BreadCrumbs() {
                     'inline-flex items-center text-sm font-medium hover:text-blue-600 whitespace-nowrap',
                     index < breadcrumbs.length - 1 &&
                       hideInnerBreadcrumbs !== true
-                      ? 'hidden sm:inline-flex sm:items-center'
+                      ? 'hidden xl:inline-flex xl:items-center'
                       : 'inline-flex items-center',
                     hideInnerBreadcrumbs === true &&
                       index > 0 &&
@@ -108,7 +108,7 @@ export function BreadCrumbs() {
                     </svg>
                   )}
                   <span className="mr-4">
-                    {truncateString({ value: title, maxChar: 20 })}
+                    {truncateString({ value: title, maxChar: 25 })}
                   </span>
                 </Link>
               </li>

diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx
@@ -85,23 +85,6 @@ export const Idle = {
         ],
       },
     ],
-    metaNavigation: [
-      {
-        locale: Locale.En,
-        items: [
-          {
-            id: '1',
-            title: 'Imprint',
-            target: '/imprint' as Url,
-          },
-          {
-            id: '2',
-            title: 'Privacy',
-            target: '/privacy' as Url,
-          },
-        ],
-      },
-    ],
   },
 } satisfies StoryObj<FrameQuery>;
 

diff --git a/packages/ui/src/utils/stringTruncation.ts b/packages/ui/src/utils/stringTruncation.ts
@@ -13,12 +13,17 @@ export const truncateString = ({
   const words = value.split(' ');
 
   let result = '';
-  for (const word of words) {
+  words.forEach((word, index) => {
+    if (index === 0) {
+      // Skip the first word
+      result = word;
+      return;
+    }
     if (result.length + word.length + 1 > maxChar) {
-      break;
+      return;
     }
-    result += (result ? ' ' : '') + word;
-  }
+    result += ' ' + word;
+  });
 
   return result + '...';
 };