playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputAddOn = (props) => {
+  const [defaultInput, setDefaultInput] = useState('')
+  const [firstInput, setFirstInput] = useState('')
+  const [secondInput, setSecondInput] = useState('')
+  const [thirdInput, setThirdInput] = useState('')
+  const [fourthInput, setFourthInput] = useState('')
+
+  const handleUpdateDefaultInput = ({ target }) => {
+    setDefaultInput(target.value)
+  }
+
+  const handleUpdateFirstInput = ({ target }) => {
+    setFirstInput(target.value)
+  }
+
+  const handleUpdateSecondInput = ({ target }) => {
+    setSecondInput(target.value)
+  }
+
+  const handleUpdateThirdInput = ({ target }) => {
+    setThirdInput(target.value)
+  }
+
+  const handleUpdateFourthInput = ({ target }) => {
+    setFourthInput(target.value)
+  }
+
+  return (
+    <>
+      <div>
+        <TextInput
+            addOn={{ icon: 'bat' }}
+            label="Add On With Defaults"
+            onChange={handleUpdateDefaultInput}
+            value={defaultInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'user', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Border"
+            onChange={handleUpdateFirstInput}
+            value={firstInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'right', border: false }}
+            label="Right-Aligned Add On With No Border"
+            onChange={handleUpdateThirdInput}
+            value={thirdInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: false }}
+            label="Left-Aligned Add On With No Border"
+            onChange={handleUpdateSecondInput}
+            value={secondInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Border"
+            onChange={handleUpdateFourthInput}
+            value={fourthInput}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TextInputAddOn

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
+    <input placeholder="Custom placeholder" name="custom-name"></input>
+<% end %>

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

@@ -0,0 +1,29 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputCustom = (props) => {
+  const [name, setName] = useState('')
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          label="Custom Label"
+          {...props}
+      >
+        <input
+            name="custom-name"
+            onChange={handleUpdateName}
+            placeholder="custom-placeholder"
+            type="text"
+            value={name}
+            {...props}
+        />
+      </TextInput>
+    </div>
+  )
+}
+
+export default TextInputCustom

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -0,0 +1,31 @@
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  value: "Timothy Wenhold",
+  data: { say: "hi", yell: "go" },
+  aria: { something: "hello"},
+  id: "unique_id"
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Last Name",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Phone Number",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Email Address",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    label: "Zip Code",
+    type: "number",
+    placeholder: "Enter zip code"
+}) %>

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

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+
+import Caption from '../../pb_caption/_caption'
+import TextInput from '../../pb_text_input/_text_input'
+import Title from '../../pb_title/_title'
+
+const TextInputDefault = (props) => {
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
+  }
+  const ref = React.createRef()
+
+  const [firstName, setFirstName] = useState('')
+  const [formFields, setFormFields] = useState({
+    firstName: 'Jane',
+    lastName: 'Doe',
+    phone: '8888888888',
+    email: 'jane@doe.com',
+    zip: 55555,
+  })
+
+  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"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+          {...props}
+      />
+      <TextInput
+          label="Last Name"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+          {...props}
+      />
+      <TextInput
+          label="Phone Number"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+          {...props}
+      />
+      <TextInput
+          label="Email Address"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+          {...props}
+      />
+      <TextInput
+          label="Zip Code"
+          name="zip"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter zip code"
+          type="number"
+          value={formFields.zip}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Title>{'Event Handler Props'}</Title>
+
+      <br />
+      <Caption>{'onChange'}</Caption>
+
+      <br />
+
+      <TextInput
+          label="First Name"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          ref={ref}
+          value={firstName}
+          {...props}
+      />
+
+      <If condition={firstName !== ''}>
+        {`First name is: ${firstName}`}
+      </If>
+    </div>
+  )
+}
+
+export default TextInputDefault

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", disabled: true }) %>

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

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

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  placeholder: "Enter email address",
+  type: "email"
+}) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  label: "Confirm Email Address",
+  placeholder: "Confirm email address",
+  type: "email"
+}) %>

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputError = (props) => {
+  const [email, setEmail] = useState('')
+
+  const handleUpdateEmail = ({ target }) => {
+    setEmail(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
+          error="Please enter a valid email address"
+          label="Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Enter email address"
+          type="email"
+          value={email}
+          {...props}
+      />
+      <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
+          label="Confirm Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Confirm email address"
+          type="email"
+          value={email}
+          {...props}
+      />
+    </div>
+  )
+}
+export default TextInputError

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

@@ -0,0 +1 @@
+Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: {
+  inline: true,
+  label: "Hover Over Text Below",
+  value: "Inline Input"
+}) %>

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputInline = (props) => {
+  const [value, setValue] = useState('Inline Input')
+  const handleValueChange = ({ target }) => {
+    setValue(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          inline
+          label="Hover Over Text Below"
+          onChange={handleValueChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputInline

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("text_input", props: {
+  placeholder: "Enter email address",
+  type: "email"
+}) %>

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

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+import TextInput from '../_text_input'
+
+const TextInputNoLabel = (props) => {
+  const [email, setEmail] = useState('')
+
+  const handleUpdateEmail = ({ target }) => {
+    setEmail(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          onChange={handleUpdateEmail}
+          placeholder="Enter email address"
+          type="email"
+          value={email}
+          {...props}
+      />
+    </div>
+  )
+}
+export default TextInputNoLabel

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

@@ -0,0 +1,17 @@
+examples:
+  rails:
+  - text_input_default: Default
+  - text_input_error: With Error
+  - text_input_custom: Custom
+  - text_input_disabled: Disabled
+  - text_input_add_on: Add On
+  - text_input_inline: Inline
+  - text_input_no_label: No Label
+  react:
+  - text_input_default: Default
+  - text_input_error: With Error
+  - text_input_custom: Custom
+  - text_input_disabled: Disabled
+  - text_input_add_on: Add On
+  - text_input_inline: Inline
+  - text_input_no_label: No Label

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

@@ -0,0 +1,7 @@
+export { default as TextInputDefault } from './_text_input_default.jsx'
+export { default as TextInputCustom } from './_text_input_custom.jsx'
+export { default as TextInputError } from './_text_input_error.jsx'
+export { default as TextInputDisabled } from './_text_input_disabled.jsx'
+export { default as TextInputAddOn } from './_text_input_add_on.jsx'
+export { default as TextInputInline } from './_text_input_inline.jsx'
+export { default as TextInputNoLabel } from './_text_input_no_label.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_description.md

@@ -0,0 +1 @@
+Area where user can enter larger amounts of text. Commonly used in forms.

data/app/pb_kits/playbook/pb_textarea/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use for small text amounts (use <a href="https://playbook.powerapp.cloud/kits/text_input">Text Input</a> instead). Avoid using textarea without validation if it is required and using  with  validation if not required.

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,88 @@
+import React, { useState } from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaCharacterCounter = (props) => {
+  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}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count2}
+          label="Max Characters"
+          maxCharacters="100"
+          onChange={() => handleMaxCount(event)}
+          rows={4}
+          value={value1}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count3}
+          label="Max Characters w/ Blocker"
+          maxCharacters="100"
+          onChange={() => handleMaxCountWithBlocker(event, 100)}
+          rows={4}
+          value={value2}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          characterCount={count4}
+          error={error}
+          label="Max Characters w/ Error"
+          maxCharacters="75"
+          onChange={() => handleMaxCountWithError(event, 75)}
+          rows={4}
+          value={value3}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TextareaCharacterCounter

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

@@ -0,0 +1,3 @@
+<%= pb_rails("textarea", props: { label: "Label"}) do %>
+  <textarea class="my_custom_class" name="custom_textarea" rows=4></textarea>
+<% end %>

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

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

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

@@ -0,0 +1,9 @@
+<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

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

@@ -0,0 +1,41 @@
+import React, {useState} from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaDefault = (props) => {
+  const [value, setValue] = useState('Default value text')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          label="Label"
+          rows={4}
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          label="Label"
+          placeholder="Placeholder text"
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          label="Label"
+          name="comment"
+          onChange={(e) => handleChange(e)}
+          placeholder="Placeholder text"
+          value={value}
+          {...props}
+      />
+
+    </div>
+  )
+}
+
+export default TextareaDefault

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

@@ -0,0 +1 @@
+<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>