playbook_ui_docs 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.17.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_advanced_table/docs/_advanced_table_default.jsx +49 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +13 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- 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/dist/menu.yml +4 -1
- data/dist/pb_doc_helper.rb +6 -4
- data/dist/playbook-doc.js +29 -7
- metadata +14 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e311ae0df20be6996bc9516e35eb4425a9367aebe9dd10301afea0d753ddf196
|
|
4
|
+
data.tar.gz: 45afae3112336aec3a900fbaac726813191acead8ec763a347283ce2df6a0f79
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 17ecab35cae86ef6fcbbf498c4591e7e3570d35740b1a8f079d3bfba53d16e60fa0a9e69c4eaf84bd8bec8d016fd4cebee22b494d400097117c167fd4be662e8
|
|
7
|
+
data.tar.gz: 435abfe6b89e8b61013952409c76b0fd41bc90663ffb118292ca3943d326a3c9bd33bcab28cb95f2372ab5b484eafcef5e64f01a91374cba743aa30e0c4105d5
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdvancedTable } from "../../";
|
|
3
|
+
import { MOCK_DATA } from "./_mock_data";
|
|
4
|
+
|
|
5
|
+
const AdvancedTableDefault = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "newEnrollments",
|
|
14
|
+
label: "New Enrollments",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "scheduledMeetings",
|
|
18
|
+
label: "Scheduled Meetings",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "attendanceRate",
|
|
22
|
+
label: "Attendance Rate",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "completedClasses",
|
|
26
|
+
label: "Completed Classes",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "classCompletionRate",
|
|
30
|
+
label: "Class Completion Rate",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "graduatedStudents",
|
|
34
|
+
label: "Graduated Students",
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<div>
|
|
40
|
+
<AdvancedTable
|
|
41
|
+
columnDefinitions={columnDefinitions}
|
|
42
|
+
tableData={MOCK_DATA}
|
|
43
|
+
{...props}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default AdvancedTableDefault;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props:
|
|
2
|
+
|
|
3
|
+
`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/PBNTR-177-New-Advanced-Table-Kit/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
`columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
|
|
7
|
+
|
|
8
|
+
- `accessor`: this is the key from your data for the value you want rendered in that column
|
|
9
|
+
- `label`: this is what will be rendered as the column header label
|
|
10
|
+
|
|
11
|
+
There is also one optional item that is only required if the table has nested data:
|
|
12
|
+
|
|
13
|
+
- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AdvancedTable } from "../..";
|
|
3
|
+
import { MOCK_DATA } from "./_mock_data";
|
|
4
|
+
|
|
5
|
+
const AdvancedTableSort = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "newEnrollments",
|
|
14
|
+
label: "New Enrollments",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "scheduledMeetings",
|
|
18
|
+
label: "Scheduled Meetings",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "attendanceRate",
|
|
22
|
+
label: "Attendance Rate",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "completedClasses",
|
|
26
|
+
label: "Completed Classes",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "classCompletionRate",
|
|
30
|
+
label: "Class Completion Rate",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "graduatedStudents",
|
|
34
|
+
label: "Graduated Students",
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
//Render the subRow header rows
|
|
39
|
+
const subRowHeaders = ["Quarter", "Month", "Day"]
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<AdvancedTable
|
|
45
|
+
columnDefinitions={columnDefinitions}
|
|
46
|
+
enableToggleExpansion="all"
|
|
47
|
+
tableData={MOCK_DATA}
|
|
48
|
+
{...props}
|
|
49
|
+
>
|
|
50
|
+
<AdvancedTable.Header enableSorting />
|
|
51
|
+
<AdvancedTable.Body subRowHeaders={subRowHeaders} />
|
|
52
|
+
</AdvancedTable>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default AdvancedTableSort;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
|
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
export const MOCK_DATA = [
|
|
2
|
+
{
|
|
3
|
+
year: "2021",
|
|
4
|
+
quarter: null,
|
|
5
|
+
month: null,
|
|
6
|
+
day: null,
|
|
7
|
+
newEnrollments: "20",
|
|
8
|
+
scheduledMeetings: "10",
|
|
9
|
+
attendanceRate: "51%",
|
|
10
|
+
completedClasses: "3",
|
|
11
|
+
classCompletionRate: "33%",
|
|
12
|
+
graduatedStudents: "19",
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
year: "2021",
|
|
16
|
+
quarter: "Q1",
|
|
17
|
+
month: null,
|
|
18
|
+
day: null,
|
|
19
|
+
newEnrollments: "2",
|
|
20
|
+
scheduledMeetings: "35",
|
|
21
|
+
attendanceRate: "32%",
|
|
22
|
+
completedClasses: "15",
|
|
23
|
+
classCompletionRate: "52%",
|
|
24
|
+
graduatedStudents: "36",
|
|
25
|
+
children: [
|
|
26
|
+
{
|
|
27
|
+
year: "2021",
|
|
28
|
+
quarter: "Q1",
|
|
29
|
+
month: "January",
|
|
30
|
+
day: null,
|
|
31
|
+
newEnrollments: "16",
|
|
32
|
+
scheduledMeetings: "20",
|
|
33
|
+
attendanceRate: "11%",
|
|
34
|
+
completedClasses: "13",
|
|
35
|
+
classCompletionRate: "47%",
|
|
36
|
+
graduatedStudents: "28",
|
|
37
|
+
children: [
|
|
38
|
+
{
|
|
39
|
+
year: "2021",
|
|
40
|
+
quarter: "Q1",
|
|
41
|
+
month: "January",
|
|
42
|
+
day: "10",
|
|
43
|
+
newEnrollments: "34",
|
|
44
|
+
scheduledMeetings: "28",
|
|
45
|
+
attendanceRate: "97%",
|
|
46
|
+
completedClasses: "20",
|
|
47
|
+
classCompletionRate: "15%",
|
|
48
|
+
graduatedStudents: "17",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
year: "2021",
|
|
52
|
+
quarter: "Q1",
|
|
53
|
+
month: "January",
|
|
54
|
+
day: "20",
|
|
55
|
+
newEnrollments: "43",
|
|
56
|
+
scheduledMeetings: "23",
|
|
57
|
+
attendanceRate: "66%",
|
|
58
|
+
completedClasses: "26",
|
|
59
|
+
classCompletionRate: "47%",
|
|
60
|
+
graduatedStudents: "9",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
year: "2021",
|
|
66
|
+
quarter: "Q1",
|
|
67
|
+
month: "February",
|
|
68
|
+
day: null,
|
|
69
|
+
newEnrollments: "20",
|
|
70
|
+
scheduledMeetings: "41",
|
|
71
|
+
attendanceRate: "95%",
|
|
72
|
+
completedClasses: "26",
|
|
73
|
+
classCompletionRate: "83%",
|
|
74
|
+
graduatedStudents: "43",
|
|
75
|
+
children: [
|
|
76
|
+
{
|
|
77
|
+
year: "2011",
|
|
78
|
+
quarter: "Q1",
|
|
79
|
+
month: "February",
|
|
80
|
+
day: "15",
|
|
81
|
+
newEnrollments: "19",
|
|
82
|
+
scheduledMeetings: "35",
|
|
83
|
+
attendanceRate: "69%",
|
|
84
|
+
completedClasses: "8",
|
|
85
|
+
classCompletionRate: "75%",
|
|
86
|
+
graduatedStudents: "23",
|
|
87
|
+
},
|
|
88
|
+
],
|
|
89
|
+
},
|
|
90
|
+
],
|
|
91
|
+
},
|
|
92
|
+
],
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
year: "2022",
|
|
96
|
+
quarter: null,
|
|
97
|
+
month: null,
|
|
98
|
+
day: null,
|
|
99
|
+
newEnrollments: "25",
|
|
100
|
+
scheduledMeetings: "17",
|
|
101
|
+
attendanceRate: "75%",
|
|
102
|
+
completedClasses: "5",
|
|
103
|
+
classCompletionRate: "45%",
|
|
104
|
+
graduatedStudents: "32",
|
|
105
|
+
children: [
|
|
106
|
+
{
|
|
107
|
+
year: "2022",
|
|
108
|
+
quarter: "Q1",
|
|
109
|
+
month: null,
|
|
110
|
+
day: null,
|
|
111
|
+
newEnrollments: "2",
|
|
112
|
+
scheduledMeetings: "35",
|
|
113
|
+
attendanceRate: "32%",
|
|
114
|
+
completedClasses: "15",
|
|
115
|
+
classCompletionRate: "52%",
|
|
116
|
+
graduatedStudents: "36",
|
|
117
|
+
children: [
|
|
118
|
+
{
|
|
119
|
+
year: "2022",
|
|
120
|
+
quarter: "Q1",
|
|
121
|
+
month: "January",
|
|
122
|
+
day: null,
|
|
123
|
+
newEnrollments: "16",
|
|
124
|
+
scheduledMeetings: "20",
|
|
125
|
+
attendanceRate: "11%",
|
|
126
|
+
completedClasses: "13",
|
|
127
|
+
classCompletionRate: "47%",
|
|
128
|
+
graduatedStudents: "28",
|
|
129
|
+
children: [
|
|
130
|
+
{
|
|
131
|
+
year: "2022",
|
|
132
|
+
quarter: "Q1",
|
|
133
|
+
month: "January",
|
|
134
|
+
day: "15",
|
|
135
|
+
newEnrollments: "34",
|
|
136
|
+
scheduledMeetings: "28",
|
|
137
|
+
attendanceRate: "97%",
|
|
138
|
+
completedClasses: "20",
|
|
139
|
+
classCompletionRate: "15%",
|
|
140
|
+
graduatedStudents: "17",
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
year: "2022",
|
|
144
|
+
quarter: "Q1",
|
|
145
|
+
month: "January",
|
|
146
|
+
day: "25",
|
|
147
|
+
newEnrollments: "43",
|
|
148
|
+
scheduledMeetings: "23",
|
|
149
|
+
attendanceRate: "66%",
|
|
150
|
+
completedClasses: "26",
|
|
151
|
+
classCompletionRate: "47%",
|
|
152
|
+
graduatedStudents: "9",
|
|
153
|
+
},
|
|
154
|
+
],
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
year: "2022",
|
|
158
|
+
quarter: "Q1",
|
|
159
|
+
month: "May",
|
|
160
|
+
day: null,
|
|
161
|
+
newEnrollments: "20",
|
|
162
|
+
scheduledMeetings: "41",
|
|
163
|
+
attendanceRate: "95%",
|
|
164
|
+
completedClasses: "26",
|
|
165
|
+
classCompletionRate: "83%",
|
|
166
|
+
graduatedStudents: "43",
|
|
167
|
+
children: [
|
|
168
|
+
{
|
|
169
|
+
year: "2011",
|
|
170
|
+
quarter: "Q1",
|
|
171
|
+
month: "May",
|
|
172
|
+
day: "2",
|
|
173
|
+
newEnrollments: "19",
|
|
174
|
+
scheduledMeetings: "35",
|
|
175
|
+
attendanceRate: "69%",
|
|
176
|
+
completedClasses: "8",
|
|
177
|
+
classCompletionRate: "75%",
|
|
178
|
+
graduatedStudents: "23",
|
|
179
|
+
},
|
|
180
|
+
],
|
|
181
|
+
},
|
|
182
|
+
],
|
|
183
|
+
},
|
|
184
|
+
],
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
year: "2023",
|
|
188
|
+
quarter: null,
|
|
189
|
+
month: null,
|
|
190
|
+
day: null,
|
|
191
|
+
newEnrollments: "10",
|
|
192
|
+
scheduledMeetings: "15",
|
|
193
|
+
attendanceRate: "65%",
|
|
194
|
+
completedClasses: "4",
|
|
195
|
+
classCompletionRate: "49%",
|
|
196
|
+
graduatedStudents: "29",
|
|
197
|
+
children: [
|
|
198
|
+
{
|
|
199
|
+
year: "2023",
|
|
200
|
+
quarter: "Q1",
|
|
201
|
+
month: null,
|
|
202
|
+
day: null,
|
|
203
|
+
newEnrollments: "2",
|
|
204
|
+
scheduledMeetings: "35",
|
|
205
|
+
attendanceRate: "32%",
|
|
206
|
+
completedClasses: "15",
|
|
207
|
+
classCompletionRate: "52%",
|
|
208
|
+
graduatedStudents: "36",
|
|
209
|
+
children: [
|
|
210
|
+
{
|
|
211
|
+
year: "2023",
|
|
212
|
+
quarter: "Q1",
|
|
213
|
+
month: "March",
|
|
214
|
+
day: null,
|
|
215
|
+
newEnrollments: "16",
|
|
216
|
+
scheduledMeetings: "20",
|
|
217
|
+
attendanceRate: "11%",
|
|
218
|
+
completedClasses: "13",
|
|
219
|
+
classCompletionRate: "47%",
|
|
220
|
+
graduatedStudents: "28",
|
|
221
|
+
children: [
|
|
222
|
+
{
|
|
223
|
+
year: "2023",
|
|
224
|
+
quarter: "Q1",
|
|
225
|
+
month: "March",
|
|
226
|
+
day: "10",
|
|
227
|
+
newEnrollments: "34",
|
|
228
|
+
scheduledMeetings: "28",
|
|
229
|
+
attendanceRate: "97%",
|
|
230
|
+
completedClasses: "20",
|
|
231
|
+
classCompletionRate: "15%",
|
|
232
|
+
graduatedStudents: "17",
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
year: "2023",
|
|
236
|
+
quarter: "Q1",
|
|
237
|
+
month: "March",
|
|
238
|
+
day: "11",
|
|
239
|
+
newEnrollments: "43",
|
|
240
|
+
scheduledMeetings: "23",
|
|
241
|
+
attendanceRate: "66%",
|
|
242
|
+
completedClasses: "26",
|
|
243
|
+
classCompletionRate: "47%",
|
|
244
|
+
graduatedStudents: "9",
|
|
245
|
+
},
|
|
246
|
+
],
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
year: "2023",
|
|
250
|
+
quarter: "Q1",
|
|
251
|
+
month: "April",
|
|
252
|
+
day: null,
|
|
253
|
+
newEnrollments: "20",
|
|
254
|
+
scheduledMeetings: "41",
|
|
255
|
+
attendanceRate: "95%",
|
|
256
|
+
completedClasses: "26",
|
|
257
|
+
classCompletionRate: "83%",
|
|
258
|
+
graduatedStudents: "43",
|
|
259
|
+
children: [
|
|
260
|
+
{
|
|
261
|
+
year: "2023",
|
|
262
|
+
quarter: "Q1",
|
|
263
|
+
month: "April",
|
|
264
|
+
day: "15",
|
|
265
|
+
newEnrollments: "19",
|
|
266
|
+
scheduledMeetings: "35",
|
|
267
|
+
attendanceRate: "69%",
|
|
268
|
+
completedClasses: "8",
|
|
269
|
+
classCompletionRate: "75%",
|
|
270
|
+
graduatedStudents: "23",
|
|
271
|
+
},
|
|
272
|
+
],
|
|
273
|
+
},
|
|
274
|
+
],
|
|
275
|
+
},
|
|
276
|
+
],
|
|
277
|
+
},
|
|
278
|
+
];
|
|
@@ -2,9 +2,15 @@
|
|
|
2
2
|
<div class="icon-wrapper">
|
|
3
3
|
|
|
4
4
|
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
|
5
|
-
<p><%= pb_rails("icon", props: {
|
|
6
|
-
<p><%= pb_rails("icon", props: { rotation: 90,
|
|
7
|
-
<p><%= pb_rails("icon", props: { spin: true,
|
|
8
|
-
<p><%= pb_rails("icon", props: { size: "5x",
|
|
9
|
-
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x",
|
|
5
|
+
<p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
|
|
6
|
+
<p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
|
|
7
|
+
<p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
|
|
8
|
+
<p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
|
|
9
|
+
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("body", props: {
|
|
12
|
+
text: "Custom icons are compatible with other icon props (size, rotation,
|
|
13
|
+
spin, flip, etc). Their SVG fill colors will be inherited from
|
|
14
|
+
parent element's css color properties."
|
|
15
|
+
} ) %>
|
|
10
16
|
</div>
|
|
@@ -1,59 +1,33 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { Icon } from '../../'
|
|
3
3
|
|
|
4
|
+
// import Icons as config from 'power-icons'
|
|
4
5
|
const config = {
|
|
5
|
-
|
|
6
|
-
<svg
|
|
6
|
+
moon: (
|
|
7
|
+
<svg
|
|
8
|
+
ariaHidden="true"
|
|
9
|
+
focusable="false"
|
|
10
|
+
role="img"
|
|
11
|
+
viewBox="0 0 512 512"
|
|
7
12
|
xmlns="http://www.w3.org/2000/svg"
|
|
8
13
|
>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
14
|
+
<path
|
|
15
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
|
16
|
+
fill="currentColor"
|
|
17
|
+
/>
|
|
12
18
|
</svg>
|
|
13
19
|
),
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
const IconCustom = (props) => {
|
|
17
23
|
return (
|
|
18
|
-
<
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<p>
|
|
26
|
-
<Icon
|
|
27
|
-
icon={config.icon}
|
|
28
|
-
rotation={90}
|
|
29
|
-
size="2x"
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
</p>
|
|
33
|
-
<p>
|
|
34
|
-
<Icon
|
|
35
|
-
icon={config.icon}
|
|
36
|
-
size="3x"
|
|
37
|
-
spin
|
|
38
|
-
{...props}
|
|
39
|
-
/>
|
|
40
|
-
</p>
|
|
41
|
-
<p>
|
|
42
|
-
<Icon
|
|
43
|
-
icon={config.icon}
|
|
44
|
-
size="5x"
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
</p>
|
|
48
|
-
<p>
|
|
49
|
-
<Icon
|
|
50
|
-
flip="horizontal"
|
|
51
|
-
icon={config.icon}
|
|
52
|
-
size="5x"
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
</p>
|
|
56
|
-
</React.Fragment>
|
|
24
|
+
<div>
|
|
25
|
+
<Icon
|
|
26
|
+
customIcon={config.moon}
|
|
27
|
+
size="7x"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</div>
|
|
57
31
|
)
|
|
58
32
|
}
|
|
59
33
|
|
|
@@ -4,21 +4,16 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
|
|
|
4
4
|
|
|
5
5
|
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
|
6
6
|
|
|
7
|
-
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with
|
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
|
8
8
|
|
|
9
|
-
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point
|
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
|
10
10
|
|
|
11
|
-
You must source
|
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
|
12
12
|
|
|
13
13
|
### React
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
- Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
|
|
17
|
-
|
|
18
|
-
```html
|
|
19
|
-
<img src="host.com/my/path/to/icon.svg" />
|
|
20
|
-
```
|
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
|
21
16
|
|
|
22
17
|
### Rails
|
|
23
18
|
|
|
24
|
-
|
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
data/dist/menu.yml
CHANGED
|
@@ -43,6 +43,9 @@ kits:
|
|
|
43
43
|
- name: "table"
|
|
44
44
|
platforms: *web
|
|
45
45
|
description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
|
|
46
|
+
- name: "advanced_table"
|
|
47
|
+
platforms: *react_only
|
|
48
|
+
description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
|
|
46
49
|
- name: "list"
|
|
47
50
|
platforms: *web
|
|
48
51
|
description: Lists display a vertical set of related content.
|
|
@@ -354,4 +357,4 @@ kits:
|
|
|
354
357
|
description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
|
|
355
358
|
- name: "user"
|
|
356
359
|
platforms: *web
|
|
357
|
-
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
|
360
|
+
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
data/dist/pb_doc_helper.rb
CHANGED
|
@@ -57,10 +57,12 @@ module PlaybookWebsite
|
|
|
57
57
|
|
|
58
58
|
# rubocop:disable Style/OptionalBooleanParameter
|
|
59
59
|
def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
if kit != "advanced_table"
|
|
61
|
+
title = pb_doc_render_clickable_title(kit, type)
|
|
62
|
+
ui = raw("<div class='pb--docItem-ui'>
|
|
63
|
+
#{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
|
|
64
|
+
title + ui
|
|
65
|
+
end
|
|
64
66
|
end
|
|
65
67
|
# rubocop:enable Style/OptionalBooleanParameter
|
|
66
68
|
|