jvetrau-ds 0.2.37 → 0.2.39
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.
- package/components/course-outline/course-outline.css +25 -0
- package/components/table/table.cjs +25 -6
- package/components/table/table.cjs.map +1 -1
- package/components/table/table.css +69 -5
- package/components/table/table.js +25 -6
- package/components/table/table.js.map +1 -1
- package/package.json +1 -1
- package/styles.css +94 -5
|
@@ -98,6 +98,31 @@
|
|
|
98
98
|
/* motion */
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
.layout-sidebar__side
|
|
102
|
+
.course-outline__action {
|
|
103
|
+
/* color */
|
|
104
|
+
|
|
105
|
+
/* typography */
|
|
106
|
+
font-family:
|
|
107
|
+
var(--course-outline-note-font-family);
|
|
108
|
+
font-size:
|
|
109
|
+
var(--course-outline-note-font-size);
|
|
110
|
+
font-weight:
|
|
111
|
+
var(--course-outline-note-font-weight);
|
|
112
|
+
line-height:
|
|
113
|
+
var(--course-outline-note-line-height);
|
|
114
|
+
letter-spacing:
|
|
115
|
+
var(--course-outline-note-letter-spacing);
|
|
116
|
+
|
|
117
|
+
/* size */
|
|
118
|
+
|
|
119
|
+
/* border */
|
|
120
|
+
|
|
121
|
+
/* depth */
|
|
122
|
+
|
|
123
|
+
/* motion */
|
|
124
|
+
}
|
|
125
|
+
|
|
101
126
|
.course-outline__groups {
|
|
102
127
|
/* color */
|
|
103
128
|
|
|
@@ -71,24 +71,43 @@ const TableRow = ({
|
|
|
71
71
|
const TableCell = ({
|
|
72
72
|
status,
|
|
73
73
|
className = "",
|
|
74
|
+
children,
|
|
74
75
|
...props
|
|
75
76
|
}) => {
|
|
76
77
|
const classes = classnames.classnames(
|
|
77
78
|
"table__cell",
|
|
78
79
|
className,
|
|
79
80
|
{
|
|
80
|
-
"table__cell--
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
"table__cell--status": status !== void 0
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
if (!status) {
|
|
85
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
"td",
|
|
87
|
+
{
|
|
88
|
+
className: classes,
|
|
89
|
+
...props,
|
|
90
|
+
children
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
const statusClasses = classnames.classnames(
|
|
95
|
+
"table__cell-status",
|
|
96
|
+
"",
|
|
97
|
+
{
|
|
98
|
+
"table__cell-status--good": status === "good",
|
|
99
|
+
"table__cell-status--semi-good": status === "semi-good",
|
|
100
|
+
"table__cell-status--med": status === "med",
|
|
101
|
+
"table__cell-status--semi-bad": status === "semi-bad",
|
|
102
|
+
"table__cell-status--bad": status === "bad"
|
|
85
103
|
}
|
|
86
104
|
);
|
|
87
105
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
88
106
|
"td",
|
|
89
107
|
{
|
|
90
108
|
className: classes,
|
|
91
|
-
...props
|
|
109
|
+
...props,
|
|
110
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: statusClasses, children })
|
|
92
111
|
}
|
|
93
112
|
);
|
|
94
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":";;;;;;AAqDA,MAAM,mBAAmB,CACvB,OAAA,KAEA,QAAQ,MAAA,CAAO,CAAC,OAAO,MAAA,KAAW;AAChC,EAAA,IACE,OAAO,KAAA,EAAO,IAAA,KAAS,cACvB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EACtB;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA,GAAQ,OAAO,KAAA,CAAM,KAAA;AAC9B,CAAA,EAAG,CAAC,CAAA;AAEN,MAAM,qBAAA,GAAwB,CAC5B,KAAA,EACA,KAAA,KAEA,MAAA;AAAA,EAAA,CACI,KAAA,GAAQ,KAAA,GAAS,GAAA,EAAK,OAAA,CAAQ,CAAC;AACnC,CAAA;AAEF,MAAM,cAAA,GAAiB,CACrB,KAAA,EACA,aAAA,KACiC;AACjC,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ;AACnC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,OAAA,EAAS;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA;AAAA,EACf;AAEA,EAAA,IACE,KAAA,CAAM,KAAA,IAAS,CAAA,IACf,aAAA,IAAiB,CAAA,EACjB;AACA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,CAAA,EAAG,qBAAA;AAAA,IACR,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,WAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"table.cjs","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n | {\n type: 'auto';\n }\n | {\n type: 'max';\n }\n | {\n type: 'fraction';\n value: number;\n }\n | {\n type: 'min';\n }\n | {\n type: 'fixed';\n value: string;\n };\n\nexport type TableCellStatus =\n | 'good'\n | 'semi-good'\n | 'med'\n | 'semi-bad'\n | 'bad';\n\nexport interface TableColumn {\n id: React.Key;\n header: React.ReactNode;\n width?: TableColumnWidth;\n}\n\nexport interface TableProps\n extends React.TableHTMLAttributes<HTMLTableElement> {\n columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n extends React.TdHTMLAttributes<HTMLTableCellElement> {\n status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n columns: TableColumn[],\n) =>\n columns.reduce((total, column) => {\n if (\n column.width?.type !== 'fraction' ||\n column.width.value <= 0\n ) {\n return total;\n }\n\n return total + column.width.value;\n }, 0);\n\nconst getFractionPercentage = (\n value: number,\n total: number,\n) =>\n Number(\n ((value / total) * 100).toFixed(6),\n );\n\nconst getColumnWidth = (\n width: TableColumnWidth | undefined,\n fractionTotal: number,\n): React.CSSProperties['width'] => {\n if (!width || width.type === 'auto') {\n return undefined;\n }\n\n if (width.type === 'min') {\n return '1%';\n }\n\n if (width.type === 'max') {\n return '100%';\n }\n\n if (width.type === 'fixed') {\n return width.value;\n }\n\n if (\n width.value <= 0 ||\n fractionTotal <= 0\n ) {\n return undefined;\n }\n\n return `${getFractionPercentage(\n width.value,\n fractionTotal,\n )}%`;\n};\n\nconst TableBody: React.FC<\n TableBodyProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__body',\n className,\n {},\n );\n\n return (\n <tbody\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableRow: React.FC<\n TableRowProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__row',\n className,\n {},\n );\n\n return (\n <tr\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableCell: React.FC<\n TableCellProps\n> = ({\n status,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table__cell',\n className,\n {\n 'table__cell--status':\n status !== undefined,\n },\n );\n\n if (!status) {\n return (\n <td\n className={classes}\n {...props}\n >\n {children}\n </td>\n );\n }\n\n const statusClasses = classnames(\n 'table__cell-status',\n '',\n {\n 'table__cell-status--good':\n status === 'good',\n 'table__cell-status--semi-good':\n status === 'semi-good',\n 'table__cell-status--med':\n status === 'med',\n 'table__cell-status--semi-bad':\n status === 'semi-bad',\n 'table__cell-status--bad':\n status === 'bad',\n },\n );\n\n return (\n <td\n className={classes}\n {...props}\n >\n <span className={statusClasses}>\n {children}\n </span>\n </td>\n );\n};\n\ninterface TableComponent\n extends React.FC<TableProps> {\n Body: typeof TableBody;\n Row: typeof TableRow;\n Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table',\n className,\n {},\n );\n\n const fractionTotal =\n getFractionTotal(columns);\n\n return (\n <table\n className={classes}\n {...props}\n >\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{\n width: getColumnWidth(\n column.width,\n fractionTotal,\n ),\n }}\n />\n ))}\n </colgroup>\n\n <thead className=\"table__head\">\n <tr className=\"table__row\">\n {columns.map((column) => (\n <th\n key={column.id}\n className=\"table__header\"\n scope=\"col\"\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n\n {children}\n </table>\n );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
|
|
@@ -149,7 +149,71 @@
|
|
|
149
149
|
/* motion */
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
-
.table__cell--
|
|
152
|
+
.table__cell--status {
|
|
153
|
+
/* color */
|
|
154
|
+
|
|
155
|
+
/* typography */
|
|
156
|
+
|
|
157
|
+
/* size */
|
|
158
|
+
padding: 0;
|
|
159
|
+
|
|
160
|
+
/* border */
|
|
161
|
+
|
|
162
|
+
/* depth */
|
|
163
|
+
|
|
164
|
+
/* motion */
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.table__cell--status:first-child {
|
|
168
|
+
/* color */
|
|
169
|
+
|
|
170
|
+
/* typography */
|
|
171
|
+
|
|
172
|
+
/* size */
|
|
173
|
+
padding-left: var(--padding-table-horz);
|
|
174
|
+
|
|
175
|
+
/* border */
|
|
176
|
+
|
|
177
|
+
/* depth */
|
|
178
|
+
|
|
179
|
+
/* motion */
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.table__cell--status:last-child {
|
|
183
|
+
/* color */
|
|
184
|
+
|
|
185
|
+
/* typography */
|
|
186
|
+
|
|
187
|
+
/* size */
|
|
188
|
+
padding-right: var(--padding-table-horz);
|
|
189
|
+
|
|
190
|
+
/* border */
|
|
191
|
+
|
|
192
|
+
/* depth */
|
|
193
|
+
|
|
194
|
+
/* motion */
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.table__cell-status {
|
|
198
|
+
/* color */
|
|
199
|
+
|
|
200
|
+
/* typography */
|
|
201
|
+
|
|
202
|
+
/* size */
|
|
203
|
+
display: block;
|
|
204
|
+
padding-block: var(--table-row-gap);
|
|
205
|
+
padding-inline: calc(
|
|
206
|
+
var(--table-column-gap) / 2
|
|
207
|
+
);
|
|
208
|
+
|
|
209
|
+
/* border */
|
|
210
|
+
|
|
211
|
+
/* depth */
|
|
212
|
+
|
|
213
|
+
/* motion */
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.table__cell-status--good {
|
|
153
217
|
/* color */
|
|
154
218
|
background-color: var(--color-good);
|
|
155
219
|
color: var(--color-text-primary-1);
|
|
@@ -165,7 +229,7 @@
|
|
|
165
229
|
/* motion */
|
|
166
230
|
}
|
|
167
231
|
|
|
168
|
-
.table__cell--semi-good {
|
|
232
|
+
.table__cell-status--semi-good {
|
|
169
233
|
/* color */
|
|
170
234
|
background-color: var(--color-semi-good);
|
|
171
235
|
color: var(--color-text-primary-1);
|
|
@@ -181,7 +245,7 @@
|
|
|
181
245
|
/* motion */
|
|
182
246
|
}
|
|
183
247
|
|
|
184
|
-
.table__cell--med {
|
|
248
|
+
.table__cell-status--med {
|
|
185
249
|
/* color */
|
|
186
250
|
background-color: var(--color-med);
|
|
187
251
|
|
|
@@ -196,7 +260,7 @@
|
|
|
196
260
|
/* motion */
|
|
197
261
|
}
|
|
198
262
|
|
|
199
|
-
.table__cell--semi-bad {
|
|
263
|
+
.table__cell-status--semi-bad {
|
|
200
264
|
/* color */
|
|
201
265
|
background-color: var(--color-semi-bad);
|
|
202
266
|
|
|
@@ -211,7 +275,7 @@
|
|
|
211
275
|
/* motion */
|
|
212
276
|
}
|
|
213
277
|
|
|
214
|
-
.table__cell--bad {
|
|
278
|
+
.table__cell-status--bad {
|
|
215
279
|
/* color */
|
|
216
280
|
background-color: var(--color-bad);
|
|
217
281
|
|
|
@@ -69,24 +69,43 @@ const TableRow = ({
|
|
|
69
69
|
const TableCell = ({
|
|
70
70
|
status,
|
|
71
71
|
className = "",
|
|
72
|
+
children,
|
|
72
73
|
...props
|
|
73
74
|
}) => {
|
|
74
75
|
const classes = classnames(
|
|
75
76
|
"table__cell",
|
|
76
77
|
className,
|
|
77
78
|
{
|
|
78
|
-
"table__cell--
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
"table__cell--status": status !== void 0
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
if (!status) {
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
"td",
|
|
85
|
+
{
|
|
86
|
+
className: classes,
|
|
87
|
+
...props,
|
|
88
|
+
children
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
const statusClasses = classnames(
|
|
93
|
+
"table__cell-status",
|
|
94
|
+
"",
|
|
95
|
+
{
|
|
96
|
+
"table__cell-status--good": status === "good",
|
|
97
|
+
"table__cell-status--semi-good": status === "semi-good",
|
|
98
|
+
"table__cell-status--med": status === "med",
|
|
99
|
+
"table__cell-status--semi-bad": status === "semi-bad",
|
|
100
|
+
"table__cell-status--bad": status === "bad"
|
|
83
101
|
}
|
|
84
102
|
);
|
|
85
103
|
return /* @__PURE__ */ jsx(
|
|
86
104
|
"td",
|
|
87
105
|
{
|
|
88
106
|
className: classes,
|
|
89
|
-
...props
|
|
107
|
+
...props,
|
|
108
|
+
children: /* @__PURE__ */ jsx("span", { className: statusClasses, children })
|
|
90
109
|
}
|
|
91
110
|
);
|
|
92
111
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";;;;AAqDA,MAAM,mBAAmB,CACvB,OAAA,KAEA,QAAQ,MAAA,CAAO,CAAC,OAAO,MAAA,KAAW;AAChC,EAAA,IACE,OAAO,KAAA,EAAO,IAAA,KAAS,cACvB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EACtB;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA,GAAQ,OAAO,KAAA,CAAM,KAAA;AAC9B,CAAA,EAAG,CAAC,CAAA;AAEN,MAAM,qBAAA,GAAwB,CAC5B,KAAA,EACA,KAAA,KAEA,MAAA;AAAA,EAAA,CACI,KAAA,GAAQ,KAAA,GAAS,GAAA,EAAK,OAAA,CAAQ,CAAC;AACnC,CAAA;AAEF,MAAM,cAAA,GAAiB,CACrB,KAAA,EACA,aAAA,KACiC;AACjC,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ;AACnC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,OAAA,EAAS;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA;AAAA,EACf;AAEA,EAAA,IACE,KAAA,CAAM,KAAA,IAAS,CAAA,IACf,aAAA,IAAiB,CAAA,EACjB;AACA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,CAAA,EAAG,qBAAA;AAAA,IACR,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,WAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":";;;;AAqDA,MAAM,mBAAmB,CACvB,OAAA,KAEA,QAAQ,MAAA,CAAO,CAAC,OAAO,MAAA,KAAW;AAChC,EAAA,IACE,OAAO,KAAA,EAAO,IAAA,KAAS,cACvB,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,EACtB;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA,GAAQ,OAAO,KAAA,CAAM,KAAA;AAC9B,CAAA,EAAG,CAAC,CAAA;AAEN,MAAM,qBAAA,GAAwB,CAC5B,KAAA,EACA,KAAA,KAEA,MAAA;AAAA,EAAA,CACI,KAAA,GAAQ,KAAA,GAAS,GAAA,EAAK,OAAA,CAAQ,CAAC;AACnC,CAAA;AAEF,MAAM,cAAA,GAAiB,CACrB,KAAA,EACA,aAAA,KACiC;AACjC,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,MAAA,EAAQ;AACnC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,KAAA,EAAO;AACxB,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,SAAS,OAAA,EAAS;AAC1B,IAAA,OAAO,KAAA,CAAM,KAAA;AAAA,EACf;AAEA,EAAA,IACE,KAAA,CAAM,KAAA,IAAS,CAAA,IACf,aAAA,IAAiB,CAAA,EACjB;AACA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,CAAA,EAAG,qBAAA;AAAA,IACR,KAAA,CAAM,KAAA;AAAA,IACN;AAAA,GACD,CAAA,CAAA,CAAA;AACH,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,WAEF,CAAC;AAAA,EACH,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,MAAM,YAEF,CAAC;AAAA,EACH,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM,aAAA,GAAgB,UAAA;AAAA,IACpB,oBAAA;AAAA,IACA,EAAA;AAAA,IACA;AAAA,MACE,4BACE,MAAA,KAAW,MAAA;AAAA,MACb,iCACE,MAAA,KAAW,WAAA;AAAA,MACb,2BACE,MAAA,KAAW,KAAA;AAAA,MACb,gCACE,MAAA,KAAW,UAAA;AAAA,MACb,2BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,aAAA,EACd,QAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AASA,MAAM,QAAwB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAA,GACJ,iBAAiB,OAAO,CAAA;AAE1B,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,cAAA;AAAA,gBACL,MAAA,CAAO,KAAA;AAAA,gBACP;AAAA;AACF;AACF,WAAA;AAAA,UANK,MAAA,CAAO;AAAA,SAQf,CAAA,EACH,CAAA;AAAA,wBAEA,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,aAAA,EACf,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,YAAA,EACX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,eAAA;AAAA,YACV,KAAA,EAAM,KAAA;AAAA,YAEL,QAAA,EAAA,MAAA,CAAO;AAAA,WAAA;AAAA,UAJH,MAAA,CAAO;AAAA,SAMf,GACH,CAAA,EACF,CAAA;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,KAAA,CAAM,IAAA,GAAO,SAAA;AACb,KAAA,CAAM,GAAA,GAAM,QAAA;AACZ,KAAA,CAAM,IAAA,GAAO,SAAA;AAEb,IAAO,aAAA,GAAQ","file":"table.js","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n | {\n type: 'auto';\n }\n | {\n type: 'max';\n }\n | {\n type: 'fraction';\n value: number;\n }\n | {\n type: 'min';\n }\n | {\n type: 'fixed';\n value: string;\n };\n\nexport type TableCellStatus =\n | 'good'\n | 'semi-good'\n | 'med'\n | 'semi-bad'\n | 'bad';\n\nexport interface TableColumn {\n id: React.Key;\n header: React.ReactNode;\n width?: TableColumnWidth;\n}\n\nexport interface TableProps\n extends React.TableHTMLAttributes<HTMLTableElement> {\n columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n extends React.TdHTMLAttributes<HTMLTableCellElement> {\n status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n columns: TableColumn[],\n) =>\n columns.reduce((total, column) => {\n if (\n column.width?.type !== 'fraction' ||\n column.width.value <= 0\n ) {\n return total;\n }\n\n return total + column.width.value;\n }, 0);\n\nconst getFractionPercentage = (\n value: number,\n total: number,\n) =>\n Number(\n ((value / total) * 100).toFixed(6),\n );\n\nconst getColumnWidth = (\n width: TableColumnWidth | undefined,\n fractionTotal: number,\n): React.CSSProperties['width'] => {\n if (!width || width.type === 'auto') {\n return undefined;\n }\n\n if (width.type === 'min') {\n return '1%';\n }\n\n if (width.type === 'max') {\n return '100%';\n }\n\n if (width.type === 'fixed') {\n return width.value;\n }\n\n if (\n width.value <= 0 ||\n fractionTotal <= 0\n ) {\n return undefined;\n }\n\n return `${getFractionPercentage(\n width.value,\n fractionTotal,\n )}%`;\n};\n\nconst TableBody: React.FC<\n TableBodyProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__body',\n className,\n {},\n );\n\n return (\n <tbody\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableRow: React.FC<\n TableRowProps\n> = ({\n className = '',\n ...props\n}) => {\n const classes = classnames(\n 'table__row',\n className,\n {},\n );\n\n return (\n <tr\n className={classes}\n {...props}\n />\n );\n};\n\nconst TableCell: React.FC<\n TableCellProps\n> = ({\n status,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table__cell',\n className,\n {\n 'table__cell--status':\n status !== undefined,\n },\n );\n\n if (!status) {\n return (\n <td\n className={classes}\n {...props}\n >\n {children}\n </td>\n );\n }\n\n const statusClasses = classnames(\n 'table__cell-status',\n '',\n {\n 'table__cell-status--good':\n status === 'good',\n 'table__cell-status--semi-good':\n status === 'semi-good',\n 'table__cell-status--med':\n status === 'med',\n 'table__cell-status--semi-bad':\n status === 'semi-bad',\n 'table__cell-status--bad':\n status === 'bad',\n },\n );\n\n return (\n <td\n className={classes}\n {...props}\n >\n <span className={statusClasses}>\n {children}\n </span>\n </td>\n );\n};\n\ninterface TableComponent\n extends React.FC<TableProps> {\n Body: typeof TableBody;\n Row: typeof TableRow;\n Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames(\n 'table',\n className,\n {},\n );\n\n const fractionTotal =\n getFractionTotal(columns);\n\n return (\n <table\n className={classes}\n {...props}\n >\n <colgroup>\n {columns.map((column) => (\n <col\n key={column.id}\n style={{\n width: getColumnWidth(\n column.width,\n fractionTotal,\n ),\n }}\n />\n ))}\n </colgroup>\n\n <thead className=\"table__head\">\n <tr className=\"table__row\">\n {columns.map((column) => (\n <th\n key={column.id}\n className=\"table__header\"\n scope=\"col\"\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n\n {children}\n </table>\n );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1726,6 +1726,31 @@
|
|
|
1726
1726
|
/* motion */
|
|
1727
1727
|
}
|
|
1728
1728
|
|
|
1729
|
+
.layout-sidebar__side
|
|
1730
|
+
.course-outline__action {
|
|
1731
|
+
/* color */
|
|
1732
|
+
|
|
1733
|
+
/* typography */
|
|
1734
|
+
font-family:
|
|
1735
|
+
var(--course-outline-note-font-family);
|
|
1736
|
+
font-size:
|
|
1737
|
+
var(--course-outline-note-font-size);
|
|
1738
|
+
font-weight:
|
|
1739
|
+
var(--course-outline-note-font-weight);
|
|
1740
|
+
line-height:
|
|
1741
|
+
var(--course-outline-note-line-height);
|
|
1742
|
+
letter-spacing:
|
|
1743
|
+
var(--course-outline-note-letter-spacing);
|
|
1744
|
+
|
|
1745
|
+
/* size */
|
|
1746
|
+
|
|
1747
|
+
/* border */
|
|
1748
|
+
|
|
1749
|
+
/* depth */
|
|
1750
|
+
|
|
1751
|
+
/* motion */
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1729
1754
|
.course-outline__groups {
|
|
1730
1755
|
/* color */
|
|
1731
1756
|
|
|
@@ -5194,7 +5219,71 @@ h4.course-outline__group-title {
|
|
|
5194
5219
|
/* motion */
|
|
5195
5220
|
}
|
|
5196
5221
|
|
|
5197
|
-
.table__cell--
|
|
5222
|
+
.table__cell--status {
|
|
5223
|
+
/* color */
|
|
5224
|
+
|
|
5225
|
+
/* typography */
|
|
5226
|
+
|
|
5227
|
+
/* size */
|
|
5228
|
+
padding: 0;
|
|
5229
|
+
|
|
5230
|
+
/* border */
|
|
5231
|
+
|
|
5232
|
+
/* depth */
|
|
5233
|
+
|
|
5234
|
+
/* motion */
|
|
5235
|
+
}
|
|
5236
|
+
|
|
5237
|
+
.table__cell--status:first-child {
|
|
5238
|
+
/* color */
|
|
5239
|
+
|
|
5240
|
+
/* typography */
|
|
5241
|
+
|
|
5242
|
+
/* size */
|
|
5243
|
+
padding-left: var(--padding-table-horz);
|
|
5244
|
+
|
|
5245
|
+
/* border */
|
|
5246
|
+
|
|
5247
|
+
/* depth */
|
|
5248
|
+
|
|
5249
|
+
/* motion */
|
|
5250
|
+
}
|
|
5251
|
+
|
|
5252
|
+
.table__cell--status:last-child {
|
|
5253
|
+
/* color */
|
|
5254
|
+
|
|
5255
|
+
/* typography */
|
|
5256
|
+
|
|
5257
|
+
/* size */
|
|
5258
|
+
padding-right: var(--padding-table-horz);
|
|
5259
|
+
|
|
5260
|
+
/* border */
|
|
5261
|
+
|
|
5262
|
+
/* depth */
|
|
5263
|
+
|
|
5264
|
+
/* motion */
|
|
5265
|
+
}
|
|
5266
|
+
|
|
5267
|
+
.table__cell-status {
|
|
5268
|
+
/* color */
|
|
5269
|
+
|
|
5270
|
+
/* typography */
|
|
5271
|
+
|
|
5272
|
+
/* size */
|
|
5273
|
+
display: block;
|
|
5274
|
+
padding-block: var(--table-row-gap);
|
|
5275
|
+
padding-inline: calc(
|
|
5276
|
+
var(--table-column-gap) / 2
|
|
5277
|
+
);
|
|
5278
|
+
|
|
5279
|
+
/* border */
|
|
5280
|
+
|
|
5281
|
+
/* depth */
|
|
5282
|
+
|
|
5283
|
+
/* motion */
|
|
5284
|
+
}
|
|
5285
|
+
|
|
5286
|
+
.table__cell-status--good {
|
|
5198
5287
|
/* color */
|
|
5199
5288
|
background-color: var(--color-good);
|
|
5200
5289
|
color: var(--color-text-primary-1);
|
|
@@ -5210,7 +5299,7 @@ h4.course-outline__group-title {
|
|
|
5210
5299
|
/* motion */
|
|
5211
5300
|
}
|
|
5212
5301
|
|
|
5213
|
-
.table__cell--semi-good {
|
|
5302
|
+
.table__cell-status--semi-good {
|
|
5214
5303
|
/* color */
|
|
5215
5304
|
background-color: var(--color-semi-good);
|
|
5216
5305
|
color: var(--color-text-primary-1);
|
|
@@ -5226,7 +5315,7 @@ h4.course-outline__group-title {
|
|
|
5226
5315
|
/* motion */
|
|
5227
5316
|
}
|
|
5228
5317
|
|
|
5229
|
-
.table__cell--med {
|
|
5318
|
+
.table__cell-status--med {
|
|
5230
5319
|
/* color */
|
|
5231
5320
|
background-color: var(--color-med);
|
|
5232
5321
|
|
|
@@ -5241,7 +5330,7 @@ h4.course-outline__group-title {
|
|
|
5241
5330
|
/* motion */
|
|
5242
5331
|
}
|
|
5243
5332
|
|
|
5244
|
-
.table__cell--semi-bad {
|
|
5333
|
+
.table__cell-status--semi-bad {
|
|
5245
5334
|
/* color */
|
|
5246
5335
|
background-color: var(--color-semi-bad);
|
|
5247
5336
|
|
|
@@ -5256,7 +5345,7 @@ h4.course-outline__group-title {
|
|
|
5256
5345
|
/* motion */
|
|
5257
5346
|
}
|
|
5258
5347
|
|
|
5259
|
-
.table__cell--bad {
|
|
5348
|
+
.table__cell-status--bad {
|
|
5260
5349
|
/* color */
|
|
5261
5350
|
background-color: var(--color-bad);
|
|
5262
5351
|
|