From 1d9a3367b864fe5b85a9b4474c6cd4498bc66fcf Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Fri, 31 May 2024 14:10:55 +0000 Subject: [PATCH 01/11] feat(SLB-390): load more breadcrumbs --- .../src/components/Molecules/Breadcrumbs.tsx | 75 +++++++++++-------- packages/ui/src/components/Routes/Menu.tsx | 4 +- 2 files changed, 45 insertions(+), 34 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 431291137..87ce3548c 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -1,13 +1,19 @@ import { Link } from '@custom/schema'; -import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import { ChevronRightIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; export function BreadCrumbs() { const breadcrumbs = useBreadcrumbs(); + const [hideInnerBreadcrumbs, setHideInnerBreadcrumbs] = useState(false); + const [toggleMoreBreadcrumbs, setToggleMoreBreadcrumbs] = useState(false); + + useEffect(()=> { + breadcrumbs.length > 5 && toggleMoreBreadcrumbs === false && setHideInnerBreadcrumbs(true) + }, [hideInnerBreadcrumbs, breadcrumbs, toggleMoreBreadcrumbs]) if (!breadcrumbs.length) { return null; @@ -16,38 +22,41 @@ export function BreadCrumbs() { return (
diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx index 17c733fc2..ce1243d13 100644 --- a/packages/ui/src/components/Routes/Menu.tsx +++ b/packages/ui/src/components/Routes/Menu.tsx @@ -82,9 +82,11 @@ export function useMenuAncestors(path: string, menuName: MenuNameType) { } if (ancestors.length > 0) { ancestors.push({ id: '_', target: '/' as Url, title: 'Home' }); + // Pop off the current path, we dont care about it + ancestors.reverse().pop(); } - return ancestors.reverse(); + return ancestors; } export const useBreadcrumbs = (menuName?: MenuNameType, path?: string) => { From 5de2f823686eb1013650207522e68362c48456d9 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Fri, 31 May 2024 14:12:11 +0000 Subject: [PATCH 02/11] feat(SLB-390): prettier --- .../src/components/Molecules/Breadcrumbs.tsx | 63 +++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 87ce3548c..734051bc6 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -1,5 +1,8 @@ import { Link } from '@custom/schema'; -import { ChevronRightIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'; +import { + ChevronRightIcon, + EllipsisHorizontalIcon, +} from '@heroicons/react/24/outline'; import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; @@ -11,9 +14,11 @@ export function BreadCrumbs() { const [hideInnerBreadcrumbs, setHideInnerBreadcrumbs] = useState(false); const [toggleMoreBreadcrumbs, setToggleMoreBreadcrumbs] = useState(false); - useEffect(()=> { - breadcrumbs.length > 5 && toggleMoreBreadcrumbs === false && setHideInnerBreadcrumbs(true) - }, [hideInnerBreadcrumbs, breadcrumbs, toggleMoreBreadcrumbs]) + useEffect(() => { + breadcrumbs.length > 5 && + toggleMoreBreadcrumbs === false && + setHideInnerBreadcrumbs(true); + }, [hideInnerBreadcrumbs, breadcrumbs, toggleMoreBreadcrumbs]); if (!breadcrumbs.length) { return null; @@ -22,24 +27,60 @@ export function BreadCrumbs() { return (
+ + + )}
  • {index > 0 ? ( -
  • +
  • {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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 08/11] 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 09/11] 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 a7f1725df649d3d313ee61e878f739979a84c861 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 19 Jun 2024 12:55:33 +0000 Subject: [PATCH 10/11] 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() {
    @@ -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() { )} - {truncateString({ value: title, maxChar: 20 })} + {truncateString({ value: title, maxChar: 25 })} diff --git a/packages/ui/src/utils/stringTruncation.ts b/packages/ui/src/utils/stringTruncation.ts index a4bbb6e6a..a3e14488c 100644 --- 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 + '...'; }; From b79111fc713f9797c3f8af4a8ac78858a09b86ff Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 19 Jun 2024 15:36:40 +0200 Subject: [PATCH 11/11] chore: add a11y exceptions --- packages/ui/.storybook/preview.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx index 26d96ce3e..371952850 100644 --- a/packages/ui/.storybook/preview.tsx +++ b/packages/ui/.storybook/preview.tsx @@ -102,6 +102,14 @@ export const parameters = { id: 'landmark-unique', reviewOnFail: true, }, + { + id: 'button-name', + reviewOnFail: true, + }, + { + id: 'list', + reviewOnFail: true, + }, ], }, // Axe's options parameter