Merge pull request #5660 from dfe-analytical-services/EES-5916

EES-5916 api notification banner

Author: mmyoungman

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',

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

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' },