Hero banner to use i18n and CMS

UKHSA-Internal · Nov 18, 2024 · 3219167 · 3219167
1 parent 3aecbbc
commit 3219167
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/app/(cms)/[[...slug]]/layout.tsx b/src/app/(cms)/[[...slug]]/layout.tsx
@@ -3,6 +3,8 @@ import Link from 'next/link'
 import { ReactNode } from 'react'
 import { Trans } from 'react-i18next/TransWithoutContext'
 
+import { PageType } from '@/api/requests/cms/getPages'
+import { getPageBySlug } from '@/api/requests/getPageBySlug'
 import { Announcement, BackToTop } from '@/app/components/ui/ukhsa'
 import HeroBanner from '@/app/components/ui/ukhsa/HeroBanner/HeroBanner'
 import { MegaMenu } from '@/app/components/ui/ukhsa/MegaMenu/MegaMenu'
@@ -25,6 +27,8 @@ export default async function Layout({ children, params }: LayoutProps) {
     getGlobalBanner(),
   ])
 
+  const { sub_title: subTitle } = await getPageBySlug<PageType.Landing>('landing-page')
+
   const onHomePage = landingPageHeroEnabled && !params?.slug
 
   return (
@@ -64,7 +68,7 @@ export default async function Layout({ children, params }: LayoutProps) {
         <MegaMenu />
       </TopNav>
 
-      {onHomePage ? <HeroBanner /> : <div className="govuk-width-container h-2 bg-blue" />}
+      {onHomePage ? <HeroBanner subTitle={subTitle} /> : <div className="govuk-width-container h-2 bg-blue" />}
 
       {!onHomePage ? (
         <div className="govuk-width-container print:hidden">

diff --git a/src/app/components/ui/ukhsa/HeroBanner/HeroBanner.spec.tsx b/src/app/components/ui/ukhsa/HeroBanner/HeroBanner.spec.tsx
@@ -3,7 +3,7 @@ import { render } from '@/config/test-utils'
 import HeroBanner from './HeroBanner'
 
 test('renders hero banner', async () => {
-  const { getByRole } = render(await HeroBanner())
+  const { getByRole } = render(await HeroBanner({ subTitle: 'Showing public health data across England' }))
 
   expect(getByRole('heading', { level: 1, name: 'UKHSA data dashboard' })).toBeVisible()
   expect(getByRole('heading', { level: 2, name: 'Showing public health data across England' })).toBeVisible()

diff --git a/src/app/components/ui/ukhsa/HeroBanner/HeroBanner.tsx b/src/app/components/ui/ukhsa/HeroBanner/HeroBanner.tsx
@@ -1,16 +1,16 @@
 import Link from 'next/link'
 import { Trans } from 'react-i18next/TransWithoutContext'
 
-import { PageType } from '@/api/requests/cms/getPages'
-import { getPageBySlug } from '@/api/requests/getPageBySlug'
 import { getServerTranslation } from '@/app/i18n'
 
 import { PhaseBanner } from '../PhaseBanner/PhaseBanner'
 
-export default async function HeroBanner() {
-  const { t } = await getServerTranslation('common')
+interface HeroBannerProps {
+  subTitle: string
+}
 
-  const { sub_title: subTitle } = await getPageBySlug<PageType.Landing>('landing-page')
+export default async function HeroBanner({ subTitle }: HeroBannerProps) {
+  const { t } = await getServerTranslation('common')
 
   return (
     <div className="bg-blue">