playbook_ui 11.19.0.pre.typeahead1 → 11.20.0
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_body/_body.scss +10 -1
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb +9 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +20 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_styled.md +1 -0
- data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +7 -7
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +8 -8
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +69 -3
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +12 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +15 -7
- data/app/pb_kits/playbook/pb_file_upload/docs/_description.md +2 -3
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +40 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +12 -0
- data/app/pb_kits/playbook/pb_list/_list.tsx +97 -0
- data/app/pb_kits/playbook/pb_list/{_list_item.jsx → _list_item.tsx} +4 -6
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +239 -0
- data/app/pb_kits/playbook/pb_popover/{index.js → index.ts} +10 -6
- data/app/pb_kits/playbook/pb_popover/popover.test.js +222 -0
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +4 -4
- data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/{_selectable_card.jsx → _selectable_card.tsx} +47 -42
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.test.js +185 -0
- data/app/pb_kits/playbook/pb_selectable_icon/{_selectable_icon.jsx → _selectable_icon.tsx} +29 -32
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx +1 -4
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js +148 -0
- data/lib/playbook/version.rb +2 -2
- metadata +17 -10
- data/app/pb_kits/playbook/pb_list/_list.jsx +0 -98
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +0 -227
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 44219343f1cdaffaa416fa4dd981884638d123658f40c607e52c920714e5a798
|
4
|
+
data.tar.gz: 899dd9d3fa76fd138d2657cf64ce6470c681ede3c0bb34b37481a9a6dac17b2c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 16c710bf1423492bbadabea26f9ef6819622547cbbbba4ffb9add95404e270eff04639b9575b73e6a19001a94dbafa535a84aeb11e49548067626afc7b6e1bd3
|
7
|
+
data.tar.gz: a707281c6a517f9bd0df3e50aac97b5d83b6f92a12858a85b090c647543b1c11ac9f0675d2de44a3e6652314a39e6bd16d5a96907f758741df112c54bdb55fcf
|
@@ -1,4 +1,5 @@
|
|
1
1
|
@import "./body_mixins";
|
2
|
+
@import "../tokens/titles";
|
2
3
|
|
3
4
|
[class^=pb_body_kit]{
|
4
5
|
@include pb_body($text_lt_default);
|
@@ -12,13 +13,21 @@
|
|
12
13
|
}
|
13
14
|
}
|
14
15
|
}
|
15
|
-
|
16
16
|
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
|
17
17
|
&[class*=_#{$dark_color_name}][class*=dark]{
|
18
18
|
@include pb_body($dark_color_value);
|
19
19
|
}
|
20
20
|
}
|
21
|
+
b, strong {
|
22
|
+
@include pb_title_4
|
23
|
+
}
|
21
24
|
|
25
|
+
a {
|
26
|
+
color: $primary;
|
27
|
+
&:hover {
|
28
|
+
color: $text_lt_default;
|
29
|
+
}
|
30
|
+
}
|
22
31
|
@each $status_name, $status_value in $pb_body_status {
|
23
32
|
&[class*=#{$status_name}] {
|
24
33
|
@include pb_body($status_value);
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body } from '../..'
|
3
|
+
|
4
|
+
const BodyStyled = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Body {...props}>
|
8
|
+
<b>{"This text is using the <b> tag"}</b>
|
9
|
+
<br />
|
10
|
+
<br />
|
11
|
+
<strong>{"This text is using the <strong> tag"}</strong>
|
12
|
+
<br />
|
13
|
+
<br />
|
14
|
+
<a href="#">{"This text is using the <a> tag"}</a>
|
15
|
+
</Body>
|
16
|
+
</div>
|
17
|
+
)
|
18
|
+
}
|
19
|
+
|
20
|
+
export default BodyStyled
|
@@ -0,0 +1 @@
|
|
1
|
+
Playbook styles the `b`, `strong` and `a` tags within the body kit to match Playbook's design system.
|
@@ -8,18 +8,18 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
8
8
|
type CheckboxProps = {
|
9
9
|
aria?: {[key: string]: string},
|
10
10
|
checked?: boolean,
|
11
|
-
children
|
11
|
+
children?: React.ReactChild[] | React.ReactChild,
|
12
12
|
className?: string,
|
13
13
|
dark?: boolean,
|
14
14
|
data?: {[key: string]: string},
|
15
15
|
error?: boolean,
|
16
16
|
id?: string,
|
17
17
|
indeterminate?: boolean,
|
18
|
-
name
|
19
|
-
onChange
|
20
|
-
tabIndex
|
21
|
-
text
|
22
|
-
value
|
18
|
+
name?: string,
|
19
|
+
onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
|
20
|
+
tabIndex?: number,
|
21
|
+
text?: string,
|
22
|
+
value?: string,
|
23
23
|
} & GlobalProps
|
24
24
|
|
25
25
|
const Checkbox = (props: CheckboxProps): JSX.Element => {
|
@@ -34,7 +34,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
|
|
34
34
|
id,
|
35
35
|
indeterminate = false,
|
36
36
|
name = '',
|
37
|
-
onChange = () => {},
|
37
|
+
onChange = () => { void 0 },
|
38
38
|
tabIndex,
|
39
39
|
text = '',
|
40
40
|
value = '',
|
@@ -23,15 +23,15 @@ const CollapsibleContent = ({
|
|
23
23
|
const contentSpacing = globalProps(props, { padding })
|
24
24
|
|
25
25
|
return (
|
26
|
-
<
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
>
|
26
|
+
<AnimateHeight
|
27
|
+
duration={400}
|
28
|
+
height={context.collapsed ? 0 : 'auto'}
|
29
|
+
id="bottom-section"
|
30
|
+
>
|
31
|
+
<div className={classnames(contentCSS, className, contentSpacing)}>
|
32
32
|
{children}
|
33
|
-
</
|
34
|
-
</
|
33
|
+
</div>
|
34
|
+
</AnimateHeight>
|
35
35
|
)
|
36
36
|
}
|
37
37
|
|
@@ -9,7 +9,7 @@
|
|
9
9
|
|
10
10
|
|
11
11
|
// Dialog Animations
|
12
|
-
|
12
|
+
// Dialog Animations for fading in and out from the center
|
13
13
|
@keyframes modalFadeIn {
|
14
14
|
from {
|
15
15
|
transform: translate3d(0, -100%, 0);
|
@@ -32,6 +32,53 @@
|
|
32
32
|
}
|
33
33
|
}
|
34
34
|
|
35
|
+
// Dialog Animations for fading in and out from the left side
|
36
|
+
@keyframes modalFadeInLeft {
|
37
|
+
from {
|
38
|
+
transform: translate3d(-100%, 0, 0);
|
39
|
+
opacity: 0;
|
40
|
+
}
|
41
|
+
to {
|
42
|
+
transform: translate3d(0, 0, 0);
|
43
|
+
opacity: 1;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
@keyframes modalFadeOutLeft {
|
48
|
+
from {
|
49
|
+
transform: translate3d(0, 0, 0);
|
50
|
+
opacity: 1;
|
51
|
+
}
|
52
|
+
to {
|
53
|
+
transform: translate3d(-50%, 0, 0);
|
54
|
+
opacity: 0;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
|
59
|
+
// Dialog Animations for fading in and out from the right side
|
60
|
+
@keyframes modalFadeInRight {
|
61
|
+
from {
|
62
|
+
transform: translate3d(100%, 0, 0);
|
63
|
+
opacity: 0;
|
64
|
+
}
|
65
|
+
to {
|
66
|
+
transform: translate3d(0, 0, 0);
|
67
|
+
opacity: 1;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
@keyframes modalFadeOutRight {
|
72
|
+
from {
|
73
|
+
transform: translate3d(0, 0, 0);
|
74
|
+
opacity: 1;
|
75
|
+
}
|
76
|
+
to {
|
77
|
+
transform: translate3d(50%, 0, 0);
|
78
|
+
opacity: 0;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
35
82
|
@keyframes overlayFade {
|
36
83
|
from {
|
37
84
|
opacity: 0;
|
@@ -63,7 +110,7 @@
|
|
63
110
|
$medium: 500px;
|
64
111
|
$large: 800px;
|
65
112
|
$xlarge: 1150px;
|
66
|
-
$animation-duration:
|
113
|
+
$animation-duration: .2s;
|
67
114
|
$z-index: 100;
|
68
115
|
$opacity_visible: 1;
|
69
116
|
$opacity_hidden: 0;
|
@@ -87,6 +134,24 @@
|
|
87
134
|
outline: none;
|
88
135
|
animation-timing-function: $easeInOutQuint;
|
89
136
|
|
137
|
+
&[class*="_left"] {
|
138
|
+
animation-name: modalFadeInLeft;
|
139
|
+
&[class*="_before_close"] {
|
140
|
+
animation-name: modalFadeOutLeft;
|
141
|
+
animation-duration: $animation-duration;
|
142
|
+
opacity: $opacity_hidden;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
&[class*="_right"] {
|
147
|
+
animation-name: modalFadeInRight;
|
148
|
+
&[class*="_before_close"] {
|
149
|
+
animation-name: modalFadeOutRight;
|
150
|
+
animation-duration: $animation-duration;
|
151
|
+
opacity: $opacity_hidden;
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
90
155
|
&[class*="_status_size"] {
|
91
156
|
width: $status_size;
|
92
157
|
}
|
@@ -98,6 +163,7 @@
|
|
98
163
|
&[class*="_md"] {
|
99
164
|
width: $medium;
|
100
165
|
}
|
166
|
+
|
101
167
|
|
102
168
|
&[class*="_lg"] {
|
103
169
|
width: $large;
|
@@ -111,7 +177,7 @@
|
|
111
177
|
opacity: $opacity_visible;
|
112
178
|
}
|
113
179
|
|
114
|
-
&_before_close {
|
180
|
+
&[class*="_before_close"] {
|
115
181
|
animation-name: modalFadeOut;
|
116
182
|
animation-duration: $animation-duration;
|
117
183
|
opacity: $opacity_hidden;
|
@@ -71,7 +71,7 @@ const Dialog = (props: DialogProps) => {
|
|
71
71
|
const ariaProps = buildAriaProps(aria);
|
72
72
|
const dataProps = buildDataProps(data);
|
73
73
|
const dialogClassNames = {
|
74
|
-
base: classnames("pb_dialog", buildCss("pb_dialog", size)),
|
74
|
+
base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
|
75
75
|
afterOpen: "pb_dialog_after_open",
|
76
76
|
beforeClose: "pb_dialog_before_close",
|
77
77
|
};
|
@@ -25,6 +25,7 @@ function DialogTest({ props }) {
|
|
25
25
|
onClose={close}
|
26
26
|
onConfirm={() => setIsLoading(!isLoading)}
|
27
27
|
opened={isOpen}
|
28
|
+
placement="right"
|
28
29
|
portalClassName="portal"
|
29
30
|
size={size}
|
30
31
|
text={text}
|
@@ -98,3 +99,14 @@ test("renders the buttons", async () => {
|
|
98
99
|
cleanup()
|
99
100
|
});
|
100
101
|
|
102
|
+
test("renders the right placement dialog", async () => {
|
103
|
+
|
104
|
+
const { queryByText } = render(<DialogTest />);
|
105
|
+
|
106
|
+
fireEvent.click(queryByText('Open Dialog'));
|
107
|
+
|
108
|
+
await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
|
109
|
+
|
110
|
+
cleanup()
|
111
|
+
});
|
112
|
+
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useEffect, useCallback, useRef } from 'react'
|
2
|
-
import { useDropzone } from 'react-dropzone'
|
2
|
+
import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
|
3
3
|
import classnames from 'classnames'
|
4
4
|
|
5
5
|
import { buildCss, buildDataProps, noop } from '../utilities/props'
|
@@ -12,6 +12,7 @@ import Card from '../pb_card/_card'
|
|
12
12
|
type FileUploadProps = {
|
13
13
|
accept?: string[],
|
14
14
|
className?: string,
|
15
|
+
customMessage?: string,
|
15
16
|
data?: {[key: string]: string | number},
|
16
17
|
acceptedFilesDescription?: string,
|
17
18
|
maxSize?: number,
|
@@ -28,6 +29,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
28
29
|
accept = null,
|
29
30
|
acceptedFilesDescription = '',
|
30
31
|
className,
|
32
|
+
customMessage,
|
31
33
|
data = {},
|
32
34
|
maxSize,
|
33
35
|
onFilesAccepted = noop,
|
@@ -38,13 +40,20 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
38
40
|
onFilesAccepted(files)
|
39
41
|
}, [onFilesAccepted])
|
40
42
|
|
41
|
-
|
43
|
+
type DropZoneProps = {
|
44
|
+
getRootProps: () => DropzoneRootProps & any;
|
45
|
+
getInputProps: () => DropzoneInputProps & any;
|
46
|
+
isDragActive: boolean;
|
47
|
+
rejectedFiles: File[];
|
48
|
+
}
|
49
|
+
|
50
|
+
const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
|
42
51
|
accept,
|
43
52
|
maxSize,
|
44
53
|
onDrop,
|
45
54
|
})
|
46
55
|
|
47
|
-
const prevRejected
|
56
|
+
const prevRejected = useRef<File[] | null>(null);
|
48
57
|
|
49
58
|
const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
|
50
59
|
|
@@ -70,10 +79,9 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
70
79
|
const dataProps = buildDataProps(data)
|
71
80
|
|
72
81
|
const getDescription = () => {
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
return msg
|
82
|
+
return customMessage
|
83
|
+
? customMessage
|
84
|
+
: `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
|
77
85
|
}
|
78
86
|
|
79
87
|
return (
|
@@ -1,8 +1,7 @@
|
|
1
|
-
This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
|
1
|
+
This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
|
2
2
|
|
3
3
|
### Props
|
4
4
|
|
5
5
|
`accept: [String]` Use this prop to set the list of valid file types
|
6
|
+
`customMessage: [String]` Use this prop to set a custom message, replacing the default text
|
6
7
|
`onFilesAccepted: Function` The callback function, providing the list of dropped files
|
7
|
-
|
8
|
-
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React, { useState } from 'react'
|
4
|
+
import {
|
5
|
+
FileUpload,
|
6
|
+
List,
|
7
|
+
ListItem,
|
8
|
+
} from '../..'
|
9
|
+
|
10
|
+
const AcceptedFilesList = ({ files }: FileList) => (
|
11
|
+
<List>
|
12
|
+
{files.map((file) => (
|
13
|
+
<ListItem key={file.name}>{file.name}</ListItem>
|
14
|
+
))}
|
15
|
+
</List>
|
16
|
+
)
|
17
|
+
|
18
|
+
const FileUploadCustomMessage = (props) => {
|
19
|
+
const [filesToUpload, setFilesToUpload] = useState([])
|
20
|
+
|
21
|
+
const handleOnFilesAccepted = (files) => {
|
22
|
+
setFilesToUpload([...filesToUpload, ...files])
|
23
|
+
}
|
24
|
+
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<AcceptedFilesList
|
28
|
+
files={filesToUpload}
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
<FileUpload
|
32
|
+
customMessage="Playbook is awesome!"
|
33
|
+
onFilesAccepted={handleOnFilesAccepted}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
</div>
|
37
|
+
)
|
38
|
+
}
|
39
|
+
|
40
|
+
export default FileUploadCustomMessage
|
@@ -1,10 +1,10 @@
|
|
1
1
|
examples:
|
2
2
|
|
3
3
|
rails:
|
4
|
-
|
4
|
+
|
5
5
|
react:
|
6
6
|
- file_upload_default: Default List of files to upload
|
7
7
|
- file_upload_accept: Accept only certain types of files
|
8
|
+
- file_upload_custom_message: Add a custom message
|
8
9
|
- file_upload_custom_description: Add your one accepted files description
|
9
10
|
- file_upload_max_size: Set a file size limit
|
10
|
-
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { default as FileUploadDefault } from './_file_upload_default.jsx'
|
2
2
|
export { default as FileUploadAccept } from './_file_upload_accept.jsx'
|
3
|
+
export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
|
3
4
|
export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
|
4
5
|
export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
|
@@ -38,3 +38,15 @@ test('displays max file size text', () => {
|
|
38
38
|
const kit = screen.getByTestId(testid)
|
39
39
|
expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
|
40
40
|
})
|
41
|
+
|
42
|
+
test('displays custom message', () => {
|
43
|
+
render(
|
44
|
+
<FileUpload
|
45
|
+
customMessage={'Hello world!'}
|
46
|
+
data={{ testid: testid }}
|
47
|
+
/>
|
48
|
+
)
|
49
|
+
|
50
|
+
const kit = screen.getByTestId(testid)
|
51
|
+
expect(kit).toHaveTextContent('Hello world!')
|
52
|
+
})
|
@@ -0,0 +1,97 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
|
6
|
+
type ListProps = {
|
7
|
+
aria?: { [key: string]: string };
|
8
|
+
borderless?: boolean;
|
9
|
+
className?: string;
|
10
|
+
children: React.ReactNode[] | React.ReactNode;
|
11
|
+
dark?: boolean;
|
12
|
+
data?: object;
|
13
|
+
id?: string;
|
14
|
+
layout: "" | "left" | "right";
|
15
|
+
ordered?: boolean;
|
16
|
+
role?: string;
|
17
|
+
tabIndex?: number;
|
18
|
+
text?: string;
|
19
|
+
size?: string;
|
20
|
+
variant?: string;
|
21
|
+
xpadding: boolean;
|
22
|
+
};
|
23
|
+
|
24
|
+
const List = (props: ListProps) => {
|
25
|
+
const {
|
26
|
+
aria = {},
|
27
|
+
borderless = false,
|
28
|
+
children,
|
29
|
+
className,
|
30
|
+
dark = false,
|
31
|
+
data = {},
|
32
|
+
id,
|
33
|
+
layout = "",
|
34
|
+
ordered = false,
|
35
|
+
role,
|
36
|
+
size = "",
|
37
|
+
tabIndex,
|
38
|
+
xpadding = false,
|
39
|
+
variant,
|
40
|
+
text,
|
41
|
+
} = props;
|
42
|
+
|
43
|
+
const layoutClass: { [key: string]: string } = {
|
44
|
+
left: "layout_left",
|
45
|
+
right: "layout_right",
|
46
|
+
default: "",
|
47
|
+
};
|
48
|
+
|
49
|
+
const childrenWithProps = React.Children.map(
|
50
|
+
children,
|
51
|
+
(child: React.ReactElement) => {
|
52
|
+
return React.cloneElement(child, { text, variant });
|
53
|
+
}
|
54
|
+
);
|
55
|
+
const ariaProps = buildAriaProps(aria);
|
56
|
+
const dataProps = buildDataProps(data);
|
57
|
+
const classes = classnames(
|
58
|
+
buildCss("pb_list_kit", layoutClass[layout], size, {
|
59
|
+
dark: dark,
|
60
|
+
borderless: borderless,
|
61
|
+
ordered: ordered,
|
62
|
+
xpadding: xpadding,
|
63
|
+
}),
|
64
|
+
globalProps(props),
|
65
|
+
className
|
66
|
+
);
|
67
|
+
|
68
|
+
return (
|
69
|
+
<div className={classes}>
|
70
|
+
{ordered ? (
|
71
|
+
<ol
|
72
|
+
{...ariaProps}
|
73
|
+
{...dataProps}
|
74
|
+
className={className}
|
75
|
+
id={id}
|
76
|
+
role={role}
|
77
|
+
tabIndex={tabIndex}
|
78
|
+
>
|
79
|
+
{childrenWithProps}
|
80
|
+
</ol>
|
81
|
+
) : (
|
82
|
+
<ul
|
83
|
+
{...ariaProps}
|
84
|
+
{...dataProps}
|
85
|
+
className={className}
|
86
|
+
id={id}
|
87
|
+
role={role}
|
88
|
+
tabIndex={tabIndex}
|
89
|
+
>
|
90
|
+
{childrenWithProps}
|
91
|
+
</ul>
|
92
|
+
)}
|
93
|
+
</div>
|
94
|
+
);
|
95
|
+
};
|
96
|
+
|
97
|
+
export default List;
|
@@ -1,17 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
import React, { type Node } from 'react'
|
1
|
+
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
4
|
import { globalProps } from '../utilities/globalProps'
|
7
5
|
|
8
6
|
type ListItemProps = {
|
9
|
-
aria?:
|
10
|
-
children:
|
7
|
+
aria?: { [key: string]: string },
|
8
|
+
children: React.ReactNode[] | React.ReactNode,
|
11
9
|
className?: string,
|
12
10
|
data?: object,
|
13
11
|
id?: string,
|
14
|
-
tabIndex?:
|
12
|
+
tabIndex?: number,
|
15
13
|
}
|
16
14
|
|
17
15
|
const ListItem = (props: ListItemProps) => {
|