playbook_ui 7.0.1.pre.alpha10 → 7.1.0.pre.alpha1

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

@@ -0,0 +1,10 @@
+<%= pb_rails("toggle" , props: {
+  text: "Toggle with Options",
+  input_options: {
+    id: "toggle-id",
+    name: "toggle-name",
+    value: "toggle-value",
+    class: "toggle-class",
+    checked: true
+  }
+}) %>

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

@@ -2,14 +2,13 @@ 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,5 +1,4 @@
 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,12 +11,15 @@ 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: "md"
+                  default: "sm"
       prop :value
 
       def classname
@@ -24,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked)
+        check_box_tag(name, value, checked, input_options)
       end
 
     private

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

@@ -1,25 +1,29 @@
-<%= content_tag(:div,
+<% if object.pills %>
+  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% else %>
+  <%= 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 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>
-    <%= 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 %>
+    <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 %>

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

@@ -0,0 +1,78 @@
+/* @flow */
+
+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'
+import MenuList from './components/MenuList'
+import MultiValue from './components/MultiValue'
+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
+ * a remote location to populate the options
+ * @prop {string} label - the text for the optional typeahead input label
+ */
+
+type Props = {
+  async?: boolean,
+  label?: string,
+  loadOptions?: noop | string,
+  name?: string,
+}
+
+/**
+ * @constant {React.ReactComponent} Typeahead
+ * @param {Props} props - props as described at https://react-select.com/props
+ */
+
+const Typeahead = (props: Props) => {
+  const selectProps = {
+    cacheOptions: true,
+    defaultOptions: true,
+    components: {
+      Control,
+      IndicatorsContainer,
+      IndicatorSeparator: null,
+      MenuList,
+      MultiValue,
+      Option,
+      Placeholder,
+      ValueContainer,
+    },
+    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}
+      />
+    </div>
+  )
+}
+
+export default Typeahead

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

@@ -1,5 +1,7 @@
 @import "../tokens/colors";
 @import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/shadows";
 
 [class^=pb_typeahead_kit] {
   .pb_typeahead_wrapper {
@@ -17,8 +19,10 @@
   }
 
   [class^=pb_text_input_kit] {
-    .text_input_wrapper > input:first-child {
-      padding-right: $space_xl;
+    .text_input_wrapper {
+      & > input:first-child {
+        padding-right: $space_xl;
+      }
     }
   }
 
@@ -31,7 +35,7 @@
       }
     }
   }
-  
+
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -86,4 +90,17 @@
       color: $text_dk_light;
     }
   }
+
+  &.react-select {
+    .text_input {
+      display: inherit;
+      padding: 3px 4px;
+      &_indicators {
+        max-width: 70px;
+      }
+      &_value_container {
+        flex-grow: 1;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,30 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import {
+  Flex,
+  TextInput,
+} from '../..'
+
+type Props = {
+  selectProps: any,
+}
+
+const TypeaheadControl = (props: Props) => (
+  <div className="pb_typeahead_wrapper">
+    <TextInput
+        label={props.selectProps.label}
+    >
+      <Flex>
+        <components.Control
+            className="text_input"
+            {...props}
+        />
+      </Flex>
+    </TextInput>
+  </div>
+)
+
+export default TypeaheadControl

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

@@ -0,0 +1,13 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const IndicatorsContainer = (props: any) => (
+  <components.IndicatorsContainer
+      className="text_input_indicators"
+      {...props}
+  />
+)
+
+export default IndicatorsContainer

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

@@ -0,0 +1,12 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const MenuList = (props: any) => (
+  <components.MenuList {...props}>
+    {props.children}
+  </components.MenuList>
+)
+
+export default MenuList

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

@@ -0,0 +1,58 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import { FormPill } from '../../'
+
+type Props = {
+  data: object,
+  multiValueTemplate: any,
+  removeProps: any,
+  selectProps: any,
+}
+
+const MultiValue = (props: Props) => {
+  const {
+    data,
+    removeProps,
+    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()
+  }
+
+  return (
+    <components.MultiValueContainer
+        className="text_input_multivalue_container"
+        {...props}
+    >
+      <If condition={imageUrl}>
+        <FormPill
+            avatarUrl={imageUrl}
+            marginRight="xs"
+            name={label}
+            onClick={handleOnClick}
+        />
+        <Else />
+        <FormPill
+            marginRight="xs"
+            onClick={handleOnClick}
+            text={label}
+        />
+      </If>
+    </components.MultiValueContainer>
+  )
+}
+
+export default MultiValue

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

@@ -0,0 +1,42 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import {
+  User,
+} from '../../'
+
+const Option = (props: any) => {
+  const {
+    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>
+    </components.Option>
+  )
+}
+
+export default Option

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

@@ -0,0 +1,13 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const Placeholder = (props: any) => (
+  <components.IndicatorsContainer
+      className="placeholder"
+      {...props}
+  />
+)
+
+export default Placeholder

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

@@ -0,0 +1,13 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const ValueContainer = (props: Props) => (
+  <components.ValueContainer
+      className="text_input_value_container"
+      {...props}
+  />
+)
+
+export default ValueContainer

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.typeaheadExample) return;
+    if (!event.target.dataset || !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_default.jsx

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDefault = () => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+    />
+  )
+}
+
+export default TypeaheadDefault