RubyGems - playbook_ui - Versions diffs - 11.19.0 → 11.20.0 - Mend

playbook_ui 11.19.0 → 11.20.0

Files changed (30) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb389dc6dd09b729a058710f9dbaffccf1c70f4994dabad0e8c877fdfb15160a
-  data.tar.gz: 5f8d2f82abeccdb16d5a8e0896db8c9c701b524f1fdfd86ac0cdb3e296dc5b16
+  metadata.gz: 44219343f1cdaffaa416fa4dd981884638d123658f40c607e52c920714e5a798
+  data.tar.gz: 899dd9d3fa76fd138d2657cf64ce6470c681ede3c0bb34b37481a9a6dac17b2c
 SHA512:
-  metadata.gz: 4ef7df4f5c65d61d144d0b552b11c7205451cb77d50dff97c181af2175de03374ee98d18505c0765b219b217caef55f5714425585a27f7d0d2597efa50a1af21
-  data.tar.gz: '0068b2d612e89e7932399e089b1478faac10bd3a710e29ef4f555b6e57060236ff0a4f346c15ae61bd08e2a925b136174901803b55a066d1c1d6397b1379f1ee'
+  metadata.gz: 16c710bf1423492bbadabea26f9ef6819622547cbbbba4ffb9add95404e270eff04639b9575b73e6a19001a94dbafa535a84aeb11e49548067626afc7b6e1bd3
+  data.tar.gz: a707281c6a517f9bd0df3e50aac97b5d83b6f92a12858a85b090c647543b1c11ac9f0675d2de44a3e6652314a39e6bd16d5a96907f758741df112c54bdb55fcf

data/app/pb_kits/playbook/pb_body/_body.scss CHANGED Viewed

@@ -1,4 +1,5 @@
 @import "./body_mixins";
+@import "../tokens/titles";
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
@@ -12,13 +13,21 @@
       }
     }
   }
   @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
     &[class*=_#{$dark_color_name}][class*=dark]{
       @include pb_body($dark_color_value);
     }
   }
+  b, strong {
+    @include pb_title_4
+  }
+  a {
+    color: $primary;
+    &:hover {
+      color: $text_lt_default;
+    }
+  }
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);

data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%= pb_rails("body") do %>
+    <b>This text is using the <%="<b>"%> tag</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag</strong>
+    <br />
+    <br />
+    <a href="#">This text is using the <%="<a>"%> tag</a>
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Body } from '../..'
+const BodyStyled = (props) => {
+  return (
+    <div>
+      <Body {...props}>
+        <b>{"This text is using the <b> tag"}</b>
+        <br />
+        <br />
+        <strong>{"This text is using the <strong> tag"}</strong>
+        <br />
+        <br />
+        <a href="#">{"This text is using the <a> tag"}</a>
+      </Body>
+    </div>
+  )
+}
+export default BodyStyled

data/app/pb_kits/playbook/pb_body/docs/_body_styled.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Playbook styles the `b`, `strong` and `a` tags within the body kit to match Playbook's design system.

data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED Viewed

@@ -2,6 +2,8 @@ examples:
   rails:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags
   react:
   - body_light: Default
   - body_block: Block
+  - body_styled: Styled b/strong/a tags

data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default as BodyLight } from './_body_light.jsx'
 export { default as BodyBlock } from './_body_block.jsx'
+export { default as BodyStyled } from './_body_styled.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx CHANGED Viewed

@@ -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 = '',

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -9,7 +9,7 @@
 // Dialog Animations
+// Dialog Animations for fading in and out from the center
 @keyframes modalFadeIn {
 	from {
 		transform: translate3d(0, -100%, 0);
@@ -32,6 +32,53 @@
 	}
 }
+// Dialog Animations for fading in and out from the left side
+@keyframes modalFadeInLeft {
+	from {
+		transform: translate3d(-100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+@keyframes modalFadeOutLeft {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(-50%, 0, 0);
+		opacity: 0;
+	}
+}
+// Dialog Animations for fading in and out from the right side
+@keyframes modalFadeInRight {
+	from {
+		transform: translate3d(100%, 0, 0);
+		opacity: 0;
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+@keyframes modalFadeOutRight {
+	from {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	to {
+		transform: translate3d(50%, 0, 0);
+		opacity: 0;
+	}
+}
 @keyframes overlayFade {
 	from {
 		opacity: 0;
@@ -63,7 +110,7 @@
 	$medium: 500px;
 	$large: 800px;
 	$xlarge: 1150px;
-	$animation-duration: 0.2s;
+	$animation-duration: .2s;
 	$z-index: 100;
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
@@ -87,6 +134,24 @@
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
+	&[class*="_left"] {
+		animation-name: modalFadeInLeft;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutLeft;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
+	&[class*="_right"] {
+		animation-name: modalFadeInRight;
+		&[class*="_before_close"] {
+			animation-name: modalFadeOutRight;
+			animation-duration: $animation-duration;
+			opacity: $opacity_hidden;
+		}
+	}
 	&[class*="_status_size"] {
 		width: $status_size;
 	}
@@ -98,6 +163,7 @@
 	&[class*="_md"] {
 		width: $medium;
 	}
 	&[class*="_lg"] {
 		width: $large;
@@ -111,7 +177,7 @@
 		opacity: $opacity_visible;
 	}
-	&_before_close {
+	&[class*="_before_close"] {
 		animation-name: modalFadeOut;
 		animation-duration: $animation-duration;
 		opacity: $opacity_hidden;

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx CHANGED Viewed

@@ -71,7 +71,7 @@ const Dialog = (props: DialogProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size)),
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };

data/app/pb_kits/playbook/pb_dialog/dialog.rb CHANGED Viewed

@@ -20,7 +20,7 @@ module Playbook
                     default: ""
       def classname
-        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")
       end
       def full_height_style

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx CHANGED Viewed

@@ -25,6 +25,7 @@ function DialogTest({ props }) {
           onClose={close}
           onConfirm={() => setIsLoading(!isLoading)}
           opened={isOpen}
+          placement="right"
           portalClassName="portal"
           size={size}
           text={text}
@@ -98,3 +99,14 @@ test("renders the buttons", async () => {
   cleanup()
 });
+test("renders the right placement dialog", async () => {
+  const { queryByText } = render(<DialogTest />);
+  fireEvent.click(queryByText('Open Dialog'));
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
+  cleanup()
+});

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
+  customMessage?: string,
   data?: {[key: string]: string | number},
   acceptedFilesDescription?: string,
   maxSize?: number,
@@ -28,6 +29,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     accept = null,
     acceptedFilesDescription = '',
     className,
+    customMessage,
     data = {},
     maxSize,
     onFilesAccepted = noop,
@@ -77,10 +79,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const getDescription = () => {
-    let msg = ""
-    accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
-    if (maxSize) msg += ` ${maxFileSizeText}`
-    return msg
+    return customMessage
+      ? customMessage
+      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
   return (

data/app/pb_kits/playbook/pb_file_upload/docs/_description.md CHANGED Viewed

@@ -1,8 +1,7 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
+This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
 ### Props
 `accept: [String]` Use this prop to set the list of valid file types
+`customMessage: [String]` Use this prop to set a custom message, replacing the default text
 `onFilesAccepted: Function` The callback function, providing the list of dropped files

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+/* @flow */
+import React, { useState } from 'react'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+const FileUploadCustomMessage = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          customMessage="Playbook is awesome!"
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+export default FileUploadCustomMessage

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml CHANGED Viewed

@@ -1,10 +1,10 @@
 examples:
   rails:
   react:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
+  - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit

data/app/pb_kits/playbook/pb_file_upload/docs/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
+export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js CHANGED Viewed

@@ -38,3 +38,15 @@ test('displays max file size text', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
 })
+test('displays custom message', () => {
+  render(
+    <FileUpload
+        customMessage={'Hello world!'}
+        data={{ testid: testid }}
+    />
+  )
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Hello world!')
+})

data/app/pb_kits/playbook/pb_radio/_radio.tsx CHANGED Viewed

@@ -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

data/app/pb_kits/playbook/pb_select/_select.scss CHANGED Viewed

@@ -50,7 +50,7 @@
         border-color: $error;
       }
       .pb_select_kit_caret {
-        top: 35%;
+        top: 25px;
       }
     }
   }

data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.jsx → _selectable_card.tsx} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.19.0
+  version: 11.20.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-16 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
@@ -1699,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
@@ -1725,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
@@ -1738,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
@@ -1749,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