playbook_ui 7.7.0 → 7.8.0

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,39 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+
+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,21 @@
+import React from 'react'
+import { DatePicker, FormGroup, TextInput } from '../../'
+
+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,26 @@
+import React from 'react'
+import { FormGroup, TextInput } from '../../'
+
+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_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,35 @@
+import React from 'react'
+import { FormGroup, Select, TextInput } from '../../'
+
+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,42 @@
+import React, { useState } from 'react'
+import { FormGroup, SelectableCard } from '../../'
+
+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,35 @@
+import React, { useState } from 'react'
+import { FormGroup, SelectableCardIcon } from '../../'
+
+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,31 @@
+import React from 'react'
+import { Button, FormGroup, Typeahead } from '../../'
+
+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,20 @@
+examples:
+
+  rails:
+  - form_group_default: Default
+  - form_group_button: Button
+  - 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_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 FormGroupDatePicker } from './_form_group_date_picker.jsx'
+// export { default as FormGroupTypeahead } from './_form_group_typeahead.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_group/form_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFormGroup
+    class FormGroup
+      include Playbook::Props
+
+      partial "pb_form_group/form_group"
+
+      def classname
+        generate_classname("pb_form_group_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.html.erb

@@ -0,0 +1,24 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <%= pb_rails "icon_circle", props: {
+      icon: object.icon,
+      size: object.size,
+      variant: object.variant } %>
+
+      <div>
+        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+            <%= pb_rails "title", props: {
+                text: object.value_string,
+                size: object.title_size } %>
+                &nbsp;
+            <%= pb_rails "body", props: {
+                text: object.unit } %>
+        <% end %>
+            <%= pb_rails "caption", props: {
+                text: object.text } %>
+      </div>
+<% end %>