playbook_ui 7.11.1 → 7.14.0

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
 import { Timestamp } from '../../'
 
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
+const TimestampDefault = (props) => (
+  <Timestamp
+      text="20 seconds ago"
+      {...props}
+  />
 )
 
 export default TimestampDefault

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx

@@ -1,30 +1,37 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleLight = () => {
+const TitleLight = (props) => {
   return (
     <div>
-      <Title text="Default Title" />
+      <Title
+          text="Default Title"
+          {...props}
+      />
       <br />
       <Title
           size={4}
           tag="h4"
           text="Title 4"
+          {...props}
       />
       <Title
           size={3}
           tag="h3"
           text="Title 3"
+          {...props}
       />
       <Title
           size={2}
           tag="h2"
           text="Title 2"
+          {...props}
       />
       <Title
           size={1}
           tag="h1"
           text="Title 1"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Title } from '../../'
 
-const TitleVariants = () => {
+const TitleVariants = (props) => {
   return (
     <div>
       <Title
@@ -9,6 +9,7 @@ const TitleVariants = () => {
           tag="h4"
           text="Title 4 (link)"
           variant="link"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountAlign = () => {
+const TitleCountAlign = (props) => {
   return (
     <>
       <TitleCount
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountAlign = () => {
           align="center"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountAlign = () => {
           align="right"
           count={527}
           title="Remodeling Consultants"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { TitleCount } from '../../'
 
-const TitleCountDefault = () => {
+const TitleCountDefault = (props) => {
   return (
     <>
       <TitleCount
           count={35.78}
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const TitleCountDefault = () => {
           count={7399}
           size="lg"
           title="Appointments"
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const TitleCountDefault = () => {
           count={-379503.372}
           size="lg"
           title="Appointments"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { TitleDetail } from '../../'
 
-const TitleDetailDefault = () => (
+const TitleDetailDefault = (props) => (
   <div>
     <TitleDetail
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="center"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
     <TitleDetail
         align="right"
         detail="Commits data and history"
         title="Email Notifications"
+        {...props}
     />
 
   </div>

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

@@ -26,4 +26,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

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

@@ -4,6 +4,7 @@ import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import { get } from 'lodash'
+import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
@@ -25,6 +26,7 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
+  dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
   getOptionLabel?: () => any,
@@ -81,9 +83,12 @@ const Typeahead = (props: Props) => {
     }
   }
 
+  const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
+
   return (
-    <div className="pb_typeahead_kit react-select">
+    <div className={classes}>
       <Tag
+          classNamePrefix="typeahead-kit-select"
           onChange={handleOnChange}
           {...selectProps}
       />

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

@@ -85,13 +85,49 @@
     }
   }
 
-  .dark {
+  &[class*=dark] {
     .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
       color: $text_dk_light;
     }
+    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+      display: inherit !important;
+    }
+    .typeahead-kit-select__menu {
+      background-color: $bg_dark;
+      color: $white;
+    }
+    .typeahead-kit-select__option:hover {
+      background-color: tint($focus_input_dark, 5%);
+    }
+    .typeahead-kit-select__input {
+      color: white;
+      input:focus {
+        box-shadow: none;
+      }
+    }
+    .typeahead-kit-select__single-value{
+      color: white;
+    }
+    .typeahead-kit-select__option--is-focused {
+      background-color: tint($focus_input_dark, 5%);
+    }
+  
+    [class^=pb_list_kit] {
+      background-color: $bg_dark;
+    }
+    .pb_item_kit {
+      button {
+        color: white !important;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: tint($focus_input_dark, 5%);
+        }
+      }
+    }
   }
 
-  &.react-select {
+  &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
       padding: 3px 4px;
@@ -100,7 +136,16 @@
       }
       &_value_container {
         flex-grow: 1;
+        position: relative;
       }
     }
+    .placeholder {
+      position: absolute;
+      margin-right: 2px;
+      margin-left: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      box-sizing: border-box;
+    }
   }
 }

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

@@ -10,11 +10,12 @@ const options = [
   { label: 'Blue', value: '#0000FF' },
 ]
 
-const TypeaheadDefault = () => {
+const TypeaheadDefault = (props) => {
   return (
     <Typeahead
         label="Colors"
         options={options}
+        {...props}
     />
   )
 }

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

@@ -10,7 +10,7 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
 
-const TypeaheadWithPills = () => {
+const TypeaheadWithPills = (props) => {
   return (
     <>
       <Typeahead
@@ -18,6 +18,7 @@ const TypeaheadWithPills = () => {
           label="Colors"
           options={options}
           placeholder=""
+          {...props}
       />
     </>
   )

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

@@ -45,9 +45,20 @@ const promiseOptions = (inputValue) =>
     }
   })
 
-const TypeaheadWithPillsAsync = () => {
+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 (
     <>
@@ -55,6 +66,7 @@ const TypeaheadWithPillsAsync = () => {
         <Caption
             marginBottom="xs"
             text="State (Users)"
+            {...props}
         />
         <For
             each="user"
@@ -66,6 +78,7 @@ const TypeaheadWithPillsAsync = () => {
               marginBottom="md"
               name={user.label}
               orientation="horizontal"
+              {...props}
           />
         </For>
       </If>
@@ -78,6 +91,8 @@ const TypeaheadWithPillsAsync = () => {
           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