playbook_ui_docs 13.24.0.pre.alpha.play1305drycontenttag2689 β 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713
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_dialog/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +50 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +102 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +66 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +4 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +10 -10
- metadata +9 -3
- /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md β _dialog_props_swift.md} +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79167a3d16d25909c9f4110866ef74784797313510baf6574c8a9dcc7f145e5d
|
|
4
|
+
data.tar.gz: b3adb21e79b1da5706208b838fc26fb04e29444fdd2b341fed054ec9e27d5d8d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fb61c3f801e0ccebb9fe280a588095cd14499955d22de09030a3bd8449d810a273d1ac1498e8a8e2a8f3d39907d817c1c675f54254a0e31e3c99ef4f74eea90b
|
|
7
|
+
data.tar.gz: a2ce5f891a1340dfed230be9b76e61fd91f3f71e96566921a27dcb958012bf0ed3916b23a050f38de9bd8bea8e194fd2d3806ed85e16c38ccd3e7b73c419dcfa
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown } from '../../'
|
|
3
|
+
|
|
4
|
+
const DropdownDefault = (props) => {
|
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "πΊπΈ",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "πΊπ¦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "π΅π°",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
{options.map((option) => (
|
|
41
|
+
<Dropdown.Option key={option.id}
|
|
42
|
+
option={option}
|
|
43
|
+
/>
|
|
44
|
+
))}
|
|
45
|
+
</Dropdown>
|
|
46
|
+
</div>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default DropdownDefault
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomDisplay = (props) => {
|
|
5
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
6
|
+
|
|
7
|
+
const options = [
|
|
8
|
+
{
|
|
9
|
+
label: "Jasper Furniss",
|
|
10
|
+
value: "Jasper Furniss",
|
|
11
|
+
territory: "PHL",
|
|
12
|
+
title: "Senior UX Engineer",
|
|
13
|
+
id: "jasper-furniss",
|
|
14
|
+
status: "Offline"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ramon Ruiz",
|
|
18
|
+
value: "Ramon Ruiz",
|
|
19
|
+
territory: "PHL",
|
|
20
|
+
title: "Senior UX Desinger",
|
|
21
|
+
id: "ramon-ruiz",
|
|
22
|
+
status: "Away"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: "Jason Cypret",
|
|
26
|
+
value: "Jason Cypret",
|
|
27
|
+
territory: "PHL",
|
|
28
|
+
title: "VP of User Experience",
|
|
29
|
+
id: "jason-cypret",
|
|
30
|
+
status: "Online"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Courtney Long",
|
|
34
|
+
value: "Courtney Long",
|
|
35
|
+
territory: "PHL",
|
|
36
|
+
title: "UX Design Mentor",
|
|
37
|
+
id: "courtney-long",
|
|
38
|
+
status: "Online"
|
|
39
|
+
}
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
const customDisplay = () => {
|
|
43
|
+
return (
|
|
44
|
+
<>
|
|
45
|
+
{
|
|
46
|
+
selectedOption && (
|
|
47
|
+
<Avatar
|
|
48
|
+
name={selectedOption.label}
|
|
49
|
+
size="xs"
|
|
50
|
+
/>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
</>
|
|
54
|
+
)
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<div>
|
|
60
|
+
<Dropdown
|
|
61
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
62
|
+
options={options}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<Dropdown.Trigger customDisplay={customDisplay()}/>
|
|
66
|
+
{options.map((option) => (
|
|
67
|
+
<Dropdown.Option key={option.id}
|
|
68
|
+
option={option}
|
|
69
|
+
>
|
|
70
|
+
<>
|
|
71
|
+
<FlexItem>
|
|
72
|
+
<User
|
|
73
|
+
align="left"
|
|
74
|
+
avatar
|
|
75
|
+
name={option.label}
|
|
76
|
+
orientation="horizontal"
|
|
77
|
+
territory={option.territory}
|
|
78
|
+
title={option.title}
|
|
79
|
+
/>
|
|
80
|
+
</FlexItem>
|
|
81
|
+
<FlexItem>
|
|
82
|
+
<Badge
|
|
83
|
+
rounded
|
|
84
|
+
text={option.status}
|
|
85
|
+
variant={`${
|
|
86
|
+
option.status === "Offline"
|
|
87
|
+
? "neutral"
|
|
88
|
+
: option.status === "Online"
|
|
89
|
+
? "success"
|
|
90
|
+
: "warning"
|
|
91
|
+
}`}
|
|
92
|
+
/>
|
|
93
|
+
</FlexItem>
|
|
94
|
+
</>
|
|
95
|
+
</Dropdown.Option>
|
|
96
|
+
))}
|
|
97
|
+
</Dropdown>
|
|
98
|
+
</div>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export default DropdownWithCustomDisplay
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomOptions = (props) => {
|
|
5
|
+
// eslint-disable-next-line no-unused-vars
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "πΊπΈ",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "πΊπ¦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "π΅π°",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
{options.map((option) => (
|
|
41
|
+
<Dropdown.Option key={option.id}
|
|
42
|
+
option={option}
|
|
43
|
+
>
|
|
44
|
+
<>
|
|
45
|
+
<FlexItem>
|
|
46
|
+
<Flex>
|
|
47
|
+
<Icon icon={option.icon}
|
|
48
|
+
paddingRight="xs"
|
|
49
|
+
/>
|
|
50
|
+
<Body text={option.label} />
|
|
51
|
+
</Flex>
|
|
52
|
+
</FlexItem>
|
|
53
|
+
<FlexItem>
|
|
54
|
+
<Body color="light"
|
|
55
|
+
text={option.areaCode}
|
|
56
|
+
/>
|
|
57
|
+
</FlexItem>
|
|
58
|
+
</>
|
|
59
|
+
</Dropdown.Option>
|
|
60
|
+
))}
|
|
61
|
+
</Dropdown>
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export default DropdownWithCustomOptions
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
|
|
3
|
+
|
|
4
|
+
const DropdownWithCustomTrigger = (props) => {
|
|
5
|
+
|
|
6
|
+
const [selectedOption, setSelectedOption] = useState();
|
|
7
|
+
|
|
8
|
+
const options = [
|
|
9
|
+
{
|
|
10
|
+
label: "United States",
|
|
11
|
+
value: "United States",
|
|
12
|
+
areaCode: "+1",
|
|
13
|
+
icon: "πΊπΈ",
|
|
14
|
+
id: "United-states"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Ukraine",
|
|
18
|
+
value: "Ukraine",
|
|
19
|
+
areaCode: "+380",
|
|
20
|
+
icon: "πΊπ¦",
|
|
21
|
+
id: "ukraine"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Pakistan",
|
|
25
|
+
value: "Pakistan",
|
|
26
|
+
areaCode: "+92",
|
|
27
|
+
icon: "π΅π°",
|
|
28
|
+
id: "pakistan"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<Dropdown
|
|
36
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
37
|
+
options={options}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
<Dropdown.Trigger>
|
|
41
|
+
<div key={selectedOption ? selectedOption.icon : "flag"}>
|
|
42
|
+
<IconCircle
|
|
43
|
+
cursor="pointer"
|
|
44
|
+
icon={selectedOption ? selectedOption.icon : "flag"}
|
|
45
|
+
variant="royal"
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
</Dropdown.Trigger>
|
|
49
|
+
<Dropdown.Container maxWidth="xs">
|
|
50
|
+
{options.map((option) => (
|
|
51
|
+
<Dropdown.Option key={option.id}
|
|
52
|
+
option={option}
|
|
53
|
+
>
|
|
54
|
+
<>
|
|
55
|
+
<FlexItem>
|
|
56
|
+
<Flex>
|
|
57
|
+
<Icon icon={option.icon}
|
|
58
|
+
paddingRight="xs"
|
|
59
|
+
/>
|
|
60
|
+
<Body text={option.label} />
|
|
61
|
+
</Flex>
|
|
62
|
+
</FlexItem>
|
|
63
|
+
<FlexItem>
|
|
64
|
+
<Body color="light"
|
|
65
|
+
text={option.areaCode}
|
|
66
|
+
/>
|
|
67
|
+
</FlexItem>
|
|
68
|
+
</>
|
|
69
|
+
</Dropdown.Option>
|
|
70
|
+
))}
|
|
71
|
+
</Dropdown.Container>
|
|
72
|
+
</Dropdown>
|
|
73
|
+
</div>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export default DropdownWithCustomTrigger
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as DropdownDefault } from './_dropdown_default.jsx'
|
|
2
|
+
export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
|
|
3
|
+
export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
|
|
4
|
+
export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
|
data/dist/menu.yml
CHANGED
|
@@ -254,6 +254,10 @@ kits:
|
|
|
254
254
|
platforms: *web
|
|
255
255
|
description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
|
|
256
256
|
status: "stable"
|
|
257
|
+
- name: dropdown
|
|
258
|
+
platforms: *react_only
|
|
259
|
+
description: ""
|
|
260
|
+
status: "beta"
|
|
257
261
|
- name: "multi_level_select"
|
|
258
262
|
platforms: *web
|
|
259
263
|
description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
|
|
@@ -460,4 +464,4 @@ kits:
|
|
|
460
464
|
- name: "user"
|
|
461
465
|
platforms: *web
|
|
462
466
|
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
|
463
|
-
status: "stable"
|
|
467
|
+
status: "stable"
|