playbook_ui 7.11.1 → 7.12.0

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

@@ -1,10 +1,13 @@
 import React from 'react'
 import { Table, TableRow } from '../../'
 
-const TableSideHighlight = () => {
+const TableSideHighlight = (props) => {
   return (
     <div>
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Product colors'}</th>
@@ -15,28 +18,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="solar">
+          <TableRow
+              sideHighlightColor="solar"
+              {...props}
+          >
             <td>{'Solar'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="roofing">
+          <TableRow
+              sideHighlightColor="roofing"
+              {...props}
+          >
             <td>{'Roofing'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="gutters">
+          <TableRow
+              sideHighlightColor="gutters"
+              {...props}
+          >
             <td>{'Gutters'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -48,7 +63,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Status colors'}</th>
@@ -59,28 +77,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="success">
+          <TableRow
+              sideHighlightColor="success"
+              {...props}
+          >
             <td>{'Success'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="warning">
+          <TableRow
+              sideHighlightColor="warning"
+              {...props}
+          >
             <td>{'Warning'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="error">
+          <TableRow
+              sideHighlightColor="error"
+              {...props}
+          >
             <td>{'Error'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -92,7 +122,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Category Colors'}</th>
@@ -103,28 +136,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="category_1">
+          <TableRow
+              sideHighlightColor="category_1"
+              {...props}
+          >
             <td>{'Category Color 1'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_2">
+          <TableRow
+              sideHighlightColor="category_2"
+              {...props}
+          >
             <td>{'Category Color 2'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_3">
+          <TableRow
+              sideHighlightColor="category_3"
+              {...props}
+          >
             <td>{'Category Color 3'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableSingleLine = () => {
+const TableSingleLine = (props) => {
   return (
     <Table
         singleLine
         size="sm"
+        {...props}
     >
       <thead>
         <tr>

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

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableSm = () => {
+const TableSm = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { Button } from '../../'
 
-const TableOneAction = () => {
+const TableOneAction = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -26,11 +29,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -45,11 +50,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -64,11 +71,13 @@ const TableOneAction = () => {
                 paddingLeft="none"
                 text="Tetriary Action"
                 variant="link"
+                {...props}
             />
             <Button
                 onClick={() => alert('button clicked!')}
                 text="Secondary Action"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { CircleIconButton } from '../../'
 
-const TableTwoPlusActions = () => {
+const TableTwoPlusActions = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -25,6 +28,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>
@@ -38,6 +42,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
 
@@ -52,6 +57,7 @@ const TableTwoPlusActions = () => {
             <CircleIconButton
                 icon="ellipsis-h"
                 variant="secondary"
+                {...props}
             />
           </td>
         </tr>

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { TextInput } from '../../'
 
-const TextInputCustom = () => {
+const TextInputCustom = (props) => {
   const [name, setName] = useState('')
   const handleUpdateName = ({ target }) => {
     setName(target.value)
@@ -10,6 +10,7 @@ const TextInputCustom = () => {
     <div>
       <TextInput
           label="Custom Label"
+          {...props}
       >
         <input
             name="custom-name"
@@ -17,6 +18,7 @@ const TextInputCustom = () => {
             placeholder="custom-placeholder"
             type="text"
             value={name}
+            {...props}
         />
       </TextInput>
     </div>

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

@@ -5,7 +5,7 @@ import {
   Title,
 } from '../../'
 
-const TextInputDefault = () => {
+const TextInputDefault = (props) => {
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
@@ -36,6 +36,7 @@ const TextInputDefault = () => {
           onChange={handleOnChangeFormField}
           placeholder="Enter first name"
           value={formFields.firstName}
+          {...props}
       />
       <TextInput
           label="Last Name"
@@ -43,6 +44,7 @@ const TextInputDefault = () => {
           onChange={handleOnChangeFormField}
           placeholder="Enter last name"
           value={formFields.lastName}
+          {...props}
       />
       <TextInput
           label="Phone Number"
@@ -51,6 +53,7 @@ const TextInputDefault = () => {
           placeholder="Enter phone number"
           type="phone"
           value={formFields.phone}
+          {...props}
       />
       <TextInput
           label="Email Address"
@@ -59,6 +62,7 @@ const TextInputDefault = () => {
           placeholder="Enter email address"
           type="email"
           value={formFields.email}
+          {...props}
       />
       <TextInput
           label="Zip Code"
@@ -67,6 +71,7 @@ const TextInputDefault = () => {
           placeholder="Enter zip code"
           type="number"
           value={formFields.zip}
+          {...props}
       />
 
       <br />
@@ -85,6 +90,7 @@ const TextInputDefault = () => {
           placeholder="Enter first name"
           ref={ref}
           value={firstName}
+          {...props}
       />
 
       <If condition={firstName !== ''}>

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

@@ -2,13 +2,14 @@ import React from 'react'
 import { TextInput } from '../../'
 
 class TextInputDisabled extends React.Component {
-  render() {
+  render(props) {
     return (
       <div>
         <TextInput
             disabled
             label="Last Name"
             placeholder="Enter last name"
+            {...props}
         />
       </div>
     )

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

@@ -3,7 +3,7 @@ import {
   TextInput,
 } from '../..'
 
-const TextInputError = () => {
+const TextInputError = (props) => {
   const [email, setEmail] = useState('')
 
   const handleUpdateEmail = ({ target }) => {
@@ -18,6 +18,7 @@ const TextInputError = () => {
           placeholder="Enter email address"
           type="email"
           value={email}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_textarea/_textarea.html.erb

@@ -15,12 +15,27 @@
         :object,
         :method,
         :class => "#{object.classname}",
+        :max_characters => object.max_characters,
         :name => object.name,
+        :onkeyup => object.onkeyup,
         :placeholder => object.placeholder,
         :rows => object.rows,
         :value => object.value )%>
     <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <% if object.character_count %>
+        <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+             <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+      <% end %>
+    <% else %>
+      <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -2,11 +2,12 @@
 
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption } from '../'
+import { Body, Caption, Flex, FlexItem } from '../'
 import type { InputCallback } from '../types.js'
 import { globalProps } from '../utilities/globalProps.js'
 
 type TextareaProps = {
+  characterCount?: string,
   className?: string,
   children?: array<React.ReactChild>,
   disabled?: boolean,
@@ -15,6 +16,7 @@ type TextareaProps = {
   object?: string,
   method?: string,
   label?: string,
+  maxCharacters?: string,
   placeholder?: string,
   value?: string,
   name?: string,
@@ -25,12 +27,14 @@ type TextareaProps = {
 }
 
 const Textarea = ({
+  characterCount,
   className,
   children,
   disabled,
   resize = 'none',
   error,
   label,
+  maxCharacters,
   name,
   onChange = () => {},
   placeholder,
@@ -43,6 +47,14 @@ const Textarea = ({
   const resizeClass = `resize_${resize}`
   const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
 
+  const characterCounter = () => {
+    return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
+  }
+
+  const checkIfZero = (characterCount) => {
+    return characterCount == 0 ? characterCount.toString() : characterCount
+  }
+
   return (
     <div className={classes}>
       <Caption
@@ -64,9 +76,37 @@ const Textarea = ({
             {...props}
         />
         <If condition={error}>
-          <Body
-              status="negative"
-              text={error}
+          <If condition={characterCount}>
+            <Flex
+                spacing="between"
+                vertical="center"
+            >
+              <FlexItem>
+                <Body
+                    margin="none"
+                    status="negative"
+                    text={error}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Caption
+                    margin="none"
+                    size="xs"
+                    text={characterCounter()}
+                />
+              </FlexItem>
+            </Flex>
+            <Else />
+            <Body
+                status="negative"
+                text={error}
+            />
+          </If>
+          <Else />
+          <Caption
+              margin="none"
+              size="xs"
+              text={characterCounter()}
           />
         </If>
       </If>