playbook_ui 7.8.4 → 7.11.1

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

@@ -0,0 +1,17 @@
+<%= pb_rails("stat_change", props: {
+  value: 28.4,
+  icon: "chart-line",
+}) %>
+
+<br>
+
+<%= pb_rails("stat_change", props: {
+  value: 6.1,
+  icon: "chart-line-down",
+}) %>
+
+<br>
+
+<%= pb_rails("stat_change", props: {
+  value: 102,
+}) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { StatChange } from '../../'
+
+const StatChangeUnit = () => {
+  return (
+    <div>
+      <StatChange
+          icon="chart-line"
+          value="28.4"
+      />
+
+      <br />
+
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+
+      <br />
+
+      <StatChange
+          value={102}
+      />
+    </div>
+  )
+}
+
+export default StatChangeUnit

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

@@ -0,0 +1,20 @@
+<%= pb_rails("stat_change", props: {
+  change: "increase",
+  value: 28.4,
+  icon: "level-up",
+}) %>
+
+<br>
+
+<%= pb_rails("stat_change", props: {
+  change: "decrease",
+  value: 6.1,
+  icon: "level-down",
+}) %>
+
+<br>
+
+<%= pb_rails("stat_change", props: {
+  change: "neutral",
+  value: 102,
+}) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { StatChange } from '../../'
+
+const StatChangeUnitTwo = () => {
+  return (
+    <div>
+      <StatChange
+          change="increase"
+          icon="level-up"
+          value="28.4"
+      />
+
+      <br />
+
+      <StatChange
+          change="decrease"
+          icon="level-down"
+          value={6.1}
+      />
+
+      <br />
+
+      <StatChange
+          change="neutral"
+          value={102}
+      />
+    </div>
+  )
+}
+
+export default StatChangeUnitTwo

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md

@@ -0,0 +1 @@
+Increase colors your icon GREEN & Decrease colors your icon RED.

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

@@ -1,9 +1,11 @@
 examples:
-  
+
   rails:
   - stat_change_default: Default
-  
-  
+  - stat_change_unit: Icon
+  - stat_change_unit_two: Colors
+
   react:
   - stat_change_default: Default
-  
+  - stat_change_unit: Icon
+  - stat_change_unit_two: Colors

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

@@ -1 +1,3 @@
 export { default as StatChangeDefault } from './_stat_change_default.jsx'
+export { default as StatChangeUnit } from './_stat_change_unit.jsx'
+export { default as StatChangeUnitTwo } from './_stat_change_unit_two.jsx'

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -10,6 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
+      prop :icon, type: Playbook::Props::String
       prop :value, type: Playbook::Props::Numeric
 
       def status
@@ -23,14 +24,18 @@ module Playbook
         end
       end
 
-      def icon
-        case change
-        when "increase"
-          "arrow-up"
-        when "decrease"
-          "arrow-down"
+      def returned_icon
+        if icon
+          icon
         else
-          false
+          case change
+          when "increase"
+            "arrow-up"
+          when "decrease"
+            "arrow-down"
+          else
+            false
+          end
         end
       end
 

data/app/pb_kits/playbook/pb_table/_table.scss

@@ -1,57 +1 @@
-@import "styles/all";
-@import "../tokens/colors";
-
-$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
-
-@mixin pb_table_row_kit_side_highlight($background) {
-  box-shadow: inset 4px 0 0 0 $background;
-  border-top: 0px;
-}
-
-[class^=pb_table] {
-  tbody {
-    [class^=pb_table_row_kit] {
-      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
-        &[class*=_side_highlight_#{$color_name}] {
-          td {
-            &:first-child {
-              @include pb_table_row_kit_side_highlight($color_value);
-            }
-          }
-        }
-      }
-    }
-  }
-  tr[align=center] th,
-  tr th[align=center] {
-    text-align: center !important;
-  }
-
-  tr[align=right] th,
-  tr th[align=right] {
-    text-align: right !important;
-  }
-
-  tr[shift=up] {
-    vertical-align: top;
-  }
-  tr[shift=down] {
-    vertical-align: bottom;
-  }
-
-  td[shift=up] {
-    vertical-align: top;
-  }
-  td[shift=down] {
-    vertical-align: bottom;
-  }
-
-  th[shift=up] {
-    vertical-align: top;
-  }
-
-  th[shift=down] {
-    vertical-align: bottom;
-  }
-}
-
+@import "styles/all";

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb

@@ -22,7 +22,7 @@
       <td>Value 4a</td>
       <td>Value 5a</td>
     </tr>
-    <tr shift="up">
+    <tr shift="middle">
       <td>
         Value 1b
         <br/>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx

@@ -27,7 +27,7 @@ const TableAlignmentShiftRow = () => {
           <td>{'Value 4a'}</td>
           <td>{'Value 5a'}</td>
         </tr>
-        <tr shift="up">
+        <tr shift="middle">
           <td>
             {'Value 1b'}
             <br />

data/app/pb_kits/playbook/pb_table/styles/_alignment.scss

@@ -0,0 +1,32 @@
+[class^=pb_table] {
+    tr {
+        vertical-align: top;
+    }
+
+    // Text Align
+    tr[align=center] th,
+    tr th[align=center] {
+      text-align: center !important;
+    }
+    tr[align=right] th,
+    tr th[align=right] {
+      text-align: right !important;
+    }
+
+    // Column Align
+    tr[shift=up],
+    td[shift=up],
+    th[shift=up] {
+        vertical-align: top;
+      }
+    tr[shift=middle],
+    td[shift=middle],
+    th[shift=middle] {
+      vertical-align: middle;
+    }
+    tr[shift=down],
+    td[shift=down],
+    th[shift=down] {
+      vertical-align: bottom;
+    }
+}

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -1,12 +1,13 @@
-@import "variables";
-@import "mixins";
+@import "../../tokens/colors";
 
+@import "variables";
 @import "reset";
 @import "structure";
 @import "table-card";
 @import "content";
 @import "headers";
-
+@import "side_highlight";
+@import "alignment";
 @import "hover";
 @import "as-cards";
 @import "single-line";

data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss

@@ -0,0 +1,24 @@
+@import "../../tokens/colors";
+
+$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
+
+@mixin pb_table_row_kit_side_highlight($background) {
+  box-shadow: inset 4px 0 0 0 $background;
+  border-top: 0px;
+}
+
+[class^=pb_table] {
+  tbody {
+    [class^=pb_table_row_kit] {
+      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
+        &[class*=_side_highlight_#{$color_name}] {
+          td {
+            &:first-child {
+              @include pb_table_row_kit_side_highlight($color_value);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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