playbook_ui_docs 13.23.0.pre.alpha.PLAY1284investigation2657 β 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681
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_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +69 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +78 -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 +13 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 79081e0d41e5fa37b50efa3c504e4ad9e548b08c891720eeaecf7c396307e7e4
|
|
4
|
+
data.tar.gz: c93ddb1b84cd4338f185ef1e3d502a1ce275a40d54f8fba1310ea39eae839f37
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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,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"
|