@appquality/unguess-design-system 2.8.23 → 2.8.24
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/CHANGELOG.md +12 -0
- package/build/index.js +23 -21
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.8.24 (Fri Apr 15 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- fix(profilemodal): fix wrong theme background color in sub menu-item [#38](https://github.com/AppQuality/unguess-design-system/pull/38) ([@cannarocks](https://github.com/cannarocks))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.8.23 (Fri Apr 15 2022)
|
|
2
14
|
|
|
3
15
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -595,7 +595,7 @@ var getTypeData = function (type) {
|
|
|
595
595
|
};
|
|
596
596
|
var Wrapper = styled__default["default"](Card)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n\n border-radius: ", ";\n padding: 1rem;\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
|
|
597
597
|
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), theme.palette.grey["700"]);
|
|
598
|
-
var StyledTagNew = styled__default["default"](Tag)(templateObject_3$
|
|
598
|
+
var StyledTagNew = styled__default["default"](Tag)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px ", "px;\n color: ", ";\n"])), function (_a) {
|
|
599
599
|
var theme = _a.theme;
|
|
600
600
|
return theme.space.base * 6;
|
|
601
601
|
}, theme.space.base, function (_a) {
|
|
@@ -604,7 +604,7 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templa
|
|
|
604
604
|
}, theme.palette.white);
|
|
605
605
|
var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
|
|
606
606
|
var StyledTitleLabel = styled__default["default"](Label)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
|
|
607
|
-
var Divider = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
|
|
607
|
+
var Divider = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), theme.space.lg, theme.palette.grey["300"]);
|
|
608
608
|
var CardHeader = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n height: ", "px;\n"])), theme.space.base * 6);
|
|
609
609
|
var CardBody = styled__default["default"].div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n margin-top: ", ";\n flex: 1;\n"])), theme.space.xxl);
|
|
610
610
|
var CardFooter = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
@@ -624,7 +624,7 @@ var CampaignCard = function (props) {
|
|
|
624
624
|
return jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody, { children: [jsxRuntime.jsx(StyledLabel, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
|
|
625
625
|
jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] })), jsxRuntime.jsx(StatusIcon, {})] })] }));
|
|
626
626
|
};
|
|
627
|
-
var templateObject_1$K, templateObject_2$c, templateObject_3$
|
|
627
|
+
var templateObject_1$K, templateObject_2$c, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
628
628
|
|
|
629
629
|
/**
|
|
630
630
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -1296,7 +1296,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
|
|
|
1296
1296
|
var theme = _a.theme;
|
|
1297
1297
|
return theme.breakpoints.sm;
|
|
1298
1298
|
});
|
|
1299
|
-
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$
|
|
1299
|
+
var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
1300
1300
|
var theme = _a.theme;
|
|
1301
1301
|
return theme.palette.blue["600"];
|
|
1302
1302
|
}, function (_a) {
|
|
@@ -1306,7 +1306,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
|
|
|
1306
1306
|
var BrandItem = function (props) {
|
|
1307
1307
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
|
|
1308
1308
|
};
|
|
1309
|
-
var templateObject_1$p, templateObject_2$b, templateObject_3$
|
|
1309
|
+
var templateObject_1$p, templateObject_2$b, templateObject_3$6;
|
|
1310
1310
|
|
|
1311
1311
|
var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.Headers.height);
|
|
1312
1312
|
/**
|
|
@@ -1659,23 +1659,23 @@ var templateObject_1$d;
|
|
|
1659
1659
|
|
|
1660
1660
|
var flexCenter = styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1661
1661
|
var flexColumnCenter = styled.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
1662
|
-
var flexStart = styled.css(templateObject_3$
|
|
1662
|
+
var flexStart = styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
1663
1663
|
var theme = _a.theme;
|
|
1664
1664
|
return (theme.rtl ? "flex-end" : "flex-start");
|
|
1665
1665
|
});
|
|
1666
|
-
var templateObject_1$c, templateObject_2$7, templateObject_3$
|
|
1666
|
+
var templateObject_1$c, templateObject_2$7, templateObject_3$5;
|
|
1667
1667
|
|
|
1668
1668
|
/**
|
|
1669
1669
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
1670
1670
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
1671
1671
|
**/
|
|
1672
|
-
var StyledItem = styled__default["default"].li(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n
|
|
1672
|
+
var StyledItem = styled__default["default"].li(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
1673
1673
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
1674
1674
|
}, function (props) {
|
|
1675
1675
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
1676
1676
|
});
|
|
1677
1677
|
var StyledBody$3 = styled__default["default"].li(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
1678
|
-
var IconContainer = styled__default["default"].div(templateObject_3$
|
|
1678
|
+
var IconContainer = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
|
|
1679
1679
|
var theme = _a.theme;
|
|
1680
1680
|
return theme.space.sm;
|
|
1681
1681
|
});
|
|
@@ -1688,7 +1688,7 @@ var MenuItem = function (_a) {
|
|
|
1688
1688
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
1689
1689
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
1690
1690
|
};
|
|
1691
|
-
var templateObject_1$b, templateObject_2$6, templateObject_3$
|
|
1691
|
+
var templateObject_1$b, templateObject_2$6, templateObject_3$4, templateObject_4$2;
|
|
1692
1692
|
|
|
1693
1693
|
var _path$4;
|
|
1694
1694
|
|
|
@@ -1745,8 +1745,8 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
1745
1745
|
})));
|
|
1746
1746
|
};
|
|
1747
1747
|
|
|
1748
|
-
var StyledButton$
|
|
1749
|
-
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$
|
|
1748
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
1749
|
+
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
1750
1750
|
var templateObject_1$a;
|
|
1751
1751
|
|
|
1752
1752
|
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
|
|
@@ -1762,20 +1762,21 @@ var getInitials = function (name) {
|
|
|
1762
1762
|
return initials;
|
|
1763
1763
|
};
|
|
1764
1764
|
|
|
1765
|
-
var StyledButton = styled__default["default"](Button)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n
|
|
1766
|
-
var
|
|
1765
|
+
var StyledButton$1 = styled__default["default"](Button)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
1766
|
+
var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
|
|
1767
|
+
var StyledBody$2 = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
|
|
1767
1768
|
var theme = _a.theme;
|
|
1768
1769
|
return theme.space.base * 6;
|
|
1769
1770
|
}, function (_a) {
|
|
1770
1771
|
var theme = _a.theme;
|
|
1771
1772
|
return theme.space.base * 4;
|
|
1772
1773
|
});
|
|
1773
|
-
var StyledParagraph = styled__default["default"](Paragraph)(
|
|
1774
|
+
var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (_a) {
|
|
1774
1775
|
var theme = _a.theme;
|
|
1775
1776
|
return theme.space.base * 4;
|
|
1776
1777
|
});
|
|
1777
|
-
var Footer = styled__default["default"].div(
|
|
1778
|
-
var Description = styled__default["default"].div(
|
|
1778
|
+
var Footer = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
|
|
1779
|
+
var Description = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"], ["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
|
|
1779
1780
|
var HelpItem = function (props) {
|
|
1780
1781
|
var _a, _b, _c;
|
|
1781
1782
|
var csm = props.csm;
|
|
@@ -1787,10 +1788,10 @@ var HelpItem = function (props) {
|
|
|
1787
1788
|
if (email.length > 24) {
|
|
1788
1789
|
csmEmailCut = "".concat(email.substring(0, 21), "...");
|
|
1789
1790
|
}
|
|
1790
|
-
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(
|
|
1791
|
+
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
|
|
1791
1792
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
|
|
1792
1793
|
};
|
|
1793
|
-
var templateObject_1$8, templateObject_2$5, templateObject_3$
|
|
1794
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$3, templateObject_4$1, templateObject_5, templateObject_6;
|
|
1794
1795
|
|
|
1795
1796
|
var _path$1;
|
|
1796
1797
|
|
|
@@ -1848,12 +1849,13 @@ var StyledBody$1 = styled__default["default"].div(templateObject_1$7 || (templat
|
|
|
1848
1849
|
return theme.space.base * 4;
|
|
1849
1850
|
});
|
|
1850
1851
|
var StyledButtonContainer = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
|
|
1852
|
+
var StyledButton = styled__default["default"](Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
1851
1853
|
var LanguageItem = function (props) {
|
|
1852
1854
|
var _a;
|
|
1853
|
-
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(
|
|
1855
|
+
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
|
|
1854
1856
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
|
|
1855
1857
|
};
|
|
1856
|
-
var templateObject_1$7, templateObject_2$4;
|
|
1858
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$2;
|
|
1857
1859
|
|
|
1858
1860
|
var ProfileContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
|
|
1859
1861
|
var theme = _a.theme;
|