@mailstep/design-system 0.8.16-beta.22 → 0.8.16-beta.24

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.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js +1 -1
  3. package/ui/Elements/DatePicker/Datetime/components/Timepicker.js +2 -2
  4. package/ui/Elements/Select/components/CountMultiValue.js +1 -1
  5. package/ui/Elements/Select/components/IconValueContainer.js +1 -1
  6. package/ui/Elements/Select/stories/Select.stories.js +3 -2
  7. package/ui/ThemeProvider/themes/dark.d.ts +3 -0
  8. package/ui/ThemeProvider/themes/default.d.ts +3 -0
  9. package/ui/ThemeProvider/themes/default.js +3 -1
  10. package/ui/ThemeProvider/themes/index.d.ts +6 -0
  11. package/ui/index.es.js +6442 -6444
  12. package/ui/index.umd.js +361 -359
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.8.16-beta.22",
3
+ "version": "0.8.16-beta.24",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js CHANGED
@@ -27,5 +27,5 @@ export var DateRepeater = function (_a) {
27
27
  }
28
28
  onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
29
29
  }, [onChangeOthers, reset, others]);
30
- return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, background: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
30
+ return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, backgroundColor: "white", cursor: "pointer", border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
31
31
  };
package/ui/Elements/DatePicker/Datetime/components/Timepicker.js CHANGED
@@ -12,8 +12,8 @@ import { FooterRow } from './FooterRow';
12
12
  import { FooterRowLabel } from './FooterRowLabel';
13
13
  var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n transform: rotate(90deg);\n font-size: 18px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"], ["\n transform: rotate(90deg);\n font-size: 18px;\n margin: -4px 0;\n background-color: transparent !important;\n border: none;\n color: ", ";\n &:disabled:hover {\n color: ", ";\n cursor: default;\n }\n &:hover {\n color: ", ";\n background-color: transparent !important;\n }\n"])), th('colors.lightGray4'), th('colors.lightGray4'), th('colors.red2'));
14
14
  var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"], ["\n display: flex;\n align-items: baseline;\n justify-content: center;\n border: 1px solid ", ";\n border-radius: 6px;\n padding: 0 4px;\n margin: 0 4px;\n"])), th('colors.lightGray2'));
15
- var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
16
- var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n &:disabled {\n opacity: 0.5;\n }\n"])));
15
+ var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-size: 14px;\n font-weight: 600;\n width: 17px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";;\n &:disabled {\n opacity: 0.5;\n }\n"])), th('colors.white'));
16
+ var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";;\n &:disabled {\n opacity: 0.5;\n }\n"], ["\n font-weight: 600;\n font-size: 14px;\n width: 18px;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n background-color: ", ";;\n &:disabled {\n opacity: 0.5;\n }\n"])), th('colors.white'));
17
17
  var regExp = '^[0-9]*$';
18
18
  export var Timepicker = function (_a) {
19
19
  var _b, _c, _d, _e;
package/ui/Elements/Select/components/CountMultiValue.js CHANGED
@@ -18,7 +18,7 @@ import { components as selectComponents } from 'react-select';
18
18
  import styled, { th } from '@xstyled/styled-components';
19
19
  // MultiValue container with count of selected options
20
20
  var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"], ["\n background-color: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"])), th.color('lightGray7'));
21
- var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: nowrap;\n position: absolute;\n color: gray3;\n padding-left: ", ";\n"], ["\n white-space: nowrap;\n position: absolute;\n color: gray3;\n padding-left: ", ";\n"])), function (_a) {
21
+ var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: nowrap;\n position: absolute;\n color: gray;\n padding-left: ", ";\n"], ["\n white-space: nowrap;\n position: absolute;\n color: gray;\n padding-left: ", ";\n"])), function (_a) {
22
22
  var isFocused = _a.isFocused;
23
23
  return (isFocused ? '8px' : '0');
24
24
  });
package/ui/Elements/Select/components/IconValueContainer.js CHANGED
@@ -40,7 +40,7 @@ var IconValueContainer = function (props) {
40
40
  var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
41
41
  var hasValue = rest.hasValue;
42
42
  var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
43
- return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
43
+ return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon, fill: "gray" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
44
44
  };
45
45
  export default IconValueContainer;
46
46
  var templateObject_1;
package/ui/Elements/Select/stories/Select.stories.js CHANGED
@@ -11,5 +11,6 @@ var options = [
11
11
  { value: '2', label: 'Option 2' },
12
12
  { value: '3', label: 'Option 3' }
13
13
  ];
14
- export var Default = function () { return (_jsx(Select, { label: "Primary Select", onChange: console.log, options: options, value: "1" })); };
15
- export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: ['1', '2'] })); };
14
+ var mutliValue = ['1', '2'];
15
+ export var Default = function () { return _jsx(Select, { label: "Primary Select", onChange: console.log, options: options, value: "1" }); };
16
+ export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: mutliValue })); };
package/ui/ThemeProvider/themes/dark.d.ts CHANGED
@@ -67,6 +67,8 @@ declare const darkTheme: {
67
67
  yellow20: string;
68
68
  yellow60: string;
69
69
  yellow70: string;
70
+ yellow80: string;
71
+ yellow90: string;
70
72
  yellow1: string;
71
73
  yellow2: string;
72
74
  red10: string;
@@ -92,6 +94,7 @@ declare const darkTheme: {
92
94
  magenta70: string;
93
95
  magenta80: string;
94
96
  magenta90: string;
97
+ sideMenuSelectedText: string;
95
98
  };
96
99
  shadows: {
97
100
  dialogShadow: string;
package/ui/ThemeProvider/themes/default.d.ts CHANGED
@@ -65,6 +65,8 @@ declare const defaultTheme: {
65
65
  yellow20: string;
66
66
  yellow60: string;
67
67
  yellow70: string;
68
+ yellow80: string;
69
+ yellow90: string;
68
70
  yellow1: string;
69
71
  yellow2: string;
70
72
  red10: string;
@@ -93,6 +95,7 @@ declare const defaultTheme: {
93
95
  magenta70: string;
94
96
  magenta80: string;
95
97
  magenta90: string;
98
+ sideMenuSelectedText: string;
96
99
  };
97
100
  fonts: {
98
101
  primary: string;
package/ui/ThemeProvider/themes/default.js CHANGED
@@ -65,6 +65,8 @@ var defaultTheme = {
65
65
  yellow20: '#FFF9C4',
66
66
  yellow60: '#FFE600',
67
67
  yellow70: '#FFD702',
68
+ yellow80: '#D9B600',
69
+ yellow90: '#857000',
68
70
  yellow1: '#FFD702',
69
71
  yellow2: '#F2E871',
70
72
  red10: '#FFF6F4',
@@ -94,7 +96,7 @@ var defaultTheme = {
94
96
  magenta80: '#9F1853',
95
97
  magenta90: '#7B1340',
96
98
  // specific place for dark / light mode
97
- // sideMenuSelectedText: '#ffffff',
99
+ sideMenuSelectedText: '#ffffff',
98
100
  },
99
101
  fonts: {
100
102
  primary: 'Inter, sans-serif',
package/ui/ThemeProvider/themes/index.d.ts CHANGED
@@ -66,6 +66,8 @@ declare const themes: {
66
66
  yellow20: string;
67
67
  yellow60: string;
68
68
  yellow70: string;
69
+ yellow80: string;
70
+ yellow90: string;
69
71
  yellow1: string;
70
72
  yellow2: string;
71
73
  red10: string;
@@ -94,6 +96,7 @@ declare const themes: {
94
96
  magenta70: string;
95
97
  magenta80: string;
96
98
  magenta90: string;
99
+ sideMenuSelectedText: string;
97
100
  };
98
101
  fonts: {
99
102
  primary: string;
@@ -424,6 +427,8 @@ declare const themes: {
424
427
  yellow20: string;
425
428
  yellow60: string;
426
429
  yellow70: string;
430
+ yellow80: string;
431
+ yellow90: string;
427
432
  yellow1: string;
428
433
  yellow2: string;
429
434
  red10: string;
@@ -449,6 +454,7 @@ declare const themes: {
449
454
  magenta70: string;
450
455
  magenta80: string;
451
456
  magenta90: string;
457
+ sideMenuSelectedText: string;
452
458
  };
453
459
  shadows: {
454
460
  dialogShadow: string;