playbook_ui 7.11.0.pre.alpha1 → 7.11.0

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

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

@@ -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`)
+})

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/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/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_text_input/_text_input.jsx

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
 import { globalProps } from '../utilities/globalProps.js'
@@ -27,7 +27,10 @@ type TextInputProps = {
   children: Node,
 }
 
-const TextInput = (props: TextInputProps) => {
+const TextInput = (
+  props: TextInputProps,
+  ref: React.ElementRef<"input">
+) => {
   const {
     aria = {},
     className,
@@ -42,7 +45,7 @@ const TextInput = (props: TextInputProps) => {
     placeholder,
     required,
     type = 'text',
-    value,
+    value = '',
     children = null,
   } = props
 
@@ -78,6 +81,7 @@ const TextInput = (props: TextInputProps) => {
               name={name}
               onChange={onChange}
               placeholder={placeholder}
+              ref={ref}
               required={required}
               type={type}
               value={value}
@@ -94,4 +98,4 @@ const TextInput = (props: TextInputProps) => {
   )
 }
 
-export default TextInput
+export default forwardRef(TextInput)

data/app/pb_kits/playbook/pb_text_input/docs/_description.md

@@ -1 +1,2 @@
-Area where user can enter small amount of text. Commonly used in forms.
+Area where user can enter small amount of text. Commonly used in forms.<br/>
+<strong>Note:</strong> This kit does not handle form validation logic.

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx

@@ -1,7 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { TextInput } from '../../'
 
 const TextInputCustom = () => {
+  const [name, setName] = useState('')
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
   return (
     <div>
       <TextInput
@@ -9,8 +13,10 @@ const TextInputCustom = () => {
       >
         <input
             name="custom-name"
+            onChange={handleUpdateName}
             placeholder="custom-placeholder"
             type="text"
+            value={name}
         />
       </TextInput>
     </div>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -1,75 +1,97 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Caption,
   TextInput,
   Title,
 } from '../../'
 
-class TextInputDefault extends React.Component {
-  state = {
-    firstName: '',
+const TextInputDefault = () => {
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
   }
+  const ref = React.createRef()
 
-  render() {
-    const handleOnChange = ({ target }) => this.setState({ firstName: target.value })
+  const [firstName, setFirstName] = useState('')
+  const [formFields, setFormFields] = useState({
+    firstName: 'Jane',
+    lastName: 'Doe',
+    phone: '8888888888',
+    email: 'jane@doe.com',
+    zip: 55555,
+  })
 
-    const {
-      firstName,
-    } = this.state
+  const handleOnChangeFormField =  ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
 
-    return (
-      <div>
-        <TextInput
-            aria={{ label: 'hello' }}
-            data={{ say: 'hi', yell: 'go' }}
-            id="unique-id"
-            label="First Name"
-            placeholder="Enter first name"
-            value="Timothy Wenhold"
-        />
-        <TextInput
-            label="Last Name"
-            placeholder="Enter last name"
-        />
-        <TextInput
-            label="Phone Number"
-            placeholder="Enter phone number"
-            type="phone"
-        />
-        <TextInput
-            label="Email Address"
-            placeholder="Enter email address"
-            type="email"
-        />
-        <TextInput
-            label="Zip Code"
-            placeholder="Enter zip code"
-            type="number"
-        />
+  return (
+    <div>
+      <TextInput
+          aria={{ label: 'hello' }}
+          data={{ say: 'hi', yell: 'go' }}
+          id="unique-id"
+          label="First Name"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+      />
+      <TextInput
+          label="Last Name"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+      />
+      <TextInput
+          label="Phone Number"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+      />
+      <TextInput
+          label="Email Address"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+      />
+      <TextInput
+          label="Zip Code"
+          name="zip"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter zip code"
+          type="number"
+          value={formFields.zip}
+      />
 
-        <br />
-        <br />
+      <br />
+      <br />
 
-        <Title>{'Event Handler Props'}</Title>
+      <Title>{'Event Handler Props'}</Title>
 
-        <br />
-        <Caption>{'onChange'}</Caption>
+      <br />
+      <Caption>{'onChange'}</Caption>
 
-        <br />
+      <br />
 
-        <TextInput
-            label="First Name"
-            onChange={handleOnChange}
-            placeholder="Enter first name"
-            value={firstName}
-        />
+      <TextInput
+          label="First Name"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          ref={ref}
+          value={firstName}
+      />
 
-        <If condition={firstName !== ''}>
-          {`First name is: ${firstName}`}
-        </If>
-      </div>
-    )
-  }
+      <If condition={firstName !== ''}>
+        {`First name is: ${firstName}`}
+      </If>
+    </div>
+  )
 }
 
 export default TextInputDefault