Merge branch 'bose/2272' into staging

equinor · May 3, 2024 · 20d9ff7 · 20d9ff7
2 parents 79ac301 + aa5eed1
commit 20d9ff7
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 218 deletions.
diff --git 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<string[]>([])
   const [defaultBreadcrumbs, setDefaultBreadcrumbs] = useState<string[]>(
-    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
@@ -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<HTMLOListElement>
 
 export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
-  { children, ...rest },
+  { children, className = '', ...rest },
   forwardedRef,
 ) {
   return (
-    <List ref={forwardedRef} variant="numbered" {...rest}>
+    <List ref={forwardedRef} variant="numbered" {...rest} className={twMerge('p-0', className)}>
       {children}
     </List>
   )

diff --git 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<HTMLLIElement, BreadcrumbsListItem
   forwardedRef,
 ) {
   return (
-    <StyledListItem ref={forwardedRef} {...rest}>
+    <StyledListItem ref={forwardedRef} {...rest} className="first-letter:capitalize">
       {children}
     </StyledListItem>
   )

diff --git a/web/core/Breadcrumbs/index.tsx b/web/core/Breadcrumbs/index.tsx
diff --git 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
@@ -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
 }
@@ -48,7 +22,7 @@ const TopicPage = ({ data }: TopicPageProps) => {
         heroImage={data?.hero?.figure?.image}
         pageTitle={data?.title}
       />
-      <TopicPageLayout>
+      <main>
         {!data?.isCampaign && (
           <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background?.backgroundColor} />
         )}
@@ -59,23 +33,15 @@ const TopicPage = ({ data }: TopicPageProps) => {
             useCustomBreadcrumbs={breadcrumbs?.useCustomBreadcrumbs}
             defaultBreadcrumbs={breadcrumbs?.defaultBreadcrumbs}
             customBreadcrumbs={breadcrumbs?.customBreadcrumbs}
-            containerStyles={{
-              hasTopMargin: data.hero.type !== 'default',
-            }}
+            className={data?.hero?.type === HeroTypes.DEFAULT ? 'pt-0' : ''}
           />
-          /*           <Breadcrumbs
-            background={titleStyles.background}
-            slug={data?.slug}
-            breadcrumbs={breadcrumbs?.defaultBreadcrumbs}
-            customBreadcrumbs={breadcrumbs?.customBreadcrumbs}
-          /> */
         )}
 
         {data.hero.type !== HeroTypes.DEFAULT && !data?.isCampaign && (
           <SharedTitle sharedTitle={data.title} background={titleStyles.background} />
         )}
         <PageContent data={data} />
-      </TopicPageLayout>
+      </main>
     </>
   )
 }

diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx
@@ -1,44 +1,20 @@
-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'
+import { twMerge } from 'tailwind-merge'
 
 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
+  className?: string
 } & BackgroundContainerProps
 
 const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => {
@@ -55,52 +31,49 @@ 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] + parts?.slice(1)
 }
 
-const capitalize = (string: string): string => string[0].toUpperCase() + string.slice(1)
-
 export const Breadcrumbs = ({
   slug,
   useCustomBreadcrumbs,
   defaultBreadcrumbs,
   customBreadcrumbs,
-  containerStyles,
   background,
+  className = '',
 }: 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 (
-    <Container $containerStyles={containerStyles} background={background}>
-      <StyledBreadcrumbList>
-        {crumbs.map((item: Breadcrumb) => {
-          if (item.slug === slug) {
-            return <StyledBreadcrumbsListItem key={item.slug}>{item.label}</StyledBreadcrumbsListItem>
-          }
-          return (
-            <BreadcrumbsListItem key={item.slug}>
-              <StyledNextLink href={item.slug} prefetch={false} className="hover:underline no-underline">
-                {item.label}
-              </StyledNextLink>
-            </BreadcrumbsListItem>
-          )
-        })}
-      </StyledBreadcrumbList>
+    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
+      <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
+        {crumbs
+          .filter((item) => item.slug && item.label)
+          .map((item: Breadcrumb) => {
+            const label = item.label ?? parseSlug(item.slug)?.replaceAll('-', ' ')
+            const shouldLink = item.slug !== slug
+
+            return (
+              <BreadcrumbsListItem key={item.slug}>
+                {shouldLink ? (
+                  <NextLink href={item.slug} prefetch={false} className="hover:underline no-underline">
+                    {label}
+                  </NextLink>
+                ) : (
+                  <>{label}</>
+                )}
+              </BreadcrumbsListItem>
+            )
+          })}
+      </BreadcrumbsList>
       <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
-    </Container>
+    </BackgroundContainer>
   )
 }