playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

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

@@ -1,11 +1,15 @@
 examples:
 
   rails:
-  - time_default: Sizes
+  - time_default: Default
+  - time_sizes: Sizes
   - time_timestamp: Timestamp Values
+  - time_timezone: Handling Timezones
+  - time_align: Alignment
 
   react:
-  - time_default: Sizes
+  - time_default: Default
+  - time_sizes: Sizes
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment

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

@@ -1,4 +1,5 @@
 export { default as TimeDefault } from './_time_default.jsx'
+export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'

data/app/pb_kits/playbook/pb_time/time.rb

@@ -9,12 +9,24 @@ module Playbook
 
       prop :time, required: true
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg sm xs],
+                  values: %w[xs sm md lg],
                   default: "sm"
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
       prop :timezone, default: "America/New_York"
+      prop :show_icon, type: Playbook::Props::Boolean,
+                       default: false
+      prop :show_timezone, type: Playbook::Props::Boolean,
+                           default: true
 
       def classname
-        generate_classname("pb_time_kit", size)
+        # convert deprecated prop values
+        mutated_size = size
+        mutated_size = "sm" if mutated_size == "xs"
+        mutated_size = "md" if mutated_size == "lg"
+
+        generate_classname("pb_time_kit", align, mutated_size)
       end
 
       def format_time_string

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

@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   return (
     <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, className, globalProps(props))}
+        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
     >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -26,11 +26,11 @@ type TimeStackedProps = {
 const TimeStacked = (props: TimeStackedProps) => {
   const { className, dark = false, date, tag = 'body' } = props
   const classes = classnames(
-    className,
     buildCss('pb_time_stacked_kit', {
-      dark: dark,
+      dark,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -24,7 +24,7 @@ const Timestamp = (props: TimestampProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(pbCss, globalProps(props), className)}
         id={id}
     >
       <Caption

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -32,7 +32,11 @@ const Title = (props: TitleProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, variant), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_title_kit', size, variant),
+    globalProps(props),
+    className
+  )
   const Tag = `${tag}`
 
   return (

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -34,7 +34,11 @@ const TitleCount = (props: TitleCountProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = classnames(buildCss('pb_title_count_kit', align, size), className, globalProps(props))
+  const css = classnames(
+    buildCss('pb_title_count_kit', align, size),
+    globalProps(props),
+    className
+  )
 
   const formatCount = count.toLocaleString()
 

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

@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(pbCss, globalProps(props), className)}
         id={id}
     >
       <Title

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -34,7 +34,7 @@ const Toggle = ({
   id,
   name,
   onChange = () => {},
-  size = 'md',
+  size = 'sm',
   value,
   ...props
 }: Props) => {
@@ -47,13 +47,13 @@ const Toggle = ({
         on: checked,
         off: !checked,
       }
-    ), className)
+    ))
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props))}
+        className={classnames(css, globalProps(props), className)}
         id={id}
     >
       <label className="pb_toggle_wrapper">

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -2,55 +2,53 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
-$transition: .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$toggle_sizes: (
-  "sm": 50px,
-  "md": 60px,
-);
+$transition: .2s ease-in-out;
 
 [class^=pb_toggle_kit] {
   position: relative;
+  $width: 44px;
+  $height: $width/2;
+  $border_success: 3px solid $color_checkbox_success;
+  $border_default: 3px solid $color_checkbox_default;
 
-  @each $name, $size in $toggle_sizes {
-    &[class*=_#{$name}] {
 
-      $width: $size;
-      $height: $width/2;
-
-      .pb_toggle_wrapper {
-        .pb_toggle_control {
-          cursor: pointer;
-          transition: $transition;
-          width: $width;
-          height: $height;
-          display: block;
-          border-radius: $height;
-          border: 3px solid $color_checkbox_default;
-          background-color: $color_checkbox_default;
-          position: relative;
-          box-sizing: content-box;
-          &:after {
-            transition: $transition;
-            content: "";
-            width: $width/2;
-            height: $height;
-            display: block;
-            background-color: $white;
-            border-radius: 50%;
-            position: absolute;
-            top: 0;
-            left: 0;
-          }
+  .pb_toggle_wrapper {
+    .pb_toggle_control {
+      cursor: pointer;
+      transition: $transition;
+      width: $width;
+      height: $height;
+      display: block;
+      border-radius: $height;
+      border: $border_default;
+      position: relative;
+      box-sizing: content-box;
+      &:after {
+        transition: $transition;
+        content: "";
+        width: $width/2 - 4px;
+        height: $height - 4px;
+        background-color: $color_checkbox_default;
+        border-radius: 50%;
+        position: absolute;
+        top: 2px;
+        left: 2px;
+      }
+      &:hover {
+        border: $border_success;
+        &:after{
+          background-color: $color_checkbox_success;
         }
-        input {
-          display: none;
-          &:checked + .pb_toggle_control {
-            border-color: $color_checkbox_success;
-            background-color: $color_checkbox_success;
-            &:after{
-              left: $width/2;
-            }
-          }
+      }
+    }
+    input {
+      display: none;
+      &:checked + .pb_toggle_control {
+        border: $border_success;
+        background-color: $color_checkbox_success;
+        &:after{
+          left: $width/2 + 2px;
+          background-color: $white;
         }
       }
     }

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

@@ -2,14 +2,12 @@ examples:
 
   rails:
   - toggle_default: Default State
-  - toggle_size: Sizes
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
   react:
   - toggle_default: Default State
-  - toggle_size: Sizes
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs

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

@@ -1,5 +1,4 @@
 export { default as ToggleDefault } from './_toggle_default'
-export { default as ToggleSize } from './_toggle_size'
 export { default as ToggleCustom } from './_toggle_custom'
 export { default as ToggleName } from './_toggle_name'
 export { default as ToggleCustomRadio } from './_toggle_custom_radio'

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

@@ -16,7 +16,7 @@ module Playbook
       prop :name
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
-                  default: "md"
+                  default: "sm"
       prop :value
 
       def classname
@@ -34,4 +34,4 @@ module Playbook
       end
     end
   end
-end
+end

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

@@ -0,0 +1,60 @@
+/* @flow */
+
+import React from 'react'
+import Select from 'react-select'
+import AsyncSelect from 'react-select/async'
+
+import Control from './components/Control'
+import IndicatorsContainer from './components/IndicatorsContainer'
+import MenuList from './components/MenuList'
+import MultiValue from './components/MultiValue'
+import Option from './components/Option'
+import Placeholder from './components/Placeholder'
+import ValueContainer from './components/ValueContainer'
+
+/**
+ * @typedef {object} Props
+ * @prop {boolean} async - whether Typeahead should fetch data from
+ * a remote location to populate the options
+ * @prop {string} label - the text for the optional typeahead input label
+ */
+
+type Props = {
+  async?: boolean,
+  label?: string,
+}
+
+/**
+ * @constant {React.ReactComponent} Typeahead
+ * @param {Props} props - props as described at https://react-select.com/props
+ */
+
+const Typeahead = (props: Props) => {
+  const selectProps = {
+    cacheOptions: true,
+    defaultOptions: true,
+    components: {
+      Control,
+      IndicatorsContainer,
+      IndicatorSeparator: null,
+      MenuList,
+      MultiValue,
+      Option,
+      Placeholder,
+      ValueContainer,
+    },
+    isClearable: true,
+    isSearchable: true,
+    ...props,
+  }
+
+  const Tag = props.async ? AsyncSelect : Select
+
+  return (
+    <div className="pb_typeahead_kit react-select">
+      <Tag {...selectProps} />
+    </div>
+  )
+}
+
+export default Typeahead

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

@@ -1,5 +1,7 @@
 @import "../tokens/colors";
 @import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/shadows";
 
 [class^=pb_typeahead_kit] {
   .pb_typeahead_wrapper {
@@ -17,8 +19,10 @@
   }
 
   [class^=pb_text_input_kit] {
-    .text_input_wrapper > input:first-child {
-      padding-right: $space_xl;
+    .text_input_wrapper {
+      & > input:first-child {
+        padding-right: $space_xl;
+      }
     }
   }
 
@@ -31,7 +35,7 @@
       }
     }
   }
-  
+
   [class^=pb_list_kit] {
     max-height: 18em;
     overflow-y: auto;
@@ -86,4 +90,17 @@
       color: $text_dk_light;
     }
   }
+
+  &.react-select {
+    .text_input {
+      display: inherit;
+      padding: 3px 4px;
+      &_indicators {
+        max-width: 70px;
+      }
+      &_value_container {
+        flex-grow: 1;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,30 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+import {
+  Flex,
+  TextInput,
+} from '../..'
+
+type Props = {
+  selectProps: any,
+}
+
+const TypeaheadControl = (props: Props) => (
+  <div className="pb_typeahead_wrapper">
+    <TextInput
+        label={props.selectProps.label}
+    >
+      <Flex>
+        <components.Control
+            className="text_input"
+            {...props}
+        />
+      </Flex>
+    </TextInput>
+  </div>
+)
+
+export default TypeaheadControl

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

@@ -0,0 +1,13 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const IndicatorsContainer = (props: any) => (
+  <components.IndicatorsContainer
+      className="text_input_indicators"
+      {...props}
+  />
+)
+
+export default IndicatorsContainer

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

@@ -0,0 +1,12 @@
+/* @flow */
+
+import React from 'react'
+import { components } from 'react-select'
+
+const MenuList = (props: any) => (
+  <components.MenuList {...props}>
+    {props.children}
+  </components.MenuList>
+)
+
+export default MenuList