RubyGems - playbook_ui - Versions diffs - 8.0.0.pre.alpha5 → 8.1.0.pre.alpha1 - Mend

playbook_ui 8.0.0.pre.alpha5 → 8.1.0.pre.alpha1

Files changed (159) hide show

data/app/pb_kits/playbook/pb_inline/docs/_inline_default.jsx ADDED Viewed

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { Inline, TextInput, Title } from '../../'
+const InlineDefault = (props) => {
+  const [formValue, setFormValue] = useState('Default Value')
+  const handleInputChange = (event) => {
+    setFormValue(event.target.value)
+  }
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title"
+                size={4}
+                tag="h4"
+                text={formValue}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                onChange={handleInputChange}
+                value={formValue}
+            />
+          }
+      />
+    </div>
+  )
+}
+export default InlineDefault

data/app/pb_kits/playbook/pb_inline/docs/_inline_input_options.jsx ADDED Viewed

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { Body, Inline, Textarea, TextInput } from '../../'
+const InlineInputOptions = (props) => {
+  const [formFields, setFormFields] = useState({
+    inputOne: 'Input One',
+    inputTwo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  })
+  const handleChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputOne}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputOne"
+                onChange={handleChange}
+                value={formFields.inputOne}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputTwo}
+            />
+          }
+          formInput={
+            <Textarea
+                {...props}
+                name="inputTwo"
+                onChange={handleChange}
+                resize="auto"
+                value={formFields.inputTwo}
+            />
+          }
+      />
+    </div>
+  )
+}
+export default InlineInputOptions

data/app/pb_kits/playbook/pb_inline/docs/_inline_text_options.jsx ADDED Viewed

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import { Body, Caption, Inline, TextInput, Title } from '../../'
+const InlineTextOptions = (props) => {
+  const [formFields, setFormFields] = useState({
+    inputOne: 'Input One',
+    inputTwo: 'Input Two',
+    inputThree: 'Input Three',
+    inputFour: 'Input Four',
+  })
+  const handleChange = ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+  return (
+    <div>
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title"
+                size={1}
+                tag="h1"
+                text={formFields.inputOne}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputOne"
+                onChange={handleChange}
+                value={formFields.inputOne}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Title
+                {...props}
+                kitType="Title 4"
+                size={4}
+                tag="h4"
+                text={formFields.inputTwo}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputTwo"
+                onChange={handleChange}
+                value={formFields.inputTwo}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Body
+                {...props}
+                kitType="Body"
+                text={formFields.inputThree}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputThree"
+                onChange={handleChange}
+                value={formFields.inputThree}
+            />
+          }
+      />
+      <Inline
+          {...props}
+          displayKit={
+            <Caption
+                {...props}
+                kitType="Caption"
+                text={formFields.inputFour}
+            />
+          }
+          formInput={
+            <TextInput
+                {...props}
+                name="inputFour"
+                onChange={handleChange}
+                value={formFields.inputFour}
+            />
+          }
+      />
+    </div>
+  )
+}
+export default InlineTextOptions

data/app/pb_kits/playbook/pb_inline/docs/example.yml ADDED Viewed

@@ -0,0 +1,5 @@
+examples:
+  react:
+  - inline_default: Default
+  - inline_text_options: Text Options
+  - inline_input_options: Input Options

data/app/pb_kits/playbook/pb_inline/docs/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as InlineDefault } from './_inline_default.jsx'
+export { default as InlineTextOptions } from './_inline_text_options.jsx'
+export { default as InlineInputOptions } from './_inline_input_options.jsx'

data/app/pb_kits/playbook/pb_inline/inline.test.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import { Inline } from '../'
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+test('generated scaffold test - update me', () => {
+  const testId = "test1"
+  render(
+    <Inline
+      data={{ testid: testId }}
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_nav/_item.jsx CHANGED Viewed

@@ -75,6 +75,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
+                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -90,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
+                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

data/app/pb_kits/playbook/pb_nav/_nav.jsx CHANGED Viewed

@@ -48,7 +48,7 @@ const Nav = (props: NavProps) => {
   )
   return (
-    <div
+    <nav
         {...ariaProps}
         {...dataProps}
         className={cardCss}
@@ -69,7 +69,7 @@ const Nav = (props: NavProps) => {
         </div>
       </If>
       <ul>{children}</ul>
-    </div>
+    </nav>
   )
 }

data/app/pb_kits/playbook/pb_nav/item.html.erb CHANGED Viewed

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= content_tag(:div,
+<%= content_tag(:nav,
     aria: object.aria,
     class: object.classname,
     data: object.data,

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx CHANGED Viewed

@@ -23,6 +23,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     status = 'offline',
   } = props
+  aria.label = status
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria,
+    aria: object.aria.merge!(label: object.status),
     class: object.classname,
     data: object.data,
     id: object.id) do %>

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ type ProgressSimpleProps = {
   muted: boolean,
   percent: string,
   value: number,
-  variant?: "default" | "positive" | "negative",
+  variant?: "default" | "positive" | "negative" | "warning",
   width: string,
 }

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss CHANGED Viewed

@@ -33,6 +33,11 @@ $pb_progress_simple_height: 4px;
         background: $error;
       }
     }
+    &[class*=_warning] {
+      .progress_simple_value {
+        background: $warning;
+      }
+    }
   [class^=progress_simple_value] {
     width: 0%;

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb CHANGED Viewed

@@ -7,3 +7,8 @@
 <br>
 <%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>
+<br>
+<%= pb_rails("progress_simple", props: { percent: 40, variant: "warning" }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx CHANGED Viewed

@@ -19,6 +19,13 @@ const ProgressSimpleVariants = () => {
           percent={10}
           variant="negative"
       />
+      <br />
+      <ProgressSimple
+          percent={40}
+          variant="warning"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md CHANGED Viewed

	@@ -1 +1 @@
1	- Progress Simple can pass colors - primary, green and ~~red~~. Variants names are `default`, `positive`, and `~~negative`~~ respectively.
1	+ Progress Simple can pass colors - primary, green, red, and yellow. Variants names are `default`, `positive`, `negative`, and `warning`, respectively.

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb CHANGED Viewed

@@ -18,7 +18,7 @@ module Playbook
       # could this possibly be [sm, md, lg]?
       prop :width, default: "100%"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default positive negative],
+                     values: %w[default positive negative warning],
                      default: "default"
       def number_value

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 /* @flow */
-import React, { useEffect, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
-const RichTextEditor = (props: RichTextEditorProps) => {
+const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -120,6 +120,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       <input
           id={id}
           name={name}
+          ref={ref}
           type="hidden"
           value={value}
       />
@@ -133,4 +134,4 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   )
 }
-export default RichTextEditor
+export default forwardRef(RichTextEditor)

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx CHANGED Viewed

@@ -19,6 +19,7 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
+  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -41,6 +42,7 @@ const TextInput = (
     id,
     name,
     label,
+    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -79,6 +81,7 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
+              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx CHANGED Viewed

@@ -24,6 +24,7 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
+  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
@@ -37,6 +38,7 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
+  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -75,6 +77,7 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
+            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}