playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_icon/_icon.scss +6 -48
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +36 -107
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +11 -5
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +18 -44
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +5 -10
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +4 -6
- data/app/pb_kits/playbook/pb_icon/icon.rb +10 -33
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
- data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
- data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
- data/dist/playbook-rails.js +6 -14
- data/lib/playbook/version.rb +2 -2
- metadata +7 -7
@@ -61,31 +61,23 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
|
|
61
61
|
|
62
62
|
const HeaderBody = () => (
|
63
63
|
<React.Fragment>
|
64
|
-
<FlexItem flex="1"
|
65
|
-
marginLeft="sm"
|
66
|
-
>
|
64
|
+
<FlexItem flex="1" marginLeft="sm">
|
67
65
|
<CircleIconButton
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
66
|
+
onClick={handleOnLightboxClose}
|
67
|
+
dark={true}
|
68
|
+
variant="link"
|
69
|
+
icon={icon}
|
72
70
|
/>
|
73
71
|
</FlexItem>
|
74
72
|
{title && text && (
|
75
73
|
<FlexItem flex="5">
|
76
74
|
<Flex justify="center">
|
77
|
-
<Flex align="center"
|
78
|
-
orientation="column"
|
79
|
-
>
|
75
|
+
<Flex align="center" orientation="column">
|
80
76
|
{typeof title === "string" ? (
|
81
|
-
<Title dark
|
82
|
-
paddingBottom="xxs"
|
83
|
-
size={4}
|
84
|
-
text={title}
|
85
|
-
/>
|
77
|
+
<Title dark paddingBottom="xxs" size={4} text={title} />
|
86
78
|
) : (
|
87
|
-
<Flex
|
88
|
-
|
79
|
+
<Flex justify="center"
|
80
|
+
className="custom-header"
|
89
81
|
>
|
90
82
|
{title}
|
91
83
|
</Flex>
|
@@ -94,8 +86,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
|
|
94
86
|
{typeof text === "string" ? (
|
95
87
|
<Caption dark>{text}</Caption>
|
96
88
|
) : (
|
97
|
-
<Flex
|
98
|
-
|
89
|
+
<Flex justify="center"
|
90
|
+
className="custom-header"
|
99
91
|
>
|
100
92
|
{text}
|
101
93
|
</Flex>
|
@@ -107,12 +99,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
|
|
107
99
|
<FlexItem flex="1">
|
108
100
|
<Flex justify="end">
|
109
101
|
<Button
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
102
|
+
className="nav-right-btn"
|
103
|
+
htmlType="button"
|
104
|
+
onClick={onClickRight}
|
105
|
+
dark
|
106
|
+
variant="link"
|
107
|
+
text={navRight}
|
116
108
|
/>
|
117
109
|
</Flex>
|
118
110
|
</FlexItem>
|
@@ -122,11 +114,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
|
|
122
114
|
return (
|
123
115
|
<div className="carousel-header">
|
124
116
|
<Flex
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
117
|
+
{...ariaProps}
|
118
|
+
{...dataProps}
|
119
|
+
{...htmlProps}
|
120
|
+
className={classnames(headerCSS, headerSpacing, className)}
|
121
|
+
spacing={spacing}
|
130
122
|
>
|
131
123
|
{closeable && <HeaderBody />}
|
132
124
|
{children}
|
@@ -19,7 +19,7 @@ type LightboxType = {
|
|
19
19
|
id?: string,
|
20
20
|
photos: [],
|
21
21
|
initialPhoto?: number,
|
22
|
-
onChange?: (index: number)=>
|
22
|
+
onChange?: (index: number)=> {},
|
23
23
|
onClickRight?: () => void,
|
24
24
|
onClose?: () => void,
|
25
25
|
icon: string,
|
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
40
40
|
id = '',
|
41
41
|
initialPhoto = 0,
|
42
42
|
photos,
|
43
|
-
onChange = ()
|
43
|
+
onChange = ()=>{},
|
44
44
|
onClose,
|
45
45
|
onClickRight,
|
46
46
|
icon = 'times',
|
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
107
107
|
<div className="carousel">
|
108
108
|
<Lightbox.Header
|
109
109
|
icon={icon}
|
110
|
-
navRight={navRight}
|
111
|
-
onClickRight={onClickRight}
|
112
110
|
onClose={onClose}
|
111
|
+
onClickRight={onClickRight}
|
113
112
|
text={description}
|
113
|
+
navRight={navRight}
|
114
114
|
title={title}
|
115
115
|
/>
|
116
116
|
{children}
|
117
117
|
<Carousel
|
118
|
+
setIndex={setActivePhoto}
|
118
119
|
currentIndex={activePhoto}
|
119
120
|
onChange={handleOnSlide}
|
120
121
|
photos={photosMap}
|
121
|
-
setIndex={setActivePhoto}
|
122
122
|
/>
|
123
123
|
</div>
|
124
124
|
</div>
|
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
|
12
12
|
type LineGraphProps = {
|
13
13
|
align?: "left" | "right" | "center";
|
14
14
|
axisTitle?: string;
|
15
|
-
dark?:
|
15
|
+
dark?: Boolean;
|
16
16
|
xAxisCategories: [];
|
17
17
|
yAxisMin: number;
|
18
18
|
yAxisMax: number;
|
@@ -138,15 +138,15 @@ const LineGraph = ({
|
|
138
138
|
|
139
139
|
return (
|
140
140
|
<HighchartsReact
|
141
|
-
|
141
|
+
containerProps={{
|
142
142
|
className: classnames(globalProps(props), className),
|
143
143
|
id: id,
|
144
144
|
...ariaProps,
|
145
145
|
...dataProps,
|
146
146
|
...htmlProps
|
147
147
|
}}
|
148
|
-
|
149
|
-
|
148
|
+
highcharts={Highcharts}
|
149
|
+
options={options}
|
150
150
|
/>
|
151
151
|
);
|
152
152
|
};
|
@@ -9,7 +9,7 @@ type ListProps = {
|
|
9
9
|
className?: string;
|
10
10
|
children: React.ReactNode[] | React.ReactNode;
|
11
11
|
dark?: boolean;
|
12
|
-
data?:
|
12
|
+
data?: object;
|
13
13
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
14
14
|
id?: string;
|
15
15
|
layout?: "" | "left" | "right";
|
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
|
|
72
72
|
<div className={classes}>
|
73
73
|
{ordered ? (
|
74
74
|
<ol
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
75
|
+
{...ariaProps}
|
76
|
+
{...dataProps}
|
77
|
+
{...htmlProps}
|
78
|
+
className={className}
|
79
|
+
id={id}
|
80
|
+
role={role}
|
81
|
+
tabIndex={tabIndex}
|
82
82
|
>
|
83
83
|
{childrenWithProps}
|
84
84
|
</ol>
|
85
85
|
) : (
|
86
86
|
<ul
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
87
|
+
{...ariaProps}
|
88
|
+
{...dataProps}
|
89
|
+
{...htmlProps}
|
90
|
+
className={className}
|
91
|
+
id={id}
|
92
|
+
role={role}
|
93
|
+
tabIndex={tabIndex}
|
94
94
|
>
|
95
95
|
{childrenWithProps}
|
96
96
|
</ul>
|
@@ -7,7 +7,7 @@ type ListItemProps = {
|
|
7
7
|
aria?: { [key: string]: string },
|
8
8
|
children: React.ReactNode[] | React.ReactNode,
|
9
9
|
className?: string,
|
10
|
-
data?:
|
10
|
+
data?: object,
|
11
11
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
12
12
|
id?: string,
|
13
13
|
tabIndex?: number,
|
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
|
|
37
37
|
|
38
38
|
return (
|
39
39
|
<div
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
40
|
+
{...ariaProps}
|
41
|
+
{...dataProps}
|
42
|
+
{...htmlProps}
|
43
|
+
className={classes}
|
44
|
+
id={id}
|
45
45
|
>
|
46
46
|
<Body color="light">
|
47
47
|
<Icon
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
48
|
+
aria={{ label: 'loading icon' }}
|
49
|
+
fixedWidth
|
50
|
+
icon="spinner"
|
51
|
+
pulse
|
52
52
|
/>
|
53
53
|
{' Loading'}
|
54
54
|
</Body>
|
@@ -14,9 +14,9 @@ type MapProps = {
|
|
14
14
|
id?: string,
|
15
15
|
zoomBtns?: boolean,
|
16
16
|
flyTo?: boolean,
|
17
|
-
zoomInClick?: () =>
|
18
|
-
zoomOutClick?: () =>
|
19
|
-
flyToClick?: () =>
|
17
|
+
zoomInClick?: () => {},
|
18
|
+
zoomOutClick?: () => {},
|
19
|
+
flyToClick?: () => {},
|
20
20
|
} & GlobalProps
|
21
21
|
|
22
22
|
const Map = (props: MapProps) => {
|
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
|
|
51
51
|
{
|
52
52
|
zoomBtns ? (
|
53
53
|
<Map.Controls
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
54
|
+
flyTo={flyTo}
|
55
|
+
flyToClick={flyToClick}
|
56
|
+
zoomBtns={zoomBtns}
|
57
|
+
zoomInClick={zoomInClick}
|
58
|
+
zoomOutClick={zoomOutClick}
|
59
59
|
/>
|
60
60
|
) : null
|
61
61
|
}
|
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
|
|
6
6
|
type MapControlTypes = {
|
7
7
|
zoomBtns?: boolean,
|
8
8
|
flyTo?: boolean,
|
9
|
-
zoomInClick?: () =>
|
10
|
-
zoomOutClick?: () =>
|
11
|
-
flyToClick?: () =>
|
9
|
+
zoomInClick?: () => {},
|
10
|
+
zoomOutClick?: () => {},
|
11
|
+
flyToClick?: () => {},
|
12
12
|
children?: React.ReactNode | React.ReactNode[]
|
13
13
|
}
|
14
14
|
|
@@ -21,27 +21,19 @@ const MapControls = ({
|
|
21
21
|
children,
|
22
22
|
}: MapControlTypes) => {
|
23
23
|
return (
|
24
|
-
<Flex className="custom-nav-control"
|
25
|
-
orientation="column"
|
26
|
-
>
|
24
|
+
<Flex className="custom-nav-control" orientation="column">
|
27
25
|
{zoomBtns ? (
|
28
26
|
<>
|
29
27
|
<div className="custom-nav-control-zoom">
|
30
|
-
<Button className="map-zoom-in-button"
|
31
|
-
onClick={zoomInClick}
|
32
|
-
>
|
28
|
+
<Button className="map-zoom-in-button" onClick={zoomInClick}>
|
33
29
|
<Icon icon="plus" />
|
34
30
|
</Button>
|
35
|
-
<Button className="map-zoom-out-button"
|
36
|
-
onClick={zoomOutClick}
|
37
|
-
>
|
31
|
+
<Button className="map-zoom-out-button" onClick={zoomOutClick}>
|
38
32
|
<Icon icon="minus" />
|
39
33
|
</Button>
|
40
34
|
</div>
|
41
35
|
{flyTo ? (
|
42
|
-
<Button className="map-flyto-button"
|
43
|
-
onClick={flyToClick}
|
44
|
-
>
|
36
|
+
<Button className="map-flyto-button" onClick={flyToClick}>
|
45
37
|
<Icon icon="eye" />
|
46
38
|
</Button>
|
47
39
|
) : null}
|
@@ -3,15 +3,13 @@ import Button from "../pb_button/_button";
|
|
3
3
|
import Icon from "../pb_icon/_icon";
|
4
4
|
|
5
5
|
type MapCustomButtonTypes = {
|
6
|
-
onClick?: () =>
|
6
|
+
onClick?: () => {};
|
7
7
|
icon?: string;
|
8
8
|
};
|
9
9
|
|
10
10
|
const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
|
11
11
|
return (
|
12
|
-
<Button className="pb_map-custom-button"
|
13
|
-
onClick={onClick}
|
14
|
-
>
|
12
|
+
<Button className="pb_map-custom-button" onClick={onClick}>
|
15
13
|
<Icon icon={icon} />
|
16
14
|
</Button>
|
17
15
|
);
|
@@ -20,7 +20,7 @@ type MessageProps = {
|
|
20
20
|
avatarUrl?: string,
|
21
21
|
children?: React.ReactChild[] | React.ReactChild,
|
22
22
|
className?: string,
|
23
|
-
data?:
|
23
|
+
data?: object,
|
24
24
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
25
25
|
id?: string,
|
26
26
|
label?: string,
|
@@ -7,7 +7,7 @@ type MessageMentionProps = {
|
|
7
7
|
aria: { [key: string]: string },
|
8
8
|
children?: React.ReactChild[] | React.ReactChild,
|
9
9
|
className?: string,
|
10
|
-
data?:
|
10
|
+
data?: object,
|
11
11
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
12
12
|
id?: string,
|
13
13
|
variant: 'user' | 'self',
|
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
|
|
34
34
|
|
35
35
|
return (
|
36
36
|
<div
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
{...ariaProps}
|
38
|
+
{...dataProps}
|
39
|
+
{...htmlProps}
|
40
|
+
className={classes}
|
41
|
+
id={id}
|
42
42
|
>
|
43
43
|
{children}
|
44
44
|
</div>
|
@@ -86,50 +86,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
86
86
|
item: []
|
87
87
|
})
|
88
88
|
|
89
|
-
const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
|
90
|
-
if (!Array.isArray(tree)) {
|
91
|
-
return
|
92
|
-
}
|
93
|
-
return tree.map((item: { [key: string]: any }) => {
|
94
|
-
item.checked = check
|
95
|
-
item.children = modifyRecursive(item.children, check)
|
96
|
-
return item
|
97
|
-
})
|
98
|
-
}
|
99
|
-
|
100
|
-
// Function to map over data and add parent_id + depth property to each item
|
101
|
-
const addCheckedAndParentProperty = (
|
102
|
-
treeData: { [key: string]: any }[],
|
103
|
-
selectedIds: string[],
|
104
|
-
parent_id: string = null,
|
105
|
-
depth = 0,
|
106
|
-
) => {
|
107
|
-
if (!Array.isArray(treeData)) {
|
108
|
-
return
|
109
|
-
}
|
110
|
-
return treeData.map((item: { [key: string]: any } | any) => {
|
111
|
-
const newItem = {
|
112
|
-
...item,
|
113
|
-
checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
|
114
|
-
parent_id,
|
115
|
-
depth,
|
116
|
-
}
|
117
|
-
if (newItem.children && newItem.children.length > 0) {
|
118
|
-
const children =
|
119
|
-
item.checked && !returnAllSelected
|
120
|
-
? modifyRecursive(item.children, true)
|
121
|
-
: item.children
|
122
|
-
newItem.children = addCheckedAndParentProperty(
|
123
|
-
children,
|
124
|
-
selectedIds,
|
125
|
-
newItem.id,
|
126
|
-
depth + 1
|
127
|
-
)
|
128
|
-
}
|
129
|
-
return newItem
|
130
|
-
})
|
131
|
-
}
|
132
|
-
|
133
89
|
useEffect(() => {
|
134
90
|
const formattedData = addCheckedAndParentProperty(
|
135
91
|
treeData,
|
@@ -183,7 +139,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
183
139
|
}
|
184
140
|
}, [])
|
185
141
|
|
186
|
-
|
142
|
+
const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
|
143
|
+
if (!Array.isArray(tree)) {
|
144
|
+
return
|
145
|
+
}
|
146
|
+
return tree.map((item: { [key: string]: any }) => {
|
147
|
+
item.checked = check
|
148
|
+
item.children = modifyRecursive(item.children, check)
|
149
|
+
return item
|
150
|
+
})
|
151
|
+
}
|
187
152
|
|
188
153
|
// Iterate over tree, find item and set checked or unchecked
|
189
154
|
const modifyValue = (
|
@@ -241,7 +206,38 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
241
206
|
return tree
|
242
207
|
}
|
243
208
|
|
244
|
-
|
209
|
+
// Function to map over data and add parent_id + depth property to each item
|
210
|
+
const addCheckedAndParentProperty = (
|
211
|
+
treeData: { [key: string]: any }[],
|
212
|
+
selectedIds: string[],
|
213
|
+
parent_id: string = null,
|
214
|
+
depth = 0,
|
215
|
+
) => {
|
216
|
+
if (!Array.isArray(treeData)) {
|
217
|
+
return
|
218
|
+
}
|
219
|
+
return treeData.map((item: { [key: string]: any } | any) => {
|
220
|
+
const newItem = {
|
221
|
+
...item,
|
222
|
+
checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
|
223
|
+
parent_id,
|
224
|
+
depth,
|
225
|
+
}
|
226
|
+
if (newItem.children && newItem.children.length > 0) {
|
227
|
+
const children =
|
228
|
+
item.checked && !returnAllSelected
|
229
|
+
? modifyRecursive(item.children, true)
|
230
|
+
: item.children
|
231
|
+
newItem.children = addCheckedAndParentProperty(
|
232
|
+
children,
|
233
|
+
selectedIds,
|
234
|
+
newItem.id,
|
235
|
+
depth + 1
|
236
|
+
)
|
237
|
+
}
|
238
|
+
return newItem
|
239
|
+
})
|
240
|
+
}
|
245
241
|
|
246
242
|
// Click event for x on form pill
|
247
243
|
const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
|
@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
44
44
|
return users.slice(0, 1).map((userObject, index) => {
|
45
45
|
return (
|
46
46
|
<Avatar
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
47
|
+
{...userObject}
|
48
|
+
className="pb_multiple_users_stacked_item"
|
49
|
+
dark={dark}
|
50
|
+
key={index}
|
51
|
+
size="xs"
|
52
52
|
/>
|
53
53
|
)
|
54
54
|
})
|
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
59
59
|
return users.slice(1, 2).map((userObject, index) => {
|
60
60
|
return (
|
61
61
|
<Avatar
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
62
|
+
{...userObject}
|
63
|
+
className="pb_multiple_users_stacked_item second_item"
|
64
|
+
dark={dark}
|
65
|
+
key={index}
|
66
|
+
size="xs"
|
67
67
|
/>
|
68
68
|
)
|
69
69
|
})
|
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
74
74
|
if (moreThanTwo === true) {
|
75
75
|
return (
|
76
76
|
<Badge
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
77
|
+
className="pb_multiple_users_stacked_item second_item"
|
78
|
+
dark={dark}
|
79
|
+
rounded
|
80
|
+
text={`+${users.length - displayCount()}`}
|
81
|
+
variant="primary"
|
82
82
|
/>
|
83
83
|
)
|
84
84
|
}
|
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
|
|
86
86
|
|
87
87
|
return (
|
88
88
|
<div
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
89
|
+
{...ariaProps}
|
90
|
+
{...dataProps}
|
91
|
+
{...htmlProps}
|
92
|
+
className={classes}
|
93
|
+
id={id}
|
94
94
|
>
|
95
95
|
{firstUser()}
|
96
96
|
{secondUser()}
|