playbook_ui_docs 13.23.0.pre.alpha.PLAY1284investigation2657 β†’ 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681

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: 06bdd9ccfee263666899576e57d9ef54ccb2e7906006bcf984b7cf156aa9a8f3
4
- data.tar.gz: 66c6fabfcc30a18004c79541dc5c354387a624261c3460b7c8442ef5872ec712
3
+ metadata.gz: 79081e0d41e5fa37b50efa3c504e4ad9e548b08c891720eeaecf7c396307e7e4
4
+ data.tar.gz: c93ddb1b84cd4338f185ef1e3d502a1ce275a40d54f8fba1310ea39eae839f37
5
5
  SHA512:
6
- metadata.gz: 617bf467c44ac9574c0a09f6818234df1d5f8db9f9303a620052ccc748d9112a03ac5c54ed57a0301dd3b091d9b5933ba752d29bbac7368cb9c89a398d69dcb0
7
- data.tar.gz: 408a9dd519c47b3fde7761c3eccbb4975f12ac4f4d846a0e587b7c7d0ed78c50399196f92599440909a7c473ee5ddf6aa8aaff2a760d0309559d6a5cbca52f28
6
+ metadata.gz: 853eb93e0050e17154bc08c52487704a1acf84ca616414b1f6fd47f93fec9d16210e7b5d743a0905f4f5ba1f64a65bec3f71ece8a2eaa1c26530314a3c7193c7
7
+ data.tar.gz: 84588547fe0e9d5cd60cc8ba3c3f1a86c3869caa83b7a426f4095ff8119c36e5031557ef0bcd811771f56bf5750925d2c85b1c8e2dd1fc3689fe070e9cda91bb
@@ -0,0 +1,23 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [-475, 400, -1000, 354, -856],
4
+ threshold: 0
5
+ }, {
6
+ name: 'Manufacturing',
7
+ data: [1475, 200, 1000, 654, -656],
8
+ threshold: 0
9
+ },
10
+ {
11
+ name: 'Sales & Distribution',
12
+ data: [1270, 100, -1200, 554, 756],
13
+ threshold: 0
14
+ }] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_title: 'Number of Employees',
18
+ chart_data: data,
19
+ id: "bar-default",
20
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
21
+ title: 'Bar Graph with Negative Numbers',
22
+ legend: true,
23
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [-475, 400, -1000, 354, -856],
8
+ threshold: 0
9
+ }, {
10
+ name: 'Manufacturing',
11
+ data: [1475, 200, 1000, 654, -656],
12
+ threshold: 0
13
+ },
14
+ {
15
+ name: 'Sales & Distribution',
16
+ data: [1270, 100, -1200, 554, 756],
17
+ threshold: 0
18
+ }]
19
+
20
+
21
+ const BarGraphStacked = (props) => (
22
+ <div>
23
+ <BarGraph
24
+ axisTitle="Number of Employees"
25
+ chartData={chartData}
26
+ id="bar-default"
27
+ legend
28
+ title="Bar Graph with Negative Numbers"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ {...props}
31
+ />
32
+ </div>
33
+ )
34
+
35
+ export default BarGraphStacked
@@ -0,0 +1,22 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475, 200, 3000, 654, 656],
4
+ },
5
+ {
6
+ name: 'Manufacturing',
7
+ data: [1270, 800, 200, 454, 956],
8
+ }, {
9
+ name: 'Sales & Distribution',
10
+ data: [975, 1600, 1500, 924, 500],
11
+ }] %>
12
+
13
+ <%= pb_rails("bar_graph", props: {
14
+ axis_title: 'Number of Employees',
15
+ chart_data: data,
16
+ id: "bar-default",
17
+ y_axis_min: 0,
18
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
19
+ stacking: "normal",
20
+ title: 'Bar Graph with Stacked Columns',
21
+ legend: true,
22
+ }) %>
@@ -0,0 +1,34 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ },
9
+ {
10
+ name: 'Manufacturing',
11
+ data: [1270, 800, 200, 454, 956],
12
+ }, {
13
+ name: 'Sales & Distribution',
14
+ data: [975, 1600, 1500, 924, 500],
15
+ }]
16
+
17
+
18
+ const BarGraphStacked = (props) => (
19
+ <div>
20
+ <BarGraph
21
+ axisTitle="Number Of Employees"
22
+ chartData={chartData}
23
+ id="bar-default"
24
+ legend
25
+ stacking="normal"
26
+ title="Bar Graph with Stacked Columns"
27
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
28
+ yAxisMin={0}
29
+ {...props}
30
+ />
31
+ </div>
32
+ )
33
+
34
+ export default BarGraphStacked
@@ -0,0 +1 @@
1
+ The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options.
@@ -9,6 +9,8 @@ examples:
9
9
  - bar_graph_spline: Spline
10
10
  - bar_graph_colors: Color Overrides
11
11
  - bar_graph_custom: Custom Overrides
12
+ - bar_graph_stacked: Stacked
13
+ - bar_graph_negative_numbers: Negative Numbers
12
14
  - bar_graph_secondary_y_axis: Secondary Y-Axis
13
15
 
14
16
 
@@ -21,4 +23,6 @@ examples:
21
23
  - bar_graph_spline: Spline
22
24
  - bar_graph_colors: Color Overrides
23
25
  - bar_graph_custom: Custom Overrides
26
+ - bar_graph_stacked: Stacked
27
+ - bar_graph_negative_numbers: Negative Numbers
24
28
  - bar_graph_secondary_y_axis: Secondary Y-Axis
@@ -6,4 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
8
  export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
+ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
+ export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
9
11
  export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
@@ -0,0 +1,53 @@
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
+ <Dropdown.Trigger/>
41
+ <Dropdown.Container>
42
+ {options.map((option) => (
43
+ <Dropdown.Option key={option.id}
44
+ option={option}
45
+ />
46
+ ))}
47
+ </Dropdown.Container>
48
+ </Dropdown>
49
+ </div>
50
+ )
51
+ }
52
+
53
+ export default DropdownDefault
@@ -0,0 +1,104 @@
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="sm"
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
+ <Dropdown.Container>
67
+ {options.map((option) => (
68
+ <Dropdown.Option key={option.id}
69
+ option={option}
70
+ >
71
+ <>
72
+ <FlexItem>
73
+ <User
74
+ align="left"
75
+ avatar
76
+ name={option.label}
77
+ orientation="horizontal"
78
+ territory={option.territory}
79
+ title={option.title}
80
+ />
81
+ </FlexItem>
82
+ <FlexItem>
83
+ <Badge
84
+ rounded
85
+ text={option.status}
86
+ variant={`${
87
+ option.status === "Offline"
88
+ ? "neutral"
89
+ : option.status === "Online"
90
+ ? "success"
91
+ : "warning"
92
+ }`}
93
+ />
94
+ </FlexItem>
95
+ </>
96
+ </Dropdown.Option>
97
+ ))}
98
+ </Dropdown.Container>
99
+ </Dropdown>
100
+ </div>
101
+ )
102
+ }
103
+
104
+ export default DropdownWithCustomDisplay
@@ -0,0 +1,69 @@
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
+ <Dropdown.Trigger/>
41
+ <Dropdown.Container>
42
+ {options.map((option) => (
43
+ <Dropdown.Option key={option.id}
44
+ option={option}
45
+ >
46
+ <>
47
+ <FlexItem>
48
+ <Flex>
49
+ <Icon icon={option.icon}
50
+ paddingRight="xs"
51
+ />
52
+ <Body text={option.label} />
53
+ </Flex>
54
+ </FlexItem>
55
+ <FlexItem>
56
+ <Body color="light"
57
+ text={option.areaCode}
58
+ />
59
+ </FlexItem>
60
+ </>
61
+ </Dropdown.Option>
62
+ ))}
63
+ </Dropdown.Container>
64
+ </Dropdown>
65
+ </div>
66
+ )
67
+ }
68
+
69
+ export default DropdownWithCustomOptions
@@ -0,0 +1,78 @@
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
+
50
+ <Dropdown.Container>
51
+ {options.map((option) => (
52
+ <Dropdown.Option key={option.id}
53
+ option={option}
54
+ >
55
+ <>
56
+ <FlexItem>
57
+ <Flex>
58
+ <Icon icon={option.icon}
59
+ paddingRight="xs"
60
+ />
61
+ <Body text={option.label} />
62
+ </Flex>
63
+ </FlexItem>
64
+ <FlexItem>
65
+ <Body color="light"
66
+ text={option.areaCode}
67
+ />
68
+ </FlexItem>
69
+ </>
70
+ </Dropdown.Option>
71
+ ))}
72
+ </Dropdown.Container>
73
+ </Dropdown>
74
+ </div>
75
+ )
76
+ }
77
+
78
+ 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"