TSOND-652 | Compass Redesign and ADA compliance updates

.nvmrc

@@ -1 +1 @@
-v22.11.0
+v22.14.0

MainLayout/MainLayout.tsx

@@ -4,10 +4,10 @@ import React, { useEffect, useState } from 'react'
 import { Footer, Header } from '@/components'
 import { App } from '@/types'
 
-import { onEntryChange } from '@/config'
 import useRouterHook from '@/hooks/useRouterHook'
 import { LocaleContext, usePersonalization } from '@/context'
 import { footerJsonRtePathIncludes, footerReferenceIncludes, getEntries, navigationReferenceIncludes } from '@/services'
+import { onEntryChange } from '@/config'
 
 const MainLayout: React.FC<App.MainLayout> = (
     props: React.PropsWithChildren<App.MainLayout>
@@ -43,7 +43,7 @@ const MainLayout: React.FC<App.MainLayout> = (
             console.error('Main Layout failed to load,\n', err)
         }
     }
-
+    
     useEffect(() => {
         onEntryChange(fetchAppConfig)
     }, [])

app/[locale]/[...slug]/page.tsx

@@ -9,7 +9,7 @@ import { NotFoundComponent, PageWrapper } from '@/components'
 import { onEntryChange } from '@/config'
 import useRouterHook from '@/hooks/useRouterHook'
 import { setDataForChromeExtension } from '@/utils'
-import { imageCardsReferenceIncludes, teaserReferenceIncludes, textAndImageReferenceIncludes, textJSONRtePaths } from '@/services/helper'
+import { heroReferenceIncludes, imageCardsReferenceIncludes, teaserReferenceIncludes, textAndImageReferenceIncludes, textJSONRtePaths } from '@/services/helper'
 import { getEntryByUrl } from '@/services'
 import { usePersonalization } from '@/context'
 
@@ -50,6 +50,7 @@ export default function LandingPage () {
         const fetchData = async () => {
             try {
                 const refUids = [
+                    ...heroReferenceIncludes,
                     ...textAndImageReferenceIncludes,
                     ...teaserReferenceIncludes,
                     ...imageCardsReferenceIncludes
@@ -78,6 +79,7 @@ export default function LandingPage () {
             ? <PageWrapper {...data}>
                 {data?.components
                     ? <RenderComponents $={data?.$}
+                        hero={data?.hero && Array.isArray(data.hero) ? data.hero[0] : data.hero}
                         components={data?.components}
                         isABEnabled={isABTestEnabled}
                     /> : ''}

app/[locale]/article/[...slug]/page.tsx

@@ -21,6 +21,7 @@ import { getEntries, getEntryByUrl } from '@/services'
  * 
  * @returns {JSX.Element}
  */
+
 export default function Article () {
     const { personalizationSDK, personalizeConfig } = usePersonalization()
     const [data, setData] = useState<Page.ArticlePage['entry'] | null>(null)
@@ -156,11 +157,11 @@ export default function Article () {
     return (
         data ? <>
             <PageWrapper {...data}>
-                <ArticleCover
-                    title={title}
+                <ArticleCover title={title}
                     summary={summary}
                     cover_image={cover_image}
                     $={$}
+                    _content_type_uid={'article'}
                 />
                 <Text
                     content={content}

app/[locale]/articles/[...slug]/page.tsx

@@ -56,6 +56,7 @@ export default function Article () {
                 && <CardCollection
                     cards={articlesList}
                     count={cards?.length}
+                    className='mb-25'
                 /> }
                 </>
         )
@@ -148,19 +149,19 @@ export default function Article () {
 
     return (<>
         {data && <PageWrapper {...data}>
-            {data?.title && <div className='pt-16 px-8 mb-16 bg-background-primary dark:bg-white text-center max-w-7xl mx-auto'>
-                <h1 className='mx-auto text-black' {...data?.$?.title}>{data?.title}</h1>
+            {data?.title && <div className='my-25 mx-[2.25rem] md:mx-[5.25rem] bg-background-primary dark:bg-white'>
+                <h1 className='text-stone max-w-max' {...data?.$?.title}>{data?.title}</h1>
             </div>}
-            {data?.components ? (
+            {(data?.components?.length > 0) ? (
                 <RenderComponents $={data?.$}
                     components={data?.components}
                 />
             ) : <></>}
         </PageWrapper>}
-        <div className='card-collection mt-16' id='pagination-scroll-anchor'>
+        <div className='card-collection mx-[2.25rem] md:mx-[5.25rem]' id='pagination-scroll-anchor'>
             <RenderCardCollection />
             { // Pagination component
-                cards?.length > 12 && <div className='py-8 px-8 xl:px-0 bg-background-primary dark:bg-transparent text-center max-w-7xl mx-auto'>
+                cards?.length > 12 && <div className='my-25 bg-background-primary dark:bg-transparent text-center'>
                     <Pagination
                         length={cards?.length}
                         dataPerPage={articlesPerPage}

app/[locale]/articles/page.tsx

@@ -49,6 +49,7 @@ export default function ArticleListing () {
                         id='articles-card-collection'
                         cards={articlesList}
                         count={cards?.length}
+                        className='mb-25'
                     /> }
                 </> 
         )
@@ -122,19 +123,19 @@ export default function ArticleListing () {
 
     return ( <>
         {data && <PageWrapper {...data}>
-            {data?.title && <div className='pt-16 px-8 mb-16 bg-background-primary dark:bg-white text-center max-w-7xl mx-auto'>
-                <h1 data-id='h1' className='mx-auto text-black' {...data?.$?.title}>{data?.title}</h1>
+            {data?.title && <div className='my-25 md:max-w-[45.635%] mx-[2.25rem] md:mx-[5.25rem] bg-background-primary dark:bg-white'>
+                <h1 data-id='h1' className='text-stone max-w-max' {...data?.$?.title}>{data?.title}</h1>
             </div>}
-            {data?.components ? (
+            {(data?.components?.length > 0) ? (
                 <RenderComponents $={data?.$}
                     components={data?.components}
                 />
             ) : <></>}
         </PageWrapper>}
-        <div className='card-collection mt-16' id='pagination-scroll-anchor'>
+        <div className='card-collection mx-[2.25rem] md:mx-[5.25rem]' id='pagination-scroll-anchor'>
             <RenderCardCollection />
             { // Paginaion component
-                cards?.length > 12 && <div className='py-8 px-8 xl:px-0 bg-background-primary dark:bg-transparent text-center max-w-7xl mx-auto'>
+                cards?.length > 12 && <div className='my-25 bg-background-primary dark:bg-transparent text-center'>
                     <Pagination
                         length={cards?.length}
                         dataPerPage={articlesPerPage}

app/[locale]/layout.tsx

@@ -1,15 +1,22 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter, Roboto_Condensed } from 'next/font/google'
 
 import { MainLayout } from '@/MainLayout'
 import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import '../globals.css'
 import '/node_modules/flag-icons/css/flag-icons.min.css'
-import {PersonalizationProvider} from '@/context'
+import { PersonalizationProvider } from '@/context'
 
 const inter = Inter({ subsets: ['latin'] })
 
+/* https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap */
+const robotoCondensed = Roboto_Condensed({
+    subsets: ['latin'],
+    weight: ['200', '300', '400', '500', '600', '700'],
+    style: ['normal', 'italic']
+})
+
 export const metadata: Metadata = {
     title: 'Compass starter',
     description: 'Provided by Contentstack'
@@ -24,12 +31,14 @@ export const metadata: Metadata = {
 export default async function RootLayout ({
     children
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
 
     return (
         <html lang='en'>
-            <body className={inter.className}>
+            <body
+                className={`${robotoCondensed.className} ${inter.className}`}
+            >
                 <PersonalizationProvider>
                     <MainLayout>
                         {children}

app/[locale]/page.tsx

@@ -6,7 +6,7 @@ import { NotFoundComponent, PageWrapper } from '@/components'
 import { onEntryChange } from '@/config'
 import useRouterHook from '@/hooks/useRouterHook'
 import { isDataInLiveEdit, setDataForChromeExtension } from '@/utils'
-import { featuredArticlesReferenceIncludes, imageCardsReferenceIncludes, teaserReferenceIncludes, textAndImageReferenceIncludes, textJSONRtePaths } from '@/services/helper'
+import { featuredArticlesReferenceIncludes, heroReferenceIncludes, imageCardsReferenceIncludes, teaserReferenceIncludes, textAndImageReferenceIncludes, textJSONRtePaths } from '@/services/helper'
 import { getEntryByUrl } from '@/services'
 import { usePersonalization } from '@/context'
 
@@ -35,6 +35,7 @@ export default function Home () {
     const fetchData = async () => {
         try {
             const refUids = [
+                ...heroReferenceIncludes,
                 ...textAndImageReferenceIncludes,
                 ...teaserReferenceIncludes,
                 ...imageCardsReferenceIncludes,
@@ -68,6 +69,7 @@ export default function Home () {
                 ? <PageWrapper {...data}>
                     {data?.components
                         ? <RenderComponents $={data?.$}
+                            hero={data?.hero && Array.isArray(data.hero) ? data.hero[0] : data.hero}
                             components={[
                                 // eslint-disable-next-line no-unsafe-optional-chaining
                                 ...data?.components