@mirai/ui 1.0.246 → 1.0.248
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 +6 -0
- package/build/components/Slider/Slider.constants.js +3 -1
- package/build/components/Slider/Slider.constants.js.map +1 -1
- package/build/components/Slider/Slider.js +2 -2
- package/build/components/Slider/Slider.js.map +1 -1
- package/build/primitives/Icon/Icon.js +9 -3
- package/build/primitives/Icon/Icon.js.map +1 -1
- package/build/primitives/Icon/Icon.module.css +19 -7
- package/build/primitives/Icon/Icon.stories.js +3 -0
- package/build/primitives/Icon/Icon.stories.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +78 -0
- package/build/primitives/Text/Text.js +8 -2
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/Text.module.css +21 -9
- package/build/primitives/Text/Text.stories.js +3 -0
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +30 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,12 +44,15 @@ This primitive returns a span with an icon based on a mandatory string prop `nam
|
|
|
44
44
|
|
|
45
45
|
- `accent:boolean` use theme's accent color
|
|
46
46
|
- `action:boolean` modifying font-size
|
|
47
|
+
- `error:boolean` use theme's error color
|
|
47
48
|
- `headline:boolean` modifying font-size (default headline:3)
|
|
48
49
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
49
50
|
- `lighten:boolean` use theme's content-light color
|
|
50
51
|
- `paragraph:boolean` modifying font-size
|
|
51
52
|
- `small:boolean` modifying font-size
|
|
53
|
+
- `success:boolean` use theme's success color
|
|
52
54
|
- `value:func` Enum value
|
|
55
|
+
- `warning:boolean` use theme's warning color
|
|
53
56
|
|
|
54
57
|
```jsx
|
|
55
58
|
import { Icon, ICON, View } from '@mirai/ui';
|
|
@@ -319,15 +322,18 @@ A primitive for displaying text. It receives the following props:
|
|
|
319
322
|
- `bold:boolean` modifying font-weight
|
|
320
323
|
- `capitalize:boolean` capitalize the first word of a sentence
|
|
321
324
|
- `children:string`
|
|
325
|
+
- `error:boolean` use theme's error color
|
|
322
326
|
- `headline:boolean` modifying font-size
|
|
323
327
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
324
328
|
- `lighten:boolean` use theme's content-light color
|
|
325
329
|
- `markdown:boolean` if true renders content as parsed markdown
|
|
326
330
|
- `small:boolean` modifying font-size
|
|
331
|
+
- `success:boolean` use theme's success color
|
|
327
332
|
- `tag:string` html tag of resulting element
|
|
328
333
|
- `tiny:bool` modifying font-size
|
|
329
334
|
- `underline:boolean` use an underline text decoration
|
|
330
335
|
- `upperCase:boolean` switching text to upper case
|
|
336
|
+
- `warning:boolean` use theme's warning color
|
|
331
337
|
- `wide:boolean` specifies whether the component should have more width or not
|
|
332
338
|
|
|
333
339
|
```jsx
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.PRELOAD_IMAGES = void 0;
|
|
6
|
+
exports.SCROLL_DELAY = exports.PRELOAD_IMAGES = void 0;
|
|
7
7
|
var PRELOAD_IMAGES = 2;
|
|
8
8
|
exports.PRELOAD_IMAGES = PRELOAD_IMAGES;
|
|
9
|
+
var SCROLL_DELAY = 1000;
|
|
10
|
+
exports.SCROLL_DELAY = SCROLL_DELAY;
|
|
9
11
|
//# sourceMappingURL=Slider.constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nexport { PRELOAD_IMAGES };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC"}
|
|
1
|
+
{"version":3,"file":"Slider.constants.js","names":["PRELOAD_IMAGES","SCROLL_DELAY"],"sources":["../../../src/components/Slider/Slider.constants.js"],"sourcesContent":["const PRELOAD_IMAGES = 2;\n\nconst SCROLL_DELAY = 1000;\n\nexport { PRELOAD_IMAGES, SCROLL_DELAY };\n"],"mappings":";;;;;;AAAA,IAAMA,cAAc,GAAG,CAAC;AAAC;AAEzB,IAAMC,YAAY,GAAG,IAAI;AAAC"}
|
|
@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _hooks = require("../../hooks");
|
|
12
12
|
var _primitives = require("../../primitives");
|
|
13
|
-
var _helpers2 = require("./helpers");
|
|
14
13
|
var _Slider = require("./Slider.constants");
|
|
15
14
|
var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
|
|
16
15
|
var _excluded = ["auto", "behavior", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
|
|
@@ -81,7 +80,7 @@ var Slider = function Slider(_ref) {
|
|
|
81
80
|
clearTimeout(timeout);
|
|
82
81
|
timeout = setTimeout(function () {
|
|
83
82
|
return setDisabledScroll(false);
|
|
84
|
-
},
|
|
83
|
+
}, _Slider.SCROLL_DELAY);
|
|
85
84
|
onChange(index);
|
|
86
85
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
86
|
}, [index]);
|
|
@@ -119,6 +118,7 @@ var Slider = function Slider(_ref) {
|
|
|
119
118
|
})), /*#__PURE__*/_react.default.createElement(_primitives.ScrollView, {
|
|
120
119
|
behavior: behavior,
|
|
121
120
|
horizontal: true,
|
|
121
|
+
scrollEventThrottle: _Slider.SCROLL_DELAY,
|
|
122
122
|
scrollTo: index * Math.floor(width),
|
|
123
123
|
snap: true,
|
|
124
124
|
width: width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","behavior","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","SCROLL_DELAY","handleIndex","nextIndex","handleScroll","x","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","PHOTO_LIBRARY","forward","RIGHT","displayName","propTypes","PropTypes","bool","string","arrayOf","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { PRELOAD_IMAGES, SCROLL_DELAY } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n behavior = 'smooth',\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n onCounter,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(true);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n timeout = setTimeout(() => setDisabledScroll(false), SCROLL_DELAY);\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleIndex = (nextIndex) => {\n setDisabledScroll(true);\n setIndex(nextIndex);\n };\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => handleIndex(index - 1)}\n className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n >\n <Icon value={ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n behavior={behavior}\n horizontal\n scrollEventThrottle={SCROLL_DELAY}\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold small className={[style.overlay, style.text]}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n\n {images.length > 1 && onCounter && (\n <Pressable className={[style.overlay, style.counter]} onPress={onCounter}>\n <Icon action value={ICON.PHOTO_LIBRARY} />\n <Text bold small>\n {images.length}\n </Text>\n </Pressable>\n )}\n </ScrollView>\n\n <Pressable\n onPress={() => handleIndex(index + 1)}\n className={styles(\n style.button,\n (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n style.forward,\n )}\n >\n <Icon value={ICON.RIGHT} />\n </Pressable>\n </View>\n );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n auto: PropTypes.bool,\n behavior: PropTypes.string,\n captions: PropTypes.arrayOf(PropTypes.string),\n height: PropTypes.number.isRequired,\n images: PropTypes.arrayOf(PropTypes.string).isRequired,\n index: PropTypes.number,\n width: PropTypes.number.isRequired,\n onChange: PropTypes.func,\n onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _Primitive = require("../Primitive");
|
|
12
12
|
var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
|
|
13
|
-
var _excluded = ["accent", "action", "headline", "level", "lighten", "paragraph", "small", "value"];
|
|
13
|
+
var _excluded = ["accent", "action", "error", "headline", "level", "lighten", "paragraph", "small", "success", "value", "warning"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
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
16
|
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,18 +22,21 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
22
22
|
var Icon = function Icon(_ref) {
|
|
23
23
|
var accent = _ref.accent,
|
|
24
24
|
action = _ref.action,
|
|
25
|
+
error = _ref.error,
|
|
25
26
|
headline = _ref.headline,
|
|
26
27
|
_ref$level = _ref.level,
|
|
27
28
|
level = _ref$level === void 0 ? 3 : _ref$level,
|
|
28
29
|
lighten = _ref.lighten,
|
|
29
30
|
paragraph = _ref.paragraph,
|
|
30
31
|
small = _ref.small,
|
|
32
|
+
success = _ref.success,
|
|
31
33
|
value = _ref.value,
|
|
34
|
+
warning = _ref.warning,
|
|
32
35
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
33
36
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
|
|
34
37
|
role: others.role || 'icon',
|
|
35
38
|
tag: 'span',
|
|
36
|
-
className: (0, _helpers.styles)(_IconModule.default.icon, accent && _IconModule.default.accent, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], lighten && _IconModule.default.lighten, others.className)
|
|
39
|
+
className: (0, _helpers.styles)(_IconModule.default.icon, accent && _IconModule.default.accent, error && _IconModule.default.error, headline ? _IconModule.default["headline-".concat(level)] : action ? _IconModule.default.action : small ? _IconModule.default.small : paragraph ? _IconModule.default.paragraph : _IconModule.default["headline-".concat(level)], lighten && _IconModule.default.lighten, success && _IconModule.default.success, warning && _IconModule.default.warning, others.className)
|
|
37
40
|
}), value ? /*#__PURE__*/_react.default.createElement(value) : undefined);
|
|
38
41
|
};
|
|
39
42
|
exports.Icon = Icon;
|
|
@@ -41,11 +44,14 @@ Icon.displayName = 'Primitive:Icon';
|
|
|
41
44
|
Icon.propTypes = {
|
|
42
45
|
accent: _propTypes.default.bool,
|
|
43
46
|
action: _propTypes.default.bool,
|
|
47
|
+
error: _propTypes.default.bool,
|
|
44
48
|
headline: _propTypes.default.bool,
|
|
45
49
|
level: _propTypes.default.number,
|
|
46
50
|
lighten: _propTypes.default.bool,
|
|
47
51
|
paragraph: _propTypes.default.bool,
|
|
48
52
|
small: _propTypes.default.bool,
|
|
49
|
-
|
|
53
|
+
success: _propTypes.default.bool,
|
|
54
|
+
value: _propTypes.default.func.isRequired,
|
|
55
|
+
warning: _propTypes.default.bool
|
|
50
56
|
};
|
|
51
57
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["Icon","accent","action","headline","level","lighten","paragraph","small","value","others","React","createElement","Primitive","role","tag","className","styles","style","icon","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 style from './Icon.module.css';\n\nconst Icon = ({
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["Icon","accent","action","error","headline","level","lighten","paragraph","small","success","value","warning","others","React","createElement","Primitive","role","tag","className","styles","style","icon","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 style from './Icon.module.css';\n\nconst Icon = ({\n accent,\n action,\n error,\n headline,\n level = 3,\n lighten,\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 className: styles(\n style.icon,\n accent && style.accent,\n error && style.error,\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 lighten && style.lighten,\n success && style.success,\n warning && style.warning,\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 action: PropTypes.bool,\n error: PropTypes.bool,\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: 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;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IACPC,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;IACXC,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVpB,MAAM,IAAImB,mBAAK,CAACnB,MAAM,EACtBE,KAAK,IAAIiB,mBAAK,CAACjB,KAAK,EACpBC,QAAQ,GACJgB,mBAAK,oBAAaf,KAAK,EAAG,GAC1BH,MAAM,GACNkB,mBAAK,CAAClB,MAAM,GACZM,KAAK,GACLY,mBAAK,CAACZ,KAAK,GACXD,SAAS,GACTa,mBAAK,CAACb,SAAS,GACfa,mBAAK,oBAAaf,KAAK,EAAG,EAC9BC,OAAO,IAAIc,mBAAK,CAACd,OAAO,EACxBG,OAAO,IAAIW,mBAAK,CAACX,OAAO,EACxBE,OAAO,IAAIS,mBAAK,CAACT,OAAO,EACxBC,MAAM,CAACM,SAAS;EACjB,IAEHR,KAAK,gBAAGG,cAAK,CAACC,aAAa,CAACJ,KAAK,CAAC,GAAGY,SAAS,CAC/C;AAAA;AAAC;AAEJtB,IAAI,CAACuB,WAAW,GAAG,gBAAgB;AAEnCvB,IAAI,CAACwB,SAAS,GAAG;EACfvB,MAAM,EAAEwB,kBAAS,CAACC,IAAI;EACtBxB,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,QAAQ,EAAEqB,kBAAS,CAACC,IAAI;EACxBrB,KAAK,EAAEoB,kBAAS,CAACE,MAAM;EACvBrB,OAAO,EAAEmB,kBAAS,CAACC,IAAI;EACvBnB,SAAS,EAAEkB,kBAAS,CAACC,IAAI;EACzBlB,KAAK,EAAEiB,kBAAS,CAACC,IAAI;EACrBjB,OAAO,EAAEgB,kBAAS,CAACC,IAAI;EACvBhB,KAAK,EAAEe,kBAAS,CAACG,IAAI,CAACC,UAAU;EAChClB,OAAO,EAAEc,kBAAS,CAACC;AACrB,CAAC"}
|
|
@@ -6,6 +6,17 @@
|
|
|
6
6
|
color: var(--mirai-ui-accent);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.action {
|
|
10
|
+
font-size: var(--mirai-ui-font-size-action);
|
|
11
|
+
height: var(--mirai-ui-font-size-action);
|
|
12
|
+
line-height: var(--mirai-ui-font-size-action);
|
|
13
|
+
width: var(--mirai-ui-font-size-action);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.error {
|
|
17
|
+
color: var(--mirai-ui-error);
|
|
18
|
+
}
|
|
19
|
+
|
|
9
20
|
.headline-1 {
|
|
10
21
|
font-size: var(--mirai-ui-font-size-headline-1);
|
|
11
22
|
height: var(--mirai-ui-font-size-headline-1);
|
|
@@ -45,16 +56,17 @@
|
|
|
45
56
|
width: var(--mirai-ui-font-size-paragraph);
|
|
46
57
|
}
|
|
47
58
|
|
|
48
|
-
.action {
|
|
49
|
-
font-size: var(--mirai-ui-font-size-action);
|
|
50
|
-
height: var(--mirai-ui-font-size-action);
|
|
51
|
-
line-height: var(--mirai-ui-font-size-action);
|
|
52
|
-
width: var(--mirai-ui-font-size-action);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
59
|
.small {
|
|
56
60
|
font-size: var(--mirai-ui-font-size-small);
|
|
57
61
|
height: var(--mirai-ui-font-size-small);
|
|
58
62
|
line-height: var(--mirai-ui-font-size-small);
|
|
59
63
|
width: var(--mirai-ui-font-size-small);
|
|
60
64
|
}
|
|
65
|
+
|
|
66
|
+
.success {
|
|
67
|
+
color: var(--mirai-ui-success);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.warning {
|
|
71
|
+
color: var(--mirai-ui-warning);
|
|
72
|
+
}
|
|
@@ -27,12 +27,15 @@ Story.storyName = 'Icon';
|
|
|
27
27
|
Story.args = {
|
|
28
28
|
accent: false,
|
|
29
29
|
action: false,
|
|
30
|
+
error: false,
|
|
30
31
|
headline: false,
|
|
31
32
|
level: 3,
|
|
32
33
|
lighten: false,
|
|
33
34
|
paragraph: false,
|
|
34
35
|
small: false,
|
|
36
|
+
success: false,
|
|
35
37
|
value: undefined,
|
|
38
|
+
warning: false,
|
|
36
39
|
// inherited properties
|
|
37
40
|
testId: 'test-story',
|
|
38
41
|
style: {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","headline","level","lighten","paragraph","small","undefined","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 action: false,\n headline: false,\n level: 3,\n lighten: false,\n paragraph: false,\n small: false,\n value: undefined,\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,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"Icon.stories.js","names":["title","Story","value","props","ICON","storyName","args","accent","action","error","headline","level","lighten","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 action: false,\n error: false,\n headline: false,\n level: 3,\n lighten: 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,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdb,KAAK,EAAEc,SAAS;EAChBC,OAAO,EAAE,KAAK;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACflB,KAAK,EAAE;IACLmB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACnB,MAAI,CAAC;IAC1BoB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACnB,MAAI,CAAC,CAAC,CAAC;EACnC;AACF,CAAC"}
|
|
@@ -78,6 +78,32 @@ exports[`primitive:<Icon> prop:action 1`] = `
|
|
|
78
78
|
</DocumentFragment>
|
|
79
79
|
`;
|
|
80
80
|
|
|
81
|
+
exports[`primitive:<Icon> prop:error 1`] = `
|
|
82
|
+
<DocumentFragment>
|
|
83
|
+
<span
|
|
84
|
+
class="icon error 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
|
+
|
|
81
107
|
exports[`primitive:<Icon> prop:headline & level:1 1`] = `
|
|
82
108
|
<DocumentFragment>
|
|
83
109
|
<span
|
|
@@ -286,6 +312,32 @@ exports[`primitive:<Icon> prop:small 1`] = `
|
|
|
286
312
|
</DocumentFragment>
|
|
287
313
|
`;
|
|
288
314
|
|
|
315
|
+
exports[`primitive:<Icon> prop:success 1`] = `
|
|
316
|
+
<DocumentFragment>
|
|
317
|
+
<span
|
|
318
|
+
class="icon headline-3 success"
|
|
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
|
+
|
|
289
341
|
exports[`primitive:<Icon> prop:value prop:value (ADD) 1`] = `
|
|
290
342
|
<DocumentFragment>
|
|
291
343
|
<span
|
|
@@ -799,6 +851,32 @@ exports[`primitive:<Icon> prop:value prop:value (WARNING) 1`] = `
|
|
|
799
851
|
</DocumentFragment>
|
|
800
852
|
`;
|
|
801
853
|
|
|
854
|
+
exports[`primitive:<Icon> prop:warning 1`] = `
|
|
855
|
+
<DocumentFragment>
|
|
856
|
+
<span
|
|
857
|
+
class="icon headline-3 warning"
|
|
858
|
+
>
|
|
859
|
+
<svg
|
|
860
|
+
fill="currentColor"
|
|
861
|
+
height="1em"
|
|
862
|
+
stroke="currentColor"
|
|
863
|
+
stroke-width="0"
|
|
864
|
+
viewBox="0 0 24 24"
|
|
865
|
+
width="1em"
|
|
866
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
867
|
+
>
|
|
868
|
+
<path
|
|
869
|
+
d="M0 0h24v24H0V0z"
|
|
870
|
+
fill="none"
|
|
871
|
+
/>
|
|
872
|
+
<path
|
|
873
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
874
|
+
/>
|
|
875
|
+
</svg>
|
|
876
|
+
</span>
|
|
877
|
+
</DocumentFragment>
|
|
878
|
+
`;
|
|
879
|
+
|
|
802
880
|
exports[`primitive:<Icon> renders 1`] = `
|
|
803
881
|
<DocumentFragment>
|
|
804
882
|
<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", "headline", "level", "lighten", "markdown", "small", "tag", "tiny", "underline", "upperCase", "wide"];
|
|
14
|
+
var _excluded = ["accent", "action", "bold", "capitalize", "children", "error", "headline", "level", "lighten", "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; }
|
|
@@ -26,6 +26,7 @@ var Text = function Text(_ref) {
|
|
|
26
26
|
bold = _ref.bold,
|
|
27
27
|
capitalize = _ref.capitalize,
|
|
28
28
|
children = _ref.children,
|
|
29
|
+
error = _ref.error,
|
|
29
30
|
headline = _ref.headline,
|
|
30
31
|
_ref$level = _ref.level,
|
|
31
32
|
level = _ref$level === void 0 ? 3 : _ref$level,
|
|
@@ -33,16 +34,18 @@ var Text = function Text(_ref) {
|
|
|
33
34
|
_ref$markdown = _ref.markdown,
|
|
34
35
|
markdown = _ref$markdown === void 0 ? true : _ref$markdown,
|
|
35
36
|
small = _ref.small,
|
|
37
|
+
success = _ref.success,
|
|
36
38
|
tag = _ref.tag,
|
|
37
39
|
tiny = _ref.tiny,
|
|
38
40
|
underline = _ref.underline,
|
|
39
41
|
upperCase = _ref.upperCase,
|
|
42
|
+
warning = _ref.warning,
|
|
40
43
|
wide = _ref.wide,
|
|
41
44
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
42
45
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
|
|
43
46
|
role: others.role || 'text',
|
|
44
47
|
tag: tag || (headline ? "h".concat(level) : 'span'),
|
|
45
|
-
className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
48
|
+
className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, error && _TextModule.default.error, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, success && _TextModule.default.success, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, warning && _TextModule.default.warning, wide && _TextModule.default.wide, others.className)
|
|
46
49
|
}), markdown ? (0, _helpers2.parseMarkdown)(children) : children);
|
|
47
50
|
};
|
|
48
51
|
exports.Text = Text;
|
|
@@ -53,15 +56,18 @@ Text.propTypes = {
|
|
|
53
56
|
bold: _propTypes.default.bool,
|
|
54
57
|
capitalize: _propTypes.default.bool,
|
|
55
58
|
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
|
|
59
|
+
error: _propTypes.default.bool,
|
|
56
60
|
headline: _propTypes.default.bool,
|
|
57
61
|
level: _propTypes.default.number,
|
|
58
62
|
lighten: _propTypes.default.bool,
|
|
59
63
|
markdown: _propTypes.default.bool,
|
|
60
64
|
small: _propTypes.default.bool,
|
|
65
|
+
success: _propTypes.default.bool,
|
|
61
66
|
tag: _propTypes.default.string,
|
|
62
67
|
tiny: _propTypes.default.bool,
|
|
63
68
|
underline: _propTypes.default.bool,
|
|
64
69
|
upperCase: _propTypes.default.bool,
|
|
70
|
+
warning: _propTypes.default.bool,
|
|
65
71
|
wide: _propTypes.default.bool
|
|
66
72
|
};
|
|
67
73
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","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 { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n action,\n bold,\n capitalize,\n children,\n headline,\n level = 3,\n lighten,\n markdown = true,\n small,\n tag,\n tiny,\n underline,\n upperCase,\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 accent && style.accent,\n bold && style.bold,\n capitalize && style.capitalize,\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 lighten && style.lighten,\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 action: PropTypes.bool,\n bold: PropTypes.bool,\n capitalize: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: PropTypes.bool,\n markdown: PropTypes.bool,\n small: PropTypes.bool,\n tag: PropTypes.string,\n tiny: PropTypes.bool,\n underline: PropTypes.bool,\n upperCase: PropTypes.bool,\n wide: PropTypes.bool,\n};\n\nexport { Text };\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,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;
|
|
1
|
+
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","error","headline","level","lighten","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","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 { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n action,\n bold,\n capitalize,\n children,\n error,\n headline,\n level = 3,\n lighten,\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 accent && style.accent,\n bold && style.bold,\n capitalize && style.capitalize,\n error && style.error,\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 lighten && style.lighten,\n success && style.success,\n underline && style.underline,\n upperCase && style.upperCase,\n warning && style.warning,\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 action: PropTypes.bool,\n bold: PropTypes.bool,\n capitalize: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n error: PropTypes.bool,\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: 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,6 +13,15 @@
|
|
|
13
13
|
-moz-osx-font-smoothing: grayscale;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
.accent {
|
|
17
|
+
color: var(--mirai-ui-accent);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.action {
|
|
21
|
+
font-size: var(--mirai-ui-font-size-action);
|
|
22
|
+
line-height: var(--mirai-ui-line-height-action);
|
|
23
|
+
}
|
|
24
|
+
|
|
16
25
|
.bold {
|
|
17
26
|
font-family: var(--mirai-ui-font-bold);
|
|
18
27
|
font-weight: var(--mirai-ui-font-bold-weight);
|
|
@@ -26,6 +35,10 @@
|
|
|
26
35
|
text-transform: uppercase;
|
|
27
36
|
}
|
|
28
37
|
|
|
38
|
+
.error {
|
|
39
|
+
color: var(--mirai-ui-error);
|
|
40
|
+
}
|
|
41
|
+
|
|
29
42
|
.headline-1 {
|
|
30
43
|
font-size: var(--mirai-ui-font-size-headline-1);
|
|
31
44
|
line-height: var(--mirai-ui-line-height-headline-1);
|
|
@@ -51,15 +64,6 @@
|
|
|
51
64
|
line-height: var(--mirai-ui-line-height-paragraph);
|
|
52
65
|
}
|
|
53
66
|
|
|
54
|
-
.accent {
|
|
55
|
-
color: var(--mirai-ui-accent);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.action {
|
|
59
|
-
font-size: var(--mirai-ui-font-size-action);
|
|
60
|
-
line-height: var(--mirai-ui-line-height-action);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
67
|
.lighten {
|
|
64
68
|
color: var(--mirai-ui-content-light);
|
|
65
69
|
}
|
|
@@ -69,6 +73,10 @@
|
|
|
69
73
|
line-height: var(--mirai-ui-line-height-small);
|
|
70
74
|
}
|
|
71
75
|
|
|
76
|
+
.success {
|
|
77
|
+
color: var(--mirai-ui-success);
|
|
78
|
+
}
|
|
79
|
+
|
|
72
80
|
.tiny {
|
|
73
81
|
font-size: var(--mirai-ui-font-size-tiny);
|
|
74
82
|
line-height: var(--mirai-ui-line-height-tiny);
|
|
@@ -82,6 +90,10 @@
|
|
|
82
90
|
text-transform: uppercase;
|
|
83
91
|
}
|
|
84
92
|
|
|
93
|
+
.warning {
|
|
94
|
+
color: var(--mirai-ui-warning);
|
|
95
|
+
}
|
|
96
|
+
|
|
85
97
|
.wide {
|
|
86
98
|
width: 100%;
|
|
87
99
|
}
|
|
@@ -31,14 +31,17 @@ Story.args = {
|
|
|
31
31
|
capitalize: false,
|
|
32
32
|
children: 'children',
|
|
33
33
|
childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
|
|
34
|
+
error: false,
|
|
34
35
|
headline: false,
|
|
35
36
|
level: 3,
|
|
36
37
|
lighten: false,
|
|
37
38
|
small: false,
|
|
39
|
+
success: false,
|
|
38
40
|
tag: 'span',
|
|
39
41
|
tiny: false,
|
|
40
42
|
underline: false,
|
|
41
43
|
upperCase: false,
|
|
44
|
+
warning: false,
|
|
42
45
|
wide: false,
|
|
43
46
|
// inherited properties
|
|
44
47
|
testId: 'test-story',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","headline","level","lighten","small","tag","tiny","underline","upperCase","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 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 headline: false,\n level: 3,\n lighten: false,\n small: false,\n tag: 'span',\n tiny: false,\n underline: false,\n upperCase: 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,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","error","headline","level","lighten","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 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 error: false,\n headline: false,\n level: 3,\n lighten: 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,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,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;AAEDvB,KAAK,CAACwB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -50,6 +50,16 @@ exports[`primitive:<Text> prop:capitalize 1`] = `
|
|
|
50
50
|
</DocumentFragment>
|
|
51
51
|
`;
|
|
52
52
|
|
|
53
|
+
exports[`primitive:<Text> prop:error 1`] = `
|
|
54
|
+
<DocumentFragment>
|
|
55
|
+
<span
|
|
56
|
+
class="text error paragraph"
|
|
57
|
+
>
|
|
58
|
+
Lorem Ipsum
|
|
59
|
+
</span>
|
|
60
|
+
</DocumentFragment>
|
|
61
|
+
`;
|
|
62
|
+
|
|
53
63
|
exports[`primitive:<Text> prop:headline & level:1 1`] = `
|
|
54
64
|
<DocumentFragment>
|
|
55
65
|
<h1
|
|
@@ -140,6 +150,16 @@ exports[`primitive:<Text> prop:small 1`] = `
|
|
|
140
150
|
</DocumentFragment>
|
|
141
151
|
`;
|
|
142
152
|
|
|
153
|
+
exports[`primitive:<Text> prop:success 1`] = `
|
|
154
|
+
<DocumentFragment>
|
|
155
|
+
<span
|
|
156
|
+
class="text paragraph success"
|
|
157
|
+
>
|
|
158
|
+
Lorem Ipsum
|
|
159
|
+
</span>
|
|
160
|
+
</DocumentFragment>
|
|
161
|
+
`;
|
|
162
|
+
|
|
143
163
|
exports[`primitive:<Text> prop:tag 1`] = `
|
|
144
164
|
<DocumentFragment>
|
|
145
165
|
<p
|
|
@@ -180,6 +200,16 @@ exports[`primitive:<Text> prop:upperCase 1`] = `
|
|
|
180
200
|
</DocumentFragment>
|
|
181
201
|
`;
|
|
182
202
|
|
|
203
|
+
exports[`primitive:<Text> prop:warning 1`] = `
|
|
204
|
+
<DocumentFragment>
|
|
205
|
+
<span
|
|
206
|
+
class="text paragraph warning"
|
|
207
|
+
>
|
|
208
|
+
Lorem Ipsum
|
|
209
|
+
</span>
|
|
210
|
+
</DocumentFragment>
|
|
211
|
+
`;
|
|
212
|
+
|
|
183
213
|
exports[`primitive:<Text> prop:wide 1`] = `
|
|
184
214
|
<DocumentFragment>
|
|
185
215
|
<span
|