diff --git a/eq-author-api/schema/resolvers/routing2/routingRule2/index.js b/eq-author-api/schema/resolvers/routing2/routingRule2/index.js index 3108d0d723..4ef894ff1e 100644 --- a/eq-author-api/schema/resolvers/routing2/routingRule2/index.js +++ b/eq-author-api/schema/resolvers/routing2/routingRule2/index.js @@ -146,6 +146,7 @@ Resolvers.Mutation = { ), deleteRoutingRule2: createMutation((root, { input }, ctx) => { const pages = getPages(ctx); + const page = find(page => { const routing = page.routing || { rules: [] }; if (some({ id: input.id }, routing.rules)) { @@ -154,6 +155,7 @@ Resolvers.Mutation = { }, pages); const routing = page.routing; + routing.rules = reject({ id: input.id }, routing.rules); if (routing.rules.length === 0) { page.routing = null; diff --git a/eq-author/src/App/QuestionnairesPage/QuestionnairesView/QuestionnairesTable/index.js b/eq-author/src/App/QuestionnairesPage/QuestionnairesView/QuestionnairesTable/index.js index dfcae74735..d51c25547f 100644 --- 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/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap b/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap index 51d22326f7..3d0576c667 100644 --- a/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CollapsiblesEditor should render 1`] = ` - +
Add collapsible - +
`; diff --git a/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/index.js b/eq-author/src/App/introduction/Design/IntroductionEditor/CollapsiblesEditor/index.js index 7e0cf0f3bc..6ffcaf5b0d 100644 --- 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, }) => ( - +
Add collapsible - +
); 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 index 1bd2cb2236..13af8c02bd 100644 --- 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 index 8396b5d1ba..18daf31d20 100644 --- 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 index 1ae819c71d..b5e4d92774 100644 --- 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 }) => ( - {children} + {children} ); diff --git a/eq-author/src/App/introduction/__snapshots__/IntroductionLayout.test.js.snap b/eq-author/src/App/introduction/__snapshots__/IntroductionLayout.test.js.snap index 7393245ba5..42c2084faa 100644 --- 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" > - +
- + `; 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 index e8dc1dfa1f..4700e8175e 100644 --- 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 index 81ba33a82c..4ad20d5e1a 100644 --- 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 index 8bb5faea3a..e36bca0ac6 100644 --- 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()} + {this.renderContent()} ); } diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js index 5f3d186714..ba7b5bade6 100644 --- 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 ( - - - Please review your answers and confirm these are correct. - - {page.summaryAnswers.length > 0 ? ( - - {page.summaryAnswers.map(answer => ( - - - - - {answer.displayName} - - - - Value - - - Change - - - - ))} - - {page.totalTitle ? ( - - - - - - - Value - - - - - ) : ( - - Missing total title - - )} - - ) : ( - - No answers selected - - )} - + + + + Please review your answers and confirm these are correct. + + {page.summaryAnswers.length > 0 ? ( + + {page.summaryAnswers.map(answer => ( + + + + + {answer.displayName} + + + + Value + + + Change + + + + ))} + + {page.totalTitle ? ( + + + + + + + Value + + + + + ) : ( + + Missing total title + + )} + + ) : ( + + No answers selected + + )} + + ); }; diff --git a/eq-author/src/App/page/Preview/QuestionPagePreview.js b/eq-author/src/App/page/Preview/QuestionPagePreview.js index 69705214d7..fd462a94e0 100644 --- a/eq-author/src/App/page/Preview/QuestionPagePreview.js +++ b/eq-author/src/App/page/Preview/QuestionPagePreview.js @@ -16,6 +16,7 @@ import PropertiesPanel from "../PropertiesPanel"; import IconInfo from "./icon-info.svg?inline"; import IconChevron from "./icon-chevron.svg"; +import Panel from "components/Panel"; const Container = styled.div` padding: 2em; @@ -48,7 +49,7 @@ const Guidance = styled.div` margin-bottom: 2em; `; -const Panel = styled.div` +const Box = styled.div` border-left: 10px solid #033e58; background: #eff0f9; padding: 1em; @@ -107,83 +108,91 @@ const QuestionPagePreview = ({ page }) => { title={page.displayName} renderPanel={() => } > - - - - {descriptionEnabled && ( -
- {description ? ( - - ) : ( - Missing description - )} -
- )} - - {definitionEnabled && ( -
- - {definitionLabel || Missing definition label} - - - {definitionContent ? ( - + + + + + {descriptionEnabled && ( +
+ {description ? ( + ) : ( - - Missing definition content - - )} - -
- )} - - {guidanceEnabled && ( -
- {guidance ? ( - - - - ) : ( - Missing guidance - )} -
- )} - - {answers.length ? ( - - {answers.map(answer => ( - - ))} - - ) : ( - - - No answers have been added to this question. - - - )} - - {additionalInfoEnabled && ( -
- - {additionalInfoLabel || ( - Missing additional information label + Missing description )} - - - {additionalInfoContent ? ( - +
+ )} + + {definitionEnabled && ( +
+ + {definitionLabel || ( + Missing definition label + )} + + + {definitionContent ? ( + + ) : ( + + Missing definition content + + )} + +
+ )} + + {guidanceEnabled && ( +
+ {guidance ? ( + + + ) : ( - - Missing additional information content - + Missing guidance )} - - - )} - +
+ )} + + {answers.length ? ( + + {answers.map(answer => ( + + ))} + + ) : ( + + + No answers have been added to this question. + + + )} + + {additionalInfoEnabled && ( +
+ + {additionalInfoLabel || ( + Missing additional information label + )} + + + {additionalInfoContent ? ( + + ) : ( + + Missing additional information content + + )} + +
+ )} + + ); }; diff --git a/eq-author/src/App/page/Preview/__snapshots__/CalculatedSummaryPreview.test.js.snap b/eq-author/src/App/page/Preview/__snapshots__/CalculatedSummaryPreview.test.js.snap index 82e438aedd..8f5d704397 100644 --- a/eq-author/src/App/page/Preview/__snapshots__/CalculatedSummaryPreview.test.js.snap +++ b/eq-author/src/App/page/Preview/__snapshots__/CalculatedSummaryPreview.test.js.snap @@ -37,140 +37,142 @@ exports[`CalculatedSummaryPreview should render 1`] = ` preview={true} routing={false} > - - - - Please review your answers and confirm these are correct. - - - - + + + + Please review your answers and confirm these are correct. + + + - - - Answer 1 - - - - - Value - - - - - Change - - - - - - + Answer 1 + + + + + Value + + + + + Change + + + + + - - - Answer 2 - - - - - Value - - - - - Change - - - - - - + Answer 2 + + + + + Value + + + + + Change + + + + + - - - Answer 3 - - - - - Value - - - - - Change - - - - - - - + Answer 3 + + + + + Value + + + + + Change + + + + + + - Total be:

", + + Total be:

", + } } - } - data-test="total-title" + data-test="total-title" + /> + + + + Value + + + - - - - Value - - - - - - - + + + + + `; diff --git a/eq-author/src/App/page/Preview/__snapshots__/QuestionPagePreview.test.js.snap b/eq-author/src/App/page/Preview/__snapshots__/QuestionPagePreview.test.js.snap index 7fac380e04..79ff4babc7 100644 --- a/eq-author/src/App/page/Preview/__snapshots__/QuestionPagePreview.test.js.snap +++ b/eq-author/src/App/page/Preview/__snapshots__/QuestionPagePreview.test.js.snap @@ -7,78 +7,80 @@ exports[`QuestionPagePreview should render 1`] = ` routing={true} title="Question" > - - -
- Description

", - } - } + + + -
- - - <p>Definition Label</p> - - - + Definition Content

", + "__html": "

Description

", } } /> - - -
- - Guidance

", +
+ + + <p>Definition Label</p> + + + Definition Content

", + } } - } - /> - - - - - - - - <p>Additional Info Label</p> - - - + + +
+ + Guidance

", + } + } + /> + +
+ + Additional Info Content

", + "id": "1", + "type": "TextField", } } + key="1" /> - - - + + + + <p>Additional Info Label</p> + + + Additional Info Content

", + } + } + /> + + + + `; diff --git a/eq-author/src/App/page/Preview/index.js b/eq-author/src/App/page/Preview/index.js index 41466a7aa0..eae23cb6e1 100644 --- a/eq-author/src/App/page/Preview/index.js +++ b/eq-author/src/App/page/Preview/index.js @@ -13,13 +13,16 @@ import CalculatedSummaryPageEditor from "App/page/Design/CalculatedSummaryPageEd import QuestionPagePreview from "./QuestionPagePreview"; import CalculatedSummaryPreview from "./CalculatedSummaryPreview"; +import Panel from "components/Panel"; export const UnwrappedPreviewPageRoute = props => { const { loading, data } = props; if (loading) { return ( - Preview loading… + + Preview loading… + ); } diff --git a/eq-author/src/App/page/Routing/DestinationSelector/index.js b/eq-author/src/App/page/Routing/DestinationSelector/index.js index 9d98ab9ea8..a6c9f141ec 100644 --- a/eq-author/src/App/page/Routing/DestinationSelector/index.js +++ b/eq-author/src/App/page/Routing/DestinationSelector/index.js @@ -6,9 +6,12 @@ import { Grid, Column } from "components/Grid"; import PropTypes from "prop-types"; import RoutingDestinationContentPicker from "./RoutingDestinationContentPicker"; +import { colors } from "constants/theme"; const RoutingRuleResult = styled.div` - padding: 1em 1em 1em 0.7em; + padding: 0.5em 0.5em 0.5em 1.5em; + background: ${colors.lightMediumGrey}; + border-left: 5px solid ${colors.primary}; `; const Label = styled.label` diff --git a/eq-author/src/App/page/Routing/RoutingPage/NoRouting.js b/eq-author/src/App/page/Routing/RoutingPage/NoRouting.js index 3f8471d8aa..e0a9889662 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/NoRouting.js +++ b/eq-author/src/App/page/Routing/RoutingPage/NoRouting.js @@ -13,8 +13,7 @@ const Container = styled.div` justify-content: center; text-align: center; flex-direction: column; - padding: 1em 0; - margin-bottom: 0; + padding: 3em 0 2em; `; const Icon = styled(IconRouting)` diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/__snapshots__/index.test.js.snap b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/__snapshots__/index.test.js.snap index 45c705cba5..89d3e52399 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/__snapshots__/index.test.js.snap @@ -9,42 +9,72 @@ exports[`BinaryExpressionEditor should render consistently 1`] = ` fillHeight={true} > IF - + + + + + + + - - + + + Remove + + + - Remove - - + + Add + + + @@ -91,7 +120,7 @@ exports[`BinaryExpressionEditor should render consistently 1`] = ` diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/createBinaryExpression.graphql b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/createBinaryExpression.graphql similarity index 81% rename from eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/createBinaryExpression.graphql rename to eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/createBinaryExpression.graphql index 7040c7a5dd..af89ac5b5b 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/createBinaryExpression.graphql +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/createBinaryExpression.graphql @@ -1,4 +1,4 @@ -#import "./BinaryExpressionEditor/fragment.graphql" +#import "./fragment.graphql" mutation createBinaryExpression2($input: CreateBinaryExpression2Input!) { createBinaryExpression2(input: $input) { diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-minus.svg b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-minus.svg new file mode 100644 index 0000000000..006ce9c356 --- /dev/null +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-minus.svg @@ -0,0 +1,14 @@ + + + + + icon-minus + + + Created with Sketch. + + + + + + diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-plus.svg b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-plus.svg new file mode 100644 index 0000000000..39a2ffd9c4 --- /dev/null +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/icon-plus.svg @@ -0,0 +1,14 @@ + + + + + icon-plus + + + Created with Sketch. + + + + + + diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.js index c9681aeabf..30aeb64b93 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.js @@ -2,7 +2,7 @@ import React from "react"; import { PropTypes } from "prop-types"; import styled from "styled-components"; import { TransitionGroup } from "react-transition-group"; -import { get, isNil, uniqueId, flow } from "lodash/fp"; +import { get, uniqueId, flow, noop } from "lodash/fp"; import { propType } from "graphql-anywhere"; import { NavLink, withRouter } from "react-router-dom"; @@ -12,7 +12,7 @@ import { NO_ROUTABLE_ANSWER_ON_PAGE, SELECTED_ANSWER_DELETED, } from "constants/routing-left-side"; -import DeleteButton from "components/buttons/DeleteButton"; + import IconText from "components/IconText"; import { Grid, Column } from "components/Grid"; import { buildPagePath } from "utils/UrlUtils"; @@ -22,15 +22,19 @@ import Transition from "../../../../Transition"; import RoutingAnswerContentPicker from "./RoutingAnswerContentPicker"; import svgPath from "./path.svg"; import svgPathEnd from "./path-end.svg"; -import IconClose from "./icon-close.svg?inline"; +import IconMinus from "./icon-minus.svg?inline"; +import IconPlus from "./icon-plus.svg?inline"; import { Alert, AlertText, AlertTitle } from "./Alert"; import fragment from "./fragment.graphql"; import withUpdateLeftSide from "./withUpdateLeftSide"; import withDeleteBinaryExpression from "./withDeleteBinaryExpression"; +import withCreateBinaryExpression from "./withCreateBinaryExpression"; import withUpdateRightSide from "./withUpdateRightSide"; import withUpdateBinaryExpression from "./withUpdateBinaryExpression"; import MultipleChoiceAnswerOptionsSelector from "./MultipleChoiceAnswerOptionsSelector"; import NumberAnswerSelector from "./NumberAnswerSelector"; +import { colors } from "constants/theme"; +import { Select } from "components/Forms"; const Label = styled.label` width: 100%; @@ -60,11 +64,69 @@ const ConnectedPath = styled.div` } `; -const RemoveButton = styled(DeleteButton)` +const ActionButtons = styled.div` display: block; + display: flex; margin: auto; + align-items: center; + justify-content: center; +`; + +const ActionButton = styled.button` + --color-text: white; + + appearance: none; + border: none; + width: 18px; + height: 18px; + background: ${colors.primary}; + border-radius: 100px; position: relative; right: 2px; + margin: 0.25em; + cursor: pointer; + &:focus { + box-shadow: 0 0 0 3px ${colors.tertiary}; + outline: none; + } + svg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + &[disabled] { + opacity: 0.3; + pointer-events: none; + } +`; + +const RemoveButton = styled(ActionButton)` + &:hover { + background: ${colors.red}; + } +`; + +const AddButton = styled(ActionButton)` + &:hover { + background: ${colors.green}; + } +`; + +const Flex = styled.div` + display: flex; +`; + +const StyledSelect = styled(Select)` + flex: 1 1 auto; + width: auto; + margin-right: 1em; +`; + +const ContentPicker = styled(RoutingAnswerContentPicker)` + flex: 1 1 auto; `; /* eslint-disable react/prop-types */ @@ -128,13 +190,17 @@ export class UnwrappedBinaryExpressionEditor extends React.Component { static propTypes = { expression: propType(fragment).isRequired, label: PropTypes.string.isRequired, + expressionGroupId: PropTypes.string.isRequired, isOnlyExpression: PropTypes.bool.isRequired, + isLastExpression: PropTypes.bool.isRequired, updateLeftSide: PropTypes.func.isRequired, deleteBinaryExpression: PropTypes.func.isRequired, + createBinaryExpression: PropTypes.func.isRequired, canAddAndCondition: PropTypes.bool.isRequired, updateRightSide: PropTypes.func.isRequired, updateBinaryExpression: PropTypes.func.isRequired, match: CustomPropTypes.match, + className: PropTypes.string, }; id = uniqueId("RoutingCondition"); @@ -154,6 +220,10 @@ export class UnwrappedBinaryExpressionEditor extends React.Component { this.props.deleteBinaryExpression(this.props.expression.id); }; + handleAddClick = () => { + this.props.createBinaryExpression(this.props.expressionGroupId); + }; + handleUpdateRightSide = updateField => { this.props.updateRightSide(this.props.expression, updateField); }; @@ -184,48 +254,73 @@ export class UnwrappedBinaryExpressionEditor extends React.Component { render() { const routingEditor = this.renderEditor(); + const { + className, + label, + expression, + isOnlyExpression, + isLastExpression, + } = this.props; + return ( -
+
- - + + - - + + + + + + + + - - - - Remove - - + + + + + Remove + + + + + Add + + + - - + + - + - - {routingEditor} - + {routingEditor} - +
); @@ -236,6 +331,7 @@ const withMutations = flow( withRouter, withUpdateLeftSide, withDeleteBinaryExpression, + withCreateBinaryExpression, withUpdateRightSide, withUpdateBinaryExpression ); diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.test.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.test.js index 9218360fdf..f61009818b 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.test.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/index.test.js @@ -8,7 +8,6 @@ import { } from "constants/routing-left-side"; import { byTestAttr } from "tests/utils/selectors"; -import RoutingAnswerContentPicker from "./RoutingAnswerContentPicker"; import { UnwrappedBinaryExpressionEditor as BinaryExpressionEditor } from "./"; import MultipleChoiceAnswerOptionsSelector from "./MultipleChoiceAnswerOptionsSelector"; import NumberAnswerSelector from "./NumberAnswerSelector"; @@ -23,7 +22,10 @@ describe("BinaryExpressionEditor", () => { updateLeftSide: jest.fn(), updateRightSide: jest.fn(), updateBinaryExpression: jest.fn(), + createBinaryExpression: jest.fn(), isOnlyExpression: false, + isLastExpression: false, + expressionGroupId: "1", expression: { id: "1", left: { @@ -72,6 +74,14 @@ describe("BinaryExpressionEditor", () => { }); }); + it("should call createBinaryExpression when add button is clicked", () => { + const wrapper = shallow(); + wrapper.find(byTestAttr("btn-add")).simulate("click"); + expect(defaultProps.createBinaryExpression).toHaveBeenCalledWith( + defaultProps.expressionGroupId + ); + }); + it("should call deleteBinaryExpression when remove button is clicked", () => { const wrapper = shallow(); wrapper.find(byTestAttr("btn-remove")).simulate("click"); @@ -83,7 +93,7 @@ describe("BinaryExpressionEditor", () => { it("should correctly submit from RoutingAnswerContentPicker", () => { const wrapper = shallow(); - wrapper.find(RoutingAnswerContentPicker).simulate("submit", { + wrapper.find(byTestAttr("routing-answer-picker")).simulate("submit", { value: { id: "999", }, diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/withCreateBinaryExpression.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/withCreateBinaryExpression.js similarity index 100% rename from eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/withCreateBinaryExpression.js rename to eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/withCreateBinaryExpression.js diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/withCreateBinaryExpression.test.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/withCreateBinaryExpression.test.js similarity index 100% rename from eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/withCreateBinaryExpression.test.js rename to eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/BinaryExpressionEditor/withCreateBinaryExpression.test.js diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/__snapshots__/index.test.js.snap b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/__snapshots__/index.test.js.snap index e07be730f7..9d0222f676 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/__snapshots__/index.test.js.snap @@ -1,86 +1,85 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`RuleEditor should render 1`] = ` -
- - - - -
- - + - - + + the following rules + + + Remove rule + + + + + - - - AND - - - -
- + + + + - -
+ } + /> + `; diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.js index 681617890a..72c4afa8d2 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.js @@ -7,49 +7,61 @@ import { flow, get } from "lodash/fp"; import Transition from "App/page/Routing/Transition"; import Button from "components/buttons/Button"; -import IconText from "components/IconText"; -import { colors, radius } from "constants/theme"; -import IconRoute from "App/page/Routing/icon-route.svg?inline"; + +import { colors } from "constants/theme"; + import DestinationSelector from "App/page/Routing/DestinationSelector"; -import TextButton from "components/buttons/TextButton"; -import { Grid, Column } from "components/Grid"; + import { RADIO } from "constants/answer-types"; import BinaryExpressionEditor from "./BinaryExpressionEditor"; import fragment from "./fragment.graphql"; import withDeleteRule from "./withDeleteRule"; import withUpdateRule from "./withUpdateRule"; -import withCreateBinaryExpression from "./withCreateBinaryExpression"; -const Box = styled.div` - border: 1px solid ${colors.bordersLight}; - border-radius: ${radius}; - margin-bottom: 2em; - position: relative; +import { Select, Label } from "components/Forms"; + +const Expressions = styled.div` + background: white; + padding-top: 1em; + border-left: 1px solid ${colors.lightMediumGrey}; + border-right: 1px solid ${colors.lightMediumGrey}; `; -const Buttons = styled.div` - display: flex; - justify-content: flex-end; - padding: 1em; +const Rule = styled.div` + &:not(:first-of-type) { + margin-top: 2em; + } `; export const Title = styled.h2` - position: absolute; - margin: 0; - top: 1.5em; - left: 1.4em; letter-spacing: 0.05em; font-size: 0.9em; font-weight: bold; text-transform: uppercase; `; -const CenteringColumn = styled(Column)` +const Header = styled.div` + background: ${colors.lightMediumGrey}; + padding: 0.5em 1em; + margin-top: -1px; + border-top: 3px solid ${colors.primary}; display: flex; - justify-content: center; - padding: 0.25em 0; - margin-bottom: 0.5em; + align-items: center; +`; + +const SmallSelect = styled(Select)` + display: inline-block; + width: auto; + margin: 0 0.5em; +`; + +const RemoveRuleButton = styled(Button).attrs({ + variant: "tertiary", + small: true, +})` + margin-left: auto; + padding: 0.2em; `; export class UnwrappedRuleEditor extends React.Component { @@ -57,10 +69,14 @@ export class UnwrappedRuleEditor extends React.Component { static propTypes = { rule: propType(fragment).isRequired, - title: PropTypes.string, + ifLabel: PropTypes.string, deleteRule: PropTypes.func.isRequired, updateRule: PropTypes.func.isRequired, - createBinaryExpression: PropTypes.func.isRequired, + className: PropTypes.string, + }; + + static defaultProps = { + ifLabel: "IF", }; handleDeleteClick = () => { @@ -74,13 +90,10 @@ export class UnwrappedRuleEditor extends React.Component { }); }; - handleCreateExpressionClick = () => { - this.props.createBinaryExpression(this.props.rule.expressionGroup.id); - }; - render() { const { - title, + className, + ifLabel, rule, rule: { destination, @@ -91,68 +104,69 @@ export class UnwrappedRuleEditor extends React.Component { const existingRadioConditions = {}; return ( -
- - {title && {title}} - - - -
- - {expressions.map((expression, index) => { - const component = ( - - 0 ? "AND" : "IF"} - isOnlyExpression={expressions.length === 1} - canAddAndCondition={ - !existingRadioConditions[get("left.id", expression)] - } - /> - - ); - if (get("left.type", expression) === RADIO) { - existingRadioConditions[get("left.id", expression)] = true; - } - return component; - })} - - - - - AND - - - -
- - -
+ +
+ + + + Remove rule + +
+ + + + {expressions.map((expression, index) => { + const component = ( + + 0 ? "AND" : ifLabel} + isOnlyExpression={expressions.length === 1} + isLastExpression={index === expressions.length - 1} + canAddAndCondition={ + !existingRadioConditions[get("left.id", expression)] + } + /> + + ); + if (get("left.type", expression) === RADIO) { + existingRadioConditions[get("left.id", expression)] = true; + } + return component; + })} + + + + + ); } } const withMutations = flow( withDeleteRule, - withUpdateRule, - withCreateBinaryExpression + withUpdateRule ); export default withMutations(UnwrappedRuleEditor); diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.test.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.test.js index d2e9dc5deb..35136d857f 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.test.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/RuleEditor/index.test.js @@ -1,13 +1,12 @@ import React from "react"; import { shallow } from "enzyme"; -import Button from "components/buttons/Button"; -import TextButton from "components/buttons/TextButton"; import RoutingRuleDestinationSelector from "App/page/Routing/DestinationSelector"; import { CURRENCY, RADIO } from "constants/answer-types"; import BinaryExpressionEditor from "./BinaryExpressionEditor"; -import { UnwrappedRuleEditor as RuleEditor, Title } from "./"; +import { UnwrappedRuleEditor as RuleEditor } from "./"; +import { byTestAttr } from "tests/utils/selectors"; describe("RuleEditor", () => { let defaultProps; @@ -48,18 +47,6 @@ describe("RuleEditor", () => { expect(wrapper).toMatchSnapshot(); }); - it("should render a title when provided", () => { - defaultProps.title = "My title"; - const wrapper = shallow(); - expect(wrapper.find(Title).exists()).toBe(true); - }); - - it("should allow deleting rule", () => { - const wrapper = shallow(); - wrapper.find(Button).simulate("click"); - expect(defaultProps.deleteRule).toHaveBeenCalledWith(defaultProps.rule.id); - }); - it("should allow changing of the destination", () => { const wrapper = shallow(); const data = { logical: "EndOfQuestionnaire" }; @@ -70,12 +57,10 @@ describe("RuleEditor", () => { }); }); - it("allows adding of a new binary expression", () => { + it("should allow deleting rule", () => { const wrapper = shallow(); - wrapper.find(TextButton).simulate("click"); - expect(defaultProps.createBinaryExpression).toHaveBeenCalledWith( - defaultProps.rule.expressionGroup.id - ); + wrapper.find(byTestAttr("btn-remove-rule")).simulate("click"); + expect(defaultProps.deleteRule).toHaveBeenCalledWith(defaultProps.rule.id); }); it("should pass down the correct prop when a second 'And' condition is invalid", () => { diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/__snapshots__/index.test.js.snap b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/__snapshots__/index.test.js.snap index 39d21beb13..1a0eb3c879 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/__snapshots__/index.test.js.snap @@ -7,18 +7,17 @@ exports[`components/RoutingRuleSet should render children 1`] = ` component="div" > - @@ -28,31 +27,24 @@ exports[`components/RoutingRuleSet should render children 1`] = ` small={true} variant="secondary" > - - Add rule - + Add rule - - - + } + /> `; diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.js index f0852bbd9e..adfdc2536f 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.js @@ -6,13 +6,10 @@ import { TransitionGroup } from "react-transition-group"; import { flow } from "lodash/fp"; import Button from "components/buttons/Button"; -import IconText from "components/IconText"; import Transition from "App/page/Routing/Transition"; import DestinationSelector from "App/page/Routing/DestinationSelector"; -import IconAddRule from "App/page/Routing/icon-add-rule.svg?inline"; -import { colors, radius } from "constants/theme"; import transformNestedFragments from "utils/transformNestedFragments"; import fragment from "./fragment.graphql"; @@ -20,16 +17,15 @@ import withUpdateRouting from "./withUpdateRouting"; import withCreateRule from "./withCreateRule"; import RuleEditor from "./RuleEditor"; -const AddRuleButton = styled(Button)` - width: 100%; - margin-bottom: 2em; - padding: 0.5em; -`; +export const LABEL_IF = "IF"; +export const LABEL_ELSE_IF = "ELSE IF"; -const Box = styled.div` - border: 1px solid ${colors.bordersLight}; - border-radius: ${radius}; - opacity: 1; +const AddRuleButton = styled(Button)` + display: block; + margin: 2em auto; + padding: 0.8em 2em; + border-radius: 2em; + border-width: 2px; `; export class UnwrappedRoutingEditor extends React.Component { @@ -59,11 +55,11 @@ export class UnwrappedRoutingEditor extends React.Component { <> {routing.rules.map((rule, index) => ( - + 0 ? "Or" : null} key={rule.id} + ifLabel={index > 0 ? LABEL_ELSE_IF : LABEL_IF} /> ))} @@ -74,17 +70,16 @@ export class UnwrappedRoutingEditor extends React.Component { onClick={this.handleAddClick} data-test="btn-add-rule" > - Add rule + Add rule - - - + + ); } diff --git a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.test.js b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.test.js index 207034f075..9378f6f94b 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.test.js +++ b/eq-author/src/App/page/Routing/RoutingPage/RoutingEditor/index.test.js @@ -1,6 +1,6 @@ import React from "react"; import { shallow } from "enzyme"; -import { UnwrappedRoutingEditor } from "./"; +import { UnwrappedRoutingEditor, LABEL_ELSE_IF, LABEL_IF } from "./"; import RuleEditor from "./RuleEditor"; describe("components/RoutingRuleSet", () => { @@ -50,11 +50,13 @@ describe("components/RoutingRuleSet", () => { ); }); - it("should render all subsequent rule editor titles as 'Or'", () => { + it("should render all subsequent rule editor titles as ELSE IF", () => { defaultProps.routing.rules.push({ id: "5" }, { id: "6" }); const wrapper = shallow(); wrapper.find(RuleEditor).forEach((ruleEditor, index) => { - expect(ruleEditor.prop("title")).toEqual(index > 0 ? "Or" : null); + expect(ruleEditor.prop("ifLabel")).toEqual( + index > 0 ? LABEL_ELSE_IF : LABEL_IF + ); }); }); }); diff --git a/eq-author/src/App/page/Routing/RoutingPage/index.js b/eq-author/src/App/page/Routing/RoutingPage/index.js index 1826fd9229..9a60b3d313 100644 --- a/eq-author/src/App/page/Routing/RoutingPage/index.js +++ b/eq-author/src/App/page/Routing/RoutingPage/index.js @@ -1,6 +1,6 @@ import React from "react"; import { propType } from "graphql-anywhere"; -import styled from "styled-components"; + import { TransitionGroup } from "react-transition-group"; import PropTypes from "prop-types"; @@ -11,10 +11,7 @@ import Transition from "../Transition"; import withCreateRouting from "./withCreateRouting"; import fragment from "./fragment.graphql"; import transformNestedFragments from "utils/transformNestedFragments"; - -const Padding = styled.div` - padding: 2em; -`; +import Panel from "components/Panel"; export class UnwrappedRoutingPage extends React.Component { static propTypes = { @@ -31,13 +28,15 @@ export class UnwrappedRoutingPage extends React.Component { if (!page.routing) { return ( - - Users completing this question will be taken to the next page. - + + + Users completing this question will be taken to the next page. + + ); } @@ -53,9 +52,7 @@ export class UnwrappedRoutingPage extends React.Component { const { page } = this.props; return (
- - {this.renderContent(page)} - + {this.renderContent(page)}
); } diff --git a/eq-author/src/App/page/Routing/Transition.js b/eq-author/src/App/page/Routing/Transition.js index e52fab8a5e..b187844241 100644 --- a/eq-author/src/App/page/Routing/Transition.js +++ b/eq-author/src/App/page/Routing/Transition.js @@ -18,7 +18,7 @@ const RoutingComponentTransition = styled(CSSTransition).attrs({ &.component-enter { opacity: 0; - transform: scale(0.9); + transform: scale(0.95); z-index: 200; } @@ -37,7 +37,7 @@ const RoutingComponentTransition = styled(CSSTransition).attrs({ &.component-exit-active { opacity: 0; height: 0 !important; - transform: scale(0.9); + transform: scale(0.95); transition: opacity ${halfTimeout}ms ease-out, height ${halfTimeout}ms ease-in ${halfTimeout}ms, transform ${halfTimeout}ms ease-in; diff --git a/eq-author/src/App/page/Routing/__snapshots__/Transition.test.js.snap b/eq-author/src/App/page/Routing/__snapshots__/Transition.test.js.snap index d2b6d85ce5..6058b6e441 100644 --- a/eq-author/src/App/page/Routing/__snapshots__/Transition.test.js.snap +++ b/eq-author/src/App/page/Routing/__snapshots__/Transition.test.js.snap @@ -7,9 +7,9 @@ exports[`components/Routing/Transition should render 1`] = ` .c0.component-enter { opacity: 0; - -webkit-transform: scale(0.9); - -ms-transform: scale(0.9); - transform: scale(0.9); + -webkit-transform: scale(0.95); + -ms-transform: scale(0.95); + transform: scale(0.95); z-index: 200; } @@ -33,9 +33,9 @@ exports[`components/Routing/Transition should render 1`] = ` .c0.component-exit-active { opacity: 0; height: 0 !important; - -webkit-transform: scale(0.9); - -ms-transform: scale(0.9); - transform: scale(0.9); + -webkit-transform: scale(0.95); + -ms-transform: scale(0.95); + transform: scale(0.95); -webkit-transition: opacity 100ms ease-out,height 100ms ease-in 100ms,-webkit-transform 100ms ease-in; -webkit-transition: opacity 100ms ease-out,height 100ms ease-in 100ms,transform 100ms ease-in; transition: opacity 100ms ease-out,height 100ms ease-in 100ms,transform 100ms ease-in; diff --git a/eq-author/src/App/questionConfirmation/Design/__snapshots__/index.test.js.snap b/eq-author/src/App/questionConfirmation/Design/__snapshots__/index.test.js.snap index c82c725460..9e7cf24e57 100644 --- a/eq-author/src/App/questionConfirmation/Design/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/questionConfirmation/Design/__snapshots__/index.test.js.snap @@ -5,51 +5,53 @@ exports[`QuestionConfirmationRoute should render 1`] = ` preview={true} title="My first displayname" > - - - - - Delete - - - - + + + + + Delete + + + + + data-test="editor" + onUpdate={[MockFunction]} + /> + `; @@ -58,9 +60,11 @@ exports[`QuestionConfirmationRoute should show error info when there is an error preview={true} title="My first displayname" > - - Oh no! Something went wrong - + + + Oh no! Something went wrong + + `; @@ -69,10 +73,12 @@ exports[`QuestionConfirmationRoute should show loading info when loading 1`] = ` preview={true} title="My first displayname" > - - Confirmation is loading - + + + Confirmation is loading + + `; diff --git a/eq-author/src/App/questionConfirmation/Design/index.js b/eq-author/src/App/questionConfirmation/Design/index.js index c19d7a51f6..3f337f3771 100644 --- a/eq-author/src/App/questionConfirmation/Design/index.js +++ b/eq-author/src/App/questionConfirmation/Design/index.js @@ -16,6 +16,7 @@ import withUpdateQuestionConfirmation from "./withUpdateQuestionConfirmation"; import withDeleteQuestionConfirmation from "./withDeleteQuestionConfirmation"; import questionConfirmationIcon from "./question-confirmation-icon.svg"; import Editor from "./Editor"; +import Panel from "components/Panel"; export class UnwrappedQuestionConfirmationRoute extends React.Component { static propTypes = { @@ -96,7 +97,7 @@ export class UnwrappedQuestionConfirmationRoute extends React.Component { ); return ( - {this.renderContent()} + {this.renderContent()} ); } diff --git a/eq-author/src/App/questionConfirmation/Preview/__snapshots__/index.test.js.snap b/eq-author/src/App/questionConfirmation/Preview/__snapshots__/index.test.js.snap index 9a5382d989..99d72fa60e 100644 --- a/eq-author/src/App/questionConfirmation/Preview/__snapshots__/index.test.js.snap +++ b/eq-author/src/App/questionConfirmation/Preview/__snapshots__/index.test.js.snap @@ -5,50 +5,52 @@ exports[`Question Confirmation Preview should correctly strip and render piped a preview={true} title="Hello world" > - - bar

" - /> - - + + bar

" /> - - + + + - + /> + + `; @@ -57,28 +59,30 @@ exports[`Question Confirmation Preview should not render replay options when the preview={true} title="Hello world" > - - - + + + - + /> + + `; @@ -87,50 +91,52 @@ exports[`Question Confirmation Preview should render 1`] = ` preview={true} title="Hello world" > - - - - + + - - + + + - + /> + + `; diff --git a/eq-author/src/App/questionConfirmation/Preview/index.js b/eq-author/src/App/questionConfirmation/Preview/index.js index e7afbd18fc..aab948354e 100644 --- a/eq-author/src/App/questionConfirmation/Preview/index.js +++ b/eq-author/src/App/questionConfirmation/Preview/index.js @@ -17,6 +17,7 @@ import MultipleChoiceAnswerOptionsReplay from "./MultipleChoiceAnswerOptionsRepl import { RADIO } from "constants/answer-types"; import { colors } from "constants/theme"; +import Panel from "components/Panel"; const Container = styled.div` padding: 2em; @@ -72,24 +73,26 @@ export const UnwrappedPreviewConfirmationRoute = ({ loading, data }) => { return ( - - - {answers.map( - ({ id, options, mutuallyExclusiveOption }) => - isArray(options) && ( - - - - ) - )} - { - - } - + + + + {answers.map( + ({ id, options, mutuallyExclusiveOption }) => + isArray(options) && ( + + + + ) + )} + { + + } + + ); }; diff --git a/eq-author/src/App/section/Design/index.js b/eq-author/src/App/section/Design/index.js index 441a0b9c49..3ca81b9814 100644 --- a/eq-author/src/App/section/Design/index.js +++ b/eq-author/src/App/section/Design/index.js @@ -34,6 +34,7 @@ import withPropRenamed from "enhancers/withPropRenamed"; import sectionFragment from "graphql/fragments/section.graphql"; import AliasEditor from "components/AliasEditor"; +import Panel from "components/Panel"; export class UnwrappedSectionRoute extends React.Component { static propTypes = { @@ -186,7 +187,7 @@ export class UnwrappedSectionRoute extends React.Component { preview={hasIntroductionContent} title={section.displayName || ""} > - {this.renderContent()} + {this.renderContent()} ); } diff --git a/eq-author/src/components/BaseLayout/App/__snapshots__/index.test.js.snap b/eq-author/src/components/BaseLayout/App/__snapshots__/index.test.js.snap index cbf6633d03..5fa81b5aac 100644 --- a/eq-author/src/components/BaseLayout/App/__snapshots__/index.test.js.snap +++ b/eq-author/src/components/BaseLayout/App/__snapshots__/index.test.js.snap @@ -8,12 +8,13 @@ exports[`components/AppContainer should render 1`] = ` "black": "#333333", "blue": "#3B7A9E", "borders": "#999999", - "bordersLight": "#c3c3c3", + "bordersLight": "#d6d8da", "darkBlue": "#5F7682", "darkGrey": "#666666", + "green": "#4E943D", "grey": "#999999", "lightBlue": "#61BDE0", - "lightGrey": "#c3c3c3", + "lightGrey": "#d6d8da", "lightMediumGrey": "#E4E8EB", "lighterGrey": "#f5f5f5", "orange": "#FDBD56", @@ -27,7 +28,6 @@ exports[`components/AppContainer should render 1`] = ` "white": "#FFFFFF", }, "radius": "4px", - "shadow": "0 2px 4px rgba(0,0,0,0.1)", } } > diff --git a/eq-author/src/components/BaseLayout/index.js b/eq-author/src/components/BaseLayout/index.js index 299400b2d8..24939a26fe 100644 --- a/eq-author/src/components/BaseLayout/index.js +++ b/eq-author/src/components/BaseLayout/index.js @@ -3,7 +3,6 @@ import PropTypes from "prop-types"; import styled from "styled-components"; import CustomPropTypes from "custom-prop-types"; -import { colors } from "constants/theme"; import OfflineBanner from "components/OfflineBanner"; @@ -11,7 +10,7 @@ import PermissionsBanner from "./PermissionsBanner"; import App from "./App"; const Wrapper = styled.div` - background-color: ${colors.lighterGrey}; + background-color: #fafbfc; height: 100vh; min-width: 75em; display: flex; diff --git a/eq-author/src/components/CharacterCounter/__snapshots__/index.test.js.snap b/eq-author/src/components/CharacterCounter/__snapshots__/index.test.js.snap index a3e8ed124e..f4b9c9171b 100644 --- a/eq-author/src/components/CharacterCounter/__snapshots__/index.test.js.snap +++ b/eq-author/src/components/CharacterCounter/__snapshots__/index.test.js.snap @@ -37,7 +37,7 @@ exports[`CharacterCounter should render correct style when limit exceeded 1`] = exports[`CharacterCounter should render correct style when limit not exceeded 1`] = ` .c0 { - color: #c3c3c3; + color: #d6d8da; position: absolute; top: 1px; bottom: 1px; diff --git a/eq-author/src/components/ContentPickerSelect/index.js b/eq-author/src/components/ContentPickerSelect/index.js index 2908973458..5b9a034a01 100644 --- a/eq-author/src/components/ContentPickerSelect/index.js +++ b/eq-author/src/components/ContentPickerSelect/index.js @@ -24,6 +24,7 @@ export const ContentSelectButton = styled(Button).attrs({ font-weight: normal; padding: 0.5em 0.75em; border: 1px solid ${colors.borders}; + background: ${colors.white}; height: 2.5em; width: 100%; justify-content: space-between; @@ -42,7 +43,7 @@ export const ContentSelectButton = styled(Button).attrs({ &:hover { border-color: ${colors.blue}; outline-color: ${colors.blue}; - background: none; + color: ${colors.blue}; &::after { opacity: 1; diff --git a/eq-author/src/components/EditorLayout/Tabs/index.js b/eq-author/src/components/EditorLayout/Tabs/index.js index 837bb251cf..9d5fcefdad 100644 --- a/eq-author/src/components/EditorLayout/Tabs/index.js +++ b/eq-author/src/components/EditorLayout/Tabs/index.js @@ -3,7 +3,7 @@ import styled from "styled-components"; import PropTypes from "prop-types"; import { NavLink, withRouter } from "react-router-dom"; -import { colors, radius } from "constants/theme"; +import { colors } from "constants/theme"; import CustomPropTypes from "custom-prop-types"; import { buildRoutingPath, @@ -39,12 +39,6 @@ export const Tab = styled(NavLink)` } `; -export const TabsBody = styled.div` - background: ${colors.white}; - border: 1px solid ${colors.bordersLight}; - border-radius: ${radius}; -`; - const DisabledTab = styled(Tab.withComponent("span"))` opacity: 0.2; `; diff --git a/eq-author/src/components/EditorLayout/__snapshots__/index.test.js.snap b/eq-author/src/components/EditorLayout/__snapshots__/index.test.js.snap index e78eef4f06..dbe7adef61 100644 --- a/eq-author/src/components/EditorLayout/__snapshots__/index.test.js.snap +++ b/eq-author/src/components/EditorLayout/__snapshots__/index.test.js.snap @@ -30,9 +30,7 @@ exports[`Editor Layout should render 1`] = ` > - - Content - + Content diff --git a/eq-author/src/components/EditorLayout/index.js b/eq-author/src/components/EditorLayout/index.js index 19f3b4a430..1017ed5a0f 100644 --- a/eq-author/src/components/EditorLayout/index.js +++ b/eq-author/src/components/EditorLayout/index.js @@ -14,7 +14,7 @@ import { Grid, Column } from "components/Grid"; import AddPage from "App/QuestionnaireDesignPage/icon-add-page.svg?inline"; -import Tabs, { TabsBody } from "./Tabs"; +import Tabs from "./Tabs"; import Header from "./Header"; const Centered = styled.div` @@ -67,9 +67,7 @@ const EditorLayout = ({ - - {children} - + {children} {onAddQuestionPage && ( diff --git a/eq-author/src/components/Forms/Select/index.js b/eq-author/src/components/Forms/Select/index.js index efa4df260d..40c1a511b7 100644 --- a/eq-author/src/components/Forms/Select/index.js +++ b/eq-author/src/components/Forms/Select/index.js @@ -15,7 +15,7 @@ const loading = css` export const SimpleSelect = styled.select` ${sharedStyles}; display: inline-block; - padding: 0.5em 2em 0.5em 0.5em; + padding: 0.5em 2em 0.5em 0.75em; background: white url('${Icon}') no-repeat right center; appearance: none; position: relative; diff --git a/eq-author/src/components/Panel/index.js b/eq-author/src/components/Panel/index.js index 6691028a21..14ec75b05d 100644 --- a/eq-author/src/components/Panel/index.js +++ b/eq-author/src/components/Panel/index.js @@ -1,11 +1,11 @@ import styled from "styled-components"; import PropTypes from "prop-types"; -import { radius, colors, shadow } from "constants/theme"; +import { radius, colors } from "constants/theme"; const Panel = styled.div` border-radius: ${radius}; background-color: ${colors.white}; - box-shadow: ${shadow}; + border: 1px solid ${colors.bordersLight}; `; Panel.propTypes = { diff --git a/eq-author/src/components/ScrollPane/__snapshots__/index.test.js.snap b/eq-author/src/components/ScrollPane/__snapshots__/index.test.js.snap index 09deaba9b9..197ee6e9fa 100644 --- a/eq-author/src/components/ScrollPane/__snapshots__/index.test.js.snap +++ b/eq-author/src/components/ScrollPane/__snapshots__/index.test.js.snap @@ -15,7 +15,7 @@ exports[`ScrollPane should render 1`] = ` .c0::-webkit-scrollbar-thumb { border-radius: 0; box-shadow: none; - background-color: #c3c3c3; + background-color: #d6d8da; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } @@ -36,7 +36,7 @@ exports[`ScrollPane should render 1`] = ` } .c0:hover::-webkit-scrollbar-thumb { - background-color: #aaa; + background-color: #bbbfc2; }