@mailstep/design-system 0.7.26 → 0.7.28
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/package.json +1 -1
- package/ui/Blocks/Scheduler/components/Groups/styles.js +2 -5
- package/ui/Blocks/Scheduler/components/TimeSlots/styles.d.ts +3 -3
- package/ui/Blocks/Scheduler/components/TimeSlots/styles.js +7 -10
- package/ui/Blocks/Scheduler/stories/Scheduler.stories.js +2 -1
- package/ui/Blocks/Scheduler/styles.js +2 -2
- package/ui/Blocks/SideMenu/MenuItem.js +1 -1
- package/ui/Forms/Input/stories/Input.stories.d.ts +0 -1
- package/ui/Forms/Input/stories/Input.stories.js +0 -6
- package/ui/Forms/Input/styles.js +2 -2
- package/ui/index.es.js +8977 -8993
- package/ui/index.umd.js +440 -442
package/package.json
CHANGED
|
@@ -4,13 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { groupsHeight, timeIntervalWidth } from '../../utils/constants';
|
|
6
6
|
import styled, { th } from '@xstyled/styled-components';
|
|
7
|
-
export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width:
|
|
8
|
-
export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n
|
|
7
|
+
export var GroupContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: fit-content;\n"], ["\n height: ", "px;\n display: flex;\n border-bottom: 1px solid ", ";\n width: fit-content;\n"])), groupsHeight, th.color('lightGray6'));
|
|
8
|
+
export var GroupItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n flex-shrink: 0;\n min-width: 350px;\n height: 100%;\n font-size: 14px;\n font-weight: 600;\n padding: 10px;\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n"], ["\n background-color: ", ";\n flex-shrink: 0;\n min-width: 350px;\n height: 100%;\n font-size: 14px;\n font-weight: 600;\n padding: 10px;\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n"])), function (_a) {
|
|
9
9
|
var bg = _a.bg;
|
|
10
10
|
return bg || th.color('bgLightGray');
|
|
11
|
-
}, function (_a) {
|
|
12
|
-
var groupsCount = _a.groupsCount;
|
|
13
|
-
return "calc((100% / ".concat(groupsCount, ") - (").concat(timeIntervalWidth, "px / ").concat(groupsCount, "))");
|
|
14
11
|
}, th.color('lightGray6'));
|
|
15
12
|
export var Gap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n height: 100%;\n width: ", "px;\n min-width: ", "px;\n border-right: 1px solid ", ";\n"], ["\n background-color: ", ";\n height: 100%;\n width: ", "px;\n min-width: ", "px;\n border-right: 1px solid ", ";\n"])), th.color('bgLightGray1'), timeIntervalWidth, timeIntervalWidth, th.color('lightGray6'));
|
|
16
13
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export declare const TimeSlotsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
2
|
+
export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
3
|
+
disabled: boolean;
|
|
4
|
+
}, never>;
|
|
2
5
|
export declare const EmptyTimeSlot: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
3
6
|
isSlotSelected?: boolean | undefined;
|
|
4
7
|
activeTime: boolean;
|
|
5
8
|
groupsCount: number;
|
|
6
9
|
}, never>;
|
|
7
10
|
export declare const TimeInterval: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
8
|
-
export declare const TimeRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
9
|
-
disabled: boolean;
|
|
10
|
-
}, never>;
|
|
@@ -4,11 +4,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { minuteHeight, stepInMinutes, timeIntervalWidth } from '../../utils/constants';
|
|
6
6
|
import styled, { th } from '@xstyled/styled-components';
|
|
7
|
-
export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n
|
|
8
|
-
export var
|
|
9
|
-
var
|
|
10
|
-
return
|
|
11
|
-
},
|
|
7
|
+
export var TimeSlotsContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow-y: auto;\n flex-grow: 1;\n width: fit-content;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n position: relative;\n overflow-y: auto;\n flex-grow: 1;\n width: fit-content;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n scroll-behavior: smooth;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
8
|
+
export var TimeRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n width: fit-content;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n display: flex;\n width: fit-content;\n border-bottom: 1px solid ", ";\n"])), function (_a) {
|
|
9
|
+
var disabled = _a.disabled;
|
|
10
|
+
return (disabled ? th.color('lightGray7') : 'white');
|
|
11
|
+
}, th.color('lightGray6'));
|
|
12
|
+
export var EmptyTimeSlot = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: ", "px;\n flex-shrink: 0;\n min-width: 350px;\n box-sizing: border-box;\n position: relative;\n background-color: ", ";\n cursor: ", ";\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n height: ", "px;\n flex-shrink: 0;\n min-width: 350px;\n box-sizing: border-box;\n position: relative;\n background-color: ", ";\n cursor: ", ";\n border-right: 1px solid ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), minuteHeight * stepInMinutes, function (_a) {
|
|
12
13
|
var isSlotSelected = _a.isSlotSelected;
|
|
13
14
|
return (isSlotSelected ? th.color('blue20') : '');
|
|
14
15
|
}, function (_a) {
|
|
@@ -18,9 +19,5 @@ export var EmptyTimeSlot = styled.div(templateObject_2 || (templateObject_2 = __
|
|
|
18
19
|
var isSlotSelected = _a.isSlotSelected, activeTime = _a.activeTime;
|
|
19
20
|
return (!isSlotSelected && activeTime ? th.color('blue10') : '');
|
|
20
21
|
});
|
|
21
|
-
export var TimeInterval = styled.div(
|
|
22
|
-
export var TimeRow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n border-bottom: 1px solid ", ";\n"], ["\n background-color: ", ";\n display: flex;\n border-bottom: 1px solid ", ";\n"])), function (_a) {
|
|
23
|
-
var disabled = _a.disabled;
|
|
24
|
-
return (disabled ? th.color('lightGray7') : 'white');
|
|
25
|
-
}, th.color('lightGray6'));
|
|
22
|
+
export var TimeInterval = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 12px;\n font-weight: 500;\n height: ", "px;\n width: ", "px;\n border-right: 1px solid ", ";\n padding: 10px;\n min-width: ", "px;\n"], ["\n font-size: 12px;\n font-weight: 500;\n height: ", "px;\n width: ", "px;\n border-right: 1px solid ", ";\n padding: 10px;\n min-width: ", "px;\n"])), minuteHeight * stepInMinutes, timeIntervalWidth, th.color('lightGray6'), timeIntervalWidth);
|
|
26
23
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Pallet } from '../../../Elements/Icon';
|
|
3
3
|
import { LinguiContainer } from '../../../utils/LinguiContainer';
|
|
4
4
|
import { Scheduler } from '../Scheduler';
|
|
5
|
+
import { x } from '@xstyled/styled-components';
|
|
5
6
|
var groups = [
|
|
6
7
|
{ id: 'group1', name: 'Inbound DEA', color: '#DCEFFF' },
|
|
7
8
|
{ id: 'group2', name: 'Aktin', color: '#FFEBE6' },
|
|
@@ -109,5 +110,5 @@ var meta = {
|
|
|
109
110
|
};
|
|
110
111
|
export default meta;
|
|
111
112
|
export var Default = function () {
|
|
112
|
-
return (_jsx(LinguiContainer, { children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot, timeSlotDefinitions: timeSlotDefinitions }) }));
|
|
113
|
+
return (_jsx(LinguiContainer, { children: _jsx(x.div, { display: "flex", h: "700px", overflow: "hidden", children: _jsx(Scheduler, { groups: groups, activeHours: activeHours, data: timeSlots, handleSelectTimeSlot: handleSelectTimeSlot, timeSlotDefinitions: timeSlotDefinitions }) }) }));
|
|
113
114
|
};
|
|
@@ -3,6 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled, { th } from '@xstyled/styled-components';
|
|
6
|
-
export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n overflow-x: auto;\n
|
|
7
|
-
export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n
|
|
6
|
+
export var Block = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: white;\n color: ", ";\n overflow-x: auto;\n text-align: center;\n display: flex;\n flex-direction: column;\n border: 1px solid ", ";\n user-select: none;\n width: fit-content;\n height: 100%;\n}\n"], ["\n background-color: white;\n color: ", ";\n overflow-x: auto;\n text-align: center;\n display: flex;\n flex-direction: column;\n border: 1px solid ", ";\n user-select: none;\n width: fit-content;\n height: 100%;\n}\n"])), th.color('typoPrimary'), th.color('lightGray6'));
|
|
7
|
+
export var Container = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n overflow-y: hidden;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n overflow-y: hidden;\n width: 100%;\n"])));
|
|
8
8
|
var templateObject_1, templateObject_2;
|
|
@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
|
|
|
49
49
|
}, [items, link]);
|
|
50
50
|
return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName,
|
|
51
51
|
// @ts-ignore
|
|
52
|
-
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0,
|
|
52
|
+
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
|
|
53
53
|
};
|
|
54
54
|
export default memo(MenuItem);
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
|
|
|
29
29
|
export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
30
30
|
export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
31
31
|
as: props.$asTextArea ? 'textarea' : 'input'
|
|
32
|
-
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width:
|
|
32
|
+
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: neutral300;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
33
33
|
var $isInvalid = _a.$isInvalid;
|
|
34
34
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
35
|
-
}, function (props) { return resolvePaddingRight(props); },
|
|
35
|
+
}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
36
36
|
var big = _a.big;
|
|
37
37
|
return big
|
|
38
38
|
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
|