@mailstep/design-system 0.7.26 → 0.7.29
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/Tabs/Tabs.d.ts +1 -1
- package/ui/Blocks/Tabs/Tabs.js +2 -2
- package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts +1 -1
- package/ui/Blocks/Tabs/styles.d.ts +1 -0
- package/ui/Blocks/Tabs/styles.js +13 -4
- package/ui/Blocks/Tabs/types.d.ts +1 -0
- package/ui/index.es.js +1867 -1865
- package/ui/index.umd.js +162 -163
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;
|
package/ui/Blocks/Tabs/Tabs.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TabsProps } from './types';
|
|
2
|
-
export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb }: TabsProps) => JSX.Element;
|
|
2
|
+
export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: TabsProps) => JSX.Element;
|
package/ui/Blocks/Tabs/Tabs.js
CHANGED
|
@@ -12,8 +12,8 @@ var Tab = function (_a) {
|
|
|
12
12
|
return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 || (badgeCount && badgeCount > 0) && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
|
|
13
13
|
};
|
|
14
14
|
export var Tabs = function (_a) {
|
|
15
|
-
var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
|
|
16
|
-
return (_jsx(TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
|
|
15
|
+
var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt;
|
|
16
|
+
return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
|
|
17
17
|
return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
|
|
18
18
|
}) }));
|
|
19
19
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ tabsDefinition, activeTab, onTabSwitch, mb }: import("../types").TabsProps) => JSX.Element;
|
|
5
|
+
component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: import("../types").TabsProps) => JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
};
|
|
@@ -8,4 +8,5 @@ export declare const Tab: import("styled-components").StyledComponent<"div", imp
|
|
|
8
8
|
}, never>;
|
|
9
9
|
export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
10
10
|
$mb?: string | undefined;
|
|
11
|
+
$mt?: string | undefined;
|
|
11
12
|
}, never>;
|
package/ui/Blocks/Tabs/styles.js
CHANGED
|
@@ -4,18 +4,27 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import styled, { css, th, x } from '@xstyled/styled-components';
|
|
6
6
|
export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: 1em;\n"], ["\n margin-right: 1em;\n"])));
|
|
7
|
-
export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items:
|
|
7
|
+
export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n"])));
|
|
8
8
|
export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex !important;\n justify-content: center;\n align-items: center;\n height: 23px;\n background-color: ", ";\n border-radius: 29px;\n padding: 3px 10px;\n margin-left: 8px;\n"], ["\n display: flex !important;\n justify-content: center;\n align-items: center;\n height: 23px;\n background-color: ", ";\n border-radius: 29px;\n padding: 3px 10px;\n margin-left: 8px;\n"])), th.color('lightGray7'));
|
|
9
|
-
var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n
|
|
10
|
-
export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor:
|
|
9
|
+
var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n\n &:after {\n content: '';\n position: absolute;\n bottom: 2;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 4px;\n border-radius: 6px 6px 0px 0px;\n }\n & > div {\n display: inline;\n color: ", ";\n }\n"], ["\n color: ", ";\n\n &:after {\n content: '';\n position: absolute;\n bottom: 2;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 4px;\n border-radius: 6px 6px 0px 0px;\n }\n & > div {\n display: inline;\n color: ", ";\n }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
|
|
10
|
+
export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n padding: 0 8px 12px;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 0.03em;\n min-width: 100px;\n\n & > div {\n display: none;\n }\n &:not(:last-child) {\n margin-right: 0.5rem;\n }\n\n :hover {\n color: ", ";\n }\n\n :active {\n ", ";\n }\n\n ", ";\n\n @media (min-width: 400px) {\n min-width: 120px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n padding: 0 8px 12px;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 0.03em;\n min-width: 100px;\n\n & > div {\n display: none;\n }\n &:not(:last-child) {\n margin-right: 0.5rem;\n }\n\n :hover {\n color: ", ";\n }\n\n :active {\n ", ";\n }\n\n ", ";\n\n @media (min-width: 400px) {\n min-width: 120px;\n }\n"])), function (_a) {
|
|
11
|
+
var disabled = _a.disabled;
|
|
12
|
+
return (disabled ? 'auto' : 'pointer');
|
|
13
|
+
}, th.color('gray'), function (_a) {
|
|
14
|
+
var disabled = _a.disabled;
|
|
15
|
+
return th.color(disabled ? 'gray' : 'typoPrimary');
|
|
16
|
+
}, function (_a) {
|
|
11
17
|
var disabled = _a.disabled;
|
|
12
18
|
return !disabled && activeTab;
|
|
13
19
|
}, function (_a) {
|
|
14
20
|
var active = _a.active;
|
|
15
21
|
return (active ? activeTab : '');
|
|
16
22
|
});
|
|
17
|
-
export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
23
|
+
export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\n margin-top: ", ";\n align-items: stretch;\n\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"], ["\n display: flex;\n align-items: center;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\n margin-top: ", ";\n align-items: stretch;\n\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"])), function (_a) {
|
|
18
24
|
var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
|
|
19
25
|
return $mb;
|
|
26
|
+
}, function (_a) {
|
|
27
|
+
var _b = _a.$mt, $mt = _b === void 0 ? 0 : _b;
|
|
28
|
+
return $mt;
|
|
20
29
|
}, th.color('bgLightGray1'));
|
|
21
30
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|