playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

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

@@ -19,11 +19,18 @@ 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,21 +12,29 @@ 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}>
-      <Choose>
-        <When condition={imageUrl}>
-          <User
-              align="left"
-              avatarUrl={imageUrl}
-              name={label}
-              orientation="horizontal"
-          />
-        </When>
-        <When condition={!imageUrl}>
-          {label}
-        </When>
-      </Choose>
+      <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>
   )
 }

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_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.typeaheadExample2) return;
+    if (!event.target.dataset || !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.html.erb

@@ -0,0 +1,25 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

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

@@ -10,12 +10,9 @@ 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.md

@@ -0,0 +1,8 @@
+Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
+
+`{ label: "Foo", value: "bar" }`
+
+#### Rails: Subscribing to JS Events
+`pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
+`pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
+`pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.

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

@@ -0,0 +1,30 @@
+<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+
+<!-- This section is an example of how to provide load_options prop for using dynamic options -->
+<%= javascript_tag defer: "defer" do %>
+  // Simple filter function, providing a list of results in the expected data format
+
+  const filterResults = function(results) {
+    return results.items.map(function(result) {
+      return {
+        label: result.login,
+        value: result.id,
+      }
+    })
+  }
+
+  /* Note: Make sure you assign this to window or a namespace within window
+  or it will not be accessible to the kit! */
+
+  window.asyncPillsPromiseOptions = function(inputValue) {
+    return new Promise(function(resolve) {
+      if (inputValue) {
+        fetch(`https://api.github.com/search/users?q=${inputValue}`)
+          .then(function(response) { return response.json() })
+          .then(function(results) { resolve(filterResults(results))})
+      } else {
+        resolve([])
+      }
+    })
+  }
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md

@@ -0,0 +1,11 @@
+#### Rails: Providing the `load_options` Promise
+
+**Additional required props: ** `async: true`, `pills: true`
+
+The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
+
+#### React: `loadOptions`
+
+**Additional required props: ** `async: true`
+
+[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.

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

@@ -0,0 +1,25 @@
+<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptionsUsers', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+
+<%= javascript_tag defer: "defer" do %>
+  const filterUserResults = function(results) {
+    return results.items.map(function(result) {
+      return {
+        imageUrl: result.avatar_url,
+        label: result.login,
+        value: result.id,
+      }
+    })
+  }
+
+  window.asyncPillsPromiseOptionsUsers = function(inputValue) {
+    return new Promise(function(resolve) {
+      if (inputValue) {
+        fetch(`https://api.github.com/search/users?q=${inputValue}`)
+          .then(function(response) { return response.json() })
+          .then(function(results) { resolve(filterUserResults(results))})
+      } else {
+        resolve([])
+      }
+    })
+  }
+<% end %>

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

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

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

@@ -0,0 +1 @@
+If the data field `imageUrl` is present, FormPill will receive that field as a prop and display the image.

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

@@ -2,6 +2,9 @@ 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,12 +5,19 @@ module Playbook
     class Typeahead
       include Playbook::Props
 
+      prop :async, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
+      prop :load_options
       prop :name
-      prop :value
+      prop :options, type: Playbook::Props::HashArray, default: []
+      prop :pills, type: Playbook::Props::Boolean,
+                    default: false
+
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
+      prop :value
 
       partial "pb_typeahead/typeahead"
 
@@ -25,6 +32,22 @@ 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

data/app/pb_kits/playbook/react_rails_kits.js

@@ -0,0 +1,6 @@
+// React-Rendered Rails Kit Exports =====
+export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
+export { default as Legend } from './pb_legend/_legend.jsx'
+export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
+export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-//=====================================
-// Base colors should not be documented.
-// Only document color use.
+/*=====================================
+Base colors should not be documented.
+Only document color use.
 
-// Colors -----------------------------
+Colors -----------------------------*/
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-// Specialty Gradient -----------------
+/* Specialty Gradient -----------------*/
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-// Interface colors -------------------
+/* Interface colors -------------------*/
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-// Main colors ------------------------
+/* Main colors ------------------------*/
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-//=====================================
+/*=====================================
 
-// Background colors ------------------
+Background colors ------------------*/
 $bg_light:            $silver;
 $bg_dark:             #0a0527;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-// Card colors ------------------
+/* Card colors ------------------*/
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-// Active colors ----------------------
+/* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff; 
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-// Hover colors -----------------------
+/* Hover colors -----------------------*/
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-// Focus colors -----------------------
+/* Focus colors -----------------------*/
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-// Border colors ----------------------
+/* Border colors ----------------------*/
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-// Shadow colors ----------------------
+/* Shadow colors ----------------------*/
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-// Text colors ------------------------
+/* Text colors ------------------------*/
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-// Data colors ------------------------
+/* Data colors ------------------------*/
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-// Status colors ----------------------
+/* Status colors ----------------------*/
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-// Link colors ------------------------
+/* Link colors ------------------------*/
 $primary_action:      $primary;
 
-// Product colors ---------------------
+/* Product colors ---------------------*/
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-// Category colors ---------------------
+/* Category colors ---------------------*/
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,7 +252,6 @@ $transparent: transparent;
 }
 
 :export {
-
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
-// CLEAN UP AND REMOVE
+/* CLEAN UP AND REMOVE */
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
 
 
-// Headings
+/* Headings */
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
 
 
 
-// Standard Font Weights
+/* Standard Font Weights */
 $bold:          600;
 $regular:       400;
 
-// Non_Standard Font Weights
+/* Non_Standard Font Weights */
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;