playbook_ui 7.0.1.pre.alpha12 → 7.1.0.pre.alpha2

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

@@ -1,23 +1,64 @@
 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()}
-          size="lg"
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date().getTime()}
-          size="sm"
+          showIcon
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
-          date="2012-08-02T09:49:29Z"
-          size="xs"
+          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
+          date={new Date()}
+          showIcon
+          size="md"
+          timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

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

@@ -0,0 +1,11 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  size: "sm"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  size: "md"
+}) %>

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

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

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

@@ -1,10 +1,12 @@
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: DateTime.now
 }) %>
 
@@ -12,5 +14,5 @@
 
 <%= pb_rails("time", props: {
   time: DateTime.now,
-  timezone: "America/Chicago"
+  timezone: "America/Chicago",
 }) %>

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,13 +15,7 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
           size="sm"
-      />
-
-      <br />
-
-      <Time
-          date="2012-08-02T15:49:29Z"
-          size="sm"
+          {...props}
       />
     </div>
   )

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

@@ -0,0 +1,38 @@
+<h4>East Coast</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<h4>Central</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/Chicago"
+}) %>
+
+<br>
+
+<h4>Mountain</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/Denver"
+}) %>
+
+<br>
+
+<h4>West Coast</h4>
+<%= pb_rails("time", props: {
+  show_timezone: true,
+  time: Time.now,
+  timezone: "America/Los_Angeles"
+}) %>
+
+<br>
+
+<h4>Toyko, Japan</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "Asia/Tokyo",
+}) %>

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',
@@ -13,47 +13,50 @@ const TimeTimeZone = () => {
     <div>
       <h4>{'East Coast'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.east })}
-          size="lg"
+          date={new Date()}
+          size="md"
           timeZone={zones.east}
+          {...props}
       />
+
       <br />
-      <br />
+
       <h4>{'Central'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.central })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.central}
+          {...props}
       />
+
       <br />
-      <br />
+
       <h4>{'Mountain'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.mountain })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.mountain}
+          {...props}
       />
 
       <br />
-      <br />
+
       <h4>{'West Coast'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.west })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.west}
+          {...props}
       />
 
       <br />
-      <br />
+
       <h4>{'Tokyo, Japan'}</h4>
       <Time
-          date={new Date('2012-08-02T09:49:29Z').toLocaleString('en-US', { timeZone: zones.asia })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.asia}
+          {...props}
       />
 
     </div>
   )
 }
 
-export default TimeTimeZone
+export default TimeTimezone

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