@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTActionCard/components/HeaderActions/index.js

@@ -0,0 +1,121 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Fragment, memo, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, elementType, func, number, oneOf, oneOfType, shape, string } from 'prop-types';
+import UTButton from '../../../UTButton';
+import UTButtonGroup from '../../../UTButtonGroup';
+import UTMenu from '../../../UTMenu';
+import UTTooltip from '../../../UTTooltip';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES } from '../../constants';
+import { processActions } from './utils';
+import styles from './styles.module.scss';
+const HeaderActions = _ref => {
+  var _headerActions$find, _secondaryActions$;
+  let {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  } = _ref;
+  const [menu, setMenu] = useState();
+  const [selectedAction, setSelectedAction] = useState((_headerActions$find = headerActions.find(_ref2 => {
+    let {
+      selectedDefault
+    } = _ref2;
+    return selectedDefault;
+  })) === null || _headerActions$find === void 0 ? void 0 : _headerActions$find.id);
+  const showButtonGroup = headerActionsProps.variant === HEADER_ACTIONS_VARIANTS.BUTTON_GROUP;
+  const {
+    colorTheme: buttonGroupColorTheme = 'secondary',
+    shape: buttonGroupShape
+  } = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonGroupProps) || {};
+  const handleSetMainActionHoverVisible = () => setMainActionHoverVisible(true);
+  const handleSetMainActionHoverHidden = () => setMainActionHoverVisible(false);
+  const openMenu = event => setMenu(event.currentTarget);
+  const closeMenu = () => {
+    handleSetMainActionHoverVisible();
+    setMenu();
+  };
+  const {
+    primaryActions,
+    secondaryActions
+  } = processActions(headerActions, !showButtonGroup ? closeMenu : null);
+  const buttonSize = (headerActionsProps === null || headerActionsProps === void 0 ? void 0 : headerActionsProps.buttonSize) || 'medium';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerActionsContainer, " ").concat(styles["placeSelf-".concat(headerActionsProps.alignment)]),
+    onClick: e => e.stopPropagation(),
+    onMouseEnter: handleSetMainActionHoverHidden,
+    onMouseLeave: handleSetMainActionHoverVisible
+  }, primaryActions.map(buttonProps => /*#__PURE__*/React.createElement(UTTooltip, {
+    tippyProps: {
+      appendTo: () => document.body,
+      interactive: false
+    },
+    content: buttonProps.label && /*#__PURE__*/React.createElement("span", null, buttonProps.label)
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, _extends({}, buttonProps, {
+    classNames: {
+      root: styles.zIndex
+    },
+    size: buttonSize,
+    variant: "text"
+  }), buttonProps.title)))), !isEmpty(secondaryActions) && (!showButtonGroup ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: menu,
+    iconBefore: true,
+    items: secondaryActions,
+    menuPlacement: "bottom-end",
+    onClose: closeMenu,
+    scrollBarProps: {
+      options: {
+        suppressScrollY: true,
+        suppressScrollX: true
+      }
+    }
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: styles.zIndex
+    },
+    Icon: "IconDots",
+    onClick: e => {
+      e.stopPropagation();
+      if (menu) {
+        setMenu();
+      } else {
+        openMenu(e);
+      }
+    },
+    size: "medium",
+    variant: "text"
+  })) : /*#__PURE__*/React.createElement(UTButtonGroup, {
+    actions: secondaryActions.map(action => ({
+      ...action,
+      onClick: () => {
+        setSelectedAction(action.id);
+        action.onClick();
+      }
+    })),
+    colorTheme: buttonGroupColorTheme,
+    selected: selectedAction || ((_secondaryActions$ = secondaryActions[0]) === null || _secondaryActions$ === void 0 ? void 0 : _secondaryActions$.id),
+    shape: buttonGroupShape
+  })));
+};
+HeaderActions.propTypes = {
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    id: oneOfType([number, string]),
+    isPrimary: bool,
+    title: string,
+    label: string,
+    loading: bool,
+    onClick: func,
+    selectedDefault: bool
+  })),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({
+      colorTheme: string,
+      shape: string
+    }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  setMainActionHoverVisible: func
+};
+export default /*#__PURE__*/memo(HeaderActions);

package/dist/esm/components/UTActionCard/components/HeaderActions/styles.module.scss

@@ -0,0 +1,22 @@
+.headerActionsContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  height: fit-content;
+}
+
+.zIndex {
+  z-index: 2;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}

package/dist/esm/components/UTActionCard/components/HeaderActions/utils.js

@@ -0,0 +1,23 @@
+import isEmpty from 'lodash/isEmpty';
+const mapAction = (action, onClickHandler) => ({
+  ...action,
+  onClick: e => {
+    var _action$onClick;
+    e === null || e === void 0 || e.stopPropagation();
+    if (onClickHandler) onClickHandler();
+    action === null || action === void 0 || (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+  }
+});
+export const processActions = (headerActions, onClickHandler) => headerActions.reduce((final, current) => {
+  if (current.isPrimary && isEmpty(final.primaryActions)) return {
+    ...final,
+    primaryActions: [current]
+  };
+  return {
+    ...final,
+    secondaryActions: [...final.secondaryActions, mapAction(current, onClickHandler)]
+  };
+}, {
+  primaryActions: [],
+  secondaryActions: []
+});

package/dist/esm/components/UTActionCard/constants.js

@@ -0,0 +1,17 @@
+export const SIZES = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
+export const ACTION_TYPES = {
+  DEFAULT: 'default',
+  REDIRECTION: 'redirection'
+};
+export const HEADER_ACTIONS_VARIANTS = {
+  BUTTON_GROUP: 'buttonGroup',
+  DEFAULT: 'default'
+};
+export const PLACE_SELF_TYPES = {
+  CENTER: 'center',
+  END: 'end',
+  START: 'start'
+};

package/dist/esm/components/UTActionCard/index.js

@@ -0,0 +1,150 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { memo, useState } from 'react';
+import { arrayOf, bool, elementType, func, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import BottomActions from './components/BottomActions';
+import AdditionalMessage from './components/AdditionalMessage';
+import Header from './components/Header';
+import { ACTION_TYPES, HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from './constants';
+import styles from './styles.module.scss';
+const UTActionCard = _ref => {
+  let {
+    additionalMessage,
+    adornment,
+    BackgroundImage,
+    bottomActions,
+    bottomActionsVariant,
+    children,
+    classNames = {},
+    description,
+    descriptionProps = {},
+    headerActions,
+    headerActionsProps = {
+      variant: HEADER_ACTIONS_VARIANTS.DEFAULT
+    },
+    hideHeader = false,
+    mainAction,
+    size = SIZES.MEDIUM,
+    status,
+    statusAlignment,
+    statusLabel,
+    testIds = {},
+    title,
+    titleProps = {},
+    withBodyPadding = true
+  } = _ref;
+  const [mainActionHoverVisible, setMainActionHoverVisible] = useState(true);
+  const {
+    backgroundDataTestId,
+    containerDataTestId,
+    statusDataTestId
+  } = testIds;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.cardContainer, " ").concat(classNames.container)
+  }, /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(styles.innerContainer, " ").concat(classNames.innerContainer, " ").concat(!mainAction ? styles.withoutMainAction : "".concat(styles.withMainAction, " ").concat(mainActionHoverVisible && "".concat(styles.mainActionHover, " ").concat(classNames.mainActionHover))),
+    dataTestId: containerDataTestId,
+    onClick: () => mainAction === null || mainAction === void 0 ? void 0 : mainAction()
+  }, BackgroundImage && /*#__PURE__*/React.createElement(BackgroundImage, {
+    className: "".concat(styles.backgroundImage, " ").concat(classNames.backgroundImage),
+    "data-testid": backgroundDataTestId
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerAndChildrenContainer, " ").concat(classNames.headerAndChildrenContainer)
+  }, !hideHeader && /*#__PURE__*/React.createElement(Header, {
+    adornment,
+    classNames,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    mainAction,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusDataTestId,
+    statusLabel,
+    title,
+    titleProps
+  }), children && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(hideHeader ? styles.withoutHeader : '', " ").concat(withBodyPadding ? styles["bodyPadding-".concat(size)] : styles["withoutBodyPadding-".concat(size)])
+  }, children))), !objectIsEmpty(additionalMessage) && /*#__PURE__*/React.createElement(AdditionalMessage, _extends({}, additionalMessage, {
+    size: size
+  })), !isEmpty(bottomActions) && /*#__PURE__*/React.createElement(BottomActions, {
+    actions: bottomActions,
+    bottomActionsVariant: bottomActionsVariant,
+    size: size
+  }));
+};
+UTActionCard.propTypes = {
+  additionalMessage: shape({
+    Icon: elementType,
+    iconProps: shape({
+      colorTheme: string,
+      size: string
+    }),
+    labelProps: shape({
+      colorTheme: string,
+      variant: string
+    }),
+    message: string
+  }),
+  adornment: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    position: string,
+    props: object,
+    type: string
+  }),
+  BackgroundImage: elementType,
+  bottomActions: arrayOf(shape({
+    colorTheme: string,
+    disabled: bool,
+    Icon: elementType,
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  bottomActionsVariant: oneOf([ACTION_TYPES.DEFAULT, ACTION_TYPES.REDIRECTION]),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({
+    colorTheme: string,
+    variant: string
+  }),
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    iconProps: string,
+    id: oneOfType([number, string]),
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  headerActionsProps: shape({
+    alignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+    buttonGroupProps: shape({
+      colorTheme: string,
+      shape: string
+    }),
+    variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
+  }),
+  hideHeader: bool,
+  mainAction: func,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusLabel: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  testIds: shape({
+    backgroundDataTestId: string,
+    containerDataTestId: string,
+    statusDataTestId: string
+  }),
+  title: string,
+  titleProps: shape({
+    variant: string,
+    weight: string
+  }),
+  withBodyPadding: bool
+};
+export default /*#__PURE__*/memo(UTActionCard);

package/dist/esm/components/UTActionCard/styles.module.scss

@@ -0,0 +1,83 @@
+$default-active-color: rgba(0, 0, 0, 0.2);
+$default-card-container-color: #FFFFFF;
+$default-hover-color: rgba(0, 0, 0, 0.08);
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.cardContainer {
+  background: var(--light01, $default-card-container-color);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  overflow: hidden;
+}
+
+.bodyPadding-medium {
+  padding: 0 24px 24px;
+}
+
+.bodyPadding-small {
+  padding: 0 16px 16px;
+}
+
+.withoutMainAction {
+  cursor: auto;
+}
+
+.withMainAction {
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  &::after {
+    background-color: transparent;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition: all 0.2s;
+    width: 100%;
+  }
+}
+
+.mainActionHover {
+  &:hover::after {
+    background-color: $default-hover-color;
+  }
+
+  &:active::after {
+    background-color: $default-active-color;
+  }
+}
+
+.innerContainer {
+  height: auto;
+  position: relative;
+  width: 100%;
+}
+
+.backgroundImage {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 0;
+}
+
+.headerAndChildrenContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  z-index: 1;
+}
+
+.withoutBodyPadding-small {
+  padding-bottom: 16px;
+}
+
+.withoutBodyPadding-medium {
+  padding-bottom: 24px;
+}
+
+.withoutHeader {
+  padding-top: 24px;
+}

package/dist/esm/components/UTAlert/AlertHandler.js

@@ -0,0 +1,82 @@
+const sendAlert = (setState, parameters) => setTimeout(() => setState({
+  ...parameters,
+  open: true
+}), 300);
+const defaultState = {
+  open: false,
+  type: 'info',
+  message: '',
+  topRight: false,
+  timeDuration: 0
+};
+let currentAlert;
+const close = setState => setState({
+  ...currentAlert,
+  open: false
+});
+class AlertHandler {
+  init(_ref) {
+    let {
+      setState,
+      duration = 5000
+    } = _ref;
+    this.setState = setState;
+    defaultState.timeDuration = duration;
+    defaultState.onClose = () => close(setState);
+    currentAlert = defaultState;
+    this.setState(defaultState);
+  }
+  success(message) {
+    let topRight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultState.topRight;
+    let timeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultState.timeDuration;
+    close(this.setState);
+    currentAlert = {
+      ...currentAlert,
+      message,
+      type: 'success',
+      topRight,
+      timeDuration
+    };
+    sendAlert(this.setState, currentAlert);
+  }
+  error(message) {
+    let topRight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultState.topRight;
+    let timeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultState.timeDuration;
+    close(this.setState);
+    currentAlert = {
+      ...currentAlert,
+      message,
+      type: 'error',
+      topRight,
+      timeDuration
+    };
+    sendAlert(this.setState, currentAlert);
+  }
+  info(message) {
+    let topRight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultState.topRight;
+    let timeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultState.timeDuration;
+    close(this.setState);
+    currentAlert = {
+      ...currentAlert,
+      message,
+      type: 'info',
+      topRight,
+      timeDuration
+    };
+    sendAlert(this.setState, currentAlert);
+  }
+  warning(message) {
+    let topRight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultState.topRight;
+    let timeDuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultState.timeDuration;
+    close(this.setState);
+    currentAlert = {
+      ...currentAlert,
+      message,
+      type: 'warning',
+      topRight,
+      timeDuration
+    };
+    sendAlert(this.setState, currentAlert);
+  }
+}
+export default new AlertHandler();

package/dist/esm/components/UTAlert/index.js

@@ -0,0 +1,142 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import Close from '@material-ui/icons/Close';
+import Error from '@material-ui/icons/Error';
+import IconButton from '@material-ui/core/IconButton';
+import Info from '@material-ui/icons/Info';
+import React, { PureComponent } from 'react';
+import Slide from '@material-ui/core/Slide';
+import Snackbar from '@material-ui/core/Snackbar';
+import Warning from '@material-ui/icons/Warning';
+import { shape, string, bool, number, func } from 'prop-types';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { TEST_IDS } from '../../constants/testIds';
+import styles from './styles.module.scss';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+const {
+  snackBar
+} = TEST_IDS;
+const variantIcon = {
+  error: Error,
+  info: Info,
+  success: CheckCircle,
+  warning: Warning
+};
+class UTAlert extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleClose", (_, reason) => {
+      // In case you don't want to dismiss notification clicking away
+      if (reason === 'clickaway') {
+        return;
+      }
+      const {
+        content: alert
+      } = this.props;
+      return alert.onClose && alert.onClose();
+    });
+    _defineProperty(this, "selectAlertType", () => {
+      const {
+        content: alert,
+        classes
+      } = this.props;
+      switch (alert.type) {
+        case 'info':
+          return classes.info;
+        case 'error':
+          return classes.error;
+        case 'warning':
+          return classes.warning;
+        default:
+          return classes.success;
+      }
+    });
+  }
+  render() {
+    const {
+      classes = {},
+      closeDataTestId = snackBar.closeButton,
+      content: alert = {},
+      labelDataTestId = "".concat(snackBar.label, ".").concat(alert.type),
+      withoutIcon
+    } = this.props;
+    const anchor = {
+      horizontal: alert.topRight ? 'right' : 'left',
+      vertical: alert.topRight ? 'top' : 'bottom'
+    };
+    const transition = {
+      direction: alert.topRight ? 'left' : 'up'
+    };
+    const AlertTypeIcon = alert.type && variantIcon[alert.type];
+    return /*#__PURE__*/React.createElement(Snackbar, {
+      action: [/*#__PURE__*/React.createElement(IconButton, {
+        classes: {
+          root: classes.action
+        },
+        color: "inherit",
+        "data-testid": closeDataTestId,
+        key: "close",
+        onClick: this.handleClose
+      }, /*#__PURE__*/React.createElement(Close, null))],
+      anchorOrigin: anchor,
+      autoHideDuration: alert.timeDuration,
+      classes: {
+        root: styles.snackbarRoot
+      },
+      ContentProps: {
+        className: "".concat(styles.snackbarContent, " ").concat(classes.snackbarContent, " ").concat(this.selectAlertType()),
+        classes: {
+          action: styles.action,
+          message: styles.message
+        }
+      },
+      message: /*#__PURE__*/React.createElement("div", {
+        className: "".concat(styles.content, " ").concat(classes.content)
+      }, !withoutIcon && AlertTypeIcon && /*#__PURE__*/React.createElement(AlertTypeIcon, {
+        classes: {
+          root: styles.alertTypeIcon
+        }
+      }), /*#__PURE__*/React.createElement(UTLabel, {
+        colorTheme: "light",
+        withMarkdown: true,
+        dataTestId: labelDataTestId
+      }, alert.message)),
+      onClose: this.handleClose,
+      open: alert.open,
+      TransitionComponent: Slide,
+      TransitionProps: transition
+    });
+  }
+}
+UTAlert.propTypes = {
+  content: shape({
+    message: string,
+    onClose: func,
+    open: bool,
+    timeDuration: number,
+    topRight: bool,
+    type: string
+  }),
+  classes: shape({
+    error: string,
+    info: string,
+    success: string
+  }),
+  closeDataTestId: string,
+  labelDataTestId: string,
+  withoutIcon: bool
+};
+UTAlert.defaultProps = {
+  content: {
+    message: undefined,
+    open: false,
+    timeDuration: undefined,
+    topRight: undefined,
+    type: undefined
+  },
+  classes: {}
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTAlert);

package/dist/esm/components/UTAlert/styles.module.scss

@@ -0,0 +1,24 @@
+.snackbarContent {
+  flex-wrap: nowrap;
+  padding: 6px 15px;
+}
+
+.action {
+  flex-shrink: 0;
+  padding-left: 10px;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+}
+
+.alertTypeIcon {
+  font-size: 20px;
+  margin-right: 10px;
+  opacity: 0.9;
+}
+
+.message {
+  display: flex;
+}