RubyGems - playbook_ui - Versions diffs - 7.9.0 → 7.12.0 - Mend

playbook_ui 7.9.0 → 7.12.0

Files changed (395) hide show

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
-const PersonContactWithDetail = () => {
+const PersonContactWithDetail = (props) => {
   return (
     <div>
       <PersonContact
@@ -22,6 +22,7 @@ const PersonContactWithDetail = () => {
         ]}
           firstName="Harvey"
           lastName="Walters"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
-const PersonContactWithWrongNumbers = () => {
+const PersonContactWithWrongNumbers = (props) => {
   return (
     <>
       <PersonContact
@@ -25,6 +25,7 @@ const PersonContactWithWrongNumbers = () => {
           firstName="Pauline"
           key="person-contact-1"
           lastName="Smith"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverClose = () => {
+const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
@@ -67,6 +67,7 @@ const PopoverClose = () => {
           reference={insidePopoverTrigger}
           shouldClosePopover={handleInsideShouldClosePopover}
           show={showInsidePopover}
+          {...props}
       >
         {'Click on me!'}
       </PbReactPopover>
@@ -78,6 +79,7 @@ const PopoverClose = () => {
           reference={outsidePopoverTrigger}
           shouldClosePopover={handleOutsideShouldClosePopover}
           show={showOutsidePopover}
+          {...props}
       >
         {'Click anywhere but me!'}
       </PbReactPopover>
@@ -89,6 +91,7 @@ const PopoverClose = () => {
           reference={anyPopoverTrigger}
           shouldClosePopover={handleAnyShouldClosePopover}
           show={showAnyPopover}
+          {...props}
       >
         {'Click anything!'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverCloseDark = () => {
+const PopoverCloseDark = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
@@ -70,6 +70,7 @@ const PopoverCloseDark = () => {
           reference={insidePopoverTrigger}
           shouldClosePopover={handleInsideShouldClosePopover}
           show={showInsidePopover}
+          {...props}
       >
         {'Click on me!'}
       </PbReactPopover>
@@ -81,6 +82,7 @@ const PopoverCloseDark = () => {
           reference={outsidePopoverTrigger}
           shouldClosePopover={handleOutsideShouldClosePopover}
           show={showOutsidePopover}
+          {...props}
       >
         {'Click anywhere but me!'}
       </PbReactPopover>
@@ -92,6 +94,7 @@ const PopoverCloseDark = () => {
           reference={anyPopoverTrigger}
           shouldClosePopover={handleAnyShouldClosePopover}
           show={showAnyPopover}
+          {...props}
       >
         {'Click anything!'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx CHANGED

@@ -6,7 +6,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverDark = () => {
+const PopoverDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -26,10 +26,12 @@ const PopoverDark = () => {
         dark
         orientation="row"
         vertical="center"
+        {...props}
     >
       <Body
           dark
           text="Click info for more details"
+          {...props}
       />
       &nbsp;
       <PbReactPopover
@@ -38,6 +40,7 @@ const PopoverDark = () => {
           placement="top"
           reference={popoverReference}
           show={showPopover}
+          {...props}
       >
         {'I\'m a popover. I can show content of any size.'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx CHANGED

@@ -6,7 +6,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverDefault = () => {
+const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -24,6 +24,7 @@ const PopoverDefault = () => {
     <Flex
         orientation="row"
         vertical="center"
+        {...props}
     >
       <Body text="Click info for more details" />
       &nbsp;
@@ -32,6 +33,7 @@ const PopoverDefault = () => {
           placement="top"
           reference={popoverReference}
           show={showPopover}
+          {...props}
       >
         {'I\'m a popover. I can show content of any size.'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx CHANGED

@@ -7,7 +7,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverWithButton = () => {
+const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -33,6 +33,7 @@ const PopoverWithButton = () => {
         placement="bottom"
         reference={popoverReference}
         show={showPopover}
+        {...props}
     >
       <List xpadding>
         <ListItem><a>{'Popularity'}</a></ListItem>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx CHANGED

@@ -7,7 +7,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverWithButton = () => {
+const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -19,12 +19,14 @@ const PopoverWithButton = () => {
         dark
         onClick={handleTogglePopover}
         variant="primary"
+        {...props}
     >
       {'Filter By'}
       <Icon
           dark
           fixedWidth
           icon="angle-down"
+          {...props}
       />
     </Button>
   )
@@ -36,6 +38,7 @@ const PopoverWithButton = () => {
         placement="bottom"
         reference={popoverReference}
         show={showPopover}
+        {...props}
     >
       <List xpadding>
         <ListItem><a>{'Popularity'}</a></ListItem>

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx CHANGED

@@ -6,7 +6,7 @@ import {
   Title,
 } from '../..'
-const PopoverScrollHeight = () => {
+const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -35,6 +35,7 @@ const PopoverScrollHeight = () => {
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}
         show={showPopover}
+        {...props}
     >
       <Body
           marginBottom="sm"
@@ -43,10 +44,12 @@ const PopoverScrollHeight = () => {
           conditioned to a life of security, conformity, and conservation, all of
           which may appear to give one peace of mind, but in reality, nothing is
           more damaging to the adventurous spirit."
+          {...props}
       />
       <Title
           size={4}
           text="- Christopher McCandless"
+          {...props}
       />
     </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx CHANGED

@@ -6,7 +6,7 @@ import {
   Title,
 } from '../..'
-const PopoverScrollHeightDark = () => {
+const PopoverScrollHeightDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -36,15 +36,18 @@ const PopoverScrollHeightDark = () => {
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}
         show={showPopover}
+        {...props}
     >
       <Body
           marginBottom="sm"
           text=" Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."
+          {...props}
       />
       <Title
           dark
           size={4}
           text="- Abraham Lincoln"
+          {...props}
       />
     </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverZIndex = () => {
+const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -30,6 +30,7 @@ const PopoverZIndex = () => {
         <Body
             marginBottom="md"
             text="I've got a z-index of 2"
+            {...props}
         />
       </div>
       <PbReactPopover
@@ -40,6 +41,7 @@ const PopoverZIndex = () => {
           shouldClosePopover={handleShouldClosePopover}
           show={showPopover}
           zIndex={3}
+          {...props}
       >
         {'I have a custom z-index of 3'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx CHANGED

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
-const PopoverZIndexDark = () => {
+const PopoverZIndexDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
   const handleTogglePopover = () => {
@@ -32,6 +32,7 @@ const PopoverZIndexDark = () => {
             dark
             marginBottom="md"
             text="I've got a z-index of 2"
+            {...props}
         />
       </div>
       <PbReactPopover
@@ -42,6 +43,7 @@ const PopoverZIndexDark = () => {
           shouldClosePopover={handleShouldClosePopover}
           show={showPopover}
           zIndex={3}
+          {...props}
       >
         {'I have a custom z-index of 3'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_radio/_radio.jsx CHANGED

@@ -1,7 +1,7 @@
 /* @flow */
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -37,7 +37,7 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => {},
   ...props
-}: RadioProps) => {
+}: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
@@ -57,6 +57,7 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
+            ref={ref}
             text={text}
             type="radio"
             value={value}
@@ -72,4 +73,4 @@ const Radio = ({
   )
 }
-export default Radio
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Radio } from '../../'
-const RadioCustom = () => {
+const RadioCustom = (props) => {
   const [choice, setChoice] = useState('power')
   const handleOnChange = ({ target }) => {
@@ -18,6 +18,7 @@ const RadioCustom = () => {
       <Radio
           className="my_custom_class"
           label="Custom Power"
+          {...props}
       >
         <input
             checked={choice === 'power'}
@@ -25,12 +26,14 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="power"
+            {...props}
         />
       </Radio>
       <br />
       <Radio
           className="my_custom_class"
           label="Custom Nitro"
+          {...props}
       >
         <input
             checked={choice === 'nitro'}
@@ -38,12 +41,14 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="nitro"
+            {...props}
         />
       </Radio>
       <br />
       <Radio
           className="my_custom_class"
           label="Custom Google"
+          {...props}
       >
         <input
             checked={choice === 'google'}
@@ -51,6 +56,7 @@ const RadioCustom = () => {
             onChange={handleOnChange}
             type="radio"
             value="google"
+            {...props}
         />
       </Radio>
     </div>

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx CHANGED

@@ -2,12 +2,15 @@ import React from 'react'
 import { Radio } from '../../'
 const RadioDefault = () => {
+  const ref = React.createRef()
   return (
     <div>
       <Radio
           defaultChecked
           label="Power"
           name="Group2"
+          ref={ref}
           value="Power"
       />
       <br />

data/app/pb_kits/playbook/pb_radio/docs/index.js CHANGED

@@ -1,2 +1,3 @@
 export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
+export { default as RadioError } from './_radio_error.jsx'

data/app/pb_kits/playbook/pb_radio/radio.test.js ADDED

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Radio from './_radio'
+const testId = 'radio1',
+  kitClass = 'pb_radio_kit'
+test('returns namespaced class name', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        defaultChecked
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+test('returns dark class name', () => {
+  render(
+    <Radio
+        dark
+        data={{ testid: testId }}
+        defaultChecked
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+test('returns error class name', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        defaultChecked
+        error
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} error`)
+})
+test('returns dark + error class name', () => {
+  render(
+    <Radio
+        dark
+        data={{ testid: testId }}
+        defaultChecked
+        error
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark error`)
+})