Play 526 typescript selectable card

playbook/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -8,18 +8,18 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type CheckboxProps = {
   aria?: {[key: string]: string},
   checked?: boolean,
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   indeterminate?: boolean,
-  name: string,
-  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
-  tabIndex: number,
-  text: string,
-  value: string,
+  name?: string,
+  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
+  tabIndex?: number,
+  text?: string,
+  value?: string,
 } & GlobalProps
 
 const Checkbox = (props: CheckboxProps): JSX.Element => {
@@ -34,7 +34,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
     id,
     indeterminate = false,
     name = '',
-    onChange = () => {},
+    onChange = () => { void 0 },
     tabIndex,
     text = '',
     value = '',

playbook/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -10,16 +10,16 @@ type RadioProps = {
   aria?: {[key: string]: string},
   alignment?: string,
   checked?: boolean,
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   label: string,
-  name: string,
-  value: string,
-  text: string,
+  name?: string,
+  value?: string,
+  text?: string,
   onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
 } & GlobalProps
 

playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx → playbook/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -1,10 +1,9 @@
 /* @flow */
 
-import React from 'react'
+import React, {useRef} from 'react'
 import classnames from 'classnames'
 
-import type { InputCallback } from '../types'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
@@ -19,46 +18,45 @@ import Flex from '../pb_flex/_flex'
 import Radio from '../pb_radio/_radio'
 
 type SelectableCardProps = {
-  aria?: object,
-  checked: boolean,
-  children?: array<React.ReactChild>,
+  aria?: { [key: string]: string },
+  checked?: boolean,
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  customIcon?: SVGElement,
+  customIcon?: {[key: string] :SVGElement},
   dark?: boolean,
-  data: object,
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: boolean,
   icon?: boolean,
   id?: string,
   inputId?: string,
   multi?: boolean,
   name?: string,
-  onChange: InputCallback<HTMLInputElement>,
+  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
   text?: string,
   value?: string,
   variant?: string,
-}
+} & GlobalProps
 
-const SelectableCard = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  customIcon,
-  dark = false,
-  data = {},
-  disabled = false,
-  error = false,
-  icon = false,
-  inputId = null,
-  multi = true,
-  name,
-  onChange = noop,
-  text,
-  value,
-  variant = 'default',
-  ...props
-}: SelectableCardProps) => {
+const SelectableCard = (props: SelectableCardProps) => {
+  const {
+    aria = {},
+    checked = false,
+    className,
+    customIcon,
+    dark = false,
+    data = {},
+    disabled = false,
+    error = false,
+    icon = false,
+    inputId = null,
+    multi = true,
+    name,
+    onChange = noop,
+    text,
+    value,
+    variant = 'default',
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
@@ -87,7 +85,7 @@ const SelectableCard = ({
     }
   }
 
-  const inputRef = React.createRef()
+  const inputRef = useRef(null)
   // Delegate clicks to hidden input from visible one
   const handleClick = () => {
     inputRef.current.click()
@@ -96,7 +94,15 @@ const SelectableCard = ({
   const inputType = multi ? 'checkbox' : 'radio'
   const inputIdPresent = inputId !== null ? inputId : name
   const Input = multi ? Checkbox : Radio
-  const labelProps = variant === 'displayInput' ? Object.assign(props, { padding: 'none' }) : props
+
+  const filteredProps = {...props}
+  delete filteredProps?.inputId
+  delete filteredProps?.children
+  delete filteredProps?.icon
+  delete filteredProps?.error
+  delete filteredProps?.dark
+  delete filteredProps?.multi
+  const labelProps: GlobalProps = variant === 'displayInput' ? { ...filteredProps, padding: 'none' } : { ...filteredProps }
 
   return (
     <div
@@ -105,7 +111,6 @@ const SelectableCard = ({
         className={classes}
     >
       <input
-          {...props}
           checked={checked}
           disabled={disabled}
           id={inputIdPresent}
@@ -114,23 +119,25 @@ const SelectableCard = ({
           ref={inputRef}
           type={inputType}
           value={value}
+          {...filteredProps}
       />
 
       <label
           className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
         <div className="buffer">
-          <Choose>
-            <When condition={variant === 'displayInput'}>
+              {variant === 'displayInput' ? 
               <Flex vertical="center">
                 <Flex
                     orientation="column"
                     padding="sm"
                     paddingRight="xs"
                     vertical="center"
                 >
-                  <Input dark={dark}>
+                  <Input
+                      dark={dark}
+                  >
                     <input
                         checked={checked}
                         disabled={disabled}
@@ -146,14 +153,12 @@ const SelectableCard = ({
                     padding="sm"
                     status={error ? 'negative' : null}
                 >
-                  {text || children}
+                  {text ||props.children}
                 </Card.Body>
               </Flex>
-            </When>
-            <Otherwise>
-              {text || children}
-            </Otherwise>
-          </Choose>
+              :
+            text || props.children
+              }
           {displayIcon()}
         </div>
       </label>

playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import SelectableCard from '../_selectable_card.jsx'
+import SelectableCard from '../_selectable_card.tsx'
 
 const SelectableCardDefault = (props) => {
   const [selectedWithIcon, setSelectedWithIcon] = useState(true)
@@ -24,7 +24,6 @@ const SelectableCardDefault = (props) => {
 
       <SelectableCard
           checked={selectedNoIcon}
-          icon={false}
           inputId="selectedWithoutIcon"
           name="selectedWithoutIcon"
           onChange={() => setSelectedNoIcon(!selectedNoIcon)}

playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import SelectableCard from '../_selectable_card.jsx'
+import SelectableCard from '../_selectable_card.tsx'
 
 const SelectableCardSingleSelect = (props) => {
   const [selected, setSelected] = useState(null)