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 (