Added focus styles to buttons

src/components/Button/Button.css

@@ -3,21 +3,36 @@
 }
 
 .aci-button--blue {
-    @apply bg-aci-blue border-aci-blue hover:bg-aci-blue-dark hover:border-aci-blue-dark active:bg-white active:border-2 active:border-aci-blue active:text-aci-blue active:fill-aci-blue;
+    @apply bg-aci-blue border-aci-blue
+    hover:bg-aci-blue-dark hover:border-aci-blue-dark
+    active:bg-white active:border-2 active:border-aci-blue active:text-aci-blue active:fill-aci-blue
+    focus:bg-white focus:border-2 focus:border-aci-blue focus:text-aci-blue focus:fill-aci-blue;
 }
 
 .aci-button--red {
-    @apply bg-aci-red border-aci-red hover:bg-aci-red-dark hover:border-aci-red-dark active:bg-white active:border-2 active:border-aci-red active:text-aci-red active:fill-aci-red;
+    @apply bg-aci-red border-aci-red
+    hover:bg-aci-red-dark hover:border-aci-red-dark
+    active:bg-white active:border-2 active:border-aci-red active:text-aci-red active:fill-aci-red
+    focus:bg-white focus:border-2 focus:border-aci-red focus:text-aci-red focus:fill-aci-red;
 }
 
 .aci-button--green {
-    @apply bg-aci-green border-aci-green hover:bg-aci-green-dark hover:border-aci-green-dark active:bg-white active:border-2 active:border-aci-green active:text-aci-green active:fill-aci-green;
+    @apply bg-aci-green border-aci-green
+    hover:bg-aci-green-dark hover:border-aci-green-dark
+    active:bg-white active:border-2 active:border-aci-green active:text-aci-green active:fill-aci-green
+    focus:bg-white focus:border-2 focus:border-aci-green focus:text-aci-green focus:fill-aci-green;
 }
 
 .aci-button--yellow {
-    @apply bg-aci-yellow border-aci-yellow hover:bg-aci-yellow-dark hover:border-aci-yellow-dark active:bg-white active:border-2 active:border-aci-yellow active:text-aci-yellow active:fill-aci-yellow;
+    @apply bg-aci-yellow border-aci-yellow
+    hover:bg-aci-yellow-dark hover:border-aci-yellow-dark
+    active:bg-white active:border-2 active:border-aci-yellow active:text-aci-yellow active:fill-aci-yellow
+    focus:bg-white focus:border-2 focus:border-aci-yellow focus:text-aci-yellow focus:fill-aci-yellow;
 }
 
 .aci-button--orange {
-    @apply bg-aci-orange border-aci-orange hover:bg-aci-orange-dark hover:border-aci-orange-dark active:bg-white active:border-2 active:border-aci-orange active:text-aci-orange active:fill-aci-orange;
+    @apply bg-aci-orange border-aci-orange
+    hover:bg-aci-orange-dark hover:border-aci-orange-dark
+    active:bg-white active:border-2 active:border-aci-orange active:text-aci-orange active:fill-aci-orange
+    focus:bg-white focus:border-2 focus:border-aci-orange focus:text-aci-orange focus:fill-aci-orange;
 }

src/components/Icon/Icon.tsx

@@ -114,8 +114,4 @@ const Icon: React.FC<IIcon> = ({ iconName, color}) => {
     }
 };
 
-Icon.defaultProps = {
-    color: 'white',
-};
-
 export default Icon;

src/components/MultiselectOptions/MultiselectOptions.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import MultiselectOptions from './MultiselectOptions';
+import { IMultiselectOptions } from './types';
 
 const meta = {
   title: 'Components/MultiselectOptions',
@@ -13,28 +13,19 @@ const meta = {
     label: {control: 'text'}
   },
   tags: ['autodocs'],
-
-} satisfies Meta<typeof MultiselectOptions>;
+} satisfies Meta<typeof MultiselectOptions>
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
-/**
- * Example of the component when the isSelected == false.
- */
-export const MultiselectOptionsUnchecked: Story = {
-  args: {
-    isSelected: false,
-    label: 'Option 1',
-  },
-};
+const Template: StoryFn<IMultiselectOptions> = (args) => <MultiselectOptions {...args} />;
 
 /**
- * Example of the component when the isSelected == true.
+ * A default multiselect option component.
  */
-export const MultiselectOptionsChecked: Story = {
-  args: {
-    isSelected: true,
-    label: 'Option 2',
-  },
+
+export const Default = Template.bind({});
+Default.args = {
+  isSelected: false,
+  label: 'Option 1',
+  setIsSelected: () => {}
 };

src/components/MultiselectOptions/MultiselectOptions.tsx

@@ -1,38 +1,29 @@
-import React, { useState, useEffect } from 'react';
-import { Icon } from '../Icon';
-import './MultiselectOptions.css';
+import React from 'react';
+import { Icon } from '..'; 
+import './multiselect-options.css';
 import { IMultiselectOptions } from './types';
 
-/**
- * Component that stores the state of a given option.
- */
-const MultiselectOptions: React.FC<IMultiselectOptions> = ({ label, isSelected }) => {
-  const [isChecked, setIsChecked] = useState(isSelected);
+const MultiselectOptions: React.FC<IMultiselectOptions> = ({ label, isSelected, setIsSelected }) => {
 
-  const handleOnChange = () => {
-    setIsChecked(!isChecked);
-  };
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsSelected(event.target.checked);
+  }
 
-  useEffect(() => {
-    setIsChecked(isSelected);
-  }, [isSelected]);
+  const handleContainerClick = () => {
+    setIsSelected(!isSelected);
+    isSelected = !isSelected;
+  }
 
   return (
-    <div className='multiselect-options__container'>
-      <div className='multiselect-options__container__checkbox-container'>
-        <input 
-          key={label} 
-          type="checkbox" 
-          className='multiselect-options__container__checkbox-container__checkbox' 
-          checked={isSelected} 
-          onChange={handleOnChange} 
-        />
-        {isChecked && <Icon iconName='check' color='black'/>}
-      </div>
-      <span className='multiselect-options__container__label'>
+    <button className='multiselect-options__back-container' onClick={handleContainerClick}>
+      <div className='multiselect-options__container'>
+        <div className='multiselect-options__checkbox-container'>
+          <input type="checkbox" className='multiselect-options__checkbox' checked={isSelected} onChange={(handleCheckboxChange)} />
+          {isSelected && <Icon iconName='check_circle' color='black' />}
+        </div>
         {label}
-      </span>
-    </div>
+      </div>
+    </button>
   );
 };
 

src/components/index.ts

@@ -1,4 +1,4 @@
-import { LoginForm } from './LoginForm';
+export { LoginForm } from './LoginForm';
 export { Pill } from './Pill';
 export { Icon } from './Icon';
 export { Button } from './Button';