playbook_ui 7.9.0 → 7.12.0

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

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

@@ -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_preview.html.erb

@@ -0,0 +1,25 @@
+
+<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
+<div id="card-obfuscation" style="display:none">
+  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+   <div id="content-preview" class="trix-content">
+   </div>
+  <% end %>
+</div>
+<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
+  <span>Preview Output</span>
+<% end %>
+
+<script>
+  // Button event handler
+  const button = document.getElementById('preview-button');
+  button.addEventListener('click', function() {
+    const content = document.getElementById('content-preview-editor');
+    const previewArea = document.getElementById('content-preview');
+    const cardDiv = document.getElementById('card-obfuscation');
+
+    previewArea.innerHTML = content.value;
+    cardDiv.classList.add('mt_md');
+    cardDiv.style.display = 'block';
+  });
+</script>

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Card,
+  RichTextEditor,
+} from '../../'
+
+const RichTextEditorPreview = () => {
+  const [showPreview, setShowPreview] = useState(false)
+  const [previewText, setPreviewText] = useState(<div />)
+
+  const handleChange = (event) => setPreviewText(event)
+  const handleClick = () => {
+    setShowPreview(true)
+  }
+
+  return (
+    <div>
+      <RichTextEditor
+          id="content-preview-editor"
+          onChange={handleChange}
+      />
+      <If condition={showPreview}>
+        <Card marginTop="md">
+          <div
+              className="trix-content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: previewText }}
+              id="preview-content"
+          />
+        </Card>
+        <Else />
+        <div />
+      </If>
+      <Button
+          id="preview-button"
+          marginTop="md"
+          onClick={handleClick}
+          text="Preview Output"
+          variant="secondary"
+      />
+    </div>
+  )
+}
+export default RichTextEditorPreview

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

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

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

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