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

lmc-eu · Jul 16, 2024 · 7cd70e1 · 7cd70e1
1 parent 017fe65
commit 7cd70e1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
@@ -15,9 +15,10 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
     id,
     isDisabled,
     isChecked,
+    isRequired,
     label,
     helperText,
-    onChange,
+    onChange = () => {},
     validationState,
     validationText,
     ...restProps
@@ -55,8 +56,8 @@ const _UNSTABLE_Toggle = (props: SpiritToggleProps, ref: ForwardedRef<HTMLInputE
         className={classProps.input}
         disabled={isDisabled}
         checked={isChecked}
+        required={isRequired}
         onChange={onChange}
-        name="default"
         ref={ref}
       />
     </label>

diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Toggle/useToggleStyleProps.ts
@@ -15,14 +15,21 @@ export interface ToggleStyles<T> {
 }
 
 export function useToggleStyleProps(props: SpiritToggleProps): ToggleStyles<SpiritToggleProps> {
-  const { isRequired = false, isFluid = false, isDisabled, isLabelHidden = false, validationState } = props;
+  const {
+    isRequired = false,
+    isFluid = false,
+    isDisabled,
+    isLabelHidden = false,
+    validationState,
+    ...restProps
+  } = props;
 
   const toggleClass = useClassNamePrefix('UNSTABLE_Toggle');
-  const toggleHiddenLabelClass = `${toggleClass}--hiddenLabel`;
   const toggleFluidClass = `${toggleClass}--fluid`;
   const toggleDisabledClass = `${toggleClass}--disabled`;
   const toggleTextClass = `${toggleClass}__text`;
   const toggleLabelClass = `${toggleClass}__label`;
+  const toggleHiddenLabelClass = `${toggleLabelClass}--hidden`;
   const toggleValidationClass = `${toggleClass}--${validationState}`;
   const toggleRequiredClass = `${toggleLabelClass}--required`;
   const toggleInputClass = `${toggleClass}__input`;
@@ -47,6 +54,6 @@ export function useToggleStyleProps(props: SpiritToggleProps): ToggleStyles<Spir
       input: toggleInputClass,
       validationText: toggleValidationTextClass,
     },
-    props,
+    props: restProps,
   };
 }
diff --git a/packages/web-react/src/types/toggle.ts b/packages/web-react/src/types/toggle.ts
@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { LabelProps } from './label';
 import {
   ChildrenProps,
@@ -27,6 +28,7 @@ export interface ToggleProps
   isLabelHidden?: boolean;
   label: string;
   validationText?: ValidationTextType;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface SpiritToggleProps extends ToggleProps {}