IBX-10698: Toggle Field

packages/components/assets/translations.xliff

@@ -6,12 +6,12 @@
         <target>Clear</target>
       </trans-unit>
       <trans-unit id="ids.toggle.label.enabled">
-        <source>Yes</source>
-        <target>Yes</target>
+        <source>On</source>
+        <target>On</target>
       </trans-unit>
       <trans-unit id="ids.toggle.label.disabled">
-        <source>No</source>
-        <target>No</target>
+        <source>Off</source>
+        <target>Off</target>
       </trans-unit>
       <trans-unit id="content_edit.autosave.status_off.message">
         <source>Autosave is off, draft not created</source>

packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import { ToggleButtonFieldSize, ToggleButtonFieldStateful } from '.';
+
+const meta: Meta<typeof ToggleButtonFieldStateful> = {
+    component: ToggleButtonFieldStateful,
+    tags: ['autodocs', 'foundation'],
+    args: {
+        id: 'default-input',
+        name: 'default-input',
+        helperText: 'This is a helper text',
+        label: 'Input Label',
+        onChange: action('on-change'),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleButtonFieldStateful>;
+
+export const Default: Story = {
+    name: 'Default',
+};
+
+export const Required: Story = {
+    name: 'Required',
+    args: {
+        required: true,
+    },
+};
+
+export const Small: Story = {
+    name: 'Small',
+    args: {
+        input: {
+            size: ToggleButtonFieldSize.Small,
+        },
+    },
+};

packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.test.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { ToggleButtonFieldStateful } from '.';
+
+const meta: Meta<typeof ToggleButtonFieldStateful> = {
+    component: ToggleButtonFieldStateful,
+    tags: ['!dev'],
+    args: {
+        id: 'default-input',
+        label: 'Checkbox Label',
+        name: 'default-input',
+        onChange: fn(),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleButtonFieldStateful>;
+
+export const Default: Story = {
+    name: 'Default',
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+        const toggler = canvas.getByRole('button');
+        const checkStepState = async (numberOfClicks: number, currValue: boolean, expectAdditionalParam = false) => {
+            if (expectAdditionalParam) {
+                await expect(args.onChange).toHaveBeenNthCalledWith(numberOfClicks, currValue, expect.anything());
+            } else {
+                await expect(args.onChange).toHaveBeenNthCalledWith(numberOfClicks, currValue);
+            }
+
+            if (currValue) {
+                await expect(toggler.parentNode).toHaveClass('ids-toggle--checked');
+            } else {
+                await expect(toggler.parentNode).not.toHaveClass('ids-toggle--checked');
+            }
+        };
+
+        await step('Click toggle to check it', async () => {
+            await userEvent.click(toggler);
+
+            await checkStepState(1, true); // eslint-disable-line no-magic-numbers
+        });
+
+        await step('Click toggle to uncheck it', async () => {
+            await userEvent.click(toggler);
+
+            await checkStepState(2, false); // eslint-disable-line no-magic-numbers
+        });
+
+        await step('Click toggle label to check it', async () => {
+            const togglerLabel = canvas.getByText('Off');
+
+            await userEvent.click(togglerLabel);
+
+            await checkStepState(3, true, true); // eslint-disable-line no-magic-numbers
+        });
+
+        await step('Click toggle label to uncheck it', async () => {
+            const togglerLabel = canvas.getByText('On');
+
+            await userEvent.click(togglerLabel);
+
+            await checkStepState(4, false, true); // eslint-disable-line no-magic-numbers
+        });
+    },
+};

packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { BaseField } from '@ids-partials/BaseField';
+import { HelperTextType } from '@ids-components/HelperText';
+import { ToggleButtonInput } from '../ToggleButtonInput';
+import withStateChecked from '@ids-hoc/withStateChecked';
+
+import { ToggleButtonFieldProps } from './ToggleButtonField.types';
+
+export const ToggleButtonField = ({
+    checked = false,
+    helperText,
+    helperTextExtra = {},
+    id,
+    input = {},
+    label,
+    labelExtra = {},
+    name,
+    onChange = () => undefined,
+    required = false,
+}: ToggleButtonFieldProps) => {
+    const helperTextProps = {
+        children: helperText,
+        type: HelperTextType.Default,
+        ...helperTextExtra,
+    };
+    const labelProps = {
+        children: label,
+        required,
+        ...labelExtra,
+    };
+    const inputProps = {
+        ...input,
+        checked,
+        id,
+        name,
+        onChange,
+    };
+
+    return (
+        <BaseField helperText={helperTextProps} label={labelProps} type="toggle">
+            <ToggleButtonInput {...inputProps} />
+        </BaseField>
+    );
+};
+
+export const ToggleButtonFieldStateful = withStateChecked<ToggleButtonFieldProps>(ToggleButtonField);

packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.types.ts

@@ -0,0 +1,23 @@
+import { BaseComponentAttributes } from '@ids-types/general';
+
+import {
+    ToggleButtonInputProps as BasicToggleButtonProps,
+    ToggleButtonInputSize as ToggleButtonFieldSize,
+} from '../ToggleButtonInput/ToggleButtonInput.types';
+import { HelperTextProps } from '@ids-components/HelperText/HelperText.types';
+import { LabelProps } from '@ids-components/Label/Label.types';
+
+export { ToggleButtonFieldSize };
+
+export interface ToggleButtonFieldProps extends BaseComponentAttributes {
+    id: string;
+    name: BasicToggleButtonProps['name'];
+    checked?: boolean;
+    input?: Omit<BasicToggleButtonProps, 'checked' | 'error' | 'name' | 'onChange' | 'required'>;
+    helperText?: HelperTextProps['children'];
+    helperTextExtra?: Omit<HelperTextProps, 'children' | 'type'>;
+    label?: LabelProps['children'];
+    labelExtra?: Omit<LabelProps, 'children' | 'error' | 'htmlFor' | 'required'>;
+    onChange?: BasicToggleButtonProps['onChange'];
+    required?: boolean;
+}

packages/components/src/components/ToggleButton/ToggleButtonField/index.ts

@@ -0,0 +1,2 @@
+export * from './ToggleButtonField';
+export * from './ToggleButtonField.types';

packages/components/src/components/ToggleButton/ToggleButtonInput/ToggleButtonInput.tsx

@@ -53,8 +53,8 @@ export const ToggleButtonInput = ({
         onBlur(event);
     };
     const getLabel = () => {
-        const defaultEnabledLabel = Translator.trans(/*@Desc("Yes")*/ 'ids.toggle.label.enabled');
-        const defaultDisabledLabel = Translator.trans(/*@Desc("No")*/ 'ids.toggle.label.disabled');
+        const defaultEnabledLabel = Translator.trans(/*@Desc("On")*/ 'ids.toggle.label.enabled');
+        const defaultDisabledLabel = Translator.trans(/*@Desc("Off")*/ 'ids.toggle.label.disabled');
 
         if (checked) {
             return enabledLabel ?? defaultEnabledLabel;

packages/components/src/components/ToggleButton/ToggleButtonInput/ToggleButtonInput.types.ts

@@ -10,5 +10,4 @@ export type ToggleButtonInputProps = Omit<BaseChoiceInputProps, 'type' | 'error'
     disabledLabel?: string;
     onChange?: (checked: boolean) => void;
     size?: ToggleButtonInputSize;
-    value: string;
 };