From 609e1e8bf29d692dd85813c11111389af963cbda Mon Sep 17 00:00:00 2001 From: Borghild Date: Fri, 3 May 2024 10:36:15 +0200 Subject: [PATCH 1/4] :art: update old breadcrumb logic --- .../Breadcrumbs/BreadcrumbsInput.tsx | 7 +- .../src/Breadcrumbs/BreadcrumbList.tsx | 6 +- .../src/Breadcrumbs/BreadcrumbListItem.tsx | 3 +- web/core/Breadcrumbs/index.tsx | 101 ------------------ web/lib/queries/common/breadcrumbs.ts | 8 -- .../pageTemplates/TopicPage.tsx | 39 +------ web/pageComponents/topicPages/Breadcrumbs.tsx | 84 +++++---------- web/tailwind.config.cjs | 16 +-- 8 files changed, 46 insertions(+), 218 deletions(-) delete mode 100644 web/core/Breadcrumbs/index.tsx diff --git a/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx b/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx index 0bcb36a28..2815fbbd5 100644 --- a/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx +++ b/sanityv3/schemas/components/Breadcrumbs/BreadcrumbsInput.tsx @@ -17,15 +17,16 @@ export const BreadcrumbsInput = (props: BreadCrumbsInputProps) => { const client = useClient({ apiVersion: apiVersion }) const slug = useFormValue([`slug`]) as SlugValue const parent = useFormValue([`parent`]) as Reference + const topicSlug = useFormValue([`topicSlug`])?.toString() const [breadcrumbs, setBreadcrumbs] = useState([]) const [defaultBreadcrumbs, setDefaultBreadcrumbs] = useState( - constructBreadcrumbs('home', slug?.current || ''), + constructBreadcrumbs('home', topicSlug ?? slug?.current ?? ''), ) useEffect(() => { if (slug?.current) { - setDefaultBreadcrumbs(constructBreadcrumbs('home', slug.current)) + setDefaultBreadcrumbs(constructBreadcrumbs('home', topicSlug ?? slug?.current)) } }, [slug, parent, setDefaultBreadcrumbs]) @@ -46,7 +47,7 @@ export const BreadcrumbsInput = (props: BreadCrumbsInputProps) => { return setBreadcrumbs( constructBreadcrumbs( 'home', - slug.current, + topicSlug ?? slug?.current, orderedResults.map((item: { slug: string }) => item.slug), ), ) diff --git a/web/components/src/Breadcrumbs/BreadcrumbList.tsx b/web/components/src/Breadcrumbs/BreadcrumbList.tsx index 8f5e976ca..725a34148 100644 --- a/web/components/src/Breadcrumbs/BreadcrumbList.tsx +++ b/web/components/src/Breadcrumbs/BreadcrumbList.tsx @@ -1,10 +1,10 @@ import { forwardRef, HTMLAttributes } from 'react' import { List as EdsList } from '@equinor/eds-core-react' import styled from 'styled-components' +import { twMerge } from 'tailwind-merge' const List = styled(EdsList)` list-style: none; - padding: 0; font-size: var(--typeScale-05); line-height: var(--lineHeight-3); font-weight: var(--fontWeight-medium); @@ -13,11 +13,11 @@ const List = styled(EdsList)` export type BreadcrumbsProps = HTMLAttributes export const BreadcrumbsList = forwardRef(function Breadcrumbs( - { children, ...rest }, + { children, className = '', ...rest }, forwardedRef, ) { return ( - + {children} ) diff --git a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx index 77ad26dfd..4d45888f7 100644 --- a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx +++ b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx @@ -19,6 +19,7 @@ const StyledListItem = styled(EdsItem)` &:last-child { font-weight: var(--fontWeight-medium); + color: var(--breadcrumbs-inactive-color); &:after { content: ''; @@ -31,7 +32,7 @@ export const BreadcrumbsListItem = forwardRef + {children} ) diff --git a/web/core/Breadcrumbs/index.tsx b/web/core/Breadcrumbs/index.tsx deleted file mode 100644 index 5fdbbc93d..000000000 --- a/web/core/Breadcrumbs/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { BreadcrumbJsonLd } from 'next-seo' -import { useRouter } from 'next/router' -import type { NextRouter } from 'next/router' -import { getFullUrl } from '../../common/helpers/getFullUrl' -import { Breadcrumb } from '../../types' -import { HTMLAttributes } from 'react' -import { Link } from '@core/Link' -import { twMerge } from 'tailwind-merge' -import { BackgroundContainer, BackgroundContainerProps } from '@components/Backgrounds' - -const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => { - const { pathname, locale } = router - - return crumbs.map((item, index) => { - const fullUrl = getFullUrl(pathname, item.slug, locale) - - return { - position: index + 1, - name: item.label, - item: fullUrl, - } - }) -} - -const parseBreadcrumbs = (crumbs: Breadcrumb[], custom = false) => { - return crumbs - .filter((item) => item.slug && item.label) - .map((item) => ({ - ...item, - // @TODO: the item.type check can be removed once all existing custom breadcrumbs have been updated to use the segment type - label: custom && item.type == 'segment' ? item.label : item.label.replaceAll('-', ' '), - })) -} - -type BreadcrumbsProps = { - slug: string - breadcrumbs: Breadcrumb[] - customBreadcrumbs?: Breadcrumb[] - /** Override styling on the breadcrumb list*/ - className?: string - /** Override styling on the breadcrumb list items */ - breadcrumbClassName?: string -} & HTMLAttributes & - BackgroundContainerProps - -export const Breadcrumbs = ({ - slug, - breadcrumbs, - customBreadcrumbs, - className = '', - breadcrumbClassName = '', - background, -}: BreadcrumbsProps) => { - const router = useRouter() - - const crumbs = - customBreadcrumbs && customBreadcrumbs.length >= 3 - ? parseBreadcrumbs(customBreadcrumbs, true) - : parseBreadcrumbs(breadcrumbs) - - if (crumbs.length < 2) return null - - const breadcrumbClassNames = twMerge( - `font-semibold - text-sm - flex - gap-3 - items-center - [&:not(:last-child)]:after:content-['>'] - [&:not(:last-child)]:after:h-max - last:font-medium - last:text-slate-blue-90 - dark:last:text-white-100/90 - `, - breadcrumbClassName, - ) - - return ( - -
    - {crumbs.map((item: Breadcrumb) => { - if (item.slug === slug) { - return ( -
  1. - {item.label} -
    2. - ) - } - return ( -
  2. - - {item.label} - -
    3. - ) - })} -
- - - ) -} diff --git a/web/lib/queries/common/breadcrumbs.ts b/web/lib/queries/common/breadcrumbs.ts index ee20905df..6108e709d 100644 --- a/web/lib/queries/common/breadcrumbs.ts +++ b/web/lib/queries/common/breadcrumbs.ts @@ -26,14 +26,6 @@ export const breadcrumbsQuery = /* groq */ ` "customBreadcrumbs": [ ${home}, ...breadcrumbs.customBreadcrumbs[]{ - // @TODO: These conditionals can be removed in favor of the 'segment' type once all existing breadcrumbs are updated to use the segment type - // Similarly, the 'type' field can be removed at that point - _type == 'segment' => @{ - "slug": reference->.slug.current, - "label": coalesce(title, topicSlug), - "type": 'segment' - }, - _type == 'reference' => @->{ "slug": slug.current, "label": topicSlug, diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx index 0ce16e41f..42186c731 100644 --- a/web/pageComponents/pageTemplates/TopicPage.tsx +++ b/web/pageComponents/pageTemplates/TopicPage.tsx @@ -1,4 +1,3 @@ -import styled from 'styled-components' import useSharedTitleStyles from '../../lib/hooks/useSharedTitleStyles' import { HeroTypes, TopicPageSchema } from '../../types/types' import Seo from '../shared/Seo' @@ -7,31 +6,6 @@ import { PageContent } from './shared/SharedPageContent' import SharedTitle from './shared/SharedTitle' import { Breadcrumbs } from '../topicPages/Breadcrumbs' -const TopicPageLayout = styled.main` - /* The neverending spacing story... If two sections with the same background colour - follows each other we want less spacing */ - .background--bg-mid-blue + .background--bg-mid-blue, - .background--bg-default + .background--bg-default, - .background--bg-moss-green + .background--bg-moss-green, - .background--bg-moss-green-light + .background--bg-moss-green-light, - .background--bg-spruce-wood + .background--bg-spruce-wood, - .background--bg-mist-blue + .background--bg-mist-blue, - .background--bg-slate-blue + .background--bg-slate-blue, - .background--bg-mid-yellow + .background--bg-mid-yellow, - .background--bg-mid-orange + .background--bg-mid-orange, - .background--bg-mid-green + .background--bg-mid-green { - /* The teaser component uses an article element, so lets avoid that. - Would be more robust if we add a container for the padding :/ */ - > section, - > figure, - > ol, - > h1, - > div:first-child { - /* padding-top: calc(var(--space-3xLarge) / 2); */ - padding-top: 0; - } - } -` type TopicPageProps = { data: TopicPageSchema } @@ -47,7 +21,7 @@ const TopicPage = ({ data }: TopicPageProps) => { heroImage={data?.hero?.figure?.image} pageTitle={data?.title} /> - +
{breadcrumbs && breadcrumbs?.enableBreadcrumbs && ( { useCustomBreadcrumbs={breadcrumbs?.useCustomBreadcrumbs} defaultBreadcrumbs={breadcrumbs?.defaultBreadcrumbs} customBreadcrumbs={breadcrumbs?.customBreadcrumbs} - containerStyles={{ - hasTopMargin: data.hero.type !== 'default', - }} /> - /* */ )} {data.hero.type !== HeroTypes.DEFAULT && ( )} - +
) } diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx index 83e299c05..ed3032c7d 100644 --- a/web/pageComponents/topicPages/Breadcrumbs.tsx +++ b/web/pageComponents/topicPages/Breadcrumbs.tsx @@ -1,44 +1,18 @@ -import styled from 'styled-components' import { default as NextLink } from 'next/link' import { BackgroundContainer, BackgroundContainerProps, BreadcrumbsList } from '@components' import { BreadcrumbJsonLd } from 'next-seo' import { useRouter } from 'next/router' import type { NextRouter } from 'next/router' import { getFullUrl } from '../../common/helpers/getFullUrl' -import { BackgroundColours, Breadcrumb } from '../../types' +import { Breadcrumb } from '../../types' const { BreadcrumbsListItem } = BreadcrumbsList -type ContainerStyles = { - hasTopMargin?: boolean -} - -const Container = styled(BackgroundContainer)<{ $containerStyles?: ContainerStyles }>` - max-width: var(--maxViewportWidth); - margin-left: auto; - margin-right: auto; - color: var(--color-on-background); -` -const StyledBreadcrumbList = styled(BreadcrumbsList)` - padding: var(--space-xLarge) var(--layout-paddingHorizontal-large); -` - -const StyledBreadcrumbsListItem = styled(BreadcrumbsListItem)<{ $bgColor?: BackgroundColours }>` - &:last-child { - color: var(--breadcrumbs-inactive-color); - } -` - -const StyledNextLink = styled(NextLink)<{ $bgColor?: BackgroundColours }>` - color: var(--color-on-background); -` - type BreadcrumbsProps = { slug: string useCustomBreadcrumbs: boolean defaultBreadcrumbs: Breadcrumb[] customBreadcrumbs: Breadcrumb[] - containerStyles: ContainerStyles } & BackgroundContainerProps const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => { @@ -55,52 +29,48 @@ const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => { }) } -const parseBreadcrumbs = (crumbs: Breadcrumb[], custom = false) => { - return crumbs - .filter((item) => item.slug && item.label) - .map((item) => ({ - ...item, - // @TODO: the item.type check can be removed once all existing custom breadcrumbs have been updated to use the segment type - label: capitalize(custom && item.type == 'segment' ? item.label : item.label.replaceAll('-', ' ')), - })) +const parseSlug = (item: string): string => { + const parts = item?.split('/').at(-1) || item + return parts?.[0]?.toUpperCase() + parts?.slice(1) } -const capitalize = (string: string): string => string[0].toUpperCase() + string.slice(1) - export const Breadcrumbs = ({ slug, useCustomBreadcrumbs, defaultBreadcrumbs, customBreadcrumbs, - containerStyles, background, }: BreadcrumbsProps) => { const router = useRouter() const crumbs = - useCustomBreadcrumbs && customBreadcrumbs && customBreadcrumbs.length >= 3 - ? parseBreadcrumbs(customBreadcrumbs, true) - : parseBreadcrumbs(defaultBreadcrumbs) + useCustomBreadcrumbs && customBreadcrumbs && customBreadcrumbs.length >= 3 ? customBreadcrumbs : defaultBreadcrumbs if (crumbs.length < 2) return null return ( - - - {crumbs.map((item: Breadcrumb) => { - if (item.slug === slug) { - return {item.label} - } - return ( - - - {item.label} - - - ) - })} - + + + {crumbs + .filter((item) => item.slug && item.label) + .map((item: Breadcrumb) => { + if (item.slug === slug) { + return ( + + {item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')} + + ) + } + return ( + + + {item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')} + + + ) + })} + - + ) } diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs index 7dd956868..467aee23f 100644 --- a/web/tailwind.config.cjs +++ b/web/tailwind.config.cjs @@ -177,14 +177,14 @@ module.exports = { 'mist-blue-100-interact': '199deg 23% 56%', }, spacing: ({ theme }) => ({ - //--space-xSmall -> spacing.1 - //--space-small -> spacing.2 - //--space-medium -> spacing.4 - //--space-large -> spacing.6 - //--space-xLarge -> spacing.8 - //--space-xxLarge -> spacing.10 - //--space-3xLarge -> spacing.14 - //--space-4xLarge -> spacing.24 + //--space-xSmall -> spacing.2 + //--space-small -> spacing.4 + //--space-medium -> spacing.6 + //--space-large -> spacing.8 + //--space-xLarge -> spacing.10 + //--space-xxLarge -> spacing.12 + //--space-3xLarge -> spacing.16 + //--space-4xLarge -> spacing.28 xs: 'calc((4 / 16) * theme(fontSize.base))', sm: 'calc((8 / 16) * theme(fontSize.base))', md: 'calc((16 / 16) * theme(fontSize.base))', From 01532d067672731bee048741a572d6bf2bd0e129 Mon Sep 17 00:00:00 2001 From: Borghild Date: Fri, 3 May 2024 11:13:46 +0200 Subject: [PATCH 2/4] :art: updates to breadcrumbs --- web/pageComponents/pageTemplates/TopicPage.tsx | 1 + web/pageComponents/topicPages/Breadcrumbs.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx index 42186c731..d1d596d38 100644 --- a/web/pageComponents/pageTemplates/TopicPage.tsx +++ b/web/pageComponents/pageTemplates/TopicPage.tsx @@ -30,6 +30,7 @@ const TopicPage = ({ data }: TopicPageProps) => { useCustomBreadcrumbs={breadcrumbs?.useCustomBreadcrumbs} defaultBreadcrumbs={breadcrumbs?.defaultBreadcrumbs} customBreadcrumbs={breadcrumbs?.customBreadcrumbs} + className={data?.hero?.type === 'default' ? 'pt-0' : ''} /> )} diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx index ed3032c7d..1af8b2bb6 100644 --- a/web/pageComponents/topicPages/Breadcrumbs.tsx +++ b/web/pageComponents/topicPages/Breadcrumbs.tsx @@ -5,6 +5,7 @@ import { useRouter } from 'next/router' import type { NextRouter } from 'next/router' import { getFullUrl } from '../../common/helpers/getFullUrl' import { Breadcrumb } from '../../types' +import { twMerge } from 'tailwind-merge' const { BreadcrumbsListItem } = BreadcrumbsList @@ -13,6 +14,7 @@ type BreadcrumbsProps = { useCustomBreadcrumbs: boolean defaultBreadcrumbs: Breadcrumb[] customBreadcrumbs: Breadcrumb[] + className?: string } & BackgroundContainerProps const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => { @@ -31,7 +33,7 @@ const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => { const parseSlug = (item: string): string => { const parts = item?.split('/').at(-1) || item - return parts?.[0]?.toUpperCase() + parts?.slice(1) + return parts?.[0] + parts?.slice(1) } export const Breadcrumbs = ({ @@ -40,6 +42,7 @@ export const Breadcrumbs = ({ defaultBreadcrumbs, customBreadcrumbs, background, + className = '', }: BreadcrumbsProps) => { const router = useRouter() @@ -50,7 +53,7 @@ export const Breadcrumbs = ({ return ( - + {crumbs .filter((item) => item.slug && item.label) .map((item: Breadcrumb) => { From 9aec06b1957bf3573dba7c8d9ed55bd412108e8a Mon Sep 17 00:00:00 2001 From: Borghild Date: Fri, 3 May 2024 11:21:20 +0200 Subject: [PATCH 3/4] :art: refactor --- web/pageComponents/topicPages/Breadcrumbs.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx index 1af8b2bb6..cb5b3c3b0 100644 --- a/web/pageComponents/topicPages/Breadcrumbs.tsx +++ b/web/pageComponents/topicPages/Breadcrumbs.tsx @@ -57,18 +57,18 @@ export const Breadcrumbs = ({ {crumbs .filter((item) => item.slug && item.label) .map((item: Breadcrumb) => { - if (item.slug === slug) { - return ( - - {item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')} - - ) - } + const label = item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ') + const shouldLink = item.slug !== slug + return ( - - {item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')} - + {shouldLink ? ( + + {label} + + ) : ( + <>{label} + )} ) })} From aa5eed1517f807fe594fc641929c9e71f7ac75ef Mon Sep 17 00:00:00 2001 From: Borghild Date: Fri, 3 May 2024 11:27:54 +0200 Subject: [PATCH 4/4] :art: use variable --- web/pageComponents/pageTemplates/TopicPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx index d1d596d38..a3c8798b9 100644 --- a/web/pageComponents/pageTemplates/TopicPage.tsx +++ b/web/pageComponents/pageTemplates/TopicPage.tsx @@ -30,7 +30,7 @@ const TopicPage = ({ data }: TopicPageProps) => { useCustomBreadcrumbs={breadcrumbs?.useCustomBreadcrumbs} defaultBreadcrumbs={breadcrumbs?.defaultBreadcrumbs} customBreadcrumbs={breadcrumbs?.customBreadcrumbs} - className={data?.hero?.type === 'default' ? 'pt-0' : ''} + className={data?.hero?.type === HeroTypes.DEFAULT ? 'pt-0' : ''} /> )}