playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

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.html.erb

@@ -23,7 +23,8 @@
 <br>
 
 <h4>West Coast</h4>
- <%= pb_rails("time", props: {
+<%= pb_rails("time", props: {
+  show_timezone: true,
   time: Time.now,
   timezone: "America/Los_Angeles"
 }) %>

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

@@ -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) => {
@@ -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/_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

@@ -2,14 +2,13 @@ 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
+  - toggle_options: Toggle w/ Options
 
   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

@@ -11,12 +11,15 @@ module Playbook
 
       partial "pb_toggle/toggle"
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
-                  default: "md"
+                  default: "sm"
       prop :value
 
       def classname
@@ -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