@appquality/unguess-design-system 2.7.1 → 2.8.2

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# v2.8.2 (Tue Apr 12 2022)
+
+
+
+---
+
+# v2.8.1 (Tue Apr 12 2022)
+
+#### 🐛 Bug Fix
+
+- fix(sidebar): add navToggle callback [#32](https://github.com/AppQuality/unguess-design-system/pull/32) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.8.0 (Tue Apr 12 2022)
+
+#### 🚀 Enhancement
+
+- Fix/components for release [#31](https://github.com/AppQuality/unguess-design-system/pull/31) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.7.1 (Fri Apr 08 2022)
 
 

package/build/index.js

@@ -593,7 +593,7 @@ var getTypeData = function (type) {
             };
     }
 };
-var Wrapper = styled__default["default"](Card)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: 1rem;\n  border: 1px solid ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
+var Wrapper = styled__default["default"](Card)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\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  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"])), theme.borderRadii.lg, theme.palette.grey["200"], theme.shadows.boxShadow(theme));
 var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), theme.palette.grey["700"]);
 var StyledTagNew = styled__default["default"](Tag)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -604,27 +604,27 @@ 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 || (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 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 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"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: ", ";\n"])), theme.space.xxl);
+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"])));
 var CampaignCard = function (props) {
-    var isNew = props.isNew, date = props.date, title = props.title, subTitle = props.subTitle, status = props.status, type = props.type, labelNew = props.labelNew;
+    var isNew = props.isNew, date = props.date, projectTitle = props.projectTitle, campaignTitle = props.campaignTitle, status = props.status, type = props.type, labelNew = props.labelNew;
     var StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     var typeData = getTypeData(type);
     var PillIcon = typeData === null || typeData === void 0 ? void 0 : typeData.pillIcon;
-    var titleCut = title;
-    if (title.length > 42) {
-        titleCut = "".concat(title.substring(0, 39), "...");
+    var projectTitleCut = projectTitle;
+    if (projectTitle.length > 42) {
+        projectTitleCut = "".concat(projectTitle.substring(0, 39), "...");
     }
-    var subTitleCut = subTitle;
-    if (subTitle.length > 29) {
-        subTitleCut = "".concat(subTitle.substring(0, 26), "...");
+    var campaignTitleCut = campaignTitle;
+    if (campaignTitle.length > 29) {
+        campaignTitleCut = "".concat(campaignTitle.substring(0, 26), "...");
     }
-    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: titleCut })), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: subTitleCut }))] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsxs(CardFooter, { children: [typeData &&
+    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, templateObject_7, templateObject_8, templateObject_9;
+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;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1564,8 +1564,12 @@ var Sidebar = function (props) {
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
     };
-    return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: "12 Tokens" }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return setNav("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
-                props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return setNav(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
+    var navigate = function (route) {
+        props.onNavToggle && props.onNavToggle(route);
+        setNav(route);
+    };
+    return (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), props.projects &&
+                props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
 var templateObject_1$f;
 
@@ -1759,16 +1763,23 @@ 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"])));
-var Description = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  justify-content: space-between;\n  text-align: center;\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: center;\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"]);
+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 HelpItem = function (props) {
     var _a, _b, _c;
+    var csm = props.csm;
+    var email = csm.email;
     var copyToClipBoard = function () {
         navigator.clipboard.writeText(props.csm.email);
     };
-    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, __assign({ style: { color: theme.palette.blue[600] } }, { 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: props.csm.email })), 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"] }))] })] }));
+    var csmEmailCut = email;
+    if (email.length > 24) {
+        csmEmailCut = "".concat(email.substring(0, 21), "...");
+    }
+    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;
+var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5, templateObject_6;
 
 var _path$1;
 

package/build/stories/campaignCards/_types.d.ts

@@ -12,11 +12,11 @@ export interface CampaignCardsProps extends CardProps {
     /**
      * the main topic of the card
      */
-    title: string;
+    projectTitle: string;
     /**
      * a specification to the topic of the card
      */
-    subTitle: string;
+    campaignTitle: string;
     /**
      * the status of the card,
      * can be only

package/build/stories/navigation/sidebar/_types.d.ts

@@ -5,8 +5,10 @@ export interface SidebarArgs extends NavArgs {
     homeItemLabel?: string;
     dividerLabel?: string;
     tokens?: string;
+    tokensLabel?: string;
     isExpanded?: boolean;
     onToggleMenu?: () => void;
+    onNavToggle?: (route: string) => void;
 }
 export interface ProjectItem {
     id: string;

package/package.json

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