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

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -0,0 +1,100 @@
+@import "../../tokens/screen_sizes";
+
+$table-dark-card-bg: $bg_dark;
+
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-dark {
+      thead {
+        tr {
+          border-color: $border_dark !important;
+
+          th {
+            border-color: $border_dark !important;
+            color: $text_dk_light;
+          }
+        }
+      }
+      tbody {
+        tr {
+          border-color: $border_dark;
+          transition: none !important;
+
+          td {
+            border-color: $border_dark !important;
+            border-bottom-width: 0 !important;
+            color: $white;
+
+            &:before {
+              color: $text_lt_light !important;
+            }
+          }
+          &:first-child {
+            td {
+              border-top-width: 0 !important;
+            }
+          }
+        }
+      }
+
+      &:not(.no-hover) {
+        tbody {
+          tr {
+            @media (hover:hover) {
+              &:hover {
+                td {
+                  border-color: $border_dark !important;
+                  background: $bg_dark;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &.table-card {
+        background: $table-dark-card-bg !important;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: $screen-xs-max) {
+  [class^=pb_table] {
+    &.table-sm,
+    &.table-md,
+    &.table-lg {
+      &.table-card {
+        &.table-dark {
+          background: none !important;
+
+          tbody {
+            tr {
+              td {
+                background: $table-dark-card-bg !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-dark {
+        tbody {
+          tr {
+            td {
+              &:first-child {
+                border-top-color: $border_dark !important;
+              }
+            }
+            &:first-child {
+              td {
+                border-top-width: 1px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -0,0 +1,125 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-lg-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-md,
+    &.table-md.table-collapse-md,
+    &.table-lg.table-collapse-md {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_variables.scss

@@ -0,0 +1,26 @@
+@import "../../tokens/spacing";
+@import "../../tokens/typography";
+
+//--------- PADDING ---------//
+
+// Cell padding between cells
+$cell-gutter: $space-xs;
+
+// First & last cell padding
+$cell-pad-endcap: $space-lg;
+
+// Vertical cell padding
+$cell-pad-sm: $space-xs;
+$cell-pad-md: $space-sm;
+$cell-pad-lg: $space-lg;
+
+$cell-pad-list: (
+  table-sm: $cell-pad-sm,
+  table-md: $cell-pad-md,
+  table-lg: $cell-pad-lg
+);
+
+//--------- CONTENT ---------//
+
+$default-header-size: $font-smaller;
+$default-font-size: $font-small;

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -0,0 +1,16 @@
+[class^=pb_table] {
+  &.vertical-border {
+    td,
+    th {
+      border-right: 1px solid $border_light !important;
+    }
+
+    @media screen and (min-width: $screen-xs-min) {
+      tr:hover {
+        td:last-child {
+          border-right-color: darken($border_light, 10%) !important;
+        }
+      }
+    }
+  }
+}

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

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

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

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

@@ -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"
+}) %>