playbook_ui 7.9.0 → 7.12.0

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

@@ -1,17 +1,26 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   TextInput,
 } from '../..'
 
-const TextInputError = () => (
-  <div>
-    <TextInput
-        error="Please enter a valid email address"
-        label="Email Address"
-        placeholder="Enter email address"
-        type="email"
-    />
-  </div>
-)
+const TextInputError = (props) => {
+  const [email, setEmail] = useState('')
 
+  const handleUpdateEmail = ({ target }) => {
+    setEmail(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          error="Please enter a valid email address"
+          label="Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Enter email address"
+          type="email"
+          value={email}
+          {...props}
+      />
+    </div>
+  )
+}
 export default TextInputError

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import TextInput from './_text_input'
+
+const testId = 'text-input1',
+  kitClass = 'pb_text_input_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        className="additional_class"
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} additional_class`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        dark
+        data={{ testid: testId }}
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        error="Please enter a valid email"
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} error`)
+})
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        dark
+        data={{ testid: testId }}
+        error="Please enter a valid email"
+        label="First Name"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark error`)
+})

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

@@ -1,21 +1,22 @@
 /* @flow */
 
-import React from 'react'
+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>,
-  data?: string,
   disabled?: boolean,
   error?: string,
   id?: string,
   object?: string,
   method?: string,
   label?: string,
+  maxCharacters?: string,
   placeholder?: string,
   value?: string,
   name?: string,
@@ -26,12 +27,14 @@ type TextareaProps = {
 }
 
 const Textarea = ({
+  characterCount,
   className,
   children,
   disabled,
   resize = 'none',
   error,
   label,
+  maxCharacters,
   name,
   onChange = () => {},
   placeholder,
@@ -39,11 +42,19 @@ const Textarea = ({
   rows = 4,
   value,
   ...props
-}: TextareaProps) => {
+}: TextareaProps, ref: React.ElementRef<"textarea">) => {
   const errorClass = error ? 'error' : null
   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
@@ -53,20 +64,49 @@ const Textarea = ({
         {children}
         <Else />
         <textarea
-            {...props}
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
             onChange={onChange}
             placeholder={placeholder}
+            ref={ref}
             required={required}
             rows={rows}
             value={value}
+            {...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>
@@ -74,4 +114,4 @@ const Textarea = ({
   )
 }
 
-export default Textarea
+export default forwardRef(Textarea)

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

@@ -56,4 +56,8 @@
       }
     }
   }
+
+  .pb_caption_kit_xs {
+    text-align: right;
+  }
 }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.html.erb

@@ -0,0 +1,68 @@
+<% text_area_2_value = "Counting characters!" %>
+<% text_area_3_value = "This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!" %>
+<% text_area_4_value = "This counter alerts the user that they have exceeded the maximum number of allowed characters." %>
+
+<%= pb_rails("textarea", props: {
+  character_count: 0,
+  id: "text-area-1",
+  label: "Count Only",
+  onkeyup: "handleChange1(event)",
+}) %>
+
+<%= pb_rails("textarea", props: {
+  character_count: text_area_2_value.length,
+  id: "text-area-2",
+  label: "Max Characters",
+  max_characters: 100,
+  onkeyup: "handleChange2(event, 100)",
+  value: text_area_2_value,
+}) %>
+
+<%= pb_rails("textarea", props: {
+  character_count: text_area_3_value.length,
+  id: "text-area-3",
+  label: "Max Characters w/ Blocker",
+  max_characters: 100,
+  onkeyup: "handleChange3(event, 100)",
+  value: text_area_3_value,
+}) %>
+
+<%= pb_rails("textarea", props: {
+  character_count: text_area_4_value.length,
+  error: "Too many characters!",
+  id: "text-area-4",
+  label: "Max Characters w/ Error",
+  max_characters: 75,
+  onkeyup: "handleChange4(event, 75)",
+  value: text_area_4_value,
+}) %>
+
+<script type="text/javascript">
+  const characterCount1 = document.querySelector("#text-area-1 .pb_caption_kit_xs")
+  const characterCount2 = document.querySelector("#text-area-2 .pb_caption_kit_xs")
+  const characterCount3 = document.querySelector("#text-area-3 .pb_caption_kit_xs")
+  const characterCount4 = document.querySelector("#text-area-4 .pb_caption_kit_xs")
+
+  const textArea3 = document.querySelector("#text-area-3 textarea")
+  const textArea4 = document.querySelector("#text-area-4 textarea")
+
+  const handleChange1 = (event) => {
+    characterCount1.innerHTML = event.target.value.length
+  }
+
+  const handleChange2 = (event, maxCharacters) => {
+    characterCount2.innerHTML = `${event.target.value.length} / ${maxCharacters}`
+  }
+
+  const handleChange3 = (event, maxCharacters) => {
+    if (event.target.value.length > maxCharacters) {
+      textArea3.value = event.target.value.substring(0, maxCharacters)
+    }
+
+    characterCount3.innerHTML = `${textArea3.value.length} / ${maxCharacters}`
+  }
+
+  const handleChange4 = (event, maxCharacters) => {
+    characterCount4.innerHTML = `${textArea4.value.length} / ${maxCharacters}`
+  }
+</script>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { Textarea } from '../../'
+
+const TextareaCharacterCounter = () => {
+  const [value1, setValue1] = useState('Counting characters!')
+  const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!')
+  const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.')
+  const [error, setError] = useState('Too many characters!')
+  const [count1, setCount1] = useState(0)
+  const [count2, setCount2] = useState(value1.length)
+  const [count3, setCount3] = useState(value2.length)
+  const [count4, setCount4] = useState(value3.length)
+
+  const handleMaxCount = (event) => {
+    setCount2(event.target.value.length)
+    setValue1(event.target.value)
+  }
+
+  const handleMaxCountWithBlocker = (event, maxCharacters) => {
+    if (event.target.value.length <= maxCharacters) {
+      setCount3(event.target.value.length)
+      setValue2(event.target.value)
+    }
+  }
+
+  const handleMaxCountWithError = (event, maxCharacters) => {
+    if (event.target.value.length > maxCharacters) {
+      setError('Too many characters!')
+    } else {
+      setError('')
+    }
+
+    setCount4(event.target.value.length)
+    setValue3(event.target.value)
+  }
+
+  return (
+    <>
+      <Textarea
+          characterCount={count1}
+          label="Count Only"
+          onChange={(event) => setCount1(event.target.value.length)}
+          rows={4}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count2}
+          label="Max Characters"
+          maxCharacters="100"
+          onChange={() => handleMaxCount(event)}
+          rows={4}
+          value={value1}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count3}
+          label="Max Characters w/ Blocker"
+          maxCharacters="100"
+          onChange={() => handleMaxCountWithBlocker(event, 100)}
+          rows={4}
+          value={value2}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count4}
+          error={error}
+          label="Max Characters w/ Error"
+          maxCharacters="75"
+          onChange={() => handleMaxCountWithError(event, 75)}
+          rows={4}
+          value={value3}
+      />
+    </>
+  )
+}
+
+export default TextareaCharacterCounter

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Textarea } from '../../'
 
-const TextareaCustom = () => {
+const TextareaCustom = (props) => {
   return (
     <div>
       <Textarea label="Label">
@@ -9,6 +9,7 @@ const TextareaCustom = () => {
             className="my_custom_class"
             name="custom_textarea"
             rows={4}
+            {...props}
         >
           {'Content goes here.'}
         </textarea>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Textarea } from '../../'
 
-const TextareaDefault = () => {
+const TextareaDefault = (props) => {
   return (
     <div>
       <Textarea
           label="Label"
           rows={4}
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TextareaDefault = () => {
       <Textarea
           label="Label"
           placeholder="Placeholder text"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TextareaDefault = () => {
           name="comment"
           placeholder="Placeholder text"
           value="Default value text"
+          {...props}
       />
 
     </div>