playbook_ui_docs 13.26.0.pre.alpha.jasoncypretpatch12816 β 13.26.0.pre.alpha.jasoncypretpatch12820
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
- data/dist/playbook-doc.js +5 -5
- metadata +8 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d869ed43199888d1505e7bd05794fcf44de925d14c51cc6dcd44202868a43927
|
|
4
|
+
data.tar.gz: 5afa2429edf1fc92bb86ea8f5be443cb44e5037064c3d1d594fd9100ce508e43
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0a90a7c875d87e3c0eb8c4aa44b5513f5734c6d645f47ea52f18a2b6f8ecd01d310e0e4a4961e6093ae69886af466821fe68633bd36295a4e8afd00718fb8abc
|
|
7
|
+
data.tar.gz: c348e70ec80f9d4a904daeefdd73456df7cab49e9705ee875e0cffd5a06060433c3d2c4da545734311bd2e6eb064d04c228ed41c4011da67263701c32d3c71fb
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
|
|
2
2
|
|
|
3
|
-
`Dropdown. Trigger`
|
|
4
|
-
`Dropdown.Container`
|
|
5
|
-
`Dropdown.Option`
|
|
3
|
+
`Dropdown. Trigger` / `dropdown/dropdown_trigger`
|
|
4
|
+
`Dropdown.Container`/ `dropdown/dropdown_container`
|
|
5
|
+
`Dropdown.Option` / `dropdown/dropdown_option`
|
|
6
6
|
|
|
7
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.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "Jasper Furniss",
|
|
5
|
+
value: "Jasper Furniss",
|
|
6
|
+
territory: "PHL",
|
|
7
|
+
title: "Senior UX Engineer",
|
|
8
|
+
id: "jasper-furniss",
|
|
9
|
+
status: "Offline"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Ramon Ruiz",
|
|
13
|
+
value: "Ramon Ruiz",
|
|
14
|
+
territory: "PHL",
|
|
15
|
+
title: "Senior UX Designer",
|
|
16
|
+
id: "ramon-ruiz",
|
|
17
|
+
status: "Away"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Jason Cypret",
|
|
21
|
+
value: "Jason Cypret",
|
|
22
|
+
territory: "PHL",
|
|
23
|
+
title: "VP of User Experience",
|
|
24
|
+
id: "jason-cypret",
|
|
25
|
+
status: "Online"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Courtney Long",
|
|
29
|
+
value: "Courtney Long",
|
|
30
|
+
territory: "PHL",
|
|
31
|
+
title: "UX Design Mentor",
|
|
32
|
+
id: "courtney-long",
|
|
33
|
+
status: "Online"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
%>
|
|
38
|
+
|
|
39
|
+
<%
|
|
40
|
+
custom_display = capture do
|
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
|
42
|
+
end
|
|
43
|
+
%>
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
47
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
|
48
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
49
|
+
<% options.each do |option| %>
|
|
50
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
52
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
55
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "π¨π¦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
30
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
31
|
+
<% options.each do |option| %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
33
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
34
|
+
<%= pb_rails("flex") do %>
|
|
35
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
36
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<% end %>
|
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
40
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'United States' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
|
6
|
+
]
|
|
7
|
+
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
13
|
+
<% options.each do |option| %>
|
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{
|
|
4
|
+
label: "United States",
|
|
5
|
+
value: "United States",
|
|
6
|
+
areaCode: "+1",
|
|
7
|
+
icon: "πΊπΈ",
|
|
8
|
+
id: "United-states"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
label: "Canada",
|
|
12
|
+
value: "Canada",
|
|
13
|
+
areaCode: "+1",
|
|
14
|
+
icon: "π¨π¦",
|
|
15
|
+
id: "canada"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Pakistan",
|
|
19
|
+
value: "Pakistan",
|
|
20
|
+
areaCode: "+92",
|
|
21
|
+
icon: "π΅π°",
|
|
22
|
+
id: "pakistan"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
|
|
26
|
+
%>
|
|
27
|
+
|
|
28
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
|
29
|
+
<%= pb_rails("dropdown/dropdown_trigger") do %>
|
|
30
|
+
<%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
|
|
33
|
+
<% options.each do |option| %>
|
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
|
35
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
36
|
+
<%= pb_rails("flex") do %>
|
|
37
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
|
38
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
42
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
<% end %>
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
rails:
|
|
3
|
+
- dropdown_default: Default
|
|
4
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
|
5
|
+
- dropdown_with_label: With Label
|
|
6
|
+
- dropdown_with_custom_options: Custom Options
|
|
7
|
+
- dropdown_with_custom_display: Custom Display
|
|
8
|
+
- dropdown_with_custom_trigger: Custom Trigger
|
|
9
|
+
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
|
10
|
+
|
|
4
11
|
react:
|
|
5
12
|
- dropdown_default: Default
|
|
6
13
|
- dropdown_subcomponent_structure: Subcomponent Structure
|