playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +66 -46
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  11. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  14. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -3
  15. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} +3 -3
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +6 -5
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} +3 -3
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -1
  25. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger_rails.html.erb → _dropdown_with_custom_trigger.html.erb} +3 -3
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -1
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -1
  29. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -6
  30. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  31. data/dist/menu.yml +2 -2
  32. data/dist/playbook-doc.js +9 -9
  33. metadata +9 -19
  34. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
  35. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
  36. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +0 -73
  37. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md +0 -5
  38. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb +0 -20
  39. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md +0 -5
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md +0 -6
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +0 -5
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md +0 -1
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md +0 -1
  44. /data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_display_rails.html.erb → _dropdown_with_custom_display.html.erb} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c4d6b57eeffaa765c9c090f0c5a1383d3a0d936f584100c34e4a2d54d0bc49bb
4
- data.tar.gz: a7ff852dfc6a775fb551257485d008ca23e3dd799849a7854b8346c2ce511f36
3
+ metadata.gz: c5a0ca4ba49f9761948d5396d862f7a7dca62755280c4a327d8be07578131efa
4
+ data.tar.gz: d47839a1a9c0f199291420ecf5d116ce04f79e1154a3f02b69519a667b4496ed
5
5
  SHA512:
6
- metadata.gz: d90ee5ae388bd319bb2523813c5be923c5d46d7b9fc68bc03126f01a86f47250e48d43daa3505495b3688d24569c0f8fbe71de634df6224581e2ae6bd01f65a1
7
- data.tar.gz: f027b32612d0bf2a761b4197f14e91eca40ebe1f858283fe729f81cbdbad6548bab1d33efd01b959e6dc594a41a02d3cc3f4a7a47a8d0774520a22a8a38679cc
6
+ metadata.gz: 3a8e4c4a70ee7b4c2cf06da4a1215219109050161b27fbee7fbeadfbcb86d23ecd95b3282f2ba3483832553f826343c45116cea1aae33d56a86a055ded39b195
7
+ data.tar.gz: 139f88815ff1cbda2ff72a5a4915c3b955f47f32fc4f25e9b52286ea4f764a874eeef219d5906c99bbf338cb1b24cb40de4f85ddfd5c98952fa5513edfbae907
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb CHANGED
@@ -1,51 +1,71 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "badge",
4
+ text: "12",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
1
12
 
2
- <%= pb_rails("avatar", props: {
3
- component_overlay: {
4
- component: "badge",
5
- text: "12",
6
- placement: "bottom-right"
7
- },
8
- name: "Terry Johnson",
9
- size: "sm",
10
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
11
- margin_bottom: "sm"
12
- }) %>
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "badge",
16
+ text: "12",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
13
24
 
14
- <%= pb_rails("avatar", props: {
15
- component_overlay: {
16
- component: "badge",
17
- text: "12",
18
- placement: "top-left"
19
- },
20
- name: "Terry Johnson",
21
- size: "md",
22
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
23
- margin_bottom: "sm"
24
- }) %>
25
+ <%= pb_rails("avatar", props: {
26
+ component_overlay: {
27
+ component: "badge",
28
+ text: "12",
29
+ placement: "bottom-right"
30
+ },
31
+ name: "Terry Johnson",
32
+ size: "sm",
33
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
+ margin_bottom: "sm"
35
+ }) %>
25
36
 
26
- <%= pb_rails("avatar", props: {
27
- component_overlay: {
28
- component: "badge",
29
- text: "On Roadtrip",
30
- placement: "top-center",
31
- variant: "info"
32
- },
33
- name: "Terry Johnson",
34
- size: "lg",
35
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
36
- margin_bottom: "sm"
37
- }) %>
37
+ <%= pb_rails("avatar", props: {
38
+ component_overlay: {
39
+ component: "badge",
40
+ text: "12",
41
+ placement: "bottom-left"
42
+ },
43
+ name: "Terry Johnson",
44
+ size: "md",
45
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
+ margin_bottom: "sm"
47
+ }) %>
38
48
 
39
- <%= pb_rails("avatar", props: {
40
- component_overlay: {
41
- component: "badge",
42
- text: "Out of Office",
43
- placement: "bottom-center",
44
- variant: "error"
45
- },
46
- name: "Terry Johnson",
47
- size: "xl",
48
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
49
- margin_bottom: "sm"
50
- }) %>
49
+ <%= pb_rails("avatar", props: {
50
+ component_overlay: {
51
+ component: "badge",
52
+ text: "12",
53
+ placement: "top-left"
54
+ },
55
+ name: "Terry Johnson",
56
+ size: "lg",
57
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
+ margin_bottom: "sm"
59
+ }) %>
51
60
 
61
+ <%= pb_rails("avatar", props: {
62
+ component_overlay: {
63
+ component: "badge",
64
+ text: "12",
65
+ placement: "top-right"
66
+ },
67
+ name: "Terry Johnson",
68
+ size: "xl",
69
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
+ margin_bottom: "sm"
71
+ }) %>
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx CHANGED
@@ -4,6 +4,28 @@ import { Avatar } from '../..'
4
4
  const AvatarBadgeComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "badge",
10
+ placement: "top-left",
11
+ text: "12"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "badge",
21
+ placement: "top-right",
22
+ text: "12"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
7
29
  <Avatar
8
30
  componentOverlay={{
9
31
  component: "badge",
@@ -18,7 +40,7 @@ const AvatarBadgeComponentOverlay = () => {
18
40
  <Avatar
19
41
  componentOverlay={{
20
42
  component: "badge",
21
- placement: "top-left",
43
+ placement: "bottom-left",
22
44
  text: "12"
23
45
  }}
24
46
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -29,9 +51,8 @@ const AvatarBadgeComponentOverlay = () => {
29
51
  <Avatar
30
52
  componentOverlay={{
31
53
  component: "badge",
32
- placement: "top-center",
33
- text: "On Roadtip",
34
- variant: "info"
54
+ placement: "top-left",
55
+ text: "12"
35
56
  }}
36
57
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
37
58
  marginBottom="sm"
@@ -41,14 +62,14 @@ const AvatarBadgeComponentOverlay = () => {
41
62
  <Avatar
42
63
  componentOverlay={{
43
64
  component: "badge",
44
- placement: "bottom-center",
45
- text: "Out of Office",
46
- variant: "error"
65
+ placement: "top-right",
66
+ text: "12"
47
67
  }}
48
68
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
49
69
  marginBottom="sm"
50
70
  size="xl"
51
- />
71
+ />
72
+
52
73
  </div>
53
74
  )
54
75
  }
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb CHANGED
@@ -1,9 +1,32 @@
1
+ <%= pb_rails("avatar", props: {
2
+ component_overlay: {
3
+ component: "icon_circle",
4
+ icon: "plus",
5
+ placement: "top-left"
6
+ },
7
+ name: "Terry Johnson",
8
+ size: "xxs",
9
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
+ margin_bottom: "sm"
11
+ }) %>
12
+
13
+ <%= pb_rails("avatar", props: {
14
+ component_overlay: {
15
+ component: "icon_circle",
16
+ icon: "plus",
17
+ placement: "top-right"
18
+ },
19
+ name: "Terry Johnson",
20
+ size: "xs",
21
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
+ margin_bottom: "sm"
23
+ }) %>
24
+
1
25
  <%= pb_rails("avatar", props: {
2
26
  component_overlay: {
3
27
  component: "icon_circle",
4
- icon: "shield",
5
- placement: "bottom-right",
6
- variant: "royal"
28
+ icon: "plus",
29
+ placement: "bottom-right"
7
30
  },
8
31
  name: "Terry Johnson",
9
32
  size: "sm",
@@ -14,9 +37,8 @@
14
37
  <%= pb_rails("avatar", props: {
15
38
  component_overlay: {
16
39
  component: "icon_circle",
17
- icon: "check",
18
- placement: "top-right",
19
- variant: "green"
40
+ icon: "plus",
41
+ placement: "bottom-left"
20
42
  },
21
43
  name: "Terry Johnson",
22
44
  size: "md",
@@ -27,9 +49,8 @@
27
49
  <%= pb_rails("avatar", props: {
28
50
  component_overlay: {
29
51
  component: "icon_circle",
30
- icon: "lock",
31
- placement: "top-left",
32
- variant: "red"
52
+ icon: "plus",
53
+ placement: "top-left"
33
54
  },
34
55
  name: "Terry Johnson",
35
56
  size: "lg",
@@ -40,12 +61,11 @@
40
61
  <%= pb_rails("avatar", props: {
41
62
  component_overlay: {
42
63
  component: "icon_circle",
43
- icon: "star",
44
- placement: "left-center",
45
- variant: "yellow"
64
+ icon: "plus",
65
+ placement: "top-right"
46
66
  },
47
67
  name: "Terry Johnson",
48
68
  size: "xl",
49
69
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
50
70
  margin_bottom: "sm"
51
- }) %>
71
+ }) %>
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx CHANGED
@@ -4,54 +4,73 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "iconCircle",
10
- placement: "bottom-right",
11
- icon: "shield",
12
- variant: "royal"
13
- }}
14
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
15
- marginBottom="sm"
16
- size="sm"
17
- />
18
-
19
- <Avatar
20
- componentOverlay={{
21
- component: "iconCircle",
22
- placement: "bottom-right",
23
- icon: "check",
24
- variant: "green"
25
- }}
26
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
27
- marginBottom="sm"
28
- size="md"
29
- />
30
-
31
- <Avatar
32
- componentOverlay={{
33
- component: "iconCircle",
34
- placement: "top-left",
35
- icon: "lock",
36
- variant: "red"
37
- }}
38
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
39
- marginBottom="sm"
40
- size="lg"
41
- />
42
-
43
- <Avatar
44
- componentOverlay={{
45
- component: "iconCircle",
46
- placement: "left-center",
47
- icon: "star",
48
- variant: "yellow"
49
- }}
50
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
51
- marginBottom="sm"
52
- size="xl"
53
- />
54
- </div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ icon: "plus",
11
+ placement: "top-left"
12
+ }}
13
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
+ marginBottom="sm"
15
+ size="xxs"
16
+ />
17
+
18
+ <Avatar
19
+ componentOverlay={{
20
+ component: "iconCircle",
21
+ icon: "plus",
22
+ placement: "top-right"
23
+ }}
24
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
+ marginBottom="sm"
26
+ size="xs"
27
+ />
28
+
29
+ <Avatar
30
+ componentOverlay={{
31
+ component: "iconCircle",
32
+ icon: "plus",
33
+ placement: "bottom-right",
34
+ }}
35
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
+ marginBottom="sm"
37
+ size="sm"
38
+ />
39
+
40
+ <Avatar
41
+ componentOverlay={{
42
+ component: "iconCircle",
43
+ icon: "plus",
44
+ placement: "bottom-left"
45
+ }}
46
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
+ marginBottom="sm"
48
+ size="md"
49
+ />
50
+
51
+ <Avatar
52
+ componentOverlay={{
53
+ component: "iconCircle",
54
+ icon: "plus",
55
+ placement: "top-left"
56
+ }}
57
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
+ marginBottom="sm"
59
+ size="lg"
60
+ />
61
+
62
+ <Avatar
63
+ componentOverlay={{
64
+ component: "iconCircle",
65
+ icon: "plus",
66
+ placement: "top-right"
67
+ }}
68
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
+ marginBottom="sm"
70
+ size="xl"
71
+ />
72
+
73
+ </div>
55
74
  )
56
75
  }
57
76
 
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx CHANGED
@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
+ <br/>
61
+ <Avatar
62
+ imageAlt="Terry Johnson Standing"
63
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
+ name="Terry Johnson"
65
+ overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
+ size="lg"
67
+ status="offline"
68
+ {...props}
69
+ />
70
+ <br/>
71
+ <Avatar
72
+ imageAlt="Terry Johnson Standing"
73
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
+ name="Terry Johnson"
75
+ overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
+ size="xl"
77
+ status="offline"
78
+ {...props}
79
+ />
60
80
  </div>
61
81
  )
62
82
  }
data/app/pb_kits/playbook/pb_avatar/docs/example.yml CHANGED
@@ -4,14 +4,14 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
- - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
7
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
8
8
  - avatar_badge_component_overlay: Badge Component Overlay
9
9
  react:
10
10
  - avatar_default: Default
11
11
  - avatar_monogram: Monogram
12
12
  - avatar_no_image: "Bad Image Link"
13
13
  - avatar_status: Status
14
- - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
14
+ - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -42,23 +42,3 @@
42
42
  dark: true
43
43
  }) %>
44
44
  <% end %>
45
-
46
- <%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
47
-
48
- <%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" }) do %>
49
- <%= pb_rails("body", props: {
50
- text: "Success Subtle"
51
- }) %>
52
- <% end %>
53
-
54
- <%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" }) do %>
55
- <%= pb_rails("body", props: {
56
- text: "Warning Subtle"
57
- }) %>
58
- <% end %>
59
-
60
- <%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" }) do %>
61
- <%= pb_rails("body", props: {
62
- text: "Info Subtle"
63
- }) %>
64
- <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -90,47 +90,7 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
94
- <Title
95
- {...props}
96
- marginBottom="sm"
97
- size={4}
98
- tag="h4"
99
- text="Subtle Status Colors"
100
- />
101
-
102
- <Card
103
- background="success_subtle"
104
- marginBottom="sm"
105
- {...props}
106
- >
107
- <Body
108
- text="Success Subtle"
109
- {...props}
110
- />
111
- </Card>
112
-
113
- <Card
114
- background="warning_subtle"
115
- marginBottom="sm"
116
- {...props}
117
- >
118
- <Body
119
- text="Warning Subtle"
120
- {...props}
121
- />
122
- </Card>
123
-
124
- <Card
125
- background="info_subtle"
126
- marginBottom="sm"
127
- {...props}
128
- >
129
- <Body
130
- text="Info Subtle"
131
- {...props}
132
- />
133
- </Card>
93
+
134
94
  </div>
135
95
  )
136
96
  }
data/app/pb_kits/playbook/pb_card/docs/_card_background.md CHANGED
@@ -1 +1 @@
1
- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
1
+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -67,4 +67,4 @@
67
67
  <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
68
  Body
69
69
  <% end %>
70
- <% end %>
70
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED
@@ -1 +1 @@
1
- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
1
+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md CHANGED
@@ -1 +1 @@
1
- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
1
+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_collapsible/docs/example.yml CHANGED
@@ -7,7 +7,6 @@ examples:
7
7
  - collapsible_icons: Custom Icons
8
8
  - collapsible_external_controls: Toggle Collapsible With External Controls
9
9
  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
10
- - collapsible_custom_main_rails: Custom Main Section
11
10
 
12
11
  react:
13
12
  - collapsible_default: Default
@@ -15,8 +14,6 @@ examples:
15
14
  - collapsible_color: Icon Color
16
15
  - collapsible_icons: Custom Icons
17
16
  - collapsible_state: useCollapsible Hook
18
- - collapsible_custom_main: Custom Main Section
19
-
20
17
 
21
18
  swift:
22
19
  - collapsible_default_swift: Default
data/app/pb_kits/playbook/pb_collapsible/docs/index.js CHANGED
@@ -2,5 +2,4 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
2
2
  export { default as CollapsibleSize } from './_collapsible_size.jsx'
3
3
  export { default as CollapsibleColor } from './_collapsible_color.jsx'
4
4
  export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
5
- export { default as CollapsibleState } from './_collapsible_state.jsx'
6
- export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
5
+ export {default as CollapsibleState } from './_collapsible_state.jsx'
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md CHANGED
@@ -1 +1 @@
1
- This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.
1
+ The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure_rails.html.erb → _dropdown_subcomponent_structure.html.erb} RENAMED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md CHANGED
@@ -1,6 +1,7 @@
1
- The dropdown is built using all of the following subcomponents:
1
+ The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
2
2
 
3
- `Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown.
4
- `Dropdown.Container` is the floating container that wraps the list of dropdown options.
5
- `Dropdown.Option` renders options that are passed to the container.
6
- Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
3
+ `Dropdown. Trigger` / `dropdown/dropdown_trigger`
4
+ `Dropdown.Container`/ `dropdown/dropdown_container`
5
+ `Dropdown.Option` / `dropdown/dropdown_option`
6
+
7
+ See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md CHANGED
@@ -1,5 +1,5 @@
1
- Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
2
2
 
3
- The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
3
+ The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
4
4
 
5
- The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
5
+ The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options_rails.html.erb → _dropdown_with_custom_options.html.erb} RENAMED
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "us"
8
+ id: "United-states"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "ca"
15
+ id: "canada"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pk"
22
+ id: "pakistan"
23
23
  }
24
24
  ]
25
25