@mirai/ui 1.0.59 → 1.0.60
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 +41 -6
- package/build/components/Button/Button.module.css +4 -4
- package/build/components/Calendar/Calendar.Month.js +0 -4
- package/build/components/Calendar/Calendar.Month.js.map +1 -1
- package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +240 -360
- package/build/components/InputNumber/InputNumber.js +2 -2
- package/build/components/InputNumber/InputNumber.js.map +1 -1
- package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +180 -260
- package/build/components/InputOption/InputOption.js +6 -4
- package/build/components/InputOption/InputOption.js.map +1 -1
- package/build/components/InputOption/InputOption.module.css +2 -1
- package/build/components/InputOption/InputOption.stories.js +1 -0
- package/build/components/InputOption/InputOption.stories.js.map +1 -1
- package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +103 -14
- 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 +71 -54
- package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +20 -39
- package/build/components/Menu/Menu.stories.js +2 -2
- package/build/components/Menu/Menu.stories.js.map +1 -1
- package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +17 -31
- package/build/components/Modal/Modal.js +1 -1
- package/build/components/Modal/Modal.js.map +1 -1
- package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +28 -26
- package/build/components/Notification/Notification.js +10 -13
- package/build/components/Notification/Notification.js.map +1 -1
- package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap +58 -73
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +200 -300
- package/build/primitives/Icon/Icon.constants.js +30 -30
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/Icon.js +4 -2
- package/build/primitives/Icon/Icon.js.map +1 -1
- package/build/primitives/Icon/Icon.stories.js +13 -1
- package/build/primitives/Icon/Icon.stories.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +33 -52
- package/build/primitives/Switch/Switch.module.css +7 -0
- package/build/theme/default.theme.css +15 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ const MyComponent = () => (
|
|
|
40
40
|
|
|
41
41
|
### Icon
|
|
42
42
|
|
|
43
|
-
This primitive returns a span with an icon based on a mandatory string prop `name
|
|
43
|
+
This primitive returns a span with an icon based on a mandatory string prop `name`.
|
|
44
44
|
|
|
45
45
|
```jsx
|
|
46
46
|
import { Icon, View } from '@mirai/ui';
|
|
@@ -52,7 +52,7 @@ const MyComponent = () => (
|
|
|
52
52
|
);
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
> ℹ️ Current available names:
|
|
55
|
+
> ℹ️ Current available names: Left, Right, Up, Down, Check, Add, Remove, ExpandLess, ExpandMore, EyeOpen, EyeClose, Close, Error, Info, Success, Warning, List, Lock, Bed, Calendar, Person, Account.
|
|
56
56
|
|
|
57
57
|
### Input
|
|
58
58
|
|
|
@@ -197,6 +197,40 @@ const MyComponent = () => (
|
|
|
197
197
|
--mirai-ui-radio-size: var(--mirai-ui-space-L);
|
|
198
198
|
```
|
|
199
199
|
|
|
200
|
+
### Switch
|
|
201
|
+
|
|
202
|
+
This primitive returns a _mobile_ checkbox button based on the following properties:
|
|
203
|
+
|
|
204
|
+
- `checked:boolean` if true, the checkbox button is checked
|
|
205
|
+
- `disabled:boolean` applying 'disabled' attribute
|
|
206
|
+
- `name:string` input name (required)
|
|
207
|
+
- `onChange:function` executed when input value changes
|
|
208
|
+
|
|
209
|
+
```jsx
|
|
210
|
+
import { Switch } from '@mirai/ui';
|
|
211
|
+
|
|
212
|
+
const MyComponent = () => (
|
|
213
|
+
<Switch
|
|
214
|
+
name="checkbox"
|
|
215
|
+
checked={false}
|
|
216
|
+
disabled={false}
|
|
217
|
+
onChange={() => console.log('change')}
|
|
218
|
+
/>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
**Theming variables**
|
|
222
|
+
|
|
223
|
+
```css
|
|
224
|
+
--mirai-ui-switch-base: var(--mirai-ui-base);
|
|
225
|
+
--mirai-ui-switch-border-color: var(--mirai-ui-content-light);
|
|
226
|
+
--mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
|
|
227
|
+
--mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
|
|
228
|
+
--mirai-ui-switch-checked: var(--mirai-ui-accent);
|
|
229
|
+
--mirai-ui-switch-disabled: var(--mirai-ui-content-border);
|
|
230
|
+
--mirai-ui-switch-color-hover: var(--mirai-ui-content);
|
|
231
|
+
--mirai-ui-switch-size: var(--mirai-ui-space-L);
|
|
232
|
+
```
|
|
233
|
+
|
|
200
234
|
### ScrollView
|
|
201
235
|
|
|
202
236
|
This primitive is used to make vertically scrollable views and receives the following props:
|
|
@@ -315,7 +349,7 @@ const MyComponent = (props) => {
|
|
|
315
349
|
--mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
|
|
316
350
|
--mirai-ui-button-color: var(--mirai-ui-base);
|
|
317
351
|
--mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
|
|
318
|
-
--mirai-ui-button-color-
|
|
352
|
+
--mirai-ui-button-color-hover: var(--mirai-ui-content);
|
|
319
353
|
--mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
|
|
320
354
|
--mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
|
|
321
355
|
--mirai-ui-button-font: var(--mirai-ui-font);
|
|
@@ -426,6 +460,7 @@ This component is used to display a radio button or checkbox base on a mandatory
|
|
|
426
460
|
|
|
427
461
|
- `checked:boolean` if true, the input is checked
|
|
428
462
|
- `disabled:boolean` applying 'disabled' attribute
|
|
463
|
+
- `indeterminate:boolean` applying 'indeterminate' attribute (only for type checkbox)
|
|
429
464
|
- `label:string` input label
|
|
430
465
|
- `name:string` input name
|
|
431
466
|
- `reverse:boolean` if true the label is placed on the left side of the input element (false by default)
|
|
@@ -559,15 +594,15 @@ const MyComponent = () => {
|
|
|
559
594
|
<Menu
|
|
560
595
|
options={[
|
|
561
596
|
{ icon: 'EyeOpen', label: 'Show results', value: 1 },
|
|
562
|
-
{ icon: '
|
|
563
|
-
{ icon: '
|
|
597
|
+
{ icon: 'Add', label: 'Add item', disabled: true, value: 2 },
|
|
598
|
+
{ icon: 'Remove', label: 'Remove item', divider: true, value: 'three' },
|
|
564
599
|
{ label: 'Using child', children: <Button small>Add</Button>, value: 'four' },
|
|
565
600
|
]}
|
|
566
601
|
visible={visible}
|
|
567
602
|
onPress={(value, event) => console.log('<Menu>::onPress', value, event)}
|
|
568
603
|
>
|
|
569
604
|
<Button squared secondary onPress={() => setVisible(!visible)}>
|
|
570
|
-
<Icon name="
|
|
605
|
+
<Icon name="Add" />
|
|
571
606
|
</Button>
|
|
572
607
|
</Menu>;
|
|
573
608
|
};
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.large:not(.squared) {
|
|
64
|
-
font-size: var(--mirai-ui-font-size-
|
|
64
|
+
font-size: var(--mirai-ui-font-size-paragraph);
|
|
65
65
|
padding: var(--mirai-ui-button-padding-y)
|
|
66
66
|
calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
|
|
67
67
|
}
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.rounded {
|
|
80
|
-
border-radius:
|
|
80
|
+
border-radius: var(--mirai-ui-space-XXL);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.small:not(.squared) {
|
|
@@ -98,11 +98,11 @@
|
|
|
98
98
|
|
|
99
99
|
@media only screen and (min-width: 600px) {
|
|
100
100
|
.button:not(:disabled).secondary:hover:not(:active) {
|
|
101
|
-
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-color-
|
|
101
|
+
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-color-hover);
|
|
102
102
|
color: var(--mirai-ui-button-color-focus);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.button:not(:disabled):not(.secondary):hover {
|
|
106
|
-
background-color: var(--mirai-ui-button-color-
|
|
106
|
+
background-color: var(--mirai-ui-button-color-hover);
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -74,8 +74,6 @@ var Month = function Month(_ref) {
|
|
|
74
74
|
onPress: onPrevious,
|
|
75
75
|
"data-testid": testID ? "".concat(testID, "-previous") : undefined
|
|
76
76
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
77
|
-
headline: true,
|
|
78
|
-
level: 4,
|
|
79
77
|
name: "Left"
|
|
80
78
|
})), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
81
79
|
headline: true,
|
|
@@ -86,8 +84,6 @@ var Month = function Month(_ref) {
|
|
|
86
84
|
className: _CalendarModule.default.pressable,
|
|
87
85
|
"data-testid": testID ? "".concat(testID, "-next") : undefined
|
|
88
86
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
89
|
-
headline: true,
|
|
90
|
-
level: 4,
|
|
91
87
|
name: "Right"
|
|
92
88
|
}))), isDesktop && /*#__PURE__*/_react.default.createElement(_Calendar3.Weekdays, {
|
|
93
89
|
locale: locale
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","isDesktop","weekNumber","testID","style","month","className","header","undefined","title","pressable","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n focus,\n instance,\n selected,\n disabledPast,\n format,\n from,\n locale,\n range = false,\n to,\n onChange = () => {},\n onFocus = () => {},\n onNext,\n onPrevious,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n const weekNumber = getWeekNumber(instance);\n\n const { ['data-testid']: testID } = others;\n\n return (\n <View className={styles(style.month, others.className)}>\n <View row className={style.header}>\n {onPrevious && (\n <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n <Icon
|
|
1
|
+
{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","isDesktop","weekNumber","testID","style","month","className","header","undefined","title","pressable","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n focus,\n instance,\n selected,\n disabledPast,\n format,\n from,\n locale,\n range = false,\n to,\n onChange = () => {},\n onFocus = () => {},\n onNext,\n onPrevious,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n const weekNumber = getWeekNumber(instance);\n\n const { ['data-testid']: testID } = others;\n\n return (\n <View className={styles(style.month, others.className)}>\n <View row className={style.header}>\n {onPrevious && (\n <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n <Icon name=\"Left\" />\n </Pressable>\n )}\n <Text headline level={4} className={style.title}>\n {getHeader(instance, locale)}\n </Text>\n {onNext && (\n <Pressable onPress={onNext} className={style.pressable} data-testid={testID ? `${testID}-next` : undefined}>\n <Icon name=\"Right\" />\n </Pressable>\n )}\n </View>\n\n {isDesktop && <Weekdays locale={locale} />}\n\n {VISIBLE_WEEKS.map((week) => (\n <Week\n {...{\n ...others,\n disabledPast,\n focus,\n format,\n from,\n locale,\n to,\n range,\n selected,\n }}\n key={week}\n month={instance.getMonth()}\n number={weekNumber + week}\n year={instance.getFullYear()}\n onFocus={onFocus}\n onPress={onChange}\n />\n ))}\n </View>\n );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n captions: PropTypes.shape({}),\n focus: PropTypes.any,\n instance: PropTypes.any,\n selected: PropTypes.any,\n disabledDates: PropTypes.arrayOf(PropTypes.string),\n disabledPast: PropTypes.bool,\n format: PropTypes.string,\n from: PropTypes.instanceOf(Date),\n locale: PropTypes.string,\n range: PropTypes.bool,\n to: PropTypes.instanceOf(Date),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onNext: PropTypes.func,\n onPrevious: PropTypes.func,\n};\n"],"mappings":"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"}
|