playbook_ui 11.19.0.pre.typeahead1 → 11.20.0

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')
+})

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.18.0"
-  VERSION = "11.19.0.pre.typeahead1"
+  PREVIOUS_VERSION = "11.19.0"
+  VERSION = "11.20.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.19.0.pre.typeahead1
+  version: 11.20.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-11 00:00:00.000000000 Z
+date: 2023-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -397,6 +397,9 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_body_light.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_light.jsx
 - app/pb_kits/playbook/pb_body/docs/_body_light.md
+- app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb
+- app/pb_kits/playbook/pb_body/docs/_body_styled.jsx
+- app/pb_kits/playbook/pb_body/docs/_body_styled.md
 - app/pb_kits/playbook/pb_body/docs/_description.md
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -887,6 +890,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
@@ -1336,9 +1340,9 @@ files:
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
-- app/pb_kits/playbook/pb_list/_list.jsx
 - app/pb_kits/playbook/pb_list/_list.scss
-- app/pb_kits/playbook/pb_list/_list_item.jsx
+- app/pb_kits/playbook/pb_list/_list.tsx
+- app/pb_kits/playbook/pb_list/_list_item.tsx
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
@@ -1533,8 +1537,8 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.html.erb
 - app/pb_kits/playbook/pb_pill/pill.rb
-- app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
+- app/pb_kits/playbook/pb_popover/_popover.tsx
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
@@ -1549,9 +1553,10 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
-- app/pb_kits/playbook/pb_popover/index.js
+- app/pb_kits/playbook/pb_popover/index.ts
 - app/pb_kits/playbook/pb_popover/popover.html.erb
 - app/pb_kits/playbook/pb_popover/popover.rb
+- app/pb_kits/playbook/pb_popover/popover.test.js
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
@@ -1698,8 +1703,8 @@ files:
 - app/pb_kits/playbook/pb_select/select.html.erb
 - app/pb_kits/playbook/pb_select/select.rb
 - app/pb_kits/playbook/pb_select/select.test.js
-- app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx
 - app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
+- app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_description.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_footer.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.html.erb
@@ -1724,6 +1729,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/docs/index.js
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb
 - app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
+- app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js
 - app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.html.erb
@@ -1737,8 +1743,8 @@ files:
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb
-- app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx
 - app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss
+- app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb
@@ -1748,6 +1754,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
+- app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js
 - app/pb_kits/playbook/pb_selectable_list/_item.jsx
 - app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
 - app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
@@ -2363,9 +2370,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key: