diff --git a/frontend/package.json b/frontend/package.json index 3d4c7cf9f..9d09f791e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -65,14 +65,14 @@ ] }, "devDependencies": { - "@storybook/addon-essentials": "7.5.3", - "@storybook/addon-interactions": "7.5.3", - "@storybook/addon-links": "7.5.3", - "@storybook/addon-onboarding": "1.0.8", - "@storybook/blocks": "7.5.3", - "@storybook/preset-create-react-app": "7.5.3", - "@storybook/react": "7.5.3", - "@storybook/react-webpack5": "7.5.3", + "@storybook/addon-essentials": "7.6.6", + "@storybook/addon-interactions": "7.6.6", + "@storybook/addon-links": "7.6.6", + "@storybook/addon-onboarding": "1.0.10", + "@storybook/blocks": "7.6.6", + "@storybook/preset-create-react-app": "7.6.6", + "@storybook/react": "7.6.6", + "@storybook/react-webpack5": "7.6.6", "@storybook/testing-library": "0.2.2", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", @@ -82,7 +82,7 @@ "eslint-config-react-app": "^7.0.1", "eslint-plugin-storybook": "^0.6.15", "prop-types": "15.8.1", - "storybook": "7.5.3", + "storybook": "7.6.6", "webpack": "5.89.0" } } diff --git a/frontend/src/components/Question/_ButtonArray.js b/frontend/src/components/Question/_ButtonArray.js index 61e5e9659..4edc77454 100644 --- a/frontend/src/components/Question/_ButtonArray.js +++ b/frontend/src/components/Question/_ButtonArray.js @@ -4,7 +4,7 @@ import classNames from "classnames"; import { renderLabel } from "../../util/label"; // ButtonArray is a question view for selecting a single option from a list of buttons -const ButtonArray = ({ question, disabled, onChange }) => { +const ButtonArray = ({ question, disabled, onChange, value }) => { const buttonPress = (value) => { if (disabled) { @@ -15,7 +15,6 @@ const ButtonArray = ({ question, disabled, onChange }) => { } } - return (
@@ -29,6 +28,7 @@ const ButtonArray = ({ question, disabled, onChange }) => { key={question.key + index} onChange={buttonPress} disabled={disabled} + checked={value === val} /> ))}
@@ -36,11 +36,12 @@ const ButtonArray = ({ question, disabled, onChange }) => { ) } -const ToggleButton = ({ label, value, index, name, disabled, onChange }) => { +const ToggleButton = ({ label, value, index, name, disabled, onChange, checked }) => { const disabledClasses = disabled ? 'disabled' : ''; + const checkedClasses = checked ? 'checked' : ''; return (