RubyGems - playbook_ui - Versions diffs - 7.11.0.pre.alpha1 → 7.13.0.pre.alpha1 - Mend

playbook_ui 7.11.0.pre.alpha1 → 7.13.0.pre.alpha1

Files changed (347) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
-const SelectableCardIconDefault = () => {
+const SelectableCardIconDefault = (props) => {
   const [selected, setSelected] = useState(true)
   const [unselected, setUnselected] = useState(false)
@@ -14,6 +14,7 @@ const SelectableCardIconDefault = () => {
           inputId={1}
           onChange={() => setSelected(!selected)}
           titleText="Quarterly Report"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Export"
@@ -22,6 +23,7 @@ const SelectableCardIconDefault = () => {
           inputId={2}
           onChange={() => setUnselected(!unselected)}
           titleText="Market Share"
+          {...props}
       />
       <SelectableCardIcon
           bodyText="Export"
@@ -29,6 +31,7 @@ const SelectableCardIconDefault = () => {
           icon="analytics"
           inputId={3}
           titleText="Comprehensive"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx CHANGED

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
-const SelectableCardIconSingleSelect = () => {
+const SelectableCardIconSingleSelect = (props) => {
   const [selectedFormat, toggleFormat] = useState(null)
   return (
@@ -14,6 +14,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('car')}
           titleText="Car"
           value="car"
+          {...props}
       />
       <SelectableCardIcon
           checked={selectedFormat === 'bus'}
@@ -23,6 +24,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('bus')}
           titleText="Bus"
           value="bus"
+          {...props}
       />
       <SelectableCardIcon
           checked={selectedFormat === 'subway'}
@@ -32,6 +34,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('subway')}
           titleText="Subway"
           value="subway"
+          {...props}
       />
     </div>
   )

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

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