playbook_ui 6.5.0 → 6.7.0.pre.alpha1

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

@@ -0,0 +1,18 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  align: "left"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "right"
+}) %>

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

@@ -6,19 +6,19 @@ const TimeAlign = () => {
     <div>
       <Time
           date={new Date()}
-          size="lg"
+          size="md"
       />
       <br />
       <Time
           align="center"
           date={new Date()}
-          size="lg"
+          size="md"
       />
       <br />
       <Time
           align="right"
           date={new Date()}
-          size="lg"
+          size="md"
       />
     </div>
   )

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

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

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

@@ -4,20 +4,49 @@ import Time from '../_time.jsx'
 const TimeDefault = () => {
   return (
     <div>
+      <Time
+          date={new Date().getTime()}
+      />
+      <br />
       <Time
           date={new Date()}
-          size="lg"
           timeZone="America/New_York"
       />
       <br />
       <Time
           date={new Date().getTime()}
-          size="sm"
+          showIcon
       />
       <br />
       <Time
-          date="2012-08-02T09:49:29Z"
-          size="xs"
+          date={new Date()}
+          showIcon
+          timeZone="America/New_York"
+      />
+      <br />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+      />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+          timeZone="America/New_York"
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          size="md"
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          size="md"
+          timeZone="America/New_York"
       />
     </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,19 @@
+import React, { Fragment } from 'react'
+import Time from '../_time.jsx'
+
+const TimeSizes = () => {
+  return (
+    <Fragment>
+      <Time
+          date={new Date()}
+      />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+      />
+    </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

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

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

@@ -0,0 +1,37 @@
+<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: {
+  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

@@ -13,42 +13,40 @@ 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}
       />
+
       <br />
-      <br />
+
       <h4>{'Central'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.central })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.central}
       />
+
       <br />
-      <br />
+
       <h4>{'Mountain'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.mountain })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.mountain}
       />
 
       <br />
-      <br />
+
       <h4>{'West Coast'}</h4>
       <Time
-          date={new Date().toLocaleString('en-US', { timeZone: zones.west })}
-          size="sm"
+          date={new Date()}
           timeZone={zones.west}
       />
 
       <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}
       />
 

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

@@ -1,12 +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
-  - time_dark: Dark

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

@@ -1,5 +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 TimeDark } from './_time_dark.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/docs/example.yml

@@ -2,10 +2,7 @@ examples:
   
   rails:
   - time_range_inline_default: Default
-  - time_range_inline_dark: Dark
   
   
   react:
   - time_range_inline_default: Default
-  - time_range_inline_dark: Dark
-  

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

@@ -1,2 +1 @@
 export { default as TimeRangeInlineDefault } from './_time_range_inline_default.jsx'
-export { default as TimeRangeInlineDark } from './_time_range_inline_dark.jsx'

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - time_stacked_default: Default
   - time_stacked_caption: With Caption
-  - time_stacked_dark: Dark
+
 
 
   react:
   - time_stacked_default: Default
   - time_stacked_caption: With Caption
-  - time_stacked_dark: Dark
-

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

@@ -1,3 +1,2 @@
 export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
-export { default as TimeStackedDark } from './_time_stacked_dark.jsx'
 export { default as TimeStackedCaption } from './_time_stacked_caption.jsx'

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

@@ -2,8 +2,7 @@ examples:
   rails:
   - title_light: Light UI
   - title_variants: Variants
-  - title_dark: Dark UI
+
   react:
   - title_light: Light UI
   - title_variants: Variants
-  - title_dark: Dark UI

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

@@ -1,3 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleDark } from './_title_dark.jsx'
 export { default as TitleVariants } from './_title_variants.jsx'

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

@@ -2,11 +2,7 @@ examples:
   rails:
     - title_count_default: Default
     - title_count_align: Align
-    - title_count_dark: Dark
-    - title_count_align_dark: Dark
 
   react:
     - title_count_default: Default
     - title_count_align: Align
-    - title_count_dark: Dark
-    - title_count_align_dark: Dark

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

@@ -1,4 +1,2 @@
 export { default as TitleCountDefault } from './_title_count_default.jsx'
 export { default as TitleCountAlign } from './_title_count_align.jsx'
-export { default as TitleCountDark } from './_title_count_dark.jsx'
-export { default as TitleCountAlignDark } from './_title_count_align_dark.jsx'