playbook_ui_docs 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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