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

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -0,0 +1,93 @@
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true } %>
+  <%= form.email_field :example_email_field, props: { label: true } %>
+  <%= form.number_field :example_number_field, props: { label: true } %>
+  <%= form.search_field :example_search_field, props: { label: true } %>
+  <%= form.password_field :example_password_field, props: { label: true } %>
+  <%= form.url_field :example_url_field, props: { label: true } %>
+  <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= form.check_box :example_checkbox,
+    data: { field1: "value1", field2: "value2" },
+    props: { text: "Example Checkbox", label: true },
+    checked_value: "yes",
+    unchecked_value: "no",
+    id: "checkbox-id",
+    name: "checkbox-name",
+    class: "checkbox-class"
+  %>
+  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample1) return;
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -0,0 +1,34 @@
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
+  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md

@@ -0,0 +1 @@
+Validation displays an error with red border and red text below indicating that the user must fill out the field.

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

@@ -0,0 +1,5 @@
+examples:
+
+  rails:
+  - form_form_with: Default
+  - form_form_with_validate: Default + Validation

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import Button from '../../pb_button/_button'
+import FormGroup from '../../pb_form_group/_form_group'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FormGroupButton = (props) => (
+  <div>
+    <div>
+      <FormGroup>
+        <TextInput
+            label="With Label"
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+
+export default FormGroupButton

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb

@@ -0,0 +1,6 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name" }) %>
+    <%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import FormGroup from '../_form_group'
+
+import DatePicker from '../../pb_date_picker/_date_picker'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FormGroupDatePicker = (props) => (
+  <div>
+    <FormGroup>
+      <TextInput
+          label="Event"
+          placeholder="Event Name"
+          {...props}
+      />
+      <DatePicker
+          label="event date"
+          pickerId="date-picker-default"
+          {...props}
+      />
+    </FormGroup>
+  </div>
+)
+
+export default FormGroupDatePicker

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb

@@ -0,0 +1,7 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import FormGroup from '../_form_group'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FormGroupDefault = (props) => (
+  <div>
+    <FormGroup>
+      <TextInput
+          label="First Name"
+          placeholder="Enter First Name"
+          {...props}
+      />
+      <TextInput
+          label="Middle Intial"
+          placeholder="Enter Middle Initial"
+          {...props}
+      />
+      <TextInput
+          label="Last Name"
+          placeholder="Enter Last Name"
+          {...props}
+      />
+    </FormGroup>
+  </div>
+)
+
+export default FormGroupDefault

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import FormGroup from '../_form_group'
+import TextInput from '../../pb_text_input/_text_input'
+import Button from '../../pb_button/_button'
+
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+
+export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md

@@ -0,0 +1 @@
+Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -0,0 +1,19 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("select", props: {
+      blank_selection: "Genre",
+      options: [
+        { value: "Country" },
+        { value: "Pop" },
+        { value: "Rock" },
+        { value: "Hip-Hop/Rap" },
+        { value: "Classical" },
+        { value: "Gospel" },
+        { value: "Alternative" },
+        { value: "Indie" },
+        { value: "Other" },
+      ]
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import FormGroup from '../_form_group'
+
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+
+const FormGroupSelect = (props) => {
+  const options = [
+    { value: 'Country' },
+    { value: 'Pop' },
+    { value: 'Rock' },
+    { value: 'Hip-Hop/Rap' },
+    { value: 'Classical' },
+    { value: 'Gospel' },
+    { value: 'Alternative' },
+    { value: 'Indie' },
+    { value: 'Other' },
+  ]
+
+  return (
+    <div>
+      <FormGroup>
+        <TextInput
+            label="Artist"
+            placeholder="Enter Artist Name"
+            {...props}
+        />
+        <Select
+            blankSelection="Genre"
+            options={options}
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelect

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb

@@ -0,0 +1,21 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("selectable_card", props: {
+        input_id: "cat1",
+        name: "animal",
+        value: "cat",
+        multi: false
+      }) do %>
+        Cat
+      <% end %>
+
+    <%= pb_rails("selectable_card", props: {
+      input_id: "dog1",
+      name: "animal",
+      value: "dog",
+      multi: false
+    }) do %>
+      Dog
+    <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+
+import FormGroup from '../../pb_form_group/_form_group'
+import SelectableCard from '../../pb_selectable_card/_selectable_card'
+
+const FormGroupSelectableCard = (props) => {
+  const [value, setValue] = useState('')
+
+  const handleSelect = (event) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <div>
+      <FormGroup>
+        <SelectableCard
+            checked={value === 'cat'}
+            inputId="cat1"
+            multi={false}
+            name="animal"
+            onChange={handleSelect}
+            value="cat"
+            {...props}
+        >
+          {'Cat'}
+        </SelectableCard>
+
+        <SelectableCard
+            checked={value === 'dog'}
+            inputId="dog1"
+            multi={false}
+            name="animal"
+            onChange={handleSelect}
+            value="dog"
+            {...props}
+        >
+          {'Dog'}
+        </SelectableCard>
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelectableCard

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.html.erb

@@ -0,0 +1,19 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("selectable_card_icon", props: {
+      icon: "basketball-ball",
+      title_text: "Basketball",
+      input_id: 7,
+      multi: false,
+      name: "select",
+    }) %>
+
+    <%= pb_rails("selectable_card_icon", props: {
+      icon: "football-ball",
+      title_text: "Football",
+      input_id: 8,
+      multi: false,
+      name: "select",
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import FormGroup from '../_form_group'
+import SelectableCardIcon from '../../pb_selectable_card_icon/_selectable_card_icon'
+
+const FormGroupSelectableCardIcon = (props) => {
+  const [selectedFormat, toggleFormat] = useState(null)
+
+  return (
+    <div>
+      <FormGroup>
+        <SelectableCardIcon
+            checked={selectedFormat === 'basketball'}
+            icon="basketball-ball"
+            inputId={7}
+            name="select"
+            onChange={() => toggleFormat('basketball')}
+            titleText="Basketball"
+            value="basketball"
+            {...props}
+        />
+        <SelectableCardIcon
+            checked={selectedFormat === 'football'}
+            icon="football-ball"
+            inputId={8}
+            name="select"
+            onChange={() => toggleFormat('football')}
+            titleText="Football"
+            value="football"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupSelectableCardIcon

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb

@@ -0,0 +1,42 @@
+<div>
+  <%= pb_rails("form_group") do %>
+    <%
+      options = [
+        { label: 'Windows', value: 'windows' },
+        { label: 'Roof', value: 'roof' },
+        { label: 'Siding', value: 'siding' },
+        { label: 'Doors', value: 'doors' },
+      ]
+    %>
+    <%= pb_rails("typeahead", props: {
+      default_options: [options.first],
+      id: "form-group-typeahead-example",
+      label: "Products",
+      options: options,
+    }) %>
+    <%= pb_rails("button", props: {
+      id: "form-group-button",
+      text: "Add",
+      variant: "secondary"
+    }) %>
+  <% end %>
+</div>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#form-group-button').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-form-group-kit-form-group-typeahead:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import FormGroup from '../_form_group'
+
+import Button from '../../pb_button/_button'
+import Typeahead from '../../pb_typeahead/_typeahead'
+
+const FormGroupTypeahead = (props) => {
+  const options = [
+    { label: 'Windows', value: 'windows' },
+    { label: 'Roof', value: 'roof' },
+    { label: 'Siding', value: 'siding' },
+    { label: 'Doors', value: 'doors' },
+  ]
+
+  return (
+    <div>
+      <FormGroup>
+        <Typeahead
+            label="Products"
+            options={options}
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Add"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  )
+}
+
+export default FormGroupTypeahead

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

@@ -0,0 +1,22 @@
+examples:
+
+  rails:
+  - form_group_default: Default
+  - form_group_button: Button
+  - form_group_full_width: Full Width
+  - form_group_date_picker: Date Picker
+  # - form_group_typeahead: Typeahead
+  - form_group_select: Select
+  - form_group_selectable_card: Selectable Card
+  - form_group_selectable_card_icon: Selectable Card Icon
+
+
+  react:
+  - form_group_default: Default
+  - form_group_button: Button
+  - form_group_full_width: Full Width
+  - form_group_date_picker: Date Picker
+  # - form_group_typeahead: Typeahead
+  - form_group_select: Select
+  - form_group_selectable_card: Selectable Card
+  - form_group_selectable_card_icon: Selectable Card Icon

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

@@ -0,0 +1,7 @@
+export { default as FormGroupDefault } from './_form_group_default.jsx'
+export { default as FormGroupButton } from './_form_group_button.jsx'
+export { default as FormGroupFullWidth } from './_form_group_full_width.jsx'
+export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
+export { default as FormGroupSelect } from './_form_group_select.jsx'
+export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
+export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillExample = (props) => {
+  return (
+    <div>
+      <FormPill
+          onClick={() => alert('Click!')}
+          text="THIS IS A TAG"
+          textTransform="lowercase"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FormPillExample

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md

@@ -0,0 +1 @@
+By default `textTransform = "none"`.  If there is a need to enforce `lowercase`, please pass the `textTransform = "lowercase` prop.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   size: "small",
+}) %>
+
+<br />
+<br />
+
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   size: "small",
+}) %>