playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1,24 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<%= 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

@@ -1,41 +0,0 @@
-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

@@ -1 +0,0 @@
-<%= 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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,24 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<%= 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

@@ -1,45 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,2 +0,0 @@
-## 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

@@ -1,18 +0,0 @@
-<%= 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

@@ -1,30 +0,0 @@
-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

@@ -1,62 +0,0 @@
-<%= 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

@@ -1,67 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-<%= 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

@@ -1,22 +0,0 @@
-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

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

@@ -1,18 +0,0 @@
-<%= pb_rails("time", props: {
-  show_timezone: false,
-  time: "2012-08-02T15:49:29Z"
-}) %>
-
-<br>
-
-<%= pb_rails("time", props: {
-  show_timezone: false,
-  time: DateTime.now
-}) %>
-
-<br>
-
-<%= pb_rails("time", props: {
-  time: DateTime.now,
-  timezone: "America/Chicago",
-}) %>

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

@@ -1,24 +0,0 @@
-import React from 'react'
-import Time from '../_time'
-
-const TimeStamp = (props) => {
-  return (
-    <div>
-      <Time
-          date={new Date()}
-          size="sm"
-          {...props}
-      />
-
-      <br />
-
-      <Time
-          date={new Date().getTime()}
-          size="sm"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default TimeStamp

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

@@ -1,38 +0,0 @@
-<h4>East Coast</h4>
-<%= pb_rails("time", props: {
-  time: Time.now,
-  timezone: "America/New_York"
-}) %>
-
-<br>
-
-<h4>Central</h4>
-<%= pb_rails("time", props: {
-  time: Time.now,
-  timezone: "America/Chicago"
-}) %>
-
-<br>
-
-<h4>Mountain</h4>
-<%= pb_rails("time", props: {
-  time: Time.now,
-  timezone: "America/Denver"
-}) %>
-
-<br>
-
-<h4>West Coast</h4>
-<%= pb_rails("time", props: {
-  show_timezone: true,
-  time: Time.now,
-  timezone: "America/Los_Angeles"
-}) %>
-
-<br>
-
-<h4>Toyko, Japan</h4>
-<%= pb_rails("time", props: {
-  time: Time.now,
-  timezone: "Asia/Tokyo",
-}) %>

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

@@ -1,62 +0,0 @@
-import React from 'react'
-import Time from '../_time'
-
-const TimeTimezone = (props) => {
-  const zones = {
-    east: 'America/New_York',
-    central: 'America/Chicago',
-    mountain: 'America/Denver',
-    west: 'America/Los_Angeles',
-    asia: 'Asia/Tokyo',
-  }
-  return (
-    <div>
-      <h4>{'East Coast'}</h4>
-      <Time
-          date={new Date()}
-          size="md"
-          timeZone={zones.east}
-          {...props}
-      />
-
-      <br />
-
-      <h4>{'Central'}</h4>
-      <Time
-          date={new Date()}
-          timeZone={zones.central}
-          {...props}
-      />
-
-      <br />
-
-      <h4>{'Mountain'}</h4>
-      <Time
-          date={new Date()}
-          timeZone={zones.mountain}
-          {...props}
-      />
-
-      <br />
-
-      <h4>{'West Coast'}</h4>
-      <Time
-          date={new Date()}
-          timeZone={zones.west}
-          {...props}
-      />
-
-      <br />
-
-      <h4>{'Tokyo, Japan'}</h4>
-      <Time
-          date={new Date()}
-          timeZone={zones.asia}
-          {...props}
-      />
-
-    </div>
-  )
-}
-
-export default TimeTimezone

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

@@ -1,11 +0,0 @@
-Simply enter the timezone you would like to use and it will appear.
-
-The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.
-
-However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.
-
-Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly. 
-
-Format: `<Continent>/<Large_City_Name>`
-
-Continent Options: ` America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia `

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

@@ -1,15 +0,0 @@
-examples:
-
-  rails:
-  - time_default: Default
-  - time_sizes: Sizes
-  - time_timestamp: Timestamp Values
-  - time_timezone: Handling Timezones
-  - time_align: Alignment
-
-  react:
-  - time_default: Default
-  - time_sizes: Sizes
-  - time_timestamp: Timestamp Values
-  - time_timezone: Handling Timezones
-  - time_align: Alignment

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

@@ -1,5 +0,0 @@
-export { default as TimeDefault } from './_time_default.jsx'
-export { default as TimeSizes } from './_time_sizes.jsx'
-export { default as TimeTimestamp } from './_time_timestamp.jsx'
-export { default as TimeAlign } from './_time_align.jsx'
-export { default as TimeTimezone } from './_time_timezone.jsx'