feat: add checkbox and radio button components

src/components/Selectors/CheckBox/CheckBox.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { CheckBox, CheckBoxGroup } from '../index';
+
+export default {
+    title: 'Check Box',
+    component: CheckBox,
+};
+
+export const Box = () => {
+    const checkboxGroupItems = [
+        {
+            checked: true,
+            name: 'group',
+            value: 'First',
+        },
+        {
+            checked: true,
+            name: 'group',
+            value: 'Second',
+        },
+        {
+            checked: true,
+            name: 'group',
+            value: 'Third',
+        },
+    ];
+
+    return (
+        <>
+            <h1>Check Boxes</h1>
+            <h2>Default Check Box</h2>
+            <CheckBox checked={true} />
+            <h2>Label Check Box</h2>
+            <CheckBox checked={true} value="Label" />
+            <h2>Check Box Groups</h2>
+            <CheckBoxGroup items={checkboxGroupItems} />
+        </>
+    );
+};

src/components/Selectors/CheckBox/CheckBox.tsx

@@ -0,0 +1,51 @@
+import React, { FC, useState } from 'react';
+import { CheckBoxProps } from '../';
+import { mergeClasses } from '../../../shared/utilities';
+
+import styles from './checkbox.module.scss';
+
+export const CheckBox: FC<CheckBoxProps> = ({
+    ariaLabel,
+    checked = false,
+    defaultChecked,
+    disabled = false,
+    name,
+    value = '',
+    id = `checkbox-${value}-${Math.random().toString(36).slice(2)}`,
+    onChange,
+}) => {
+    const [isChecked, setIsChecked] = useState<boolean>(checked);
+
+    const checkBoxCheckClassNames: string = mergeClasses([
+        styles.checkmark,
+        { [styles.disabled]: disabled },
+    ]);
+
+    const toggleChecked = (): void => {
+        if (!disabled) setIsChecked(!isChecked);
+    };
+
+    return (
+        <div className={styles.selector}>
+            <input
+                aria-label={ariaLabel}
+                checked={isChecked}
+                defaultChecked={defaultChecked}
+                disabled={disabled}
+                id={id}
+                onChange={onChange ? onChange : toggleChecked}
+                name={name}
+                type={'checkbox'}
+                value={value}
+                readOnly
+            />
+            <label
+                htmlFor={id}
+                className={value === '' ? styles.labelNoValue : ''}
+            >
+                <span className={checkBoxCheckClassNames}></span>
+                <span className={styles.selectorLabel}>{value}</span>
+            </label>
+        </div>
+    );
+};

src/components/Selectors/CheckBox/CheckBoxGroup.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { CheckBoxProps } from '../';
+import { CheckBox } from './CheckBox';
+
+export const CheckBoxGroup: FC<CheckBoxProps> = ({
+    defaultChecked = true,
+    items,
+    onChange,
+}) => {
+    return (
+        <>
+            {items.map((item, index) => (
+                <CheckBox
+                    ariaLabel={item.ariaLabel}
+                    checked={item.checked ? item.checked : defaultChecked}
+                    id={item.id}
+                    key={index}
+                    name={item.name}
+                    value={item.value}
+                    onChange={onChange}
+                />
+            ))}
+        </>
+    );
+};

src/components/Selectors/CheckBox/checkbox.module.scss

@@ -0,0 +1,140 @@
+.selector {
+    margin-bottom: $selector-margin-bottom;
+    flex-shrink: 1;
+    position: relative;
+    display: flex;
+    text-overflow: elipses;
+    vertical-align: baseline;
+
+    input {
+        position: absolute;
+        background: none;
+        opacity: 0;
+        height: $selector-input-width;
+        width: $selector-input-height;
+        top: $space-xxxs;
+        left: $space-xxxs;
+        cursor: pointer;
+    }
+
+    input:checked + label {
+        .checkmark {
+            background-color: var(--primary-color);
+            border: $space-xxxs solid var(--primary-color);
+
+            &.disabled {
+                opacity: 50%;
+
+                &:hover {
+                    background-color: var(--primary-color);
+                    border: $space-xxxs solid var(--primary-color);
+                }
+
+                &:focus {
+                    outline: none;
+                }
+
+                &:active {
+                    transform: none;
+                    background-color: var(--primary-color);
+                    border: $space-xxxs solid var(--primary-color);
+                }
+            }
+
+            &:hover {
+                background-color: var(--primary-color-60);
+                border: $space-xxxs solid var(--primary-color-60);
+            }
+
+            &:focus {
+                outline: $space-xxxs solid var(--primary-color-50);
+                outline-offset: $selector-outline-offset;
+            }
+
+            &:active {
+                transform: scale(0.98);
+                background-color: var(--primary-color-80);
+                border: $space-xxxs solid var(--primary-color-80);
+            }
+
+            &:after {
+                left: $checkmark-after-left;
+                top: $checkmark-after-top;
+                width: $checkmark-after-width;
+                height: $icon-font-size-material-xs;
+                border: solid white;
+                border-width: 0 $space-xxxs $space-xxxs 0;
+                -webkit-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                transform: rotate(45deg);
+                display: block;
+            }
+        }
+    }
+
+    .checkmark {
+        height: $checkmark-height;
+        width: $checkmark-width;
+        position: absolute;
+        left: 0;
+        border-radius: $corner-radius-s;
+        cursor: pointer;
+        border: $space-xxxs solid var(--grey-color-70);
+
+        &.disabled {
+            opacity: 50%;
+
+            &:hover {
+                border: $space-xxxs solid var(--grey-color-70);
+            }
+
+            &:focus {
+                outline: none;
+                border: $space-xxxs solid var(--grey-color-70);
+            }
+
+            &:active {
+                border: $space-xxxs solid var(--grey-color-70);
+            }
+        }
+
+        &:hover {
+            border: $space-xxxs solid var(--primary-color-60);
+        }
+
+        &:focus {
+            border: $space-xxxs solid var(--primary-color);
+            outline: $space-xxxs solid var(--primary-color-50);
+            outline-offset: $selector-outline-offset;
+        }
+
+        &:active {
+            border: $space-xxxs solid var(--primary-color-80);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            display: none;
+        }
+    }
+
+    label {
+        display: flex;
+        align-items: flex-start;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        vertical-align: baseline;
+    }
+
+    .selector-label {
+        margin-left: $selector-label-margin-left;
+        font-size: medium;
+        margin-top: $space-xxxs;
+    }
+}
+
+.label-no-value {
+    margin-bottom: $label-no-value-margin-bottom;
+}

src/components/Selectors/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RadioButton, RadioGroup } from '../index';
+import { RadioButtonChecked } from '../Selectors.types';
+
+export default {
+    title: 'Radio Button',
+    component: RadioButton,
+};
+
+export const Radio = () => {
+    const radioGroupItems = [1, 2, 3].map((i) => ({
+        value: `Radio${i}`,
+        name: 'group',
+    }));
+
+    return (
+        <>
+            <h1>Radio Buttons</h1>
+            <h2>Default Radio Button</h2>
+            <RadioButton checked={true} />
+            <h2>Label Radio Button</h2>
+            <RadioButton checked={true} value="Label" />
+            <h2>Radio Button Groups</h2>
+            <RadioGroup onChange={_radioClicked} activeRadioButton={'Radio1'}>
+                {radioGroupItems.map((item) => (
+                    <RadioButton key={item.value} {...item} />
+                ))}
+            </RadioGroup>
+        </>
+    );
+};
+
+function _radioClicked(radio: RadioButtonChecked): void {
+    console.log(radio);
+}

src/components/Selectors/RadioButton/RadioButton.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import { RadioButtonProps } from '../';
+import { mergeClasses } from '../../../shared/utilities';
+import { useRadioGroup } from './RadioGroup.context';
+
+import styles from './radio.module.scss';
+
+export const RadioButton: FC<RadioButtonProps> = ({
+    ariaLabel,
+    checked = false,
+    disabled = false,
+    name,
+    value = '',
+    id = `radiobox-${value}-${Math.random().toString(36).slice(2)}`,
+}) => {
+    const { onRadioButtonClick, currentRadioButton } = useRadioGroup();
+    const isActive: boolean = value === currentRadioButton;
+
+    const radioButtonClassNames: string = mergeClasses([
+        styles.radioButton,
+        { [styles.disabled]: disabled },
+    ]);
+
+    return (
+        <div className={styles.selector}>
+            <input
+                aria-label={ariaLabel}
+                checked={isActive ? isActive : checked}
+                disabled={disabled}
+                id={id}
+                name={name}
+                type={'radio'}
+                value={value}
+                onClick={(e) => onRadioButtonClick(value, e)}
+                readOnly
+            />
+            <label
+                htmlFor={id}
+                className={value === '' ? styles.labelNoValue : ''}
+            >
+                <span className={radioButtonClassNames}></span>
+                <span className={styles.selectorLabel}>{value}</span>
+            </label>
+        </div>
+    );
+};

src/components/Selectors/RadioButton/RadioGroup.context.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useState } from 'react';
+import {
+    RadioGroupContextProps,
+    IRadioButtonsContext,
+    RadioButtonChecked,
+    SelectRadioButtonEvent,
+} from '../Selectors.types';
+
+const RadioGroupContext = createContext<Partial<IRadioButtonsContext>>({});
+
+const RadioGroupProvider = ({
+    children,
+    onChange,
+    activeRadioButton,
+}: RadioGroupContextProps) => {
+    const [currentRadioButton, setCurrentRadioButton] =
+        useState<RadioButtonChecked>(activeRadioButton);
+
+    const onRadioButtonClick = (
+        value: RadioButtonChecked,
+        e: SelectRadioButtonEvent
+    ) => {
+        setCurrentRadioButton(value);
+        onChange(value, e);
+    };
+
+    return (
+        <RadioGroupContext.Provider
+            value={{ onRadioButtonClick, currentRadioButton }}
+        >
+            {children}
+        </RadioGroupContext.Provider>
+    );
+};
+
+const useRadioGroup = () => {
+    const context = React.useContext(RadioGroupContext);
+    if (context === undefined) {
+        throw new Error('RadioButton component must be used within RadioGroup');
+    }
+    return context;
+};
+
+export { RadioGroupProvider, useRadioGroup };