playbook_ui_docs 13.24.0.pre.alpha.play1305drycontenttag2689 β†’ 13.25.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 7903510a7c3214b6eb0e60889640844c9091085af1d1f1f5d1a897e1757a47ec
4
- data.tar.gz: 81257927181c191f38977e9ef8687bc413e1e21a0314a60b41bcff6917789c1b
3
+ metadata.gz: 54249d47fb093face53275deaaf8384698f82baf614f1f78cc2205a08ebd3c53
4
+ data.tar.gz: 73040e7d8eac641cfdb2932c47ad87e398b7344ed6000ece7da5accfda2cedca
5
5
  SHA512:
6
- metadata.gz: 9df7841b958221749b7c8c85fc32f251ae16f9e8433c81a855bd9a496410fe05277724e27d7fcc5d9b2d4a4a4a4b7fedc0d65eedf77d5d7abdfcaab34bf1b8ba
7
- data.tar.gz: 75d4906587b4624ccffbc16e37f24125aa026f01c33e3d58e2ff8917c281a7be944b02aacb146bcc9cc6d6054380aff461c61f4e7488779dec7fc7bbd3067fb4
6
+ metadata.gz: 11fcc781cdc61c9d5dc75618b73f98845d695bc57206572474e93742e967b2b883d7a602902c4a779e447c5403188d8f532d8ebe2f882c7732410a302cf451b4
7
+ data.tar.gz: 8a1d3f2d28f43e071cd9e7171e2446161bb5c1e81252d018735d71221f61b64fdb2c9817c946997b9e2f667bb4ba9900daa5ceea8e35b2b18b190ead5af05262
@@ -27,5 +27,5 @@ examples:
27
27
  - dialog_default_swift: Simple
28
28
  - dialog_sizes_swift: Sizes
29
29
  - dialog_status_swift: Status
30
- - dialog_props_table: ""
30
+ - dialog_props_swift: ""
31
31
 
@@ -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,9 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - dropdown_default: Default
6
+ - dropdown_with_custom_options: Custom Options
7
+ - dropdown_with_custom_display: Custom Display
8
+ - dropdown_with_custom_trigger: Custom Trigger
9
+
@@ -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"