playbook_ui 4.17.0 → 4.18.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/data/menu.yml +2 -1
  4. data/app/pb_kits/playbook/index.js +1 -0
  5. data/app/pb_kits/playbook/packs/examples.js +2 -0
  6. data/app/pb_kits/playbook/packs/samples.js +2 -0
  7. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb +1 -0
  8. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +3 -0
  9. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +1 -0
  10. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +22 -3
  11. data/app/pb_kits/playbook/pb_layout/_layout.jsx +6 -4
  12. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +1 -0
  13. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +26 -4
  14. data/app/pb_kits/playbook/pb_message/_message.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_message/_message.jsx +25 -7
  16. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +1 -2
  17. data/app/pb_kits/playbook/pb_message/message.rb +1 -1
  18. data/app/pb_kits/playbook/pb_person/_person.html.erb +9 -2
  19. data/app/pb_kits/playbook/pb_person/_person.jsx +34 -10
  20. data/app/pb_kits/playbook/pb_person/docs/_person_default.html.erb +5 -1
  21. data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb +1 -0
  22. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +57 -5
  23. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +32 -0
  24. data/app/pb_kits/playbook/pb_person_contact/docs/example.yml +2 -0
  25. data/app/pb_kits/playbook/pb_person_contact/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb +1 -0
  27. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx +29 -5
  28. data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +22 -13
  30. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +3 -1
  31. data/app/pb_kits/playbook/pb_timeline/_item.html.erb +28 -0
  32. data/app/pb_kits/playbook/pb_timeline/_item.jsx +54 -0
  33. data/app/pb_kits/playbook/pb_timeline/_timeline.html.erb +6 -0
  34. data/app/pb_kits/playbook/pb_timeline/_timeline.jsx +43 -0
  35. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +271 -0
  36. data/app/pb_kits/playbook/pb_timeline/docs/_description.md +3 -0
  37. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb +43 -0
  38. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx +73 -0
  39. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb +43 -0
  40. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx +73 -0
  41. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb +44 -0
  42. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +85 -0
  43. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +13 -0
  44. data/app/pb_kits/playbook/pb_timeline/docs/index.js +3 -0
  45. data/app/pb_kits/playbook/pb_timeline/item.rb +25 -0
  46. data/app/pb_kits/playbook/pb_timeline/timeline.rb +27 -0
  47. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  48. data/app/views/playbook/samples/registration/index.jsx +476 -0
  49. data/lib/playbook/version.rb +1 -1
  50. metadata +23 -3
data/app/pb_kits/playbook/pb_timeline/docs/_description.md ADDED
@@ -0,0 +1,3 @@
1
+ The timeline kit can use two different line styles in the same timeline - `solid` and `dotted` line styles.
2
+
3
+ To view different colors of icon circle, visit <a href="https://playbook.powerapp.cloud/kits/icon_circle">Icon Circle Kit</a>.
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb ADDED
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("timeline") do %>
2
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
3
+ <%= pb_rails("body", props: {
4
+ text: "Conversation started",
5
+ color: "light"
6
+ }) %>
7
+ <% end %>
8
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
9
+ <%= pb_rails("body", props: {
10
+ text: "Trip #12422",
11
+ color: "light"
12
+ }) %>
13
+ <% end %>
14
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
15
+ <%= pb_rails("body", props: {
16
+ text: "Refund issue #12422",
17
+ color: "light"
18
+ }) %>
19
+ <% end %>
20
+ <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
21
+ <%= pb_rails("body", props: {
22
+ text: "Conversation resolved",
23
+ color: "light"
24
+ }) %>
25
+ <% end %>
26
+ <% end %>
27
+
28
+ <br /><br />
29
+
30
+ <%= pb_rails("timeline") do %>
31
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted" }) do %>
32
+ <%= pb_rails("title_detail", props: {
33
+ title: "Jackson Heights",
34
+ detail: "37-27 74th Street"
35
+ }) %>
36
+ <% end %>
37
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
38
+ <%= pb_rails("title_detail", props: {
39
+ title: "Greenpoint",
40
+ detail: "81 Gate St Brooklyn"
41
+ }) %>
42
+ <% end %>
43
+ <% end %>
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx ADDED
@@ -0,0 +1,73 @@
1
+ import React from 'react'
2
+ import Timeline from '../_timeline.jsx'
3
+ import { Body, TitleDetail } from '../../'
4
+
5
+ const TimelineDefault = () => (
6
+ <div>
7
+ <Timeline>
8
+ <Timeline.Item
9
+ icon="user"
10
+ iconColor="royal"
11
+ >
12
+ <Body
13
+ color="light"
14
+ text="Conversation started"
15
+ />
16
+ </Timeline.Item>
17
+ <Timeline.Item
18
+ icon="check"
19
+ iconColor="teal"
20
+ >
21
+ <Body
22
+ color="light"
23
+ text="Trip #12422"
24
+ />
25
+ </Timeline.Item>
26
+ <Timeline.Item
27
+ icon="credit-card"
28
+ iconColor="red"
29
+ >
30
+ <Body
31
+ color="light"
32
+ text="Refund issue #12422"
33
+ />
34
+ </Timeline.Item>
35
+ <Timeline.Item
36
+ icon="smile"
37
+ iconColor="green"
38
+ >
39
+ <Body
40
+ color="light"
41
+ text="Conversation resolved"
42
+ />
43
+ </Timeline.Item>
44
+ </Timeline>
45
+
46
+ <br />
47
+ <br />
48
+
49
+ <Timeline>
50
+ <Timeline.Item
51
+ icon="user"
52
+ iconColor="royal"
53
+ lineStyle="dotted"
54
+ >
55
+ <TitleDetail
56
+ detail="37-27 74th Street"
57
+ title="Jackson heights"
58
+ />
59
+ </Timeline.Item>
60
+ <Timeline.Item
61
+ icon="check"
62
+ iconColor="teal"
63
+ >
64
+ <TitleDetail
65
+ detail="81 Gate St Brooklyn"
66
+ title="Greenpoint"
67
+ />
68
+ </Timeline.Item>
69
+ </Timeline>
70
+ </div>
71
+ )
72
+
73
+ export default TimelineDefault
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb ADDED
@@ -0,0 +1,43 @@
1
+ <%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
2
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
3
+ <%= pb_rails("body", props: {
4
+ text: "Conversation started",
5
+ color: "light"
6
+ }) %>
7
+ <% end %>
8
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
9
+ <%= pb_rails("body", props: {
10
+ text: "Trip #12422",
11
+ color: "light"
12
+ }) %>
13
+ <% end %>
14
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
15
+ <%= pb_rails("body", props: {
16
+ text: "Refund issue #12422",
17
+ color: "light"
18
+ }) %>
19
+ <% end %>
20
+ <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
21
+ <%= pb_rails("body", props: {
22
+ text: "Conversation resolved",
23
+ color: "light"
24
+ }) %>
25
+ <% end %>
26
+ <% end %>
27
+
28
+ <br /><br />
29
+
30
+ <%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
31
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"}) do %>
32
+ <%= pb_rails("title_detail", props: {
33
+ title: "Jackson Heights",
34
+ detail: "37-27 74th Street"
35
+ }) %>
36
+ <% end %>
37
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
38
+ <%= pb_rails("title_detail", props: {
39
+ title: "Greenpoint",
40
+ detail: "81 Gate St Brooklyn"
41
+ }) %>
42
+ <% end %>
43
+ <% end %>
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx ADDED
@@ -0,0 +1,73 @@
1
+ import React from 'react'
2
+ import Timeline from '../_timeline.jsx'
3
+ import { Body, TitleDetail } from '../../'
4
+
5
+ const TimelineVertical = () => (
6
+ <div>
7
+ <Timeline orientation="vertical">
8
+ <Timeline.Item
9
+ icon="user"
10
+ iconColor="royal"
11
+ >
12
+ <Body
13
+ color="light"
14
+ text="Conversation started"
15
+ />
16
+ </Timeline.Item>
17
+ <Timeline.Item
18
+ icon="check"
19
+ iconColor="teal"
20
+ >
21
+ <Body
22
+ color="light"
23
+ text="Trip #12422"
24
+ />
25
+ </Timeline.Item>
26
+ <Timeline.Item
27
+ icon="credit-card"
28
+ iconColor="red"
29
+ >
30
+ <Body
31
+ color="light"
32
+ text="Refund issue #12422"
33
+ />
34
+ </Timeline.Item>
35
+ <Timeline.Item
36
+ icon="smile"
37
+ iconColor="green"
38
+ >
39
+ <Body
40
+ color="light"
41
+ text="Conversation resolved"
42
+ />
43
+ </Timeline.Item>
44
+ </Timeline>
45
+
46
+ <br />
47
+ <br />
48
+
49
+ <Timeline orientation="vertical">
50
+ <Timeline.Item
51
+ icon="user"
52
+ iconColor="royal"
53
+ lineStyle="dotted"
54
+ >
55
+ <TitleDetail
56
+ detail="37-27 74th Street"
57
+ title="Jackson heights"
58
+ />
59
+ </Timeline.Item>
60
+ <Timeline.Item
61
+ icon="check"
62
+ iconColor="teal"
63
+ >
64
+ <TitleDetail
65
+ detail="81 Gate St Brooklyn"
66
+ title="Greenpoint"
67
+ />
68
+ </Timeline.Item>
69
+ </Timeline>
70
+ </div>
71
+ )
72
+
73
+ export default TimelineVertical
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb ADDED
@@ -0,0 +1,44 @@
1
+ <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
3
+ <%= pb_rails("title_detail", props: {
4
+ title: "Jackson Heights",
5
+ detail: "37-27 74th Street"
6
+ }) %>
7
+ <% end %>
8
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
9
+ <%= pb_rails("title_detail", props: {
10
+ title: "Greenpoint",
11
+ detail: "81 Gate St Brooklyn"
12
+ }) %>
13
+ <% end %>
14
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
15
+ <%= pb_rails("title_detail", props: {
16
+ title: "Society Hill",
17
+ detail: "72 E St Astoria"
18
+ }) %>
19
+ <% end %>
20
+ <% end %>
21
+
22
+ <br /><br /><br />
23
+
24
+ <%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
25
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today }) do %>
26
+ <%= pb_rails("title_detail", props: {
27
+ title: "Jackson Heights",
28
+ detail: "37-27 74th Street"
29
+ }) %>
30
+ <% end %>
31
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
32
+ <%= pb_rails("title_detail", props: {
33
+ title: "Greenpoint",
34
+ detail: "81 Gate St Brooklyn"
35
+ }) %>
36
+ <% end %>
37
+ <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do %>
38
+ <%= pb_rails("title_detail", props: {
39
+ title: "Society Hill",
40
+ detail: "72 E St Astoria"
41
+ }) %>
42
+ <% end %>
43
+ <% end %>
44
+
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx ADDED
@@ -0,0 +1,85 @@
1
+ import React from 'react'
2
+ import Timeline from '../_timeline.jsx'
3
+ import { TitleDetail } from '../../'
4
+
5
+ const TimelineWithDate = () => (
6
+ <div>
7
+ <Timeline
8
+ orientation="horizontal"
9
+ showDate
10
+ >
11
+ <Timeline.Item
12
+ date={new Date()}
13
+ icon="user"
14
+ iconColor="royal"
15
+ >
16
+ <TitleDetail
17
+ detail="37-27 74th Street"
18
+ title="Jackson heights"
19
+ />
20
+ </Timeline.Item>
21
+ <Timeline.Item
22
+ icon="check"
23
+ iconColor="teal"
24
+ lineStyle="dotted"
25
+ >
26
+ <TitleDetail
27
+ detail="81 Gate St Brooklyn"
28
+ title="Greenpoint"
29
+ />
30
+ </Timeline.Item>
31
+ <Timeline.Item
32
+ date={new Date().setDate(new Date().getDate() + 1)}
33
+ icon="map-marker-alt"
34
+ iconColor="purple"
35
+ >
36
+ <TitleDetail
37
+ detail="72 E St Astoria"
38
+ title="Society Hill"
39
+ />
40
+ </Timeline.Item>
41
+ </Timeline>
42
+
43
+ <br />
44
+ <br />
45
+ <br />
46
+
47
+ <Timeline
48
+ orientation="vertical"
49
+ showDate
50
+ >
51
+ <Timeline.Item
52
+ date={new Date()}
53
+ icon="user"
54
+ iconColor="royal"
55
+ >
56
+ <TitleDetail
57
+ detail="37-27 74th Street"
58
+ title="Jackson heights"
59
+ />
60
+ </Timeline.Item>
61
+ <Timeline.Item
62
+ icon="check"
63
+ iconColor="teal"
64
+ lineStyle="dotted"
65
+ >
66
+ <TitleDetail
67
+ detail="81 Gate St Brooklyn"
68
+ title="Greenpoint"
69
+ />
70
+ </Timeline.Item>
71
+ <Timeline.Item
72
+ date={new Date().setDate(new Date().getDate() + 1)}
73
+ icon="map-marker-alt"
74
+ iconColor="purple"
75
+ >
76
+ <TitleDetail
77
+ detail="72 E St Astoria"
78
+ title="Society Hill"
79
+ />
80
+ </Timeline.Item>
81
+ </Timeline>
82
+ </div>
83
+ )
84
+
85
+ export default TimelineWithDate
data/app/pb_kits/playbook/pb_timeline/docs/example.yml ADDED
@@ -0,0 +1,13 @@
1
+ examples:
2
+
3
+ rails:
4
+ - timeline_default: Default
5
+ - timeline_vertical: Vertical
6
+ - timeline_with_date: With Date
7
+
8
+
9
+ react:
10
+ - timeline_default: Default
11
+ - timeline_vertical: Vertical
12
+ - timeline_with_date: With Date
13
+
data/app/pb_kits/playbook/pb_timeline/docs/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { default as TimelineDefault } from './_timeline_default.jsx'
2
+ export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
+ export { default as TimelineWithDate } from './_timeline_with_date.jsx'
data/app/pb_kits/playbook/pb_timeline/item.rb ADDED
@@ -0,0 +1,25 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbTimeline
5
+ class Item
6
+ include Playbook::Props
7
+
8
+ partial "pb_timeline/item"
9
+
10
+ prop :date
11
+ prop :icon, type: Playbook::Props::String,
12
+ default: "user"
13
+ prop :icon_color, type: Playbook::Props::Enum,
14
+ values: %w[default royal blue purple teal red yellow green],
15
+ default: "default"
16
+ prop :line_style, type: Playbook::Props::Enum,
17
+ values: %w[solid dotted],
18
+ default: "solid"
19
+
20
+ def classname
21
+ generate_classname("pb_timeline_item_kit", line_style)
22
+ end
23
+ end
24
+ end
25
+ end
data/app/pb_kits/playbook/pb_timeline/timeline.rb ADDED
@@ -0,0 +1,27 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbTimeline
5
+ class Timeline
6
+ include Playbook::Props
7
+
8
+ partial "pb_timeline/timeline"
9
+
10
+ prop :orientation, type: Playbook::Props::Enum,
11
+ values: %w[vertical horizontal],
12
+ default: "horizontal"
13
+ prop :show_date, type: Playbook::Props::Boolean,
14
+ default: false
15
+
16
+ def classname
17
+ generate_classname("pb_timeline_kit", orientation, date_class)
18
+ end
19
+
20
+ private
21
+
22
+ def date_class
23
+ show_date ? "with_date" : nil
24
+ end
25
+ end
26
+ end
27
+ end