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
@@ -1,16 +1,5 @@
1
1
  @import "timestamp-mixins";
2
- @import "../tokens/colors";
3
2
 
4
- [class^=pb_timestamp_kit]{
3
+ [class^=pb_timestamp_kit] {
5
4
  @include pb_timestamp;
6
-
7
- &[class*=_center] {
8
- text-align: center;
9
- }
10
- &[class*=_right] {
11
- text-align: right;
12
- }
13
- &[class*=_dark] {
14
- color: $text_dk_default;
15
- }
16
5
  }
@@ -1 +1 @@
1
- This low profile kit displays time. Elapsed, current, future, or otherwise.
1
+ This kit is a small indicator for the user to know s timestamp
@@ -1,21 +1,13 @@
1
1
  import React from 'react'
2
2
  import Timestamp from '../_timestamp.jsx'
3
3
 
4
- const todaysDate = new Date()
5
- const year = new Date().getFullYear() + 4
6
- const month = new Date().getMonth()
7
- const date = new Date().getDate()
8
- const hours = new Date().getHours()
9
- const minutes = new Date().getMinutes()
10
- const customDate = new Date(year, month, date, hours, minutes)
11
-
12
4
  const TimestampAlign = (props) => {
13
5
  return (
14
6
  <div>
15
7
  <Timestamp
16
8
  align="left"
17
- showDate={false}
18
- timestamp={todaysDate}
9
+ showDate="false"
10
+ timestamp={new Date().getTime()}
19
11
  {...props}
20
12
  />
21
13
 
@@ -23,8 +15,8 @@ const TimestampAlign = (props) => {
23
15
 
24
16
  <Timestamp
25
17
  align="left"
26
- showDate
27
- timestamp={todaysDate}
18
+ showDate="true"
19
+ timestamp={new Date().getTime()}
28
20
  {...props}
29
21
  />
30
22
 
@@ -32,8 +24,8 @@ const TimestampAlign = (props) => {
32
24
 
33
25
  <Timestamp
34
26
  align="left"
35
- showDate
36
- timestamp={customDate}
27
+ showDate="true"
28
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
37
29
  {...props}
38
30
  />
39
31
 
@@ -42,8 +34,8 @@ const TimestampAlign = (props) => {
42
34
 
43
35
  <Timestamp
44
36
  align="center"
45
- showDate={false}
46
- timestamp={todaysDate}
37
+ showDate="false"
38
+ timestamp={new Date().getTime()}
47
39
  {...props}
48
40
  />
49
41
 
@@ -51,8 +43,8 @@ const TimestampAlign = (props) => {
51
43
 
52
44
  <Timestamp
53
45
  align="center"
54
- showDate
55
- timestamp={todaysDate}
46
+ showDate="true"
47
+ timestamp={new Date().getTime()}
56
48
  {...props}
57
49
  />
58
50
 
@@ -60,8 +52,8 @@ const TimestampAlign = (props) => {
60
52
 
61
53
  <Timestamp
62
54
  align="center"
63
- showDate
64
- timestamp={customDate}
55
+ showDate="true"
56
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
65
57
  {...props}
66
58
  />
67
59
 
@@ -70,8 +62,8 @@ const TimestampAlign = (props) => {
70
62
 
71
63
  <Timestamp
72
64
  align="right"
73
- showDate={false}
74
- timestamp={todaysDate}
65
+ showDate="false"
66
+ timestamp={new Date().getTime()}
75
67
  {...props}
76
68
  />
77
69
 
@@ -79,8 +71,8 @@ const TimestampAlign = (props) => {
79
71
 
80
72
  <Timestamp
81
73
  align="right"
82
- showDate
83
- timestamp={todaysDate}
74
+ showDate="true"
75
+ timestamp={new Date().getTime()}
84
76
  {...props}
85
77
  />
86
78
 
@@ -88,8 +80,8 @@ const TimestampAlign = (props) => {
88
80
 
89
81
  <Timestamp
90
82
  align="right"
91
- showDate
92
- timestamp={customDate}
83
+ showDate="true"
84
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
93
85
  {...props}
94
86
  />
95
87
  </div>
@@ -1,21 +1 @@
1
- <%= pb_rails("timestamp", props: {
2
- timestamp: DateTime.now,
3
- show_date: false,
4
- align: "left"
5
- }) %>
6
-
7
- <br>
8
-
9
- <%= pb_rails("timestamp", props: {
10
- timestamp: DateTime.now,
11
- show_date: true,
12
- align: "left"
13
- }) %>
14
-
15
- <br>
16
-
17
- <%= pb_rails("timestamp", props: {
18
- timestamp: DateTime.now + 4.years,
19
- show_date: true,
20
- align: "left"
21
- }) %>
1
+ <%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>
@@ -1,43 +1,11 @@
1
1
  import React from 'react'
2
- import Timestamp from '../_timestamp.jsx'
3
-
4
- const todaysDate = new Date()
5
- const year = new Date().getFullYear() + 4
6
- const month = new Date().getMonth()
7
- const date = new Date().getDate()
8
- const hours = new Date().getHours()
9
- const minutes = new Date().getMinutes()
10
- const customDate = new Date(year, month, date, hours, minutes)
11
-
12
- const TimestampDefault = (props) => {
13
- return (
14
- <div>
15
- <Timestamp
16
- align="left"
17
- showDate={false}
18
- timestamp={todaysDate}
19
- {...props}
20
- />
21
-
22
- <br />
23
-
24
- <Timestamp
25
- align="left"
26
- showDate
27
- timestamp={todaysDate}
28
- {...props}
29
- />
30
-
31
- <br />
32
-
33
- <Timestamp
34
- align="left"
35
- showDate
36
- timestamp={customDate}
37
- {...props}
38
- />
39
- </div>
40
- )
41
- }
2
+ import { Timestamp } from '../../'
3
+
4
+ const TimestampDefault = (props) => (
5
+ <Timestamp
6
+ text="20 seconds ago"
7
+ {...props}
8
+ />
9
+ )
42
10
 
43
11
  export default TimestampDefault
@@ -1,21 +1,13 @@
1
1
  import React from 'react'
2
2
  import Timestamp from '../_timestamp.jsx'
3
3
 
4
- const todaysDate = new Date()
5
- const year = new Date().getFullYear()
6
- const month = new Date().getMonth()
7
- const date = new Date().getDate()
8
- const hours = new Date().getHours() - 10
9
- const minutes = new Date().getMinutes()
10
- const customDate = new Date(year, month, date, hours, minutes)
11
-
12
4
  const TimestampElapsed = (props) => {
13
5
  return (
14
6
  <div>
15
7
  <Timestamp
16
- showUser
8
+ showUser="true"
17
9
  text="Maricris Nonato"
18
- timestamp={todaysDate}
10
+ timestamp={new Date().getTime()}
19
11
  variant="elapsed"
20
12
  {...props}
21
13
  />
@@ -23,8 +15,8 @@ const TimestampElapsed = (props) => {
23
15
  <br />
24
16
 
25
17
  <Timestamp
26
- showUser={false}
27
- timestamp={customDate}
18
+ showUser="false"
19
+ timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
28
20
  variant="elapsed"
29
21
  {...props}
30
22
  />
@@ -0,0 +1,54 @@
1
+ <%= pb_rails("timestamp", props: {
2
+ timestamp: DateTime.now,
3
+ variant: "elapsed",
4
+ show_user: true,
5
+ text: "Maricris Nonato",
6
+ align: "left"
7
+ }) %>
8
+
9
+ <br>
10
+
11
+ <%= pb_rails("timestamp", props: {
12
+ timestamp: DateTime.now,
13
+ variant: "elapsed",
14
+ show_user: false,
15
+ align: "left"
16
+ }) %>
17
+
18
+ <br><br>
19
+
20
+ <%= pb_rails("timestamp", props: {
21
+ timestamp: DateTime.now,
22
+ variant: "elapsed",
23
+ show_user: true,
24
+ text: "Maricris Nonato",
25
+ align: "center"
26
+ }) %>
27
+
28
+ <br>
29
+
30
+ <%= pb_rails("timestamp", props: {
31
+ timestamp: DateTime.now,
32
+ variant: "elapsed",
33
+ show_user: false,
34
+ align: "center"
35
+ }) %>
36
+
37
+ <br><br>
38
+
39
+ <%= pb_rails("timestamp", props: {
40
+ timestamp: DateTime.now,
41
+ variant: "elapsed",
42
+ show_user: true,
43
+ text: "Maricris Nonato",
44
+ align: "right"
45
+ }) %>
46
+
47
+ <br>
48
+
49
+ <%= pb_rails("timestamp", props: {
50
+ timestamp: DateTime.now,
51
+ variant: "elapsed",
52
+ show_user: false,
53
+ align: "right"
54
+ }) %>
@@ -0,0 +1,73 @@
1
+ import React from 'react'
2
+ import Timestamp from '../_timestamp.jsx'
3
+
4
+ const TimestampUpdatedAlign = (props) => {
5
+ return (
6
+ <div>
7
+ <Timestamp
8
+ align="left"
9
+ showUser="true"
10
+ text="Maricris Nonato"
11
+ timestamp={new Date().getTime()}
12
+ variant="elapsed"
13
+ {...props}
14
+ />
15
+
16
+ <br />
17
+
18
+ <Timestamp
19
+ align="left"
20
+ showUser="false"
21
+ timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
22
+ variant="elapsed"
23
+ {...props}
24
+ />
25
+
26
+ <br />
27
+ <br />
28
+
29
+ <Timestamp
30
+ align="center"
31
+ showUser="true"
32
+ text="Maricris Nonato"
33
+ timestamp={new Date().getTime()}
34
+ variant="elapsed"
35
+ {...props}
36
+ />
37
+
38
+ <br />
39
+
40
+ <Timestamp
41
+ align="center"
42
+ showUser="false"
43
+ timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
44
+ variant="elapsed"
45
+ {...props}
46
+ />
47
+
48
+ <br />
49
+ <br />
50
+
51
+ <Timestamp
52
+ align="right"
53
+ showUser="true"
54
+ text="Maricris Nonato"
55
+ timestamp={new Date().getTime()}
56
+ variant="elapsed"
57
+ {...props}
58
+ />
59
+
60
+ <br />
61
+
62
+ <Timestamp
63
+ align="right"
64
+ showUser="false"
65
+ timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
66
+ variant="elapsed"
67
+ {...props}
68
+ />
69
+ </div>
70
+ )
71
+ }
72
+
73
+ export default TimestampUpdatedAlign
@@ -1,22 +1,14 @@
1
1
  import React from 'react'
2
2
  import Timestamp from '../_timestamp.jsx'
3
3
 
4
- const todaysDate = new Date()
5
- const year = new Date().getFullYear() + 4
6
- const month = new Date().getMonth()
7
- const date = new Date().getDate()
8
- const hours = new Date().getHours()
9
- const minutes = new Date().getMinutes()
10
- const customDate = new Date(year, month, date, hours, minutes)
11
-
12
4
  const TimestampTimezones = (props) => {
13
5
  return (
14
6
  <div>
15
7
  <Timestamp
16
8
  align="left"
17
- showDate={false}
18
- showTimezone
19
- timestamp={todaysDate}
9
+ showDate="false"
10
+ showTimezone="true"
11
+ timestamp={new Date().getTime()}
20
12
  timezone="America/New_York"
21
13
  {...props}
22
14
  />
@@ -25,9 +17,9 @@ const TimestampTimezones = (props) => {
25
17
 
26
18
  <Timestamp
27
19
  align="left"
28
- showDate
29
- showTimezone
30
- timestamp={todaysDate}
20
+ showDate="true"
21
+ showTimezone="true"
22
+ timestamp={new Date().getTime()}
31
23
  timezone="America/New_York"
32
24
  {...props}
33
25
  />
@@ -36,9 +28,9 @@ const TimestampTimezones = (props) => {
36
28
 
37
29
  <Timestamp
38
30
  align="left"
39
- showDate
40
- showTimezone
41
- timestamp={customDate}
31
+ showDate="true"
32
+ showTimezone="true"
33
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
42
34
  timezone="America/New_York"
43
35
  {...props}
44
36
  />
@@ -47,9 +39,9 @@ const TimestampTimezones = (props) => {
47
39
 
48
40
  <Timestamp
49
41
  align="left"
50
- showDate={false}
51
- showTimezone
52
- timestamp={todaysDate}
42
+ showDate="false"
43
+ showTimezone="true"
44
+ timestamp={new Date().getTime()}
53
45
  timezone="Asia/Hong_Kong"
54
46
  {...props}
55
47
  />
@@ -58,9 +50,9 @@ const TimestampTimezones = (props) => {
58
50
 
59
51
  <Timestamp
60
52
  align="left"
61
- showDate
62
- showTimezone
63
- timestamp={todaysDate}
53
+ showDate="true"
54
+ showTimezone="true"
55
+ timestamp={new Date().getTime()}
64
56
  timezone="Asia/Hong_Kong"
65
57
  {...props}
66
58
  />
@@ -69,9 +61,9 @@ const TimestampTimezones = (props) => {
69
61
 
70
62
  <Timestamp
71
63
  align="left"
72
- showDate
73
- showTimezone
74
- timestamp={customDate}
64
+ showDate="true"
65
+ showTimezone="true"
66
+ timestamp={new Date((new Date()).getFullYear() + 4, (new Date().getMonth()), (new Date().getDate() + 1)).getTime()}
75
67
  timezone="Asia/Hong_Kong"
76
68
  {...props}
77
69
  />