playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1,22 +0,0 @@
-export { default as TableSm } from './_table_sm.jsx'
-export { default as TableMd } from './_table_md.jsx'
-export { default as TableLg } from './_table_lg.jsx'
-export { default as TableSticky } from './_table_sticky.jsx'
-export { default as TableSideHighlight } from './_table_side_highlight.jsx'
-export { default as TableContainer } from './_table_container.jsx'
-export { default as TableDataTable } from './_table_data_table.jsx'
-export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
-export { default as TableDisableHover } from './_table_disable_hover.jsx'
-export { default as TableSingleLine } from './_table_single_line.jsx'
-export { default as TableMultiline } from './_table_multiline.jsx'
-export { default as TableOneAction } from './_table_one_action.jsx'
-export { default as TableTwoActions } from './_table_two_actions.jsx'
-export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
-export { default as TableActionMiddle } from './_table_action_middle.jsx'
-export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
-export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
-export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
-export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
-export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
-export { default as TableVerticalBorder } from './_table_vertical_border.jsx'

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

@@ -1,2 +0,0 @@
-Area where user can enter small amount of text. Commonly used in forms.<br/>
-<strong>Note:</strong> This kit does not handle form validation logic.

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

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

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

@@ -1,25 +0,0 @@
-<%= pb_rails("text_input", props: {
-  label: "Add On With Defaults",
-  add_on: { icon: "bat" }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Right-Aligned Add On With Border",
-  add_on: { icon: "user", alignment: 'right', border: true }
-}) %>
-
-
-<%= pb_rails("text_input", props: {
-  label: "Right-Aligned Add On With No Border",
-  add_on: { icon: "percent", alignment: 'right', border: false }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Left-Aligned Add On With No Border",
-  add_on: { icon: "percent", alignment: 'left', border: false }
-}) %>
-
-<%= pb_rails("text_input", props: {
-  label: "Left-Aligned Add On With Border",
-  add_on: { icon: "user", alignment: 'left', border: true }
-}) %>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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