Fix failing specs

Author: Haider Alshamma

src/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size">;
 
 type CheckboxProps = NativeInputProps &
   SpaceProps & {
+    children?: React.ReactNode;
     htmlSize?: number;
     size?: ComponentSize;
     labelText?: string;
@@ -55,7 +56,7 @@ const checkboxStyle = (theme: DefaultNDSThemeType) => ({
   },
 });
 
-const getCheckboxStyle = (props, checked) => {
+const getCheckboxStyle = (props: CheckboxProps, checked: "checked" | "unchecked") => {
   const checkboxStyleMap = checkboxStyle(props.theme);
   if (props.disabled) {
     return checkboxStyleMap[checked].disabled;
@@ -129,43 +130,40 @@ const CheckboxInput = styled.input<CheckboxProps>((props) => ({
 
 type Ref = HTMLInputElement;
 
-const Checkbox = forwardRef<Ref, CheckboxProps>(
-  (
-    { size, className, labelText, checked, indeterminate, disabled = false, error = false, required = false, ...props },
-    ref
-  ) => {
-    const componentSize = useComponentSize(size);
-    const spaceProps = getSubset(props, propTypes.space);
-    const restProps = omitSubset(props, propTypes.space);
+const Checkbox = forwardRef<Ref, CheckboxProps>((props, ref) => {
+  const { size, className, labelText, disabled, checked, required, error, indeterminate } = props;
 
-    return (
-      <Box className={className} px="0" {...spaceProps}>
-        <ClickInputLabel size={componentSize} disabled={disabled}>
-          <CheckboxInput
-            type="checkbox"
-            required={required}
-            aria-required={required}
-            aria-invalid={error}
-            indeterminate={indeterminate}
-            ref={ref}
-            {...restProps}
-          />
-          <VisualCheckbox
-            disabled={disabled}
-            checked={checked}
-            indeterminate={indeterminate}
-            data-testid="visual-checkbox"
-            marginTop={labelText ? "half" : "0px"}
-          />
-          {labelText && (
-            <Text disabled={disabled} ml="x1">
-              {labelText}
-            </Text>
-          )}
-        </ClickInputLabel>
-      </Box>
-    );
-  }
-);
+  const componentSize = useComponentSize(size);
+  const spaceProps = getSubset(props, propTypes.space);
+  const restProps = omitSubset(props, propTypes.space);
+
+  return (
+    <Box className={className} px="0" {...spaceProps}>
+      <ClickInputLabel size={componentSize} disabled={disabled}>
+        <CheckboxInput
+          type="checkbox"
+          required={required}
+          aria-required={required}
+          aria-invalid={error}
+          indeterminate={indeterminate}
+          ref={ref}
+          {...restProps}
+        />
+        <VisualCheckbox
+          disabled={disabled}
+          checked={checked}
+          indeterminate={indeterminate}
+          data-testid="visual-checkbox"
+          marginTop={labelText ? "half" : "0px"}
+        />
+        {labelText && (
+          <Text disabled={disabled} ml="x1">
+            {labelText}
+          </Text>
+        )}
+      </ClickInputLabel>
+    </Box>
+  );
+});
 
 export default Checkbox;

src/Checkbox/CheckboxGroup.tsx

@@ -6,7 +6,7 @@ import { Fieldset } from "../Form";
 import Checkbox from "./Checkbox";
 
 interface CheckboxGroupProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   errorMessage?: string;
   errorList?: string[];
   labelText: string;
@@ -25,16 +25,14 @@ interface CheckboxGroupProps {
 export default function CheckboxGroup({
   className,
   id,
+  errorMessage,
+  errorList,
   labelText,
   helpText,
   requirementText,
-  disabled = false,
-  errorMessage,
-  errorList,
   ...props
 }: CheckboxGroupProps) {
-  const otherProps = { ...props, errorMessage, errorList, disabled };
-
+  const otherProps = { ...props, errorMessage, errorList };
   return (
     <Fieldset className={className} id={id} hasHelpText={!!helpText}>
       <Legend>

src/Popper/Popper.tsx

@@ -14,7 +14,7 @@ const makeArray = (children) => {
 const wrapInFunction = (x: unknown) => (typeof x === "function" ? x : () => x);
 
 type PopperProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   popperPlacement?: string;
   defaultOpen?: boolean;
   showDelay?: string | number;

src/Toggle/Toggle.tsx

@@ -25,13 +25,7 @@ type MaybeToggleTitleProps = React.ComponentPropsWithRef<"div"> & {
   children?: React.ReactNode;
 };
 
-const MaybeToggleTitle: React.FC<React.PropsWithChildren<MaybeToggleTitleProps>> = ({
-  labelText,
-  requirementText,
-  helpText,
-  children,
-  ...props
-}) => {
+function MaybeToggleTitle({ labelText, requirementText, helpText, children, ...props }: MaybeToggleTitleProps) {
   const themeContext = useContext(ThemeContext);
   return labelText ? (
     <div {...props}>
@@ -45,10 +39,10 @@ const MaybeToggleTitle: React.FC<React.PropsWithChildren<MaybeToggleTitleProps>>
   ) : (
     <>{children}</>
   );
-};
+}
 
 type BaseToggleProps = SpaceProps & {
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (...args: any[]) => any;
   size?: ComponentSize;
   toggled?: boolean;
   disabled?: boolean;
@@ -61,28 +55,28 @@ type BaseToggleProps = SpaceProps & {
   labelText?: string;
   requirementText?: string;
   error?: boolean;
-  onClick?: React.MouseEventHandler<HTMLLabelElement>;
-  innerRef?: React.ForwardedRef<React.Ref<HTMLInputElement>>;
+  onClick?: any;
+  innerRef?: any;
   name?: string;
   theme?: DefaultNDSThemeType;
   "data-testid"?: string;
 };
 
 const BaseToggle = ({
+  disabled,
   onChange,
   onText,
   offText,
   className,
+  required,
+  error,
   id,
   labelText,
   requirementText,
   helpText,
   toggled,
   onClick,
   size,
-  disabled = false,
-  required = false,
-  error = false,
   "data-testid": dataTestId,
   ...props
 }: BaseToggleProps) => {
@@ -93,6 +87,7 @@ const BaseToggle = ({
   const componentSize = useComponentSize(size);
   const spaceProps = getSubset(props, propTypes.space);
   const restProps = omitSubset(props, propTypes.space);
+
   return (
     <Field className={className} alignItems="flex-start" py="half" {...spaceProps}>
       <MaybeToggleTitle
@@ -101,7 +96,7 @@ const BaseToggle = ({
         requirementText={requirementText}
         helpText={helpText}
       >
-        <ClickInputLabel size={componentSize} onClick={onClick} disabled={disabled} data-testid={dataTestId}>
+        <ClickInputLabel size={componentSize} as="div" onClick={onClick} disabled={disabled} data-testid={dataTestId}>
           <ToggleButton
             id={id}
             checked={toggled}
@@ -143,10 +138,12 @@ const StatefulToggle = ({ defaultToggled, onClick, disabled, ...props }: Statefu
   return <BaseToggle toggled={toggled} onClick={handleClick} disabled={disabled} {...props} />;
 };
 
-const Toggle = ({ toggled, ...props }: StatefulToggleProps) =>
+type ToggleProps = StatefulToggleProps;
+
+const Toggle = ({ toggled, ...props }: ToggleProps) =>
   toggled === undefined ? <StatefulToggle {...props} /> : <BaseToggle toggled={toggled} {...props} />;
 
-const ToggleComponent = React.forwardRef<React.Ref<HTMLInputElement>, StatefulToggleProps>((props, ref) => (
+const ToggleComponent = React.forwardRef<React.ComponentPropsWithRef<"input">, ToggleProps>((props, ref) => (
   <Toggle innerRef={ref} {...props} />
 ));