playbook_ui 7.13.0.pre.alpha1 → 7.16.0

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

@@ -15,6 +15,7 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
+        dark={props.selectProps.dark}
         label={props.selectProps.label}
     >
       <Flex>

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

@@ -23,8 +23,6 @@ const MultiValue = (props: Props) => {
 
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
 
-  const handleOnClick = removeProps.onClick
-
   return (
     <components.MultiValueContainer
         className="text_input_multivalue_container"
@@ -33,14 +31,14 @@ const MultiValue = (props: Props) => {
       <If condition={imageUrl}>
         <FormPill
             avatarUrl={imageUrl}
+            closeProps={removeProps}
             marginRight="xs"
             name={label}
-            onClick={handleOnClick}
         />
         <Else />
         <FormPill
+            closeProps={removeProps}
             marginRight="xs"
-            onClick={handleOnClick}
             text={label}
         />
       </If>

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

@@ -11,22 +11,27 @@ const Option = (props: any) => {
   const {
     imageUrl,
   } = props.data
+  const { valueComponent } = props.selectProps
 
   return (
     <components.Option {...props}>
       <div>
         <Choose>
-          <When condition={imageUrl}>
+          <When condition={!valueComponent && imageUrl}>
             <User
                 align="left"
                 avatarUrl={imageUrl}
+                dark={props.selectProps.dark}
                 name={props.label}
                 orientation="horizontal"
             />
           </When>
-          <When condition={!imageUrl}>
-            {props.label}
+          <When condition={valueComponent}>
+            { valueComponent(props.data) }
           </When>
+          <Otherwise>
+            {props.label}
+          </Otherwise>
         </Choose>
       </div>
     </components.Option>

data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_with_context_dark.html.erb → _typeahead_with_context.html.erb}

@@ -1,7 +1,6 @@
 <%= pb_rails("select", props: {
   label: "Colors",
   name: "foo",
-  dark: true,
   data: { context_select: true },
   options: [
     { value: "red", value_text: "Red" },
@@ -12,11 +11,20 @@
     { value: "purple", value_text: "Purple" },
   ]
   }) %>
-<%= pb_rails("typeahead", props: { label: "Crayola Crayons", dark: true, name: :foo, data: { typeahead_example2: true, search_context_value_selector: "[data-context-select] select" } }) %>
+
+  <%= pb_rails("typeahead", props: {
+  label: "Crayola Crayons",
+  name: :foo,
+  data: {
+    typeahead_example2: true,
+    search_context_value_selector: "[data-context-select] select"
+    }
+  }) %>
 
 <br><br><br>
 
 <%= javascript_tag defer: "defer" do %>
+
   document.addEventListener("pb-typeahead-kit-search", function(event) {
     if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
 

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

@@ -28,4 +28,4 @@
   document.querySelector('#clear-pills').addEventListener('click', function() {
     document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
   })
-<% end %>
+<% end %>

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

@@ -47,7 +47,18 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(value)
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+  const formatUsers = (users) => {
+    const results = () => (users.map((user) => {
+      if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
+        return ({ label: user.name, value: user.id })
+      } else {
+        return user
+      }
+    }))
+    return results()
+  }
 
   return (
     <>
@@ -80,6 +91,7 @@ const TypeaheadWithPillsAsync = (props) => {
           loadOptions={promiseOptions}
           onChange={handleOnChange}
           placeholder="type the name of a Github user"
+          value={formatValue(users)}
           {...props}
       />
     </>

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

@@ -0,0 +1,111 @@
+/* @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
+ */
+
+type UserProps = {
+  imageUrl?: String,
+  label?: String,
+  territory?: String,
+  type?: String,
+}
+
+const filterResults = (results) =>
+  results.items.map((result) => {
+    return {
+      imageUrl: result.avatar_url, //add the custom field
+      label: result.login,
+      value: result.id,
+      territory: 'PHL',
+      type: result.type,
+    }
+  })
+
+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 TypeaheadWithPillsAsyncCustomOptions = (props) => {
+  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)"
+            {...props}
+        />
+        <For
+            each="user"
+            of={users}
+        >
+          <User
+              align="left"
+              avatar
+              avatarUrl={user.imageUrl}
+              key={user.value}
+              marginBottom="md"
+              name={user.label}
+              orientation="horizontal"
+              {...props}
+          />
+        </For>
+      </If>
+      <Typeahead
+          async
+          isMulti
+          label="Github Users"
+          loadOptions={promiseOptions}
+          onChange={handleOnChange}
+          onMultiValueClick={handleOnMultiValueClick}
+          placeholder="type the name of a Github user"
+          valueComponent={(props: UserProps) => (
+            <User
+                avatar
+                avatarUrl={props.imageUrl}
+                name={props.label}
+                territory={props.territory}
+                title={props.type}
+            />
+          )}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPillsAsyncCustomOptions

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

@@ -0,0 +1 @@
+Use `valueComponent` props to pass your desire custom options. `valueComponent` will be displayed if present. 

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

@@ -22,4 +22,4 @@
       }
     })
   }
-<% end %>
+<% end %>

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

@@ -75,6 +75,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
         >
           <User
               align="left"
+              avatar
               avatarUrl={user.imageUrl}
               key={user.value}
               marginBottom="md"

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

@@ -1,7 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
-    - typeahead_with_context_dark: With Context
+    - typeahead_with_context: 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)
@@ -10,4 +10,5 @@ examples:
     - 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)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -2,3 +2,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'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options'

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

@@ -39,12 +39,13 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          dark: dark,
           defaultValue: default_options,
           id: id,
           isMulti: true,
           label: label,
           options: options,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
 
         base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?

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

@@ -1,3 +1,2 @@
 export { default as UserBadgeDefault } from './_user_badge_default.jsx'
 export { default as UserBadgeSize } from './_user_badge_size.jsx'
-export { default as UserBadgeSizeDark } from './_user_badge_size_dark.jsx'

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

@@ -9,14 +9,28 @@ $border_rad_heavy:        5px;
 $border_rad_heavier:      6px;
 $border_rad_heaviest:     7px;
 $border_rad_mega:         1000px;
+$border_radius_xs:        4px;
+$border_radius_sm:        4px;
+$border_radius_md:        6px;
+$border_radius_lg:        8px;
+$border_radius_xl:        16px;
+$border_radius_rounded:   1000px;
+$border_radius_none:      0;
 $border_radius: (
-  lightest: $border_rad_lightest,
-  lighter: $border_rad_lighter,
-  light: $border_rad_light,
-  normal: $border_rad_normal,
-  heavy: $border_rad_heavy,
-  heavier: $border_rad_heavier,
-  heaviest: $border_rad_heaviest
+  lightest:              $border_rad_lightest,
+  lighter:               $border_rad_lighter,
+  light:                 $border_rad_light,
+  normal:                $border_rad_normal,
+  heavy:                 $border_rad_heavy,
+  heavier:               $border_rad_heavier,
+  heaviest:              $border_rad_heaviest,
+  border_radius_xs:      $border_radius_xs,
+  border_radius_sm:      $border_radius_sm,
+  border_radius_md:      $border_radius_md,
+  border_radius_lg:      $border_radius_lg,
+  border_radius_xl:      $border_radius_xl,
+  border_radius_none:    $border_radius_none,
+  border_radius_rounded: $border_radius_rounded
 );
 
 

data/app/pb_kits/playbook/utilities/_max_width.scss

@@ -0,0 +1,15 @@
+.max_width_sm {
+  max-width: 540px;
+}
+
+.max_width_md {
+  max-width: 720px;
+}
+
+.max_width_lg {
+  max-width: 960px;
+}
+
+.max_width_xl {
+  max-width: 1140px;
+}

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -1,28 +1,28 @@
 @import "../tokens/spacing";
 
-$space_classes: ( 
-	xs: $space_xs, 
-	sm: $space_sm, 
-	md: $space_md, 
-	lg: $space_lg, 
-	xl: $space_xl, 
+$space_classes: (
+	xs: $space_xs,
+	sm: $space_sm,
+	md: $space_md,
+	lg: $space_lg,
+	xl: $space_xl,
 	none: 0
 );
 
-$positions: ( 
-	m: "margin", 
-	mr: "margin-right", 
-	ml: "margin-left", 
-	mt: "margin-top", 
-	mb: "margin-bottom", 
-	mx: ("margin-left", "margin-right"), 
+$positions: (
+	m: "margin",
+	mr: "margin-right",
+	ml: "margin-left",
+	mt: "margin-top",
+	mb: "margin-bottom",
+	mx: ("margin-left", "margin-right"),
 	my: ("margin-top", "margin-bottom"),
-	p: "padding", 
-	pr: "padding-right", 
-	pl: "padding-left", 
-	pt: "padding-top", 
-	pb: "padding-bottom", 
-	px: ("padding-left", "padding-right"), 
+	p: "padding",
+	pr: "padding-right",
+	pl: "padding-left",
+	pt: "padding-top",
+	pb: "padding-bottom",
+	px: ("padding-left", "padding-right"),
 	py: ("padding-top", "padding-bottom")
 );
 
@@ -39,4 +39,4 @@ $positions: (
 			}
 		}
 	}
-}
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -39,10 +39,16 @@ const darkProps = ({ dark }) => {
   return css
 }
 
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth  ? `max_width_${maxWidth } ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/app/pb_kits/playbook/vendor.js

@@ -12,9 +12,6 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
 
-import PbCollapsible from './pb_collapsible'
-PbCollapsible.start()
-
 import PbPopover from './pb_popover'
 PbPopover.start()
 
@@ -30,6 +27,9 @@ PbTypeahead.start()
 import PbTable from './pb_table'
 PbTable.start()
 
+import PbTextarea from './pb_textarea'
+PbTextarea.start()
+
 import 'flatpickr'
 
 import 'trix'