playbook_ui 7.8.4 → 7.11.1

data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const SubtleHorizontalNav = () => {
+  return (
+    <Nav
+        link="#"
+        orientation="horizontal"
+        variant="subtle"
+    >
+      <NavItem
+          link="#"
+          text="About"
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+      />
+      <NavItem
+          link="#"
+          text="Service"
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+      />
+    </Nav>
+  )
+}
+
+export default SubtleHorizontalNav

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

@@ -9,8 +9,10 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
+  - new_tab: Open in a New Tab
 
   react:
   - default_nav: Default
@@ -22,6 +24,7 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
-
+  - new_tab: Open in a New Tab

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

@@ -1,5 +1,6 @@
 export { default as DefaultNav } from './_default_nav.jsx'
 export { default as HorizontalNav } from './_horizontal_nav.jsx'
+export { default as SubtleHorizontalNav } from './_subtle_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
 export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
@@ -9,3 +10,4 @@ export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
 export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
 export { default as WithImgNav } from './_with_img_nav.jsx'
+export { default as NewTab } from './_new_tab.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -13,7 +13,9 @@ module Playbook
       prop :icon_left
       prop :icon_right
       prop :image_url
-
+      prop :target, type: Playbook::Props::Enum,
+                    values: %w[_blank _self _parent _top],
+                    default: "_self"
       def classname
         generate_classname("pb_nav_list_kit_item", active_class)
       end
@@ -30,7 +32,8 @@ module Playbook
 
       def link_options
         options.merge(
-          href: link
+          href: link,
+          target: target
         )
       end
 

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -37,7 +37,7 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => {},
   ...props
-}: RadioProps) => {
+}: RadioProps, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
@@ -57,6 +57,7 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
+            ref={ref}
             text={text}
             type="radio"
             value={value}
@@ -72,4 +73,4 @@ const Radio = ({
   )
 }
 
-export default Radio
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,12 +2,15 @@ import React from 'react'
 import { Radio } from '../../'
 
 const RadioDefault = () => {
+  const ref = React.createRef()
+
   return (
     <div>
       <Radio
           defaultChecked
           label="Power"
           name="Group2"
+          ref={ref}
           value="Power"
       />
       <br />

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_stat_change/_stat_change.html.erb

@@ -3,7 +3,7 @@
     data: object.data,
     class: object.classname) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.icon }) if object.icon %>
+        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>
       <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -20,14 +20,18 @@ const iconMap = {
 type StatChangeProps = {
   change?: "increase" | "decrease" | "neutral",
   className?: string,
+  icon?: string,
   id?: string,
   value?: string | number,
 }
 
 const StatChange = (props: StatChangeProps) => {
-  const { change = 'neutral', className, id, value } = props
+  const { change = 'neutral', className, icon, id, value } = props
   const status = statusMap[change] || 'neutral'
-  const icon = iconMap[change]
+  let returnedIcon = iconMap[change]
+  if (icon) {
+    returnedIcon = icon
+  }
 
   return (
     <If condition={value}>
@@ -40,10 +44,10 @@ const StatChange = (props: StatChangeProps) => {
           id={id}
       >
         <Body status={status}>
-          <If condition={icon}>
+          <If condition={returnedIcon}>
             <Icon
                 fixed_width
-                icon={icon}
+                icon={returnedIcon}
             />
             {' '}
           </If>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("stat_change", props: {
   change: "increase",
-  value: 28.4
+  value: 28.4,
 }) %>
 
 <br>