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

playbook_ui 7.11.1 → 7.12.0

Files changed (293) hide show

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/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_rich_text_editor/docs/_rich_text_editor_default.jsx CHANGED

@@ -1,9 +1,11 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorDefault = () => (
+const RichTextEditorDefault = (props) => (
   <div>
-    <RichTextEditor />
+    <RichTextEditor
+        {...props}
+    />
   </div>
 )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx CHANGED

@@ -1,11 +1,17 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorFocus = () => (
+const RichTextEditorFocus = (props) => (
   <>
-    <RichTextEditor focus />
+    <RichTextEditor
+        focus
+        {...props}
+    />
     <br />
-    <RichTextEditor focus />
+    <RichTextEditor
+        focus
+        {...props}
+    />
   </>
 )
 export default RichTextEditorFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx CHANGED

@@ -1,9 +1,12 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorSimple = () => (
+const RichTextEditorSimple = (props) => (
   <div>
-    <RichTextEditor simple />
+    <RichTextEditor
+        simple
+        {...props}
+    />
   </div>
 )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx CHANGED

@@ -1,12 +1,13 @@
 import React from 'react'
 import { RichTextEditor } from '../../'
-const RichTextEditorSticky = () => (
+const RichTextEditorSticky = (props) => (
   <div>
     <RichTextEditor
         id="sticky"
         sticky
         value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
+        {...props}
     />
   </div>
 )

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

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