From 81b0d729ba99070301eb12007188df4ff22c1368 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Mon, 3 Jun 2024 13:21:59 +0000 Subject: [PATCH 1/9] refactor(SLB-390): add string truncation utility and mobile adjustemnts --- .../src/components/Molecules/Breadcrumbs.tsx | 23 +++++++++++++++---- packages/ui/src/helpers/string-truncation.ts | 18 +++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 packages/ui/src/helpers/string-truncation.ts diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 734051bc6..fb20997d0 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,6 +6,7 @@ import { import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; +import { truncateString } from '../../helpers/string-truncation'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; @@ -39,12 +40,12 @@ export function BreadCrumbs() { )} -
  • +
  • {index > 0 ? (
    • diff --git a/packages/ui/src/helpers/string-truncation.ts b/packages/ui/src/helpers/string-truncation.ts new file mode 100644 index 000000000..f1feff2e2 --- /dev/null +++ b/packages/ui/src/helpers/string-truncation.ts @@ -0,0 +1,18 @@ +export const truncateString = ({ value, maxChar }: { value: string; maxChar: number }): string => { + if (value.length <= maxChar) { + return value; + } + + // Split the string into words + const words = value.split(' '); + + let result = ''; + for (const word of words) { + if (result.length + word.length + 1 > maxChar) { + break; + } + result += (result ? ' ' : '') + word; + } + + return result + '...'; +}; From 52b5407b1c602135149b85dda6ffb089d4db8d7b Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Mon, 3 Jun 2024 13:36:39 +0000 Subject: [PATCH 2/9] chore(SLB-390): prettier --- packages/ui/src/helpers/string-truncation.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/helpers/string-truncation.ts b/packages/ui/src/helpers/string-truncation.ts index f1feff2e2..a4bbb6e6a 100644 --- a/packages/ui/src/helpers/string-truncation.ts +++ b/packages/ui/src/helpers/string-truncation.ts @@ -1,4 +1,10 @@ -export const truncateString = ({ value, maxChar }: { value: string; maxChar: number }): string => { +export const truncateString = ({ + value, + maxChar, +}: { + value: string; + maxChar: number; +}): string => { if (value.length <= maxChar) { return value; } From 1a017842f3c24b64a2293f57df6be262526b2b35 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Mon, 3 Jun 2024 13:42:45 +0000 Subject: [PATCH 3/9] chore(SLB-390): move module --- packages/ui/src/components/Molecules/Breadcrumbs.tsx | 2 +- .../{helpers/string-truncation.ts => utils/stringTruncation.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/ui/src/{helpers/string-truncation.ts => utils/stringTruncation.ts} (100%) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index fb20997d0..6d17d7194 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,8 +6,8 @@ import { import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; -import { truncateString } from '../../helpers/string-truncation'; import { isTruthy } from '../../utils/isTruthy'; +import { truncateString } from '../../utils/stringTruncation'; import { useBreadcrumbs } from '../Routes/Menu'; export function BreadCrumbs() { diff --git a/packages/ui/src/helpers/string-truncation.ts b/packages/ui/src/utils/stringTruncation.ts similarity index 100% rename from packages/ui/src/helpers/string-truncation.ts rename to packages/ui/src/utils/stringTruncation.ts From a114ae43b891345b990518e264459a4652deae33 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 4 Jun 2024 07:23:15 +0000 Subject: [PATCH 4/9] chore(SLB-390): update test breadcrumbs stories --- .../Molecules/Breadcrumbs.stories.tsx | 2 +- .../components/Organisms/Header.stories.tsx | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index 9a7c6d0e5..9ea35467c 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -9,7 +9,7 @@ export default { component: BreadCrumbs, parameters: { layout: 'fullscreen', - location: new URL('local:/gatsby-turbo'), + location: new URL('local:/gatsby-turbo-more-more-more'), }, } satisfies Meta; diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx index 8450caff8..51f5dc6b2 100644 --- a/packages/ui/src/components/Organisms/Header.stories.tsx +++ b/packages/ui/src/components/Organisms/Header.stories.tsx @@ -60,15 +60,27 @@ export const Idle = { }, { id: '7', - title: 'Gatsby Turbo', + title: 'Gatsby Turbo This is a little extra long dude man', target: '/gatsby-turbo' as Url, parent: '6', }, { id: '8', title: 'Super Gatsby Turbo', - target: '/gatsby-turbo' as Url, - parent: '6', + target: '/gatsby-turbo-more' as Url, + parent: '7', + }, + { + id: '9', + title: 'Drupal Turbo This is a little extra long', + target: '/gatsby-turbo-more-more' as Url, + parent: '8', + }, + { + id: '10', + title: 'Drupal Turbo This is a little extra long breadcrumb title', + target: '/gatsby-turbo-more-more-more' as Url, + parent: '9', }, ], }, From f5067bfc13ac5cf0b5e3d688917f18c3b4355851 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 4 Jun 2024 07:48:43 +0000 Subject: [PATCH 5/9] chore(SLB-390): update test story args --- packages/ui/src/components/Organisms/Header.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx index 51f5dc6b2..35116c6d1 100644 --- a/packages/ui/src/components/Organisms/Header.stories.tsx +++ b/packages/ui/src/components/Organisms/Header.stories.tsx @@ -67,7 +67,7 @@ export const Idle = { { id: '8', title: 'Super Gatsby Turbo', - target: '/gatsby-turbo-more' as Url, + target: '/gatsby-turbo' as Url, parent: '7', }, { From 4751ce6bcff01184e1aeec07d726b11a6b8ef3a6 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 4 Jun 2024 07:54:32 +0000 Subject: [PATCH 6/9] chore(SLB-390): add more breadcrumb variants --- .../Molecules/Breadcrumbs.stories.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index 9ea35467c..6fafb4f0a 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -1,5 +1,5 @@ import { FrameQuery, OperationExecutor } from '@custom/schema'; -import { Meta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { Default as FrameStory } from '../Routes/Frame.stories'; @@ -9,11 +9,7 @@ export default { component: BreadCrumbs, parameters: { layout: 'fullscreen', - location: new URL('local:/gatsby-turbo-more-more-more'), }, -} satisfies Meta; - -export const Default = { render: () => { return ( @@ -21,4 +17,16 @@ export const Default = { ); }, +} satisfies Meta; + +export const Simple = { + parameters: { + location: new URL('local:/gatsby-turbo'), + }, +}; + +export const Truncated: StoryObj = { + parameters: { + location: new URL('local:/gatsby-turbo-more-more-more'), + }, }; From 37c09754f502e27ac77b577682fb7c56a3efff8a Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 4 Jun 2024 08:04:08 +0000 Subject: [PATCH 7/9] chore(SLB-390): fix tests --- packages/ui/src/components/Organisms/Header.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx index 35116c6d1..c895dfe2e 100644 --- a/packages/ui/src/components/Organisms/Header.stories.tsx +++ b/packages/ui/src/components/Organisms/Header.stories.tsx @@ -60,7 +60,7 @@ export const Idle = { }, { id: '7', - title: 'Gatsby Turbo This is a little extra long dude man', + title: 'Gatsby Turbo', target: '/gatsby-turbo' as Url, parent: '6', }, From 317b64c4170211f77104a39b23ebf8a7c43c287f Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 5 Jun 2024 13:38:10 +0000 Subject: [PATCH 8/9] refactor(SLB-405): change opacity prop styule --- packages/ui/src/components/Molecules/FadeUp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx index 08e81b378..cd21940d8 100644 --- a/packages/ui/src/components/Molecules/FadeUp.tsx +++ b/packages/ui/src/components/Molecules/FadeUp.tsx @@ -32,7 +32,7 @@ export function FadeUp({ From a7f1725df649d3d313ee61e878f739979a84c861 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 19 Jun 2024 12:55:33 +0000 Subject: [PATCH 9/9] feat(SLB-390): adjust truncation logic --- .../ui/src/components/Molecules/Breadcrumbs.tsx | 12 ++++++------ packages/ui/src/utils/stringTruncation.ts | 13 +++++++++---- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 6d17d7194..da1cd2759 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -40,12 +40,12 @@ export function BreadCrumbs() {