@appquality/unguess-design-system 2.12.84 → 2.12.86

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.12.86 (Mon May 08 2023)
+
+#### 🐛 Bug Fix
+
+- Develop [#235](https://github.com/AppQuality/unguess-design-system/pull/235) ([@marcbon](https://github.com/marcbon))
+- 🚀 feat(profile-modal): add onCopyEmail and chatSupport props to UserMenuArgs [#234](https://github.com/AppQuality/unguess-design-system/pull/234) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.12.85 (Wed May 03 2023)
+
+#### 🐛 Bug Fix
+
+- fix(toast): add props with children [#233](https://github.com/AppQuality/unguess-design-system/pull/233) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.84 (Tue May 02 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -277,33 +277,28 @@ const colors = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors
 
 var _a, _b, _c, _d, _e, _f, _g$8, _h;
 const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), "notifications.notification": ({ type, isPrimary, }) => {
-        return Object.assign(Object.assign(Object.assign(Object.assign({ "svg": {
-                marginTop: "-1px",
-            } }, (type === "success" &&
+        const svgCss = {
+            marginTop: "-1px",
+        };
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (type === "success" &&
             isPrimary && {
             backgroundColor: palette.green[700],
-            svg: {
-                color: palette.white,
-            },
+            svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "warning" &&
             isPrimary && {
             backgroundColor: palette.yellow[700],
-            svg: {
-                color: palette.white,
-            },
+            svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "error" &&
             isPrimary && {
             backgroundColor: palette.red[700],
-            svg: {
-                color: palette.white,
-            },
+            svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
         })), (type === "info" &&
             isPrimary && {
             backgroundColor: palette.blue[700],
-            svg: {
-                color: palette.white,
-            },
-        }));
+            svg: Object.assign(Object.assign({}, svgCss), { color: palette.white }),
+        })), !isPrimary && {
+            svg: svgCss,
+        });
     }, "notifications.notification.close": ({ type, isPrimary, }) => {
         return Object.assign(Object.assign(Object.assign(Object.assign({ cursor: "pointer" }, (type === "success" &&
             isPrimary && {
@@ -332,11 +327,11 @@ const components = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.co
         }));
     }, "notifications.notification.close-icon": () => {
         return {
-            "position": "relative",
-            "top": "unset",
-            "right": "unset",
-            "width": "auto",
-            "height": "auto",
+            position: "relative",
+            top: "unset",
+            right: "unset",
+            width: "auto",
+            height: "auto",
         };
     }, "notifications.notification.title": ({ type, isPrimary, }) => {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, (type === "success" &&
@@ -3865,6 +3860,7 @@ const UgNotification = styled__default["default"](reactNotifications.Notificatio
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-right: ${({ theme }) => theme.space.md};
 
   ${UgAnchor} {
     flex-shrink: 0;
@@ -4841,7 +4837,9 @@ const StyledButton$1 = styled__default["default"](Button) `
   &:focus,
   &:active {
     background-color: ${props.theme.palette.kale[100]};
-    color: ${props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800]};
+    color: ${props.isDanger
+    ? props.theme.palette.red[500]
+    : props.theme.palette.grey[800]};
   }`};
 `;
 const StyledFooterButton = styled__default["default"](StyledButton$1) `
@@ -4881,7 +4879,11 @@ const HelpItem = (props) => {
     if (email.length > 24) {
         csmEmailCut = `${email.substring(0, 21)}...`;
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, Object.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, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, Object.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, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, Object.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, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, Object.assign({ isBasic: true, onClick: () => {
+                                            var _a;
+                                            copyToClipBoard();
+                                            (_a = props.onCopyEmail) === null || _a === void 0 ? void 0 : _a.call(props);
+                                        }, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: 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, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { color: theme.palette.blue[600] }) }, { children: props.title })) }));
 };
 
@@ -4975,7 +4977,7 @@ const UserMenu = (props) => {
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item === "" && jsxRuntime.jsx(UserContainer, Object.assign({}, props.user)), jsxRuntime.jsxs(StyledList, { children: [item === "" && props.onFeedbackClick && jsxRuntime.jsx(Separator, {}), props.onFeedbackClick && (jsxRuntime.jsx(MenuItem, Object.assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgThumbsUp, {}), setActive: () => props.onFeedbackClick
                             ? props.onFeedbackClick()
-                            : console.log("feedback fired") }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, Object.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: (i) => 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: (i) => toggleItem(i), languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: (lang) => props.onSelectLanguage(lang) }), jsxRuntime.jsx(MenuItem, Object.assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgLockLockedFill, { color: theme.palette.blue[600] }), setActive: () => {
+                            : console.log("feedback fired") }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.feedbackTitle || "Give us your feedback", jsxRuntime.jsx(MD, Object.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: (i) => 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, onCopyEmail: props === null || props === void 0 ? void 0 : props.onCopyEmail, chatSupport: props === null || props === void 0 ? void 0 : props.chatSupport }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: (i) => toggleItem(i), languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: (lang) => props.onSelectLanguage(lang) }), jsxRuntime.jsx(MenuItem, Object.assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgLockLockedFill, { color: theme.palette.blue[600] }), setActive: () => {
                             if (document.querySelector(".iubenda-cs-preferences-link")) {
                                 const iubendaBtn = document.querySelector(".iubenda-cs-preferences-link");
                                 if (iubendaBtn) {

package/build/stories/notifications/index.d.ts

@@ -1,4 +1,5 @@
 import { NotificationArgs, ToastProviderArgs } from "./_types";
+import { PropsWithChildren } from "react";
 /**
  * A Notification is a passive status update that keeps users informed of system progress.
  * <hr>
@@ -6,7 +7,7 @@ import { NotificationArgs, ToastProviderArgs } from "./_types";
     - For a passive status update about user or system activity
  */
 declare const Notification: ({ closeText, message, onClose, type, isPrimary, isRegular, ...props }: NotificationArgs) => JSX.Element;
-declare const ToastProvider: (props: ToastProviderArgs) => JSX.Element;
+declare const ToastProvider: (props: PropsWithChildren<ToastProviderArgs>) => JSX.Element;
 declare const useToast: () => {
     addToast: (content: import("@zendeskgarden/react-notifications").ToastContent, options?: Partial<import("@zendeskgarden/react-notifications").IToastOptions> | undefined) => string;
     removeToast: (id: string) => void;

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

@@ -45,4 +45,6 @@ export interface UserMenuArgs extends LiHTMLAttributes<HTMLLIElement> {
     onFeedbackClick?: () => void;
     onToggleChat: () => void;
     onLogout: () => void;
+    onCopyEmail?: () => void;
+    chatSupport?: boolean;
 }

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

@@ -12,6 +12,8 @@ interface HelpItemProps extends MenuItemProps {
         email: string;
         picture?: string;
     };
+    onCopyEmail?: () => void;
+    chatSupport?: boolean;
 }
 export declare const HelpItem: (props: HelpItemProps) => JSX.Element;
 export {};

package/build/stories/theme/components.d.ts

@@ -5,14 +5,13 @@ export declare const components: {
         type: string;
         isPrimary: boolean;
     }) => {
-        backgroundColor?: string | undefined;
-        svg: {
+        svg?: {
             marginTop: string;
-            color?: undefined;
         } | {
             color: string;
-            marginTop?: undefined;
-        };
+            marginTop: string;
+        } | undefined;
+        backgroundColor?: string | undefined;
     };
     "notifications.notification.close": ({ type, isPrimary, }: {
         type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.84",
+  "version": "2.12.86",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",