playbook_ui 11.19.0 → 11.20.0.pre.alpha.passthrough1

data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.jsx → _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,13 +18,13 @@ 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,
@@ -33,32 +32,31 @@ type SelectableCardProps = {
   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,6 +119,7 @@ const SelectableCard = ({
           ref={inputRef}
           type={inputType}
           value={value}
+          {...filteredProps}
       />
 
       <label
@@ -121,8 +127,7 @@ const SelectableCard = ({
           htmlFor={inputIdPresent}
       >
         <div className="buffer">
-          <Choose>
-            <When condition={variant === 'displayInput'}>
+              {variant === 'displayInput' ? 
               <Flex vertical="center">
                 <Flex
                     orientation="column"
@@ -130,7 +135,9 @@ const SelectableCard = ({
                     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>

data/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)}

data/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)

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js

@@ -0,0 +1,185 @@
+import React, { useState } from 'react'
+import { render, screen } from '../utilities/test-utils'
+import SelectableCard from './_selectable_card'
+import { Body, Title, Image } from '../'
+
+const SelectableCardMultiSelect = () => {
+  const [selected, setSelected] = useState(true)
+  const [unselected, setUnselected] = useState(false)
+  const [disabled, setDisabled] = useState(false)
+
+  return (
+    <>
+      <SelectableCard
+          checked={selected}
+          inputId="selected"
+          name="selected"
+          onChange={() => setSelected(!selected)}
+          value="selected"
+      >
+        {'Selected'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={unselected}
+          inputId="unselected"
+          name="unselected"
+          onChange={() => setUnselected(!unselected)}
+          value="unselected"
+      >
+        {'Unselected'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={disabled}
+          disabled
+          inputId="disabled"
+          name="disabled"
+          onChange={() => setDisabled(!disabled)}
+          value="disabled"
+      >
+        {'Disabled'}
+      </SelectableCard>
+
+    </>
+  )
+}
+
+const SelectableCardSingleSelect = () => {
+  const [selected, setSelected] = useState(null)
+  const handleSelect = (event) => {
+    setSelected(event.target.value)
+  }
+
+  return (
+    <>
+      <SelectableCard
+          checked={selected === 'male'}
+          inputId="male1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="male"
+      >
+        {'Male'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={selected === 'female'}
+          inputId="female1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="female"
+      >
+        {'Female'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={selected === 'other'}
+          inputId="other1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="other"
+      >
+        {'Other'}
+      </SelectableCard>
+    </>
+  )
+}
+
+
+test('should start with a checked item', () => {
+  render(<SelectableCardMultiSelect />)
+
+  const kit = screen.getByLabelText('Selected')
+  expect(kit).toBeChecked()
+})
+
+test('should start with a disabled item', () => {
+  render(<SelectableCardMultiSelect />)
+
+  const kit = screen.getByLabelText('Disabled')
+  expect(kit).toBeDisabled()
+})
+
+test('should click and check an item', () => {
+  render(<SelectableCardMultiSelect />)
+
+  const kit = screen.getByLabelText('Unselected')
+  expect(kit).not.toBeChecked()
+  kit.click()
+  expect(kit).toBeChecked()
+})
+
+test('should check multiple items', () => {
+  render(<SelectableCardMultiSelect />)
+
+  const checkedItem = screen.getByLabelText('Selected')
+  expect(checkedItem).toBeChecked()
+
+  const uncheckedItem = screen.getByLabelText('Unselected')
+  expect(uncheckedItem).not.toBeChecked()
+
+  uncheckedItem.click()
+
+  expect(checkedItem).toBeChecked
+  expect(uncheckedItem).toBeChecked
+})
+
+test('should check only single item', () => {
+  render(<SelectableCardSingleSelect/>)
+
+  const male = screen.getByLabelText('Male')
+  expect(male).not.toBeChecked
+
+  const female = screen.getByLabelText('Female')
+  expect(female).not.toBeChecked
+
+  const other = screen.getByLabelText('Other')
+  expect(other).not.toBeChecked
+
+  male.click()
+  other.click()
+
+  expect(male).not.toBeChecked
+  expect(female).not.toBeChecked
+  expect(other).toBeChecked
+})
+
+test('should have text passed through the text prop', () => {
+  render (<SelectableCard text="This passes text through the tag"/>)
+
+  expect(screen.getByText("This passes text through the tag")).toBeInTheDocument()
+})
+
+test('should pass block content', () => {
+  render (<SelectableCard>
+            <Title
+                size={4}
+                text="Block"
+            />
+            <Body
+                tag="span"
+            >
+              {'This uses block'}
+            </Body>
+          </SelectableCard>
+        )
+  expect(screen.getByText("This uses block")).toBeInTheDocument()
+})
+
+test('should pass image inside card content', () => {
+  render (<SelectableCard>
+            <Image
+                rounded
+                size="xl"
+                url="https://unsplash.it/500/400/?image=634"
+            />
+          </SelectableCard>
+        )
+  const dispalyedImg = document.querySelector("img")
+
+  expect(dispalyedImg.src).toContain("image=634")
+})

data/app/pb_kits/playbook/pb_selectable_icon/{_selectable_icon.jsx → _selectable_icon.tsx}

@@ -1,23 +1,20 @@
 /* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
-
 import { globalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
 } from '../utilities/props'
-
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
 
 type SelectableIconProps = {
-  aria?: Object,
+  aria?: {[key: string]: string},
   checked?: boolean,
   className?: string,
-  customIcon?: SVGElement,
+  customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
   data?: Object,
   icon: string,
@@ -59,54 +56,54 @@ const SelectableIcon = ({
   )
 
   const inputType = multi === false ? 'radio' : 'checkbox'
-
   const inputIdPresent = inputId !== null ? inputId : name
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
     >
-      <If condition={inputs === 'disabled'}>
+      {inputs === 'disabled' && (
         <>
           <Icon
-              customIcon={customIcon}
-              icon={icon}
-              size="2x"
+            customIcon={customIcon}
+            icon={icon}
+            size="2x"
           />
           <Title
-              size={4}
-              tag="h4"
-              text={text}
+            size={4}
+            tag="h4"
+            text={text}
           />
         </>
-      </If>
-      <If condition={inputs === 'enabled'}>
+      )}
+          
+      {inputs === 'enabled' && (
         <>
           <input
-              {...props}
-              checked={checked}
-              disabled={disabled}
-              id={inputIdPresent}
-              name={name}
-              type={inputType}
-              value={value}
+            {...props}
+            checked={checked}
+            disabled={disabled}
+            id={inputIdPresent}
+            name={name}
+            type={inputType}
+            value={value}
           />
           <label htmlFor={inputIdPresent}>
             <Icon
-                customIcon={customIcon}
-                icon={icon}
-                size="2x"
+              customIcon={customIcon}
+              icon={icon}
+              size="2x"
             />
             <Title
-                size={4}
-                tag="h4"
-                text={text}
+              size={4}
+              tag="h4"
+              text={text}
             />
           </label>
         </>
-      </If>
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
-
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconDefault = (props) => {
+const SelectableIconDefault = () => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -16,7 +15,6 @@ const SelectableIconDefault = (props) => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
-          {...props}
       />
 
       <SelectableIcon
@@ -25,7 +23,6 @@ const SelectableIconDefault = (props) => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
-          {...props}
       />
 
       <SelectableIcon
@@ -35,7 +32,6 @@ const SelectableIconDefault = (props) => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
-          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import SelectableIcon from '../_selectable_icon'
 
-const SelectableIconSingleSelect = (props) => {
+const SelectableIconSingleSelect = () => {
   const [ selectedFormat, toggleFormat ] = useState(null)
 
   return (
@@ -17,7 +17,6 @@ const SelectableIconSingleSelect = (props) => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
-          {...props}
       />
 
       <SelectableIcon
@@ -29,7 +28,6 @@ const SelectableIconSingleSelect = (props) => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
-          {...props}
       />
 
       <SelectableIcon
@@ -41,7 +39,6 @@ const SelectableIconSingleSelect = (props) => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
-          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js

@@ -0,0 +1,148 @@
+import React, { useState } from 'react'
+import { render, screen } from '../utilities/test-utils'
+import SelectableIcon from './_selectable_icon'
+
+const testId = "selectableIcon"
+
+const SelectableIconMultiSelect = () => {
+    const [checkSelected, toggleSelected] = useState(true)
+    const [checkUnselected, toggleUnselected] = useState(false)
+    const [checkDisabled, toggleDisabled] = useState(false)
+
+    return (
+        <>
+            <SelectableIcon
+                checked={checkSelected}
+                className="custom-class"
+                data={{ testid: testId }}
+                icon="dollar-sign"
+                inputId={10}
+                onChange={() => toggleSelected(!checkSelected)}
+                text="US Dollar"
+            />
+
+            <SelectableIcon
+                checked={checkUnselected}
+                icon="euro-sign"
+                inputId={11}
+                onChange={() => toggleUnselected(!checkUnselected)}
+                text="Euro"
+            />
+
+            <SelectableIcon
+                checked={checkDisabled}
+                disabled
+                icon="yen-sign"
+                inputId={12}
+                onChange={() => toggleDisabled(!checkDisabled)}
+                text="Yen"
+            />
+        </>
+    )
+}
+
+const SelectableIconSingleSelect = () => {
+    const [selectedFormat, toggleFormat] = useState('')
+
+    return (
+        <>
+            <SelectableIcon
+                checked={selectedFormat === 'Cassette'}
+                icon="cassette-tape"
+                inputId={13}
+                multi={false}
+                name="music-format"
+                onChange={() => toggleFormat('Cassette')}
+                text="Cassette"
+                value="Cassette"
+            />
+
+            <SelectableIcon
+                checked={selectedFormat === 'CD'}
+                icon="compact-disc"
+                inputId={14}
+                multi={false}
+                name="music-format"
+                onChange={() => toggleFormat('CD')}
+                text="CD"
+                value="CD"
+            />
+
+            <SelectableIcon
+                checked={selectedFormat === 'Vinyl'}
+                icon="album-collection"
+                inputId={15}
+                multi={false}
+                name="music-format"
+                onChange={() => toggleFormat('Vinyl')}
+                text="Vinyl"
+                value="Vinyl"
+            />
+        </>
+    )
+}
+
+test('should start with a checked item', () => {
+    render(<SelectableIconMultiSelect />)
+
+    const kit = screen.getByLabelText('US Dollar')
+    expect(kit).toBeChecked()
+})
+
+test('should start with a disabled item', () => {
+    render(<SelectableIconMultiSelect />)
+
+    const kit = screen.getByLabelText('Yen')
+    expect(kit).toBeDisabled()
+})
+
+test('should click and check an item', () => {
+    render(<SelectableIconMultiSelect />)
+
+    const kit = screen.getByLabelText('Euro')
+    expect(kit).not.toBeChecked()
+    kit.click()
+    expect(kit).toBeChecked()
+})
+
+test('should check multiple items', () => {
+    render(<SelectableIconMultiSelect />)
+
+    const usDollarItem = screen.getByLabelText('US Dollar')
+    expect(usDollarItem).toBeChecked()
+
+    const euroItem = screen.getByLabelText('Euro')
+    expect(euroItem).not.toBeChecked()
+
+    euroItem.click()
+
+    expect(usDollarItem).toBeChecked()
+    expect(euroItem).toBeChecked()
+})
+
+test('should check single item', () => {
+    render(<SelectableIconSingleSelect />)
+
+    const cassetteItem = screen.getByLabelText('Cassette')
+    expect(cassetteItem).not.toBeChecked()
+
+    const cdItem = screen.getByLabelText('CD')
+    expect(cdItem).not.toBeChecked()
+
+    const vinylItem = screen.getByLabelText('Vinyl')
+    expect(vinylItem).not.toBeChecked()
+
+    cassetteItem.click()
+    cdItem.click()
+
+    expect(cassetteItem).not.toBeChecked()
+    expect(cdItem).toBeChecked()
+    expect(vinylItem).not.toBeChecked()
+})
+
+test('should render custom class and data', () => {
+    render(<SelectableIconMultiSelect />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})