playbook_ui_docs 14.10.0.pre.alpha.play16825206 → 14.10.0.pre.alpha.play16825301
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_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb +43 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +18 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +40 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +4 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +18 -0
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +4 -5
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +4 -4
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fb645d343c3580319a82fa836f7e791a083155f956e21b51deda0fce6c46a75c
|
|
4
|
+
data.tar.gz: 0a1f7014a2432c3eec139d68e3483ff9fa5f8dda4f82367f3f0ae7866e7622f2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2ffd1e0f5a31b83f2d28a33be23929442de5d5746436eed34ae1b5c0a3fcbebf3949ec0feee2897d98d98218b3a55ddae0e047f222cb23e90e2c22c7150371f4
|
|
7
|
+
data.tar.gz: 50e814bc1ee604f1134bf7646c397ad95ea04a1ee1896e4dfdfb0423f86a2aced8ee1ce28930c20d5ea1dad80c1db8a69bc969e00f4ffbb4fab1b7dd8662e121
|
|
@@ -49,11 +49,9 @@
|
|
|
49
49
|
label: "Graduated Students",
|
|
50
50
|
}
|
|
51
51
|
]
|
|
52
|
-
|
|
53
|
-
subrow_headers = ["Quarter", "Month", "Day"]
|
|
54
52
|
%>
|
|
55
53
|
|
|
56
54
|
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
57
55
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
58
|
-
<%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions,
|
|
56
|
+
<%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
|
|
59
57
|
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
CHANGED
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
|
|
37
37
|
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
38
38
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
|
39
|
-
<%= pb_rails("advanced_table/table_body", props: { id: "
|
|
39
|
+
<%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
|
|
40
40
|
<% end %>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
|
|
2
2
|
|
|
3
|
-
`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle
|
|
3
|
+
`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<% column_definitions = [
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Enrollment Data",
|
|
9
|
+
columns: [
|
|
10
|
+
{
|
|
11
|
+
accessor: "newEnrollments",
|
|
12
|
+
label: "New Enrollments",
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
accessor: "scheduledMeetings",
|
|
16
|
+
label: "Scheduled Meetings",
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
label: "Performance Data",
|
|
22
|
+
columns: [
|
|
23
|
+
{
|
|
24
|
+
accessor: "attendanceRate",
|
|
25
|
+
label: "Attendance Rate",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "completedClasses",
|
|
29
|
+
label: "Completed Classes",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
accessor: "classCompletionRate",
|
|
33
|
+
label: "Class Completion Rate",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
accessor: "graduatedStudents",
|
|
37
|
+
label: "Graduated Students",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
] %>
|
|
42
|
+
|
|
43
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_headers", table_data: @table_data, column_definitions: column_definitions }) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<% column_definitions = [
|
|
2
|
+
{
|
|
3
|
+
accessor: "year",
|
|
4
|
+
label: "Year",
|
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
label: "Enrollment Data",
|
|
9
|
+
columns: [
|
|
10
|
+
{
|
|
11
|
+
label: "Enrollment Stats",
|
|
12
|
+
columns: [
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
accessor: "scheduledMeetings",
|
|
19
|
+
label: "Scheduled Meetings",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label: "Performance Data",
|
|
27
|
+
columns: [
|
|
28
|
+
{
|
|
29
|
+
label: "Completion Metrics",
|
|
30
|
+
columns: [
|
|
31
|
+
{
|
|
32
|
+
accessor: "completedClasses",
|
|
33
|
+
label: "Completed Classes",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
accessor: "classCompletionRate",
|
|
37
|
+
label: "Class Completion Rate",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Attendance",
|
|
43
|
+
columns: [
|
|
44
|
+
{
|
|
45
|
+
accessor: "attendanceRate",
|
|
46
|
+
label: "Attendance Rate",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
accessor: "scheduledMeetings",
|
|
50
|
+
label: "Scheduled Meetings",
|
|
51
|
+
},
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
56
|
+
] %>
|
|
57
|
+
|
|
58
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
@@ -5,6 +5,9 @@ examples:
|
|
|
5
5
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
|
6
6
|
- advanced_table_beta_sort: Enable Sorting
|
|
7
7
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
8
|
+
- advanced_table_column_headers: Multi-Header Columns
|
|
9
|
+
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
|
10
|
+
|
|
8
11
|
|
|
9
12
|
react:
|
|
10
13
|
- advanced_table_default: Default (Required Props)
|
|
@@ -88,3 +88,21 @@
|
|
|
88
88
|
Body
|
|
89
89
|
<% end %>
|
|
90
90
|
<% end %>
|
|
91
|
+
|
|
92
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
93
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
|
|
94
|
+
<%= pb_rails("body", props: { text: "Success Subtle" }) %>
|
|
95
|
+
<% end %>
|
|
96
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
97
|
+
Body
|
|
98
|
+
<% end %>
|
|
99
|
+
<% end %>
|
|
100
|
+
|
|
101
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
102
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
|
|
103
|
+
<%= pb_rails("body", props: { text: "Error Subtle"}) %>
|
|
104
|
+
<% end %>
|
|
105
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
106
|
+
Body
|
|
107
|
+
<% end %>
|
|
108
|
+
<% end %>
|
|
@@ -231,6 +231,46 @@ const CardHeader = (props) => {
|
|
|
231
231
|
/>
|
|
232
232
|
</Card.Body>
|
|
233
233
|
</Card>
|
|
234
|
+
|
|
235
|
+
<Card
|
|
236
|
+
{...props}
|
|
237
|
+
marginBottom='sm'
|
|
238
|
+
padding="none"
|
|
239
|
+
>
|
|
240
|
+
<Card.Header
|
|
241
|
+
headerColor="success_subtle"
|
|
242
|
+
>
|
|
243
|
+
<Body
|
|
244
|
+
text="Success Subtle"
|
|
245
|
+
/>
|
|
246
|
+
</Card.Header>
|
|
247
|
+
<Card.Body>
|
|
248
|
+
<Body
|
|
249
|
+
{...props}
|
|
250
|
+
text="Body"
|
|
251
|
+
/>
|
|
252
|
+
</Card.Body>
|
|
253
|
+
</Card>
|
|
254
|
+
|
|
255
|
+
<Card
|
|
256
|
+
{...props}
|
|
257
|
+
marginBottom='sm'
|
|
258
|
+
padding="none"
|
|
259
|
+
>
|
|
260
|
+
<Card.Header
|
|
261
|
+
headerColor="error_subtle"
|
|
262
|
+
>
|
|
263
|
+
<Body
|
|
264
|
+
text="Error Subtle"
|
|
265
|
+
/>
|
|
266
|
+
</Card.Header>
|
|
267
|
+
<Card.Body>
|
|
268
|
+
<Body
|
|
269
|
+
{...props}
|
|
270
|
+
text="Body"
|
|
271
|
+
/>
|
|
272
|
+
</Card.Body>
|
|
273
|
+
</Card>
|
|
234
274
|
</>
|
|
235
275
|
)
|
|
236
276
|
}
|
|
@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
|
|
|
25
25
|
{...props}
|
|
26
26
|
/>
|
|
27
27
|
<FileUpload
|
|
28
|
-
accept={
|
|
28
|
+
accept={{
|
|
29
|
+
"application/pdf": [".pdf"],
|
|
30
|
+
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
|
|
31
|
+
}}
|
|
29
32
|
acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
|
|
30
33
|
onFilesAccepted={handleOnFilesAccepted}
|
|
31
34
|
{...props}
|
|
@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
|
|
|
18
18
|
const RejectedFilesList = ({ files }) => (
|
|
19
19
|
<List>
|
|
20
20
|
{files.map((file) => (
|
|
21
|
-
<ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
|
|
21
|
+
<ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
|
|
22
22
|
))}
|
|
23
23
|
</List>
|
|
24
24
|
)
|
|
@@ -35,6 +35,8 @@ examples:
|
|
|
35
35
|
- table_lg: Large
|
|
36
36
|
- table_sticky: Sticky Header
|
|
37
37
|
- table_sticky_left_columns: Sticky Left Column
|
|
38
|
+
- table_sticky_right_columns: Sticky Right Column
|
|
39
|
+
- table_sticky_columns: Sticky Left and Right Columns
|
|
38
40
|
- table_alignment_row: Row Alignment
|
|
39
41
|
- table_alignment_column: Cell Alignment
|
|
40
42
|
- table_alignment_shift_row: Row Shift
|
|
@@ -26,6 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
|
|
|
26
26
|
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
27
27
|
export { default as TableOuterPadding } from './_table_outer_padding.jsx'
|
|
28
28
|
export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
|
|
29
|
+
export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
|
|
30
|
+
export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
|
|
29
31
|
export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
|
|
30
32
|
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
|
|
31
33
|
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
|
|
@@ -16,6 +16,8 @@ const TextInputMask = (props) => {
|
|
|
16
16
|
zipCode: '',
|
|
17
17
|
postalCode: '',
|
|
18
18
|
ssn: '',
|
|
19
|
+
creditCard: '',
|
|
20
|
+
cvv: ''
|
|
19
21
|
})
|
|
20
22
|
|
|
21
23
|
const handleOnChangeFormField = ({ target }) => {
|
|
@@ -57,6 +59,22 @@ const TextInputMask = (props) => {
|
|
|
57
59
|
value={formFields.ssn}
|
|
58
60
|
{...props}
|
|
59
61
|
/>
|
|
62
|
+
<TextInput
|
|
63
|
+
label="Credit Card"
|
|
64
|
+
mask="creditCard"
|
|
65
|
+
name="creditCard"
|
|
66
|
+
onChange={handleOnChangeFormField}
|
|
67
|
+
value={formFields.creditCard}
|
|
68
|
+
{...props}
|
|
69
|
+
/>
|
|
70
|
+
<TextInput
|
|
71
|
+
label="CVV"
|
|
72
|
+
mask="cvv"
|
|
73
|
+
name="cvv"
|
|
74
|
+
onChange={handleOnChangeFormField}
|
|
75
|
+
value={formFields.cvv}
|
|
76
|
+
{...props}
|
|
77
|
+
/>
|
|
60
78
|
|
|
61
79
|
<br />
|
|
62
80
|
<br />
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<%= pb_rails("flex", props: { justify: "evenly" }) do %>
|
|
2
2
|
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
-
<%= pb_rails("timeline", props: {orientation: "vertical",
|
|
3
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
|
|
4
4
|
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
5
5
|
<%= pb_rails("body", props: {
|
|
6
6
|
text: "Conversation started",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<% end %>
|
|
24
24
|
|
|
25
25
|
<%= pb_rails("flex/flex_item") do %>
|
|
26
|
-
<%= pb_rails("timeline", props: {orientation: "vertical",
|
|
26
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
|
|
27
27
|
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
28
28
|
<%= pb_rails("body", props: {
|
|
29
29
|
text: "Conversation started",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<% end %>
|
|
47
47
|
|
|
48
48
|
<%= pb_rails("flex/flex_item") do %>
|
|
49
|
-
<%= pb_rails("timeline", props: {orientation: "vertical",
|
|
49
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
|
|
50
50
|
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
51
51
|
<%= pb_rails("body", props: {
|
|
52
52
|
text: "Conversation started",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
<% end %>
|
|
70
70
|
|
|
71
71
|
<%= pb_rails("flex/flex_item") do %>
|
|
72
|
-
<%= pb_rails("timeline", props: {orientation: "vertical",
|
|
72
|
+
<%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
|
|
73
73
|
<%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
|
|
74
74
|
<%= pb_rails("body", props: {
|
|
75
75
|
text: "Conversation started",
|
|
@@ -91,4 +91,3 @@
|
|
|
91
91
|
<% end %>
|
|
92
92
|
<% end %>
|
|
93
93
|
<% end %>
|
|
94
|
-
|
|
@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
|
|
|
10
10
|
<Flex justify="evenly">
|
|
11
11
|
<FlexItem>
|
|
12
12
|
<Timeline
|
|
13
|
-
|
|
13
|
+
itemGap="xs"
|
|
14
14
|
orientation="vertical"
|
|
15
15
|
>
|
|
16
16
|
<Timeline.Item
|
|
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
|
|
|
51
51
|
</FlexItem>
|
|
52
52
|
<FlexItem>
|
|
53
53
|
<Timeline
|
|
54
|
-
|
|
54
|
+
itemGap="sm"
|
|
55
55
|
orientation="vertical"
|
|
56
56
|
>
|
|
57
57
|
<Timeline.Item
|
|
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
|
|
|
92
92
|
</FlexItem>
|
|
93
93
|
<FlexItem>
|
|
94
94
|
<Timeline
|
|
95
|
-
|
|
95
|
+
itemGap="md"
|
|
96
96
|
orientation="vertical"
|
|
97
97
|
>
|
|
98
98
|
<Timeline.Item
|
|
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
|
|
|
134
134
|
</FlexItem>
|
|
135
135
|
<FlexItem>
|
|
136
136
|
<Timeline
|
|
137
|
-
|
|
137
|
+
itemGap="lg"
|
|
138
138
|
orientation="vertical"
|
|
139
139
|
>
|
|
140
140
|
<Timeline.Item
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use the optional `
|
|
1
|
+
Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
|