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

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -5,8 +5,6 @@
 @import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
-  letter-spacing: $lspace_looser;
-  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -15,10 +13,6 @@
     text-align: right;
   }
 
-  [class^=pb_body] {
-    font-weight: $bold !important;
-  }
-
   [class^=pb_time_timezone] {
     color: $text_lt_light;
     font-weight: $bold;
@@ -28,26 +22,12 @@
     }
   }
 
-  &[class*=_md] {
-    [class^=pb_caption_kit] {
-      color: $text_lt_default;
-      letter-spacing: $lspace_tight;
-      text-transform: capitalize;
-    }
-    [class^=pb_time_timezone] {
-      color: $text_lt_light;
-      font-size: $font-large !important;
-      font-weight: $regular;
-      letter-spacing: $lspace_tight;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
     }
-  }
-
-  &.dark {
-    [class^=pb_caption_kit] {
+    .pb_time {
       color: $text_dk_default;
     }
-    [class^=pb_body_kit] {
-      color: $text_dk_light;
-    }
   }
 }

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = () => {
+const TimeAlign = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="center"
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="right"
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -1,38 +1,38 @@
 <%= pb_rails("time", props: {
   show_timezone: false,
-  time: Time.now,
+  time: Time.now
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
   time: DateTime.now,
-  timezone: "America/Chicago"
+  timezone: "America/New_York"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
   show_timezone: false,
+  time: "2012-08-02T15:49:29Z",
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
-  timezone: "America/Chicago"
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York"
 }) %>
 
- <br>
- <br>
+<br>
+<br>
 
- <%= pb_rails("time", props: {
-  time: Time.now,
-  size: "md",
+<%= pb_rails("time", props: {
   show_timezone: false,
+  size: "md",
+  time: Time.now,
 }) %>
 
 <br>
@@ -47,8 +47,8 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  size: "md",
   show_timezone: false,
+  size: "md",
   time: "2012-08-02T15:49:29Z",
 }) %>
 

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -1,45 +1,56 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = () => {
+const TimeDefault = (props) => {
   return (
     <div>
       <Time
           date={new Date().getTime()}
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date().getTime()}
           showIcon
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <br />
       <Time
           date={new Date()}
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
@@ -47,6 +58,7 @@ const TimeDefault = () => {
           showIcon
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -1,16 +1,19 @@
 import React, { Fragment } from 'react'
 import Time from '../_time.jsx'
 
-const TimeSizes = () => {
+const TimeSizes = (props) => {
   return (
     <Fragment>
       <Time
           date={new Date()}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
+          timeZone="America/New_York"
+          {...props}
       />
     </Fragment>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeStamp = () => {
+const TimeStamp = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
           size="sm"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeTimeZone = () => {
+const TimeTimezone = (props) => {
   const zones = {
     east: 'America/New_York',
     central: 'America/Chicago',
@@ -16,6 +16,7 @@ const TimeTimeZone = () => {
           date={new Date()}
           size="md"
           timeZone={zones.east}
+          {...props}
       />
 
       <br />
@@ -24,6 +25,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.central}
+          {...props}
       />
 
       <br />
@@ -32,6 +34,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.mountain}
+          {...props}
       />
 
       <br />
@@ -40,6 +43,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.west}
+          {...props}
       />
 
       <br />
@@ -48,10 +52,11 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.asia}
+          {...props}
       />
 
     </div>
   )
 }
 
-export default TimeTimeZone
+export default TimeTimezone

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: 4px;
-      margin-right: 4px;
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: 4px;
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: 4px;
+      margin-right: $space_xs/2;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: String,
+  className?: string,
   data?: object,
-  detail: String,
-  id?: String,
-  title: String,
+  detail: string,
+  id?: string,
+  title: string,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {

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

@@ -5,6 +5,7 @@ examples:
   - 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

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -11,6 +11,9 @@ module Playbook
 
       partial "pb_toggle/toggle"
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name
@@ -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
@@ -34,4 +37,4 @@ module Playbook
       end
     end
   end
-end
+end

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

@@ -3,6 +3,7 @@
 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'
@@ -12,6 +13,8 @@ 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
@@ -22,6 +25,8 @@ import ValueContainer from './components/ValueContainer'
 type Props = {
   async?: boolean,
   label?: string,
+  loadOptions?: noop | string,
+  name?: string,
 }
 
 /**
@@ -45,14 +50,27 @@ const Typeahead = (props: Props) => {
     },
     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 {...selectProps} />
+      <Tag
+          onChange={handleOnChange}
+          {...selectProps}
+      />
     </div>
   )
 }