@mirai/ui 1.1.9 → 1.1.11
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/README.md +20 -8
- package/build/components/Button/Button.module.css +7 -7
- package/build/components/InputSelect/InputSelect.js +1 -1
- package/build/components/InputSelect/InputSelect.js.map +1 -1
- package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +1 -1
- package/build/components/InputText/InputText.js +1 -1
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +1 -1
- package/build/components/Table/Table.Filter.js +1 -1
- package/build/components/Table/Table.Filter.js.map +1 -1
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +4 -4
- package/build/primitives/Icon/Icon.js +23 -4
- package/build/primitives/Icon/Icon.js.map +1 -1
- package/build/primitives/Icon/Icon.module.css +0 -20
- package/build/primitives/Icon/Icon.stories.js +5 -1
- package/build/primitives/Icon/Icon.stories.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +154 -50
- package/build/primitives/Text/Text.js +22 -4
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/Text.module.css +33 -20
- package/build/primitives/Text/Text.stories.js +5 -1
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +82 -42
- package/build/primitives/Text/helpers/color.js +23 -0
- package/build/primitives/Text/helpers/color.js.map +1 -0
- package/build/primitives/Text/helpers/index.js +11 -0
- package/build/primitives/Text/helpers/index.js.map +1 -1
- package/build/theme/default.theme.css +19 -14
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
-
exports[`primitive:<Icon>
|
|
3
|
+
exports[`primitive:<Icon> color prop:accent 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<span
|
|
6
|
-
class="icon headline-3
|
|
6
|
+
class="icon accent headline-3"
|
|
7
7
|
>
|
|
8
8
|
<svg
|
|
9
9
|
fill="currentColor"
|
|
@@ -26,10 +26,10 @@ exports[`primitive:<Icon> inherit:className 1`] = `
|
|
|
26
26
|
</DocumentFragment>
|
|
27
27
|
`;
|
|
28
28
|
|
|
29
|
-
exports[`primitive:<Icon> prop:
|
|
29
|
+
exports[`primitive:<Icon> color prop:accentDark 1`] = `
|
|
30
30
|
<DocumentFragment>
|
|
31
31
|
<span
|
|
32
|
-
class="icon
|
|
32
|
+
class="icon accentDark headline-3"
|
|
33
33
|
>
|
|
34
34
|
<svg
|
|
35
35
|
fill="currentColor"
|
|
@@ -52,10 +52,10 @@ exports[`primitive:<Icon> prop:accent 1`] = `
|
|
|
52
52
|
</DocumentFragment>
|
|
53
53
|
`;
|
|
54
54
|
|
|
55
|
-
exports[`primitive:<Icon> prop:
|
|
55
|
+
exports[`primitive:<Icon> color prop:accentLight 1`] = `
|
|
56
56
|
<DocumentFragment>
|
|
57
57
|
<span
|
|
58
|
-
class="icon
|
|
58
|
+
class="icon accentLight headline-3"
|
|
59
59
|
>
|
|
60
60
|
<svg
|
|
61
61
|
fill="currentColor"
|
|
@@ -78,7 +78,33 @@ exports[`primitive:<Icon> prop:action 1`] = `
|
|
|
78
78
|
</DocumentFragment>
|
|
79
79
|
`;
|
|
80
80
|
|
|
81
|
-
exports[`primitive:<Icon> prop:
|
|
81
|
+
exports[`primitive:<Icon> color prop:dark 1`] = `
|
|
82
|
+
<DocumentFragment>
|
|
83
|
+
<span
|
|
84
|
+
class="icon dark headline-3"
|
|
85
|
+
>
|
|
86
|
+
<svg
|
|
87
|
+
fill="currentColor"
|
|
88
|
+
height="1em"
|
|
89
|
+
stroke="currentColor"
|
|
90
|
+
stroke-width="0"
|
|
91
|
+
viewBox="0 0 24 24"
|
|
92
|
+
width="1em"
|
|
93
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
94
|
+
>
|
|
95
|
+
<path
|
|
96
|
+
d="M0 0h24v24H0V0z"
|
|
97
|
+
fill="none"
|
|
98
|
+
/>
|
|
99
|
+
<path
|
|
100
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
101
|
+
/>
|
|
102
|
+
</svg>
|
|
103
|
+
</span>
|
|
104
|
+
</DocumentFragment>
|
|
105
|
+
`;
|
|
106
|
+
|
|
107
|
+
exports[`primitive:<Icon> color prop:error 1`] = `
|
|
82
108
|
<DocumentFragment>
|
|
83
109
|
<span
|
|
84
110
|
class="icon error headline-3"
|
|
@@ -104,10 +130,10 @@ exports[`primitive:<Icon> prop:error 1`] = `
|
|
|
104
130
|
</DocumentFragment>
|
|
105
131
|
`;
|
|
106
132
|
|
|
107
|
-
exports[`primitive:<Icon> prop:
|
|
133
|
+
exports[`primitive:<Icon> color prop:info 1`] = `
|
|
108
134
|
<DocumentFragment>
|
|
109
135
|
<span
|
|
110
|
-
class="icon headline-
|
|
136
|
+
class="icon info headline-3"
|
|
111
137
|
>
|
|
112
138
|
<svg
|
|
113
139
|
fill="currentColor"
|
|
@@ -130,10 +156,10 @@ exports[`primitive:<Icon> prop:headline & level:1 1`] = `
|
|
|
130
156
|
</DocumentFragment>
|
|
131
157
|
`;
|
|
132
158
|
|
|
133
|
-
exports[`primitive:<Icon> prop:
|
|
159
|
+
exports[`primitive:<Icon> color prop:light 1`] = `
|
|
134
160
|
<DocumentFragment>
|
|
135
161
|
<span
|
|
136
|
-
class="icon headline-
|
|
162
|
+
class="icon light headline-3"
|
|
137
163
|
>
|
|
138
164
|
<svg
|
|
139
165
|
fill="currentColor"
|
|
@@ -156,10 +182,10 @@ exports[`primitive:<Icon> prop:headline & level:2 1`] = `
|
|
|
156
182
|
</DocumentFragment>
|
|
157
183
|
`;
|
|
158
184
|
|
|
159
|
-
exports[`primitive:<Icon> prop:
|
|
185
|
+
exports[`primitive:<Icon> color prop:success 1`] = `
|
|
160
186
|
<DocumentFragment>
|
|
161
187
|
<span
|
|
162
|
-
class="icon headline-3"
|
|
188
|
+
class="icon success headline-3"
|
|
163
189
|
>
|
|
164
190
|
<svg
|
|
165
191
|
fill="currentColor"
|
|
@@ -182,10 +208,10 @@ exports[`primitive:<Icon> prop:headline & level:3 1`] = `
|
|
|
182
208
|
</DocumentFragment>
|
|
183
209
|
`;
|
|
184
210
|
|
|
185
|
-
exports[`primitive:<Icon> prop:
|
|
211
|
+
exports[`primitive:<Icon> color prop:warning 1`] = `
|
|
186
212
|
<DocumentFragment>
|
|
187
213
|
<span
|
|
188
|
-
class="icon headline-
|
|
214
|
+
class="icon warning headline-3"
|
|
189
215
|
>
|
|
190
216
|
<svg
|
|
191
217
|
fill="currentColor"
|
|
@@ -208,7 +234,111 @@ exports[`primitive:<Icon> prop:headline & level:4 1`] = `
|
|
|
208
234
|
</DocumentFragment>
|
|
209
235
|
`;
|
|
210
236
|
|
|
211
|
-
exports[`primitive:<Icon>
|
|
237
|
+
exports[`primitive:<Icon> inherit:className 1`] = `
|
|
238
|
+
<DocumentFragment>
|
|
239
|
+
<span
|
|
240
|
+
class="icon headline-3 mirai"
|
|
241
|
+
>
|
|
242
|
+
<svg
|
|
243
|
+
fill="currentColor"
|
|
244
|
+
height="1em"
|
|
245
|
+
stroke="currentColor"
|
|
246
|
+
stroke-width="0"
|
|
247
|
+
viewBox="0 0 24 24"
|
|
248
|
+
width="1em"
|
|
249
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
250
|
+
>
|
|
251
|
+
<path
|
|
252
|
+
d="M0 0h24v24H0V0z"
|
|
253
|
+
fill="none"
|
|
254
|
+
/>
|
|
255
|
+
<path
|
|
256
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
257
|
+
/>
|
|
258
|
+
</svg>
|
|
259
|
+
</span>
|
|
260
|
+
</DocumentFragment>
|
|
261
|
+
`;
|
|
262
|
+
|
|
263
|
+
exports[`primitive:<Icon> prop:action 1`] = `
|
|
264
|
+
<DocumentFragment>
|
|
265
|
+
<span
|
|
266
|
+
class="icon action"
|
|
267
|
+
>
|
|
268
|
+
<svg
|
|
269
|
+
fill="currentColor"
|
|
270
|
+
height="1em"
|
|
271
|
+
stroke="currentColor"
|
|
272
|
+
stroke-width="0"
|
|
273
|
+
viewBox="0 0 24 24"
|
|
274
|
+
width="1em"
|
|
275
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
276
|
+
>
|
|
277
|
+
<path
|
|
278
|
+
d="M0 0h24v24H0V0z"
|
|
279
|
+
fill="none"
|
|
280
|
+
/>
|
|
281
|
+
<path
|
|
282
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
283
|
+
/>
|
|
284
|
+
</svg>
|
|
285
|
+
</span>
|
|
286
|
+
</DocumentFragment>
|
|
287
|
+
`;
|
|
288
|
+
|
|
289
|
+
exports[`primitive:<Icon> prop:headline & level:1 1`] = `
|
|
290
|
+
<DocumentFragment>
|
|
291
|
+
<span
|
|
292
|
+
class="icon headline-1"
|
|
293
|
+
>
|
|
294
|
+
<svg
|
|
295
|
+
fill="currentColor"
|
|
296
|
+
height="1em"
|
|
297
|
+
stroke="currentColor"
|
|
298
|
+
stroke-width="0"
|
|
299
|
+
viewBox="0 0 24 24"
|
|
300
|
+
width="1em"
|
|
301
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
302
|
+
>
|
|
303
|
+
<path
|
|
304
|
+
d="M0 0h24v24H0V0z"
|
|
305
|
+
fill="none"
|
|
306
|
+
/>
|
|
307
|
+
<path
|
|
308
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
309
|
+
/>
|
|
310
|
+
</svg>
|
|
311
|
+
</span>
|
|
312
|
+
</DocumentFragment>
|
|
313
|
+
`;
|
|
314
|
+
|
|
315
|
+
exports[`primitive:<Icon> prop:headline & level:2 1`] = `
|
|
316
|
+
<DocumentFragment>
|
|
317
|
+
<span
|
|
318
|
+
class="icon headline-2"
|
|
319
|
+
>
|
|
320
|
+
<svg
|
|
321
|
+
fill="currentColor"
|
|
322
|
+
height="1em"
|
|
323
|
+
stroke="currentColor"
|
|
324
|
+
stroke-width="0"
|
|
325
|
+
viewBox="0 0 24 24"
|
|
326
|
+
width="1em"
|
|
327
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
328
|
+
>
|
|
329
|
+
<path
|
|
330
|
+
d="M0 0h24v24H0V0z"
|
|
331
|
+
fill="none"
|
|
332
|
+
/>
|
|
333
|
+
<path
|
|
334
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
335
|
+
/>
|
|
336
|
+
</svg>
|
|
337
|
+
</span>
|
|
338
|
+
</DocumentFragment>
|
|
339
|
+
`;
|
|
340
|
+
|
|
341
|
+
exports[`primitive:<Icon> prop:headline & level:3 1`] = `
|
|
212
342
|
<DocumentFragment>
|
|
213
343
|
<span
|
|
214
344
|
class="icon headline-3"
|
|
@@ -234,10 +364,10 @@ exports[`primitive:<Icon> prop:headline 1`] = `
|
|
|
234
364
|
</DocumentFragment>
|
|
235
365
|
`;
|
|
236
366
|
|
|
237
|
-
exports[`primitive:<Icon> prop:
|
|
367
|
+
exports[`primitive:<Icon> prop:headline & level:4 1`] = `
|
|
238
368
|
<DocumentFragment>
|
|
239
369
|
<span
|
|
240
|
-
class="icon headline-
|
|
370
|
+
class="icon headline-4"
|
|
241
371
|
>
|
|
242
372
|
<svg
|
|
243
373
|
fill="currentColor"
|
|
@@ -260,10 +390,10 @@ exports[`primitive:<Icon> prop:lighten 1`] = `
|
|
|
260
390
|
</DocumentFragment>
|
|
261
391
|
`;
|
|
262
392
|
|
|
263
|
-
exports[`primitive:<Icon> prop:
|
|
393
|
+
exports[`primitive:<Icon> prop:headline 1`] = `
|
|
264
394
|
<DocumentFragment>
|
|
265
395
|
<span
|
|
266
|
-
class="icon
|
|
396
|
+
class="icon headline-3"
|
|
267
397
|
>
|
|
268
398
|
<svg
|
|
269
399
|
fill="currentColor"
|
|
@@ -286,10 +416,10 @@ exports[`primitive:<Icon> prop:paragraph 1`] = `
|
|
|
286
416
|
</DocumentFragment>
|
|
287
417
|
`;
|
|
288
418
|
|
|
289
|
-
exports[`primitive:<Icon> prop:
|
|
419
|
+
exports[`primitive:<Icon> prop:paragraph 1`] = `
|
|
290
420
|
<DocumentFragment>
|
|
291
421
|
<span
|
|
292
|
-
class="icon
|
|
422
|
+
class="icon paragraph"
|
|
293
423
|
>
|
|
294
424
|
<svg
|
|
295
425
|
fill="currentColor"
|
|
@@ -312,10 +442,10 @@ exports[`primitive:<Icon> prop:small 1`] = `
|
|
|
312
442
|
</DocumentFragment>
|
|
313
443
|
`;
|
|
314
444
|
|
|
315
|
-
exports[`primitive:<Icon> prop:
|
|
445
|
+
exports[`primitive:<Icon> prop:small 1`] = `
|
|
316
446
|
<DocumentFragment>
|
|
317
447
|
<span
|
|
318
|
-
class="icon
|
|
448
|
+
class="icon small"
|
|
319
449
|
>
|
|
320
450
|
<svg
|
|
321
451
|
fill="currentColor"
|
|
@@ -886,32 +1016,6 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
|
|
|
886
1016
|
</DocumentFragment>
|
|
887
1017
|
`;
|
|
888
1018
|
|
|
889
|
-
exports[`primitive:<Icon> prop:warning 1`] = `
|
|
890
|
-
<DocumentFragment>
|
|
891
|
-
<span
|
|
892
|
-
class="icon headline-3 warning"
|
|
893
|
-
>
|
|
894
|
-
<svg
|
|
895
|
-
fill="currentColor"
|
|
896
|
-
height="1em"
|
|
897
|
-
stroke="currentColor"
|
|
898
|
-
stroke-width="0"
|
|
899
|
-
viewBox="0 0 24 24"
|
|
900
|
-
width="1em"
|
|
901
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
902
|
-
>
|
|
903
|
-
<path
|
|
904
|
-
d="M0 0h24v24H0V0z"
|
|
905
|
-
fill="none"
|
|
906
|
-
/>
|
|
907
|
-
<path
|
|
908
|
-
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
909
|
-
/>
|
|
910
|
-
</svg>
|
|
911
|
-
</span>
|
|
912
|
-
</DocumentFragment>
|
|
913
|
-
`;
|
|
914
|
-
|
|
915
1019
|
exports[`primitive:<Icon> renders 1`] = `
|
|
916
1020
|
<DocumentFragment>
|
|
917
1021
|
<span
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _Primitive = require("../Primitive");
|
|
12
12
|
var _helpers2 = require("./helpers");
|
|
13
13
|
var _TextModule = _interopRequireDefault(require("./Text.module.css"));
|
|
14
|
-
var _excluded = ["accent", "action", "bold", "capitalize", "children", "error", "headline", "level", "
|
|
14
|
+
var _excluded = ["accent", "accentLight", "accentDark", "action", "bold", "capitalize", "children", "dark", "error", "headline", "info", "level", "light", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -22,15 +22,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
22
22
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
23
|
var Text = function Text(_ref) {
|
|
24
24
|
var accent = _ref.accent,
|
|
25
|
+
accentLight = _ref.accentLight,
|
|
26
|
+
accentDark = _ref.accentDark,
|
|
25
27
|
action = _ref.action,
|
|
26
28
|
bold = _ref.bold,
|
|
27
29
|
capitalize = _ref.capitalize,
|
|
28
30
|
children = _ref.children,
|
|
31
|
+
dark = _ref.dark,
|
|
29
32
|
error = _ref.error,
|
|
30
33
|
headline = _ref.headline,
|
|
34
|
+
info = _ref.info,
|
|
31
35
|
_ref$level = _ref.level,
|
|
32
36
|
level = _ref$level === void 0 ? 3 : _ref$level,
|
|
33
|
-
|
|
37
|
+
light = _ref.light,
|
|
34
38
|
_ref$markdown = _ref.markdown,
|
|
35
39
|
markdown = _ref$markdown === void 0 ? true : _ref$markdown,
|
|
36
40
|
small = _ref.small,
|
|
@@ -45,21 +49,35 @@ var Text = function Text(_ref) {
|
|
|
45
49
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
|
|
46
50
|
role: others.role || 'text',
|
|
47
51
|
tag: tag || (headline ? "h".concat(level) : 'span'),
|
|
48
|
-
className: (0, _helpers.styles)(_TextModule.default.text,
|
|
52
|
+
className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, (0, _helpers2.color)({
|
|
53
|
+
accent: accent,
|
|
54
|
+
accentDark: accentDark,
|
|
55
|
+
accentLight: accentLight,
|
|
56
|
+
dark: dark,
|
|
57
|
+
error: error,
|
|
58
|
+
info: info,
|
|
59
|
+
light: light,
|
|
60
|
+
success: success,
|
|
61
|
+
warning: warning
|
|
62
|
+
}), headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
49
63
|
}), markdown ? (0, _helpers2.parseMarkdown)(children) : children);
|
|
50
64
|
};
|
|
51
65
|
exports.Text = Text;
|
|
52
66
|
Text.displayName = 'Primitive:Text';
|
|
53
67
|
Text.propTypes = {
|
|
54
68
|
accent: _propTypes.default.bool,
|
|
69
|
+
accentLight: _propTypes.default.bool,
|
|
70
|
+
accentDark: _propTypes.default.bool,
|
|
55
71
|
action: _propTypes.default.bool,
|
|
56
72
|
bold: _propTypes.default.bool,
|
|
57
73
|
capitalize: _propTypes.default.bool,
|
|
58
74
|
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
|
|
75
|
+
dark: _propTypes.default.bool,
|
|
59
76
|
error: _propTypes.default.bool,
|
|
60
77
|
headline: _propTypes.default.bool,
|
|
78
|
+
info: _propTypes.default.bool,
|
|
61
79
|
level: _propTypes.default.number,
|
|
62
|
-
|
|
80
|
+
light: _propTypes.default.bool,
|
|
63
81
|
markdown: _propTypes.default.bool,
|
|
64
82
|
small: _propTypes.default.bool,
|
|
65
83
|
success: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","error","headline","level","
|
|
1
|
+
{"version":3,"file":"Text.js","names":["Text","accent","accentLight","accentDark","action","bold","capitalize","children","dark","error","headline","info","level","light","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","color","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color, parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n accentLight,\n accentDark,\n action,\n bold,\n capitalize,\n children,\n dark,\n error,\n headline,\n info,\n level = 3,\n light,\n markdown = true,\n small,\n success,\n tag,\n tiny,\n underline,\n upperCase,\n warning,\n wide,\n ...others\n}) =>\n React.createElement(\n Primitive,\n {\n ...others,\n role: others.role || 'text',\n tag: tag || (headline ? `h${level}` : 'span'),\n className: styles(\n style.text,\n bold && style.bold,\n capitalize && style.capitalize,\n color({ accent, accentDark, accentLight, dark, error, info, light, success, warning }),\n headline\n ? style[`headline-${level}`]\n : action\n ? style.action\n : small\n ? style.small\n : tiny\n ? style.tiny\n : style.paragraph,\n underline && style.underline,\n upperCase && style.upperCase,\n wide && style.wide,\n others.className,\n ),\n },\n markdown ? parseMarkdown(children) : children,\n );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n accent: PropTypes.bool,\n accentLight: PropTypes.bool,\n accentDark: PropTypes.bool,\n action: PropTypes.bool,\n bold: PropTypes.bool,\n capitalize: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n dark: PropTypes.bool,\n error: PropTypes.bool,\n headline: PropTypes.bool,\n info: PropTypes.bool,\n level: PropTypes.number,\n light: PropTypes.bool,\n markdown: PropTypes.bool,\n small: PropTypes.bool,\n success: PropTypes.bool,\n tag: PropTypes.string,\n tiny: PropTypes.bool,\n underline: PropTypes.bool,\n upperCase: PropTypes.bool,\n warning: PropTypes.bool,\n wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}
|
|
@@ -13,10 +13,6 @@
|
|
|
13
13
|
-moz-osx-font-smoothing: grayscale;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.accent {
|
|
17
|
-
color: var(--mirai-ui-accent);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
16
|
.action {
|
|
21
17
|
font-size: var(--mirai-ui-font-size-action);
|
|
22
18
|
line-height: var(--mirai-ui-line-height-action);
|
|
@@ -35,10 +31,6 @@
|
|
|
35
31
|
text-transform: uppercase;
|
|
36
32
|
}
|
|
37
33
|
|
|
38
|
-
.error {
|
|
39
|
-
color: var(--mirai-ui-error);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
34
|
.headline-1 {
|
|
43
35
|
font-size: var(--mirai-ui-font-size-headline-1);
|
|
44
36
|
line-height: var(--mirai-ui-line-height-headline-1);
|
|
@@ -59,19 +51,11 @@
|
|
|
59
51
|
line-height: var(--mirai-ui-line-height-paragraph);
|
|
60
52
|
}
|
|
61
53
|
|
|
62
|
-
.lighten {
|
|
63
|
-
color: var(--mirai-ui-content-light);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
54
|
.small {
|
|
67
55
|
font-size: var(--mirai-ui-font-size-small);
|
|
68
56
|
line-height: var(--mirai-ui-line-height-small);
|
|
69
57
|
}
|
|
70
58
|
|
|
71
|
-
.success {
|
|
72
|
-
color: var(--mirai-ui-success);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
59
|
.tiny {
|
|
76
60
|
font-size: var(--mirai-ui-font-size-tiny);
|
|
77
61
|
line-height: var(--mirai-ui-line-height-tiny);
|
|
@@ -85,10 +69,39 @@
|
|
|
85
69
|
text-transform: uppercase;
|
|
86
70
|
}
|
|
87
71
|
|
|
88
|
-
.warning {
|
|
89
|
-
color: var(--mirai-ui-warning);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
72
|
.wide {
|
|
93
73
|
width: 100%;
|
|
94
74
|
}
|
|
75
|
+
|
|
76
|
+
/* color */
|
|
77
|
+
.accent {
|
|
78
|
+
color: var(--mirai-ui-accent);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.accentDark {
|
|
82
|
+
color: var(--mirai-ui-accent-dark);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.accentLight {
|
|
86
|
+
color: var(--mirai-ui-accent-light);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.error {
|
|
90
|
+
color: var(--mirai-ui-error);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.info {
|
|
94
|
+
color: var(--mirai-ui-info);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.light {
|
|
98
|
+
color: var(--mirai-ui-content-light);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.success {
|
|
102
|
+
color: var(--mirai-ui-success);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.warning {
|
|
106
|
+
color: var(--mirai-ui-warning);
|
|
107
|
+
}
|
|
@@ -26,15 +26,19 @@ exports.Story = Story;
|
|
|
26
26
|
Story.storyName = 'Text';
|
|
27
27
|
Story.args = {
|
|
28
28
|
accent: false,
|
|
29
|
+
accentDark: false,
|
|
30
|
+
accentLight: false,
|
|
29
31
|
action: false,
|
|
30
32
|
bold: false,
|
|
31
33
|
capitalize: false,
|
|
32
34
|
children: 'children',
|
|
33
35
|
childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
|
|
36
|
+
dark: false,
|
|
34
37
|
error: false,
|
|
35
38
|
headline: false,
|
|
39
|
+
info: false,
|
|
36
40
|
level: 3,
|
|
37
|
-
|
|
41
|
+
light: false,
|
|
38
42
|
small: false,
|
|
39
43
|
success: false,
|
|
40
44
|
tag: 'span',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","error","headline","level","
|
|
1
|
+
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","accentDark","accentLight","action","bold","capitalize","children","dark","error","headline","info","level","light","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n <>\n <Text {...props} />\n <Text {...props} children={childrenMarkdown} />\n </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n accent: false,\n accentDark: false,\n accentLight: false,\n action: false,\n bold: false,\n capitalize: false,\n children: 'children',\n childrenMarkdown:\n '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n dark: false,\n error: false,\n headline: false,\n info: false,\n level: 3,\n light: false,\n small: false,\n success: false,\n tag: 'span',\n tiny: false,\n underline: false,\n upperCase: false,\n warning: false,\n wide: false,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBV,gBAAgB,EACd,8HAA8H;EAChIW,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAED3B,KAAK,CAAC4B,QAAQ,GAAG,CAAC,CAAC"}
|