Merge pull request #554 from ONSdigital/routing-update-design

925 - Routing Styling Changes
ONSdigital · Aug 5, 2019 · 50ecd6a · 50ecd6a
2 parents 2da7d89 + f59e3a1
commit 50ecd6a
Show file tree

Hide file tree

Showing 55 changed files with 1,041 additions and 879 deletions.
diff --git a/eq-author/src/App/QuestionnairesPage/QuestionnairesView/QuestionnairesTable/index.js b/eq-author/src/App/QuestionnairesPage/QuestionnairesView/QuestionnairesTable/index.js
@@ -9,6 +9,7 @@ import { SORT_ORDER } from "../constants";
 
 import Row from "./Row";
 import TableHead from "./TableHead";
+import Panel from "components/Panel";
 
 const Table = styled.table`
   width: 100%;
@@ -18,12 +19,6 @@ const Table = styled.table`
   text-align: left;
 `;
 
-const Panel = styled.div`
-  background: white;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-`;
-
 const QuestionnairesTable = ({
   questionnaires,
   onDeleteQuestionnaire,

diff --git a/...ntroduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap b/...ntroduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CollapsiblesEditor should render 1`] = `
-<CollapsiblesEditor__DetailList>
+<div>
   <Reorder
     Transition={[Function]}
     data-test="collapsibles-list"
@@ -25,5 +25,5 @@ exports[`CollapsiblesEditor should render 1`] = `
   >
     Add collapsible
   </CollapsiblesEditor__AddButton>
-</CollapsiblesEditor__DetailList>
+</div>
 `;
diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/index.js b/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/index.js
@@ -12,10 +12,6 @@ import withCreateCollapsible from "./withCreateCollapsible";
 import CollapsibleEditor from "./CollapsibleEditor";
 import withMoveCollapsible from "./withMoveCollapsible";
 
-const DetailList = styled.div`
-  margin-bottom: 2em;
-`;
-
 const AddButton = styled(Button)`
   width: 100%;
 `;
@@ -26,7 +22,7 @@ export const CollapsiblesEditor = ({
   moveCollapsible,
   introductionId,
 }) => (
-  <DetailList>
+  <div>
     <Reorder
       list={collapsibles}
       onMove={moveCollapsible}
@@ -44,7 +40,7 @@ export const CollapsiblesEditor = ({
     >
       Add collapsible
     </AddButton>
-  </DetailList>
+  </div>
 );
 
 CollapsiblesEditor.fragments = [...CollapsibleEditor.fragments];

diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/LegalBasisField.js b/eq-author/src/App/introduction/Design/IntroductionEditor/LegalBasisField.js
@@ -9,7 +9,6 @@ import iconCheck from "./icon-check.svg";
 
 const LegalField = styled.div`
   display: flex;
-  margin-bottom: 2em;
 `;
 
 const LegalInput = styled(Input)`

diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/index.js b/eq-author/src/App/introduction/Design/IntroductionEditor/index.js
@@ -23,12 +23,11 @@ import withUpdateQuestionnaireIntroduction from "./withUpdateQuestionnaireIntrod
 const Section = styled.section`
   &:not(:last-of-type) {
     border-bottom: 1px solid #e0e0e0;
-    margin-bottom: 2em;
   }
 `;
 
 const Padding = styled.div`
-  padding: 0 2em;
+  padding: 2em;
 `;
 
 const SectionTitle = styled.h2`

diff --git a/eq-author/src/App/introduction/IntroductionLayout.js b/eq-author/src/App/introduction/IntroductionLayout.js
@@ -1,18 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
 
 import EditorLayout from "components/EditorLayout";
 
-const Padding = styled.div`
-  padding: 2em 0 0;
-  position: relative;
-  width: 100%;
-`;
+import Panel from "components/Panel";
 
 const IntroductionLayout = ({ children }) => (
   <EditorLayout preview title="Questionnaire Introduction">
-    <Padding>{children}</Padding>
+    <Panel>{children}</Panel>
   </EditorLayout>
 );
 

diff --git a/eq-author/src/App/introduction/__snapshots__/IntroductionLayout.test.js.snap b/eq-author/src/App/introduction/__snapshots__/IntroductionLayout.test.js.snap
@@ -5,8 +5,8 @@ exports[`IntroductionLayout should render 1`] = `
   preview={true}
   title="Questionnaire Introduction"
 >
-  <IntroductionLayout__Padding>
+  <Panel>
     <div />
-  </IntroductionLayout__Padding>
+  </Panel>
 </EditorLayout>
 `;
diff --git a/eq-author/src/App/page/Design/answers/MultipleChoiceAnswer/__snapshots__/Option.test.js.snap b/eq-author/src/App/page/Design/answers/MultipleChoiceAnswer/__snapshots__/Option.test.js.snap
@@ -242,7 +242,7 @@ exports[`Option should render a checkbox 1`] = `
 }
 
 .c0 {
-  border: 1px solid #c3c3c3;
+  border: 1px solid #d6d8da;
   padding: 1em 1em 0;
   border-radius: 4px;
   position: relative;

diff --git a/eq-author/src/App/page/Design/answers/dummy/TextArea/__snapshots__/index.test.js.snap b/eq-author/src/App/page/Design/answers/dummy/TextArea/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`components/Answers/Dummy/TextArea shoulder render 1`] = `
   -webkit-transition: outline-color 100ms ease-in,border-color 100ms ease-in;
   transition: outline-color 100ms ease-in,border-color 100ms ease-in;
   outline: 1px solid transparent;
-  border-color: #c3c3c3;
+  border-color: #d6d8da;
   padding: 1.2em 1.2em 1.2em 2em;
   position: relative;
   background-color: transparent;

diff --git a/eq-author/src/App/page/Design/index.js b/eq-author/src/App/page/Design/index.js
@@ -10,6 +10,8 @@ import Loading from "components/Loading";
 import Error from "components/Error";
 import EditorLayout from "components/EditorLayout";
 
+import Panel from "components/Panel";
+
 import withCreateQuestionPage from "enhancers/withCreateQuestionPage";
 
 import PropertiesPanel from "../PropertiesPanel";
@@ -92,7 +94,7 @@ export class UnwrappedPageRoute extends React.Component {
         title={(page || {}).displayName || ""}
         {...deriveAvailableTabs(page)}
       >
-        {this.renderContent()}
+        <Panel>{this.renderContent()}</Panel>
       </EditorLayout>
     );
   }

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js
@@ -8,7 +8,7 @@ import PageTitle from "components/preview/elements/PageTitle";
 import Info from "components/preview/elements/Info";
 
 import EditorLayout from "components/EditorLayout";
-
+import Panel from "components/Panel";
 import { Grid, Column } from "components/Grid";
 
 import { colors } from "constants/theme";
@@ -82,57 +82,59 @@ const SummaryTotalLabel = styled.div`
 const CalculatedSummaryPagePreview = ({ page }) => {
   return (
     <EditorLayout page={page} preview routing={false}>
-      <Container>
-        <PageTitle title={page.title} />
-        <Info>Please review your answers and confirm these are correct.</Info>
-
-        {page.summaryAnswers.length > 0 ? (
-          <Summary>
-            {page.summaryAnswers.map(answer => (
-              <SummaryItem key={answer.id}>
-                <Grid>
-                  <Column cols={7}>
-                    <SummaryLabel data-test="answer-item">
-                      {answer.displayName}
-                    </SummaryLabel>
-                  </Column>
-                  <Column cols={3}>
-                    <SummaryValue>Value</SummaryValue>
-                  </Column>
-                  <Column cols={2}>
-                    <SummaryLink>Change</SummaryLink>
-                  </Column>
-                </Grid>
-              </SummaryItem>
-            ))}
-
-            {page.totalTitle ? (
-              <SummaryTotal>
-                <Grid>
-                  <Column cols={7}>
-                    <SummaryTotalLabel
-                      data-test="total-title"
-                      dangerouslySetInnerHTML={{ __html: page.totalTitle }}
-                    />
-                  </Column>
-                  <Column cols={3}>
-                    <SummaryValue>Value</SummaryValue>
-                  </Column>
-                  <Column cols={2} />
-                </Grid>
-              </SummaryTotal>
-            ) : (
-              <Error large data-test="no-total-title">
-                Missing total title
-              </Error>
-            )}
-          </Summary>
-        ) : (
-          <Error large data-test="no-answers-selected">
-            No answers selected
-          </Error>
-        )}
-      </Container>
+      <Panel>
+        <Container>
+          <PageTitle title={page.title} />
+          <Info>Please review your answers and confirm these are correct.</Info>
+
+          {page.summaryAnswers.length > 0 ? (
+            <Summary>
+              {page.summaryAnswers.map(answer => (
+                <SummaryItem key={answer.id}>
+                  <Grid>
+                    <Column cols={7}>
+                      <SummaryLabel data-test="answer-item">
+                        {answer.displayName}
+                      </SummaryLabel>
+                    </Column>
+                    <Column cols={3}>
+                      <SummaryValue>Value</SummaryValue>
+                    </Column>
+                    <Column cols={2}>
+                      <SummaryLink>Change</SummaryLink>
+                    </Column>
+                  </Grid>
+                </SummaryItem>
+              ))}
+
+              {page.totalTitle ? (
+                <SummaryTotal>
+                  <Grid>
+                    <Column cols={7}>
+                      <SummaryTotalLabel
+                        data-test="total-title"
+                        dangerouslySetInnerHTML={{ __html: page.totalTitle }}
+                      />
+                    </Column>
+                    <Column cols={3}>
+                      <SummaryValue>Value</SummaryValue>
+                    </Column>
+                    <Column cols={2} />
+                  </Grid>
+                </SummaryTotal>
+              ) : (
+                <Error large data-test="no-total-title">
+                  Missing total title
+                </Error>
+              )}
+            </Summary>
+          ) : (
+            <Error large data-test="no-answers-selected">
+              No answers selected
+            </Error>
+          )}
+        </Container>
+      </Panel>
     </EditorLayout>
   );
 };

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.test.js
@@ -36,15 +36,15 @@ describe("CalculatedSummaryPreview", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it("should render empty box when no answers have been selected", () => {
-    page.electedSummaryAnswers = [];
-    const wrapper = shallow(<CalculatedSummaryPreview page={page} />);
-    expect(wrapper.find(byTestAttr("no-selected-answers"))).toBeTruthy();
-  });
-
   it("should render empty box when no total-title given", () => {
     page.totalTitle = "";
     const wrapper = shallow(<CalculatedSummaryPreview page={page} />);
     expect(wrapper.find(byTestAttr("no-total-title"))).toBeTruthy();
   });
+
+  it("should render 'no answers selected' message", () => {
+    page.summaryAnswers = [];
+    const wrapper = shallow(<CalculatedSummaryPreview page={page} />);
+    expect(wrapper.find(byTestAttr("no-answers-selected"))).toBeTruthy();
+  });
 });