@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
package/README.md
CHANGED
|
@@ -56,11 +56,15 @@ const MyComponent = () => (
|
|
|
56
56
|
This primitive returns a span with an icon based on a mandatory string prop `name`.
|
|
57
57
|
|
|
58
58
|
- `accent:boolean` use theme's accent color
|
|
59
|
+
- `accentDark:boolean` use theme's accent-dark color
|
|
60
|
+
- `accentLight:boolean` use theme's accent-light color
|
|
59
61
|
- `action:boolean` modifying font-size
|
|
62
|
+
- `dark:boolean` use theme's content-dark color
|
|
60
63
|
- `error:boolean` use theme's error color
|
|
61
64
|
- `headline:boolean` modifying font-size (default headline:3)
|
|
65
|
+
- `info:boolean` use theme's info color
|
|
62
66
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
63
|
-
- `
|
|
67
|
+
- `light:boolean` use theme's content-light color
|
|
64
68
|
- `paragraph:boolean` modifying font-size
|
|
65
69
|
- `small:boolean` modifying font-size
|
|
66
70
|
- `success:boolean` use theme's success color
|
|
@@ -332,14 +336,18 @@ const MyComponent = () => (
|
|
|
332
336
|
A primitive for displaying text. It receives the following props:
|
|
333
337
|
|
|
334
338
|
- `accent:boolean` use theme's accent color
|
|
339
|
+
- `accentDark:boolean` use theme's accent-dark color
|
|
340
|
+
- `accentLight:boolean` use theme's accent-light color
|
|
335
341
|
- `action:boolean` modifying font-size
|
|
336
342
|
- `bold:boolean` modifying font-weight
|
|
337
343
|
- `capitalize:boolean` capitalize the first word of a sentence
|
|
338
344
|
- `children:string`
|
|
345
|
+
- `dark:boolean` use theme's content-dark color
|
|
339
346
|
- `error:boolean` use theme's error color
|
|
340
347
|
- `headline:boolean` modifying font-size
|
|
348
|
+
- `info:boolean` use theme's info color
|
|
341
349
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
342
|
-
- `
|
|
350
|
+
- `light:boolean` use theme's content-light color
|
|
343
351
|
- `markdown:boolean` if true renders content as parsed markdown
|
|
344
352
|
- `small:boolean` modifying font-size
|
|
345
353
|
- `success:boolean` use theme's success color
|
|
@@ -476,14 +484,16 @@ const MyComponent = (props) => {
|
|
|
476
484
|
--mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
|
|
477
485
|
--mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
|
|
478
486
|
--mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
|
|
479
|
-
--mirai-ui-button-focus-color: var(--mirai-ui-
|
|
480
|
-
--mirai-ui-button-focus-shadow:
|
|
487
|
+
--mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
|
|
488
|
+
--mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
|
|
481
489
|
--mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
|
|
482
490
|
--mirai-ui-button-padding-x: var(--mirai-ui-space-L);
|
|
483
491
|
--mirai-ui-button-padding-y: var(--mirai-ui-space-S);
|
|
484
492
|
--mirai-ui-button-radius: var(--mirai-ui-border-radius);
|
|
485
493
|
--mirai-ui-button-secondary-background: var(--mirai-ui-base);
|
|
486
|
-
--mirai-ui-button-secondary-color
|
|
494
|
+
--mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
|
|
495
|
+
--mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
|
|
496
|
+
--mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
|
|
487
497
|
--mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
|
|
488
498
|
--mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
|
|
489
499
|
--mirai-ui-button-transparent-color: var(--mirai-ui-content);
|
|
@@ -1392,9 +1402,11 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
|
|
|
1392
1402
|
--mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
|
|
1393
1403
|
|
|
1394
1404
|
/* focus */
|
|
1395
|
-
--mirai-ui-focus-color: var(--mirai-ui-
|
|
1396
|
-
--mirai-ui-focus-shadow:
|
|
1397
|
-
--mirai-ui-focus-
|
|
1405
|
+
--mirai-ui-focus-color: var(--mirai-ui-accent-dark);
|
|
1406
|
+
--mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
|
|
1407
|
+
--mirai-ui-focus-width: var(--mirai-ui-space-XXS);
|
|
1408
|
+
--mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-focus-color-shadow);
|
|
1409
|
+
--mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
|
|
1398
1410
|
```
|
|
1399
1411
|
|
|
1400
1412
|
## Hooks
|
|
@@ -26,15 +26,15 @@ button.button:disabled:not(.busy) {
|
|
|
26
26
|
|
|
27
27
|
button.secondary {
|
|
28
28
|
background-color: var(--mirai-ui-button-secondary-background);
|
|
29
|
-
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-
|
|
30
|
-
color: var(--mirai-ui-button-
|
|
29
|
+
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-color);
|
|
30
|
+
color: var(--mirai-ui-button-secondary-color);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
button.button:not(:disabled).secondary:active,
|
|
34
34
|
button.button:not(:disabled).secondary:hover {
|
|
35
|
-
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-focus-color),
|
|
36
|
-
var(--mirai-ui-button-focus-shadow);
|
|
37
|
-
color: var(--mirai-ui-button-focus-color);
|
|
35
|
+
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-secondary-focus-color),
|
|
36
|
+
0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-secondary-focus-color-shadow);
|
|
37
|
+
color: var(--mirai-ui-button-secondary-focus-color);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
button.transparent {
|
|
@@ -50,7 +50,7 @@ button.transparent:not(:disabled):hover {
|
|
|
50
50
|
|
|
51
51
|
button.button:not(:disabled):not(.secondary):not(.transparent):active,
|
|
52
52
|
button.button:not(:disabled):not(.secondary):not(.transparent):hover {
|
|
53
|
-
box-shadow: var(--mirai-ui-button-focus-shadow);
|
|
53
|
+
box-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-button-focus-color-shadow);
|
|
54
54
|
background-color: var(--mirai-ui-button-focus-color);
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -156,7 +156,7 @@ button.button.busy .spinner {
|
|
|
156
156
|
.secondary .spinner::before,
|
|
157
157
|
.secondary .spinner::after {
|
|
158
158
|
animation-name: mirai-button-secondary-busy;
|
|
159
|
-
background-color: var(--mirai-ui-button-secondary-color
|
|
159
|
+
background-color: var(--mirai-ui-button-secondary-color);
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
.transparent .spinner,
|
|
@@ -76,7 +76,7 @@ var InputSelect = function InputSelect(_ref) {
|
|
|
76
76
|
className: (0, _helpers.styles)(_InputTextModule.default.inputBorder, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error)
|
|
77
77
|
}, caption && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
78
78
|
action: true,
|
|
79
|
-
|
|
79
|
+
light: true,
|
|
80
80
|
className: _InputTextModule.default.caption
|
|
81
81
|
}, caption), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
82
82
|
wide: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","displayName","propTypes","PropTypes","string","bool","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { Expand } from './partials';\n\nconst InputSelect = ({\n caption,\n disabled,\n error,\n hint,\n label,\n showRequired = false,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-select'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(style.inputBorder, disabled && style.disabled, focus && style.focus, error && style.error)}\n >\n {caption && (\n <Text action
|
|
1
|
+
{"version":3,"file":"InputSelect.js","names":["InputSelect","caption","disabled","error","hint","label","showRequired","showState","success","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","content","required","input","withLabel","empty","displayName","propTypes","PropTypes","string","bool","name","isRequired","func"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\nimport { Hint, IconState, Label } from '../InputText/partials';\nimport { Expand } from './partials';\n\nconst InputSelect = ({\n caption,\n disabled,\n error,\n hint,\n label,\n showRequired = false,\n showState = true,\n success,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n event.target?.blur();\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const has = {\n label: !!label,\n value: others.value !== undefined && others.value?.length > 0,\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-select'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(style.inputBorder, disabled && style.disabled, focus && style.focus, error && style.error)}\n >\n {caption && (\n <Text action light className={style.caption}>\n {caption}\n </Text>\n )}\n\n <View wide className={style.content}>\n {label && (\n <Label\n {...{\n disabled,\n error,\n focus,\n label,\n required: showRequired && others.required,\n value: others.value,\n }}\n />\n )}\n\n <Select\n {...others}\n disabled={disabled}\n value={others.value || ''}\n className={styles(\n style.input,\n has.label && style.withLabel,\n !!label && !(focus || error || has.value) && style.empty,\n )}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n </View>\n\n {!disabled && <Expand />}\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n caption: PropTypes.string,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n label: PropTypes.string,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpC,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAcX;EAAA;EAAA,IAbJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,yBACLC,YAAY;IAAZA,YAAY,kCAAG,KAAK;IAAA,sBACpBC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAChBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAAA,oBAClBC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAET,gBAA0B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAlCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAEC,KAAK,EAAK;IAAA;IACrCT,QAAQ,CAACQ,KAAK,EAAEC,KAAK,CAAC;IACtB,iBAAAA,KAAK,CAACC,MAAM,kDAAZ,cAAcC,IAAI,EAAE;EACtB,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIH,KAAK,EAAK;IAC7BH,QAAQ,CAAC,IAAI,CAAC;IACdL,OAAO,CAACQ,KAAK,CAAC;EAChB,CAAC;EAED,IAAMI,WAAW,GAAG,SAAdA,WAAW,CAAIJ,KAAK,EAAK;IAC7BH,QAAQ,CAAC,KAAK,CAAC;IACfJ,OAAO,CAACO,KAAK,CAAC;EAChB,CAAC;EAED,IAAMK,GAAG,GAAG;IACVnB,KAAK,EAAE,CAAC,CAACA,KAAK;IACda,KAAK,EAAEL,MAAM,CAACK,KAAK,KAAKO,SAAS,IAAI,kBAAAZ,MAAM,CAACK,KAAK,kDAAZ,cAAcQ,MAAM,IAAG,CAAC;IAC7DC,SAAS,EAAEpB,SAAS,KAAKJ,KAAK,IAAIK,OAAO,IAAIC,OAAO;EACtD,CAAC;EAED,oBACE,6BAAC,gBAAI;IACH,IAAI,EAAEI,MAAM,CAACe,IAAI,IAAI,cAAe;IACpC,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,cAAc,EAAElB,MAAM,CAACmB,SAAS,CAAE;IAC1D,KAAK,EAAEnB,MAAM,CAACiB;EAAM,gBAEpB,6BAAC,gBAAI;IACH,GAAG;IACH,SAAS,EAAE,IAAAD,eAAM,EAACC,wBAAK,CAACG,WAAW,EAAE/B,QAAQ,IAAI4B,wBAAK,CAAC5B,QAAQ,EAAEa,KAAK,IAAIe,wBAAK,CAACf,KAAK,EAAEZ,KAAK,IAAI2B,wBAAK,CAAC3B,KAAK;EAAE,GAE5GF,OAAO,iBACN,6BAAC,gBAAI;IAAC,MAAM;IAAC,KAAK;IAAC,SAAS,EAAE6B,wBAAK,CAAC7B;EAAQ,GACzCA,OAAO,CAEX,eAED,6BAAC,gBAAI;IAAC,IAAI;IAAC,SAAS,EAAE6B,wBAAK,CAACI;EAAQ,GACjC7B,KAAK,iBACJ,6BAAC,eAAK;IAEFH,QAAQ,EAARA,QAAQ;IACRC,KAAK,EAALA,KAAK;IACLY,KAAK,EAALA,KAAK;IACLV,KAAK,EAALA,KAAK;IACL8B,QAAQ,EAAE7B,YAAY,IAAIO,MAAM,CAACsB,QAAQ;IACzCjB,KAAK,EAAEL,MAAM,CAACK;EAAK,EAGxB,eAED,6BAAC,kBAAM,eACDL,MAAM;IACV,QAAQ,EAAEX,QAAS;IACnB,KAAK,EAAEW,MAAM,CAACK,KAAK,IAAI,EAAG;IAC1B,SAAS,EAAE,IAAAW,eAAM,EACfC,wBAAK,CAACM,KAAK,EACXZ,GAAG,CAACnB,KAAK,IAAIyB,wBAAK,CAACO,SAAS,EAC5B,CAAC,CAAChC,KAAK,IAAI,EAAEU,KAAK,IAAIZ,KAAK,IAAIqB,GAAG,CAACN,KAAK,CAAC,IAAIY,wBAAK,CAACQ,KAAK,CACxD;IACF,QAAQ,EAAErB,YAAa;IACvB,OAAO,EAAEK,WAAY;IACrB,OAAO,EAAEC;EAAY,GACrB,CACG,EAEN,CAACrB,QAAQ,iBAAI,6BAAC,iBAAM,OAAG,EACvBsB,GAAG,CAACG,SAAS,iBAAI,6BAAC,mBAAS;IAAOxB,KAAK,EAALA,KAAK;IAAEK,OAAO,EAAPA,OAAO;IAAEC,OAAO,EAAPA;EAAO,EAAM,CAC3D,EAENL,IAAI,iBAAI,6BAAC,cAAI;IAAOF,QAAQ,EAARA,QAAQ;IAAEC,KAAK,EAALA,KAAK;IAAEC,IAAI,EAAJA;EAAI,EAAM,CAC3C;AAEX,CAAC;AAAC;AAEFJ,WAAW,CAACuC,WAAW,GAAG,uBAAuB;AAEjDvC,WAAW,CAACwC,SAAS,GAAG;EACtBvC,OAAO,EAAEwC,kBAAS,CAACC,MAAM;EACzBxC,QAAQ,EAAEuC,kBAAS,CAACE,IAAI;EACxBxC,KAAK,EAAEsC,kBAAS,CAACE,IAAI;EACrBvC,IAAI,EAAEqC,kBAAS,CAACC,MAAM;EACtBrC,KAAK,EAAEoC,kBAAS,CAACC,MAAM;EACvBE,IAAI,EAAEH,kBAAS,CAACC,MAAM,CAACG,UAAU;EACjCvC,YAAY,EAAEmC,kBAAS,CAACE,IAAI;EAC5BpC,SAAS,EAAEkC,kBAAS,CAACE,IAAI;EACzBnC,OAAO,EAAEiC,kBAAS,CAACE,IAAI;EACvBlC,OAAO,EAAEgC,kBAAS,CAACE,IAAI;EACvBjC,QAAQ,EAAE+B,kBAAS,CAACK,IAAI;EACxBnC,OAAO,EAAE8B,kBAAS,CAACK,IAAI;EACvBlC,OAAO,EAAE6B,kBAAS,CAACK;AACrB,CAAC"}
|
|
@@ -102,7 +102,7 @@ var InputText = function InputText(_ref) {
|
|
|
102
102
|
className: (0, _helpers.styles)(_InputTextModule.default.icon, _InputTextModule.default.left, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
|
|
103
103
|
}), caption && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
104
104
|
action: true,
|
|
105
|
-
|
|
105
|
+
light: true,
|
|
106
106
|
className: _InputTextModule.default.caption
|
|
107
107
|
}, caption), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
108
108
|
wide: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputText.js","names":["InputText","caption","children","disabled","error","hint","icon","label","markdown","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","inputMode","setInputMode","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","MARKDOWN","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","string","node","bool","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n caption,\n children,\n disabled,\n error,\n hint,\n icon,\n label,\n markdown,\n multiLine,\n showRequired = false,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n const [inputMode, setInputMode] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && (others.value?.length > 0 || typeof others.value === 'number'),\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-text'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(style.inputBorder, disabled && style.disabled, error && style.error, focus && style.focus)}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n\n {caption && (\n <Text action lighten className={style.caption}>\n {caption}\n </Text>\n )}\n\n <View wide className={style.content}>\n {label && (\n <Label\n {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n />\n )}\n\n {inputMode && (\n <Input\n {...{ disabled, multiLine, ...others }}\n type={!is.password || password ? type : 'text'}\n value={others.value !== undefined ? others.value : ''}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n )}\n {markdown && !inputMode && (\n <Text\n markdown\n onClick={() => setInputMode(true)}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n >\n {others.value}\n </Text>\n )}\n </View>\n\n {markdown && (\n <Pressable onPress={() => setInputMode(!inputMode)}>\n <Icon value={ICON.MARKDOWN} className={styles(style.icon, inputMode && style.disabled)} />\n </Pressable>\n )}\n\n {(is.password || (is.search && has.value)) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={styles(style.icon, style.password)}\n />\n </Pressable>\n )}\n\n {children}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n markdown: PropTypes.bool,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputText.js","names":["InputText","caption","children","disabled","error","hint","icon","label","markdown","multiLine","showRequired","showState","success","type","warning","onChange","onEnter","onLeave","others","useState","focus","setFocus","password","setPassword","inputMode","setInputMode","handleChange","value","event","handleEnter","handleLeave","handlePress","is","search","undefined","has","length","stateIcon","role","styles","style","inputContainer","className","inputBorder","ICON","SEARCH","left","content","required","input","withLabel","MARKDOWN","EYE_CLOSE","EYE_OPEN","CLOSE","displayName","propTypes","PropTypes","string","node","bool","func","name","isRequired"],"sources":["../../../src/components/InputText/InputText.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ICON, Icon, Input, Pressable, Text, View } from '../../primitives';\nimport style from './InputText.module.css';\nimport { Hint, IconState, Label } from './partials';\n\nconst InputText = ({\n caption,\n children,\n disabled,\n error,\n hint,\n icon,\n label,\n markdown,\n multiLine,\n showRequired = false,\n showState = true,\n success,\n type,\n warning,\n onChange = () => {},\n onEnter = () => {},\n onLeave = () => {},\n ...others\n}) => {\n const [focus, setFocus] = useState(false);\n const [password, setPassword] = useState(true);\n const [inputMode, setInputMode] = useState(true);\n\n const handleChange = (value, event) => {\n onChange(value, event);\n };\n\n const handleEnter = (event) => {\n setFocus(true);\n onEnter(event);\n };\n\n const handleLeave = (event) => {\n setFocus(false);\n onLeave(event);\n };\n\n const handlePress = (event) => {\n if (is.password) setPassword(!password);\n else if (is.search) onChange(undefined, event);\n };\n\n const is = {\n password: type === 'password',\n search: type === 'search',\n };\n\n const has = {\n icon: !!icon || is.search,\n label: !!label,\n value: others.value !== undefined && (others.value?.length > 0 || typeof others.value === 'number'),\n stateIcon: showState && (error || success || warning),\n };\n\n return (\n <View\n role={others.role || 'input-text'}\n className={styles(style.inputContainer, others.className)}\n style={others.style}\n >\n <View\n row\n className={styles(style.inputBorder, disabled && style.disabled, error && style.error, focus && style.focus)}\n >\n {has.icon && (\n <Icon\n value={icon || ICON.SEARCH}\n className={styles(style.icon, style.left, disabled && style.disabled, error && style.error)}\n />\n )}\n\n {caption && (\n <Text action light className={style.caption}>\n {caption}\n </Text>\n )}\n\n <View wide className={style.content}>\n {label && (\n <Label\n {...{ disabled, error, focus, label, required: showRequired && others.required, value: others.value }}\n />\n )}\n\n {inputMode && (\n <Input\n {...{ disabled, multiLine, ...others }}\n type={!is.password || password ? type : 'text'}\n value={others.value !== undefined ? others.value : ''}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n onChange={handleChange}\n onEnter={handleEnter}\n onLeave={handleLeave}\n />\n )}\n {markdown && !inputMode && (\n <Text\n markdown\n onClick={() => setInputMode(true)}\n className={styles(style.input, has.label && style.withLabel, multiLine && style.multiLine)}\n >\n {others.value}\n </Text>\n )}\n </View>\n\n {markdown && (\n <Pressable onPress={() => setInputMode(!inputMode)}>\n <Icon value={ICON.MARKDOWN} className={styles(style.icon, inputMode && style.disabled)} />\n </Pressable>\n )}\n\n {(is.password || (is.search && has.value)) && !disabled && (\n <Pressable tabIndex={-1} onPress={handlePress}>\n <Icon\n value={is.password ? (password ? ICON.EYE_CLOSE : ICON.EYE_OPEN) : ICON.CLOSE}\n className={styles(style.icon, style.password)}\n />\n </Pressable>\n )}\n\n {children}\n\n {has.stateIcon && <IconState {...{ error, success, warning }} />}\n </View>\n\n {hint && <Hint {...{ disabled, error, hint }} />}\n </View>\n );\n};\n\nInputText.displayName = 'Component:InputText';\n\nInputText.propTypes = {\n caption: PropTypes.string,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n hint: PropTypes.string,\n icon: PropTypes.func,\n label: PropTypes.string,\n markdown: PropTypes.bool,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n showRequired: PropTypes.bool,\n showState: PropTypes.bool,\n success: PropTypes.bool,\n type: PropTypes.string,\n warning: PropTypes.bool,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { InputText };\n"],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ var Filter = function Filter(_ref) {
|
|
|
46
46
|
key: index,
|
|
47
47
|
className: _TableModule.default.item
|
|
48
48
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
49
|
-
|
|
49
|
+
light: true,
|
|
50
50
|
tiny: true
|
|
51
51
|
}, label.toLowerCase()), value && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
52
52
|
bold: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.Filter.js","names":["Filter","filter","schema","onRemove","others","fields","Object","keys","style","filters","sort","a","b","field","map","max","min","value","values","index","label","options","schemaOptions","includes","item","toLowerCase","option","length","buttonRemove","ICON","CLOSE","displayName","propTypes","PropTypes","arrayOf","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Filter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Table.module.css';\n\nconst Filter = ({ filter = [], schema = {}, onRemove = () => {}, ...others }) => {\n const fields = Object.keys(schema);\n\n return (\n <View {...others} row wide className={style.filters}>\n {filter\n .sort((a, b) => a.field >= b.field)\n .map(({ field, max, min, value, values } = {}, index) => {\n const { label = field, options: schemaOptions = {} } = schema[field] || {};\n\n return fields.includes(field) ? (\n <View row key={index} className={style.item}>\n <Text
|
|
1
|
+
{"version":3,"file":"Table.Filter.js","names":["Filter","filter","schema","onRemove","others","fields","Object","keys","style","filters","sort","a","b","field","map","max","min","value","values","index","label","options","schemaOptions","includes","item","toLowerCase","option","length","buttonRemove","ICON","CLOSE","displayName","propTypes","PropTypes","arrayOf","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Filter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Table.module.css';\n\nconst Filter = ({ filter = [], schema = {}, onRemove = () => {}, ...others }) => {\n const fields = Object.keys(schema);\n\n return (\n <View {...others} row wide className={style.filters}>\n {filter\n .sort((a, b) => a.field >= b.field)\n .map(({ field, max, min, value, values } = {}, index) => {\n const { label = field, options: schemaOptions = {} } = schema[field] || {};\n\n return fields.includes(field) ? (\n <View row key={index} className={style.item}>\n <Text light tiny>\n {label.toLowerCase()}\n </Text>\n {value && (\n <Text bold small>\n {value}\n </Text>\n )}\n {min && (\n <Text bold small>\n {`${max ? '' : '≥ '}${min}`}\n </Text>\n )}\n {max && (\n <Text bold small>\n {`${min ? ' - ' : '≤ '}${max}`}\n </Text>\n )}\n {values &&\n values.map((option, index) => (\n <Text bold key={option} small>\n {schemaOptions[option]}\n {index < values.length - 1 ? ', ' : ''}\n </Text>\n ))}\n\n <Pressable onPress={() => onRemove(index)} className={style.buttonRemove}>\n <Icon action value={ICON.CLOSE} />\n </Pressable>\n </View>\n ) : null;\n })}\n </View>\n );\n};\n\nFilter.displayName = 'Component:Table:Filter';\n\nFilter.propTypes = {\n filter: PropTypes.arrayOf(PropTypes.shape({})),\n schema: PropTypes.shape({}).isRequired,\n onRemove: PropTypes.func.isRequired,\n};\n\nexport { Filter };\n"],"mappings":"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"}
|
|
@@ -436,7 +436,7 @@ exports[`component:<Table> prop:filter 1`] = `
|
|
|
436
436
|
class="view row item"
|
|
437
437
|
>
|
|
438
438
|
<span
|
|
439
|
-
class="text tiny
|
|
439
|
+
class="text light tiny"
|
|
440
440
|
>
|
|
441
441
|
email
|
|
442
442
|
</span>
|
|
@@ -475,7 +475,7 @@ exports[`component:<Table> prop:filter 1`] = `
|
|
|
475
475
|
class="view row item"
|
|
476
476
|
>
|
|
477
477
|
<span
|
|
478
|
-
class="text tiny
|
|
478
|
+
class="text light tiny"
|
|
479
479
|
>
|
|
480
480
|
email
|
|
481
481
|
</span>
|
|
@@ -514,7 +514,7 @@ exports[`component:<Table> prop:filter 1`] = `
|
|
|
514
514
|
class="view row item"
|
|
515
515
|
>
|
|
516
516
|
<span
|
|
517
|
-
class="text tiny
|
|
517
|
+
class="text light tiny"
|
|
518
518
|
>
|
|
519
519
|
year
|
|
520
520
|
</span>
|
|
@@ -3891,7 +3891,7 @@ exports[`component:<Table> prop:store 1`] = `
|
|
|
3891
3891
|
class="view row item"
|
|
3892
3892
|
>
|
|
3893
3893
|
<span
|
|
3894
|
-
class="text tiny
|
|
3894
|
+
class="text light tiny"
|
|
3895
3895
|
>
|
|
3896
3896
|
year
|
|
3897
3897
|
</span>
|
|
@@ -9,8 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _Primitive = require("../Primitive");
|
|
12
|
+
var _helpers2 = require("../Text/helpers");
|
|
12
13
|
var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
|
|
13
|
-
var _excluded = ["accent", "action", "error", "headline", "level", "
|
|
14
|
+
var _excluded = ["accent", "accentLight", "accentDark", "action", "dark", "error", "headline", "info", "level", "light", "paragraph", "small", "success", "value", "warning"];
|
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
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; }
|
|
16
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; }
|
|
@@ -21,12 +22,16 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
21
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; }
|
|
22
23
|
var Icon = function Icon(_ref) {
|
|
23
24
|
var accent = _ref.accent,
|
|
25
|
+
accentLight = _ref.accentLight,
|
|
26
|
+
accentDark = _ref.accentDark,
|
|
24
27
|
action = _ref.action,
|
|
28
|
+
dark = _ref.dark,
|
|
25
29
|
error = _ref.error,
|
|
26
30
|
headline = _ref.headline,
|
|
31
|
+
info = _ref.info,
|
|
27
32
|
_ref$level = _ref.level,
|
|
28
33
|
level = _ref$level === void 0 ? 3 : _ref$level,
|
|
29
|
-
|
|
34
|
+
light = _ref.light,
|
|
30
35
|
paragraph = _ref.paragraph,
|
|
31
36
|
small = _ref.small,
|
|
32
37
|
success = _ref.success,
|
|
@@ -36,18 +41,32 @@ var Icon = function Icon(_ref) {
|
|
|
36
41
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
|
|
37
42
|
role: others.role || 'icon',
|
|
38
43
|
tag: 'span',
|
|
39
|
-
className: (0, _helpers.styles)(_IconModule.default.icon,
|
|
44
|
+
className: (0, _helpers.styles)(_IconModule.default.icon, (0, _helpers2.color)({
|
|
45
|
+
accent: accent,
|
|
46
|
+
accentDark: accentDark,
|
|
47
|
+
accentLight: accentLight,
|
|
48
|
+
dark: dark,
|
|
49
|
+
error: error,
|
|
50
|
+
info: info,
|
|
51
|
+
light: light,
|
|
52
|
+
success: success,
|
|
53
|
+
warning: warning
|
|
54
|
+
}), headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], others.className)
|
|
40
55
|
}), value ? /*#__PURE__*/_react.default.createElement(value) : undefined);
|
|
41
56
|
};
|
|
42
57
|
exports.Icon = Icon;
|
|
43
58
|
Icon.displayName = 'Primitive:Icon';
|
|
44
59
|
Icon.propTypes = {
|
|
45
60
|
accent: _propTypes.default.bool,
|
|
61
|
+
accentLight: _propTypes.default.bool,
|
|
62
|
+
accentDark: _propTypes.default.bool,
|
|
46
63
|
action: _propTypes.default.bool,
|
|
64
|
+
dark: _propTypes.default.bool,
|
|
47
65
|
error: _propTypes.default.bool,
|
|
48
66
|
headline: _propTypes.default.bool,
|
|
67
|
+
info: _propTypes.default.bool,
|
|
49
68
|
level: _propTypes.default.number,
|
|
50
|
-
|
|
69
|
+
light: _propTypes.default.bool,
|
|
51
70
|
paragraph: _propTypes.default.bool,
|
|
52
71
|
small: _propTypes.default.bool,
|
|
53
72
|
success: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["Icon","accent","action","error","headline","level","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["Icon","accent","accentLight","accentDark","action","dark","error","headline","info","level","light","paragraph","small","success","value","warning","others","React","createElement","Primitive","role","tag","className","styles","style","icon","color","undefined","displayName","propTypes","PropTypes","bool","number","func","isRequired"],"sources":["../../../src/primitives/Icon/Icon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color } from '../Text/helpers';\nimport style from './Icon.module.css';\n\nconst Icon = ({\n accent,\n accentLight,\n accentDark,\n action,\n dark,\n error,\n headline,\n info,\n level = 3,\n light,\n paragraph,\n small,\n success,\n value,\n warning,\n ...others\n}) =>\n React.createElement(\n Primitive,\n {\n ...others,\n role: others.role || 'icon',\n tag: 'span',\n\n className: styles(\n style.icon,\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 : paragraph\n ? style.paragraph\n : style[`headline-${level}`],\n others.className,\n ),\n },\n value ? React.createElement(value) : undefined,\n );\n\nIcon.displayName = 'Primitive:Icon';\n\nIcon.propTypes = {\n accent: PropTypes.bool,\n accentLight: PropTypes.bool,\n accentDark: PropTypes.bool,\n action: PropTypes.bool,\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 paragraph: PropTypes.bool,\n small: PropTypes.bool,\n success: PropTypes.bool,\n value: PropTypes.func.isRequired,\n warning: PropTypes.bool,\n};\n\nexport { Icon };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,kBACJC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BC,GAAG,EAAE,MAAM;IAEXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACV,IAAAC,eAAK,EAAC;MAAEzB,MAAM,EAANA,MAAM;MAAEE,UAAU,EAAVA,UAAU;MAAED,WAAW,EAAXA,WAAW;MAAEG,IAAI,EAAJA,IAAI;MAAEC,KAAK,EAALA,KAAK;MAAEE,IAAI,EAAJA,IAAI;MAAEE,KAAK,EAALA,KAAK;MAAEG,OAAO,EAAPA,OAAO;MAAEE,OAAO,EAAPA;IAAQ,CAAC,CAAC,EACtFR,QAAQ,GACJiB,mBAAK,oBAAaf,KAAK,EAAG,GAC1BL,MAAM,GACNoB,mBAAK,CAACpB,MAAM,GACZQ,KAAK,GACLY,mBAAK,CAACZ,KAAK,GACXD,SAAS,GACTa,mBAAK,CAACb,SAAS,GACfa,mBAAK,oBAAaf,KAAK,EAAG,EAC9BO,MAAM,CAACM,SAAS;EACjB,IAEHR,KAAK,gBAAGG,cAAK,CAACC,aAAa,CAACJ,KAAK,CAAC,GAAGa,SAAS,CAC/C;AAAA;AAAC;AAEJ3B,IAAI,CAAC4B,WAAW,GAAG,gBAAgB;AAEnC5B,IAAI,CAAC6B,SAAS,GAAG;EACf5B,MAAM,EAAE6B,kBAAS,CAACC,IAAI;EACtB7B,WAAW,EAAE4B,kBAAS,CAACC,IAAI;EAC3B5B,UAAU,EAAE2B,kBAAS,CAACC,IAAI;EAC1B3B,MAAM,EAAE0B,kBAAS,CAACC,IAAI;EACtB1B,IAAI,EAAEyB,kBAAS,CAACC,IAAI;EACpBzB,KAAK,EAAEwB,kBAAS,CAACC,IAAI;EACrBxB,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,IAAI,EAAEsB,kBAAS,CAACC,IAAI;EACpBtB,KAAK,EAAEqB,kBAAS,CAACE,MAAM;EACvBtB,KAAK,EAAEoB,kBAAS,CAACC,IAAI;EACrBpB,SAAS,EAAEmB,kBAAS,CAACC,IAAI;EACzBnB,KAAK,EAAEkB,kBAAS,CAACC,IAAI;EACrBlB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,KAAK,EAAEgB,kBAAS,CAACG,IAAI,CAACC,UAAU;EAChCnB,OAAO,EAAEe,kBAAS,CAACC;AACrB,CAAC"}
|
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
display: block;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.accent {
|
|
6
|
-
color: var(--mirai-ui-accent);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
5
|
.action {
|
|
10
6
|
font-size: var(--mirai-ui-font-size-action);
|
|
11
7
|
height: var(--mirai-ui-font-size-action);
|
|
@@ -13,10 +9,6 @@
|
|
|
13
9
|
width: var(--mirai-ui-font-size-action);
|
|
14
10
|
}
|
|
15
11
|
|
|
16
|
-
.error {
|
|
17
|
-
color: var(--mirai-ui-error);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
12
|
.headline-1 {
|
|
21
13
|
font-size: var(--mirai-ui-space-XL);
|
|
22
14
|
height: var(--mirai-ui-space-XL);
|
|
@@ -38,10 +30,6 @@
|
|
|
38
30
|
width: var(--mirai-ui-font-size-headline-3);
|
|
39
31
|
}
|
|
40
32
|
|
|
41
|
-
.lighten {
|
|
42
|
-
color: var(--mirai-ui-content-light);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
33
|
.paragraph {
|
|
46
34
|
font-size: var(--mirai-ui-font-size-paragraph);
|
|
47
35
|
height: var(--mirai-ui-font-size-paragraph);
|
|
@@ -55,11 +43,3 @@
|
|
|
55
43
|
line-height: var(--mirai-ui-font-size-small);
|
|
56
44
|
width: var(--mirai-ui-font-size-small);
|
|
57
45
|
}
|
|
58
|
-
|
|
59
|
-
.success {
|
|
60
|
-
color: var(--mirai-ui-success);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.warning {
|
|
64
|
-
color: var(--mirai-ui-warning);
|
|
65
|
-
}
|
|
@@ -26,11 +26,15 @@ exports.Story = Story;
|
|
|
26
26
|
Story.storyName = 'Icon';
|
|
27
27
|
Story.args = {
|
|
28
28
|
accent: false,
|
|
29
|
+
accentDark: false,
|
|
30
|
+
accentLight: false,
|
|
29
31
|
action: false,
|
|
32
|
+
dark: false,
|
|
30
33
|
error: false,
|
|
31
34
|
headline: false,
|
|
35
|
+
info: false,
|
|
32
36
|
level: 3,
|
|
33
|
-
|
|
37
|
+
light: false,
|
|
34
38
|
paragraph: false,
|
|
35
39
|
small: false,
|
|
36
40
|
success: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","error","headline","level","
|
|
1
|
+
{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","accentDark","accentLight","action","dark","error","headline","info","level","light","paragraph","small","success","undefined","warning","testId","style","argTypes","options","Object","keys","control","type","defaultValue"],"sources":["../../../src/primitives/Icon/Icon.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from './';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ value, ...props }) => <Icon {...props} value={ICON[value]} />;\n\nStory.storyName = 'Icon';\n\nStory.args = {\n accent: false,\n accentDark: false,\n accentLight: false,\n action: false,\n dark: false,\n error: false,\n headline: false,\n info: false,\n level: 3,\n light: false,\n paragraph: false,\n small: false,\n success: false,\n value: undefined,\n warning: false,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n value: {\n options: Object.keys(ICON),\n control: { type: 'select' },\n defaultValue: Object.keys(ICON)[0],\n },\n};\n"],"mappings":";;;;;;AACA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,KAAK,QAALA,KAAK;IAAKC,KAAK;EAAA,oBAAO,6BAAC,MAAI,eAAKA,KAAK;IAAE,KAAK,EAAEC,MAAI,CAACF,KAAK;EAAE,GAAG;AAAA;AAAC;AAEtFD,KAAK,CAACI,SAAS,GAAG,MAAM;AAExBJ,KAAK,CAACK,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdjB,KAAK,EAAEkB,SAAS;EAChBC,OAAO,EAAE,KAAK;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtB,KAAK,CAACuB,QAAQ,GAAG;EACftB,KAAK,EAAE;IACLuB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACvB,MAAI,CAAC;IAC1BwB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACvB,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}
|