Merge pull request #3098 from ONSdigital/EAR-2291-Update-content-for-…

…calculated-summary-questions EAR 2291 update content for calculated summary questions
ONSdigital · Feb 22, 2024 · a0c23bf · a0c23bf
2 parents d74418a + ec2b96f
commit a0c23bf
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/eq-author/src/App/page/Design/CalculatedSummaryPageEditor/index.js b/eq-author/src/App/page/Design/CalculatedSummaryPageEditor/index.js
@@ -4,6 +4,7 @@ import { propType } from "graphql-anywhere";
 import { get, flowRight, some } from "lodash";
 import styled from "styled-components";
 import gql from "graphql-tag";
+import DescribedText from "components/DescribedText";
 
 import { richTextEditorErrors } from "constants/validationMessages";
 import { colors } from "constants/theme";
@@ -202,7 +203,11 @@ export const CalculatedSummaryPageEditor = (props) => {
         <RichTextEditor
           id="summary-title"
           name="title"
-          label="Calculated summary title"
+          label={
+            <DescribedText description='The question "Is this correct?" will be added to the end of the calculated summary title.'>
+              Calculated summary title
+            </DescribedText>
+          }
           placeholder=""
           value={page.title}
           onUpdate={onChangeUpdate}
@@ -217,6 +222,7 @@ export const CalculatedSummaryPageEditor = (props) => {
           autoFocus={!page.title}
           pageType={page.pageType}
         />
+
         <HorizontalRule />
         <PageTitleContainer
           pageDescription={page.pageDescription}

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js
@@ -5,7 +5,6 @@ import { propType } from "graphql-anywhere";
 import styled from "styled-components";
 import Error from "components/preview/Error";
 import PageTitle from "components/preview/elements/PageTitle";
-import Info from "components/preview/elements/Info";
 
 import EditorLayout from "components/EditorLayout";
 import Panel from "components/Panel";
@@ -16,6 +15,20 @@ import { colors } from "constants/theme";
 import CalculatedSummaryPageEditor from "../Design/CalculatedSummaryPageEditor";
 import { useSetNavigationCallbacksForPage } from "components/NavigationCallbacks";
 
+const Button = styled.div`
+  color: white;
+  background-color: ${colors.positive};
+  border: 2px solid ${colors.positive};
+  padding: 0.75rem 1rem;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 3px;
+  display: inline-block;
+  text-rendering: optimizeLegibility;
+  margin-bottom: 2em;
+`;
+
 const Container = styled.div`
   padding: 2em;
   font-size: 1.1em;
@@ -44,7 +57,9 @@ const Summary = styled.div`
 `;
 
 const SummaryItem = styled.div`
-  border-top: 1px solid #999;
+  &:not(:first-of-type) {
+    border-top: 1px solid #999;
+  }
   border-radius: 0;
   position: relative;
   padding: 1rem 0;
@@ -89,6 +104,17 @@ const CalculatedSummaryPagePreview = ({ page }) => {
     section: page?.section,
   });
 
+  const addConfirmationToTitle = () => {
+    if (page.title) {
+      const titleWithoutClosingParagraphTag = page.title.replace(/<\/p>$/, "");
+      if (titleWithoutClosingParagraphTag.endsWith(".")) {
+        return `${page.title} Is this correct?`;
+      } else {
+        return `${page.title}. Is this correct?`;
+      }
+    }
+  };
+
   return (
     <EditorLayout
       title={page.displayName}
@@ -102,9 +128,7 @@ const CalculatedSummaryPagePreview = ({ page }) => {
     >
       <Panel data-test="calSum test page">
         <Container>
-          <PageTitle title={page.title} />
-          <Info>Please review your answers and confirm these are correct.</Info>
-
+          <PageTitle title={addConfirmationToTitle()} />
           {page.summaryAnswers.length > 0 ? (
             <Summary>
               {page.summaryAnswers.map((answer) => (
@@ -151,6 +175,7 @@ const CalculatedSummaryPagePreview = ({ page }) => {
               No answers selected
             </Error>
           )}
+          <Button>Yes, I confirm this is correct</Button>
         </Container>
       </Panel>
     </EditorLayout>