@true-engineering/true-react-common-ui-kit 2.0.1 → 2.1.0

package/src/components/Switch/Switch.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTheme } from '../../hooks';
-import { addDataAttributes, isNotEmpty } from '../../helpers';
+import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
 import { ICommonProps } from '../../types';
 
 import { styles, SwitchStyles } from './Switch.styles';
@@ -13,14 +13,11 @@ export interface ISwitchState<V = string> {
 
 export interface ISwitchProps<V extends string> extends ICommonProps {
   tweakStyles?: SwitchStyles;
+  children?: ReactNode;
   value: V;
   isChecked: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
-  /**
-   * @deprecated Use `children` instead
-   */
-  label?: string;
   /**
    * @default `right`
    */
@@ -29,28 +26,25 @@ export interface ISwitchProps<V extends string> extends ICommonProps {
    * @default `primary`
    */
   color?: 'primary' | 'secondary';
-  onChange: (state: ISwitchState<V>) => void;
   testId?: string;
+  onChange(state: ISwitchState<V>): void;
 }
 
 export const Switch = <V extends string>({
   isDisabled,
   isChecked,
   isInvalid,
-  onChange,
   value,
-  label,
   children,
   labelPosition = 'right',
   color = 'primary',
   data,
   tweakStyles,
   testId,
-}: PropsWithChildren<ISwitchProps<V>>): JSX.Element => {
+  onChange,
+}: ISwitchProps<V>): JSX.Element => {
   const { classes } = useTheme('Switch', styles, tweakStyles);
 
-  const hasLabel = isNotEmpty(label);
-  const hasChild = isNotEmpty(children);
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 
   return (
@@ -60,8 +54,8 @@ export const Switch = <V extends string>({
         [classes.checked]: isChecked,
         [classes.invalid]: isInvalid,
       })}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
-      data-testid={testId}
     >
       <span className={classes.switch}>
         <input
@@ -71,17 +65,17 @@ export const Switch = <V extends string>({
           onChange={isDisabled ? undefined : handleChange}
           checked={isChecked}
           disabled={isDisabled}
-          data-testid={testId !== undefined ? `${testId}-input` : undefined}
+          {...addDataTestId(testId, 'input')}
         />
       </span>
-      {(hasLabel || hasChild) && (
+      {isNotEmpty(children) && (
         <span
           className={clsx(
             classes.label,
             classes[labelPosition === 'left' ? 'labelLeft' : 'labelRight'],
           )}
         >
-          {hasLabel ? label : children}
+          {children}
         </span>
       )}
     </label>