Fixed: Show selected answer in button style

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"
   }
 }

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 (
         <div className="aha__buttons buttons d-flex flex-wrap justify-content-center p-3 w-100">
 
@@ -29,25 +28,29 @@ const ButtonArray = ({ question, disabled, onChange }) => {
                         key={question.key + index}
                         onChange={buttonPress}
                         disabled={disabled}
+                        checked={value === val}
                     />
                 ))}
             </div>
         </div>
     )
 }
 
-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 (
         <label
-            className={classNames("btn btn-secondary btn-lg", disabledClasses)}
+            className={classNames("btn btn-secondary btn-lg", disabledClasses, checkedClasses)}
             tabIndex="0"
         >
             <input className={value}
                 type="radio"
                 name={name}
                 id={index}
                 value={value}
+                checked={checked}
+                aria-checked={checked}
                 disabled={disabled}
                 onClick={() => {
                     onChange(value);

frontend/src/components/Question/_ButtonArray.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ButtonArray from './_ButtonArray';
+
+const getProps = (overrides = {}) => ({
+    question: {
+        "key": "know_song",
+        "view": "BUTTON_ARRAY",
+        "explainer": "",
+        "question": "1. Do you know this song?",
+        "result_id": 12345,
+        "is_skippable": false,
+        "submits": false,
+        "style": "boolean",
+        "choices": {
+            "yes": "Yes",
+            "unsure": "Unsure",
+            "no": "No"
+        },
+        "min_values": 1,
+    },
+    disabled: false,
+    onChange: jest.fn(),
+    value: null,
+    ...overrides,
+});
+
+describe('ButtonArray', () => {
+    it('adds the "checked" class to a button when it is selected', () => {
+        const props = getProps({ value: 'yes' });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+
+        expect(button).toHaveClass('checked');
+    });
+
+    it('does not add the "checked" class to a button when it is not selected', () => {
+        const props = getProps({ value: 'yes' });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Unsure');
+
+        expect(button).not.toHaveClass('checked');
+    });
+
+    it('calls the onChange function when a button is clicked', () => {
+        const props = getProps();
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+        fireEvent.click(button);
+
+        expect(props.onChange).toHaveBeenCalledWith('yes');
+    });
+
+    it('does not call the onChange function when a disabled button is clicked', () => {
+        const props = getProps({ disabled: true });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+        fireEvent.click(button);
+
+        expect(props.onChange).not.toHaveBeenCalled();
+    });
+});

frontend/src/scss/elements.scss

@@ -29,7 +29,7 @@ h3.title {
         color: white;
     }
 
-    &:focus {
+    &:focus, &.checked {
         box-shadow: 0 0 0 0.2rem rgba($color, 0.5);
     }
 

frontend/src/stories/Trial.stories.js

@@ -46,26 +46,43 @@ export const Default = {
             ],
         },
         feedback_form: {
-            form: [{
-                key: "msi_14_never_complimented",
-                view: "TEXT_RANGE",
-                value: "",
-                question: "Ik heb nog nooit complimenten gekregen voor mijn talenten als muzikant.",
-                explainer: "In hoeverre ben je het hiermee eens of oneens?",
-                result_id: 18,
-                style: "neutral",
-                scoring_rule: "LIKERT",
-                scale_steps: 7,
-                choices: {
-                    "1": "Helemaal mee oneens",
-                    "2": "Zeer mee oneens",
-                    "3": "Mee oneens",
-                    "4": "Niet mee eens of oneens",
-                    "5": "Mee eens",
-                    "6": "Zeer mee eens",
-                    "7": "Helemaal mee eens"
+            form: [
+                {
+                    "key": "know_song",
+                    "view": "BUTTON_ARRAY",
+                    "explainer": "",
+                    "question": "1. Do you know this song?",
+                    "result_id": 17242,
+                    "is_skippable": false,
+                    "submits": false,
+                    "style": "boolean",
+                    "choices": {
+                        "yes": "fa-check",
+                        "unsure": "fa-question",
+                        "no": "fa-xmark"
+                    },
+                    "min_values": 1
+                },
+                {
+                    "key": "like_song",
+                    "view": "ICON_RANGE",
+                    "explainer": "",
+                    "question": "2. How much do you like this song?",
+                    "result_id": 17241,
+                    "is_skippable": false,
+                    "submits": false,
+                    "style": "gradient-7",
+                    "choices": {
+                        "1": "fa-face-grin-hearts",
+                        "2": "fa-face-grin",
+                        "3": "fa-face-smile",
+                        "4": "fa-face-meh",
+                        "5": "fa-face-frown",
+                        "6": "fa-face-frown-open",
+                        "7": "fa-face-angry"
+                    }
                 }
-            }],
+            ],
             submit_label: "Submit",
             skip_label: "Skip",
             is_skippable: true,