playbook_ui 7.0.1.pre.alpha15 → 7.0.1

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

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

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

@@ -1,27 +1,24 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = (props) => {
+const TimeAlign = () => {
   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/New_York"
+  timezone: "America/Chicago"
 }) %>
 
 <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: {
-  show_icon: true,
   time: "2012-08-02T15:49:29Z",
-  timezone: "America/New_York"
+  show_icon: true,
+  timezone: "America/Chicago"
 }) %>
 
-<br>
-<br>
+ <br>
+ <br>
 
-<%= pb_rails("time", props: {
-  show_timezone: false,
-  size: "md",
+ <%= pb_rails("time", props: {
   time: Time.now,
+  size: "md",
+  show_timezone: false,
 }) %>
 
 <br>
@@ -47,8 +47,8 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  show_timezone: false,
   size: "md",
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z",
 }) %>
 

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

@@ -1,56 +1,45 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = (props) => {
+const TimeDefault = () => {
   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
@@ -58,7 +47,6 @@ const TimeDefault = (props) => {
           showIcon
           size="md"
           timeZone="America/New_York"
-          {...props}
       />
     </div>
   )

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

@@ -1,19 +1,16 @@
 import React, { Fragment } from 'react'
 import Time from '../_time.jsx'
 
-const TimeSizes = (props) => {
+const TimeSizes = () => {
   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,13 +1,12 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeStamp = (props) => {
+const TimeStamp = () => {
   return (
     <div>
       <Time
           date={new Date()}
           size="sm"
-          {...props}
       />
 
       <br />
@@ -15,7 +14,6 @@ const TimeStamp = (props) => {
       <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 = (props) => {
+const TimeTimeZone = () => {
   const zones = {
     east: 'America/New_York',
     central: 'America/Chicago',
@@ -16,7 +16,6 @@ const TimeTimezone = (props) => {
           date={new Date()}
           size="md"
           timeZone={zones.east}
-          {...props}
       />
 
       <br />
@@ -25,7 +24,6 @@ const TimeTimezone = (props) => {
       <Time
           date={new Date()}
           timeZone={zones.central}
-          {...props}
       />
 
       <br />
@@ -34,7 +32,6 @@ const TimeTimezone = (props) => {
       <Time
           date={new Date()}
           timeZone={zones.mountain}
-          {...props}
       />
 
       <br />
@@ -43,7 +40,6 @@ const TimeTimezone = (props) => {
       <Time
           date={new Date()}
           timeZone={zones.west}
-          {...props}
       />
 
       <br />
@@ -52,11 +48,10 @@ const TimeTimezone = (props) => {
       <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: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: 4px;
+      margin-right: 4px;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: 4px;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: 4px;
     }
   }
-}
+}

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

@@ -5,7 +5,6 @@ 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,9 +11,6 @@ module Playbook
 
       partial "pb_toggle/toggle"
 
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
-
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name
@@ -27,7 +24,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked)
       end
 
     private

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

@@ -1,29 +1,25 @@
-<% if object.pills %>
-  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
-<% else %>
-  <%= content_tag(:div,
+<%= 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>
-      <%= 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 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>
 
-    <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 %>
+  <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 %>

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

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