playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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}) %>

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

@@ -0,0 +1,25 @@
+import React, {useState} from 'react'
+import { Textarea } from '../..'
+
+const TextareaError = (props) => {
+  const [value, setValue] = useState('default value text')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          error="This field has an error!"
+          label="Label"
+          name="comment"
+          onChange={(e)=> handleChange(e)}
+          placeholder="Placeholder text"
+          value={value}
+          {...props}
+      />
+
+    </div>
+  )
+}
+
+export default TextareaError

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

@@ -0,0 +1 @@
+Textarea 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_textarea/docs/_textarea_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("textarea", props: {
+  inline: true,
+  resize: "auto",
+  rows: 1,
+  value:"Try clicking into this text."
+}) %>

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

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaInline = (props) => {
+  const [value, setValue] = useState('Try clicking into this text.')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          inline
+          onChange={(e) => handleChange(e)}
+          resize="auto"
+          rows={1}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInline

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

@@ -0,0 +1,13 @@
+<%= pb_rails("textarea", props: { label: "auto", placeholder: "Resize Auto", resize: "auto" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "vertical", placeholder: "Resize Vertical", resize: "vertical" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "both", placeholder: "Resize Both", resize: "both" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "horizontal", placeholder: "Resize Horizontal", resize: "horizontal" }) %>

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

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaResize = (props) => {
+  return (
+    <div>
+      <Textarea
+          label="auto"
+          placeholder="Resize Auto"
+          resize="auto"
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          label="vertical"
+          placeholder="Resize Vertical"
+          resize="vertical"
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          label="both"
+          placeholder="Resize Both"
+          resize="both"
+          {...props}
+      />
+
+      <br />
+
+      <Textarea
+          label="horizontal"
+          placeholder="Resize Horizontal"
+          resize="horizontal"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaResize

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

@@ -0,0 +1,17 @@
+examples:
+
+  rails:
+  - textarea_default: Default
+  - textarea_custom: Custom Textarea Input
+  - textarea_resize: Resize
+  - textarea_error: Textarea w/ Error
+  - textarea_character_counter: Character Counter
+  - textarea_inline: Inline
+
+  react:
+  - textarea_default: Default
+  - textarea_custom: Custom Textarea Input
+  - textarea_resize: Resize
+  - textarea_error: Textarea w/ Error
+  - textarea_character_counter: Character Counter
+  - textarea_inline: Inline

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

@@ -0,0 +1,6 @@
+export { default as TextareaDefault } from './_textarea_default.jsx'
+export { default as TextareaResize } from './_textarea_resize.jsx'
+export { default as TextareaCustom } from './_textarea_custom.jsx'
+export { default as TextareaError } from './_textarea_error.jsx'
+export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
+export { default as TextareaInline } from './_textarea_inline.jsx'

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

@@ -0,0 +1 @@
+This kit consist of large display and table display format. It includes and icon, and a time zone.

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

@@ -0,0 +1,2 @@
+## Things To Avoid
+Try to not use this as a small time stamp to display a status update.

data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb

@@ -0,0 +1,18 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Time from '../_time'
+
+const TimeAlign = (props) => {
+  return (
+    <div>
+      <Time
+          date={new Date()}
+          size="md"
+          {...props}
+      />
+      <br />
+      <Time
+          align="center"
+          date={new Date()}
+          size="md"
+          {...props}
+      />
+      <br />
+      <Time
+          align="right"
+          date={new Date()}
+          size="md"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimeAlign

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -0,0 +1,62 @@
+<%= pb_rails("time", props: {
+  show_timezone: false,
+  time: Time.now
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: false,
+  time: "2012-08-02T15:49:29Z",
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York"
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("time", props: {
+  show_timezone: false,
+  size: "md",
+  time: Time.now,
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  size: "md",
+  time: DateTime.now,
+  timezone: "America/New_York",
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  show_timezone: false,
+  size: "md",
+  time: "2012-08-02T15:49:29Z",
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  show_icon: true,
+  size: "md",
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York",
+}) %>

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import Time from '../_time'
+
+const TimeDefault = (props) => {
+  return (
+    <div>
+      <Time
+          date={new Date().getTime()}
+          showTimezone={false}
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          timeZone="America/New_York"
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date().getTime()}
+          showIcon
+          showTimezone={false}
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          timeZone="America/New_York"
+          {...props}
+      />
+      <br />
+      <br />
+      <Time
+          date={new Date()}
+          showTimezone={false}
+          size="md"
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+          timeZone="America/New_York"
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          showTimezone={false}
+          size="md"
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          size="md"
+          timeZone="America/New_York"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TimeDefault

data/app/pb_kits/playbook/pb_time/docs/_time_default.md

@@ -0,0 +1 @@
+Use this anywhere needed to display a certain timestamp 

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  size: "sm"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react'
+import Time from '../_time'
+
+const TimeSizes = (props) => {
+  return (
+    <Fragment>
+      <Time
+          date={new Date()}
+          {...props}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+          timeZone="America/New_York"
+          {...props}
+      />
+    </Fragment>
+  )
+}
+
+export default TimeSizes