@mailstep/design-system 0.7.28 → 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/SideMenu/MenuItem.js +1 -1
- 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/Forms/Input/stories/Input.stories.d.ts +1 -0
- package/ui/Forms/Input/stories/Input.stories.js +6 -0
- package/ui/Forms/Input/styles.js +2 -2
- package/ui/index.es.js +7923 -7905
- package/ui/index.umd.js +419 -418
package/package.json
CHANGED
|
@@ -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, 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))); }) }))] }));
|
|
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, textAlign: "left", 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/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;
|
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: ", ";\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: ", ";\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); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
35
|
+
}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, 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 "]))) : '';
|