Merge pull request #548 from UKHSA-Internal/chore/adding-i18n-to-banner

CDD-2329: Adding i18n to banner

public/locales/en/common.json

@@ -8,6 +8,8 @@
   "lastUpdated": "Last updated on {{value, date}} at {{value, time}}",
   "feedbackBanner": "<0>This is a new service - your <0>feedback</0> will help us to improve it.</0>",
   "feedbackBannerPhase": "Beta",
+  "heroBannerTitle": "UKHSA data dashboard",
+  "heroBannerAboutLink": "What is the UKHSA data dashboard?",
   "backLink": "Back",
   "downloadBtn": "Download",
   "downloadingBtn": "Downloading...",

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">

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()

src/app/components/ui/ukhsa/HeroBanner/HeroBanner.tsx

@@ -5,20 +5,22 @@ import { getServerTranslation } from '@/app/i18n'
 
 import { PhaseBanner } from '../PhaseBanner/PhaseBanner'
 
-export default async function HeroBanner() {
-  const { t } = await getServerTranslation()
+interface HeroBannerProps {
+  subTitle: string
+}
+
+export default async function HeroBanner({ subTitle }: HeroBannerProps) {
+  const { t } = await getServerTranslation('common')
 
   return (
     <div className="bg-blue">
       <div className="govuk-width-container govuk-!-padding-bottom-6 bg-blue" data-testid="ukhsa-hero-banner">
         <h1 className="govuk-heading-xl govuk-!-padding-top-7 govuk-!-margin-bottom-4 text-white">
-          UKHSA data dashboard
+          {t('heroBannerTitle')}
         </h1>
-        <h2 className="govuk-heading-xl govuk-!-margin-bottom-3 text-offwhite">
-          Showing public health data across England
-        </h2>
+        <h2 className="govuk-heading-xl govuk-!-margin-bottom-3 text-offwhite">{subTitle}</h2>
         <Link className="govuk-body-s text-grey-4 focus:text-black" href="/about">
-          What is the UKHSA data dashboard?
+          {t('heroBannerAboutLink')}
         </Link>
       </div>
 

src/mock-server/handlers/cms/pages/fixtures/page/landing.ts

@@ -27,7 +27,7 @@ export const landingPageMock: PageResponse<PageType.Landing> = {
   seo_change_frequency: 5,
   seo_priority: 0.5,
   last_updated_at: '2024-09-30T11:41:36.884029+01:00',
-  sub_title: 'showing public health data across England',
+  sub_title: 'Showing public health data across England',
   body: [
     {
       type: 'section',