Revert "Revert "CDD-2230: Started to abstract out the components from…

src/app/(pages)/access-our-data/[slug]/layout.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 
 import { getPageBySlug } from '@/api/requests/getPageBySlug'
 import { View } from '@/app/components/ui/ukhsa'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 export const dynamic = 'auto'
 
 export default async function Layout({
@@ -18,7 +19,8 @@ export default async function Layout({
   const { title } = await getPageBySlug('access-our-data')
 
   return (
-    <View heading={title}>
+    <View>
+      <Heading heading={title} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">{parent}</div>
       </div>

src/app/(pages)/switchboard/(pages)/feature-flags/page.tsx

@@ -1,6 +1,8 @@
 import { cookies } from 'next/headers'
 
 import { View } from '@/app/components/ui/ukhsa'
+import { BackLink } from '@/app/components/ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { UKHSA_SWITCHBOARD_COOKIE_NAME } from '@/app/constants/app.constants'
 
 import { heading } from '../../shared/constants'
@@ -14,7 +16,9 @@ export default function SwitchBoard() {
   } = getSwitchBoardState(cookieStore.get(UKHSA_SWITCHBOARD_COOKIE_NAME)?.value)
 
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" backLink="/switchboard">
+    <View className="govuk-!-margin-top-5">
+      <BackLink backlink="/switchboard" />
+      <Heading heading={heading} />
       <form
         className="govuk-!-margin-top-3"
         action={async (form) => {

src/app/(pages)/switchboard/(pages)/global-banners/page.tsx

@@ -1,6 +1,8 @@
 import { cookies } from 'next/headers'
 
 import { View } from '@/app/components/ui/ukhsa'
+import { BackLink } from '@/app/components/ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { UKHSA_SWITCHBOARD_COOKIE_NAME } from '@/app/constants/app.constants'
 
 import { StatusSelect } from '../../components/StatusSelect'
@@ -15,7 +17,9 @@ export default function SwitchBoard() {
   } = getSwitchBoardState(cookieStore.get(UKHSA_SWITCHBOARD_COOKIE_NAME)?.value)
 
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" backLink="/switchboard">
+    <View className="govuk-!-margin-top-5">
+      <BackLink backlink="/switchboard" />
+      <Heading heading={heading} />
       <form
         className="govuk-!-margin-top-3"
         action={async (form) => {

src/app/(pages)/switchboard/(pages)/menus/page.tsx

@@ -1,6 +1,8 @@
 import { cookies } from 'next/headers'
 
 import { View } from '@/app/components/ui/ukhsa'
+import { BackLink } from '@/app/components/ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { UKHSA_SWITCHBOARD_COOKIE_NAME } from '@/app/constants/app.constants'
 
 import { StatusSelect } from '../../components/StatusSelect'
@@ -15,7 +17,9 @@ export default function SwitchBoard() {
   } = getSwitchBoardState(cookieStore.get(UKHSA_SWITCHBOARD_COOKIE_NAME)?.value)
 
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" backLink="/switchboard">
+    <View className="govuk-!-margin-top-5">
+      <BackLink backlink="/switchboard" />
+      <Heading heading={heading} />
       <form
         className="govuk-!-margin-top-3"
         action={async (form) => {

src/app/(pages)/switchboard/(pages)/pages/page.tsx

@@ -5,6 +5,8 @@ import { heading } from '@/app/(pages)/switchboard/shared/constants'
 import { getSwitchBoardState, syncState } from '@/app/(pages)/switchboard/shared/state'
 import { Details } from '@/app/components/ui/govuk'
 import { View } from '@/app/components/ui/ukhsa'
+import { BackLink } from '@/app/components/ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { UKHSA_SWITCHBOARD_COOKIE_NAME } from '@/app/constants/app.constants'
 
 export default function SwitchBoard() {
@@ -15,7 +17,9 @@ export default function SwitchBoard() {
   } = getSwitchBoardState(cookieStore.get(UKHSA_SWITCHBOARD_COOKIE_NAME)?.value)
 
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" backLink="/switchboard">
+    <View className="govuk-!-margin-top-5">
+      <BackLink backlink="/switchboard" />
+      <Heading heading={heading} />
       <form
         className="govuk-!-margin-top-3"
         action={async (form) => {

src/app/(pages)/switchboard/(pages)/weather-health-alerts/page.tsx

@@ -1,6 +1,8 @@
 import { cookies } from 'next/headers'
 
 import { View } from '@/app/components/ui/ukhsa'
+import { BackLink } from '@/app/components/ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { UKHSA_SWITCHBOARD_COOKIE_NAME } from '@/app/constants/app.constants'
 
 import { StatusSelect } from '../../components/StatusSelect'
@@ -15,7 +17,9 @@ export default function SwitchBoard() {
   } = getSwitchBoardState(cookieStore.get(UKHSA_SWITCHBOARD_COOKIE_NAME)?.value)
 
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" backLink="/switchboard">
+    <View className="govuk-!-margin-top-5">
+      <BackLink backlink="/switchboard" />
+      <Heading heading={heading} />
       <form
         className="govuk-!-margin-top-3"
         action={async (form) => {

src/app/(pages)/switchboard/page.tsx

@@ -4,6 +4,8 @@ import { View } from '@/app/components/ui/ukhsa'
 import { List } from '@/app/components/ui/ukhsa/List/List'
 import { ListItem } from '@/app/components/ui/ukhsa/List/ListItem'
 import { ListItemArrow, ListItemArrowLink } from '@/app/components/ui/ukhsa/List/ListItemArrow'
+import { Description } from '@/app/components/ui/ukhsa/View/Description/Description'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 
 import { heading, wellKnownEnvironments } from './shared/constants'
 
@@ -12,7 +14,9 @@ const description =
 
 export default function SwitchBoard() {
   return (
-    <View heading={heading} className="govuk-!-margin-top-5" description={description}>
+    <View className="govuk-!-margin-top-5">
+      <Heading heading={heading} />
+      <Description description={description} />
       <div className="govuk-grid-row govuk-!-margin-top-7">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <h2 className="govuk-heading-m">Well-Known Environments</h2>

src/app/(topics)/(weather-health-alerts)/weather-health-alerts/[weather]/page.tsx

@@ -10,6 +10,8 @@ import HealthAlertsLink from '@/app/components/ui/ukhsa/Links/HealthAlertsLink/H
 import { List } from '@/app/components/ui/ukhsa/List/List'
 import { ListItem } from '@/app/components/ui/ukhsa/List/ListItem'
 import { RelatedLinksWrapper } from '@/app/components/ui/ukhsa/RelatedLinks/RelatedLinksWrapper'
+import { Breadcrumbs } from '@/app/components/ui/ukhsa/View/Breadcrumbs/Breadcrumbs'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { renderCompositeBlock } from '@/app/utils/cms.utils'
 
 import AlertList from './AlertList'
@@ -73,13 +75,14 @@ export default async function WeatherHealthAlert({ params: { weather } }: Weathe
   } = await getPageBySlug<PageType.Composite>(weather)
 
   return (
-    <View
-      heading={title}
-      breadcrumbs={[
-        { name: 'Home', link: '/' },
-        { name: 'Weather health alerts', link: '/weather-health-alerts' },
-      ]}
-    >
+    <View>
+      <Breadcrumbs
+        breadcrumbs={[
+          { name: 'Home', link: '/' },
+          { name: 'Weather health alerts', link: '/weather-health-alerts' },
+        ]}
+      />
+      <Heading heading={title} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">{body.map(renderCompositeBlock)}</div>
       </div>

src/app/(topics)/(weather-health-alerts)/weather-health-alerts/page.tsx

@@ -8,6 +8,8 @@ import { List } from '@/app/components/ui/ukhsa/List/List'
 import { ListItem } from '@/app/components/ui/ukhsa/List/ListItem'
 import { ListItemArrow, ListItemArrowLink, ListItemArrowParagraph } from '@/app/components/ui/ukhsa/List/ListItemArrow'
 import { RelatedLinksWrapper } from '@/app/components/ui/ukhsa/RelatedLinks/RelatedLinksWrapper'
+import { Breadcrumbs } from '@/app/components/ui/ukhsa/View/Breadcrumbs/Breadcrumbs'
+import { Heading } from '@/app/components/ui/ukhsa/View/Heading/Heading'
 import { renderCompositeBlock } from '@/app/utils/cms.utils'
 
 export const dynamic = 'force-dynamic'
@@ -37,7 +39,9 @@ export default async function WeatherHealthAlerts() {
   const childPages = await getPages({ child_of: id.toString() })
 
   return (
-    <View heading={title} breadcrumbs={[{ name: 'Home', link: '/' }]}>
+    <View>
+      <Breadcrumbs breadcrumbs={[{ name: 'Home', link: '/' }]} />
+      <Heading heading={title} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <div className="govuk-body">{body.map(renderCompositeBlock)}</div>

src/app/components/cms/pages/Composite.tsx

@@ -5,6 +5,8 @@ import { PageComponentBaseProps } from '@/app/types'
 import { renderCompositeBlock } from '@/app/utils/cms.utils'
 
 import { RelatedLinksWrapper } from '../../ui/ukhsa/RelatedLinks/RelatedLinksWrapper'
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
 import { RichTextAutoHeadings } from '../RichText/RichTextAutoHeadings'
 
 export default async function CompositePage({ slug }: PageComponentBaseProps) {
@@ -17,7 +19,9 @@ export default async function CompositePage({ slug }: PageComponentBaseProps) {
   } = await getPageBySlug<PageType.Common | PageType.Composite>(slug)
 
   return (
-    <View heading={title} lastUpdated={lastUpdated}>
+    <View>
+      <Heading heading={title} />
+      <LastUpdated lastUpdated={lastUpdated} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           {typeof body === 'string' ? (

src/app/components/cms/pages/Feedback.tsx

@@ -1,13 +1,15 @@
 import { getFeedbackPage } from '@/app/utils/cms'
 
 import { View } from '../../ui/ukhsa'
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
 import Feedback from '../Feedback/Feedback'
 
 export default async function FeedbackPage() {
   const { title, form_fields: formFields } = await getFeedbackPage()
 
   return (
-    <View heading={title}>
+    <View>
+      <Heading heading={title} />
       <Feedback formFields={formFields} />
     </View>
   )

src/app/components/cms/pages/MetricsDocumentationChild.tsx

@@ -7,6 +7,10 @@ import { getServerTranslation } from '@/app/i18n'
 import { PageComponentBaseProps } from '@/app/types'
 import { extractRootSlug } from '@/app/utils/cms/slug'
 
+import { BackLink } from '../../ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
+
 export default async function MetricsChildPage({
   slug,
   searchParams: { returnUrl },
@@ -25,7 +29,10 @@ export default async function MetricsChildPage({
   const backLink = returnUrl || extractRootSlug(slug)
 
   return (
-    <View heading={title} lastUpdated={lastUpdated} backLink={backLink}>
+    <View>
+      <BackLink backlink={backLink} />
+      <Heading heading={title} />
+      <LastUpdated lastUpdated={lastUpdated} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <PageSectionWithContents>

src/app/components/cms/pages/MetricsDocumentationParent.tsx

@@ -21,6 +21,9 @@ import { getServerTranslation } from '@/app/i18n'
 import { PageComponentBaseProps } from '@/app/types'
 import { logger } from '@/lib/logger'
 
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
+
 interface MetricsParentPageProps {
   searchParams: {
     page?: number
@@ -96,7 +99,9 @@ export default async function MetricsParentPage({
   const setReturnPath = getReturnPathWithParams()
 
   return (
-    <View heading={title} lastUpdated={lastUpdated}>
+    <View>
+      <Heading heading={title} />
+      <LastUpdated lastUpdated={lastUpdated} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <RichText>{body}</RichText>

src/app/components/cms/pages/Topic.tsx

@@ -9,6 +9,9 @@ import { renderCard } from '@/app/utils/cms.utils'
 import { clsx } from '@/lib/clsx'
 
 import { RelatedLinksWrapper } from '../../ui/ukhsa/RelatedLinks/RelatedLinksWrapper'
+import { Description } from '../../ui/ukhsa/View/Description/Description'
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
 
 export default async function TopicPage({
   slug,
@@ -27,11 +30,10 @@ export default async function TopicPage({
     selected_topics: selectedTopics,
   } = await getPageBySlug<PageType.Topic>(slug, { type: PageType.Topic })
   return (
-    <View
-      heading={t('pageTitle', { context: areaName && 'withArea', title, areaName })}
-      description={description}
-      lastUpdated={lastUpdated}
-    >
+    <View>
+      <Heading heading={t('pageTitle', { context: areaName && 'withArea', title, areaName })} />
+      <LastUpdated lastUpdated={lastUpdated} />
+      <Description description={description} />
       <div className="govuk-grid-row">
         <div
           className={clsx({

src/app/components/cms/pages/WhatsNewChild.tsx

@@ -8,6 +8,10 @@ import { getServerTranslation } from '@/app/i18n'
 import { PageComponentBaseProps } from '@/app/types'
 import { extractRootSlug } from '@/app/utils/cms/slug'
 
+import { BackLink } from '../../ui/ukhsa/View/BackLink/Backlink'
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
+
 export default async function WhatsNewChildPage({
   slug,
   searchParams,
@@ -26,7 +30,10 @@ export default async function WhatsNewChildPage({
   const backLink = searchParams.returnUrl || extractRootSlug(slug)
 
   return (
-    <View backLink={backLink} lastUpdated={lastUpdated} heading={title}>
+    <View>
+      <BackLink backlink={backLink} />
+      <Heading heading={title} />
+      <LastUpdated lastUpdated={lastUpdated} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <small className="govuk-caption-m govuk-!-margin-bottom-3">

src/app/components/cms/pages/WhatsNewParent.tsx

@@ -25,6 +25,9 @@ import { getServerTranslation } from '@/app/i18n'
 import { PageComponentBaseProps } from '@/app/types'
 import { logger } from '@/lib/logger'
 
+import { Heading } from '../../ui/ukhsa/View/Heading/Heading'
+import { LastUpdated } from '../../ui/ukhsa/View/LastUpdated/LastUpdated'
+
 export default async function WhatsNewParentPage({
   slug,
   searchParams: { page },
@@ -86,7 +89,9 @@ export default async function WhatsNewParentPage({
   )
 
   return (
-    <View heading={title} lastUpdated={lastUpdated}>
+    <View>
+      <Heading heading={title} />
+      <LastUpdated lastUpdated={lastUpdated} />
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-three-quarters-from-desktop">
           <RichText>{body}</RichText>

src/app/components/ui/ukhsa/View/BackLink/Backlink.spec.tsx

@@ -0,0 +1,21 @@
+import { client } from '@/api/utils/api.utils'
+import { render } from '@/config/test-utils'
+import { allPagesMock } from '@/mock-server/handlers/cms/pages/fixtures/pages'
+
+import { BackLink } from './Backlink'
+
+jest.mocked(client).mockResolvedValue({
+  data: allPagesMock,
+  status: 200,
+})
+
+/**
+ * Jest does not support RSC yet so we must await the component as a function
+ */
+
+test('renders the back button', async () => {
+  const { getByRole } = render(await BackLink({ backlink: 'whats-new' }))
+  const backlinkElement = getByRole('link', { name: 'Back' })
+
+  expect(backlinkElement).toHaveAttribute('href', 'whats-new')
+})

src/app/components/ui/ukhsa/View/BackLink/Backlink.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+import { getServerTranslation } from '@/app/i18n'
+
+interface BackLinkProps {
+  backlink: string
+}
+
+export const BackLink = async ({ backlink }: BackLinkProps) => {
+  const { t } = await getServerTranslation('common')
+  return (
+    <Link href={backlink} className="govuk-back-link">
+      {t('backLink')}
+    </Link>
+  )
+}