From 3d8ed2e82c76a56bcaa21878033aa44d0be07fca Mon Sep 17 00:00:00 2001
From: Amy Benson <amybenson@hiveit.co.uk>
Date: Thu, 6 Mar 2025 09:36:36 +0000
Subject: [PATCH] EES-5916 api notification banner

---
 .../src/components/NotificationBanner.tsx     |  3 ++
 .../src/components/Page.tsx                   | 28 +++++++++++++++++++
 .../src/modules/permalink/PermalinkPage.tsx   |  1 +
 3 files changed, 32 insertions(+)

diff --git a/src/explore-education-statistics-common/src/components/NotificationBanner.tsx b/src/explore-education-statistics-common/src/components/NotificationBanner.tsx
index afc508d2074..cf9e83a5e3d 100644
--- a/src/explore-education-statistics-common/src/components/NotificationBanner.tsx
+++ b/src/explore-education-statistics-common/src/components/NotificationBanner.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode } from 'react';
 
 interface Props {
   children?: ReactNode;
+  className?: string;
   fullWidthContent?: boolean;
   heading?: string;
   role?: 'region' | 'alert';
@@ -13,6 +14,7 @@ interface Props {
 
 const NotificationBanner = ({
   children,
+  className,
   fullWidthContent = false,
   heading,
   role = 'region',
@@ -24,6 +26,7 @@ const NotificationBanner = ({
       aria-labelledby="govuk-notification-banner-title"
       className={classNames(
         'govuk-notification-banner govuk-!-margin-bottom-6',
+        className,
         {
           [styles.fullWidthContent]: fullWidthContent,
           [styles.error]: variant === 'error',
diff --git a/src/explore-education-statistics-frontend/src/components/Page.tsx b/src/explore-education-statistics-frontend/src/components/Page.tsx
index 31f9a3dc1da..6cce5d736a8 100644
--- a/src/explore-education-statistics-frontend/src/components/Page.tsx
+++ b/src/explore-education-statistics-frontend/src/components/Page.tsx
@@ -1,4 +1,5 @@
 import PhaseBanner from '@common/components/PhaseBanner';
+import NotificationBanner from '@common/components/NotificationBanner';
 import CookieBanner from '@frontend/components/CookieBanner';
 import UserTestingBanner from '@frontend/components/UserTestingBanner';
 import classNames from 'classnames';
@@ -9,6 +10,7 @@ import PageHeader from './PageHeader';
 import PageMeta, { PageMetaProps } from './PageMeta';
 import PageTitle from './PageTitle';
 import Feedback from './Feedback';
+import Link from './Link';
 
 type Props = {
   includeDefaultMetaTitle?: boolean;
@@ -22,6 +24,7 @@ type Props = {
   children?: ReactNode;
   wide?: boolean;
   isHomepage?: boolean;
+  showApiBanner?: boolean;
 } & BreadcrumbsProps;
 
 const Page = ({
@@ -37,6 +40,7 @@ const Page = ({
   wide = false,
   isHomepage = false,
   breadcrumbs = [],
+  showApiBanner = true,
 }: Props) => {
   return (
     <>
@@ -57,6 +61,30 @@ const Page = ({
         })}
       >
         <PhaseBanner url="https://forms.office.com/Pages/ResponsePage.aspx?id=yXfS-grGoU2187O4s0qC-XMiKzsnr8xJoWM_DeGwIu9UNDJHOEJDRklTNVA1SDdLOFJITEwyWU1OQS4u" />
+
+        {showApiBanner && (
+          <NotificationBanner
+            className="govuk-!-margin-top-6"
+            fullWidthContent
+            title="Important update"
+          >
+            <p>
+              The first data sets are now available in our new API,{' '}
+              <Link to="/data-catalogue?dataSetType=api">
+                view them in the data catalogue
+              </Link>{' '}
+              or read our{' '}
+              <Link to="https://api.education.gov.uk/statistics/docs/ ">
+                API documentation
+              </Link>
+              . If you have any questions or feedback, contact us at{' '}
+              <a href="mailto:explore.statistics@education.gov.uk">
+                explore.statistics@education.gov.uk
+              </a>
+            </p>
+          </NotificationBanner>
+        )}
+
         <Breadcrumbs
           breadcrumbs={
             isHomepage
diff --git a/src/explore-education-statistics-frontend/src/modules/permalink/PermalinkPage.tsx b/src/explore-education-statistics-frontend/src/modules/permalink/PermalinkPage.tsx
index ae2d7f6a5c6..aa3720074a6 100644
--- a/src/explore-education-statistics-frontend/src/modules/permalink/PermalinkPage.tsx
+++ b/src/explore-education-statistics-frontend/src/modules/permalink/PermalinkPage.tsx
@@ -35,6 +35,7 @@ const PermalinkPage: NextPage<Props> = ({ data }) => {
       title={`'${dataSetTitle}' from '${publicationTitle}'`}
       caption="Permanent data table"
       className={styles.permalinkPage}
+      showApiBanner={false}
       wide
       breadcrumbs={[
         { name: 'Data tables', link: '/data-tables' },