playbook_ui 11.18.0.pre.alpha.pagutility1 → 11.19.0.pre.alpha.map1
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/_playbook.scss +2 -1
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +3 -2
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +8 -8
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +10 -3
- 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_map/_map.scss +6 -0
- data/app/pb_kits/playbook/pb_map/_map.tsx +39 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +49 -0
- data/app/pb_kits/playbook/pb_map/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_map/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_map/map.test.jsx +17 -0
- 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_typeahead/_typeahead.jsx +13 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +98 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +0 -1
- metadata +14 -22
- data/app/pb_kits/playbook/pb_list/_list.jsx +0 -98
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +0 -227
- data/app/pb_kits/playbook/utilities/_pagination.scss +0 -68
- data/lib/playbook/pagination_renderer.rb +0 -41
@@ -0,0 +1,222 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { render, screen, fireEvent } from "../utilities/test-utils";
|
3
|
+
import { Button, PbReactPopover } from "..";
|
4
|
+
|
5
|
+
const testId = "popover-kit";
|
6
|
+
|
7
|
+
//Test default popover
|
8
|
+
const PopoverTest = () => {
|
9
|
+
const [mockState, setMockState] = React.useState(false)
|
10
|
+
const togglePopover = () => {
|
11
|
+
setMockState(!mockState)
|
12
|
+
}
|
13
|
+
|
14
|
+
const popoverReference = (
|
15
|
+
<Button onClick={togglePopover}
|
16
|
+
text="Click Me"
|
17
|
+
/>
|
18
|
+
);
|
19
|
+
return (
|
20
|
+
<PbReactPopover
|
21
|
+
offset
|
22
|
+
reference={popoverReference}
|
23
|
+
show={mockState}
|
24
|
+
>
|
25
|
+
{"Click Anywhere"}
|
26
|
+
</PbReactPopover>
|
27
|
+
)
|
28
|
+
};
|
29
|
+
//Test popover with z-index
|
30
|
+
const PopoverTestZIndex = () => {
|
31
|
+
const [mockState, setMockState] = React.useState(false)
|
32
|
+
const togglePopover = () => {
|
33
|
+
setMockState(!mockState)
|
34
|
+
}
|
35
|
+
|
36
|
+
const popoverReference = (
|
37
|
+
<Button onClick={togglePopover}
|
38
|
+
text="Click Me"
|
39
|
+
/>
|
40
|
+
);
|
41
|
+
return (
|
42
|
+
<PbReactPopover
|
43
|
+
offset
|
44
|
+
reference={popoverReference}
|
45
|
+
show={mockState}
|
46
|
+
zIndex={3}
|
47
|
+
>
|
48
|
+
{"Click Anywhere"}
|
49
|
+
</PbReactPopover>
|
50
|
+
)
|
51
|
+
};
|
52
|
+
|
53
|
+
//Test popover with max-height and max-width
|
54
|
+
const PopoverTestHeight = () => {
|
55
|
+
const [mockState, setMockState] = React.useState(false)
|
56
|
+
const togglePopover = () => {
|
57
|
+
setMockState(!mockState)
|
58
|
+
}
|
59
|
+
|
60
|
+
const popoverReference = (
|
61
|
+
<Button onClick={togglePopover}
|
62
|
+
text="Click Me"
|
63
|
+
/>
|
64
|
+
);
|
65
|
+
return (
|
66
|
+
<PbReactPopover
|
67
|
+
maxHeight="150px"
|
68
|
+
maxWidth="240px"
|
69
|
+
offset
|
70
|
+
reference={popoverReference}
|
71
|
+
show={mockState}
|
72
|
+
>
|
73
|
+
{"Click Anywhere"}
|
74
|
+
</PbReactPopover>
|
75
|
+
)
|
76
|
+
};
|
77
|
+
|
78
|
+
//Test Popover with click to close 'anywhere'
|
79
|
+
const PopoverTestClicktoClose = () => {
|
80
|
+
const [mockState, setMockState] = React.useState(false)
|
81
|
+
const togglePopover = () => {
|
82
|
+
setMockState(!mockState)
|
83
|
+
}
|
84
|
+
const handleShouldClosePopover = (shouldClosePopover) => {
|
85
|
+
setMockState(!shouldClosePopover)
|
86
|
+
}
|
87
|
+
|
88
|
+
const popoverReference = (
|
89
|
+
<Button onClick={togglePopover}
|
90
|
+
text="Click Me"
|
91
|
+
/>
|
92
|
+
);
|
93
|
+
return (
|
94
|
+
<PbReactPopover
|
95
|
+
closeOnClick="any"
|
96
|
+
offset
|
97
|
+
reference={popoverReference}
|
98
|
+
shouldClosePopover={handleShouldClosePopover}
|
99
|
+
show={mockState}
|
100
|
+
>
|
101
|
+
{"Click Anywhere"}
|
102
|
+
</PbReactPopover>
|
103
|
+
)
|
104
|
+
};
|
105
|
+
|
106
|
+
//Test Popover with click to close 'inside'
|
107
|
+
const PopoverTestClicktoClose2 = () => {
|
108
|
+
const [mockState, setMockState] = React.useState(false)
|
109
|
+
const togglePopover = () => {
|
110
|
+
setMockState(!mockState)
|
111
|
+
}
|
112
|
+
const handleShouldClosePopover = (shouldClosePopover) => {
|
113
|
+
setMockState(!shouldClosePopover)
|
114
|
+
}
|
115
|
+
|
116
|
+
const popoverReference = (
|
117
|
+
<Button onClick={togglePopover}
|
118
|
+
text="Click Me"
|
119
|
+
/>
|
120
|
+
);
|
121
|
+
return (
|
122
|
+
<PbReactPopover
|
123
|
+
closeOnClick="inside"
|
124
|
+
offset
|
125
|
+
reference={popoverReference}
|
126
|
+
shouldClosePopover={handleShouldClosePopover}
|
127
|
+
show={mockState}
|
128
|
+
>
|
129
|
+
{"Click Inside"}
|
130
|
+
</PbReactPopover>
|
131
|
+
)
|
132
|
+
};
|
133
|
+
|
134
|
+
//Test Popover with click to close 'outside'
|
135
|
+
const PopoverTestClicktoClose3 = () => {
|
136
|
+
const [mockState, setMockState] = React.useState(false)
|
137
|
+
const togglePopover = () => {
|
138
|
+
setMockState(!mockState)
|
139
|
+
}
|
140
|
+
const handleShouldClosePopover = (shouldClosePopover) => {
|
141
|
+
setMockState(!shouldClosePopover)
|
142
|
+
}
|
143
|
+
|
144
|
+
const popoverReference = (
|
145
|
+
<Button onClick={togglePopover}
|
146
|
+
text="Click Me"
|
147
|
+
/>
|
148
|
+
);
|
149
|
+
return (
|
150
|
+
<PbReactPopover
|
151
|
+
closeOnClick="outside"
|
152
|
+
offset
|
153
|
+
reference={popoverReference}
|
154
|
+
shouldClosePopover={handleShouldClosePopover}
|
155
|
+
show={mockState}
|
156
|
+
>
|
157
|
+
{"Click Outside"}
|
158
|
+
</PbReactPopover>
|
159
|
+
)
|
160
|
+
};
|
161
|
+
|
162
|
+
|
163
|
+
test("renders Popover", () => {
|
164
|
+
render(<PopoverTest data={{ testid: testId}}/>)
|
165
|
+
const btn = screen.getByText(/click me/i)
|
166
|
+
fireEvent.click(btn);
|
167
|
+
const kit = screen.getByText("Click Anywhere");
|
168
|
+
expect(kit).toBeInTheDocument();
|
169
|
+
});
|
170
|
+
|
171
|
+
test("renders Popover with z index", () => {
|
172
|
+
render(<PopoverTestZIndex data={{ testid: testId}}/>)
|
173
|
+
const btn = screen.getByText(/click me/i)
|
174
|
+
fireEvent.click(btn);
|
175
|
+
const kit = screen.getByText("Click Anywhere");
|
176
|
+
expect(kit).toHaveClass("pb_popover_body z_index_3");
|
177
|
+
});
|
178
|
+
|
179
|
+
test("renders Popover with max height and max width", () => {
|
180
|
+
render(<PopoverTestHeight data={{ testid: testId}}/>)
|
181
|
+
const btn = screen.getByText(/click me/i)
|
182
|
+
fireEvent.click(btn);
|
183
|
+
const kit = screen.getByText("Click Anywhere");
|
184
|
+
expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
|
185
|
+
});
|
186
|
+
|
187
|
+
test("closes Popover on click anywhere", () => {
|
188
|
+
render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
|
189
|
+
const btn = screen.getByText(/click me/i)
|
190
|
+
fireEvent.click(btn);
|
191
|
+
const kit = screen.getByText("Click Anywhere");
|
192
|
+
expect(kit).toBeInTheDocument();
|
193
|
+
fireEvent.click(kit);
|
194
|
+
|
195
|
+
expect(kit).not.toBeInTheDocument();
|
196
|
+
|
197
|
+
});
|
198
|
+
|
199
|
+
test("closes Popover on click inside", () => {
|
200
|
+
render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
|
201
|
+
const btn = screen.getByText(/click me/i)
|
202
|
+
fireEvent.click(btn);
|
203
|
+
const kit = screen.getByText("Click Inside");
|
204
|
+
expect(kit).toBeInTheDocument();
|
205
|
+
fireEvent.click(kit);
|
206
|
+
|
207
|
+
expect(kit).not.toBeInTheDocument();
|
208
|
+
|
209
|
+
});
|
210
|
+
|
211
|
+
test("closes Popover on click outside", () => {
|
212
|
+
render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
|
213
|
+
const btn = screen.getByText(/click me/i)
|
214
|
+
fireEvent.click(btn);
|
215
|
+
const kit = screen.getByText("Click Outside");
|
216
|
+
expect(kit).toBeInTheDocument();
|
217
|
+
fireEvent.click(kit);
|
218
|
+
expect(kit).toBeInTheDocument();
|
219
|
+
fireEvent.click(btn);
|
220
|
+
expect(kit).not.toBeInTheDocument();
|
221
|
+
|
222
|
+
});
|
@@ -28,10 +28,11 @@ import { noop } from '../utilities/props'
|
|
28
28
|
*/
|
29
29
|
|
30
30
|
type TypeaheadProps = {
|
31
|
-
id?: string,
|
32
31
|
async?: boolean,
|
32
|
+
components?: object,
|
33
33
|
createable?: boolean,
|
34
34
|
dark?: boolean,
|
35
|
+
id?: string,
|
35
36
|
label?: string,
|
36
37
|
loadOptions?: string,
|
37
38
|
getOptionLabel?: string | (() => any),
|
@@ -44,7 +45,16 @@ type TypeaheadProps = {
|
|
44
45
|
* @param {TypeaheadProps} props - props as described at https://react-select.com/props
|
45
46
|
*/
|
46
47
|
|
47
|
-
const Typeahead = ({
|
48
|
+
const Typeahead = ({
|
49
|
+
async,
|
50
|
+
components = {},
|
51
|
+
createable,
|
52
|
+
getOptionLabel,
|
53
|
+
getOptionValue,
|
54
|
+
id,
|
55
|
+
loadOptions = noop,
|
56
|
+
...props
|
57
|
+
}: TypeaheadProps) => {
|
48
58
|
const selectProps = {
|
49
59
|
cacheOptions: true,
|
50
60
|
components: {
|
@@ -57,6 +67,7 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
|
|
57
67
|
Option,
|
58
68
|
Placeholder,
|
59
69
|
ValueContainer,
|
70
|
+
...components
|
60
71
|
},
|
61
72
|
loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
|
62
73
|
getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
|
@@ -0,0 +1,98 @@
|
|
1
|
+
/* eslint-disable react/no-danger */
|
2
|
+
/* eslint-disable react/no-multi-comp */
|
3
|
+
/* @flow */
|
4
|
+
|
5
|
+
import React, { useState } from 'react'
|
6
|
+
import { components, OptionProps } from 'react-select'
|
7
|
+
|
8
|
+
import {
|
9
|
+
Avatar,
|
10
|
+
Body,
|
11
|
+
Flex,
|
12
|
+
FlexItem,
|
13
|
+
Title,
|
14
|
+
Typeahead,
|
15
|
+
} from '../..'
|
16
|
+
|
17
|
+
const USERS = [
|
18
|
+
{
|
19
|
+
name: "Wade Winningham",
|
20
|
+
title: "Nitro Principal Developer",
|
21
|
+
territory: "PHL",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
name: "Jason Cypret",
|
25
|
+
title: "Vice President of User Experience",
|
26
|
+
territory: "PHL",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
name: "Stephen Marshall",
|
30
|
+
title: "Senior User Experience Engineer",
|
31
|
+
territory: "PHL",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
name: "Jasper Furniss",
|
35
|
+
title: "Senior User Experience Engineer",
|
36
|
+
territory: "PHL",
|
37
|
+
},
|
38
|
+
];
|
39
|
+
|
40
|
+
const TypeaheadWithHighlight = (props) => {
|
41
|
+
const [selectedUser, setSelectedUser] = useState()
|
42
|
+
|
43
|
+
const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
|
44
|
+
|
45
|
+
const highlighted = (text: string) => {
|
46
|
+
if (!inputValue.length) return text
|
47
|
+
return text.replace(
|
48
|
+
new RegExp(inputValue, 'gi'),
|
49
|
+
highlighted => `<mark>${highlighted}</mark>`
|
50
|
+
)
|
51
|
+
}
|
52
|
+
return (
|
53
|
+
<Flex>
|
54
|
+
<FlexItem>
|
55
|
+
<Avatar
|
56
|
+
marginRight="sm"
|
57
|
+
name={name}
|
58
|
+
size="sm"
|
59
|
+
/>
|
60
|
+
</FlexItem>
|
61
|
+
<FlexItem>
|
62
|
+
<Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
|
63
|
+
<Body color="light">
|
64
|
+
<span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
|
65
|
+
{territory}
|
66
|
+
</Body>
|
67
|
+
</FlexItem>
|
68
|
+
</Flex>
|
69
|
+
)
|
70
|
+
}
|
71
|
+
|
72
|
+
const customComponents = {
|
73
|
+
Option: (props: OptionProps) => (
|
74
|
+
<components.Option {...props}/>
|
75
|
+
),
|
76
|
+
SingleValue: ({ data }: any) => (
|
77
|
+
<span>{data.name}</span>
|
78
|
+
)
|
79
|
+
}
|
80
|
+
|
81
|
+
return (
|
82
|
+
<React.Fragment>
|
83
|
+
<Typeahead
|
84
|
+
components={customComponents}
|
85
|
+
formatOptionLabel={formatOptionLabel}
|
86
|
+
getOptionLabel={(option) => option.name}
|
87
|
+
getOptionValue={({name, title}) => `${name} ${title}`}
|
88
|
+
label="Users"
|
89
|
+
onChange={(user) => setSelectedUser(user)}
|
90
|
+
options={USERS.filter((option) => option.name != selectedUser?.name)}
|
91
|
+
placeholder="type the name of a user"
|
92
|
+
{...props}
|
93
|
+
/>
|
94
|
+
</React.Fragment>
|
95
|
+
)
|
96
|
+
}
|
97
|
+
|
98
|
+
export default TypeaheadWithHighlight
|
@@ -11,6 +11,7 @@ examples:
|
|
11
11
|
|
12
12
|
react:
|
13
13
|
- typeahead_default: Default
|
14
|
+
- typeahead_with_highlight: With Highlight
|
14
15
|
- typeahead_with_pills: With Pills
|
15
16
|
- typeahead_with_pills_async: With Pills (Async Data)
|
16
17
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { default as TypeaheadDefault } from './_typeahead_default.jsx'
|
2
|
+
export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
|
2
3
|
export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
|
3
4
|
export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
|
4
5
|
export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
|
@@ -55,6 +55,7 @@ import * as Lightbox from 'pb_lightbox/docs'
|
|
55
55
|
import * as LineGraphDocs from 'pb_line_graph/docs'
|
56
56
|
import * as List from 'pb_list/docs'
|
57
57
|
import * as LoadingInline from 'pb_loading_inline/docs'
|
58
|
+
import * as Map from 'pb_map/docs'
|
58
59
|
import * as Message from 'pb_message/docs'
|
59
60
|
import * as MultipleUsers from 'pb_multiple_users/docs'
|
60
61
|
import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
|
@@ -152,6 +153,7 @@ WebpackerReact.setup({
|
|
152
153
|
...LineGraphDocs,
|
153
154
|
...List,
|
154
155
|
...LoadingInline,
|
156
|
+
...Map,
|
155
157
|
...Message,
|
156
158
|
...MultipleUsers,
|
157
159
|
...MultipleUsersStacked,
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 11.
|
4
|
+
version: 11.19.0.pre.alpha.map1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-01-
|
12
|
+
date: 2023-01-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -123,20 +123,6 @@ dependencies:
|
|
123
123
|
- - "~>"
|
124
124
|
- !ruby/object:Gem::Version
|
125
125
|
version: 0.3.2
|
126
|
-
- !ruby/object:Gem::Dependency
|
127
|
-
name: will_paginate
|
128
|
-
requirement: !ruby/object:Gem::Requirement
|
129
|
-
requirements:
|
130
|
-
- - "~>"
|
131
|
-
- !ruby/object:Gem::Version
|
132
|
-
version: '3.3'
|
133
|
-
type: :runtime
|
134
|
-
prerelease: false
|
135
|
-
version_requirements: !ruby/object:Gem::Requirement
|
136
|
-
requirements:
|
137
|
-
- - "~>"
|
138
|
-
- !ruby/object:Gem::Version
|
139
|
-
version: '3.3'
|
140
126
|
- !ruby/object:Gem::Dependency
|
141
127
|
name: byebug
|
142
128
|
requirement: !ruby/object:Gem::Requirement
|
@@ -1350,9 +1336,9 @@ files:
|
|
1350
1336
|
- app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
|
1351
1337
|
- app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
|
1352
1338
|
- app/pb_kits/playbook/pb_line_graph/line_graph.rb
|
1353
|
-
- app/pb_kits/playbook/pb_list/_list.jsx
|
1354
1339
|
- app/pb_kits/playbook/pb_list/_list.scss
|
1355
|
-
- app/pb_kits/playbook/pb_list/
|
1340
|
+
- app/pb_kits/playbook/pb_list/_list.tsx
|
1341
|
+
- app/pb_kits/playbook/pb_list/_list_item.tsx
|
1356
1342
|
- app/pb_kits/playbook/pb_list/_list_mixin.scss
|
1357
1343
|
- app/pb_kits/playbook/pb_list/docs/_description.md
|
1358
1344
|
- app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
|
@@ -1385,6 +1371,12 @@ files:
|
|
1385
1371
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
|
1386
1372
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
1387
1373
|
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1374
|
+
- app/pb_kits/playbook/pb_map/_map.scss
|
1375
|
+
- app/pb_kits/playbook/pb_map/_map.tsx
|
1376
|
+
- app/pb_kits/playbook/pb_map/docs/_map_default.jsx
|
1377
|
+
- app/pb_kits/playbook/pb_map/docs/example.yml
|
1378
|
+
- app/pb_kits/playbook/pb_map/docs/index.js
|
1379
|
+
- app/pb_kits/playbook/pb_map/map.test.jsx
|
1388
1380
|
- app/pb_kits/playbook/pb_message/_message.jsx
|
1389
1381
|
- app/pb_kits/playbook/pb_message/_message.scss
|
1390
1382
|
- app/pb_kits/playbook/pb_message/_message_mixins.scss
|
@@ -1547,8 +1539,8 @@ files:
|
|
1547
1539
|
- app/pb_kits/playbook/pb_pill/docs/index.js
|
1548
1540
|
- app/pb_kits/playbook/pb_pill/pill.html.erb
|
1549
1541
|
- app/pb_kits/playbook/pb_pill/pill.rb
|
1550
|
-
- app/pb_kits/playbook/pb_popover/_popover.jsx
|
1551
1542
|
- app/pb_kits/playbook/pb_popover/_popover.scss
|
1543
|
+
- app/pb_kits/playbook/pb_popover/_popover.tsx
|
1552
1544
|
- app/pb_kits/playbook/pb_popover/docs/_description.md
|
1553
1545
|
- app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
|
1554
1546
|
- app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
|
@@ -1563,9 +1555,10 @@ files:
|
|
1563
1555
|
- app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
|
1564
1556
|
- app/pb_kits/playbook/pb_popover/docs/example.yml
|
1565
1557
|
- app/pb_kits/playbook/pb_popover/docs/index.js
|
1566
|
-
- app/pb_kits/playbook/pb_popover/index.
|
1558
|
+
- app/pb_kits/playbook/pb_popover/index.ts
|
1567
1559
|
- app/pb_kits/playbook/pb_popover/popover.html.erb
|
1568
1560
|
- app/pb_kits/playbook/pb_popover/popover.rb
|
1561
|
+
- app/pb_kits/playbook/pb_popover/popover.test.js
|
1569
1562
|
- app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
|
1570
1563
|
- app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
|
1571
1564
|
- app/pb_kits/playbook/pb_progress_pills/docs/_description.md
|
@@ -2155,6 +2148,7 @@ files:
|
|
2155
2148
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
2156
2149
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
2157
2150
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
2151
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
|
2158
2152
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
2159
2153
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
2160
2154
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
|
@@ -2273,7 +2267,6 @@ files:
|
|
2273
2267
|
- app/pb_kits/playbook/utilities/_max_width.scss
|
2274
2268
|
- app/pb_kits/playbook/utilities/_mixins.scss
|
2275
2269
|
- app/pb_kits/playbook/utilities/_number_spacing.scss
|
2276
|
-
- app/pb_kits/playbook/utilities/_pagination.scss
|
2277
2270
|
- app/pb_kits/playbook/utilities/_positioning.scss
|
2278
2271
|
- app/pb_kits/playbook/utilities/_shadow.scss
|
2279
2272
|
- app/pb_kits/playbook/utilities/_spacing.scss
|
@@ -2339,7 +2332,6 @@ files:
|
|
2339
2332
|
- lib/playbook/markdown/template_handler.rb
|
2340
2333
|
- lib/playbook/number_spacing.rb
|
2341
2334
|
- lib/playbook/order.rb
|
2342
|
-
- lib/playbook/pagination_renderer.rb
|
2343
2335
|
- lib/playbook/pb_doc_helper.rb
|
2344
2336
|
- lib/playbook/pb_forms_helper.rb
|
2345
2337
|
- lib/playbook/pb_kit_helper.rb
|
@@ -1,98 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React, { type Node } from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps'
|
7
|
-
|
8
|
-
type ListProps = {
|
9
|
-
aria?: object,
|
10
|
-
borderless: boolean,
|
11
|
-
className?: string,
|
12
|
-
children: array<Node> | Node,
|
13
|
-
dark: boolean,
|
14
|
-
data?: object,
|
15
|
-
id?: string,
|
16
|
-
layout: "" | "left" | "right",
|
17
|
-
ordered: boolean,
|
18
|
-
role?: string,
|
19
|
-
tabIndex?: string,
|
20
|
-
text?: string,
|
21
|
-
size?: string,
|
22
|
-
variant?: string,
|
23
|
-
xpadding: boolean,
|
24
|
-
}
|
25
|
-
|
26
|
-
const List = (props: ListProps) => {
|
27
|
-
const {
|
28
|
-
aria = {},
|
29
|
-
borderless = false,
|
30
|
-
children,
|
31
|
-
className,
|
32
|
-
dark = false,
|
33
|
-
data = {},
|
34
|
-
id,
|
35
|
-
layout = '',
|
36
|
-
ordered = false,
|
37
|
-
role,
|
38
|
-
size = '',
|
39
|
-
tabIndex,
|
40
|
-
xpadding = false,
|
41
|
-
variant,
|
42
|
-
text,
|
43
|
-
} = props
|
44
|
-
|
45
|
-
const layoutClass = {
|
46
|
-
left: 'layout_left',
|
47
|
-
right: 'layout_right',
|
48
|
-
default: '',
|
49
|
-
}
|
50
|
-
|
51
|
-
const childrenWithProps = React.Children.map(children, (child) => {
|
52
|
-
return React.cloneElement(child, { text, variant })
|
53
|
-
})
|
54
|
-
const ariaProps = buildAriaProps(aria)
|
55
|
-
const dataProps = buildDataProps(data)
|
56
|
-
const classes = classnames(
|
57
|
-
buildCss('pb_list_kit', layoutClass[layout], size, {
|
58
|
-
dark: dark,
|
59
|
-
borderless: borderless,
|
60
|
-
ordered: ordered,
|
61
|
-
xpadding: xpadding,
|
62
|
-
}),
|
63
|
-
globalProps(props),
|
64
|
-
className
|
65
|
-
)
|
66
|
-
|
67
|
-
return (
|
68
|
-
<div
|
69
|
-
className={classes}
|
70
|
-
>
|
71
|
-
<If condition={ordered}>
|
72
|
-
<ol
|
73
|
-
{...ariaProps}
|
74
|
-
{...dataProps}
|
75
|
-
className={className}
|
76
|
-
id={id}
|
77
|
-
role={role}
|
78
|
-
tabIndex={tabIndex}
|
79
|
-
>
|
80
|
-
{childrenWithProps}
|
81
|
-
</ol>
|
82
|
-
<Else />
|
83
|
-
<ul
|
84
|
-
{...ariaProps}
|
85
|
-
{...dataProps}
|
86
|
-
className={className}
|
87
|
-
id={id}
|
88
|
-
role={role}
|
89
|
-
tabIndex={tabIndex}
|
90
|
-
>
|
91
|
-
{childrenWithProps}
|
92
|
-
</ul>
|
93
|
-
</If>
|
94
|
-
</div>
|
95
|
-
)
|
96
|
-
}
|
97
|
-
|
98
|
-
export default List
|