@epam/uui 5.3.0-rc.1 → 5.3.0

package/components/inputs/TimePicker.module.scss

@@ -0,0 +1,68 @@
+.root {
+    --uui-time_picker-text: var(--uui-control-text);
+    --uui-time_picker-icon-clickable: var(--uui-icon);
+    --uui-time_picker-icon-clickable-hover: var(--uui-icon-hover);
+
+    &:global(.uui-timepicker-container) {
+        display: flex;
+        padding: 15px 12px;
+        justify-content: center;
+
+        :global(.uui-timepicker-input) {
+            &:global(.uui-input-box) {
+                margin: 6px 0;
+                width: 36px;
+                height: 36px;
+            }
+
+            > input {
+                text-align: center;
+                font-size: 24px;
+                line-height: 24px;
+                color: var(--uui-time_picker-text);
+                font-family: var(--uui-font);
+                font-weight: 400;
+
+                &::placeholder,
+                &::-webkit-input-placeholder {
+                    color: var(--uui-time_picker-text);
+                    opacity: 1; /* for Firefox */
+                }
+            }
+        }
+
+        :global(.uui-timepicker-item) {
+            position: relative;
+            padding: 9px 24px;
+        }
+
+        :global(.uui-timepicker-item:first-child) {
+            &::after {
+                content: ':';
+                position: absolute;
+                top: 35px;
+                left: 81px;
+                color: var(--uui-time_picker-text);
+                font-size: 24px;
+                line-height: 30px;
+            }
+        }
+
+        :global(.uui-timepicker-icon-up), :global(.uui-timepicker-icon-down) {
+            align-items: center;
+            fill: var(--uui-time_picker-icon-clickable);
+
+            &:hover {
+                fill: var(--uui-time_picker-icon-clickable-hover);
+            }
+        }
+
+        :global(.uui-timepicker-icon-up) {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.timepicker-input {
+    width: 100%;
+}

package/components/inputs/TimePicker.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { devLogger, DropdownBodyProps, IDropdownToggler } from '@epam/uui-core';
+import { BaseTimePickerProps, BaseTimePicker } from '@epam/uui-components';
+import { IHasEditMode, SizeMod, EditMode } from '../types';
+import { DropdownContainer } from '../overlays/DropdownContainer';
+import { TextInput } from './TextInput';
+import { TimePickerBody } from './TimePickerBody';
+import css from './TimePicker.module.scss';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
+
+dayjs.extend(customParseFormat);
+
+const defaultMode = EditMode.FORM;
+export interface TimePickerProps extends BaseTimePickerProps, SizeMod, IHasEditMode {
+    minutesStep?: number;
+    format?: 12 | 24;
+}
+
+export class TimePicker extends BaseTimePicker<TimePickerProps> {
+    renderInput = (props: IDropdownToggler) => {
+        if (__DEV__) {
+            if (this.props.size === '48') {
+                devLogger.warnAboutDeprecatedPropValue<TimePickerProps, 'size'>({
+                    component: 'TimePicker',
+                    propName: 'size',
+                    propValue: this.props.size,
+                    propValueUseInstead: '42',
+                    condition: () => ['48'].indexOf(this.props.size) !== -1,
+                });
+            }
+        }
+        return (
+            <TextInput
+                { ...props }
+                onClick={ null }
+                size={ this.props.size || '36' }
+                isDisabled={ this.props.isDisabled }
+                isReadonly={ this.props.isReadonly }
+                isInvalid={ this.props.isInvalid }
+                cx={ [css.root, css.timepickerInput, this.props.inputCx] }
+                value={ this.state.value }
+                onValueChange={ this.handleInputChange }
+                onCancel={ this.onClear }
+                onFocus={ this.handleFocus }
+                onBlur={ this.handleBlur }
+                isDropdown={ false }
+                placeholder={ this.props.placeholder ? this.props.placeholder : this.getFormat() }
+                mode={ this.props.mode || defaultMode }
+                rawProps={ this.props.rawProps?.input }
+            />
+        );
+    };
+
+    renderBody = (props: DropdownBodyProps) => {
+        return (
+            !this.props.isDisabled && !this.props.isReadonly && (
+                <DropdownContainer { ...props } focusLock={ false }>
+                    <TimePickerBody
+                        { ...this.props }
+                        value={ this.props.value !== null ? this.props.value : { hours: null, minutes: null } }
+                        rawProps={ this.props.rawProps?.body }
+                        cx={ this.props.bodyCx }
+                    />
+                </DropdownContainer>
+            )
+        );
+    };
+}

package/components/inputs/TimePickerBody.tsx

@@ -0,0 +1,10 @@
+import { TimePickerBody as uuiTimePickerBody, TimePickerBodyProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import css from './TimePicker.module.scss';
+import { ReactComponent as ArrowIcon } from './../../icons/folding-arrow-18.svg';
+
+export const TimePickerBody = withMods<TimePickerBodyProps>(
+    uuiTimePickerBody,
+    () => [css.root],
+    () => ({ addIcon: ArrowIcon, subtractIcon: ArrowIcon }),
+);

package/components/inputs/__tests__/Checkbox.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Checkbox } from '../Checkbox';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Checkbox', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Checkbox value={ null } onValueChange={ jest.fn } size="18" mode="cell" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/MultiSwitch.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MultiSwitch } from '../MultiSwitch';
+import { renderer } from '@epam/uui-test-utils';
+
+it('should be rendered correctly', () => {
+    const tree = renderer
+        .create(
+            <MultiSwitch
+                value={ 1 }
+                onValueChange={ jest.fn }
+                items={ [{ id: 1, caption: 'On' }, { id: 2, caption: 'Off' }] }
+            />,
+        )
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

package/components/inputs/__tests__/NumericInput.test.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { NumericInput, NumericInputProps } from '../NumericInput';
+import {
+    renderSnapshotWithContextAsync, setupComponentForTest, screen, fireEvent,
+} from '@epam/uui-test-utils';
+import { i18n } from '@epam/uui-core';
+
+async function setupNumericInput(params: Partial<NumericInputProps>) {
+    const { result, mocks } = await setupComponentForTest<NumericInputProps>(
+        (context) => {
+            return {
+                value: params.value,
+                min: params.min,
+                max: params.max,
+                step: params.step,
+                isReadonly: params.isReadonly,
+                isDisabled: params.isDisabled,
+                disableArrows: params.disableArrows,
+                disableLocaleFormatting: params.disableLocaleFormatting,
+                formatValue: params.formatValue,
+                formatOptions: params.formatOptions,
+                onValueChange: jest.fn().mockImplementation((newValue) => context.current.setProperty('value', newValue)),
+            };
+        },
+        (props) => <NumericInput { ...props } />,
+    );
+
+    const dom = {
+        input: screen.getByRole('spinbutton') as HTMLInputElement,
+    };
+
+    return { result, dom, mocks };
+}
+
+describe('NumericInput', () => {
+    describe('snapshots', () => {
+        it('should be rendered with minimum props', async () => {
+            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } />);
+            expect(tree).toMatchSnapshot();
+        });
+
+        it('should be rendered with maximum props', async () => {
+            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } size="36" mode="inline" />);
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
+    describe('integer numbers', () => {
+        it('should change value by typing', async () => {
+            const res = await setupNumericInput({ value: 1000 });
+            expect(res.dom.input.placeholder).toEqual('1,000');
+            fireEvent.change(res.dom.input, { target: { value: 2000 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2000);
+            expect(res.dom.input.placeholder).toEqual('2,000');
+        });
+
+        it('should change value by keyboard arrow up/down', async () => {
+            const res = await setupNumericInput({ value: 1000, step: 10 });
+            expect(res.dom.input.placeholder).toEqual('1,000');
+            fireEvent.keyDown(res.dom.input, { key: 'ArrowUp' });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1010);
+            expect(res.dom.input.placeholder).toEqual('1,010');
+            fireEvent.keyDown(res.dom.input, { key: 'ArrowDown' });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000);
+            expect(res.dom.input.placeholder).toEqual('1,000');
+        });
+
+        it('should invoke onValueChange on blur only when new value is different from current', async () => {
+            const res = await setupNumericInput({ value: 1000 });
+            expect(res.dom.input.placeholder).toEqual('1,000');
+            fireEvent.focusIn(res.dom.input);
+            expect(res.dom.input.value).toEqual('1000');
+            fireEvent.focusOut(res.dom.input);
+            expect(res.mocks.onValueChange).not.toHaveBeenCalled();
+        });
+
+        it('should change value by typing considering min/max specified', async () => {
+            const res = await setupNumericInput({ value: 10, min: -15, max: 15 });
+            expect(res.dom.input.placeholder).toEqual('10');
+            fireEvent.change(res.dom.input, { target: { value: 20 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(20);
+            expect(res.dom.input.placeholder).toEqual('20');
+            fireEvent.change(res.dom.input, { target: { value: -20 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-20);
+            expect(res.dom.input.placeholder).toEqual('-20');
+            fireEvent.change(res.dom.input, { target: { value: -2 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
+            expect(res.dom.input.placeholder).toEqual('-2');
+            fireEvent.change(res.dom.input, { target: { value: 2 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
+            expect(res.dom.input.placeholder).toEqual('2');
+        });
+
+        it('should change value by arrows considering min/max specified', async () => {
+            const res = await setupNumericInput({ value: 1, min: -2, max: 2 });
+            const [arrowUp, arrowDown] = screen.getAllByRole('button');
+            fireEvent.click(arrowUp);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
+            expect(res.dom.input.placeholder).toEqual('2');
+            fireEvent.click(arrowUp);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(2);
+            expect(res.dom.input.placeholder).toEqual('2');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1);
+            expect(res.dom.input.placeholder).toEqual('1');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(0);
+            expect(res.dom.input.placeholder).toEqual('0');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-1);
+            expect(res.dom.input.placeholder).toEqual('-1');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
+            expect(res.dom.input.placeholder).toEqual('-2');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(-2);
+            expect(res.dom.input.placeholder).toEqual('-2');
+        });
+
+        it('should render as readonly if isReadonly=true', async () => {
+            const res = await setupNumericInput({ value: 1, isReadonly: true });
+            expect(res.dom.input.readOnly).toBeTruthy();
+        });
+
+        it('should render as disabled if isDisabled=true', async () => {
+            const res = await setupNumericInput({ value: 1, isDisabled: true });
+            expect(res.dom.input).toBeDisabled();
+        });
+
+        it('should hide arrows when disableArrows=true', async () => {
+            await setupNumericInput({ value: 1, disableArrows: true });
+            const [arrowUp, arrowDown] = screen.queryAllByRole('button');
+            expect(arrowUp).not.toBeDefined();
+            expect(arrowDown).not.toBeDefined();
+        });
+
+        it('should format value using custom formatValue function', async () => {
+            const formatValue = (value: number) => {
+                return String(value).split('').join('|');
+            };
+            const res = await setupNumericInput({ value: 1000, formatValue });
+            expect(res.dom.input.placeholder).toEqual('1|0|0|0');
+        });
+
+        it('should not format value if disableLocaleFormatting=true', async () => {
+            const res = await setupNumericInput({ value: 1000000, disableLocaleFormatting: true });
+            expect(res.dom.input.placeholder).toEqual('1000000');
+        });
+
+        it('should display un-formatted value when focused', async () => {
+            const res = await setupNumericInput({ value: 1000000 });
+            expect(res.dom.input.placeholder).toEqual('1,000,000');
+            expect(res.dom.input).toHaveValue(null);
+            fireEvent.focusIn(res.dom.input);
+            expect(res.dom.input).toHaveValue(1000000);
+        });
+    });
+    describe('fractional numbers', () => {
+        it('should format value using custom formatValue function', async () => {
+            const formatValue = jest.fn().mockImplementation((value) => String(value).split('').join('|'));
+            const res = await setupNumericInput({
+                value: 1000.111,
+                formatOptions: { maximumFractionDigits: 3 },
+                formatValue,
+            });
+            expect(res.dom.input.placeholder).toEqual('1|0|0|0|.|1|1|1');
+            fireEvent.change(res.dom.input, { target: { value: 1000.2222222222 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000.222);
+            expect(res.dom.input.placeholder).toEqual('1|0|0|0|.|2|2|2');
+        });
+
+        it('should change value by arrows considering min/max specified and fractional step', async () => {
+            const res = await setupNumericInput({
+                value: 1199.09,
+                formatOptions: { maximumFractionDigits: 3, minimumFractionDigits: 2 },
+                step: 0.001,
+            });
+            expect(res.dom.input.placeholder).toEqual('1,199.09');
+            const [arrowUp, arrowDown] = screen.getAllByRole('button');
+            fireEvent.click(arrowUp);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1199.091);
+            expect(res.dom.input.placeholder).toEqual('1,199.091');
+            fireEvent.click(arrowDown);
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1199.09);
+            expect(res.dom.input.placeholder).toEqual('1,199.09');
+        });
+
+        it('should change value by typing considering min/max specified', async () => {
+            const res = await setupNumericInput({
+                value: 1000.11,
+                formatOptions: { maximumFractionDigits: 3, minimumFractionDigits: 2 },
+            });
+            expect(res.dom.input.placeholder).toEqual('1,000.11');
+            fireEvent.change(res.dom.input, { target: { value: 1000.1116 } });
+            expect(res.mocks.onValueChange).toHaveBeenCalledWith(1000.112);
+            expect(res.dom.input.placeholder).toEqual('1,000.112');
+        });
+
+        it('should display value using "de-DE" locale', async () => {
+            i18n.locale = 'de-DE';
+            const res = await setupNumericInput({
+                value: 1000.112,
+                formatOptions: { maximumFractionDigits: 3 },
+            });
+            expect(res.dom.input.placeholder).toEqual('1.000,112');
+        });
+    });
+});

package/components/inputs/__tests__/RadioInput.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RadioInput } from '../RadioInput';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('RadioInput', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/Slider.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Slider } from '../Slider';
+import {
+    mockReactPortalsForSnapshots,
+    renderSnapshotWithContextAsync,
+} from '@epam/uui-test-utils';
+
+describe('Slider', () => {
+    it('should render with minimum props', async () => {
+        const { mockClear } = mockReactPortalsForSnapshots();
+        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } />);
+        mockClear();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should render with maximum props', async () => {
+        const { mockClear } = mockReactPortalsForSnapshots();
+        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } renderLabel={ (num) => `${num}` } />);
+        mockClear();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/Switch.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Switch } from '../Switch';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Switch', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TextArea.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '../TextArea';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('TextArea', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } placeholder="Type here" size="36" maxLength={ 200 } rows={ 4 } mode="inline" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TextInput.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput } from '../TextInput';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('TextInput', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TextInput value={ null } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TextInput value={ null } onValueChange={ jest.fn } onAccept={ jest.fn } onCancel={ jest.fn } icon={ CalendarIcon } iconPosition="right" size="36" isDropdown isOpen />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TimePicker.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TimePicker } from '../TimePicker';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+describe('TimePicker', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TimePicker value={ null } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TimePicker value={ { hours: 1, minutes: 5 } } onValueChange={ jest.fn } format={ 24 } minutesStep={ 5 } size="36" isDisabled />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TimePickerBody.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TimePickerBody } from '../TimePickerBody';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import MockDate from 'mockdate';
+import { systemIcons } from '../../../icons/icons';
+
+const arrowIcon = systemIcons[30].foldingArrow;
+
+beforeEach(() => {
+    MockDate.set(new Date('2020-12-09T01:02:03+00:00'));
+});
+
+afterEach(() => {
+    MockDate.reset();
+});
+
+describe('TimePickerBody', () => {
+    it('should be rendered with minimum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TimePickerBody value={ { hours: 12, minutes: 30 } } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered with maximum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TimePickerBody
+                value={ { hours: 12, minutes: 30 } }
+                onValueChange={ jest.fn }
+                format={ 12 }
+                minutesStep={ 5 }
+                addIcon={ arrowIcon }
+                subtractIcon={ arrowIcon }
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox should be rendered correctly 1`] = `
+<label
+  className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+  tabIndex={-1}
+>
+  <div
+    className="uui-checkbox"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </div>
+</label>
+`;
+
+exports[`Checkbox should be rendered correctly 2`] = `
+<label
+  className="container uui-checkbox-container root size-18 mode-cell uui-color-primary -clickable"
+  tabIndex={-1}
+>
+  <div
+    className="uui-checkbox"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </div>
+</label>
+`;

package/components/inputs/__tests__/__snapshots__/MultiSwitch.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should be rendered correctly 1`] = `
+<div
+  className="container root"
+  role="tablist"
+>
+  <button
+    aria-current={true}
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      On
+    </div>
+  </button>
+  <button
+    aria-current={false}
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-primary uui-size-36"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      Off
+    </div>
+  </button>
+</div>
+`;