@mailstep/design-system 0.6.55-beta.0 → 0.6.55
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/SideMenu.js +4 -5
- package/ui/Blocks/SideMenu/components/HamburgerMenu.d.ts +1 -1
- package/ui/Blocks/SideMenu/components/HamburgerMenu.js +3 -3
- package/ui/Blocks/SideMenu/index.d.ts +3 -0
- package/ui/Blocks/SideMenu/index.js +3 -0
- package/ui/Blocks/SideMenu/styles.d.ts +3 -0
- package/ui/Blocks/SideMenu/styles.js +26 -21
- package/ui/Blocks/SideMenu/utils/constants.d.ts +2 -0
- package/ui/Blocks/SideMenu/utils/constants.js +2 -0
- package/ui/Elements/Text/Text.d.ts +1 -1
- package/ui/Elements/Text/Text.js +15 -1
- package/ui/Elements/Text/stories/Text.stories.d.ts +1 -1
- package/ui/Elements/Text/types.d.ts +4 -2
- package/ui/Elements/Typography/Typography.d.ts +13 -116
- package/ui/Elements/Typography/Typography.js +31 -26
- package/ui/index.es.js +7307 -7360
- package/ui/index.umd.js +428 -416
- package/ui/Blocks/CommonGrid/translations.d.ts +0 -1
- package/ui/Blocks/CommonGrid/translations.js +0 -6
package/package.json
CHANGED
|
@@ -10,16 +10,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useClickOutside } from '../Modal/hooks/useClickOutside';
|
|
13
14
|
import FooterRow from './components/Footer';
|
|
14
|
-
import MenuItem from './MenuItem';
|
|
15
15
|
import { LeftMenuProvider } from './context/LeftMenuContext';
|
|
16
|
-
import
|
|
17
|
-
import {
|
|
18
|
-
import { TopLevelWrap, ScrollWrap, BodyWrap, Overlay } from './styles';
|
|
16
|
+
import MenuItem from './MenuItem';
|
|
17
|
+
import { TopLevelWrap, ScrollWrap, BodyWrap, Overlay, Container } from './styles';
|
|
19
18
|
var SideMenu = function (_a) {
|
|
20
19
|
var menuItems = _a.menuItems, isCompact = _a.isCompact, setIsCompact = _a.setIsCompact, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu, _b = _a.variant, variant = _b === void 0 ? 'dark' : _b, children = _a.children;
|
|
21
20
|
var lightMode = variant === 'light';
|
|
22
21
|
var pickerRef = useClickOutside({ onClose: onCloseLeftMenu });
|
|
23
|
-
return (
|
|
22
|
+
return (_jsx(LeftMenuProvider, { children: _jsxs(Container, { isLeftMenuOpen: isLeftMenuOpen, children: [_jsxs(TopLevelWrap, { isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, ref: pickerRef, lightMode: lightMode, children: [_jsx(ScrollWrap, { children: _jsxs(BodyWrap, { isCompact: isCompact, children: [menuItems.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode, separator: !!item.separator }, item), "".concat(item.id, "-").concat(index))); }), children] }) }), _jsx(FooterRow, { isCompact: isCompact, setIsCompact: setIsCompact, lightMode: lightMode })] }), _jsx(Overlay, {})] }) }));
|
|
24
23
|
};
|
|
25
24
|
export default SideMenu;
|
|
@@ -2,5 +2,5 @@ type Props = {
|
|
|
2
2
|
isLeftMenuOpen?: boolean;
|
|
3
3
|
onClick?: () => void;
|
|
4
4
|
};
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export {};
|
|
@@ -3,18 +3,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
import { css, x } from '@xstyled/styled-components';
|
|
7
6
|
import styled from 'styled-components';
|
|
8
7
|
import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
|
|
9
8
|
import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
|
|
10
|
-
import {
|
|
9
|
+
import { css, x } from '@xstyled/styled-components';
|
|
11
10
|
import { useTheme } from '@xstyled/styled-components';
|
|
11
|
+
import { th } from '@xstyled/system';
|
|
12
12
|
var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"], ["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
|
|
13
13
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
14
14
|
return isLeftMenuOpen
|
|
15
15
|
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 92%;\n top: 7px;\n z-index: 6;\n "], ["\n position: absolute;\n left: 92%;\n top: 7px;\n z-index: 6;\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n & > svg > path {\n stroke: ", ";\n }\n "], ["\n & > svg > path {\n stroke: ", ";\n }\n "])), th.color('blue2'));
|
|
16
16
|
});
|
|
17
|
-
export var
|
|
17
|
+
export var HamburgerMenuButton = function (_a) {
|
|
18
18
|
var isLeftMenuOpen = _a.isLeftMenuOpen, onClick = _a.onClick;
|
|
19
19
|
var theme = useTheme();
|
|
20
20
|
var neutralColor = th.color('neutral20')({ theme: theme });
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import { HamburgerMenuButton } from './components/HamburgerMenu';
|
|
2
|
+
import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
|
|
1
3
|
import SideMenu from './SideMenu';
|
|
2
4
|
import { MenuItemType } from './types';
|
|
3
5
|
export type { MenuItemType };
|
|
6
|
+
export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
|
|
4
7
|
export default SideMenu;
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
+
import { HamburgerMenuButton } from './components/HamburgerMenu';
|
|
2
|
+
import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
|
|
1
3
|
import SideMenu from './SideMenu';
|
|
4
|
+
export { HamburgerMenuButton, compactMenuWidth, expandedMenuWidth };
|
|
2
5
|
export default SideMenu;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { NavLink } from 'react-router-dom';
|
|
3
|
+
export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
4
|
+
isLeftMenuOpen?: boolean | undefined;
|
|
5
|
+
}, never>;
|
|
3
6
|
export declare const SubItemsWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
4
7
|
export declare const ItemsSeparator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
5
8
|
export declare const ItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
@@ -2,16 +2,21 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import styled, { css } from '@xstyled/styled-components';
|
|
6
|
-
import { th } from '@xstyled/system';
|
|
7
5
|
import { NavLink } from 'react-router-dom';
|
|
8
6
|
import Icon from '../../Elements/Icon/Icon';
|
|
9
7
|
import createRgba from '../../utils/CreateRgba/createRgba';
|
|
8
|
+
import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
|
|
9
|
+
import styled, { css } from '@xstyled/styled-components';
|
|
10
|
+
import { th } from '@xstyled/system';
|
|
10
11
|
var leftMenuAfter = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ::after {\n content: '';\n position: absolute;\n width: 60px;\n height: 40px;\n z-index: -1;\n border-radius: 9px 0 0 9px;\n left: 8px;\n top: -1px;\n }\n"], ["\n ::after {\n content: '';\n position: absolute;\n width: 60px;\n height: 40px;\n z-index: -1;\n border-radius: 9px 0 0 9px;\n left: 8px;\n top: -1px;\n }\n"])));
|
|
11
12
|
var compactMenuItem = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n padding: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n"], ["\n height: 40px;\n width: 40px;\n padding: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n"])));
|
|
12
|
-
export var
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
export var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: ", ";\n\n @media (min-width: 1024px) {\n display: block;\n align-self: stretch;\n height: fit-content;\n\n @media print {\n display: none;\n }\n }\n"], ["\n display: ", ";\n\n @media (min-width: 1024px) {\n display: block;\n align-self: stretch;\n height: fit-content;\n\n @media print {\n display: none;\n }\n }\n"])), function (_a) {
|
|
14
|
+
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
15
|
+
return (isLeftMenuOpen ? 'block' : 'none');
|
|
16
|
+
});
|
|
17
|
+
export var SubItemsWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 23px;\n border-left: 1.5px solid;\n border-color: ", ";\n"], ["\n margin-left: 23px;\n border-left: 1.5px solid;\n border-color: ", ";\n"])), th('colors.red1'));
|
|
18
|
+
export var ItemsSeparator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 1px;\n width: 100%;\n margin: 12px 0;\n background-color: ", ";\n"], ["\n height: 1px;\n width: 100%;\n margin: 12px 0;\n background-color: ", ";\n"])), th('colors.lightGray6'));
|
|
19
|
+
export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_a) {
|
|
15
20
|
var $isCompact = _a.$isCompact;
|
|
16
21
|
return ($isCompact ? 'column' : 'row');
|
|
17
22
|
}, function (_a) {
|
|
@@ -21,12 +26,12 @@ export var ItemLabel = styled.div(templateObject_5 || (templateObject_5 = __make
|
|
|
21
26
|
var isSubitem = _a.isSubitem;
|
|
22
27
|
return (isSubitem ? '15px' : '0');
|
|
23
28
|
});
|
|
24
|
-
export var ItemDropdownArrow = styled(Icon)(
|
|
29
|
+
export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"], ["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"])), function (_a) {
|
|
25
30
|
var $lightMode = _a.$lightMode;
|
|
26
31
|
return ($lightMode ? th.color('typoPrimary') : 'white');
|
|
27
32
|
});
|
|
28
|
-
export var TooltipItemLabel = styled.div(
|
|
29
|
-
export var ItemLinkWrap = styled(NavLink)(
|
|
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)(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) {
|
|
30
35
|
var $isCompact = _a.$isCompact;
|
|
31
36
|
return ($isCompact ? 'column' : 'row');
|
|
32
37
|
}, function (_a) {
|
|
@@ -69,7 +74,7 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_8 || (templateObject_8
|
|
|
69
74
|
var $lightMode = _a.$lightMode;
|
|
70
75
|
return ($lightMode ? th.color('red1') : th.color('white'));
|
|
71
76
|
});
|
|
72
|
-
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) {
|
|
73
78
|
var $lightMode = _a.$lightMode;
|
|
74
79
|
return ($lightMode ? th.color('blue2') : undefined);
|
|
75
80
|
}, ItemLabel, ItemLabel, function (_a) {
|
|
@@ -82,17 +87,17 @@ export var MenuItemContainer = styled.div(templateObject_13 || (templateObject_1
|
|
|
82
87
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
|
|
83
88
|
return $isCompact &&
|
|
84
89
|
hasChildren &&
|
|
85
|
-
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) {
|
|
86
91
|
var $lightMode = _a.$lightMode;
|
|
87
92
|
return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
|
|
88
93
|
});
|
|
89
94
|
}, function (_a) {
|
|
90
95
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
|
|
91
|
-
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'));
|
|
92
97
|
}, function (_a) {
|
|
93
98
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
|
|
94
99
|
return $isCompact && hasChildren && isHovering
|
|
95
|
-
? 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');
|
|
96
101
|
}, function (_a) {
|
|
97
102
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
|
|
98
103
|
if ($isCompact)
|
|
@@ -114,14 +119,14 @@ export var MenuItemContainer = styled.div(templateObject_13 || (templateObject_1
|
|
|
114
119
|
return th.color('red20');
|
|
115
120
|
return th.color('red70');
|
|
116
121
|
}, ItemLinkWrap);
|
|
117
|
-
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) {
|
|
118
123
|
var $isCompact = _a.$isCompact;
|
|
119
124
|
return ($isCompact ? '0' : '11px');
|
|
120
125
|
}, function (_a) {
|
|
121
126
|
var $isCompact = _a.$isCompact;
|
|
122
127
|
return ($isCompact ? '4px' : '0');
|
|
123
128
|
});
|
|
124
|
-
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) {
|
|
125
130
|
var $lightMode = _a.$lightMode;
|
|
126
131
|
return ($lightMode ? th.color('white') : th.color('neutral500'));
|
|
127
132
|
}, function (_a) {
|
|
@@ -134,13 +139,13 @@ export var TooltipWrap = styled.div(templateObject_15 || (templateObject_15 = __
|
|
|
134
139
|
var $lightMode = _a.$lightMode;
|
|
135
140
|
return ($lightMode ? th.color('red20') : th.color('blue2'));
|
|
136
141
|
});
|
|
137
|
-
export var OverflowWithEllipsis = styled.span(
|
|
138
|
-
export var TopLevelWrap = styled.div(
|
|
142
|
+
export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n max-width: 140px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n max-width: 140px;\n white-space: nowrap;\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) {
|
|
139
144
|
var lightMode = _a.lightMode;
|
|
140
145
|
return (lightMode ? 'white' : th('colors.blue3'));
|
|
141
146
|
}, th('colors.lightGray6'), function (_a) {
|
|
142
147
|
var isCompact = _a.isCompact;
|
|
143
|
-
return (isCompact ?
|
|
148
|
+
return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
|
|
144
149
|
}, function (_a) {
|
|
145
150
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
146
151
|
return (isLeftMenuOpen ? '0' : undefined);
|
|
@@ -148,10 +153,10 @@ export var TopLevelWrap = styled.div(templateObject_17 || (templateObject_17 = _
|
|
|
148
153
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
149
154
|
return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
|
|
150
155
|
});
|
|
151
|
-
export var ScrollWrap = styled.div(
|
|
152
|
-
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) {
|
|
153
158
|
var isCompact = _a.isCompact;
|
|
154
159
|
return (isCompact ? '24px 9px' : '24px 22px');
|
|
155
160
|
});
|
|
156
|
-
export var Overlay = styled.div(
|
|
157
|
-
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;
|
|
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/Text/Text.js
CHANGED
|
@@ -9,7 +9,21 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
12
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
24
|
import { x } from '@xstyled/styled-components';
|
|
14
|
-
var Text = function (
|
|
25
|
+
var Text = function (_a) {
|
|
26
|
+
var _b = _a.as, as = _b === void 0 ? 'span' : _b, props = __rest(_a, ["as"]);
|
|
27
|
+
return _jsx(x.div, __assign({ as: as }, props));
|
|
28
|
+
};
|
|
15
29
|
export default Text;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ComponentType, ReactNode } from 'react';
|
|
2
2
|
export type TextVariant = 'normal' | 'medium' | 'semiBold' | 'bold';
|
|
3
3
|
export type TextProps = {
|
|
4
4
|
children?: ReactNode | ReactNode[];
|
|
5
|
-
fontSize?: number;
|
|
5
|
+
fontSize?: string | number;
|
|
6
6
|
fontWeight?: string;
|
|
7
|
+
fontFamily?: string;
|
|
7
8
|
variant?: TextVariant;
|
|
8
9
|
mt?: string | number;
|
|
9
10
|
mr?: string | number;
|
|
10
11
|
mb?: string | number;
|
|
11
12
|
ml?: string | number;
|
|
12
13
|
color?: string;
|
|
14
|
+
as?: string | ComponentType<any>;
|
|
13
15
|
};
|
|
@@ -1,117 +1,14 @@
|
|
|
1
1
|
import { TextProps as BaseTextProps } from '../Text';
|
|
2
|
-
export declare const Text: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export declare const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
export declare const Paragraph2: {
|
|
17
|
-
(props: BaseTextProps): JSX.Element;
|
|
18
|
-
defaultProps: {
|
|
19
|
-
as: string;
|
|
20
|
-
fontFamily: string;
|
|
21
|
-
fontSize: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
export declare const Paragraph3: {
|
|
25
|
-
(props: BaseTextProps): JSX.Element;
|
|
26
|
-
defaultProps: {
|
|
27
|
-
as: string;
|
|
28
|
-
fontFamily: string;
|
|
29
|
-
fontSize: string;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
export declare const Paragraph4: {
|
|
33
|
-
(props: BaseTextProps): JSX.Element;
|
|
34
|
-
defaultProps: {
|
|
35
|
-
as: string;
|
|
36
|
-
fontFamily: string;
|
|
37
|
-
fontSize: string;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
export declare const Paragraph5: {
|
|
41
|
-
(props: BaseTextProps): JSX.Element;
|
|
42
|
-
defaultProps: {
|
|
43
|
-
as: string;
|
|
44
|
-
fontFamily: string;
|
|
45
|
-
fontSize: string;
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
export declare const H1: {
|
|
49
|
-
(props: BaseTextProps): JSX.Element;
|
|
50
|
-
defaultProps: {
|
|
51
|
-
as: string;
|
|
52
|
-
fontFamily: string;
|
|
53
|
-
fontSize: string;
|
|
54
|
-
mt: number;
|
|
55
|
-
mb: number;
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
export declare const H2: {
|
|
59
|
-
(props: BaseTextProps): JSX.Element;
|
|
60
|
-
defaultProps: {
|
|
61
|
-
as: string;
|
|
62
|
-
fontFamily: string;
|
|
63
|
-
fontSize: string;
|
|
64
|
-
mt: number;
|
|
65
|
-
mb: number;
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
export declare const H3: {
|
|
69
|
-
(props: BaseTextProps): JSX.Element;
|
|
70
|
-
defaultProps: {
|
|
71
|
-
as: string;
|
|
72
|
-
fontFamily: string;
|
|
73
|
-
fontSize: string;
|
|
74
|
-
mt: number;
|
|
75
|
-
mb: number;
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
export declare const H4: {
|
|
79
|
-
(props: BaseTextProps): JSX.Element;
|
|
80
|
-
defaultProps: {
|
|
81
|
-
as: string;
|
|
82
|
-
fontFamily: string;
|
|
83
|
-
fontSize: string;
|
|
84
|
-
mt: number;
|
|
85
|
-
mb: number;
|
|
86
|
-
};
|
|
87
|
-
};
|
|
88
|
-
export declare const H5: {
|
|
89
|
-
(props: BaseTextProps): JSX.Element;
|
|
90
|
-
defaultProps: {
|
|
91
|
-
as: string;
|
|
92
|
-
fontFamily: string;
|
|
93
|
-
fontSize: string;
|
|
94
|
-
mt: number;
|
|
95
|
-
mb: number;
|
|
96
|
-
};
|
|
97
|
-
};
|
|
98
|
-
export declare const H6: {
|
|
99
|
-
(props: BaseTextProps): JSX.Element;
|
|
100
|
-
defaultProps: {
|
|
101
|
-
as: string;
|
|
102
|
-
fontFamily: string;
|
|
103
|
-
fontSize: string;
|
|
104
|
-
mt: number;
|
|
105
|
-
mb: number;
|
|
106
|
-
};
|
|
107
|
-
};
|
|
108
|
-
export declare const H7: {
|
|
109
|
-
(props: BaseTextProps): JSX.Element;
|
|
110
|
-
defaultProps: {
|
|
111
|
-
as: string;
|
|
112
|
-
fontFamily: string;
|
|
113
|
-
fontSize: string;
|
|
114
|
-
mt: number;
|
|
115
|
-
mb: number;
|
|
116
|
-
};
|
|
117
|
-
};
|
|
2
|
+
export declare const Text: ({ as, fontFamily, fontSize, variant, ...props }: BaseTextProps) => JSX.Element;
|
|
3
|
+
export declare const Paragraph1: (props: BaseTextProps) => JSX.Element;
|
|
4
|
+
export declare const Paragraph2: (props: BaseTextProps) => JSX.Element;
|
|
5
|
+
export declare const Paragraph3: (props: BaseTextProps) => JSX.Element;
|
|
6
|
+
export declare const Paragraph4: (props: BaseTextProps) => JSX.Element;
|
|
7
|
+
export declare const Paragraph5: (props: BaseTextProps) => JSX.Element;
|
|
8
|
+
export declare const H1: (props: BaseTextProps) => JSX.Element;
|
|
9
|
+
export declare const H2: (props: BaseTextProps) => JSX.Element;
|
|
10
|
+
export declare const H3: (props: BaseTextProps) => JSX.Element;
|
|
11
|
+
export declare const H4: (props: BaseTextProps) => JSX.Element;
|
|
12
|
+
export declare const H5: (props: BaseTextProps) => JSX.Element;
|
|
13
|
+
export declare const H6: (props: BaseTextProps) => JSX.Element;
|
|
14
|
+
export declare const H7: (props: BaseTextProps) => JSX.Element;
|
|
@@ -9,33 +9,38 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
12
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
24
|
import { Text as BaseText } from '../Text';
|
|
14
|
-
export var Text = function (
|
|
15
|
-
|
|
25
|
+
export var Text = function (_a) {
|
|
26
|
+
var _b = _a.as, as = _b === void 0 ? 'p' : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'primary' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? '10px' : _d, variant = _a.variant, props = __rest(_a, ["as", "fontFamily", "fontSize", "variant"]);
|
|
27
|
+
return (_jsx(BaseText, __assign({ as: as, fontFamily: fontFamily, fontSize: fontSize, fontWeight: variant }, props)));
|
|
28
|
+
};
|
|
29
|
+
var BaseHeading = function (_a) {
|
|
30
|
+
var _b = _a.fontFamily, fontFamily = _b === void 0 ? 'heading' : _b, _c = _a.mb, mb = _c === void 0 ? 2 : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d, props = __rest(_a, ["fontFamily", "mb", "mt"]);
|
|
31
|
+
return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mt }, props)));
|
|
32
|
+
};
|
|
16
33
|
// Paragraphs
|
|
17
|
-
export var Paragraph1 = function (props) { return _jsx(Text, __assign({
|
|
18
|
-
|
|
19
|
-
export var
|
|
20
|
-
|
|
21
|
-
export var
|
|
22
|
-
Paragraph3.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '14px' };
|
|
23
|
-
export var Paragraph4 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
24
|
-
Paragraph4.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '12px' };
|
|
25
|
-
export var Paragraph5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
26
|
-
Paragraph5.defaultProps = { as: 'p', fontFamily: 'primary', fontSize: '10px' };
|
|
34
|
+
export var Paragraph1 = function (props) { return _jsx(Text, __assign({ fontSize: "18px" }, props)); };
|
|
35
|
+
export var Paragraph2 = function (props) { return _jsx(Text, __assign({ fontSize: "16px" }, props)); };
|
|
36
|
+
export var Paragraph3 = function (props) { return _jsx(Text, __assign({ fontSize: "14px" }, props)); };
|
|
37
|
+
export var Paragraph4 = function (props) { return _jsx(Text, __assign({ fontSize: "12px" }, props)); };
|
|
38
|
+
export var Paragraph5 = function (props) { return _jsx(Text, __assign({ fontSize: "10px" }, props)); };
|
|
27
39
|
// Headings
|
|
28
|
-
export var H1 = function (props) { return _jsx(
|
|
29
|
-
|
|
30
|
-
export var
|
|
31
|
-
|
|
32
|
-
export var
|
|
33
|
-
|
|
34
|
-
export var
|
|
35
|
-
H4.defaultProps = { as: 'h4', fontFamily: 'heading', fontSize: '18px', mt: 2, mb: 2 };
|
|
36
|
-
export var H5 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
37
|
-
H5.defaultProps = { as: 'h5', fontFamily: 'heading', fontSize: '16px', mt: 2, mb: 2 };
|
|
38
|
-
export var H6 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
39
|
-
H6.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '14px', mt: 2, mb: 2 };
|
|
40
|
-
export var H7 = function (props) { return _jsx(Text, __assign({}, props, { fontWeight: props.variant })); };
|
|
41
|
-
H7.defaultProps = { as: 'h6', fontFamily: 'heading', fontSize: '12px', mt: 2, mb: 2 };
|
|
40
|
+
export var H1 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "32px", as: "h1" }, props)); };
|
|
41
|
+
export var H2 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "24px", as: "h2" }, props)); };
|
|
42
|
+
export var H3 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "21px", as: "h3" }, props)); };
|
|
43
|
+
export var H4 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "18px", as: "h4" }, props)); };
|
|
44
|
+
export var H5 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "16px", as: "h5" }, props)); };
|
|
45
|
+
export var H6 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "14px", as: "h6" }, props)); };
|
|
46
|
+
export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12x", as: "h7" }, props)); };
|