@hitachivantara/uikit-react-lab 3.38.0

package/dist/NotificationPanel/Notification/styles.js

@@ -0,0 +1,147 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var outlineStyles = {
+  outlineColor: "#52A8EC",
+  outlineStyle: "solid",
+  outlineWidth: "0px",
+  outlineOffset: "-1px",
+  boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+};
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: "flex",
+      backgroundColor: theme.hv.palette.atmosphere.atmo1,
+      margin: "3px 3px 6px 3px",
+      "&:hover": {
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      },
+      "&$read": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo2,
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo2),
+        "&:hover": {
+          backgroundColor: theme.hv.palette.atmosphere.atmo3,
+          outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+          "&.focus-visible": _objectSpread({}, outlineStyles)
+        }
+      },
+      "&.focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "&$read": _objectSpread({}, outlineStyles),
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      })
+    },
+    notificationWrapper: {
+      display: "flex",
+      minHeight: "72px",
+      marginRight: theme.hv.spacing.xs,
+      color: theme.hv.palette.accent.acce1,
+      padding: "17px",
+      paddingRight: 0,
+      cursor: "pointer",
+      "&:focus": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        outline: "5px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+        boxShadow: "none",
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      },
+      "&.focus-visible": _objectSpread(_objectSpread({}, outlineStyles), {}, {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        "& $notificationActionWrapper": {
+          display: "block"
+        }
+      })
+    },
+    iconContainer: {
+      width: "32px",
+      minWidth: "32px",
+      marginRight: "".concat(theme.hv.spacing.sm, "px")
+    },
+    messageContainer: {
+      width: "196px",
+      maxWidth: "196px",
+      display: "-webkit-box",
+      lineClamp: 2,
+      boxOrient: "vertical",
+      overflow: "hidden"
+    },
+    title: _objectSpread(_objectSpread({}, theme.hv.typography.highlightText), {}, {
+      marginBottom: "5px"
+    }),
+    timeContainer: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
+      display: "flex",
+      alignItems: "center"
+    }),
+    bullet: {
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%",
+      marginRight: "4px",
+      backgroundColor: theme.hv.palette.accent.acce1,
+      "&$hide": {
+        display: "none"
+      }
+    },
+    hide: {},
+    read: {},
+    notificationWrapperDropdown: {
+      outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
+      backgroundColor: theme.hv.palette.atmosphere.atmo3,
+      "& $notificationActionWrapper": {
+        display: "block"
+      },
+      "&$read": {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3,
+        outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3)
+      }
+    },
+    notificationDropdownOpen: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    notificationActionWrapper: {
+      "& > div": {
+        marginTop: 17
+      }
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/NotificationPanel/Notification/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    margin: \"3px 3px 6px 3px\",\n    \"&:hover\": {\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo2,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n      \"&:hover\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n        \"&.focus-visible\": {\n          ...outlineStyles,\n        },\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"&$read\": {\n        ...outlineStyles,\n      },\n\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n  notificationWrapper: {\n    display: \"flex\",\n    minHeight: \"72px\",\n    marginRight: theme.hv.spacing.xs,\n    color: theme.hv.palette.accent.acce1,\n    padding: \"17px\",\n    paddingRight: 0,\n    cursor: \"pointer\",\n\n    \"&:focus\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      boxShadow: \"none\",\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n\n  iconContainer: {\n    width: \"32px\",\n    minWidth: \"32px\",\n    marginRight: `${theme.hv.spacing.sm}px`,\n  },\n\n  messageContainer: {\n    width: \"196px\",\n    maxWidth: \"196px\",\n    display: \"-webkit-box\",\n    lineClamp: 2,\n    boxOrient: \"vertical\",\n    overflow: \"hidden\",\n  },\n\n  title: {\n    ...theme.hv.typography.highlightText,\n    marginBottom: \"5px\",\n  },\n  timeContainer: {\n    ...theme.hv.typography.vizText,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  bullet: {\n    width: \"8px\",\n    height: \"8px\",\n    borderRadius: \"50%\",\n    marginRight: \"4px\",\n    backgroundColor: theme.hv.palette.accent.acce1,\n\n    \"&$hide\": {\n      display: \"none\",\n    },\n  },\n  hide: {},\n  read: {},\n  notificationWrapperDropdown: {\n    outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    \"& $notificationActionWrapper\": {\n      display: \"block\",\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    },\n  },\n\n  notificationDropdownOpen: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n\n  notificationActionWrapper: {\n    \"& > div\": {\n      marginTop: 17,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/NotificationPanel/NotificationPanel.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+import { HvDropDownMenuProps } from "@hitachivantara/uikit-react-core";
+
+export interface Actions {
+  values: string;
+  dropDownMenuProps: HvDropDownMenuProps;
+}
+
+export interface Labels {
+  notificationGroupHeader: {
+    newNotifications: string;
+    olderNotifications: string;
+  };
+  notificationIndicator: {
+    label: string;
+    buttonLabel: string;
+  };
+}
+
+interface Header {
+  /**
+   * The title of the header
+   */
+  headerTitle: string;
+  /**
+   * The icon that denoted close functionality
+   */
+  headerCloseImg: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+}
+
+interface Value {
+  label: string;
+  action: string;
+  callback?: (notificationId: string) => void;
+}
+
+interface actions {
+  values: Value[];
+  dropDownMenuProps?: HvDropDownMenuProps;
+}
+
+interface notification {
+  id: string;
+  title: string;
+  isRead?: boolean;
+  date: string | number | Record<string, unknown>;
+  icon?: React.ReactNode;
+  onClick?: (event: Event, notificationId: string) => void;
+  onKeyPress?: (event: Event, notificationId: string) => void;
+  onToggleOpen?: (open: boolean) => void;
+  actions?: actions;
+}
+
+export type HvNotificationPanelClassKey =
+  | "root"
+  | "closed"
+  | "open"
+  | "panel"
+  | "actionBar"
+  | "actionBarRoot"
+  | "notificationsIndicator";
+
+export interface HvNotificationPanelProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvNotificationPanelClassKey> {
+  /**
+   * 'true' if panel is open or 'false' if the panel is not open
+   *
+   * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.
+   */
+  open?: boolean;
+
+  /**
+   * Array of notification object to be rendered inside the panel
+   */
+  notifications: notification[];
+  /**
+   * Indicates that new notifications have arrived
+   */
+  hasNewNotifications?: boolean;
+
+  /**
+   * renderable footer element
+   */
+  footer?: React.ReactNode;
+
+  /**
+   * Title of the EmptyStatePanel
+   */
+  emptyStatePanelTitle?: string;
+
+  /**
+   * Message of the EmptyStatePanel
+   */
+  emptyStatePanelMessage?: string;
+
+  /**
+   * Empty Panel custom Icon
+   */
+  emptyStatePanelIcon?: React.ReactNode;
+
+  /**
+   * Labels to apply to the Panel
+   */
+  labels?: Labels[];
+
+  /**
+   * Function to be supplied to the notification update button
+   */
+  newNotificationsButtonAction?: (event: Event) => void;
+  /**
+   * The locale to be used on the notification date, if undefined it will use the one from the HvProvider
+   */
+  locale?: string;
+}
+
+export default function HvNotificationPanel(props: HvNotificationPanelProps): JSX.Element | null;