@mailstep/design-system 0.6.57-beta.3 → 0.6.58-beta.0.1
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 +3 -1
- package/ui/Blocks/SideMenu/styles.d.ts +0 -2
- package/ui/Blocks/SideMenu/styles.js +15 -15
- package/ui/Elements/Logo/Logo.d.ts +1 -1
- package/ui/Elements/Logo/Logo.js +14 -10
- package/ui/Elements/Logo/assets/warehouse/manager.svg +5 -0
- package/ui/Elements/Logo/stories/Logo.stories.d.ts +1 -0
- package/ui/Elements/Logo/stories/Logo.stories.js +40 -34
- package/ui/Elements/Logo/types.d.ts +1 -1
- package/ui/index.es.js +16907 -17410
- package/ui/index.umd.js +626 -625
package/package.json
CHANGED
|
@@ -47,6 +47,8 @@ var MenuItem = function (_a) {
|
|
|
47
47
|
var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
|
|
48
48
|
return isActive || childSelected || partialMatch;
|
|
49
49
|
}, [items, link]);
|
|
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,
|
|
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
|
+
// @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))); }) }))] }));
|
|
51
53
|
};
|
|
52
54
|
export default memo(MenuItem);
|
|
@@ -16,8 +16,6 @@ export declare const TooltipItemLabel: import("styled-components").StyledCompone
|
|
|
16
16
|
export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/system").Theme, {
|
|
17
17
|
$isCompact?: boolean | undefined;
|
|
18
18
|
$lightMode?: boolean | undefined;
|
|
19
|
-
$isActive?: boolean | undefined;
|
|
20
|
-
$hasChildren?: boolean | undefined;
|
|
21
19
|
appearance?: "default" | "gray" | undefined;
|
|
22
20
|
}, never>;
|
|
23
21
|
export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
@@ -31,7 +31,7 @@ export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_
|
|
|
31
31
|
return ($lightMode ? th.color('typoPrimary') : 'white');
|
|
32
32
|
});
|
|
33
33
|
export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"], ["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"])));
|
|
34
|
-
export var ItemLinkWrap = styled(NavLink)(
|
|
34
|
+
export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
35
35
|
var $isCompact = _a.$isCompact;
|
|
36
36
|
return ($isCompact ? 'column' : 'row');
|
|
37
37
|
}, function (_a) {
|
|
@@ -56,8 +56,8 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_10 || (templateObject_1
|
|
|
56
56
|
var $isCompact = _a.$isCompact;
|
|
57
57
|
return ($isCompact ? 'center' : 'space-between');
|
|
58
58
|
}, function (_a) {
|
|
59
|
-
var
|
|
60
|
-
return
|
|
59
|
+
var $lightMode = _a.$lightMode;
|
|
60
|
+
return ($lightMode ? th('colors.red1') : 'white');
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var $lightMode = _a.$lightMode;
|
|
63
63
|
return ($lightMode ? th('colors.red1') : 'white');
|
|
@@ -74,7 +74,7 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_10 || (templateObject_1
|
|
|
74
74
|
var $lightMode = _a.$lightMode;
|
|
75
75
|
return ($lightMode ? th.color('red1') : th.color('white'));
|
|
76
76
|
});
|
|
77
|
-
export var MenuItemContainer = styled.div(
|
|
77
|
+
export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"], ["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"])), function (_a) {
|
|
78
78
|
var $lightMode = _a.$lightMode;
|
|
79
79
|
return ($lightMode ? th.color('blue2') : undefined);
|
|
80
80
|
}, ItemLabel, ItemLabel, function (_a) {
|
|
@@ -87,17 +87,17 @@ export var MenuItemContainer = styled.div(templateObject_15 || (templateObject_1
|
|
|
87
87
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
|
|
88
88
|
return $isCompact &&
|
|
89
89
|
hasChildren &&
|
|
90
|
-
isHovering && css(
|
|
90
|
+
isHovering && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "])), ItemIcon, leftMenuAfter, function (_a) {
|
|
91
91
|
var $lightMode = _a.$lightMode;
|
|
92
92
|
return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
|
|
93
93
|
});
|
|
94
94
|
}, function (_a) {
|
|
95
95
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
|
|
96
|
-
return $isCompact && css(
|
|
96
|
+
return $isCompact && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n & ", " {\n ", "\n :hover {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n :hover {\n background-color: ", ";\n }\n }\n "])), ItemIcon, compactMenuItem, hasChildren ? 'transparent' : $lightMode ? th.color('neutral20') : th.color('neutral500'));
|
|
97
97
|
}, function (_a) {
|
|
98
98
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
|
|
99
99
|
return $isCompact && hasChildren && isHovering
|
|
100
|
-
? css(
|
|
100
|
+
? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "])), ItemIcon, leftMenuAfter, $lightMode ? th.color('red20') : th.color('neutral500')) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n & ", " {\n background-color: ", ";\n :hover {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n background-color: ", ";\n :hover {\n background-color: ", ";\n }\n }\n "])), ItemIcon, !$isCompact ? 'transparent' : $lightMode ? th.color('red20') : th.color('red1'), $lightMode ? th.color('red20') : 'none');
|
|
101
101
|
}, function (_a) {
|
|
102
102
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
|
|
103
103
|
if ($isCompact)
|
|
@@ -119,14 +119,14 @@ export var MenuItemContainer = styled.div(templateObject_15 || (templateObject_1
|
|
|
119
119
|
return th.color('red20');
|
|
120
120
|
return th.color('red70');
|
|
121
121
|
}, ItemLinkWrap);
|
|
122
|
-
export var ItemIcon = styled.span(
|
|
122
|
+
export var ItemIcon = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n margin-right: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n margin-right: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
123
123
|
var $isCompact = _a.$isCompact;
|
|
124
124
|
return ($isCompact ? '0' : '11px');
|
|
125
125
|
}, function (_a) {
|
|
126
126
|
var $isCompact = _a.$isCompact;
|
|
127
127
|
return ($isCompact ? '4px' : '0');
|
|
128
128
|
});
|
|
129
|
-
export var TooltipWrap = styled.div(
|
|
129
|
+
export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n background-color: ", ";\n white-space: nowrap;\n transform: translateX(8px);\n width: 248px;\n border-radius: 0 10px 10px 0;\n z-index: 5;\n &::before {\n content: '';\n position: absolute;\n border-radius: 10px;\n width: calc(100% + 80px);\n height: calc(100% + 100px);\n left: -16px;\n top: -50px;\n }\n\n & :not(:last-child) {\n border-radius: 0;\n border-bottom: 0.5px solid ", ";\n }\n\n &:first-child > {\n :hover {\n border-top-right-radius: 10px;\n background-color: ", ";\n }\n }\n\n & :not(:first-child) {\n :hover {\n border-top-right-radius: 0;\n }\n }\n\n & :last-child > {\n :hover {\n border-bottom-right-radius: 10px;\n background-color: ", ";\n }\n }\n"], ["\n position: absolute;\n background-color: ", ";\n white-space: nowrap;\n transform: translateX(8px);\n width: 248px;\n border-radius: 0 10px 10px 0;\n z-index: 5;\n &::before {\n content: '';\n position: absolute;\n border-radius: 10px;\n width: calc(100% + 80px);\n height: calc(100% + 100px);\n left: -16px;\n top: -50px;\n }\n\n & :not(:last-child) {\n border-radius: 0;\n border-bottom: 0.5px solid ", ";\n }\n\n &:first-child > {\n :hover {\n border-top-right-radius: 10px;\n background-color: ", ";\n }\n }\n\n & :not(:first-child) {\n :hover {\n border-top-right-radius: 0;\n }\n }\n\n & :last-child > {\n :hover {\n border-bottom-right-radius: 10px;\n background-color: ", ";\n }\n }\n"])), function (_a) {
|
|
130
130
|
var $lightMode = _a.$lightMode;
|
|
131
131
|
return ($lightMode ? th.color('white') : th.color('neutral500'));
|
|
132
132
|
}, function (_a) {
|
|
@@ -139,8 +139,8 @@ export var TooltipWrap = styled.div(templateObject_17 || (templateObject_17 = __
|
|
|
139
139
|
var $lightMode = _a.$lightMode;
|
|
140
140
|
return ($lightMode ? th.color('red20') : th.color('blue2'));
|
|
141
141
|
});
|
|
142
|
-
export var OverflowWithEllipsis = styled.span(
|
|
143
|
-
export var TopLevelWrap = styled.div(
|
|
142
|
+
export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n max-width: 140px;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n max-width: 140px;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
143
|
+
export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n border-right: 1px solid ", ";\n height: -webkit-fill-available;\n transition: width 0.5s ease;\n width: ", ";\n\n z-index: 5;\n position: absolute;\n top: ", ";\n height: ", ";\n\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n top: inherit;\n z-index: 2;\n }\n"], ["\n background-color: ", ";\n border-right: 1px solid ", ";\n height: -webkit-fill-available;\n transition: width 0.5s ease;\n width: ", ";\n\n z-index: 5;\n position: absolute;\n top: ", ";\n height: ", ";\n\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n top: inherit;\n z-index: 2;\n }\n"])), function (_a) {
|
|
144
144
|
var lightMode = _a.lightMode;
|
|
145
145
|
return (lightMode ? 'white' : th('colors.blue3'));
|
|
146
146
|
}, th('colors.lightGray6'), function (_a) {
|
|
@@ -153,10 +153,10 @@ export var TopLevelWrap = styled.div(templateObject_19 || (templateObject_19 = _
|
|
|
153
153
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
154
154
|
return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
|
|
155
155
|
});
|
|
156
|
-
export var ScrollWrap = styled.div(
|
|
157
|
-
export var BodyWrap = styled.div(
|
|
156
|
+
export var ScrollWrap = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n overflow-y: auto;\n flex-grow: 1;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n overflow-y: auto;\n flex-grow: 1;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
157
|
+
export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n width: 100%;\n text-align: center;\n padding: ", ";\n height: calc(100% - 52px);\n"], ["\n width: 100%;\n text-align: center;\n padding: ", ";\n height: calc(100% - 52px);\n"])), function (_a) {
|
|
158
158
|
var isCompact = _a.isCompact;
|
|
159
159
|
return (isCompact ? '24px 9px' : '24px 22px');
|
|
160
160
|
});
|
|
161
|
-
export var Overlay = styled.div(
|
|
162
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21
|
|
161
|
+
export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n z-index: 4;\n height: 100%;\n width: 100%;\n background-color: ", ";\n @media (min-width: 1024px) {\n display: none;\n }\n"], ["\n position: fixed;\n top: 0;\n z-index: 4;\n height: 100%;\n width: 100%;\n background-color: ", ";\n @media (min-width: 1024px) {\n display: none;\n }\n"])), createRgba('blue2', 0.6));
|
|
162
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
package/ui/Elements/Logo/Logo.js
CHANGED
|
@@ -25,43 +25,47 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
|
-
import styled from '@xstyled/styled-components';
|
|
29
|
-
import logoWhiteImage from './assets/mailship/logo_white.png';
|
|
30
28
|
import logoBlackImage from './assets/mailship/logo_black.png';
|
|
31
29
|
import logoMImage from './assets/mailship/logo_m.png';
|
|
30
|
+
import logoWhiteImage from './assets/mailship/logo_white.png';
|
|
32
31
|
import logoSvg from './assets/mailship/mailship-logo.svg';
|
|
33
32
|
import logoMailstepBlack from './assets/mailstep/mailstep_black.svg';
|
|
34
33
|
import logoMailstepWhite from './assets/mailstep/mailstep_white.svg';
|
|
34
|
+
import logoMailstock from './assets/mailstock/mailstock.svg';
|
|
35
35
|
import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
|
|
36
36
|
import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
|
|
37
37
|
import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
|
|
38
|
-
import
|
|
38
|
+
import warehouseManager from './assets/warehouse/manager.svg';
|
|
39
|
+
import styled from '@xstyled/styled-components';
|
|
39
40
|
var defaultSizes = {
|
|
40
41
|
small: '30px',
|
|
41
42
|
medium: '46px',
|
|
42
|
-
big: '61px'
|
|
43
|
+
big: '61px' // cca 200px width on full logo
|
|
43
44
|
};
|
|
44
45
|
var variantMap = {
|
|
45
46
|
mailship: {
|
|
46
47
|
white: logoWhiteImage,
|
|
47
48
|
black: logoBlackImage,
|
|
48
49
|
m: logoMImage,
|
|
49
|
-
s: logoSvg
|
|
50
|
+
s: logoSvg
|
|
50
51
|
},
|
|
51
52
|
mailwise: {
|
|
52
53
|
black: logoMailwise,
|
|
53
|
-
s: logoMailwiseSmall
|
|
54
|
+
s: logoMailwiseSmall
|
|
54
55
|
},
|
|
55
56
|
mailstock: {
|
|
56
|
-
black: logoMailstock
|
|
57
|
+
black: logoMailstock
|
|
57
58
|
},
|
|
58
59
|
mailstep: {
|
|
59
60
|
black: logoMailstepBlack,
|
|
60
|
-
white: logoMailstepWhite
|
|
61
|
+
white: logoMailstepWhite
|
|
61
62
|
},
|
|
62
63
|
mailwrap: {
|
|
63
|
-
black: logoMailwrap
|
|
64
|
+
black: logoMailwrap
|
|
64
65
|
},
|
|
66
|
+
warehouse: {
|
|
67
|
+
black: warehouseManager
|
|
68
|
+
}
|
|
65
69
|
};
|
|
66
70
|
var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
67
71
|
var width = _a.width;
|
|
@@ -73,7 +77,7 @@ var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTempl
|
|
|
73
77
|
var Logo = function (_a) {
|
|
74
78
|
var _b = _a.brand, brand = _b === void 0 ? 'mailship' : _b, variant = _a.variant, size = _a.size, width = _a.width, height = _a.height, rest = __rest(_a, ["brand", "variant", "size", "width", "height"]);
|
|
75
79
|
var variants = variantMap[brand];
|
|
76
|
-
var logo = variants[variant];
|
|
80
|
+
var logo = variants === null || variants === void 0 ? void 0 : variants[variant];
|
|
77
81
|
if (!logo) {
|
|
78
82
|
console.warn('No variant for this logo exists.');
|
|
79
83
|
return null;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="409" height="168" viewBox="0 0 409 168" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M44.4727 66H30.5156L27.6328 43.2188L23.2734 66H9.45703L0 27.9961H13.8516L15.9961 40.1953C16.2539 41.7422 16.5 43.3945 16.7344 45.1523C16.9922 46.9102 17.2266 48.8203 17.4375 50.8828C17.625 48.75 17.8711 46.7109 18.1758 44.7656C18.5039 42.7969 18.8672 40.8984 19.2656 39.0703L21.7617 27.9961H33.7852L35.8242 40.2305C36.082 41.8008 36.3164 43.4766 36.5273 45.2578C36.7383 47.0156 36.9375 48.8906 37.125 50.8828C37.5 48.1875 37.875 45.7383 38.25 43.5352C38.625 41.3086 39.0117 39.2695 39.4102 37.418L41.4492 27.9961H55.5469L44.4727 66ZM91.8112 66H77.6784C77.7956 64.7344 77.8894 63.5273 77.9597 62.3789C78.03 61.2305 78.1003 60.3047 78.1706 59.6016C75.7331 64.3828 72.4636 66.7734 68.362 66.7734C64.7995 66.7734 61.9753 64.9922 59.8894 61.4297C57.8269 57.8906 56.7956 52.9922 56.7956 46.7344C56.7956 40.6875 57.862 35.9297 59.9948 32.4609C62.1277 28.9453 65.0339 27.1875 68.7136 27.1875C72.487 27.1875 75.5339 29.4609 77.8542 34.0078C77.8073 33.5391 77.7722 33.1289 77.7487 32.7773C77.7253 32.4258 77.7019 32.1328 77.6784 31.8984L77.5378 29.6836L77.4323 27.9961H91.8112V66ZM77.5378 46.5234C77.5378 45.1172 77.4792 43.9219 77.362 42.9375C77.2683 41.9531 77.1042 41.1562 76.8698 40.5469C76.6355 39.9141 76.3308 39.4688 75.9558 39.2109C75.5808 38.9297 75.1237 38.7891 74.5847 38.7891C72.1941 38.7891 70.9987 41.9648 70.9987 48.3164C70.9987 52.8633 72.0652 55.1367 74.198 55.1367C76.4245 55.1367 77.5378 52.2656 77.5378 46.5234ZM111.693 66H97.5952V27.9961H111.693L110.955 35.4141C113.087 29.8594 116.615 27.082 121.537 27.082V42.9023C119.99 42.0586 118.677 41.6367 117.599 41.6367C115.701 41.6367 114.236 42.3281 113.205 43.7109C112.197 45.0703 111.693 47.0625 111.693 49.6875V66ZM144.934 53.1328L158.715 53.4141C157.731 57.8438 155.809 61.1836 152.949 63.4336C150.113 65.6602 146.399 66.7734 141.805 66.7734C136.367 66.7734 132.102 65.0859 129.008 61.7109C125.938 58.2891 124.402 53.6133 124.402 47.6836C124.402 41.6602 126.055 36.75 129.36 32.9531C132.664 29.1328 136.93 27.2227 142.156 27.2227C147.36 27.2227 151.508 29.0625 154.602 32.7422C157.695 36.4453 159.242 41.3555 159.242 47.4727L159.172 49.9688H138.5C138.664 53.8594 139.766 55.8047 141.805 55.8047C143.399 55.8047 144.442 54.9141 144.934 53.1328ZM145.25 42.375C145.25 41.6719 145.168 41.0273 145.004 40.4414C144.84 39.8555 144.606 39.3516 144.301 38.9297C144.02 38.5078 143.68 38.1797 143.281 37.9453C142.883 37.6875 142.449 37.5586 141.981 37.5586C140.996 37.5586 140.199 38.0156 139.59 38.9297C138.981 39.8203 138.676 40.9688 138.676 42.375H145.25ZM197.44 66H183.343V45.8906C183.343 44.1562 183.167 42.9492 182.815 42.2695C182.487 41.5898 181.901 41.25 181.057 41.25C179.089 41.25 178.104 43.1133 178.104 46.8398V66H164.007V6.62109H178.104V27.8555C178.104 29.0039 178.093 29.9648 178.069 30.7383C178.069 31.5117 178.057 32.0977 178.034 32.4961C178.011 32.8945 177.975 33.3164 177.929 33.7617C177.882 34.207 177.835 34.6992 177.788 35.2383C180.061 29.8711 183.39 27.1875 187.772 27.1875C190.819 27.1875 193.186 28.3242 194.874 30.5977C196.585 32.8711 197.44 36.0352 197.44 40.0898V66ZM237.466 47.5781C237.466 53.4375 235.849 58.1016 232.615 61.5703C229.38 65.0391 225.045 66.7734 219.607 66.7734C214.263 66.7734 210.009 65.0039 206.845 61.4648C203.705 57.9023 202.134 53.1211 202.134 47.1211C202.134 41.1211 203.74 36.3047 206.951 32.6719C210.138 29.0156 214.369 27.1875 219.642 27.1875C225.197 27.1875 229.556 29.0039 232.72 32.6367C235.884 36.2695 237.466 41.25 237.466 47.5781ZM223.791 47.1211C223.791 45.7148 223.697 44.4492 223.509 43.3242C223.322 42.1758 223.052 41.2031 222.701 40.4062C222.349 39.5859 221.927 38.9531 221.435 38.5078C220.943 38.0625 220.392 37.8398 219.783 37.8398C218.587 37.8398 217.627 38.6836 216.9 40.3711C216.173 41.8477 215.81 44.0625 215.81 47.0156C215.81 49.9219 216.173 52.1367 216.9 53.6602C217.627 55.3477 218.599 56.1914 219.818 56.1914C220.966 56.1914 221.916 55.3594 222.666 53.6953C223.416 51.8438 223.791 49.6523 223.791 47.1211ZM242.231 27.9961H256.328V49.4062C256.328 51.4453 256.528 52.9336 256.926 53.8711C257.348 54.6445 258.145 55.0312 259.317 55.0312C260.465 55.0312 261.239 54.6445 261.637 53.8711C262.059 53.0977 262.27 51.6094 262.27 49.4062V27.9961H276.367V51.3047C276.367 52.8516 276.239 54.2578 275.981 55.5234C275.746 56.7656 275.36 57.9023 274.821 58.9336C274.305 59.9414 273.625 60.8672 272.782 61.7109C271.961 62.5547 270.977 63.3281 269.828 64.0312C266.735 65.8594 263.231 66.7734 259.317 66.7734C255.356 66.7734 251.852 65.8594 248.805 64.0312C247.633 63.3281 246.625 62.5664 245.782 61.7461C244.961 60.9023 244.282 59.9648 243.742 58.9336C243.227 57.9023 242.84 56.7656 242.582 55.5234C242.348 54.2578 242.231 52.8516 242.231 51.3047V27.9961ZM280.851 62.8711L285.983 52.3242C288.515 54.9727 290.87 56.2969 293.05 56.2969C294.878 56.2969 295.792 55.6406 295.792 54.3281C295.792 53.2031 294.562 52.1953 292.101 51.3047C285.468 48.9609 282.151 45.2461 282.151 40.1602C282.151 36.4336 283.628 33.3398 286.581 30.8789C289.558 28.418 293.272 27.1875 297.726 27.1875C301.382 27.1875 305.155 28.2188 309.046 30.2812L304.23 40.582C301.862 38.3555 299.929 37.2422 298.429 37.2422C296.952 37.2422 296.214 37.8398 296.214 39.0352C296.214 40.3242 297.62 41.5312 300.433 42.6562C303.948 44.0391 306.339 45.5039 307.605 47.0508C308.94 48.5977 309.608 50.7305 309.608 53.4492C309.608 57.3633 308.19 60.5625 305.355 63.0469C302.519 65.5312 298.874 66.7734 294.421 66.7734C292.288 66.7734 290.167 66.5039 288.058 65.9648C287.073 65.707 285.995 65.3203 284.823 64.8047C283.651 64.2656 282.327 63.6211 280.851 62.8711ZM333.076 53.1328L346.857 53.4141C345.873 57.8438 343.951 61.1836 341.092 63.4336C338.256 65.6602 334.541 66.7734 329.947 66.7734C324.51 66.7734 320.244 65.0859 317.15 61.7109C314.08 58.2891 312.545 53.6133 312.545 47.6836C312.545 41.6602 314.197 36.75 317.502 32.9531C320.806 29.1328 325.072 27.2227 330.299 27.2227C335.502 27.2227 339.65 29.0625 342.744 32.7422C345.838 36.4453 347.385 41.3555 347.385 47.4727L347.314 49.9688H326.642C326.806 53.8594 327.908 55.8047 329.947 55.8047C331.541 55.8047 332.584 54.9141 333.076 53.1328ZM333.392 42.375C333.392 41.6719 333.31 41.0273 333.146 40.4414C332.982 39.8555 332.748 39.3516 332.443 38.9297C332.162 38.5078 331.822 38.1797 331.424 37.9453C331.025 37.6875 330.592 37.5586 330.123 37.5586C329.138 37.5586 328.342 38.0156 327.732 38.9297C327.123 39.8203 326.818 40.9688 326.818 42.375H333.392Z" fill="#111D27"/>
|
|
3
|
+
<path d="M79.9863 139H60.0146V108.52C60.0146 105.1 59.002 103.39 56.9766 103.39C53.9551 103.39 52.4443 106.179 52.4443 111.757V139H32.4727V109.267C32.4727 105.614 31.3438 103.788 29.0859 103.788C27.459 103.788 26.2969 104.419 25.5996 105.681C24.9355 106.909 24.6035 109.084 24.6035 112.205V139H4.63184V85.1611H24.6035V87.9502C24.6035 90.1416 24.5039 92.2002 24.3047 94.126C27.8574 87.3857 32.4893 84.0156 38.2002 84.0156C44.6084 84.0156 49.3564 87.7344 52.4443 95.1719C55.1338 87.7344 59.583 84.0156 65.792 84.0156C70.4736 84.0156 74.126 85.7256 76.749 89.1455C78.9072 92.001 79.9863 96.3008 79.9863 102.045V139Z" fill="#E4001B"/>
|
|
4
|
+
<path d="M136.341 139H116.32C116.486 137.207 116.619 135.497 116.718 133.87C116.818 132.243 116.918 130.932 117.017 129.936C113.564 136.709 108.932 140.096 103.122 140.096C98.0747 140.096 94.0738 137.572 91.1187 132.525C88.1968 127.512 86.7359 120.572 86.7359 111.707C86.7359 103.141 88.2466 96.4004 91.2681 91.4863C94.2896 86.5059 98.4068 84.0156 103.62 84.0156C108.965 84.0156 113.282 87.2363 116.569 93.6777C116.502 93.0137 116.453 92.4326 116.419 91.9346C116.386 91.4365 116.353 91.0215 116.32 90.6895L116.121 87.5518L115.971 85.1611H136.341V139ZM116.121 111.408C116.121 109.416 116.038 107.723 115.872 106.328C115.739 104.934 115.506 103.805 115.174 102.941C114.842 102.045 114.411 101.414 113.879 101.049C113.348 100.65 112.701 100.451 111.937 100.451C108.55 100.451 106.857 104.95 106.857 113.948C106.857 120.39 108.368 123.61 111.389 123.61C114.543 123.61 116.121 119.543 116.121 111.408ZM191.899 139H171.928V110.512C171.928 108.055 171.679 106.345 171.181 105.382C170.716 104.419 169.886 103.938 168.69 103.938C165.901 103.938 164.507 106.577 164.507 111.856V139H144.535V85.1611H164.507C164.474 86.4893 164.44 87.7178 164.407 88.8467C164.374 89.9756 164.324 91.0215 164.258 91.9844L164.059 95.4209C167.279 87.8174 171.994 84.0156 178.203 84.0156C182.52 84.0156 185.873 85.626 188.264 88.8467C190.688 92.0674 191.899 96.5498 191.899 102.294V139ZM248.155 139H228.133C228.299 137.207 228.432 135.497 228.532 133.87C228.631 132.243 228.731 130.932 228.831 129.936C225.378 136.709 220.746 140.096 214.935 140.096C209.888 140.096 205.887 137.572 202.932 132.525C200.01 127.512 198.549 120.572 198.549 111.707C198.549 103.141 200.06 96.4004 203.082 91.4863C206.103 86.5059 210.22 84.0156 215.433 84.0156C220.779 84.0156 225.095 87.2363 228.382 93.6777C228.316 93.0137 228.266 92.4326 228.233 91.9346C228.2 91.4365 228.167 91.0215 228.133 90.6895L227.934 87.5518L227.785 85.1611H248.155V139ZM227.934 111.408C227.934 109.416 227.851 107.723 227.685 106.328C227.552 104.934 227.32 103.805 226.988 102.941C226.656 102.045 226.224 101.414 225.693 101.049C225.162 100.65 224.514 100.451 223.751 100.451C220.364 100.451 218.67 104.95 218.67 113.948C218.67 120.39 220.181 123.61 223.203 123.61C226.357 123.61 227.934 119.543 227.934 111.408ZM303.962 85.1611V140.544C303.962 144.761 303.381 148.413 302.219 151.501C301.057 154.356 299.164 156.797 296.541 158.822C292.125 162.242 286.514 163.952 279.707 163.952C272.369 163.952 266.741 162.375 262.823 159.221C258.905 156.066 256.482 151.152 255.552 144.479H275.972C276.105 147.4 277.499 148.861 280.155 148.861C281.849 148.861 283.044 148.264 283.741 147.068C284.439 145.906 284.787 143.964 284.787 141.241V132.725C281.234 137.373 277.051 139.697 272.236 139.697C267.024 139.697 262.807 137.157 259.586 132.077C256.399 126.997 254.805 120.323 254.805 112.056C254.805 103.821 256.399 97.0811 259.586 91.835C262.807 86.6221 266.974 84.0156 272.087 84.0156C274.444 84.0156 276.503 84.6133 278.263 85.8086C280.089 87.0371 282.065 89.1787 284.19 92.2334L283.791 85.1611H303.962ZM284.588 111.906C284.588 104.137 283.16 100.252 280.305 100.252C277.084 100.252 275.474 104.037 275.474 111.607C275.474 119.41 277.034 123.312 280.155 123.312C283.11 123.312 284.588 119.51 284.588 111.906ZM340.545 120.771L360.068 121.17C358.673 127.445 355.951 132.177 351.9 135.364C347.882 138.519 342.62 140.096 336.112 140.096C328.409 140.096 322.366 137.705 317.983 132.924C313.633 128.076 311.459 121.452 311.459 113.052C311.459 104.519 313.799 97.5625 318.481 92.1836C323.163 86.7715 329.206 84.0654 336.61 84.0654C343.981 84.0654 349.858 86.6719 354.241 91.8848C358.624 97.1309 360.815 104.087 360.815 112.753L360.715 116.289H331.43C331.663 121.801 333.223 124.557 336.112 124.557C338.37 124.557 339.847 123.295 340.545 120.771ZM340.993 105.531C340.993 104.535 340.877 103.622 340.644 102.792C340.412 101.962 340.08 101.248 339.648 100.65C339.25 100.053 338.768 99.5879 338.204 99.2559C337.639 98.8906 337.025 98.708 336.361 98.708C334.966 98.708 333.837 99.3555 332.974 100.65C332.111 101.912 331.679 103.539 331.679 105.531H340.993ZM387.536 139H367.565V85.1611H387.536L386.49 95.6699C389.512 87.8008 394.509 83.8662 401.482 83.8662V106.278C399.29 105.083 397.431 104.485 395.903 104.485C393.214 104.485 391.139 105.465 389.678 107.424C388.25 109.35 387.536 112.172 387.536 115.891V139Z" fill="#111D27"/>
|
|
5
|
+
</svg>
|
|
@@ -27,6 +27,7 @@ export declare const MailstockBlack: Story;
|
|
|
27
27
|
export declare const MailwrapBlack: Story;
|
|
28
28
|
export declare const MailstepBlack: Story;
|
|
29
29
|
export declare const MailstepWhite: Story;
|
|
30
|
+
export declare const WarehouseManager: Story;
|
|
30
31
|
export declare const SizeSmall: Story;
|
|
31
32
|
export declare const SizeMedium: Story;
|
|
32
33
|
export declare const SizeBig: Story;
|
|
@@ -7,106 +7,112 @@ var meta = {
|
|
|
7
7
|
default: 'darkGray',
|
|
8
8
|
values: [
|
|
9
9
|
{ name: 'darkGray', value: '#333' },
|
|
10
|
-
{ name: 'lightGray', value: '#eee' }
|
|
11
|
-
]
|
|
12
|
-
}
|
|
10
|
+
{ name: 'lightGray', value: '#eee' }
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
13
|
},
|
|
14
14
|
tags: ['autodocs'],
|
|
15
|
-
argTypes: {}
|
|
15
|
+
argTypes: {}
|
|
16
16
|
};
|
|
17
17
|
export default meta;
|
|
18
18
|
export var MailshipBlack = {
|
|
19
19
|
args: {
|
|
20
20
|
variant: 'black',
|
|
21
|
-
brand: 'mailship'
|
|
22
|
-
}
|
|
21
|
+
brand: 'mailship'
|
|
22
|
+
}
|
|
23
23
|
};
|
|
24
24
|
export var MailshipWhite = {
|
|
25
25
|
args: {
|
|
26
26
|
brand: 'mailship',
|
|
27
|
-
variant: 'white'
|
|
28
|
-
}
|
|
27
|
+
variant: 'white'
|
|
28
|
+
}
|
|
29
29
|
};
|
|
30
30
|
export var MailshipM = {
|
|
31
31
|
args: {
|
|
32
32
|
brand: 'mailship',
|
|
33
|
-
variant: 'm'
|
|
34
|
-
}
|
|
33
|
+
variant: 'm'
|
|
34
|
+
}
|
|
35
35
|
};
|
|
36
36
|
export var MailshipS = {
|
|
37
37
|
args: {
|
|
38
38
|
brand: 'mailship',
|
|
39
|
-
variant: 's'
|
|
40
|
-
}
|
|
39
|
+
variant: 's'
|
|
40
|
+
}
|
|
41
41
|
};
|
|
42
42
|
export var MailwiseBlack = {
|
|
43
43
|
args: {
|
|
44
44
|
brand: 'mailwise',
|
|
45
|
-
variant: 'black'
|
|
46
|
-
}
|
|
45
|
+
variant: 'black'
|
|
46
|
+
}
|
|
47
47
|
};
|
|
48
48
|
export var MailwiseS = {
|
|
49
49
|
args: {
|
|
50
50
|
brand: 'mailwise',
|
|
51
|
-
variant: 's'
|
|
52
|
-
}
|
|
51
|
+
variant: 's'
|
|
52
|
+
}
|
|
53
53
|
};
|
|
54
54
|
export var MailstockBlack = {
|
|
55
55
|
args: {
|
|
56
56
|
brand: 'mailstock',
|
|
57
|
-
variant: 'black'
|
|
58
|
-
}
|
|
57
|
+
variant: 'black'
|
|
58
|
+
}
|
|
59
59
|
};
|
|
60
60
|
export var MailwrapBlack = {
|
|
61
61
|
args: {
|
|
62
62
|
brand: 'mailwrap',
|
|
63
|
-
variant: 'black'
|
|
64
|
-
}
|
|
63
|
+
variant: 'black'
|
|
64
|
+
}
|
|
65
65
|
};
|
|
66
66
|
export var MailstepBlack = {
|
|
67
67
|
args: {
|
|
68
68
|
brand: 'mailstep',
|
|
69
|
-
variant: 'black'
|
|
70
|
-
}
|
|
69
|
+
variant: 'black'
|
|
70
|
+
}
|
|
71
71
|
};
|
|
72
72
|
export var MailstepWhite = {
|
|
73
73
|
args: {
|
|
74
74
|
brand: 'mailstep',
|
|
75
|
-
variant: 'white'
|
|
76
|
-
}
|
|
75
|
+
variant: 'white'
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
export var WarehouseManager = {
|
|
79
|
+
args: {
|
|
80
|
+
brand: 'warehouse',
|
|
81
|
+
variant: 'black'
|
|
82
|
+
}
|
|
77
83
|
};
|
|
78
84
|
export var SizeSmall = {
|
|
79
85
|
args: {
|
|
80
86
|
variant: 'black',
|
|
81
87
|
brand: 'mailship',
|
|
82
|
-
size: 'small'
|
|
83
|
-
}
|
|
88
|
+
size: 'small'
|
|
89
|
+
}
|
|
84
90
|
};
|
|
85
91
|
export var SizeMedium = {
|
|
86
92
|
args: {
|
|
87
93
|
variant: 'black',
|
|
88
94
|
brand: 'mailship',
|
|
89
|
-
size: 'medium'
|
|
90
|
-
}
|
|
95
|
+
size: 'medium'
|
|
96
|
+
}
|
|
91
97
|
};
|
|
92
98
|
export var SizeBig = {
|
|
93
99
|
args: {
|
|
94
100
|
variant: 'black',
|
|
95
101
|
brand: 'mailship',
|
|
96
|
-
size: 'big'
|
|
97
|
-
}
|
|
102
|
+
size: 'big'
|
|
103
|
+
}
|
|
98
104
|
};
|
|
99
105
|
export var SizeCustomWidth = {
|
|
100
106
|
args: {
|
|
101
107
|
variant: 'black',
|
|
102
108
|
brand: 'mailship',
|
|
103
|
-
width: '400px'
|
|
104
|
-
}
|
|
109
|
+
width: '400px'
|
|
110
|
+
}
|
|
105
111
|
};
|
|
106
112
|
export var SizeCustomHeight = {
|
|
107
113
|
args: {
|
|
108
114
|
variant: 'black',
|
|
109
115
|
brand: 'mailship',
|
|
110
|
-
height: '200px'
|
|
111
|
-
}
|
|
116
|
+
height: '200px'
|
|
117
|
+
}
|
|
112
118
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type Brand = 'mailship' | 'mailwise' | 'mailstock' | 'mailstep' | 'mailwrap';
|
|
1
|
+
export type Brand = 'mailship' | 'mailwise' | 'mailstock' | 'mailstep' | 'mailwrap' | 'warehouse';
|
|
2
2
|
export type Variant = 'white' | 'black' | 'm' | 's';
|
|
3
3
|
export type Size = 'small' | 'medium' | 'big' | undefined;
|
|
4
4
|
export type LogoProps = {
|