@widergy/energy-ui 3.158.1 → 3.159.0

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

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+import { object } from 'prop-types';
+import { EnergyThemeProvider } from '../../theme';
+class ThemeProvider extends PureComponent {
+  render() {
+    const {
+      children,
+      theme
+    } = this.props;
+    return /*#__PURE__*/React.createElement(EnergyThemeProvider, {
+      value: theme
+    }, children);
+  }
+}
+ThemeProvider.propTypes = {
+  theme: object
+};
+export default ThemeProvider;

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

@@ -0,0 +1 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando';

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { string, number, object, objectOf } from 'prop-types';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { getIn } from 'seamless-immutable';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+import { DEFAULT_LOADING_TEXT } from './constants';
+const Loading = _ref => {
+  let {
+    classes,
+    className,
+    size,
+    text = DEFAULT_LOADING_TEXT,
+    textClassName,
+    theme,
+    thickness
+  } = _ref;
+  const defaultSize = getIn(theme, ['Loading', 'base', 'size'], 85);
+  const defaultThickness = getIn(theme, ['Loading', 'base', 'thickness'], 1.5);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    className: classes.base,
+    size: size || defaultSize,
+    thickness: thickness || defaultThickness
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.text, " ").concat(classes.text, " ").concat(textClassName)
+  }, text));
+};
+Loading.propTypes = {
+  classes: objectOf(string),
+  className: string,
+  size: number,
+  text: string,
+  textClassName: string,
+  theme: object,
+  thickness: number
+};
+export default WithTheme(retrieveStyle)(Loading);

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

@@ -0,0 +1,12 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.text {
+  margin-top: 15px !important;
+}

package/dist/esm/components/Loading/theme.js

@@ -0,0 +1,16 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    base: {
+      color: getIn(theme, ['Loading', 'base', 'color'], Colors.loadingBase)
+    },
+    text: {
+      color: getIn(theme, ['Loading', 'text', 'color'], Colors.black),
+      fontSize: getIn(theme, ['Loading', 'text', 'fontSize'], getIn(theme, ['Fonts', 'medium']))
+    }
+  };
+};

package/dist/esm/components/UTActionCard/README.md

@@ -0,0 +1,26 @@
+# UTButton
+
+## Props
+
+
+| Name                   | Type                                                                                                                                                                                                     | Default    | Description                                                            |
+| :----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------ |
+| `additionalMessage`    | `shape({ Icon: elementType, iconProps: shape({ colorTheme: string, size: string }), labelProps: shape({ colorTheme: string, variant: string }), message: string })`                                      |            | Additional message information, including icons and labels.            |
+| `adornment`            | `shape({ alignment: oneOf(['center', 'end', 'start']), position: string, props: object, type: string })`                                                                                                 |            | Adornment object to customize alignment, position, and type.           |
+| `BackgroundImage`      | `elementType`                                                                                                                                                                                            |            | A React component for the background image.                            |
+| `bottomActions`        | `arrayOf(shape({ colorTheme: string, disabled: bool, Icon: elementType, label: string, loading: bool, onClick: func }))`                                                                                 |            | Defines the list of actions to be displayed at the bottom of the card. |
+| `bottomActionsVariant` | `oneOf(['default', 'redirection'])`                                                                                                                                                                      |            | Sets the style variant for bottom actions.                             |
+| `classNames`           | `objectOf(string)`                                                                                                                                                                                       |            | Css classes                                                            |
+| `description`          | `string`                                                                                                                                                                                                 |            | Description text to be displayed.                                      |
+| `descriptionProps`     | `shape({ colorTheme: string, variant: string })`                                                                                                                                                         |            | Props to customize the description's style.                            |
+| `headerActions`        | `arrayOf(shape({ Icon: oneOfType([elementType, string]), iconProps: string, id: oneOfType([number, string]), label: string, loading: bool, onClick: func }))`                                            |            | List of actions available in the header section.                       |
+| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
+| `hideHeader`           | `bool`                                                                                                                                                                                                   | `false`    | Hides the header section of the card.                                  |
+| `mainAction`           | `func`                                                                                                                                                                                                   |            | Main action function for the card.                                     |
+| `size`                 | `oneOf(['medium', 'small'])`                                                                                                                                                                             | `'medium'` | Size of the card, either small or medium.                              |
+| `status`               | `string`                                                                                                                                                                                                 |            | Status text to be displayed.                                           |
+| `statusLabel`          | `string`                                                                                                                                                                                                 |            | Status label for additional status info.                               |
+| `statusAlignment`      | `oneOf(['center', 'end', 'start'])`                                                                                                                                                                      |            | Alignment of the status element.                                       |
+| `title`                | `string`                                                                                                                                                                                      |            | The title of the card.                                       |
+| `titleProps`           | `shape({ variant: string, weight: string })`                                                                                                                                                             |            | Props to configure the title style.                                    |
+| `withBodyPadding`      | `bool`                                                                                                                                                                                                   | `false`    | Adds padding to the card body if`true`.                                |

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

@@ -0,0 +1,47 @@
+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 } from 'react';
+import { oneOf, shape, string } from 'prop-types';
+import UTIcon from '../../../UTIcon';
+import UTLabel from '../../../UTLabel';
+import { SIZES } from '../../constants';
+import styles from './styles.module.scss';
+const AdditionalMessage = _ref => {
+  let {
+    dataTestId,
+    icon,
+    iconProps = {},
+    labelProps = {},
+    message,
+    size
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.additionalMessageContainer, " ").concat(styles[size]),
+    "data-testid": dataTestId
+  }, icon && /*#__PURE__*/React.createElement(UTIcon, _extends({
+    area: true,
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".icon") : undefined,
+    name: icon,
+    size: 16
+  }, iconProps)), /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".message") : undefined,
+    variant: "small",
+    withMarkdown: true
+  }, labelProps), message));
+};
+AdditionalMessage.propTypes = {
+  dataTestId: string,
+  icon: string,
+  iconProps: shape({
+    colorTheme: string,
+    size: string
+  }),
+  labelProps: shape({
+    colorTheme: string,
+    variant: string
+  }),
+  message: string,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL])
+};
+export default /*#__PURE__*/memo(AdditionalMessage);

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

@@ -0,0 +1,13 @@
+.additionalMessageContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.medium {
+  padding: 0 24px 24px;
+}
+
+.small {
+  padding: 0 16px 16px;
+}

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

@@ -0,0 +1 @@
+export const DEFAULT_REDIRECTION_ICON = 'IconChevronRight';

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

@@ -0,0 +1,62 @@
+import React, { Fragment, memo } from 'react';
+import { arrayOf, bool, elementType, func, oneOfType, shape, string } from 'prop-types';
+import Divider from '@material-ui/core/Divider';
+import UTButton from '../../../UTButton';
+import { ACTION_TYPES, SIZES } from '../../constants';
+import { DEFAULT_REDIRECTION_ICON } from './constants';
+import styles from './styles.module.scss';
+const BottomActions = _ref => {
+  let {
+    actions = [],
+    bottomActionsVariant,
+    size
+  } = _ref;
+  const type = actions.length > 2 ? ACTION_TYPES.REDIRECTION : bottomActionsVariant || ACTION_TYPES.DEFAULT;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.actionsContainer
+  }, actions.map((_ref2, index) => {
+    let {
+      colorTheme = 'primary',
+      dataTestId,
+      disabled,
+      Icon,
+      label,
+      loading,
+      onClick
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: label
+    }, /*#__PURE__*/React.createElement(UTButton, {
+      classNames: {
+        childrenContainer: "".concat(type === ACTION_TYPES.REDIRECTION && styles.redirectionChildrenContainer, " "),
+        root: "".concat(styles.actionButton, " ").concat(type === ACTION_TYPES.REDIRECTION && styles.fullWidth, " ").concat(size === SIZES.MEDIUM && styles.mediumPadding),
+        text: "".concat(type === ACTION_TYPES.REDIRECTION ? styles.redirectionText : styles.defaultText)
+      },
+      colorTheme: colorTheme,
+      dataTestId: dataTestId,
+      disabled: disabled,
+      Icon: type === ACTION_TYPES.REDIRECTION ? Icon || DEFAULT_REDIRECTION_ICON : Icon,
+      iconPlacement: type === ACTION_TYPES.REDIRECTION ? 'right' : 'left',
+      loading: loading,
+      onClick: onClick,
+      size: "large",
+      variant: "text"
+    }, label), actions.length > 1 && index < actions.length - 1 && /*#__PURE__*/React.createElement(Divider, {
+      className: styles.divider
+    }));
+  }));
+};
+BottomActions.propTypes = {
+  actions: arrayOf(shape({
+    colorTheme: string,
+    dataTestId: string,
+    disabled: bool,
+    Icon: oneOfType([elementType, string]),
+    label: string,
+    loading: bool,
+    onClick: func
+  })),
+  bottomActionsVariant: string,
+  size: string
+};
+export default /*#__PURE__*/memo(BottomActions);

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

@@ -0,0 +1,49 @@
+$default-border-color: #e7e7e7;
+
+.actionsContainer {
+  border-top: 1px solid var(--light04, $default-border-color);
+  display: flex;
+}
+
+.actionButton {
+  flex: 1;
+  width: 100%;
+
+  & + .actionButton {
+    border-left: 1px solid var(--light04, $default-border-color);
+  }
+}
+
+.redirectionChildrenContainer {
+  width: 100%;
+}
+
+.divider {
+  background-color: var(--light04, $default-border-color);
+  width: 100%;
+}
+
+.redirectionText {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.defaultText {
+  flex: 1;
+  min-width: 50%;
+}
+
+.actionsContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fullWidth {
+  flex: 1 0 100%;
+}
+
+.mediumPadding {
+  padding: 16px 24px;
+}

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

@@ -0,0 +1,24 @@
+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 from 'react';
+import UTAvatar from '../../../UTAvatar';
+import UTIcon from '../../../UTIcon';
+import styles from './styles.module.scss';
+export const ADORNMENT_COMPONENT_MAPPER = {
+  icon: UTIcon,
+  avatar: _ref => {
+    let {
+      className,
+      ...props
+    } = _ref;
+    return /*#__PURE__*/React.createElement(UTAvatar, _extends({
+      className: "".concat(styles.defaultAvatar, " ").concat(className),
+      labelProps: {
+        variant: 'title1',
+        weight: 'medium'
+      }
+    }, props));
+  },
+  image: props => /*#__PURE__*/React.createElement("img", _extends({
+    alt: ""
+  }, props))
+};

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

@@ -0,0 +1,89 @@
+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 } 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 UTStatus from '../../../UTStatus';
+import UTLabel from '../../../UTLabel';
+import HeaderActions from '../HeaderActions';
+import { HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from '../../constants';
+import { renderAdornment, statusPropsMapper } from './utils';
+import styles from './styles.module.scss';
+const Header = _ref => {
+  let {
+    adornment,
+    classNames,
+    description,
+    descriptionProps,
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible,
+    size,
+    status,
+    statusAlignment,
+    statusDataTestId,
+    statusLabel,
+    title,
+    titleProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.header, " ").concat(styles[size], " ").concat(classNames.header)
+  }, renderAdornment(adornment, 'left'), /*#__PURE__*/React.createElement("div", {
+    className: styles.headerTitles
+  }, renderAdornment(adornment, 'top'), /*#__PURE__*/React.createElement("div", {
+    className: styles.titleAndDescription
+  }, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    variant: "title3",
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description))), status ? /*#__PURE__*/React.createElement(UTStatus, _extends({
+    className: "".concat(styles["placeSelf-".concat(statusAlignment)]),
+    labelDataTestId: statusDataTestId,
+    type: "light"
+  }, statusPropsMapper(status)), statusLabel || status) : null, !isEmpty(headerActions) && /*#__PURE__*/React.createElement(HeaderActions, {
+    headerActions,
+    headerActionsProps,
+    setMainActionHoverVisible
+  }));
+};
+Header.propTypes = {
+  adornment: shape({
+    position: string,
+    props: object,
+    type: string
+  }),
+  classNames: objectOf(string),
+  description: string,
+  descriptionProps: shape({
+    colorTheme: string,
+    variant: string
+  }),
+  headerActions: arrayOf(shape({
+    Icon: oneOfType([elementType, string]),
+    id: oneOfType([number, string]),
+    isPrimary: bool,
+    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])
+  }),
+  setMainActionHoverVisible: func,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  status: string,
+  statusAlignment: oneOf([PLACE_SELF_TYPES.CENTER, PLACE_SELF_TYPES.END, PLACE_SELF_TYPES.START]),
+  statusDataTestId: string,
+  statusLabel: string,
+  title: string,
+  titleProps: shape({
+    variant: string,
+    weight: string
+  })
+};
+export default /*#__PURE__*/memo(Header);

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

@@ -0,0 +1,48 @@
+.header {
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+}
+
+.headerTitles {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  margin-right: auto;
+}
+
+.titleAndDescription {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  overflow-wrap: anywhere;
+}
+
+.medium {
+  padding: 24px;
+}
+
+.small {
+  padding: 16px;
+}
+
+.placeSelf-center {
+  place-self: center;
+}
+
+.placeSelf-start {
+  place-self: flex-start;
+}
+
+.placeSelf-end {
+  place-self: flex-end;
+}
+
+.defaultAvatar {
+  height: 64px;
+  width: 64px;
+}
+
+.adornment {
+  max-width: 100%;
+}

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

@@ -0,0 +1,146 @@
+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 from 'react';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import { PLACE_SELF_TYPES } from '../../constants';
+import { ADORNMENT_COMPONENT_MAPPER } from './constants';
+import styles from './styles.module.scss';
+const ACTIVE = 'active';
+const APPROVED = 'approved';
+const CHARGED_BILL = 'factura cobrada';
+const FINISHED = 'finished';
+const INACTIVE = 'inactive';
+const PENDING = 'pending';
+const BILLED = 'cobrada';
+const PAID = 'pagado';
+const ABOUT_TO_EXPIRE = 'por vencer';
+const UNPAID = 'impaga';
+const SUBSCRIBED = 'subscribed_from_utility';
+const UNSUBSCRIBED = 'unsubscribed';
+const CLOSED_STATUS = 'completed';
+const OBSERVED_STATUS = 'observed';
+const ONGOING_STATUS = 'pending';
+const FORM_STATUS = {
+  CANCELED: 'cancelled',
+  FINISHED: 'finished',
+  IN_PROGRESS: 'in_progress',
+  ON_HOLD: 'on_hold',
+  COMPLETED: 'completed'
+};
+const PAYMENTPLAN_STATUS = {
+  ACTIVE: 'active',
+  CANCELLED: 'canceled',
+  DRAFT: 'draft',
+  FINISHED: 'finished',
+  PENDING: 'pending',
+  PAYMENT_IN_PROGRESS: 'payment_in_progress',
+  PENDING_OFFLINE_PAYMENT: 'pending_offline_payment',
+  PENDING_PAYMENT: 'pending_payment'
+};
+export const statusPropsMapper = status => ({
+  [ACTIVE]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [APPROVED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CHARGED_BILL]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [CLOSED_STATUS]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [BILLED]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FINISHED]: {
+    variant: 'success',
+    withoutIcon: true
+  },
+  [INACTIVE]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [OBSERVED_STATUS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [ONGOING_STATUS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [PAID]: {
+    variant: 'success',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [PAYMENTPLAN_STATUS.CANCELLED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.DRAFT]: {
+    variant: 'unassigned',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PAYMENT_IN_PROGRESS]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_OFFLINE_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PAYMENTPLAN_STATUS.PENDING_PAYMENT]: {
+    variant: 'warning',
+    withoutIcon: true
+  },
+  [PENDING]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [ABOUT_TO_EXPIRE]: {
+    variant: 'unassigned',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [SUBSCRIBED]: {
+    variant: 'success'
+  },
+  [UNSUBSCRIBED]: {
+    variant: 'error'
+  },
+  [UNPAID]: {
+    variant: 'warning',
+    withoutIcon: true,
+    type: 'light'
+  },
+  [FORM_STATUS.CANCELED]: {
+    variant: 'error',
+    withoutIcon: true
+  },
+  [FORM_STATUS.IN_PROGRESS]: {
+    variant: 'information',
+    withoutIcon: true
+  },
+  [FORM_STATUS.ON_HOLD]: {
+    variant: 'warning',
+    withoutIcon: true
+  }
+})[status === null || status === void 0 ? void 0 : status.toLowerCase()] || {
+  variant: 'error',
+  withoutIcon: true
+};
+export const renderAdornment = (adornment, position) => {
+  var _adornment$props;
+  if (objectIsEmpty(adornment) || adornment.position !== position) return null;
+  const AdornmentComponent = ADORNMENT_COMPONENT_MAPPER[adornment.type];
+  const defaultPlaceSelf = adornment.position === 'left' ? PLACE_SELF_TYPES.CENTER : PLACE_SELF_TYPES.START;
+  return /*#__PURE__*/React.createElement(AdornmentComponent, _extends({}, adornment.props || {}, {
+    className: "".concat(styles.adornment, " ").concat(styles["placeSelf-".concat(adornment.alignment || defaultPlaceSelf)], "  ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
+  }));
+};