diff --git a/eq-author/src/components/AnswerTypeSelector/AnswerTypeButton.js b/eq-author/src/components/AnswerTypeSelector/AnswerTypeButton.js index 9f77cadfb9..dcb4a48180 100644 --- a/eq-author/src/components/AnswerTypeSelector/AnswerTypeButton.js +++ b/eq-author/src/components/AnswerTypeSelector/AnswerTypeButton.js @@ -46,6 +46,7 @@ export default class AnswerTypeButton extends React.Component { doNotShowDR: PropTypes.bool, mutuallyExclusiveEnabled: PropTypes.bool, radioEnabled: PropTypes.bool, + selectEnabled: PropTypes.bool, }; handleClick = () => { @@ -58,6 +59,7 @@ export default class AnswerTypeButton extends React.Component { doNotShowDR={this.props.doNotShowDR} mutuallyExclusiveEnabled={this.props.mutuallyExclusiveEnabled} radioEnabled={this.props.radioEnabled} + selectEnabled={this.props.selectEnabled} disabled={this.props.disabled} iconSrc={icons[this.props.type]} onClick={this.handleClick} diff --git a/eq-author/src/components/AnswerTypeSelector/AnswerTypeGrid.js b/eq-author/src/components/AnswerTypeSelector/AnswerTypeGrid.js index e52dce2104..1169985edd 100644 --- a/eq-author/src/components/AnswerTypeSelector/AnswerTypeGrid.js +++ b/eq-author/src/components/AnswerTypeSelector/AnswerTypeGrid.js @@ -73,6 +73,7 @@ class AnswerTypeGrid extends React.Component { doNotShowDR: PropTypes.bool, mutuallyExclusiveEnabled: PropTypes.bool, radioEnabled: PropTypes.bool, + selectEnabled: PropTypes.bool, }; handleSelect = (type) => { @@ -90,6 +91,7 @@ class AnswerTypeGrid extends React.Component { doNotShowDR, mutuallyExclusiveEnabled, radioEnabled, + selectEnabled, ...otherProps } = this.props; return ( @@ -111,6 +113,7 @@ class AnswerTypeGrid extends React.Component { doNotShowDR={doNotShowDR} mutuallyExclusiveEnabled={mutuallyExclusiveEnabled} radioEnabled={radioEnabled} + selectEnabled={selectEnabled} {...props} /> ); diff --git a/eq-author/src/components/AnswerTypeSelector/index.js b/eq-author/src/components/AnswerTypeSelector/index.js index 7fd65fea5b..02f463116d 100644 --- a/eq-author/src/components/AnswerTypeSelector/index.js +++ b/eq-author/src/components/AnswerTypeSelector/index.js @@ -7,7 +7,7 @@ import IconText from "components/IconText"; import Button from "components/buttons/Button"; import ValidationError from "components/ValidationError"; import { QUESTION_ANSWER_NOT_SELECTED } from "constants/validationMessages"; -import { RADIO, MUTUALLY_EXCLUSIVE } from "constants/answer-types"; +import { RADIO, MUTUALLY_EXCLUSIVE, SELECT } from "constants/answer-types"; import answersHaveAnswerType from "utils/answersHaveAnswerType"; @@ -49,7 +49,7 @@ const ErrorContext = styled.div` `} `; -const mutuallyExclusiveEnabled = (answers, hasRadioAnswer) => { +const mutuallyExclusiveEnabled = (answers, hasRadioAnswer, hasSelectAnswer) => { let allowMutuallyExclusive = false; // Mutually exclusive button will be disabled when page has no answers, page has a radio answer, or page already has mutually exclusive answer // Does not need to handle date range as "Add an answer" button is disabled when page has a date range answer @@ -57,6 +57,7 @@ const mutuallyExclusiveEnabled = (answers, hasRadioAnswer) => { answers.length === 0 || !answers || hasRadioAnswer || + hasSelectAnswer || answersHaveAnswerType(answers, MUTUALLY_EXCLUSIVE) || answers.length > 1 // TODO: (Mutually exclusive) When Runner supports multiple answers with mutually exclusive, answers.length > 1 can be removed ) { @@ -101,6 +102,7 @@ class AnswerTypeSelector extends React.Component { let hasDateRange = false; let hasOtherAnswerType = false; let hasRadioAnswer = false; + let hasSelectAnswer = false; let hasMutuallyExclusiveAnswer = false; const answers = Array.from(this.props.page.answers); @@ -118,6 +120,9 @@ class AnswerTypeSelector extends React.Component { if (answersHaveAnswerType(this.props.page.answers, RADIO)) { hasRadioAnswer = true; } + if (answersHaveAnswerType(this.props.page.answers, SELECT)) { + hasSelectAnswer = true; + } if (answersHaveAnswerType(this.props.page.answers, MUTUALLY_EXCLUSIVE)) { hasMutuallyExclusiveAnswer = true; } @@ -159,9 +164,11 @@ class AnswerTypeSelector extends React.Component { doNotShowDR={hasOtherAnswerType} mutuallyExclusiveEnabled={mutuallyExclusiveEnabled( this.props.page.answers, - hasRadioAnswer + hasRadioAnswer, + hasSelectAnswer )} radioEnabled={!hasMutuallyExclusiveAnswer} + selectEnabled={!hasMutuallyExclusiveAnswer} /> diff --git a/eq-author/src/components/AnswerTypeSelector/index.test.js b/eq-author/src/components/AnswerTypeSelector/index.test.js index 5d62efe76c..edd044917d 100644 --- a/eq-author/src/components/AnswerTypeSelector/index.test.js +++ b/eq-author/src/components/AnswerTypeSelector/index.test.js @@ -3,6 +3,7 @@ import { NUMBER, CURRENCY, RADIO, + SELECT, // MUTUALLY_EXCLUSIVE, } from "constants/answer-types"; @@ -14,7 +15,6 @@ import { } from "tests/utils/rtl"; import AnswerTypeSelector from "."; - describe("Answer Type Selector", () => { let props; beforeEach(() => { @@ -161,6 +161,17 @@ describe("Answer Type Selector", () => { ); }); + it("should disable mutually exclusive if there is a select answer", () => { + props.page.answers[0] = { type: SELECT }; + const { getByText, getByTestId } = render( + + ); + fireEvent.click(getByText(/Add another answer/)); + expect(getByTestId("btn-answer-type-mutuallyexclusive")).toHaveAttribute( + "disabled" + ); + }); + // TODO: (Mutually exclusive) When Runner supports multiple answers with mutually exclusive, the commented tests and MUTUALLY_EXCLUSIVE import can be uncommented // it("should disable radio if there is a mutually exclusive answer", () => { // props.page.answers = [{ type: NUMBER }, { type: MUTUALLY_EXCLUSIVE }]; diff --git a/eq-author/src/components/IconGrid/IconGridButton.js b/eq-author/src/components/IconGrid/IconGridButton.js index 4229b47f1d..4975e503cb 100644 --- a/eq-author/src/components/IconGrid/IconGridButton.js +++ b/eq-author/src/components/IconGrid/IconGridButton.js @@ -52,12 +52,14 @@ const IconGridButton = ({ doNotShowDR, mutuallyExclusiveEnabled, radioEnabled, + selectEnabled, ...otherProps }) => { if ( (doNotShowDR && title === "Date range") || (!mutuallyExclusiveEnabled && title === "OR answer") || - (!radioEnabled && title === "Radio") + (!radioEnabled && title === "Radio") || + (!selectEnabled && title === "Select") ) { disabled = true; } @@ -87,6 +89,7 @@ IconGridButton.propTypes = { doNotShowDR: PropTypes.bool, mutuallyExclusiveEnabled: PropTypes.bool, radioEnabled: PropTypes.bool, + selectEnabled: PropTypes.bool, }; export default IconGridButton;