From 9adcce22cf81a645c93668cae2e5f86c9f6a3149 Mon Sep 17 00:00:00 2001 From: Vasile Chindris Date: Mon, 29 Apr 2024 17:25:04 +0300 Subject: [PATCH 01/46] feat(SLB-292): horizontal separator gutenberg block --- .../src/blocks/horizontal-separator.tsx | 21 +++++++++++++++++++ packages/drupal/gutenberg_blocks/src/index.ts | 1 + .../a397ca48-8fad-411e-8901-0eba2feb989c.yml | 2 ++ packages/schema/src/fragments/Page.gql | 1 + .../PageContent/BlockHorizontalSeparator.gql | 5 +++++ packages/schema/src/schema.graphql | 5 +++++ .../BlockHorizontalSeparator.stories.ts | 11 ++++++++++ .../PageContent/BlockHorizontalSeparator.tsx | 5 +++++ .../src/components/Organisms/PageDisplay.tsx | 3 +++ tests/e2e/specs/drupal/blocks.spec.ts | 3 +++ tests/schema/specs/blocks.spec.ts | 6 ++++++ 11 files changed, 63 insertions(+) create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx create mode 100644 packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql create mode 100644 packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts create mode 100644 packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx diff --git a/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx b/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx new file mode 100644 index 000000000..720094b1f --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx @@ -0,0 +1,21 @@ +import { registerBlockType } from 'wordpress__blocks'; +import { compose, withState } from 'wordpress__compose'; + +declare const Drupal: { t: (s: string) => string }; + +const { t: __ } = Drupal; + +// @ts-ignore +registerBlockType(`custom/horizontal-separator`, { + title: __('Horizontal separator'), + icon: 'minus', + category: 'text', + attributes: {}, + // @ts-ignore + edit: compose(withState())(() => { + return
; + }), + save() { + return null; + }, +}); diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts index 2763bdad8..2c86b28df 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -9,3 +9,4 @@ import './blocks/image-with-text'; import './filters/list'; import './blocks/cta'; import './blocks/quote'; +import './blocks/horizontal-separator'; diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml index dd286b895..25830e9fb 100644 --- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml +++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml @@ -55,6 +55,8 @@ default:

A standalone paragraph with markup and link

+ + diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql index cbf2227eb..3ecddb3c9 100644 --- a/packages/schema/src/fragments/Page.gql +++ b/packages/schema/src/fragments/Page.gql @@ -35,6 +35,7 @@ fragment Page on Page { ...BlockCta ...BlockImageWithText ...BlockQuote + ...BlockHorizontalSeparator } metaTags { tag diff --git a/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql b/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql new file mode 100644 index 000000000..ef992a139 --- /dev/null +++ b/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql @@ -0,0 +1,5 @@ +fragment BlockHorizontalSeparator on BlockHorizontalSeparator { + # This is not really used, but until we have other real setting fields, we + # have to provide a dummy one. + markup +} diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index e2034acb5..179240b49 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -206,6 +206,7 @@ union PageContent @resolveEditorBlockType = | BlockCta | BlockImageWithText | BlockQuote + | BlockHorizontalSeparator type BlockForm @type(id: "custom/form") { url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$") @@ -283,6 +284,10 @@ type BlockQuote @type(id: "custom/quote") { image: MediaImage @resolveEditorBlockMedia } +type BlockHorizontalSeparator @type(id: "custom/horizontal-separator") { + markup: Markup! @resolveEditorBlockMarkup +} + input PaginationInput { limit: Int! offset: Int! diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts new file mode 100644 index 000000000..006c3158f --- /dev/null +++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts @@ -0,0 +1,11 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { BlockHorizontalSeparator } from './BlockHorizontalSeparator'; + +export default { + component: BlockHorizontalSeparator, +} satisfies Meta; + +export const HorizontalSeparator = { + args: {}, +} satisfies StoryObj; diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx new file mode 100644 index 000000000..4d5308927 --- /dev/null +++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export function BlockHorizontalSeparator() { + return
; +} diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx index 86813de03..f5b15c390 100644 --- a/packages/ui/src/components/Organisms/PageDisplay.tsx +++ b/packages/ui/src/components/Organisms/PageDisplay.tsx @@ -6,6 +6,7 @@ import { UnreachableCaseError } from '../../utils/unreachable-case-error'; import { PageTransition } from '../Molecules/PageTransition'; import { BlockCta } from './PageContent/BlockCta'; import { BlockForm } from './PageContent/BlockForm'; +import { BlockHorizontalSeparator } from './PageContent/BlockHorizontalSeparator'; import { BlockMarkup } from './PageContent/BlockMarkup'; import { BlockMedia } from './PageContent/BlockMedia'; import { BlockQuote } from './PageContent/BlockQuote'; @@ -60,6 +61,8 @@ export function PageDisplay(page: PageFragment) { ); case 'BlockQuote': return
; + case 'BlockHorizontalSeparator': + return ; default: throw new UnreachableCaseError(block); } diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts index 5124a81b2..732cddb7f 100644 --- a/tests/e2e/specs/drupal/blocks.spec.ts +++ b/tests/e2e/specs/drupal/blocks.spec.ts @@ -22,6 +22,9 @@ test('All blocks are rendered', async ({ page }) => { page.locator('a:text("link")[href="/en/architecture"]'), ).toHaveCount(1); + // Horizontal separator. + await expect(page.locator('hr')).toHaveCount(1); + // Image await expect( page.locator( diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index ce85d8164..6b1b0f714 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -73,6 +73,9 @@ test('Blocks', async () => { __typename } } + ... on BlockHorizontalSeparator { + __typename + } } } { @@ -108,6 +111,9 @@ test('Blocks', async () => {

A standalone paragraph with markup and link

", }, + { + "__typename": "BlockHorizontalSeparator", + }, { "__typename": "BlockMedia", "caption": "Media image", From ea7d53953310ce84f7c9c821fd46e817c731679b Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Thu, 2 May 2024 15:53:24 +0200 Subject: [PATCH 02/46] style: add hr style --- .../Organisms/PageContent/BlockHorizontalSeparator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx index 4d5308927..6a3922e8a 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx @@ -1,5 +1,5 @@ import React from 'react'; export function BlockHorizontalSeparator() { - return
; + return
; } From 8afab945a5b487db01bfe3d530809878f2ff0dcf Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 15 May 2024 08:35:34 +0200 Subject: [PATCH 03/46] style: adjust content width --- .../Organisms/PageContent/BlockHorizontalSeparator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx index 6a3922e8a..a4bc3311b 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx @@ -1,5 +1,5 @@ import React from 'react'; export function BlockHorizontalSeparator() { - return
; + return
; } From a81793c8da534aa36d505f0c20440aa06fd98209 Mon Sep 17 00:00:00 2001 From: HagerDakroury Date: Wed, 15 May 2024 13:27:32 +0300 Subject: [PATCH 04/46] chore(SLB-288): move content container to blocks --- .../ui/src/components/Atoms/Container.css | 2 +- .../Organisms/PageContent/BlockCta.tsx | 26 ++++--- .../Organisms/PageContent/BlockForm.tsx | 2 +- .../Organisms/PageContent/BlockMedia.tsx | 2 +- .../Organisms/PageContent/BlockQuote.tsx | 76 ++++++++++--------- .../src/components/Organisms/PageDisplay.tsx | 2 +- 6 files changed, 57 insertions(+), 53 deletions(-) diff --git a/packages/ui/src/components/Atoms/Container.css b/packages/ui/src/components/Atoms/Container.css index 5bd018f50..b30f83468 100644 --- a/packages/ui/src/components/Atoms/Container.css +++ b/packages/ui/src/components/Atoms/Container.css @@ -3,7 +3,7 @@ } .container-content { - @apply mx-auto max-w-7xl; + @apply mx-auto max-w-3xl; } .container-text { diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx index cdf574951..9a43189f9 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx @@ -10,18 +10,20 @@ import React from 'react'; export function BlockCta(props: BlockCtaFragment) { return ( - - {props.text} - {!!props.icon && props.icon === CtaIconType.Arrow && } - +
+ + {props.text} + {!!props.icon && props.icon === CtaIconType.Arrow && } + +
); } diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx index 8ee6770a1..d1a20a28e 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx @@ -19,7 +19,7 @@ export function BlockForm( } return ( -
+
-
+
{props.caption ? (
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index c99955e06..6cea70774 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -3,45 +3,47 @@ import React from 'react'; export function BlockQuote(props: BlockQuoteFragment) { return ( -
-
- - Quote Symbol - - -

{props.quote && }

-
- {props.image && ( - {props.image.alt +
+
+ + Quote Symbol + - )} -
- {props.author &&

{props.author}

} + +

{props.quote && }

+
+ {props.image && ( + {props.image.alt + )} +
+ {props.author &&

{props.author}

} +
+ {props.role && ( +

+ / + + {props.role} + +

+ )}
- {props.role && ( -

- / - - {props.role} - -

- )} -
-
+
+
); } diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx index 86813de03..cc6a4cff1 100644 --- a/packages/ui/src/components/Organisms/PageDisplay.tsx +++ b/packages/ui/src/components/Organisms/PageDisplay.tsx @@ -17,7 +17,7 @@ export function PageDisplay(page: PageFragment) {
{page.hero ? : null}
-
+
{page?.content?.filter(isTruthy).map((block, index) => { switch (block.__typename) { case 'BlockMedia': From cedf26536877f6adb05619604852d195a90603dd Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 7 May 2024 16:54:05 +0200 Subject: [PATCH 05/46] feat: breadcrumbs implementation --- .../Molecules/Breadcrumbs.stories.tsx | 24 +++++ .../src/components/Molecules/Breadcrumbs.tsx | 66 ++++++++++++++ packages/ui/src/components/Routes/Menu.tsx | 90 +++++++++++++++++++ 3 files changed, 180 insertions(+) create mode 100644 packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx create mode 100644 packages/ui/src/components/Molecules/Breadcrumbs.tsx create mode 100644 packages/ui/src/components/Routes/Menu.tsx diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx new file mode 100644 index 000000000..a0ca464d7 --- /dev/null +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -0,0 +1,24 @@ +import { FrameQuery, OperationExecutor } from '@custom/schema'; +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { Default as FrameStory } from '../Routes/Frame.stories'; +import BreadCrumbs from './Breadcrumbs'; + +export default { + component: BreadCrumbs, + parameters: { + layout: 'fullscreen', + location: { pathname: '/gatsby-turbo' }, + }, +} satisfies StoryObj; + +export const Default = { + render: () => { + return ( + + + + ); + }, +}; diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx new file mode 100644 index 000000000..7f0811eb4 --- /dev/null +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -0,0 +1,66 @@ +import { Link } from '@custom/schema'; +import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import clsx from 'clsx'; +import React from 'react'; + +import { isTruthy } from '../../utils/isTruthy'; +import { useBreadcrumbs } from '../Routes/Menu'; + +export default function BreadCrumbs({ + bgCol = 'gray-50', + className, +}: { + bgCol?: string; + className?: string; +}) { + const breadcrumbs = useBreadcrumbs(); + + console.log('breadcrumbs:', breadcrumbs); + + if (!breadcrumbs.length) { + console.log('breadcrumbs null:'); + return null; + } + + return ( + + ); +} diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx new file mode 100644 index 000000000..2721f1a90 --- /dev/null +++ b/packages/ui/src/components/Routes/Menu.tsx @@ -0,0 +1,90 @@ +import { FrameQuery, NavigationItem, Url, useLocation } from '@custom/schema'; +import { useIntl } from 'react-intl'; + +import { useOperation } from '../../utils/operation'; + +export type MenuNameType = 'main' | 'footer'; + +export function useMenus() { + const intl = useIntl(); + const locale = intl.locale; + const settings = useOperation(FrameQuery).data; + return { + main: settings?.mainNavigation + ?.filter((nav) => nav?.locale === locale) + .pop(), + footer: settings?.footerNavigation + ?.filter((nav) => nav?.locale === locale) + .pop(), + }; +} + +export function useCurrentPath() { + const [loc] = useLocation(); + return loc.pathname; +} + +export function useMenuItem(path: string, menuName: MenuNameType) { + const menus = useMenus(); + return ( + menus && + menus[menuName]?.items.find((menuItem) => menuItem?.target === path) + ); +} + +export function useMenuChildren(path: string, menuName: MenuNameType) { + const menus = useMenus(); + const menuItemFromPath = useMenuItem(path, menuName); + return ( + menus && + menus[menuName]?.items.filter( + (menuItem) => menuItem?.parent === menuItemFromPath?.id, + ) + ); +} + +export function useCurrentMenuItem(menuName: MenuNameType) { + const currentPath = useCurrentPath(); + return useMenuItem(currentPath || '', menuName); +} + +export function useCurrentMenuChildren(menuName: MenuNameType) { + const currentPath = useCurrentPath(); + return useMenuChildren(currentPath || '', menuName); +} + +export function useMenuAncestors(path: string, menuName: MenuNameType) { + const menus = useMenus(); + const menuItemFromPath = useMenuItem(path, menuName); + let processingMenuItem = menuItemFromPath; + const ancestors: Array = []; + + // Set current page breadcrumb + if (typeof processingMenuItem !== 'undefined') { + ancestors.push(processingMenuItem); + } + + while ( + typeof processingMenuItem !== 'undefined' && + processingMenuItem?.parent + ) { + processingMenuItem = + menus && + menus[menuName]?.items.find( + (menuItem) => menuItem?.id === processingMenuItem?.parent, + ); + if (typeof processingMenuItem !== 'undefined') { + ancestors.push(processingMenuItem); + } + } + if (ancestors.length > 0) { + ancestors.push({ id: '_', target: '/' as Url, title: 'Home' }); + } + + return ancestors.reverse(); +} + +export const useBreadcrumbs = (menuName?: MenuNameType, path?: string) => { + const currentPath = useCurrentPath(); + return useMenuAncestors(path || currentPath || '', menuName || 'main'); +}; From 957d435edf6517f40468d37b0bd0125171dc32cb Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Tue, 7 May 2024 20:20:23 +0200 Subject: [PATCH 06/46] feat: wip --- .../components/Molecules/Breadcrumbs.stories.tsx | 6 +++--- .../ui/src/components/Molecules/Breadcrumbs.tsx | 13 ++----------- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index a0ca464d7..81dd002ba 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, StoryObj } from '@storybook/react'; +import { Meta } from '@storybook/react'; import React from 'react'; import { Default as FrameStory } from '../Routes/Frame.stories'; @@ -9,9 +9,9 @@ export default { component: BreadCrumbs, parameters: { layout: 'fullscreen', - location: { pathname: '/gatsby-turbo' }, + location: new URL('local:/gatsby-turbo'), }, -} satisfies StoryObj; +} satisfies Meta; export const Default = { render: () => { diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index 7f0811eb4..f057661ce 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,19 +6,10 @@ import React from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; -export default function BreadCrumbs({ - bgCol = 'gray-50', - className, -}: { - bgCol?: string; - className?: string; -}) { +export default function BreadCrumbs({ className }: { className?: string }) { const breadcrumbs = useBreadcrumbs(); - console.log('breadcrumbs:', breadcrumbs); - if (!breadcrumbs.length) { - console.log('breadcrumbs null:'); return null; } @@ -27,7 +18,7 @@ export default function BreadCrumbs({ className={clsx('pt-5 max-w-screen-xl mx-auto', className)} aria-label="Breadcrumb" > -
    +
      {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
    1. {index > 0 ? ( From 755ccd76166fe3125d64efa95f6cca10473cf36d Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 8 May 2024 09:39:42 +0200 Subject: [PATCH 07/46] feat: wip --- .../Molecules/Breadcrumbs.stories.tsx | 2 +- .../src/components/Molecules/Breadcrumbs.tsx | 9 +++---- .../src/components/Organisms/PageDisplay.tsx | 10 +++++++- packages/ui/src/components/Routes/Menu.tsx | 4 ++- .../ui/src/components/Routes/Page.stories.tsx | 25 ++++++++++++++----- 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx index 81dd002ba..9a7c6d0e5 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx @@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Default as FrameStory } from '../Routes/Frame.stories'; -import BreadCrumbs from './Breadcrumbs'; +import { BreadCrumbs } from './Breadcrumbs'; export default { component: BreadCrumbs, diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx index f057661ce..0efa3eb61 100644 --- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx +++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { useBreadcrumbs } from '../Routes/Menu'; -export default function BreadCrumbs({ className }: { className?: string }) { +export function BreadCrumbs({ className }: { className?: string }) { const breadcrumbs = useBreadcrumbs(); if (!breadcrumbs.length) { @@ -14,11 +14,8 @@ export default function BreadCrumbs({ className }: { className?: string }) { } return ( -