[PLAY-784] Converting Toggle kit to Typescript

playbook/app/pb_kits/playbook/pb_toggle/_toggle.jsx → playbook/app/pb_kits/playbook/pb_toggle/_toggle.tsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import classnames from 'classnames'
 import type { InputCallback } from '../types'
@@ -10,20 +8,20 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type Props = {
-  aria?: object,
+  aria?: { [key: string]: string },
   checked?: boolean,
-  children?: React.Node,
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
   value?: string,
-}
+} & GlobalProps
 
 const Toggle = ({
   aria = {},
@@ -33,7 +31,7 @@ const Toggle = ({
   data = {},
   id,
   name,
-  onChange = () => {},
+  onChange = () => { },
   size = 'sm',
   value,
   ...props
@@ -51,24 +49,24 @@ const Toggle = ({
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(css, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(css, globalProps(props), className)}
+      id={id}
     >
       <label className="pb_toggle_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
+        {children && children}
+
+        {!children &&
           <input
-              {...props}
-              defaultChecked={checked}
-              name={name}
-              onChange={onChange}
-              type="checkbox"
-              value={value}
+            {...props}
+            defaultChecked={checked}
+            name={name}
+            onChange={onChange}
+            type="checkbox"
+            value={value}
           />
-        </If>
+        }
         <div className="pb_toggle_control" />
       </label>
     </div>

playbook/app/pb_kits/playbook/pb_toggle/toggle.test.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Toggle from './_toggle'
+
+const testId = 'toggle'
+const className = 'custom-class-name'
+
+const ToggleDefault = (props) => (
+    <>
+        <Toggle
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            id={testId}
+            {...props}
+        />
+    </>
+)
+
+test('should pass data prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test('should pass className prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should not be checked by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+
+test('should pass checked prop', () => {
+    render(<ToggleDefault checked />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_on')
+})
+
+test('should have sm size by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+
+test('should pass size prop', () => {
+    render(<ToggleDefault size='md' />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_md_off')
+})