feat: add RandomFact quiz as SB story

package.json

@@ -59,12 +59,12 @@
   "devDependencies": {
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/nextjs": "^7.0.20",
-    "@storybook/react": "^7.0.20",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/blocks": "^7.1.1",
+    "@storybook/nextjs": "^7.1.1",
+    "@storybook/react": "^7.1.1",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/forms": "^0.5.3",

src/components/buttons/Button.tsx

@@ -61,7 +61,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               'border-primary-600 border',
               'hover:bg-primary-600 hover:text-white',
               'active:bg-primary-700',
-              'disabled:bg-primary-700',
+              'disabled:bg-primary-400',
             ],
             variant === 'outline' && [
               'text-primary-500',

src/components/molecules/RandomFacts/Quiz.tsx

@@ -0,0 +1,87 @@
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import * as React from 'react';
+import { useState } from 'react';
+
+import Button from '@/components/buttons/Button';
+
+const localStorageKey = 'alreadyPlayed';
+
+export enum Option {
+  A = 'a',
+  B = 'b',
+  C = 'c',
+  D = 'd',
+}
+
+export interface QuizOption {
+  headline: string;
+  key: Option;
+}
+
+export interface QuizProps {
+  options: QuizOption[];
+  falseOption: Option;
+}
+
+const Quiz = ({ options, falseOption }: QuizProps) => {
+  const [selectedAnswer, setSelectedAnswer] = useState('');
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const isButtonDisabled = selectedAnswer === '';
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedAnswer(event.target.value);
+  };
+
+  const submitAnswer = () => {
+    localStorage.setItem(localStorageKey, 'true');
+
+    setSubmitted(true);
+
+    const answeredRight = falseOption === selectedAnswer;
+
+    // eslint-disable-next-line no-console
+    console.log(submitted && answeredRight ? 'Correct!' : 'Wrong!');
+  };
+
+  return (
+    <div className='p4 rounded dark:bg-slate-900'>
+      <FormControl>
+        <RadioGroup
+          className='mb-4'
+          aria-labelledby='demo-radio-buttons-group-label'
+          name='radio-buttons-group'
+          value={selectedAnswer}
+          onChange={handleChange}
+        >
+          {options.map((option) => (
+            <FormControlLabel
+              className='mb-2 md:mb-0'
+              key={option.key}
+              value={option.key}
+              control={<Radio />}
+              label={option.headline}
+            />
+          ))}
+        </RadioGroup>
+
+        <div className='flex flex-row justify-end md:justify-start'>
+          <Button
+            className='w-fit shadow-md'
+            variant='primary'
+            onClick={submitAnswer}
+            disabled={isButtonDisabled}
+          >
+            Submit
+          </Button>
+        </div>
+      </FormControl>
+    </div>
+  );
+};
+
+export default Quiz;

src/components/molecules/RandomFacts/__stories__/Quiz.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/react';
+
+import Quiz, {
+  Option,
+  QuizOption,
+  QuizProps,
+} from '@/components/molecules/RandomFacts/Quiz';
+
+const meta: Meta<typeof Quiz> = {
+  title: 'Components/Random Facts/Quiz',
+  component: Quiz,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const options: QuizOption[] = [
+  {
+    key: Option.A,
+    headline:
+      'I have been officially excommunicated by the Roman Catholic Church ⛪',
+  },
+  {
+    key: Option.B,
+    headline: 'I studied oboe at the music school for more than 12 years 🎶',
+  },
+  {
+    key: Option.C,
+    headline: 'I know flags and capitals of all 195 countries in the world 🇰🇲',
+  },
+  {
+    key: Option.D,
+    headline:
+      'I was an extra-actor in a movie once: "Correspondence" by Giuseppe Tornatore 🎬',
+  },
+];
+
+export const SampleStory = (args: QuizProps) => <Quiz {...args} />;
+SampleStory.args = {
+  options,
+  falseOption: Option.C,
+};

src/components/recruiter-info/__stories__/SalaryHappinessTool.stories.tsx → src/components/molecules/RecruiterInfo/__stories__/SalaryHappinessTool.stories.tsx

@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react';
 import {
   SalaryHappinessProps,
   SalaryHappinessTool,
-} from '@/components/recruiter-info/SalaryHappinessTool';
+} from '@/components/molecules/RecruiterInfo/SalaryHappinessTool';
 
 const meta: Meta<typeof SalaryHappinessTool> = {
   title: 'Components/Recruiter-Info/SalaryHappinessTool',