playbook_ui 7.14.0.pre.alpha1 → 7.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (156) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  4. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +12 -0
  5. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +10 -36
  9. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +20 -26
  10. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -5
  11. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +15 -0
  16. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  17. data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +5 -0
  19. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +26 -0
  20. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  21. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +14 -0
  24. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +4 -0
  25. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +5 -0
  27. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +28 -0
  28. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -9
  31. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +7 -12
  32. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +1 -4
  33. data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +0 -2
  34. data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +1 -12
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -41
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +37 -84
  38. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -18
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +43 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +17 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +5 -0
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
  45. data/app/pb_kits/playbook/pb_flex/_flex.jsx +9 -25
  46. data/app/pb_kits/playbook/pb_flex/_flex.scss +7 -40
  47. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +2 -6
  48. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -10
  49. data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
  50. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
  51. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +15 -17
  52. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -3
  53. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb} +21 -19
  54. data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx} +77 -71
  55. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
  56. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -5
  57. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
  58. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +8 -23
  60. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
  61. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.jsx → _flex_vertical.jsx} +99 -41
  63. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_flex/docs/example.yml +4 -9
  65. data/app/pb_kits/playbook/pb_flex/docs/index.js +2 -4
  66. data/app/pb_kits/playbook/pb_flex/flex.rb +12 -79
  67. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -18
  68. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -7
  69. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -0
  70. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +18 -0
  71. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -1
  72. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
  74. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +66 -0
  75. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
  76. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +17 -0
  77. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
  78. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +38 -0
  79. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
  80. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +3 -0
  81. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
  82. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +37 -0
  83. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
  84. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +35 -0
  85. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
  86. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +2 -0
  87. data/app/pb_kits/playbook/pb_layout/_layout.scss +9 -9
  88. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
  89. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +97 -0
  90. data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -0
  91. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +105 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
  95. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +51 -0
  96. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +54 -0
  98. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
  99. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +57 -0
  100. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
  101. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +54 -0
  102. data/app/pb_kits/playbook/pb_popover/docs/example.yml +13 -0
  103. data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
  104. data/app/pb_kits/playbook/pb_select/_select.scss +4 -6
  105. data/app/pb_kits/playbook/pb_table/_table.jsx +0 -8
  106. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +4 -56
  107. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +3 -64
  108. data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -3
  109. data/app/pb_kits/playbook/pb_table/table.rb +1 -8
  110. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +4 -6
  111. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +16 -92
  112. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
  113. data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
  114. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +18 -26
  115. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
  116. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -40
  117. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +4 -12
  118. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
  119. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
  120. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +18 -26
  121. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
  122. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
  123. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +21 -0
  124. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +28 -6
  125. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
  126. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
  127. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -8
  128. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -4
  129. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -83
  130. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +4 -2
  131. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
  132. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
  133. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
  134. data/lib/playbook/version.rb +1 -1
  135. metadata +57 -31
  136. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -51
  137. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +0 -77
  138. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +0 -78
  139. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +0 -4
  140. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +0 -18
  141. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +0 -1
  142. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +0 -101
  143. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +0 -7
  144. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +0 -33
  145. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +0 -75
  146. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
  147. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +0 -49
  148. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +0 -11
  149. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +0 -113
  150. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +0 -7
  151. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +0 -5
  152. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +0 -7
  153. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +0 -5
  154. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -135
  155. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -135
  156. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -135
@@ -0,0 +1,177 @@
1
+ <%= pb_rails("timestamp", props: {
2
+ timestamp: DateTime.now,
3
+ show_date: false,
4
+ show_timezone: true,
5
+ timezone: "America/New_York",
6
+ align: "left"
7
+ }) %>
8
+
9
+ <br>
10
+
11
+ <%= pb_rails("timestamp", props: {
12
+ timestamp: DateTime.now,
13
+ show_date: true,
14
+ show_timezone: true,
15
+ timezone: "America/New_York",
16
+ align: "left"
17
+ }) %>
18
+
19
+ <br>
20
+
21
+ <%= pb_rails("timestamp", props: {
22
+ timestamp: DateTime.now + 4.years,
23
+ show_date: true,
24
+ show_timezone: true,
25
+ timezone: "America/New_York",
26
+ align: "left"
27
+ }) %>
28
+
29
+ <br>
30
+
31
+ <%= pb_rails("timestamp", props: {
32
+ timestamp: DateTime.now,
33
+ show_date: false,
34
+ show_timezone: true,
35
+ timezone: "Asia/Hong_Kong",
36
+ align: "left"
37
+ }) %>
38
+
39
+ <br>
40
+
41
+ <%= pb_rails("timestamp", props: {
42
+ timestamp: DateTime.now,
43
+ show_date: true,
44
+ show_timezone: true,
45
+ timezone: "Asia/Hong_Kong",
46
+ align: "left"
47
+ }) %>
48
+
49
+ <br>
50
+
51
+ <%= pb_rails("timestamp", props: {
52
+ timestamp: DateTime.now + 4.years,
53
+ show_date: true,
54
+ show_timezone: true,
55
+ timezone: "Asia/Hong_Kong",
56
+ align: "left"
57
+ }) %>
58
+
59
+ <br><br>
60
+
61
+ <%= pb_rails("timestamp", props: {
62
+ timestamp: DateTime.now,
63
+ show_date: false,
64
+ show_timezone: true,
65
+ timezone: "America/New_York",
66
+ align: "center"
67
+ }) %>
68
+
69
+ <br>
70
+
71
+ <%= pb_rails("timestamp", props: {
72
+ timestamp: DateTime.now,
73
+ show_date: true,
74
+ show_timezone: true,
75
+ timezone: "America/New_York",
76
+ align: "center"
77
+ }) %>
78
+
79
+ <br>
80
+
81
+ <%= pb_rails("timestamp", props: {
82
+ timestamp: DateTime.now + 4.years,
83
+ show_date: true,
84
+ show_timezone: true,
85
+ timezone: "America/New_York",
86
+ align: "center"
87
+ }) %>
88
+
89
+ <br>
90
+
91
+ <%= pb_rails("timestamp", props: {
92
+ timestamp: DateTime.now,
93
+ show_date: false,
94
+ show_timezone: true,
95
+ timezone: "Asia/Hong_Kong",
96
+ align: "center"
97
+ }) %>
98
+
99
+ <br>
100
+
101
+ <%= pb_rails("timestamp", props: {
102
+ timestamp: DateTime.now,
103
+ show_date: true,
104
+ show_timezone: true,
105
+ timezone: "Asia/Hong_Kong",
106
+ align: "center"
107
+ }) %>
108
+
109
+ <br>
110
+
111
+ <%= pb_rails("timestamp", props: {
112
+ timestamp: DateTime.now + 4.years,
113
+ show_date: true,
114
+ show_timezone: true,
115
+ timezone: "Asia/Hong_Kong",
116
+ align: "center"
117
+ }) %>
118
+
119
+ <br><br>
120
+
121
+ <%= pb_rails("timestamp", props: {
122
+ timestamp: DateTime.now,
123
+ show_date: false,
124
+ show_timezone: true,
125
+ timezone: "America/New_York",
126
+ align: "right"
127
+ }) %>
128
+
129
+ <br>
130
+
131
+ <%= pb_rails("timestamp", props: {
132
+ timestamp: DateTime.now,
133
+ show_date: true,
134
+ show_timezone: true,
135
+ timezone: "America/New_York",
136
+ align: "right"
137
+ }) %>
138
+
139
+ <br>
140
+
141
+ <%= pb_rails("timestamp", props: {
142
+ timestamp: DateTime.now + 4.years,
143
+ show_date: true,
144
+ show_timezone: true,
145
+ timezone: "America/New_York",
146
+ align: "right"
147
+ }) %>
148
+
149
+ <br>
150
+
151
+ <%= pb_rails("timestamp", props: {
152
+ timestamp: DateTime.now,
153
+ show_date: false,
154
+ show_timezone: true,
155
+ timezone: "Asia/Hong_Kong",
156
+ align: "right"
157
+ }) %>
158
+
159
+ <br>
160
+
161
+ <%= pb_rails("timestamp", props: {
162
+ timestamp: DateTime.now,
163
+ show_date: true,
164
+ show_timezone: true,
165
+ timezone: "Asia/Hong_Kong",
166
+ align: "right"
167
+ }) %>
168
+
169
+ <br>
170
+
171
+ <%= pb_rails("timestamp", props: {
172
+ timestamp: DateTime.now + 4.years,
173
+ show_date: true,
174
+ show_timezone: true,
175
+ timezone: "Asia/Hong_Kong",
176
+ align: "right"
177
+ }) %>
@@ -0,0 +1,209 @@
1
+ import React from 'react'
2
+ import Timestamp from '../_timestamp.jsx'
3
+
4
+ const TimestampTimezonesAlign = (props) => {
5
+ return (
6
+ <div>
7
+ <Timestamp
8
+ align="left"
9
+ showDate="false"
10
+ showTimezone="true"
11
+ timestamp={new Date().getTime()}
12
+ timezone="America/New_York"
13
+ {...props}
14
+ />
15
+
16
+ <br />
17
+
18
+ <Timestamp
19
+ align="left"
20
+ showDate="true"
21
+ showTimezone="true"
22
+ timestamp={new Date().getTime()}
23
+ timezone="America/New_York"
24
+ {...props}
25
+ />
26
+
27
+ <br />
28
+
29
+ <Timestamp
30
+ align="left"
31
+ showDate="true"
32
+ showTimezone="true"
33
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
34
+ timezone="America/New_York"
35
+ {...props}
36
+ />
37
+
38
+ <br />
39
+
40
+ <Timestamp
41
+ align="left"
42
+ showDate="false"
43
+ showTimezone="true"
44
+ timestamp={new Date().getTime()}
45
+ timezone="Asia/Hong_Kong"
46
+ {...props}
47
+ />
48
+
49
+ <br />
50
+
51
+ <Timestamp
52
+ align="left"
53
+ showDate="true"
54
+ showTimezone="true"
55
+ timestamp={new Date().getTime()}
56
+ timezone="Asia/Hong_Kong"
57
+ {...props}
58
+ />
59
+
60
+ <br />
61
+
62
+ <Timestamp
63
+ align="left"
64
+ showDate="true"
65
+ showTimezone="true"
66
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
67
+ timezone="Asia/Hong_Kong"
68
+ {...props}
69
+ />
70
+
71
+ <br />
72
+ <br />
73
+
74
+ <Timestamp
75
+ align="center"
76
+ showDate="false"
77
+ showTimezone="true"
78
+ timestamp={new Date().getTime()}
79
+ timezone="America/New_York"
80
+ {...props}
81
+ />
82
+
83
+ <br />
84
+
85
+ <Timestamp
86
+ align="center"
87
+ showDate="true"
88
+ showTimezone="true"
89
+ timestamp={new Date().getTime()}
90
+ timezone="America/New_York"
91
+ {...props}
92
+ />
93
+
94
+ <br />
95
+
96
+ <Timestamp
97
+ align="center"
98
+ showDate="true"
99
+ showTimezone="true"
100
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
101
+ timezone="America/New_York"
102
+ {...props}
103
+ />
104
+
105
+ <br />
106
+
107
+ <Timestamp
108
+ align="center"
109
+ showDate="false"
110
+ showTimezone="true"
111
+ timestamp={new Date().getTime()}
112
+ timezone="Asia/Hong_Kong"
113
+ {...props}
114
+ />
115
+
116
+ <br />
117
+
118
+ <Timestamp
119
+ align="center"
120
+ showDate="true"
121
+ showTimezone="true"
122
+ timestamp={new Date().getTime()}
123
+ timezone="Asia/Hong_Kong"
124
+ {...props}
125
+ />
126
+
127
+ <br />
128
+
129
+ <Timestamp
130
+ align="center"
131
+ showDate="true"
132
+ showTimezone="true"
133
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
134
+ timezone="Asia/Hong_Kong"
135
+ {...props}
136
+ />
137
+
138
+ <br />
139
+ <br />
140
+
141
+ <Timestamp
142
+ align="right"
143
+ showDate="false"
144
+ showTimezone="true"
145
+ timestamp={new Date().getTime()}
146
+ timezone="America/New_York"
147
+ {...props}
148
+ />
149
+
150
+ <br />
151
+
152
+ <Timestamp
153
+ align="right"
154
+ showDate="true"
155
+ showTimezone="true"
156
+ timestamp={new Date().getTime()}
157
+ timezone="America/New_York"
158
+ {...props}
159
+ />
160
+
161
+ <br />
162
+
163
+ <Timestamp
164
+ align="right"
165
+ showDate="true"
166
+ showTimezone="true"
167
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
168
+ timezone="America/New_York"
169
+ {...props}
170
+ />
171
+
172
+ <br />
173
+
174
+ <Timestamp
175
+ align="right"
176
+ showDate="false"
177
+ showTimezone="true"
178
+ timestamp={new Date().getTime()}
179
+ timezone="Asia/Hong_Kong"
180
+ {...props}
181
+ />
182
+
183
+ <br />
184
+
185
+ <Timestamp
186
+ align="right"
187
+ showDate="true"
188
+ showTimezone="true"
189
+ timestamp={new Date().getTime()}
190
+ timezone="Asia/Hong_Kong"
191
+ {...props}
192
+ />
193
+
194
+ <br />
195
+
196
+ <Timestamp
197
+ align="right"
198
+ showDate="true"
199
+ showTimezone="true"
200
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
201
+ timezone="Asia/Hong_Kong"
202
+ {...props}
203
+ />
204
+
205
+ </div>
206
+ )
207
+ }
208
+
209
+ export default TimestampTimezonesAlign
@@ -12,3 +12,24 @@
12
12
  variant: "updated",
13
13
  show_user: false
14
14
  }) %>
15
+
16
+ <br><br>
17
+
18
+ <%= pb_rails("timestamp", props: {
19
+ timestamp: DateTime.now,
20
+ variant: "updated",
21
+ show_user: true,
22
+ show_timezone: true,
23
+ text: "Maricris Nonato",
24
+ timezone: "America/New_York"
25
+ }) %>
26
+
27
+ <br>
28
+
29
+ <%= pb_rails("timestamp", props: {
30
+ timestamp: DateTime.now,
31
+ variant: "updated",
32
+ show_user: false,
33
+ show_timezone: true,
34
+ timezone: "America/New_York"
35
+ }) %>
@@ -1,15 +1,35 @@
1
1
  import React from 'react'
2
2
  import Timestamp from '../_timestamp.jsx'
3
3
 
4
- const todaysDate = new Date()
5
-
6
4
  const TimestampUpdated = (props) => {
7
5
  return (
8
6
  <div>
9
7
  <Timestamp
10
- showUser
8
+ showUser="true"
9
+ text="Maricris Nonato"
10
+ timestamp={new Date().getTime()}
11
+ variant="updated"
12
+ {...props}
13
+ />
14
+
15
+ <br />
16
+
17
+ <Timestamp
18
+ showUser="false"
19
+ timestamp={new Date().getTime()}
20
+ variant="updated"
21
+ {...props}
22
+ />
23
+
24
+ <br />
25
+ <br />
26
+
27
+ <Timestamp
28
+ showTimezone="true"
29
+ showUser="true"
11
30
  text="Maricris Nonato"
12
- timestamp={todaysDate}
31
+ timestamp={new Date().getTime()}
32
+ timezone="America/New_York"
13
33
  variant="updated"
14
34
  {...props}
15
35
  />
@@ -17,8 +37,10 @@ const TimestampUpdated = (props) => {
17
37
  <br />
18
38
 
19
39
  <Timestamp
20
- showUser={false}
21
- timestamp={todaysDate}
40
+ showTimezone="true"
41
+ showUser="false"
42
+ timestamp={new Date().getTime()}
43
+ timezone="America/New_York"
22
44
  variant="updated"
23
45
  {...props}
24
46
  />