@appquality/unguess-design-system 2.12.83 → 2.12.84

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.12.84 (Tue May 02 2023)
+
+#### 🐛 Bug Fix
+
+- Develop [#232](https://github.com/AppQuality/unguess-design-system/pull/232) ([@marcbon](https://github.com/marcbon))
+- 🔨 refactor(notifications): change Notification component to use styled-components [#231](https://github.com/AppQuality/unguess-design-system/pull/231) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.83 (Tue Mar 28 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -276,7 +276,83 @@ const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.f
 const colors = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] });
 
 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" }) }), pageHeader: {
+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" &&
+            isPrimary && {
+            backgroundColor: palette.green[700],
+            svg: {
+                color: palette.white,
+            },
+        })), (type === "warning" &&
+            isPrimary && {
+            backgroundColor: palette.yellow[700],
+            svg: {
+                color: palette.white,
+            },
+        })), (type === "error" &&
+            isPrimary && {
+            backgroundColor: palette.red[700],
+            svg: {
+                color: palette.white,
+            },
+        })), (type === "info" &&
+            isPrimary && {
+            backgroundColor: palette.blue[700],
+            svg: {
+                color: palette.white,
+            },
+        }));
+    }, "notifications.notification.close": ({ type, isPrimary, }) => {
+        return Object.assign(Object.assign(Object.assign(Object.assign({ cursor: "pointer" }, (type === "success" &&
+            isPrimary && {
+            color: palette.white,
+            ":hover": {
+                color: palette.white,
+            },
+        })), (type === "warning" &&
+            isPrimary && {
+            color: palette.white,
+            ":hover": {
+                color: palette.white,
+            },
+        })), (type === "error" &&
+            isPrimary && {
+            color: palette.white,
+            ":hover": {
+                color: palette.white,
+            },
+        })), (type === "info" &&
+            isPrimary && {
+            color: palette.white,
+            ":hover": {
+                color: palette.white,
+            },
+        }));
+    }, "notifications.notification.close-icon": () => {
+        return {
+            "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" &&
+            isPrimary && {
+            color: palette.white + " !important",
+        })), (type === "warning" &&
+            isPrimary && {
+            color: palette.white + " !important",
+        })), (type === "error" &&
+            isPrimary && {
+            color: palette.white + " !important",
+        })), (type === "info" &&
+            isPrimary && {
+            color: palette.white + " !important",
+        }));
+    }, pageHeader: {
         imgMaxHeight: "214px",
     }, autocomplete: {
         thumbSize: "60px",
@@ -1795,7 +1871,7 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
             } }) })));
 };
 
-const UgClose = styled__default["default"](reactNotifications.Close) `
+const UgClose$1 = styled__default["default"](reactNotifications.Close) `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1805,7 +1881,7 @@ const UgClose = styled__default["default"](reactNotifications.Close) `
 /**
  * Title is a basic component used to display a title. Often used in card headers.
  */
-const Close = (props) => jsxRuntime.jsx(UgClose, Object.assign({}, props));
+const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
 
 const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
@@ -3766,15 +3842,49 @@ ModalFullScreen.FooterItem = FooterItem;
  */
 const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
 
+const NOTIFICATION_COMPONENT_ID = "notifications.notification";
+const CLOSE_COMPONENT_ID = "notifications.notification.close";
+const CLOSE_ICON_COMPONENT_ID = "notifications.notification.close-icon";
+const TITLE_COMPONENT_ID = "notifications.notification.title";
+const UgClose = styled__default["default"](Close).attrs({
+    "data-custom-id": CLOSE_ICON_COMPONENT_ID,
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_ICON_COMPONENT_ID, props)};
+`;
+const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs({
+    "data-custom-id": CLOSE_COMPONENT_ID,
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
+`;
+const UgTitle = styled__default["default"](Title).attrs({
+    "data-custom-id": TITLE_COMPONENT_ID,
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(TITLE_COMPONENT_ID, props)};
+`;
+const UgNotification = styled__default["default"](reactNotifications.Notification) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  ${UgAnchor} {
+    flex-shrink: 0;
+    margin-left: ${({ theme }) => theme.space.md};
+  }
+
+  ${(props) => reactTheming.retrieveComponentStyles(NOTIFICATION_COMPONENT_ID, props)};
+`;
 /**
  * A Notification is a passive status update that keeps users informed of system progress.
  * <hr>
  * Used for this:
     - For a passive status update about user or system activity
  */
-const Notification = (props) => (jsxRuntime.jsx(reactNotifications.Notification, Object.assign({}, props)));
-//Extras
-const ToastProvider = (props) => jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props));
+const Notification = (_a) => {
+    var { closeText, message, onClose, type, isPrimary, isRegular } = _a, props = __rest(_a, ["closeText", "message", "onClose", "type", "isPrimary", "isRegular"]);
+    return (jsxRuntime.jsxs(UgNotification, Object.assign({ type: type, isPrimary: isPrimary }, props, { children: [jsxRuntime.jsx(UgTitle, Object.assign({ isRegular: isRegular, type: type, isPrimary: isPrimary }, { children: message })), jsxRuntime.jsx(UgAnchor, Object.assign({ type: type, isPrimary: isPrimary, onClick: onClose }, { children: closeText !== null && closeText !== void 0 ? closeText : jsxRuntime.jsx(UgClose, {}) }))] })));
+};
+// ToastProvider
+const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props)));
 const useToast = reactNotifications.useToast;
 
 const UgPagination = styled__default["default"](reactPagination.Pagination) ``;

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

@@ -1,9 +1,11 @@
 import { INotificationProps, IToastProviderProps } from "@zendeskgarden/react-notifications";
 export interface NotificationArgs extends INotificationProps {
-    /** Applies notification type styles */
-    type?: "success" | "warning" | "error" | "info";
+    type?: "success" | "error" | "warning" | "info";
+    isPrimary?: boolean;
+    isRegular?: boolean;
+    message?: string;
+    onClose?: () => void;
+    closeText?: string;
 }
 export interface ToastProviderArgs extends IToastProviderProps {
-    /** Applies regular (non-bold) font weight */
-    isRegular?: boolean;
 }

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

@@ -5,7 +5,7 @@ import { NotificationArgs, ToastProviderArgs } from "./_types";
  * Used for this:
     - For a passive status update about user or system activity
  */
-declare const Notification: (props: NotificationArgs) => JSX.Element;
+declare const Notification: ({ closeText, message, onClose, type, isPrimary, isRegular, ...props }: NotificationArgs) => JSX.Element;
 declare const ToastProvider: (props: ToastProviderArgs) => JSX.Element;
 declare const useToast: () => {
     addToast: (content: import("@zendeskgarden/react-notifications").ToastContent, options?: Partial<import("@zendeskgarden/react-notifications").IToastOptions> | undefined) => string;

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

@@ -1,9 +1,10 @@
 import { ComponentMeta, Story } from "@storybook/react";
-import { NotificationArgs } from "./_types";
-interface NotificationStoryProps extends NotificationArgs {
-    title: string;
-    content: string;
+import { NotificationArgs, ToastProviderArgs } from "./_types";
+interface NotificationStoryProps {
+    notificationArgs: NotificationArgs;
+    toastProviderArgs: ToastProviderArgs;
 }
-export declare const Default: Story<NotificationStoryProps>;
-declare const _default: ComponentMeta<(props: NotificationArgs) => JSX.Element>;
+export declare const ToastProvider: Story<NotificationStoryProps>;
+export declare const Notification: Story<NotificationArgs>;
+declare const _default: ComponentMeta<({ closeText, message, onClose, type, isPrimary, isRegular, ...props }: NotificationArgs) => JSX.Element>;
 export default _default;

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

@@ -1,6 +1,42 @@
 export declare const components: {
     chrome: any;
     notification: any;
+    "notifications.notification": ({ type, isPrimary, }: {
+        type: string;
+        isPrimary: boolean;
+    }) => {
+        backgroundColor?: string | undefined;
+        svg: {
+            marginTop: string;
+            color?: undefined;
+        } | {
+            color: string;
+            marginTop?: undefined;
+        };
+    };
+    "notifications.notification.close": ({ type, isPrimary, }: {
+        type: string;
+        isPrimary: boolean;
+    }) => {
+        color?: string | undefined;
+        ":hover"?: {
+            color: string;
+        } | undefined;
+        cursor: string;
+    };
+    "notifications.notification.close-icon": () => {
+        position: string;
+        top: string;
+        right: string;
+        width: string;
+        height: string;
+    };
+    "notifications.notification.title": ({ type, isPrimary, }: {
+        type: string;
+        isPrimary: boolean;
+    }) => {
+        color?: string | undefined;
+    };
     pageHeader: {
         imgMaxHeight: string;
     };

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

@@ -206,6 +206,42 @@ declare const theme: {
     components: {
         chrome: any;
         notification: any;
+        "notifications.notification": ({ type, isPrimary, }: {
+            type: string;
+            isPrimary: boolean;
+        }) => {
+            backgroundColor?: string | undefined;
+            svg: {
+                marginTop: string;
+                color?: undefined;
+            } | {
+                color: string;
+                marginTop?: undefined;
+            };
+        };
+        "notifications.notification.close": ({ type, isPrimary, }: {
+            type: string;
+            isPrimary: boolean;
+        }) => {
+            color?: string | undefined;
+            ":hover"?: {
+                color: string;
+            } | undefined;
+            cursor: string;
+        };
+        "notifications.notification.close-icon": () => {
+            position: string;
+            top: string;
+            right: string;
+            width: string;
+            height: string;
+        };
+        "notifications.notification.title": ({ type, isPrimary, }: {
+            type: string;
+            isPrimary: boolean;
+        }) => {
+            color?: string | undefined;
+        };
         pageHeader: {
             imgMaxHeight: string;
         };

package/package.json

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