playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("toggle", props: {
+  size: "sm",
+  checked: false
+}) %>
+
+<br>
+
+<%= pb_rails("toggle", props: {
+  size: "md",
+  checked: false
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleSize = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="toggleSmall"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleSmall"
+        />
+      </Toggle>
+
+      <br />
+
+      <Toggle
+          checked={choice}
+          size="md"
+      >
+        <input
+            name="toggleMedium"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleMedium"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleSize

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

@@ -2,13 +2,14 @@ examples:
 
   rails:
   - toggle_default: Default State
+  - toggle_size: Sizes
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
-  - toggle_options: Toggle w/ Options
 
   react:
   - toggle_default: Default State
+  - toggle_size: Sizes
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs

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

@@ -1,4 +1,5 @@
 export { default as ToggleDefault } from './_toggle_default'
+export { default as ToggleSize } from './_toggle_size'
 export { default as ToggleCustom } from './_toggle_custom'
 export { default as ToggleName } from './_toggle_name'
 export { default as ToggleCustomRadio } from './_toggle_custom_radio'

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -11,15 +11,12 @@ module Playbook
 
       partial "pb_toggle/toggle"
 
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
-
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
-                  default: "sm"
+                  default: "md"
       prop :value
 
       def classname
@@ -27,7 +24,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked)
       end
 
     private

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -1,29 +1,25 @@
-<% if object.pills %>
-  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
-<% else %>
-  <%= content_tag(:div,
+<%= content_tag(:div,
                 id: object.id,
                 data: object.data,
                 class: object.classname) do %>
-    <div class="pb_typeahead_wrapper">
-      <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-        <i class="far fa-spinner fa-spin"></i>
-      </div>
-      <%= pb_rails("text_input", props: {
-        type: "search",
-        label: object.label,
-        name: object.name,
-        value: object.value,
-        placeholder: object.placeholder
-      }) %>
-      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
-      <% end %>
+  <div class="pb_typeahead_wrapper">
+    <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
+      <i class="far fa-spinner fa-spin"></i>
     </div>
+    <%= pb_rails("text_input", props: {
+      type: "search",
+      label: object.label,
+      name: object.name,
+      value: object.value,
+      placeholder: object.placeholder
+    }) %>
+    <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+    <% end %>
+  </div>
 
-    <template data-pb-typeahead-kit-result-option>
-      <%= pb_rails("list/item") do %>
-        <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
-      <% end %>
-    </template>
-  <% end %>
-<% end %>
+  <template data-pb-typeahead-kit-result-option>
+    <%= pb_rails("list/item") do %>
+      <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
+    <% end %>
+  </template>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
-import { get } from 'lodash'
 
 import Control from './components/Control'
 import IndicatorsContainer from './components/IndicatorsContainer'
@@ -13,8 +12,6 @@ import Option from './components/Option'
 import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
-import { noop } from '../utilities/props'
-
 /**
  * @typedef {object} Props
  * @prop {boolean} async - whether Typeahead should fetch data from
@@ -25,8 +22,6 @@ import { noop } from '../utilities/props'
 type Props = {
   async?: boolean,
   label?: string,
-  loadOptions?: noop | string,
-  name?: string,
 }
 
 /**
@@ -50,27 +45,14 @@ const Typeahead = (props: Props) => {
     },
     isClearable: true,
     isSearchable: true,
-    name,
     ...props,
   }
 
-  if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
-
   const Tag = props.async ? AsyncSelect : Select
 
-  const handleOnChange = (data, { action }) => {
-    if (action === 'clear') {
-      const multiValueClearEvent = new CustomEvent('pb-typeahead-kit-result-clear')
-      document.dispatchEvent(multiValueClearEvent)
-    }
-  }
-
   return (
     <div className="pb_typeahead_kit react-select">
-      <Tag
-          onChange={handleOnChange}
-          {...selectProps}
-      />
+      <Tag {...selectProps} />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -19,18 +19,11 @@ const MultiValue = (props: Props) => {
     selectProps,
   } = props
 
-  const { imageUrl, label } = data
-
-  const handleOnMultiValueRemove = () => {
-    const multiValueRemoveEvent = new CustomEvent('pb-typeahead-kit-result-option-remove', { detail: data })
-    document.dispatchEvent(multiValueRemoveEvent)
-  }
-
   const handleOnClick = () => {
     if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(data)
-    handleOnMultiValueRemove()
     removeProps.onClick()
   }
+  const { imageUrl, label } = data
 
   return (
     <components.MultiValueContainer

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -12,29 +12,21 @@ const Option = (props: any) => {
     imageUrl,
     label,
   } = props.data
-
-  const handleOptionClicked = () => {
-    const resultSelectedEvent = new CustomEvent('pb-typeahead-kit-result-option-select', { detail: props.data })
-    document.dispatchEvent(resultSelectedEvent)
-  }
-
   return (
     <components.Option {...props}>
-      <div onClick={handleOptionClicked}>
-        <Choose>
-          <When condition={imageUrl}>
-            <User
-                align="left"
-                avatarUrl={imageUrl}
-                name={label}
-                orientation="horizontal"
-            />
-          </When>
-          <When condition={!imageUrl}>
-            {label}
-          </When>
-        </Choose>
-      </div>
+      <Choose>
+        <When condition={imageUrl}>
+          <User
+              align="left"
+              avatarUrl={imageUrl}
+              name={label}
+              orientation="horizontal"
+          />
+        </When>
+        <When condition={!imageUrl}>
+          {label}
+        </When>
+      </Choose>
     </components.Option>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -25,7 +25,7 @@
 
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+    if (!event.target.dataset.typeaheadExample) return;
 
     fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
       .then(response => response.json())

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb

@@ -18,7 +18,7 @@
 
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
+    if (!event.target.dataset.typeaheadExample2) return;
 
     const fuzzyMatch = function(string, term) {
       const ratio = 0.5;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -10,9 +10,12 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
+import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
+
 const TypeaheadWithPills = () => {
   return (
     <>
+      <TypeaheadWithPillsSummary />
       <Typeahead
           isMulti
           label="Colors"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx

@@ -0,0 +1,45 @@
+/* @flow */
+
+import React from 'react'
+import { Body, Flex, FlexItem, Icon } from '../..'
+
+const TypeaheadWithPillsAsyncSummary = () => {
+  return (
+    <>
+      <Flex
+          marginBottom="lg"
+          vertical="center"
+      >
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            <Icon
+                icon="info-circle"
+                marginRight="xs"
+            />
+          </Body>
+        </FlexItem>
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            {'If the data field '}
+            <code>{'imageUrl'}</code>
+            {' is present, '}
+            <code>{'FormPill'}</code>
+            {' will receive that field as a prop and display the image. '}
+            <br />
+            {'Additionally, you can also leverage the callback prop: '}
+            <code>{'onMultiValueClick'}</code>
+            {' to perform custom work when a '}
+            <code>{'MultiValue'}</code>
+            {' item is clicked.'}
+          </Body>
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncSummary

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -8,6 +8,8 @@ import {
   User,
 } from '../..'
 
+import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
+
 /**
  *
  * @const filterResults
@@ -63,6 +65,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
 
   return (
     <>
+      <TypeaheadWithPillsAsyncSummary />
       <If condition={users && users.length > 0}>
         <Caption
             marginBottom="xs"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx

@@ -0,0 +1,27 @@
+// @flow
+
+import React from 'react'
+import { Body, Icon } from '../..'
+
+const TypeaheadWithPillsSummary = () => {
+  return (
+    <>
+      <Body
+          color="light"
+          marginBottom="lg"
+      >
+        <Icon
+            icon="info-circle"
+            marginRight="xs"
+        />
+        {'Typeahead kit is data-driven. The minimum default fields are '}
+        <code>{'label'}</code>
+        {' and '}
+        <code>{'value'}</code>
+        {'.'}
+      </Body>
+    </>
+  )
+}
+
+export default TypeaheadWithPillsSummary

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

@@ -2,9 +2,6 @@ examples:
   rails:
     - typeahead_default: Default
     - typeahead_with_context_dark: With Context
-    - typeahead_with_pills: With Pills
-    - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
 
   react:
     - typeahead_default: Default

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -5,19 +5,12 @@ module Playbook
     class Typeahead
       include Playbook::Props
 
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
       prop :label
-      prop :load_options
       prop :name
-      prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
-
+      prop :value
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
-      prop :value
 
       partial "pb_typeahead/typeahead"
 
@@ -32,22 +25,6 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
-
-      def typeahead_with_pills_options
-        base_options = {
-          isMulti: true,
-          label: label,
-          options: options,
-          placeholder: placeholder
-        }
-
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
-
-        base_options
-      end
     end
   end
 end