playbook_ui 7.10.0 → 7.12.1

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { RichTextEditor, Select } from '../../'
 import { changelog, release } from './templates.js'
 
-const RichTextEditorTemplates = () => {
+const RichTextEditorTemplates = (props) => {
   const [editorContent, setEditorContent] = useState('')
 
   const handleChange = (event) => {
@@ -27,10 +27,12 @@ const RichTextEditorTemplates = () => {
           label="Template"
           onChange={handleChange}
           options={options}
+          {...props}
       />
       <RichTextEditor
           id="template"
           template={editorContent}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -1,11 +1,12 @@
 examples:
-  
+
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_preview: Preview
 
   react:
   - rich_text_editor_default: Default
@@ -13,3 +14,4 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -3,3 +3,4 @@ export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import {
   Body,
@@ -69,7 +69,7 @@ const Select = ({
   required = false,
   value,
   ...props
-}: SelectProps) => {
+}: SelectProps, ref: React.ElementRef<"select">) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
@@ -107,6 +107,7 @@ const Select = ({
               multiple={multiple}
               name={name}
               onChange={onChange}
+              ref={ref}
               required={required}
               value={value}
           >
@@ -132,4 +133,4 @@ const Select = ({
   )
 }
 
-export default Select
+export default forwardRef(Select)

data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectBlank = () => {
+const SelectBlank = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -16,6 +16,7 @@ const SelectBlank = () => {
           label="Where do you live"
           name="location"
           options={options}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectCustomSelect = () => {
+const SelectCustomSelect = (props) => {
   return (
     <div>
       <Select label="Favorite Holiday">
         <select
             id="holiday"
             name="holiday"
+            {...props}
         >
           <option value="1">{'Christmas'}</option>
           <option value="2">{'Thanksgiving'}</option>

data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectDefault = () => {
+const SelectDefault = (props) => {
   const options = [
     {
       value: '1',
@@ -23,6 +23,7 @@ const SelectDefault = () => {
           label="Favorite Food"
           name="food"
           options={options}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectDisabled = () => {
+const SelectDisabled = (props) => {
   const options = [
     { value: 'Apple Pie' },
     { value: 'Cookies' },
@@ -16,6 +16,7 @@ const SelectDisabled = () => {
           label="Favorite Dessert"
           name="dessert"
           options={options}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectDisabledOptions = () => {
+const SelectDisabledOptions = (props) => {
   const options = [
     {
       value: '1',
@@ -38,6 +38,7 @@ const SelectDisabledOptions = () => {
           name="coffee"
           options={options}
           value="2"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Body, Select } from '../..'
 
-const SelectError = () => {
+const SelectError = (props) => {
   const options = [
     {
       value: '1',
@@ -25,10 +25,12 @@ const SelectError = () => {
           name="food"
           options={options}
           value="2"
+          {...props}
       />
       <Body
           error="Please make a valid selection"
           status="negative"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectRequired = () => {
+const SelectRequired = (props) => {
   const options = [
     { value: 'Left' },
     { value: 'Right' },
@@ -16,6 +16,7 @@ const SelectRequired = () => {
           name="shoe"
           options={options}
           required
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Select } from '../../'
 
-const SelectValueTextSame = () => {
+const SelectValueTextSame = (props) => {
   const options = [
     { value: 'Football' },
     { value: 'Baseball' },
@@ -15,6 +15,7 @@ const SelectValueTextSame = () => {
           label="Favorite Sport"
           name="sports"
           options={options}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Select from './_select'
+
+const testId = 'select1',
+  kitClass = 'pb_select'
+
+const options = [
+  {
+    value: '1',
+    text: 'Burgers',
+  },
+  {
+    value: '2',
+    text: 'Pizza',
+  },
+  {
+    value: '3',
+    text: 'Tacos',
+  },
+]
+
+test('returns namespaced class name', () => {
+  render(
+    <Select
+        data={{ testid: testId }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns dark class name', () => {
+  render(
+    <Select
+        dark
+        data={{ testid: testId }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -12,6 +12,7 @@ $pb_selectable_card_border: 2px;
 
 [class^=pb_selectable_card_kit] {
   display: block;
+  margin-bottom: 0;
 
   label {
     @include pb_card;
@@ -87,4 +88,4 @@ $pb_selectable_card_border: 2px;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx

@@ -17,7 +17,7 @@ class SelectableCardBlock extends React.Component {
     })
   }
 
-  render() {
+  render(props) {
     return (
       <div className="pb--doc-demo-row">
 
@@ -27,10 +27,12 @@ class SelectableCardBlock extends React.Component {
             name="block"
             onChange={this.handleSelect}
             value="block"
+            {...props}
         >
           <Title
               size={4}
               text="Block"
+              {...props}
           />
           <Body tag="span">{'This uses block'}</Body>
         </SelectableCard>
@@ -42,6 +44,7 @@ class SelectableCardBlock extends React.Component {
             onChange={this.handleSelect}
             text="This passes text through the tag"
             value="tag"
+            {...props}
         />
 
       </div>

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

@@ -14,7 +14,7 @@ class SelectableCardDefault extends React.Component {
     })
   }
 
-  render() {
+  render(props) {
     return (
       <div className="pb--doc-demo-row">
 
@@ -25,6 +25,7 @@ class SelectableCardDefault extends React.Component {
             name="selectedWithIcon"
             onChange={this.handleSelect}
             value="selectedWithIcon"
+            {...props}
         >
           {'Selected, with icon'}
         </SelectableCard>
@@ -36,6 +37,7 @@ class SelectableCardDefault extends React.Component {
             name="selectedWithoutIcon"
             onChange={this.handleSelect}
             value="selectedWithoutIcon"
+            {...props}
         >
           {'Selected, without icon'}
         </SelectableCard>
@@ -46,6 +48,7 @@ class SelectableCardDefault extends React.Component {
             name="unselected"
             onChange={this.handleSelect}
             value="unselected"
+            {...props}
         >
           {'Unselected'}
         </SelectableCard>
@@ -57,6 +60,7 @@ class SelectableCardDefault extends React.Component {
             name="disabled"
             onChange={this.handleSelect}
             value="disabled"
+            {...props}
         >
           {'Disabled'}
         </SelectableCard>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx

@@ -17,7 +17,7 @@ class SelectableCardImage extends React.Component {
     })
   }
 
-  render() {
+  render(props) {
     return (
       <div className="pb--doc-demo-row">
 
@@ -28,11 +28,13 @@ class SelectableCardImage extends React.Component {
             name="selectableImage"
             onChange={this.handleSelect}
             value="selectableImage"
+            {...props}
         >
           <Image
               rounded
               size="xl"
               url="https://unsplash.it/500/400/?image=634"
+              {...props}
           />
 
           <Body>{'Add text here'}</Body>
@@ -45,11 +47,13 @@ class SelectableCardImage extends React.Component {
             name="unselectedImage"
             onChange={this.handleSelect}
             value="unselectedImage"
+            {...props}
         >
           <Image
               rounded
               size="xl"
               url="https://unsplash.it/500/400/?image=634"
+              {...props}
           />
         </SelectableCard>
 

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

@@ -12,7 +12,7 @@ class SelectableCardSingleSelect extends React.Component {
     })
   }
 
-  render() {
+  render(props) {
     return (
       <div className="pb--doc-demo-row">
 
@@ -23,6 +23,7 @@ class SelectableCardSingleSelect extends React.Component {
             name="gender"
             onChange={this.handleSelect.bind(this)}
             value="male"
+            {...props}
         >
           {'Male'}
         </SelectableCard>
@@ -34,6 +35,7 @@ class SelectableCardSingleSelect extends React.Component {
             name="gender"
             onChange={this.handleSelect.bind(this)}
             value="female"
+            {...props}
         >
           {'Female'}
         </SelectableCard>
@@ -45,6 +47,7 @@ class SelectableCardSingleSelect extends React.Component {
             name="gender"
             onChange={this.handleSelect.bind(this)}
             value="other"
+            {...props}
         >
           {'Other'}
         </SelectableCard>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
 
-const SelectableCardIconCheckmark = () => {
+const SelectableCardIconCheckmark = (props) => {
   const [selected, setSelected] = useState(true)
   const [unselected, setUnselected] = useState(false)
 
@@ -16,6 +16,7 @@ const SelectableCardIconCheckmark = () => {
           inputId={4}
           onChange={() => setSelected(!selected)}
           titleText="Cowboy"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Poof, you're a sandwich."
@@ -25,6 +26,7 @@ const SelectableCardIconCheckmark = () => {
           inputId={5}
           onChange={() => setUnselected(!unselected)}
           titleText="Wizard"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Where is the lamb sauce?"
@@ -33,6 +35,7 @@ const SelectableCardIconCheckmark = () => {
           icon="hat-chef"
           inputId={6}
           titleText="Chef"
+          {...props}
       />
     </div>
   )