@appquality/unguess-design-system 2.8.3 → 2.8.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.8.4 (Tue Apr 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(profilemodal): add translatable props ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.8.3 (Tue Apr 12 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -604,7 +604,7 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templa
 }, theme.palette.white);
 var StyledLabel = styled__default["default"](Label)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", "\n"], ["\n  font-size: ", ";\n  color: ", "\n"])), theme.fontSizes.sm, theme.palette.grey["500"]);
 var StyledTitleLabel = styled__default["default"](Label)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n"])), theme.palette.blue["600"], theme.fontSizes.lg);
-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"]);
+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"]);
 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);
 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);
 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) {
     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 &&
                         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, {})] })] }));
 };
-var templateObject_1$H, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$H, templateObject_2$b, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1742,8 +1742,7 @@ var StyledParagraph = styled__default["default"](Paragraph)(templateObject_3$2 |
     return theme.space.base * 4;
 });
 var Footer = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  margin-top: auto;\n"], ["\n  margin-top: auto;\n"])));
-styled__default["default"](MD)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: left;\n  color: ", ";\n"], ["\n  text-align: left;\n  color: ", ";\n"])), theme.palette.blue[600]);
-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"]);
+var Description = styled__default["default"].div(templateObject_5 || (templateObject_5 = __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"]);
 var HelpItem = function (props) {
     var _a, _b, _c;
     var csm = props.csm;
@@ -1758,7 +1757,7 @@ var HelpItem = function (props) {
     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(Button, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
     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 })) }));
 };
-var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5, templateObject_6;
+var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5;
 
 var _path$1;
 
@@ -1859,7 +1858,7 @@ var UserMenu = function (props) {
     var toggleItem = function (item) {
         setActiveItem(item);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick(); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) })), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, __assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: function () { return props.onFeedbackClick ? props.onFeedbackClick() : console.log("feedback fired"); } }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.feedbackSubTitle || "Help us improve UNGUESS!" }))] }) }))), item === "" && jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(HelpItem, { value: "csm", selectedItem: item, setActive: function (i) { return toggleItem(i); }, title: props.csmTitle || "Need Help?", contactLabel: props.csmContactLabel || "Contact your CSM", csm: props.csm, toggleChat: props.onToggleChat, chatSupportLabel: props === null || props === void 0 ? void 0 : props.chatSupportLabel, copyLabel: props === null || props === void 0 ? void 0 : props.copyLabel }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: function (i) { return toggleItem(i); }, languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: function (lang) { return props.onSelectLanguage(lang); } }), jsxRuntime.jsx(MenuItem, __assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgExit, { fill: theme.palette.red[600] }), setActive: function () { return props.onLogout(); } }, { children: props.logoutTitle || "Log out" }))] })] }));
 };
 var templateObject_1$5;
 

package/build/stories/profile-modal/_types.d.ts

@@ -27,6 +27,8 @@ export interface UserMenuArgs extends LiHTMLAttributes<HTMLLIElement> {
     feedbackSubTitle?: string;
     csmTitle?: string;
     csmContactLabel?: string;
+    copyLabel?: string;
+    chatSupportLabel?: string;
     languageTitle?: string;
     currentLanguageLabel?: string;
     languages: {
@@ -35,7 +37,7 @@ export interface UserMenuArgs extends LiHTMLAttributes<HTMLLIElement> {
     currentLanguage: string;
     logoutTitle?: string;
     onSelectLanguage: (lang: string) => void;
-    onFeedbackClick: () => void;
+    onFeedbackClick?: () => void;
     onToggleChat: () => void;
     onLogout: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",