EES-4510 release type modal on release page

src/explore-education-statistics-admin/src/pages/release/content/components/ReleaseContent.tsx

@@ -4,15 +4,16 @@ import PrintThisPage from '@admin/components/PrintThisPage';
 import RouteLeavingGuard from '@admin/components/RouteLeavingGuard';
 import { useConfig } from '@admin/contexts/ConfigContext';
 import { useEditingContext } from '@admin/contexts/EditingContext';
-import BasicReleaseSummary from '@admin/pages/release/content/components/BasicReleaseSummary';
 import RelatedPagesSection from '@admin/pages/release/content/components/RelatedPagesSection';
+import ReleaseHelpAndSupportSection from '@common/modules/release/components/ReleaseHelpAndSupportSection';
 import ReleaseBlock from '@admin/pages/release/content/components/ReleaseBlock';
 import ReleaseContentAccordion from '@admin/pages/release/content/components/ReleaseContentAccordion';
 import ReleaseEditableBlock from '@admin/pages/release/content/components/ReleaseEditableBlock';
 import ReleaseHeadlines from '@admin/pages/release/content/components/ReleaseHeadlines';
-import ReleaseHelpAndSupportSection from '@admin/pages/release/content/components/ReleaseHelpAndSupportSection';
+import ReleaseNotesSection from '@admin/pages/release/content/components/ReleaseNotesSection';
 import { useReleaseContentState } from '@admin/pages/release/content/contexts/ReleaseContentContext';
 import useReleaseContentActions from '@admin/pages/release/content/contexts/useReleaseContentActions';
+import { getReleaseApprovalStatusLabel } from '@admin/pages/release/utils/releaseSummaryUtil';
 import { ReleaseRouteParams } from '@admin/routes/releaseRoutes';
 import {
   preReleaseAccessListRoute,
@@ -25,10 +26,12 @@ import ButtonText from '@common/components/ButtonText';
 import Details from '@common/components/Details';
 import PageSearchForm from '@common/components/PageSearchForm';
 import RelatedAside from '@common/components/RelatedAside';
+import ScrollableContainer from '@common/components/ScrollableContainer';
+import Tag from '@common/components/Tag';
+import ReleaseSummarySection from '@common/modules/release/components/ReleaseSummarySection';
 import ReleaseDataAndFiles from '@common/modules/release/components/ReleaseDataAndFiles';
 import React, { useCallback, useMemo } from 'react';
 import { generatePath, useLocation } from 'react-router';
-import ScrollableContainer from '@common/components/ScrollableContainer';
 
 interface MethodologyLink {
   key: string;
@@ -127,7 +130,26 @@ const ReleaseContent = () => {
 
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-two-thirds">
-          <BasicReleaseSummary release={release} />
+          <ReleaseSummarySection
+            isEditing={editingMode === 'edit'}
+            lastUpdated={release.updates[0]?.on}
+            release={release}
+            releaseDate={release.published ?? release.publishScheduled}
+            renderReleaseNotes={<ReleaseNotesSection release={release} />}
+            renderStatusTags={
+              <Tag className="govuk-!-margin-right-3 govuk-!-margin-bottom-3">
+                {getReleaseApprovalStatusLabel(release.approvalStatus)}
+              </Tag>
+            }
+            renderSubscribeLink={
+              <a
+                className="govuk-!-display-none-print govuk-!-font-weight-bold"
+                href="#"
+              >
+                Sign up for email alerts
+              </a>
+            }
+          />
 
           <div id="releaseSummary">
             {release.summarySection && (
@@ -411,7 +433,23 @@ const ReleaseContent = () => {
 
       <ReleaseContentAccordion release={release} sectionName="Contents" />
 
-      <ReleaseHelpAndSupportSection release={release} />
+      <ReleaseHelpAndSupportSection
+        release={release}
+        renderExternalMethodologyLink={externalMethodology => (
+          <Link to={externalMethodology.url}>{externalMethodology.title}</Link>
+        )}
+        renderMethodologyLink={methodology => {
+          <>
+            {editingMode === 'edit' ? (
+              <a>{`${methodology.title}`}</a>
+            ) : (
+              <Link to={`/methodology/${methodology.id}/summary`}>
+                {methodology.title}
+              </Link>
+            )}
+          </>;
+        }}
+      />
       <PrintThisPage />
     </>
   );

src/explore-education-statistics-common/src/components/GlossaryEntryButton.tsx

@@ -40,15 +40,11 @@ export default function GlossaryEntryButton({
 
       {glossaryEntry && (
         <Modal
+          showClose
           title={glossaryEntry.title}
           onExit={() => setGlossaryEntry(undefined)}
         >
-          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-          <div className={styles.content} tabIndex={0}>
-            {parseHtmlString(sanitizeHtml(glossaryEntry.body))}
-          </div>
-
-          <Button onClick={() => setGlossaryEntry(undefined)}>Close</Button>
+          {parseHtmlString(sanitizeHtml(glossaryEntry.body))}
         </Modal>
       )}
     </>

src/explore-education-statistics-common/src/components/Modal.module.scss

@@ -20,8 +20,10 @@
   background: #fff;
   cursor: initial;
   margin: 0 govuk-spacing(2);
+  max-height: 98vh;
   max-width: map-get($govuk-breakpoints, 'desktop');
   min-width: 30vh;
+  overflow-y: auto;
   padding: govuk-spacing(6);
 
   @include govuk-media-query($from: tablet) {
@@ -46,3 +48,13 @@
     outline-offset: -$govuk-focus-width;
   }
 }
+
+.content {
+  margin-bottom: govuk-spacing(5);
+  max-height: 70vh;
+  overflow-y: auto;
+
+  &:focus {
+    outline: $govuk-focus-colour solid $govuk-focus-width;
+  }
+}

src/explore-education-statistics-common/src/components/Modal.tsx

@@ -2,33 +2,38 @@ import styles from '@common/components/Modal.module.scss';
 import classNames from 'classnames';
 import React, { ReactNode, useEffect } from 'react';
 import BaseModal from 'react-modal';
+import Button from './Button';
 
 export interface ModalProps {
+  cancelText?: string;
   children: ReactNode;
   className?: string;
   closeOnOutsideClick?: boolean;
   closeOnEsc?: boolean;
   fullScreen?: boolean;
   hideTitle?: boolean;
   open?: boolean;
+  showClose?: boolean;
   title: string;
   underlayClass?: string;
   onOpen?: () => void;
   onExit?: () => void;
 }
 
 const Modal = ({
+  cancelText = 'Close',
   children,
   className,
   closeOnOutsideClick = true,
   closeOnEsc = true,
   fullScreen = false,
   hideTitle = false,
   open = true,
-  onOpen,
-  onExit,
+  showClose = false,
   title,
   underlayClass,
+  onOpen,
+  onExit,
 }: ModalProps) => {
   const appElement =
     typeof document !== 'undefined'
@@ -74,6 +79,15 @@ const Modal = ({
         {title}
       </h2>
       {children}
+
+      {showClose && (
+        <Button
+          className="govuk-button govuk-!-margin-bottom-0"
+          onClick={onExit}
+        >
+          {cancelText}
+        </Button>
+      )}
     </BaseModal>
   );
 };