playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -4
  3. data/app/pb_kits/playbook/_playbook.scss +1 -0
  4. data/app/pb_kits/playbook/data/menu.yml +1 -0
  5. data/app/pb_kits/playbook/index.js +3 -0
  6. data/app/pb_kits/playbook/pb_button/_button.jsx +1 -0
  7. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +3 -7
  9. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +3 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +2 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +2 -0
  12. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +2 -1
  13. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  14. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  15. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  16. data/app/pb_kits/playbook/pb_date/date.rb +10 -18
  17. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +17 -2
  18. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  19. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -5
  20. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  21. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +39 -0
  22. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +149 -0
  23. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +33 -0
  24. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +85 -0
  25. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +165 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md +1 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb +4 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx +13 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb +37 -0
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx +37 -0
  46. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +1 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +32 -0
  49. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -0
  50. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +9 -0
  51. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +17 -0
  52. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md +1 -0
  53. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  54. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  55. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  56. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  57. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb +7 -0
  58. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx +16 -0
  59. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md +1 -0
  60. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +7 -0
  61. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +35 -0
  62. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +14 -0
  63. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss +33 -0
  64. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss +53 -0
  65. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +785 -0
  66. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +108 -0
  67. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +44 -0
  68. data/app/pb_kits/playbook/pb_filter/_filter.scss +1 -1
  69. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  70. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +2 -0
  72. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +2 -0
  73. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  74. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +20 -0
  75. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  76. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +0 -1
  77. data/app/pb_kits/playbook/pb_table/table.rb +3 -3
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb +1 -0
  79. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +21 -17
  80. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -8
  81. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
  82. data/app/pb_kits/playbook/pb_time/_time.html.erb +23 -17
  83. data/app/pb_kits/playbook/pb_time/_time.jsx +20 -11
  84. data/app/pb_kits/playbook/pb_time/_time.scss +16 -8
  85. data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb +18 -0
  86. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +3 -3
  87. data/app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb +70 -0
  88. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +1 -6
  89. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +47 -3
  90. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +33 -4
  91. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb +11 -0
  92. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +19 -0
  93. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +2 -1
  94. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +0 -7
  95. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +42 -0
  96. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +12 -14
  97. data/app/pb_kits/playbook/pb_time/docs/example.yml +7 -2
  98. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_time/time.rb +14 -2
  100. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +60 -0
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +20 -3
  102. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +30 -0
  103. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx +13 -0
  104. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx +12 -0
  105. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +51 -0
  106. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +34 -0
  107. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +13 -0
  108. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx +13 -0
  109. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +22 -0
  110. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +29 -0
  111. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +84 -0
  112. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
  113. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +101 -0
  114. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
  115. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +8 -2
  116. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +4 -0
  117. data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
  118. data/app/pb_kits/playbook/vendor.js +6 -0
  119. data/lib/playbook/version.rb +1 -1
  120. metadata +71 -8
  121. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  122. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  123. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  124. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  125. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  126. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
@@ -7,20 +7,22 @@ import DateTime from '../pb_kit/dateTime.js'
7
7
  import { buildCss } from '../utilities/props'
8
8
  import { globalProps } from '../utilities/globalProps.js'
9
9
 
10
- import { Body, Icon, Title } from '../'
10
+ import { Body, Caption, Icon } from '../'
11
11
 
12
12
  type TimeProps = {
13
13
  align?: 'left' | 'center' | 'right',
14
14
  className?: string | array<string>,
15
15
  data?: string,
16
16
  date: string,
17
+ dark?: boolean,
17
18
  id?: string,
18
- size?: 'lg' | 'sm' | 'xs',
19
+ showIcon?: boolean,
20
+ size?: 'md' | 'sm',
19
21
  timeZone?: string,
20
22
  }
21
23
 
22
24
  const Time = (props: TimeProps) => {
23
- const { align, className, date, size, timeZone } = props
25
+ const { align, className, date, showIcon, size, timeZone } = props
24
26
  const classes = classnames(
25
27
  className,
26
28
  buildCss('pb_time_kit', align, size),
@@ -32,23 +34,30 @@ const Time = (props: TimeProps) => {
32
34
  return (
33
35
  <div className={classes}>
34
36
  <span className="pb_body_kit">
35
- <If condition={size === 'sm'}>
36
- <Icon
37
- fixedWidth
38
- icon="clock"
39
- />
37
+ <If condition={showIcon}>
38
+ <Body
39
+ color="light"
40
+ tag="span"
41
+ >
42
+ <Icon
43
+ fixedWidth
44
+ icon="clock"
45
+ size={size === 'md' ? 'lg' : 'sm'}
46
+ />
47
+ </Body>
40
48
  {' '}
41
49
  </If>
42
50
  <time dateTime={date}>
43
51
  <span>
44
- <If condition={size !== 'lg'}>
52
+ <If condition={size !== 'md'}>
45
53
  <Body
54
+ color="light"
46
55
  tag="span"
47
56
  text={dateTimestamp.toTimeWithMeridian()}
48
57
  />
49
58
  <Else />
50
- <Title
51
- size={3}
59
+ <Caption
60
+ size="lg"
52
61
  tag="span"
53
62
  text={dateTimestamp.toTimeWithMeridian()}
54
63
  />
@@ -2,9 +2,11 @@
2
2
  @import "../tokens/typography";
3
3
  @import "../pb_icon/icon";
4
4
  @import "../pb_body/body";
5
- @import "../pb_title/title";
5
+ @import "../pb_caption/caption";
6
6
 
7
7
  [class^=pb_time_kit] {
8
+ letter-spacing: $lspace_looser;
9
+ text-transform: uppercase;
8
10
  &[class*=_center] {
9
11
  text-align: center;
10
12
  }
@@ -18,27 +20,33 @@
18
20
  }
19
21
 
20
22
  [class^=pb_time_timezone] {
21
- font-size: $font-small;
22
- font-weight: $regular;
23
- color: $text-lt-light;
23
+ color: $text_lt_light;
24
+ font-weight: $bold;
24
25
 
25
26
  &::before {
26
27
  content: " ";
27
28
  }
28
29
  }
29
30
 
30
- &[class*=_lg] {
31
+ &[class*=_md] {
32
+ [class^=pb_caption_kit] {
33
+ color: $text_lt_default;
34
+ letter-spacing: $lspace_tight;
35
+ text-transform: capitalize;
36
+ }
31
37
  [class^=pb_time_timezone] {
38
+ color: $text_lt_light;
32
39
  font-size: $font-large !important;
33
- color: $text-lt-light;
40
+ font-weight: $regular;
41
+ letter-spacing: $lspace_tight;
34
42
  }
35
43
  }
36
44
 
37
45
  &.dark {
38
- & > * [class^=pb_title_kit] {
46
+ [class^=pb_caption_kit] {
39
47
  color: $text_dk_default;
40
48
  }
41
- & > * [class^=pb_body_kit] {
49
+ [class^=pb_body_kit] {
42
50
  color: $text_dk_light;
43
51
  }
44
52
  }
@@ -0,0 +1,18 @@
1
+ <%= pb_rails("time", props: {
2
+ time: DateTime.now,
3
+ align: "left"
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("time", props: {
9
+ time: Time.now,
10
+ align: "center"
11
+ }) %>
12
+
13
+ <br>
14
+
15
+ <%= pb_rails("time", props: {
16
+ time: Time.now,
17
+ align: "right"
18
+ }) %>
@@ -6,19 +6,19 @@ const TimeAlign = () => {
6
6
  <div>
7
7
  <Time
8
8
  date={new Date()}
9
- size="lg"
9
+ size="md"
10
10
  />
11
11
  <br />
12
12
  <Time
13
13
  align="center"
14
14
  date={new Date()}
15
- size="lg"
15
+ size="md"
16
16
  />
17
17
  <br />
18
18
  <Time
19
19
  align="right"
20
20
  date={new Date()}
21
- size="lg"
21
+ size="md"
22
22
  />
23
23
  </div>
24
24
  )
@@ -0,0 +1,70 @@
1
+ <%= pb_rails("time", props: {
2
+ dark: true,
3
+ time: Time.now
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("time", props: {
9
+ dark: true,
10
+ show_timezone: true,
11
+ time: DateTime.now,
12
+ timezone: "America/Chicago",
13
+ }) %>
14
+
15
+ <br>
16
+
17
+ <%= pb_rails("time", props: {
18
+ dark: true,
19
+ time: "2012-08-02T15:49:29Z",
20
+ show_icon: true,
21
+ }) %>
22
+
23
+ <br>
24
+
25
+ <%= pb_rails("time", props: {
26
+ dark: true,
27
+ show_timezone: true,
28
+ time: "2012-08-02T15:49:29Z",
29
+ show_icon: true,
30
+ timezone: "America/Chicago",
31
+ }) %>
32
+
33
+ <br>
34
+ <br>
35
+
36
+ <%= pb_rails("time", props: {
37
+ dark: true,
38
+ time: Time.now,
39
+ size: "md",
40
+ }) %>
41
+
42
+ <br>
43
+
44
+ <%= pb_rails("time", props: {
45
+ dark: true,
46
+ show_timezone: true,
47
+ time: DateTime.now,
48
+ timezone: "America/New_York",
49
+ size: "md",
50
+ }) %>
51
+
52
+ <br>
53
+
54
+ <%= pb_rails("time", props: {
55
+ dark: true,
56
+ show_timezone: true,
57
+ time: "2012-08-02T15:49:29Z",
58
+ show_icon: true,
59
+ size: "md",
60
+ }) %>
61
+
62
+ <br>
63
+
64
+ <%= pb_rails("time", props: {
65
+ dark: true,
66
+ time: "2012-08-02T15:49:29Z",
67
+ show_icon: true,
68
+ size: "md",
69
+ timezone: "America/New_York",
70
+ }) %>
@@ -12,12 +12,7 @@ const TimeDark = () => {
12
12
  <Time
13
13
  dark
14
14
  date={new Date()}
15
- size="lg"
16
- />
17
- <br />
18
- <Time
19
- dark
20
- date={new Date()}
15
+ size="md"
21
16
  />
22
17
  </div>
23
18
  )
@@ -1,18 +1,62 @@
1
1
  <%= pb_rails("time", props: {
2
2
  time: Time.now,
3
- size: "lg"
4
3
  }) %>
5
4
 
6
5
  <br>
7
6
 
8
7
  <%= pb_rails("time", props: {
8
+ show_timezone: true,
9
9
  time: DateTime.now,
10
- size: "sm"
10
+ timezone: "America/Chicago"
11
11
  }) %>
12
12
 
13
13
  <br>
14
14
 
15
15
  <%= pb_rails("time", props: {
16
16
  time: "2012-08-02T15:49:29Z",
17
- size: "xs"
17
+ show_icon: true,
18
+ }) %>
19
+
20
+ <br>
21
+
22
+ <%= pb_rails("time", props: {
23
+ show_timezone: true,
24
+ time: "2012-08-02T15:49:29Z",
25
+ show_icon: true,
26
+ timezone: "America/Chicago"
27
+ }) %>
28
+
29
+ <br>
30
+ <br>
31
+
32
+ <%= pb_rails("time", props: {
33
+ time: Time.now,
34
+ size: "md",
35
+ }) %>
36
+
37
+ <br>
38
+
39
+ <%= pb_rails("time", props: {
40
+ show_timezone: true,
41
+ size: "md",
42
+ time: DateTime.now,
43
+ timezone: "America/New_York",
44
+ }) %>
45
+
46
+ <br>
47
+
48
+ <%= pb_rails("time", props: {
49
+ show_icon: true,
50
+ size: "md",
51
+ time: "2012-08-02T15:49:29Z",
52
+ }) %>
53
+
54
+ <br>
55
+
56
+ <%= pb_rails("time", props: {
57
+ show_icon: true,
58
+ show_timezone: true,
59
+ size: "md",
60
+ time: "2012-08-02T15:49:29Z",
61
+ timezone: "America/New_York",
18
62
  }) %>
@@ -4,20 +4,49 @@ import Time from '../_time.jsx'
4
4
  const TimeDefault = () => {
5
5
  return (
6
6
  <div>
7
+ <Time
8
+ date={new Date().getTime()}
9
+ />
10
+ <br />
7
11
  <Time
8
12
  date={new Date()}
9
- size="lg"
10
13
  timeZone="America/New_York"
11
14
  />
12
15
  <br />
13
16
  <Time
14
17
  date={new Date().getTime()}
15
- size="sm"
18
+ showIcon
16
19
  />
17
20
  <br />
18
21
  <Time
19
- date="2012-08-02T09:49:29Z"
20
- size="xs"
22
+ date={new Date()}
23
+ showIcon
24
+ timeZone="America/New_York"
25
+ />
26
+ <br />
27
+ <br />
28
+ <Time
29
+ date={new Date()}
30
+ size="md"
31
+ />
32
+ <br />
33
+ <Time
34
+ date={new Date()}
35
+ size="md"
36
+ timeZone="America/New_York"
37
+ />
38
+ <br />
39
+ <Time
40
+ date={new Date()}
41
+ showIcon
42
+ size="md"
43
+ />
44
+ <br />
45
+ <Time
46
+ date={new Date()}
47
+ showIcon
48
+ size="md"
49
+ timeZone="America/New_York"
21
50
  />
22
51
  </div>
23
52
  )
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("time", props: {
2
+ time: DateTime.now,
3
+ size: "sm"
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("time", props: {
9
+ time: Time.now,
10
+ size: "md"
11
+ }) %>
@@ -0,0 +1,19 @@
1
+ import React, { Fragment } from 'react'
2
+ import Time from '../_time.jsx'
3
+
4
+ const TimeSizes = () => {
5
+ return (
6
+ <Fragment>
7
+ <Time
8
+ date={new Date()}
9
+ />
10
+ <br />
11
+ <Time
12
+ date={new Date()}
13
+ size="md"
14
+ />
15
+ </Fragment>
16
+ )
17
+ }
18
+
19
+ export default TimeSizes
@@ -11,6 +11,7 @@
11
11
  <br>
12
12
 
13
13
  <%= pb_rails("time", props: {
14
+ show_timezone: true,
14
15
  time: DateTime.now,
15
- timezone: "America/Chicago"
16
+ timezone: "America/Chicago",
16
17
  }) %>
@@ -15,13 +15,6 @@ const TimeStamp = () => {
15
15
  date={new Date().getTime()}
16
16
  size="sm"
17
17
  />
18
-
19
- <br />
20
-
21
- <Time
22
- date="2012-08-02T15:49:29Z"
23
- size="sm"
24
- />
25
18
  </div>
26
19
  )
27
20
  }
@@ -0,0 +1,42 @@
1
+ <h4>East Coast</h4>
2
+ <%= pb_rails("time", props: {
3
+ show_timezone: true,
4
+ time: Time.now,
5
+ timezone: "America/New_York"
6
+ }) %>
7
+
8
+ <br>
9
+
10
+ <h4>Central</h4>
11
+ <%= pb_rails("time", props: {
12
+ show_timezone: true,
13
+ time: Time.now,
14
+ timezone: "America/Chicago"
15
+ }) %>
16
+
17
+ <br>
18
+
19
+ <h4>Mountain</h4>
20
+ <%= pb_rails("time", props: {
21
+ show_timezone: true,
22
+ time: Time.now,
23
+ timezone: "America/Denver"
24
+ }) %>
25
+
26
+ <br>
27
+
28
+ <h4>West Coast</h4>
29
+ <%= pb_rails("time", props: {
30
+ show_timezone: true,
31
+ time: Time.now,
32
+ timezone: "America/Los_Angeles"
33
+ }) %>
34
+
35
+ <br>
36
+
37
+ <h4>Toyko, Japan</h4>
38
+ <%= pb_rails("time", props: {
39
+ show_timezone: true,
40
+ time: Time.now,
41
+ timezone: "Asia/Tokyo",
42
+ }) %>