feat(controls): Add Checkbox component for settings (#1376)

* feat(controls): Add Checkbox component for settings

* chore: pr comments

* chore: pr comments

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

src/lib/viewers/controls/settings/Settings.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import SettingsCheckboxItem from './SettingsCheckboxItem';
 import SettingsContext, { Menu, Rect } from './SettingsContext';
 import SettingsFlyout from './SettingsFlyout';
 import SettingsGearToggle, { Ref as SettingsToggleRef } from './SettingsToggle';
@@ -92,6 +93,7 @@ export default function Settings({
     );
 }
 
+Settings.CheckboxItem = SettingsCheckboxItem;
 Settings.Context = SettingsContext;
 Settings.Menu = SettingsMenu;
 Settings.MenuBack = SettingsMenuBack;

src/lib/viewers/controls/settings/SettingsCheckboxItem.scss

@@ -0,0 +1,18 @@
+@import './styles';
+
+$bp-SettingsCheckboxItem-spacing: 6px;
+
+.bp-SettingsCheckboxItem {
+    color: $bdl-gray-62;
+    white-space: nowrap;
+}
+
+.bp-SettingsCheckboxItem-input,
+.bp-SettingsCheckboxItem-label {
+    padding: $bp-SettingsCheckboxItem-spacing;
+    user-select: none;
+}
+
+.bp-SettingsCheckboxItem-input {
+    margin: $bp-SettingsCheckboxItem-spacing 0;
+}

src/lib/viewers/controls/settings/SettingsCheckboxItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import uniqueId from 'lodash/uniqueId';
+import './SettingsCheckboxItem.scss';
+
+export type Props = {
+    isChecked: boolean;
+    label: string;
+    onChange: (isChecked: boolean) => void;
+};
+
+export default function SettingsCheckboxItem({ isChecked, label, onChange }: Props): JSX.Element {
+    const { current: id } = React.useRef(uniqueId('bp-SettingsCheckboxItem_'));
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        onChange(event.target.checked);
+    };
+
+    return (
+        <div className="bp-SettingsCheckboxItem">
+            <input
+                checked={isChecked}
+                className="bp-SettingsCheckboxItem-input"
+                id={id}
+                onChange={handleChange}
+                type="checkbox"
+            />
+            <label className="bp-SettingsCheckboxItem-label" htmlFor={id}>
+                {label}
+            </label>
+        </div>
+    );
+}

src/lib/viewers/controls/settings/__tests__/SettingsCheckboxItem-test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import SettingsCheckboxItem from '../SettingsCheckboxItem';
+
+describe('SettingsCheckboxItem', () => {
+    const getWrapper = (props = {}): ShallowWrapper =>
+        shallow(<SettingsCheckboxItem isChecked label="label" onChange={jest.fn()} {...props} />);
+
+    describe('onChange()', () => {
+        test.each([true, false])('should call onChange with the new checked value when initially %s', isChecked => {
+            const nextIsChecked = !isChecked;
+            const onChange = jest.fn();
+            const wrapper = getWrapper({ isChecked, onChange });
+
+            wrapper.find('input').simulate('change', { target: { checked: nextIsChecked } });
+
+            expect(onChange).toBeCalledWith(nextIsChecked);
+        });
+    });
+
+    describe('render', () => {
+        test('should return a valid wrapper', () => {
+            const wrapper = getWrapper({ label: 'foo' });
+
+            expect(wrapper.hasClass('bp-SettingsCheckboxItem')).toBe(true);
+            expect(wrapper.exists('input')).toBe(true);
+            expect(wrapper.find('label').text()).toBe('foo');
+        });
+
+        test.each([true, false])('should set checked attribute as when specified as %s', isChecked => {
+            const wrapper = getWrapper({ isChecked });
+
+            expect(wrapper.find('input').prop('checked')).toBe(isChecked);
+        });
+    });
+});