playbook_ui 7.0.1.pre.alpha10 → 7.1.0

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

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Windows', value: '#FFA500' },
+  { label: 'Siding', value: '#FF0000' },
+  { label: 'Doors', value: '#00FF00' },
+  { label: 'Roofs', value: '#0000FF' },
+]
+
+const TypeaheadWithPills = () => {
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Colors"
+          options={options}
+          placeholder=""
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPills

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.jsx

@@ -0,0 +1,84 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+ *
+ * @const promiseOptions
+ * @ignore
+ * @returns {Promise} - fetch API data results from Typeahead input text
+ * @see - https://react-select.com/home#async
+ * @summary - for doc example purposes only
+ */
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsync = () => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(value)
+
+  return (
+    <>
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          placeholder="type the name of a Github user"
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsync

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

@@ -0,0 +1,98 @@
+/* @flow */
+
+import React, { useState } from 'react'
+
+import {
+  Caption,
+  Typeahead,
+  User,
+} from '../..'
+
+/**
+ *
+ * @const filterResults
+ * @ignore
+ * @returns {[Object]} - a custom mapping of objects, minimally containing
+ * `value` and `label` among other possible fields
+ * @summary - for doc example purposes only
+ */
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      imageUrl: result.avatar_url, //add the custom field
+      label: result.login,
+      value: result.id,
+    }
+  })
+
+/**
+ *
+ * @const promiseOptions
+ * @ignore
+ * @returns {Promise} - fetch API data results from Typeahead input text
+ * @see - https://react-select.com/home#async
+ * @summary - for doc example purposes only
+ */
+
+const promiseOptions = (inputValue) =>
+  new Promise((resolve) => {
+    if (inputValue) {
+      fetch(`https://api.github.com/search/users?q=${inputValue}`)
+        .then((response) => response.json())
+        .then((results) => resolve(filterResults(results)))
+    } else {
+      resolve([])
+    }
+  })
+
+const TypeaheadWithPillsAsyncUsers = () => {
+  const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(value)
+
+  /**
+   *
+   * @const handleOnMultiValueClick {function} - a custom callback for the MultiValue click
+   * @ignore
+   * @returns {null}
+   * @summary - for doc example purposes only
+   */
+  const handleOnMultiValueClick = (value) => {
+    alert(`You removed the user: "${value.label}"`)
+  }
+
+  return (
+    <>
+      <If condition={users && users.length > 0}>
+        <Caption
+            marginBottom="xs"
+            text="State (Users)"
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          onMultiValueClick={handleOnMultiValueClick}
+          placeholder="type the name of a Github user"
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncUsers

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

@@ -1,4 +1,13 @@
 examples:
   rails:
-  - typeahead_default: Default
-  - typeahead_with_context_dark: With Context
+    - 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
+    - typeahead_with_pills: With Pills
+    - typeahead_with_pills_async: With Pills (Async Data)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)

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

@@ -0,0 +1,4 @@
+export { default as TypeaheadDefault } from './_typeahead_default'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'

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/pb_user_badge/_user_badge.jsx

@@ -26,8 +26,11 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
-    className)
+  const classes = classnames(
+    buildCss('pb_user_badge_kit', size),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -33,7 +33,7 @@ const mapColors = (array) => {
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
 const alignBlockElement = (event) => {
-  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
   const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
   if (itemToMove !== null) {
     itemToMove.style.height = `${event.target.chartHeight}px`

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;