From 02613e738de713e0eafcd65fbea5128556c8ddfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Tue, 16 Jul 2024 14:10:08 +0200
Subject: [PATCH] fixup! Feat(web-react): Introduce UNSTABLE_Toggle component
 #DS-1346

---
 .../components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx  |  5 +++--
 .../UNSTABLE_Toggle/useToggleStyleProps.ts          | 13 ++++++++++---
 packages/web-react/src/types/toggle.ts              |  2 ++
 3 files changed, 15 insertions(+), 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
index 1686b72f29..fe2adc336a 100644
--- 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
index 8eb76596a1..0dda7b49e6 100644
--- 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
index 75e96ae2fc..9af280e436 100644
--- 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 {}