fixup! Feat(web-react): Introduce UNSTABLE_Toggle component #DS-1346

lmc-eu · Jul 18, 2024 · d553946 · d553946
1 parent 8ea61b5
commit d553946
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 47 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/README.md b/packages/web-react/src/components/UNSTABLE_Toggle/README.md
@@ -52,7 +52,7 @@ Add the `isRequired` prop to mark it as required.
 
 ## Validation States
 
-Validation states can be presented either by prop `validationState`. See Validation state [dictionary][dictionary-validation].
+Validation states can be presented by prop `validationState`. See Validation state [dictionary][dictionary-validation].
 
 ```jsx
 <UNSTABLE_Toggle id="toggle-success" label="Toggle Label" validationState="success" />
@@ -67,13 +67,13 @@ Validation states can be presented either by prop `validationState`. See Validat
   id="toggle-danger"
   label="Toggle Label"
   validationText={['First validation text', 'Second validation text']}
-validationState="danger"
+  validationState="danger"
 />
 ```
 
 ## Disabled State
 
-On top of adding the `isDisabled` props to disable Toggle.
+ You can add `isDisabled` prop to disable Toggle.
 
 ```jsx
 <UNSTABLE_Toggle id="toggle-disabled" label="Toggle Label" isDisabled />
@@ -83,16 +83,16 @@ On top of adding the `isDisabled` props to disable Toggle.
 
 | Name              | Type                                           | Default | Required | Description                    |
 | ----------------- | ---------------------------------------------- | ------- | -------- | ------------------------------ |
+| `hasIndicators`   | boolean                                        | `false` | ✕        | Whether has visual indicators  |
+| `helperText`      | string                                         | -       | ✕        | Helper text                    |
 | `id`              | string                                         | -       | ✓        | Input and label identification |
-| `isDisabled`      | boolean                                        | `false` | ✕        | Whether is toggle disabled     |
 | `isChecked`       | boolean                                        | `false` | ✕        | Whether is toggle checked      |
-| `isLabelHidden`   | boolean                                        | `false` | ✕        | Whether is label hidden        |
+| `isDisabled`      | boolean                                        | `false` | ✕        | Whether is toggle disabled     |
 | `isFluid`         | boolean                                        | `false` | ✕        | Whether is toggle fluid        |
-| `hasIndicators`   | boolean                                        | `false` | ✕        | Whether has visual indicators  |
-| `label`           | string                                         | -       | ✕        | Label text                     |
-| `helperText`      | string                                         | -       | ✕        | Helper text                    |
-| `ref`             | `ForwardedRef<HTMLInputElement>`               | -       | ✕        | Input element reference        |
+| `isLabelHidden`   | boolean                                        | `false` | ✕        | Whether is label hidden        |
+| `label`           | string                                         | -       | ✓        | Label text                     |
 | `onChange`        | (event: ChangeEvent<HTMLInputElement>) => void | -       | ✕        | Change event handler           |
+| `ref`             | `ForwardedRef<HTMLInputElement>`               | -       | ✕        | Input element reference        |
 | `validationState` | [Validation dictionary][dictionary-validation] | -       | ✕        | Type of validation state       |
 | `validationText`  | `string` \| `string[]`                         | -       | ✕        | Validation text                |
 

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, forwardRef, useState } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritToggleProps } from '../../types';
 import { HelperText, useAriaIds, ValidationText } from '../Field';
@@ -14,7 +14,7 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
     'aria-describedby': ariaDescribedBy = '',
     id,
     isDisabled,
-    isChecked,
+    isChecked = false,
     isRequired,
     label,
     helperText,
@@ -27,6 +27,12 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   const [ids, register] = useAriaIds(ariaDescribedBy);
+  const [checked, setChecked] = useState(isChecked);
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    onChange(event);
+  };
 
   return (
     <label {...styleProps} htmlFor={id} className={classNames(classProps.root, styleProps.className)}>
@@ -39,19 +45,7 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
           registerAria={register}
           helperText={helperText}
         />
-        {validationState && Array.isArray(validationText) && (
-          <ul className={classProps.validationText} id={`${id}-validation-text`}>
-            {validationText.map((text, index) => (
-              <ValidationText
-                key={`${index + 1}-${id}__validationText`}
-                validationText={text}
-                registerAria={register}
-                elementType="li"
-              />
-            ))}
-          </ul>
-        )}
-        {validationState && !Array.isArray(validationText) && (
+        {validationState && (
           <ValidationText
             className={classProps.validationText}
             id={`${id}__validationText`}
@@ -67,9 +61,9 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
         id={id}
         className={classProps.input}
         disabled={isDisabled}
-        checked={isChecked}
+        checked={checked}
         required={isRequired}
-        onChange={onChange}
+        onChange={handleOnChange}
         ref={ref}
       />
     </label>

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/__tests__/UNSTABLE_Toggle.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { validationStatePropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
@@ -78,7 +78,10 @@ describe('UNSTABLE_Toggle', () => {
   it('should have correct classname if fluid', () => {
     render(<UNSTABLE_Toggle id="test-toggle" label="Toggle Label" isFluid />);
 
-    expect(screen.getByRole('checkbox').parentElement).toHaveClass('UNSTABLE_Toggle UNSTABLE_Toggle--fluid');
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox.parentElement).toHaveClass('UNSTABLE_Toggle');
+    expect(checkbox.parentElement).toHaveClass('UNSTABLE_Toggle--fluid');
   });
 
   it('should have indicators classname', () => {
@@ -89,4 +92,16 @@ describe('UNSTABLE_Toggle', () => {
     expect(checkbox).toHaveClass('UNSTABLE_Toggle__input');
     expect(checkbox).toHaveClass('UNSTABLE_Toggle__input--indicators');
   });
+
+  it('should change the state of the checkbox when clicked', () => {
+    render(<UNSTABLE_Toggle id="test-toggle" label="Toggle Label" />);
+
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(checkbox);
+
+    expect(checkbox).toBeChecked();
+  });
 });
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleDefault.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleDefault.tsx
@@ -3,8 +3,8 @@ import { UNSTABLE_Toggle } from '../index';
 
 const ToggleDefault = () => (
   <>
-    <UNSTABLE_Toggle id="toggle-default" label="Toggle Label" />
-    <UNSTABLE_Toggle id="toggle-default-checked" label="Toggle Label" isChecked />
+    <UNSTABLE_Toggle id="toggle-default" label="Toggle Label" name="default" />
+    <UNSTABLE_Toggle id="toggle-default-checked" label="Toggle Label" name="default" isChecked />
   </>
 );
 

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleDisabled.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleDisabled.tsx
@@ -3,9 +3,15 @@ import { UNSTABLE_Toggle } from '../index';
 
 const ToggleDisabled = () => (
   <>
-    <UNSTABLE_Toggle id="toggle-disabled" label="Toggle Label" isDisabled />
-    <UNSTABLE_Toggle id="toggle-disabled-checked-disabled" label="Toggle Label" isDisabled isChecked />
-    <UNSTABLE_Toggle id="toggle-helper-text-disabled" label="Toggle Label" helperText="Helper text" isDisabled />
+    <UNSTABLE_Toggle id="toggle-disabled" label="Toggle Label" name="default" isDisabled />
+    <UNSTABLE_Toggle id="toggle-disabled-checked-disabled" label="Toggle Label" name="default" isDisabled isChecked />
+    <UNSTABLE_Toggle
+      id="toggle-helper-text-disabled"
+      label="Toggle Label"
+      helperText="Helper text"
+      name="default"
+      isDisabled
+    />
   </>
 );
 

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleFluid.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleFluid.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { UNSTABLE_Toggle } from '../index';
 
-const ToggleFluid = () => <UNSTABLE_Toggle id="toggle-fluid" label="Toggle Label" isFluid />;
+const ToggleFluid = () => <UNSTABLE_Toggle id="toggle-fluid" label="Toggle Label" name="default" isFluid />;
 
 export default ToggleFluid;
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleHelperText.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleHelperText.tsx
@@ -3,8 +3,14 @@ import { UNSTABLE_Toggle } from '../index';
 
 const ToggleHelperText = () => (
   <>
-    <UNSTABLE_Toggle id="toggle-helper-text" label="Toggle Label" helperText="Helper text" />
-    <UNSTABLE_Toggle id="toggle-helper-text-checked" label="Toggle Label" helperText="Helper text" isChecked />
+    <UNSTABLE_Toggle id="toggle-helper-text" label="Toggle Label" helperText="Helper text" name="default" />
+    <UNSTABLE_Toggle
+      id="toggle-helper-text-checked"
+      label="Toggle Label"
+      helperText="Helper text"
+      name="default"
+      isChecked
+    />
   </>
 );
 

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleHiddenLabel.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleHiddenLabel.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { UNSTABLE_Toggle } from '../index';
 
-const ToggleHiddenLabel = () => <UNSTABLE_Toggle id="toggle-hidden-label" label="Toggle Label" isLabelHidden />;
+const ToggleHiddenLabel = () => (
+  <UNSTABLE_Toggle id="toggle-hidden-label" label="Toggle Label" name="default" isLabelHidden />
+);
 
 export default ToggleHiddenLabel;
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleIndicators.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleIndicators.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { UNSTABLE_Toggle } from '../index';
 
-const ToggleDefault = () => (
+const ToggleIndicators = () => (
   <>
-    <UNSTABLE_Toggle id="toggle-indicators" label="Toggle Label" hasIndicators />
-    <UNSTABLE_Toggle id="toggle-indicators-checked" label="Toggle Label" isChecked hasIndicators />
+    <UNSTABLE_Toggle id="toggle-indicators" label="Toggle Label" name="default" hasIndicators />
+    <UNSTABLE_Toggle id="toggle-indicators-checked" label="Toggle Label" name="default" isChecked hasIndicators />
   </>
 );
 
-export default ToggleDefault;
+export default ToggleIndicators;
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleRequired.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleRequired.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { UNSTABLE_Toggle } from '../index';
 
-const ToggleRequired = () => <UNSTABLE_Toggle id="toggle-required" label="Toggle Label" isRequired />;
+const ToggleRequired = () => <UNSTABLE_Toggle id="toggle-required" label="Toggle Label" name="default" isRequired />;
 
 export default ToggleRequired;
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleValidation.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/ToggleValidation.tsx
@@ -9,20 +9,23 @@ const ToggleValidation = () => (
       label="Toggle Label"
       validationText="Validation text"
       validationState="warning"
+      name="default"
       isChecked
     />
     <UNSTABLE_Toggle
       id="toggle-danger"
       label="Toggle Label"
       validationText={['First validation text', 'Second validation text']}
       validationState="danger"
+      name="default"
     />
     <UNSTABLE_Toggle
       id="toggle-warning-helper-text"
       label="Toggle Label"
       helperText="Helper text"
       validationText="Validation text"
       validationState="warning"
+      name="default"
       isChecked
     />
   </>

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/demo/index.tsx
@@ -30,7 +30,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <DocsSection title="Disabled" stackAlignment="stretch">
       <ToggleDisabled />
     </DocsSection>
-    <DocsSection title="HelperText" stackAlignment="stretch">
+    <DocsSection title="Helper Text" stackAlignment="stretch">
       <ToggleHelperText />
     </DocsSection>
     <DocsSection title="Validation State with Validation Text" stackAlignment="stretch">

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { useClassNamePrefix } from '../../hooks';
-import { SpiritToggleProps } from '../../types/toggle';
+import { SpiritToggleProps } from '../../types';
 
 export interface ToggleStyles<T> {
   classProps: {
@@ -21,7 +21,7 @@ export function useToggleStyleProps(props: SpiritToggleProps): ToggleStyles<Spir
     isDisabled = false,
     isLabelHidden = false,
     validationState,
-    hasIndicators,
+    hasIndicators = false,
     ...restProps
   } = props;
 

diff --git a/packages/web-react/src/types/toggle.ts b/packages/web-react/src/types/toggle.ts
@@ -22,14 +22,14 @@ export interface ToggleProps
     HelperTextProps,
     StyleProps,
     Validation {
+  hasIndicators?: boolean;
   isChecked?: boolean;
   isDisabled?: boolean;
   isFluid?: boolean;
   isLabelHidden?: boolean;
   label: string;
-  validationText?: ValidationTextType;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  hasIndicators?: boolean;
+  validationText?: ValidationTextType;
 }
 
 export interface SpiritToggleProps extends ToggleProps {}
diff --git a/...2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png b/...2e/demo-components-compare.spec.ts-snapshots/unstable-toggle-chromium-linux.png