@mirai/ui 1.0.241 → 1.0.243
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 +4 -3
- package/build/components/Slider/Slider.js +16 -5
- package/build/components/Slider/Slider.js.map +1 -1
- package/build/components/Slider/Slider.module.css +28 -6
- package/build/components/Slider/Slider.stories.js +2 -2
- package/build/components/Slider/Slider.stories.js.map +1 -1
- package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +148 -5
- package/build/primitives/Icon/Icon.constants.js +3 -0
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +26 -0
- package/build/theme/default.theme.css +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1054,7 +1054,7 @@ A Slider component receiving the following props:
|
|
|
1054
1054
|
- `thumbnails:arrayOf:string` if you want use thumbnails of images in fullScreen mode.
|
|
1055
1055
|
- `width:number` width of component (required).
|
|
1056
1056
|
- `onChange:function` executed when image (index) is visible
|
|
1057
|
-
- `
|
|
1057
|
+
- `onCounter:function` show a pressable counter
|
|
1058
1058
|
|
|
1059
1059
|
```jsx
|
|
1060
1060
|
import { Slider } from '@mirai/ui';
|
|
@@ -1068,9 +1068,10 @@ const MyComponent = (props) => {
|
|
|
1068
1068
|
**Theming variables**
|
|
1069
1069
|
|
|
1070
1070
|
```css
|
|
1071
|
-
--mirai-ui-slider-
|
|
1071
|
+
--mirai-ui-slider-button: var(--mirai-ui-base);
|
|
1072
|
+
--mirai-ui-slider-button-icon: var(--mirai-ui-content);
|
|
1072
1073
|
--mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
|
|
1073
|
-
--mirai-ui-slider-color: var(--mirai-ui-base);
|
|
1074
|
+
--mirai-ui-slider-overlay-color: var(--mirai-ui-base);
|
|
1074
1075
|
--mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
|
|
1075
1076
|
```
|
|
1076
1077
|
|
|
@@ -13,7 +13,7 @@ var _primitives = require("../../primitives");
|
|
|
13
13
|
var _helpers2 = require("./helpers");
|
|
14
14
|
var _Slider = require("./Slider.constants");
|
|
15
15
|
var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
|
|
16
|
-
var _excluded = ["auto", "captions", "height", "images", "index", "width", "onChange"];
|
|
16
|
+
var _excluded = ["auto", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
|
|
17
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -48,6 +48,7 @@ var Slider = function Slider(_ref) {
|
|
|
48
48
|
propWidth = _ref$width === void 0 ? 320 : _ref$width,
|
|
49
49
|
_ref$onChange = _ref.onChange,
|
|
50
50
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
51
|
+
onCounter = _ref.onCounter,
|
|
51
52
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
52
53
|
var _useDevice = (0, _hooks.useDevice)(),
|
|
53
54
|
isDesktop = _useDevice.isDesktop;
|
|
@@ -79,7 +80,7 @@ var Slider = function Slider(_ref) {
|
|
|
79
80
|
setDisabledScroll(true);
|
|
80
81
|
timeout = setTimeout(function () {
|
|
81
82
|
return setDisabledScroll(false);
|
|
82
|
-
}, (0, _helpers2.getMotionExpand)());
|
|
83
|
+
}, (0, _helpers2.getMotionExpand)() * 2);
|
|
83
84
|
onChange(index);
|
|
84
85
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
85
86
|
}, [index]);
|
|
@@ -134,9 +135,18 @@ var Slider = function Slider(_ref) {
|
|
|
134
135
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
135
136
|
bold: true,
|
|
136
137
|
small: true,
|
|
137
|
-
className: _SliderModule.default.text
|
|
138
|
+
className: [_SliderModule.default.overlay, _SliderModule.default.text]
|
|
138
139
|
}, captions[imageIndex])));
|
|
139
|
-
})
|
|
140
|
+
}), images.length > 1 && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
141
|
+
className: [_SliderModule.default.overlay, _SliderModule.default.counter],
|
|
142
|
+
onPress: onCounter
|
|
143
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
144
|
+
action: true,
|
|
145
|
+
value: _primitives.ICON.PHOTO_LIBRARY
|
|
146
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
147
|
+
bold: true,
|
|
148
|
+
small: true
|
|
149
|
+
}, images.length))), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
140
150
|
onPress: function onPress() {
|
|
141
151
|
return setIndex(index + 1);
|
|
142
152
|
},
|
|
@@ -154,6 +164,7 @@ Slider.propTypes = {
|
|
|
154
164
|
images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
|
|
155
165
|
index: _propTypes.default.number,
|
|
156
166
|
width: _propTypes.default.number.isRequired,
|
|
157
|
-
onChange: _propTypes.default.func
|
|
167
|
+
onChange: _propTypes.default.func,
|
|
168
|
+
onCounter: _propTypes.default.func
|
|
158
169
|
};
|
|
159
170
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","text","forward","RIGHT","displayName","propTypes","PropTypes","bool","arrayOf","string","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 { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(false);\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 setDisabledScroll(true);\n timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand());\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 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={() => setIndex(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 horizontal\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.text}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n </ScrollView>\n\n <Pressable\n onPress={() => setIndex(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 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};\n\nexport { Slider };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAIA,QAAQ;AACZ,IAAIC,OAAO;AAEX,IAAMC,MAAM,GAAG,SAATA,MAAM,
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","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","getMotionExpand","handleScroll","x","nextIndex","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","arrayOf","string","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 { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\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(false);\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 setDisabledScroll(true);\n timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand() * 2);\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 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={() => setIndex(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 horizontal\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={() => setIndex(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 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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"}
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
.button {
|
|
9
9
|
align-items: center;
|
|
10
|
-
background-color: var(--mirai-ui-slider-
|
|
10
|
+
background-color: var(--mirai-ui-slider-button);
|
|
11
11
|
border-radius: 50%;
|
|
12
|
+
box-shadow: var(--mirai-ui-modal-shadow);
|
|
12
13
|
display: flex;
|
|
13
14
|
height: var(--mirai-ui-button-squared);
|
|
14
15
|
justify-content: center;
|
|
@@ -23,16 +24,16 @@
|
|
|
23
24
|
transform: scale(0);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
.button >
|
|
27
|
-
color: var(--mirai-ui-slider-
|
|
27
|
+
.button > [data-role='icon'] {
|
|
28
|
+
color: var(--mirai-ui-slider-button-icon);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.button.back {
|
|
31
|
-
left: var(--mirai-ui-space-
|
|
32
|
+
left: var(--mirai-ui-space-S);
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
.button.forward {
|
|
35
|
-
right: var(--mirai-ui-space-
|
|
36
|
+
right: var(--mirai-ui-space-S);
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
.item {
|
|
@@ -56,12 +57,33 @@
|
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
.item .caption .text {
|
|
60
|
+
color: var(--mirai-ui-slider-overlay-color);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.counter {
|
|
64
|
+
align-items: center;
|
|
65
|
+
bottom: var(--mirai-ui-space-S);
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
gap: calc(var(--mirai-ui-space-XS) / 2);
|
|
69
|
+
position: absolute;
|
|
70
|
+
right: var(--mirai-ui-space-S);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.counter [data-role] {
|
|
74
|
+
color: var(--mirai-ui-slider-color);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.overlay {
|
|
59
78
|
background-color: var(--mirai-ui-slider-overlay);
|
|
60
79
|
border-radius: var(--mirai-ui-slider-border-radius);
|
|
61
|
-
color: var(--mirai-ui-slider-color);
|
|
62
80
|
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
|
|
63
81
|
}
|
|
64
82
|
|
|
83
|
+
.overlay [data-role] {
|
|
84
|
+
color: var(--mirai-ui-slider-overlay-color);
|
|
85
|
+
}
|
|
86
|
+
|
|
65
87
|
/* S */
|
|
66
88
|
@media only screen and (max-width: 430px) {
|
|
67
89
|
}
|
|
@@ -22,12 +22,12 @@ var Story = function Story(props) {
|
|
|
22
22
|
}
|
|
23
23
|
return (_console = console).log.apply(_console, ['onChange'].concat(params));
|
|
24
24
|
},
|
|
25
|
-
|
|
25
|
+
onCounter: function onCounter() {
|
|
26
26
|
var _console2;
|
|
27
27
|
for (var _len2 = arguments.length, params = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
28
28
|
params[_key2] = arguments[_key2];
|
|
29
29
|
}
|
|
30
|
-
return (_console2 = console).log.apply(_console2, ['
|
|
30
|
+
return (_console2 = console).log.apply(_console2, ['onCounter'].concat(params));
|
|
31
31
|
}
|
|
32
32
|
}));
|
|
33
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n
|
|
1
|
+
{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n onCounter={(...params) => console.log('onCounter', ...params)}\n />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n auto: false,\n captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n height: 200,\n index: 1,\n images: [\n 'https://picsum.photos/seed/@soyjavi/1024/768',\n 'https://picsum.photos/seed/@jose/1024/768',\n 'https://picsum.photos/seed/@mario1/1024/768',\n 'https://picsum.photos/seed/@victor/1024/768',\n 'https://picsum.photos/seed/@svet/1024/768',\n 'https://picsum.photos/seed/@mario2/1024/768',\n 'https://picsum.photos/seed/1/1024/768',\n 'https://picsum.photos/seed/2/1024/768',\n 'https://picsum.photos/seed/3/1024/768',\n 'https://picsum.photos/seed/4/1024/768',\n 'https://picsum.photos/seed/5/1024/768',\n 'https://picsum.photos/seed/6/1024/768',\n 'https://picsum.photos/seed/7/1024/768',\n 'https://picsum.photos/seed/8/1024/768',\n 'https://picsum.photos/seed/9/1024/768',\n 'https://picsum.photos/seed/10/1024/768',\n 'https://picsum.photos/seed/11/1024/768',\n 'https://picsum.photos/seed/12/1024/768',\n ],\n fullScreen: false,\n thumbnails: [\n 'https://picsum.photos/seed/@soyjavi/128/128',\n 'https://picsum.photos/seed/@jose/128/128',\n 'https://picsum.photos/seed/@mario1/128/128',\n 'https://picsum.photos/seed/@victor/128/128',\n 'https://picsum.photos/seed/@svet/128/128',\n 'https://picsum.photos/seed/@mario2/128/128',\n 'https://picsum.photos/seed/1/128/128',\n 'https://picsum.photos/seed/2/128/128',\n 'https://picsum.photos/seed/3/128/128',\n 'https://picsum.photos/seed/4/128/128',\n 'https://picsum.photos/seed/5/128/128',\n 'https://picsum.photos/seed/6/128/128',\n 'https://picsum.photos/seed/7/128/128',\n 'https://picsum.photos/seed/8/128/128',\n 'https://picsum.photos/seed/9/128/128',\n 'https://picsum.photos/seed/10/128/128',\n 'https://picsum.photos/seed/11/128/128',\n 'https://picsum.photos/seed/12/128/128',\n ],\n width: 320,\n // inherited properties\n testId: 'test-story',\n style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -272,7 +272,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
272
272
|
class="view caption"
|
|
273
273
|
>
|
|
274
274
|
<span
|
|
275
|
-
class="text bold small text"
|
|
275
|
+
class="text bold small overlay text"
|
|
276
276
|
>
|
|
277
277
|
javi
|
|
278
278
|
</span>
|
|
@@ -289,7 +289,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
289
289
|
class="view caption"
|
|
290
290
|
>
|
|
291
291
|
<span
|
|
292
|
-
class="text bold small text"
|
|
292
|
+
class="text bold small overlay text"
|
|
293
293
|
>
|
|
294
294
|
jose
|
|
295
295
|
</span>
|
|
@@ -314,7 +314,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
314
314
|
class="view caption"
|
|
315
315
|
>
|
|
316
316
|
<span
|
|
317
|
-
class="text bold small text"
|
|
317
|
+
class="text bold small overlay text"
|
|
318
318
|
>
|
|
319
319
|
victor
|
|
320
320
|
</span>
|
|
@@ -331,7 +331,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
331
331
|
class="view caption"
|
|
332
332
|
>
|
|
333
333
|
<span
|
|
334
|
-
class="text bold small text"
|
|
334
|
+
class="text bold small overlay text"
|
|
335
335
|
>
|
|
336
336
|
svet
|
|
337
337
|
</span>
|
|
@@ -348,7 +348,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
348
348
|
class="view caption"
|
|
349
349
|
>
|
|
350
350
|
<span
|
|
351
|
-
class="text bold small text"
|
|
351
|
+
class="text bold small overlay text"
|
|
352
352
|
>
|
|
353
353
|
mario2
|
|
354
354
|
</span>
|
|
@@ -497,6 +497,149 @@ exports[`component:<Slider> prop:index 1`] = `
|
|
|
497
497
|
</DocumentFragment>
|
|
498
498
|
`;
|
|
499
499
|
|
|
500
|
+
exports[`component:<Slider> prop:onCounter 1`] = `
|
|
501
|
+
<DocumentFragment>
|
|
502
|
+
<div
|
|
503
|
+
class="view container"
|
|
504
|
+
style="width: 360px;"
|
|
505
|
+
>
|
|
506
|
+
<div
|
|
507
|
+
class="pressable button hide back"
|
|
508
|
+
>
|
|
509
|
+
<span
|
|
510
|
+
class="icon headline-3"
|
|
511
|
+
>
|
|
512
|
+
<svg
|
|
513
|
+
fill="currentColor"
|
|
514
|
+
height="1em"
|
|
515
|
+
stroke="currentColor"
|
|
516
|
+
stroke-width="0"
|
|
517
|
+
viewBox="0 0 24 24"
|
|
518
|
+
width="1em"
|
|
519
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
520
|
+
>
|
|
521
|
+
<path
|
|
522
|
+
d="M0 0h24v24H0V0z"
|
|
523
|
+
fill="none"
|
|
524
|
+
/>
|
|
525
|
+
<path
|
|
526
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
527
|
+
/>
|
|
528
|
+
</svg>
|
|
529
|
+
</span>
|
|
530
|
+
</div>
|
|
531
|
+
<div
|
|
532
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
533
|
+
style="width: 360px;"
|
|
534
|
+
>
|
|
535
|
+
<div
|
|
536
|
+
class="view item"
|
|
537
|
+
>
|
|
538
|
+
<div
|
|
539
|
+
class="view image"
|
|
540
|
+
style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
|
|
541
|
+
/>
|
|
542
|
+
</div>
|
|
543
|
+
<div
|
|
544
|
+
class="view item"
|
|
545
|
+
>
|
|
546
|
+
<div
|
|
547
|
+
class="view image"
|
|
548
|
+
style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
|
|
549
|
+
/>
|
|
550
|
+
</div>
|
|
551
|
+
<div
|
|
552
|
+
class="view item"
|
|
553
|
+
>
|
|
554
|
+
<div
|
|
555
|
+
class="view image"
|
|
556
|
+
style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
|
|
557
|
+
/>
|
|
558
|
+
</div>
|
|
559
|
+
<div
|
|
560
|
+
class="view item"
|
|
561
|
+
>
|
|
562
|
+
<div
|
|
563
|
+
class="view image"
|
|
564
|
+
style="height: 230px; width: 360px;"
|
|
565
|
+
/>
|
|
566
|
+
</div>
|
|
567
|
+
<div
|
|
568
|
+
class="view item"
|
|
569
|
+
>
|
|
570
|
+
<div
|
|
571
|
+
class="view image"
|
|
572
|
+
style="height: 230px; width: 360px;"
|
|
573
|
+
/>
|
|
574
|
+
</div>
|
|
575
|
+
<div
|
|
576
|
+
class="view item"
|
|
577
|
+
>
|
|
578
|
+
<div
|
|
579
|
+
class="view image"
|
|
580
|
+
style="height: 230px; width: 360px;"
|
|
581
|
+
/>
|
|
582
|
+
</div>
|
|
583
|
+
<div
|
|
584
|
+
class="pressable overlay counter"
|
|
585
|
+
>
|
|
586
|
+
<span
|
|
587
|
+
class="icon action"
|
|
588
|
+
>
|
|
589
|
+
<svg
|
|
590
|
+
fill="currentColor"
|
|
591
|
+
height="1em"
|
|
592
|
+
stroke="currentColor"
|
|
593
|
+
stroke-width="0"
|
|
594
|
+
viewBox="0 0 24 24"
|
|
595
|
+
width="1em"
|
|
596
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
597
|
+
>
|
|
598
|
+
<path
|
|
599
|
+
d="M0 0h24v24H0V0z"
|
|
600
|
+
fill="none"
|
|
601
|
+
/>
|
|
602
|
+
<path
|
|
603
|
+
d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
|
|
604
|
+
/>
|
|
605
|
+
</svg>
|
|
606
|
+
</span>
|
|
607
|
+
<span
|
|
608
|
+
class="text bold small"
|
|
609
|
+
>
|
|
610
|
+
6
|
|
611
|
+
</span>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div
|
|
615
|
+
class="pressable button hide forward"
|
|
616
|
+
>
|
|
617
|
+
<span
|
|
618
|
+
class="icon headline-3"
|
|
619
|
+
>
|
|
620
|
+
<svg
|
|
621
|
+
fill="currentColor"
|
|
622
|
+
height="1em"
|
|
623
|
+
stroke="currentColor"
|
|
624
|
+
stroke-width="0"
|
|
625
|
+
viewBox="0 0 24 24"
|
|
626
|
+
width="1em"
|
|
627
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
628
|
+
>
|
|
629
|
+
<path
|
|
630
|
+
d="M0 0h24v24H0V0z"
|
|
631
|
+
fill="none"
|
|
632
|
+
/>
|
|
633
|
+
<path
|
|
634
|
+
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
|
|
635
|
+
/>
|
|
636
|
+
</svg>
|
|
637
|
+
</span>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</DocumentFragment>
|
|
641
|
+
`;
|
|
642
|
+
|
|
500
643
|
exports[`component:<Slider> renders 1`] = `
|
|
501
644
|
<DocumentFragment>
|
|
502
645
|
<div
|
|
@@ -18,6 +18,7 @@ var _MdOutlineExpandLess = require("@react-icons/all-files/md/MdOutlineExpandLes
|
|
|
18
18
|
var _MdOutlineExpandMore = require("@react-icons/all-files/md/MdOutlineExpandMore");
|
|
19
19
|
var _MdOutlineFilterList = require("@react-icons/all-files/md/MdOutlineFilterList");
|
|
20
20
|
var _MdOutlineInfo = require("@react-icons/all-files/md/MdOutlineInfo");
|
|
21
|
+
var _MdOutlinePhotoLibrary = require("@react-icons/all-files/md/MdOutlinePhotoLibrary");
|
|
21
22
|
var _MdOutlineRemove = require("@react-icons/all-files/md/MdOutlineRemove");
|
|
22
23
|
var _MdOutlineSearch = require("@react-icons/all-files/md/MdOutlineSearch");
|
|
23
24
|
var _MdOutlineVisibility = require("@react-icons/all-files/md/MdOutlineVisibility");
|
|
@@ -48,6 +49,8 @@ var ICON = {
|
|
|
48
49
|
INFO: _MdOutlineInfo.MdOutlineInfo,
|
|
49
50
|
SUCCESS: _MdOutlineCheckCircle.MdOutlineCheckCircle,
|
|
50
51
|
WARNING: _MdOutlineWarningAmber.MdOutlineWarningAmber,
|
|
52
|
+
// <Slider>
|
|
53
|
+
PHOTO_LIBRARY: _MdOutlinePhotoLibrary.MdOutlinePhotoLibrary,
|
|
51
54
|
// <Table>
|
|
52
55
|
FILTER: _MdOutlineFilterList.MdOutlineFilterList,
|
|
53
56
|
// Filetype
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineCheckCircle as SUCCESS } from '@react-icons/all-files/md/MdOutlineCheckCircle';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
|
|
1
|
+
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","PHOTO_LIBRARY","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineCheckCircle as SUCCESS } from '@react-icons/all-files/md/MdOutlineCheckCircle';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlinePhotoLibrary as PHOTO_LIBRARY } from '@react-icons/all-files/md/MdOutlinePhotoLibrary';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Slider>\n PHOTO_LIBRARY,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,aAAa,EAAbA,4CAAa;EACb;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
|
|
@@ -569,6 +569,32 @@ exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
|
|
|
569
569
|
</DocumentFragment>
|
|
570
570
|
`;
|
|
571
571
|
|
|
572
|
+
exports[`primitive:<Icon> prop:value prop:value (PHOTO_LIBRARY) 1`] = `
|
|
573
|
+
<DocumentFragment>
|
|
574
|
+
<span
|
|
575
|
+
class="icon headline-3"
|
|
576
|
+
>
|
|
577
|
+
<svg
|
|
578
|
+
fill="currentColor"
|
|
579
|
+
height="1em"
|
|
580
|
+
stroke="currentColor"
|
|
581
|
+
stroke-width="0"
|
|
582
|
+
viewBox="0 0 24 24"
|
|
583
|
+
width="1em"
|
|
584
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
585
|
+
>
|
|
586
|
+
<path
|
|
587
|
+
d="M0 0h24v24H0V0z"
|
|
588
|
+
fill="none"
|
|
589
|
+
/>
|
|
590
|
+
<path
|
|
591
|
+
d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
|
|
592
|
+
/>
|
|
593
|
+
</svg>
|
|
594
|
+
</span>
|
|
595
|
+
</DocumentFragment>
|
|
596
|
+
`;
|
|
597
|
+
|
|
572
598
|
exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
|
|
573
599
|
<DocumentFragment>
|
|
574
600
|
<span
|
|
@@ -252,9 +252,10 @@
|
|
|
252
252
|
--mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
|
|
253
253
|
|
|
254
254
|
/* Slider */
|
|
255
|
-
--mirai-ui-slider-
|
|
255
|
+
--mirai-ui-slider-button: var(--mirai-ui-base);
|
|
256
|
+
--mirai-ui-slider-button-icon: var(--mirai-ui-content);
|
|
256
257
|
--mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
|
|
257
|
-
--mirai-ui-slider-color: var(--mirai-ui-base);
|
|
258
|
+
--mirai-ui-slider-overlay-color: var(--mirai-ui-base);
|
|
258
259
|
--mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
|
|
259
260
|
|
|
260
261
|
/* Table */
|