playbook_ui 7.4.0.pre.test4 → 7.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/github-brands.svg +1 -0
  3. data/app/assets/images/landing-background.svg +36 -0
  4. data/app/assets/images/landing-image.svg +203 -0
  5. data/app/assets/images/{pb.logo.svg → pb-logo.svg} +2 -2
  6. data/app/assets/images/pb-white-logo.svg +15 -0
  7. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -1
  8. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +13 -4
  9. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +5 -7
  11. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb +12 -0
  12. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx +48 -0
  13. data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +2 -0
  14. data/app/pb_kits/playbook/pb_progress_step/docs/index.js +1 -0
  15. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +3 -1
  16. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +6 -0
  17. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +13 -1
  18. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +96 -20
  19. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +12 -1
  20. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +69 -0
  21. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +91 -0
  22. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +21 -1
  23. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +31 -4
  24. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +14 -0
  25. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +27 -0
  26. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
  27. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
  28. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +59 -0
  29. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +74 -0
  30. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
  31. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
  32. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +35 -0
  33. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +51 -0
  34. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
  35. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
  36. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +14 -0
  37. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +7 -0
  38. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +67 -1
  39. data/lib/playbook/version.rb +1 -1
  40. metadata +28 -11
  41. data/app/assets/images/clark.jpg +0 -0
  42. data/app/assets/images/giant.jpg +0 -0
@@ -0,0 +1,14 @@
1
+ <%= pb_rails("timestamp", props: {
2
+ timestamp: DateTime.now,
3
+ variant: "elapsed",
4
+ show_user: true,
5
+ text: "Maricris Nonato"
6
+ }) %>
7
+
8
+ <br>
9
+
10
+ <%= pb_rails("timestamp", props: {
11
+ timestamp: DateTime.now,
12
+ variant: "elapsed",
13
+ show_user: false
14
+ }) %>
@@ -0,0 +1,27 @@
1
+ import React from 'react'
2
+ import Timestamp from '../_timestamp.jsx'
3
+
4
+ const TimestampElapsed = (props) => {
5
+ return (
6
+ <div>
7
+ <Timestamp
8
+ showUser="true"
9
+ text="Maricris Nonato"
10
+ timestamp={new Date().getTime()}
11
+ variant="elapsed"
12
+ {...props}
13
+ />
14
+
15
+ <br />
16
+
17
+ <Timestamp
18
+ showUser="false"
19
+ timestamp={new Date((new Date()).getFullYear(), new Date().getMonth(), new Date().getDate()).getTime()}
20
+ variant="elapsed"
21
+ {...props}
22
+ />
23
+ </div>
24
+ )
25
+ }
26
+
27
+ export default TimestampElapsed
@@ -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
@@ -0,0 +1,59 @@
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>
@@ -0,0 +1,74 @@
1
+ import React from 'react'
2
+ import Timestamp from '../_timestamp.jsx'
3
+
4
+ const TimestampTimezones = (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
+ </div>
71
+ )
72
+ }
73
+
74
+ export default TimestampTimezones
@@ -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
+ }) %>