playbook_ui 4.18.1.pre.alpha1 → 5.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/app/helpers/playbook/pb_sample_helper.rb +1 -1
- data/app/pb_kits/playbook/_playbook.scss +1 -1
- data/app/pb_kits/playbook/data/menu.yml +3 -1
- data/app/pb_kits/playbook/packs/examples.js +2 -0
- data/app/pb_kits/playbook/packs/samples.js +2 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +21 -4
- data/app/pb_kits/playbook/pb_card/_card.scss +1 -72
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +72 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +0 -1
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_installer/_installer.html.erb +16 -0
- data/app/pb_kits/playbook/pb_installer/_installer.jsx +54 -0
- data/app/pb_kits/playbook/pb_installer/_installer.scss +7 -0
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +8 -0
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +16 -0
- data/app/pb_kits/playbook/pb_installer/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_installer/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_installer/installer.rb +18 -0
- data/app/pb_kits/playbook/pb_layout/_body.html.erb +1 -1
- data/app/pb_kits/playbook/pb_layout/_column.html.erb +7 -0
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +31 -13
- data/app/pb_kits/playbook/pb_layout/_layout.scss +54 -0
- data/app/pb_kits/playbook/pb_layout/body.rb +4 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb +140 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx +1234 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb +57 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx +46 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_layout/layout.rb +12 -4
- data/app/pb_kits/playbook/pb_list/_item.html.erb +3 -2
- data/app/pb_kits/playbook/pb_list/_list.html.erb +3 -3
- data/app/pb_kits/playbook/pb_list/_list.jsx +55 -10
- data/app/pb_kits/playbook/pb_list/_list_item.jsx +41 -18
- data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx +21 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx +0 -5
- data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx +22 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx +22 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx +22 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx +22 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx +75 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx +75 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx +21 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx +21 -0
- data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx +21 -0
- data/app/pb_kits/playbook/pb_list/docs/example.yml +12 -1
- data/app/pb_kits/playbook/pb_list/docs/index.js +11 -0
- data/app/pb_kits/playbook/pb_popover/_popover.html.erb +4 -4
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +41 -8
- data/app/pb_kits/playbook/pb_popover/_popover.scss +44 -7
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +42 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +99 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +19 -7
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +22 -6
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +11 -10
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +22 -18
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb +24 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +56 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb +14 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +50 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +12 -8
- data/app/pb_kits/playbook/pb_popover/docs/index.js +3 -3
- data/app/pb_kits/playbook/pb_popover/index.js +18 -9
- data/app/pb_kits/playbook/pb_popover/popover.rb +26 -2
- data/app/pb_kits/playbook/pb_title/_title.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/_title.jsx +24 -17
- data/app/pb_kits/playbook/props.rb +7 -0
- data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
- data/app/views/playbook/samples/filter_table/index.jsx +433 -0
- data/lib/playbook/version.rb +1 -1
- metadata +37 -12
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb +0 -19
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx +0 -40
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb +0 -14
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx +0 -40
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb +0 -14
- data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx +0 -40
- data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx +0 -34
- data/app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb +0 -5
@@ -0,0 +1,57 @@
|
|
1
|
+
<%= pb_rails("layout", props: {layout: "kanban", responsive: true}) do %>
|
2
|
+
<%= pb_rails("layout/body") do %>
|
3
|
+
<%= pb_rails("caption", props: {text: 'Queued'}) %>
|
4
|
+
<%= pb_rails("card") do %>
|
5
|
+
Runway Ticket #1
|
6
|
+
<% end %>
|
7
|
+
<% end %>
|
8
|
+
<%= pb_rails("layout/body") do %>
|
9
|
+
<%= pb_rails("caption", props: {text: 'In Progress'}) %>
|
10
|
+
<%= pb_rails("card") do %>
|
11
|
+
Runway Ticket #4
|
12
|
+
<% end %>
|
13
|
+
<%= pb_rails("card") do %>
|
14
|
+
Runway Ticket #5
|
15
|
+
<% end %>
|
16
|
+
<%= pb_rails("card") do %>
|
17
|
+
Runway Ticket #6
|
18
|
+
<% end %>
|
19
|
+
<% end %>
|
20
|
+
<%= pb_rails("layout/body") do %>
|
21
|
+
<%= pb_rails("caption", props: {text: 'Validation'}) %>
|
22
|
+
<%= pb_rails("card") do %>
|
23
|
+
Runway Ticket #7
|
24
|
+
<% end %>
|
25
|
+
<%= pb_rails("card") do %>
|
26
|
+
Runway Ticket 8
|
27
|
+
<% end %>
|
28
|
+
<%= pb_rails("card") do %>
|
29
|
+
Runway Ticket #9
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<%= pb_rails("layout/body") do %>
|
33
|
+
<%= pb_rails("caption", props: {text: 'Done'}) %>
|
34
|
+
<%= pb_rails("card") do %>
|
35
|
+
More
|
36
|
+
<% end %>
|
37
|
+
<%= pb_rails("card") do %>
|
38
|
+
Stuff
|
39
|
+
<% end %>
|
40
|
+
<%= pb_rails("card") do %>
|
41
|
+
Here
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
44
|
+
<%= pb_rails("layout/body") do %>
|
45
|
+
<%= pb_rails("caption", props: {text: 'Backlog'}) %>
|
46
|
+
<%= pb_rails("card") do %>
|
47
|
+
Lots
|
48
|
+
<% end %>
|
49
|
+
<%= pb_rails("card") do %>
|
50
|
+
of
|
51
|
+
<% end %>
|
52
|
+
<%= pb_rails("card") do %>
|
53
|
+
Stuff
|
54
|
+
<% end %>
|
55
|
+
<% end %>
|
56
|
+
|
57
|
+
<% end %>
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Caption, Card, Layout } from '../../'
|
3
|
+
|
4
|
+
const LayoutKanbanResponsive = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Layout
|
8
|
+
layout="kanban"
|
9
|
+
responsive
|
10
|
+
>
|
11
|
+
<Layout.Body>
|
12
|
+
<Caption>{'Queue'}</Caption>
|
13
|
+
<Card>{'Card content'}</Card>
|
14
|
+
<Card>{'Card content'}</Card>
|
15
|
+
<Card>{'Card content'}</Card>
|
16
|
+
</Layout.Body>
|
17
|
+
<Layout.Body>
|
18
|
+
<Caption>{'In Progress'}</Caption>
|
19
|
+
<Card>{'Card content'}</Card>
|
20
|
+
<Card>{'Card content'}</Card>
|
21
|
+
<Card>{'Card content'}</Card>
|
22
|
+
</Layout.Body>
|
23
|
+
<Layout.Body>
|
24
|
+
<Caption>{'Validation'}</Caption>
|
25
|
+
<Card>{'Card content'}</Card>
|
26
|
+
<Card>{'Card content'}</Card>
|
27
|
+
<Card>{'Card content'}</Card>
|
28
|
+
</Layout.Body>
|
29
|
+
<Layout.Body>
|
30
|
+
<Caption>{'Done'}</Caption>
|
31
|
+
<Card>{'Card content'}</Card>
|
32
|
+
<Card>{'Card content'}</Card>
|
33
|
+
<Card>{'Card content'}</Card>
|
34
|
+
</Layout.Body>
|
35
|
+
<Layout.Body>
|
36
|
+
<Caption>{'Another Column'}</Caption>
|
37
|
+
<Card>{'Card content'}</Card>
|
38
|
+
<Card>{'Card content'}</Card>
|
39
|
+
<Card>{'Card content'}</Card>
|
40
|
+
</Layout.Body>
|
41
|
+
</Layout>
|
42
|
+
</div>
|
43
|
+
)
|
44
|
+
}
|
45
|
+
|
46
|
+
export default LayoutKanbanResponsive
|
@@ -5,9 +5,12 @@ examples:
|
|
5
5
|
- layout_sizes: Sizes
|
6
6
|
- layout_sizes_dark: Sizes Dark
|
7
7
|
- layout_collection: Collection Layout
|
8
|
+
- layout_kanban: Kanban Layout
|
9
|
+
|
8
10
|
react:
|
9
11
|
- layout_colors: Colors
|
10
12
|
- layout_transparent: Transparent
|
11
13
|
- layout_sizes: Sizes
|
12
14
|
- layout_sizes_dark: Sizes Dark
|
13
15
|
- layout_collection: Collection Layout
|
16
|
+
- layout_kanban: Kanban Layout
|
@@ -3,3 +3,5 @@ export { default as LayoutTransparent } from './_layout_transparent.jsx'
|
|
3
3
|
export { default as LayoutSizes } from './_layout_sizes.jsx'
|
4
4
|
export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
|
5
5
|
export { default as LayoutCollection } from './_layout_collection.jsx'
|
6
|
+
export { default as LayoutKanban } from './_layout_kanban.jsx'
|
7
|
+
export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'
|
@@ -22,13 +22,17 @@ module Playbook
|
|
22
22
|
values: %w[light dark gradient],
|
23
23
|
default: "light"
|
24
24
|
prop :layout, type: Playbook::Props::Enum,
|
25
|
-
values: %w[sidebar collection],
|
25
|
+
values: %w[sidebar collection kanban],
|
26
26
|
default: "sidebar"
|
27
27
|
|
28
|
+
prop :responsive, type: Playbook::Props::Boolean, default: false
|
29
|
+
|
28
30
|
def classname
|
29
31
|
case layout
|
30
|
-
when "collection"
|
31
|
-
|
32
|
+
when "collection"
|
33
|
+
generate_classname("pb_layout_kit", layout)
|
34
|
+
when "kanban"
|
35
|
+
generate_classname("pb_layout_kit", layout, responsive_class)
|
32
36
|
else
|
33
37
|
first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
|
34
38
|
[first_class, full_class, collapse_class].reject(&:empty?).join(" ")
|
@@ -37,6 +41,10 @@ module Playbook
|
|
37
41
|
|
38
42
|
private
|
39
43
|
|
44
|
+
def responsive_class
|
45
|
+
responsive ? "responsive" : ""
|
46
|
+
end
|
47
|
+
|
40
48
|
def full_class
|
41
49
|
full ? "full" : ""
|
42
50
|
end
|
@@ -50,4 +58,4 @@ module Playbook
|
|
50
58
|
end
|
51
59
|
end
|
52
60
|
end
|
53
|
-
end
|
61
|
+
end
|
@@ -1,10 +1,10 @@
|
|
1
1
|
<%= content_tag(:div, class: object.list_classname) do %>
|
2
2
|
<%= content_tag(:"#{object.ordered_class}",
|
3
|
-
|
4
|
-
data: object.data,
|
3
|
+
aria: object.aria,
|
5
4
|
class: object.classname,
|
5
|
+
data: object.data,
|
6
|
+
id: object.id,
|
6
7
|
role: object.role,
|
7
|
-
aria: object.aria,
|
8
8
|
tabindex: object.tabindex
|
9
9
|
) do %>
|
10
10
|
<%= capture(&object.children) %>
|
@@ -2,42 +2,87 @@
|
|
2
2
|
|
3
3
|
import React, { type Node } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { buildCss } from '../utilities/props'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
6
|
import { spacing } from '../utilities/spacing.js'
|
7
7
|
|
8
8
|
type ListProps = {
|
9
|
-
|
9
|
+
aria?: object,
|
10
|
+
borderless: Boolean,
|
11
|
+
className?: String,
|
10
12
|
children: Array<Node> | Node,
|
11
|
-
dark:
|
13
|
+
dark: Boolean,
|
14
|
+
data?: object,
|
15
|
+
id?: String,
|
12
16
|
layout: "" | "left" | "right",
|
13
|
-
ordered:
|
14
|
-
|
15
|
-
|
17
|
+
ordered: Boolean,
|
18
|
+
role?: String,
|
19
|
+
tabIndex?: String,
|
20
|
+
size?: String,
|
21
|
+
xpadding: Boolean,
|
16
22
|
}
|
17
23
|
|
18
24
|
const List = (props: ListProps) => {
|
19
25
|
const {
|
26
|
+
aria = {},
|
20
27
|
borderless = false,
|
21
28
|
children,
|
29
|
+
className,
|
22
30
|
dark = false,
|
31
|
+
data = {},
|
32
|
+
id,
|
23
33
|
layout = '',
|
24
34
|
ordered = false,
|
35
|
+
role,
|
25
36
|
size = '',
|
37
|
+
tabIndex,
|
26
38
|
xpadding = false,
|
27
39
|
} = props
|
40
|
+
|
41
|
+
const layoutClass = {
|
42
|
+
left: 'layout_left',
|
43
|
+
right: 'layout_right',
|
44
|
+
default: '',
|
45
|
+
}
|
46
|
+
|
47
|
+
const ariaProps = buildAriaProps(aria)
|
48
|
+
const dataProps = buildDataProps(data)
|
28
49
|
const classes = classnames(
|
29
|
-
buildCss('pb_list_kit', layout, size, {
|
50
|
+
buildCss('pb_list_kit', layoutClass[layout], size, {
|
30
51
|
dark: dark,
|
31
52
|
borderless: borderless,
|
32
53
|
ordered: ordered,
|
33
54
|
xpadding: xpadding,
|
34
|
-
}),
|
55
|
+
}), className,
|
35
56
|
spacing(props)
|
36
57
|
)
|
37
58
|
|
38
59
|
return (
|
39
|
-
<div
|
40
|
-
|
60
|
+
<div
|
61
|
+
className={classes}
|
62
|
+
>
|
63
|
+
<If condition={ordered}>
|
64
|
+
<ol
|
65
|
+
{...ariaProps}
|
66
|
+
{...dataProps}
|
67
|
+
className={className}
|
68
|
+
id={id}
|
69
|
+
role={role}
|
70
|
+
tabIndex={tabIndex}
|
71
|
+
>
|
72
|
+
{children}
|
73
|
+
</ol>
|
74
|
+
<Else />
|
75
|
+
<ul
|
76
|
+
{...ariaProps}
|
77
|
+
{...dataProps}
|
78
|
+
className={className}
|
79
|
+
id={id}
|
80
|
+
role={role}
|
81
|
+
tabIndex={tabIndex}
|
82
|
+
>
|
83
|
+
{children}
|
84
|
+
</ul>
|
85
|
+
</If>
|
41
86
|
</div>
|
42
87
|
)
|
43
88
|
}
|
@@ -1,26 +1,49 @@
|
|
1
|
-
|
2
|
-
import PropTypes from 'prop-types'
|
1
|
+
/* @flow */
|
3
2
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
3
|
+
import React, { type Node } from 'react'
|
4
|
+
import classnames from 'classnames'
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
+
import { spacing } from '../utilities/spacing.js'
|
7
|
+
|
8
|
+
type ListItemProps = {
|
9
|
+
aria?: object,
|
10
|
+
children: Array<Node> | Node,
|
11
|
+
className?: String,
|
12
|
+
data?: object,
|
13
|
+
id?: String,
|
14
|
+
tabIndex?: String,
|
9
15
|
}
|
10
16
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
17
|
+
const ListItem = (props: ListItemProps) => {
|
18
|
+
const {
|
19
|
+
aria = {},
|
20
|
+
children,
|
21
|
+
className,
|
22
|
+
data = {},
|
23
|
+
id,
|
24
|
+
tabIndex,
|
25
|
+
} = props
|
26
|
+
|
27
|
+
const ariaProps = buildAriaProps(aria)
|
28
|
+
const dataProps = buildDataProps(data)
|
29
|
+
const classes = classnames(
|
30
|
+
buildCss('pb_item_kit'), className,
|
31
|
+
spacing(props)
|
32
|
+
)
|
33
|
+
|
34
|
+
return (
|
35
|
+
<>
|
36
|
+
<li
|
37
|
+
{...ariaProps}
|
38
|
+
{...dataProps}
|
39
|
+
className={classes}
|
40
|
+
id={id}
|
41
|
+
tabIndex={tabIndex}
|
42
|
+
>
|
18
43
|
{children}
|
19
44
|
</li>
|
20
|
-
|
21
|
-
|
45
|
+
</>
|
46
|
+
)
|
22
47
|
}
|
23
48
|
|
24
|
-
ListItem.propTypes = propTypes
|
25
|
-
|
26
49
|
export default ListItem
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { List, ListItem } from '../../'
|
4
|
+
|
5
|
+
const ListBorderless = () => {
|
6
|
+
return (
|
7
|
+
<>
|
8
|
+
<List
|
9
|
+
borderless
|
10
|
+
>
|
11
|
+
<ListItem>{'Item 1'}</ListItem>
|
12
|
+
<ListItem>{'Item 2'}</ListItem>
|
13
|
+
<ListItem>{'Item 3'}</ListItem>
|
14
|
+
<ListItem>{'Item 4'}</ListItem>
|
15
|
+
<ListItem>{'Item 5'}</ListItem>
|
16
|
+
</List>
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
export default ListBorderless
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { List, ListItem } from '../../'
|
4
|
+
|
5
|
+
const ListDarkBorderless = () => {
|
6
|
+
return (
|
7
|
+
<>
|
8
|
+
<List
|
9
|
+
borderless
|
10
|
+
dark
|
11
|
+
>
|
12
|
+
<ListItem>{'Item 1'}</ListItem>
|
13
|
+
<ListItem>{'Item 2'}</ListItem>
|
14
|
+
<ListItem>{'Item 3'}</ListItem>
|
15
|
+
<ListItem>{'Item 4'}</ListItem>
|
16
|
+
<ListItem>{'Item 5'}</ListItem>
|
17
|
+
</List>
|
18
|
+
</>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default ListDarkBorderless
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { List, ListItem } from '../../'
|
4
|
+
|
5
|
+
const ListDarkLg = () => {
|
6
|
+
return (
|
7
|
+
<>
|
8
|
+
<List
|
9
|
+
dark
|
10
|
+
size="large"
|
11
|
+
>
|
12
|
+
<ListItem>{'Item 1'}</ListItem>
|
13
|
+
<ListItem>{'Item 2'}</ListItem>
|
14
|
+
<ListItem>{'Item 3'}</ListItem>
|
15
|
+
<ListItem>{'Item 4'}</ListItem>
|
16
|
+
<ListItem>{'Item 5'}</ListItem>
|
17
|
+
</List>
|
18
|
+
</>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default ListDarkLg
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { List, ListItem } from '../../'
|
4
|
+
|
5
|
+
const ListDarkOrdered = () => {
|
6
|
+
return (
|
7
|
+
<>
|
8
|
+
<List
|
9
|
+
dark
|
10
|
+
ordered
|
11
|
+
>
|
12
|
+
<ListItem>{'Item 1'}</ListItem>
|
13
|
+
<ListItem>{'Item 2'}</ListItem>
|
14
|
+
<ListItem>{'Item 3'}</ListItem>
|
15
|
+
<ListItem>{'Item 4'}</ListItem>
|
16
|
+
<ListItem>{'Item 5'}</ListItem>
|
17
|
+
</List>
|
18
|
+
</>
|
19
|
+
)
|
20
|
+
}
|
21
|
+
|
22
|
+
export default ListDarkOrdered
|