@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTPanel/versions/V1/index.js

@@ -0,0 +1,274 @@
+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, { useMemo, useState, useEffect } from 'react';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import { arrayOf, bool, element, elementType, func, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import WithTheme from '../../../WithTheme/index.js';
+import { TEST_IDS } from '../../../../constants/testIds.js';
+import { mergeClasses } from '../../../../utils/classesUtils.js';
+import AdditionalContentModule from './components/AdditionalContentModule';
+import ControlAreaSection from './components/ControlAreaSection';
+import HeaderSection from './components/HeaderSection';
+import BodySection from './components/BodySection';
+import styles from './styles.module.scss';
+import { SIZES } from './constants.js';
+import { retrieveStyle } from './theme';
+const {
+  panel
+} = TEST_IDS;
+const UTPanel = _ref => {
+  var _classes$bodyContaine;
+  let {
+    additionalContent,
+    backButtonDataTestId = panel.backButton,
+    BackdropProps = {},
+    children,
+    classes: theme,
+    classNames,
+    closeButtonDataTestId = panel.closeButton,
+    collapsableHeader = false,
+    collapsablePanel = false,
+    currentStep = 1,
+    CustomHeaderComponent,
+    disableScrollbar = false,
+    HeaderComponent,
+    headerItems,
+    headerMainActionButton = {},
+    headerSecondaryActionButton = {},
+    hideCloseButton = false,
+    hideHeader = false,
+    hideMainButton = false,
+    inline = false,
+    isWorkflow = false,
+    mainActionDataTestId = panel.mainAction,
+    mainButton = {},
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onGoBack = () => {},
+    onOpen = () => {},
+    open,
+    openAdditionalContentRequest,
+    paginationProps = {},
+    panelSide,
+    perfectScrollbarOptions,
+    pretitleComponent,
+    secondaryActionDataTestId = panel.secondaryAction,
+    showBackButton = false,
+    showMainStatus = false,
+    showPagination = false,
+    showTag = false,
+    singleHeaderItemsColumn = false,
+    size = 'M',
+    statusProps = {},
+    stepsCount,
+    subtitle = '',
+    tagProps = {},
+    title = '',
+    titleDataTestId = panel.title,
+    titleProps = {},
+    ...props
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
+  const [activeAdditionalContentId, setActiveAdditionalContentId] = useState(null);
+  useEffect(() => {
+    if (additionalContent && additionalContent.length > 0) {
+      var _additionalContent$;
+      if ((_additionalContent$ = additionalContent[0]) !== null && _additionalContent$ !== void 0 && _additionalContent$.collapse) setActiveAdditionalContentId(null);else setActiveAdditionalContentId(additionalContent[0].id);
+    }
+  }, [additionalContent]);
+  useEffect(() => {
+    if (openAdditionalContentRequest !== null && openAdditionalContentRequest !== void 0 && openAdditionalContentRequest.id) {
+      setActiveAdditionalContentId(openAdditionalContentRequest.id);
+    }
+  }, [openAdditionalContentRequest]);
+  const panelIsCollapsible = collapsablePanel && inline;
+  const panelIsCollapsed = panelIsCollapsible && !open;
+  const hasAdditionalContent = !isEmpty(additionalContent);
+  const {
+    nextButton = {},
+    backButton = {},
+    currentPage = 1,
+    totalPages = 1
+  } = paginationProps;
+  const {
+    backButton: backButtonClass,
+    closeButton: closeButtonClass,
+    iconBack: iconBackClass,
+    iconClose: iconCloseClass,
+    perfectScrollbar: perfectScrollbarClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/React.createElement(SwipeableDrawer, _extends({
+    anchor: panelSide,
+    BackdropProps: {
+      ...BackdropProps,
+      classes: {
+        root: drawerClasses.backdrop,
+        ...(BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.classes)
+      }
+    },
+    classes: {
+      ...drawerClasses,
+      paper: "\n          ".concat(styles.paper, "\n          ").concat(panelIsCollapsible && open && styles.collapsedPaper, "\n          ").concat(drawerClasses.paper, "\n          ").concat(styles[SIZES[size]], "\n          ").concat(hasAdditionalContent && activeAdditionalContentId && styles.withAdditionalContent, "\n          ").concat(hasAdditionalContent && !activeAdditionalContentId && styles.withAdditionalContentCollapsed, "\n        "),
+      root: drawerClasses.root,
+      docked: "\n          ".concat(styles[SIZES[size]], "\n          ").concat(styles.docked, "\n          ").concat(panelIsCollapsed && styles.collapsed, "\n          ").concat(!open && !collapsablePanel && styles.closedPersistentPanel, "\n          ").concat(hasAdditionalContent && activeAdditionalContentId && styles.withAdditionalContentDocked, "\n          ").concat(hasAdditionalContent && !activeAdditionalContentId && styles.withAdditionalContentCollapsedDocked, "\n        ")
+    },
+    disablePortal: inline,
+    disableSwipeToOpen: true,
+    ModalProps: {
+      ...modalProps
+    },
+    onClose: onClose,
+    onOpen: onOpen,
+    open: panelIsCollapsible || open,
+    swipeAreaWidth: 0,
+    variant: inline ? collapsablePanel ? 'permanent' : 'persistent' : 'temporary'
+  }, props), !panelIsCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: styles.panelWrapper
+  }, /*#__PURE__*/React.createElement(ControlAreaSection, {
+    backButton: backButton,
+    backButtonClass: backButtonClass,
+    backButtonDataTestId: backButtonDataTestId,
+    classes: classes,
+    closeButtonClass: closeButtonClass,
+    closeButtonDataTestId: closeButtonDataTestId,
+    currentPage: currentPage,
+    currentStep: currentStep,
+    hideCloseButton: hideCloseButton,
+    iconBackClass: iconBackClass,
+    iconCloseClass: iconCloseClass,
+    isWorkflow: isWorkflow,
+    nextButton: nextButton,
+    onClose: onClose,
+    onGoBack: onGoBack,
+    onOpen: onOpen,
+    open: open,
+    panelIsCollapsible: panelIsCollapsible,
+    showBackButton: showBackButton,
+    showPagination: showPagination,
+    stepsCount: stepsCount,
+    totalPages: totalPages
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.contentRowContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.mainContentSection
+  }, /*#__PURE__*/React.createElement(HeaderSection, {
+    classes: classes,
+    collapsableHeader: collapsableHeader,
+    CustomHeaderComponent: CustomHeaderComponent,
+    HeaderComponent: HeaderComponent,
+    headerItems: headerItems,
+    headerMainActionButton: headerMainActionButton,
+    headerSecondaryActionButton: headerSecondaryActionButton,
+    hideHeader: hideHeader,
+    mainActionDataTestId: mainActionDataTestId,
+    pretitleComponent: pretitleComponent,
+    secondaryActionDataTestId: secondaryActionDataTestId,
+    showMainStatus: showMainStatus,
+    showTag: showTag,
+    singleHeaderItemsColumn: singleHeaderItemsColumn,
+    statusProps: statusProps,
+    subtitle: subtitle,
+    tagProps: tagProps,
+    title: title,
+    titleClass: classes.title,
+    titleDataTestId: titleDataTestId,
+    titleProps: titleProps
+  }), /*#__PURE__*/React.createElement(BodySection, {
+    bodyContainerClass: "".concat(styles.bodyContainer, " ").concat((_classes$bodyContaine = classes === null || classes === void 0 ? void 0 : classes.bodyContainer) !== null && _classes$bodyContaine !== void 0 ? _classes$bodyContaine : ''),
+    disableScrollbar: disableScrollbar,
+    hideMainButton: hideMainButton,
+    mainButton: mainButton,
+    onEndReachedCallback: onEndReachedCallback,
+    perfectScrollbarClass: perfectScrollbarClass,
+    perfectScrollbarOptions: perfectScrollbarOptions
+  }, children)), hasAdditionalContent && /*#__PURE__*/React.createElement(AdditionalContentModule, {
+    activeId: activeAdditionalContentId,
+    additionalContent: additionalContent,
+    onSelectItem: setActiveAdditionalContentId
+  }))));
+};
+UTPanel.propTypes = {
+  additionalContent: arrayOf(shape({
+    id: string.isRequired,
+    Icon: string.isRequired,
+    count: number,
+    BodyComponent: elementType.isRequired,
+    tooltipProps: object.isRequired
+  })),
+  backButtonDataTestId: string,
+  BackdropProps: object,
+  classes: objectOf(string),
+  classNames: object,
+  closeButtonDataTestId: string,
+  collapsableHeader: bool,
+  collapsablePanel: bool,
+  currentStep: number,
+  disableScrollbar: bool,
+  CustomHeaderComponent: elementType,
+  HeaderComponent: oneOfType([element, elementType]),
+  headerItems: arrayOf(shape({
+    title: string,
+    icon: string,
+    value: string
+  })),
+  headerMainActionButton: shape({
+    callBack: func,
+    colorTheme: string,
+    text: string,
+    variant: string
+  }),
+  headerSecondaryActionButton: shape({
+    callBack: func,
+    colorTheme: string,
+    text: string,
+    variant: string
+  }),
+  hideCloseButton: bool,
+  hideHeader: bool,
+  hideMainButton: bool,
+  inline: bool,
+  isWorkflow: bool,
+  mainActionDataTestId: string,
+  mainButton: object,
+  modalProps: object,
+  onClose: func,
+  onEndReachedCallback: func,
+  onGoBack: func,
+  onOpen: func,
+  open: bool,
+  openAdditionalContentRequest: object,
+  panelSide: string,
+  perfectScrollbarOptions: object,
+  pretitleComponent: oneOfType([element, elementType]),
+  secondaryActionDataTestId: string,
+  singleHeaderItemsColumn: bool,
+  size: oneOf(Object.keys(SIZES)),
+  showBackButton: bool,
+  showMainStatus: bool,
+  showTag: bool,
+  showPagination: bool,
+  statusProps: object,
+  stepsCount: number,
+  currentPage: number,
+  totalPages: number,
+  subtitle: string,
+  paginationProps: object,
+  tagProps: shape({
+    classes: objectOf(string),
+    className: string,
+    Icon: elementType,
+    iconProps: object,
+    labelDataTestId: string,
+    size: string,
+    title: string,
+    type: string,
+    variant: string,
+    withoutIcon: bool
+  }),
+  title: string,
+  titleDataTestId: string,
+  titleProps: object
+};
+export default WithTheme(retrieveStyle)(UTPanel);

package/dist/esm/components/UTPanel/versions/V1/styles.module.scss

@@ -0,0 +1,238 @@
+$body-component-width: 450px;
+$collapsed-panel-size: 58px;
+$large-panel-size: 600px;
+$medium-panel-size: 450px;
+$sidebar-width: 56px;
+$small-panel-size: 300px;
+$additional-content-total: $body-component-width + $sidebar-width;
+
+.paper {
+  display: flex;
+  height: 100%;
+}
+
+.panelWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.controlLeftArea {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: 8px;
+}
+
+.backButtonContainer {
+  align-items: center;
+  display: flex;
+}
+
+.controlAreaBar {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.controlAreaContainer {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.paginationContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 16px;
+}
+
+.contentRowContainer {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.mainContentSection {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.bodyWrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.headerContainer {
+  padding: 8px 24px 16px;
+}
+
+.pretitleArea {
+  margin-bottom: 4px;
+  width: 100%;
+}
+
+.headerArea {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.headerLeftArea {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.headerRightArea {
+  display: flex;
+  grid-gap: 8px;
+}
+
+.titleArea {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+}
+
+.subtitleArea {
+  display: flex;
+}
+
+.singleHeaderItemsColumn {
+  display: block !important;
+}
+
+.headerItemsContainer {
+
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0;
+  max-height: 100%;
+  padding: 0 24px;
+  transition:
+    max-height 0.08s ease,
+    opacity 0.08s ease,
+    margin-top 0.08s ease;
+}
+
+.expandedContainer {
+  max-height: 100%;
+  opacity: 1;
+}
+
+.collapsedContainer {
+  margin-top: -16px;
+  max-height: 0;
+  opacity: 0;
+}
+
+.small {
+  width: $small-panel-size;
+
+  &.withAdditionalContent {
+    width: $small-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsed {
+    width: $small-panel-size + $sidebar-width;
+  }
+}
+
+.large {
+  width: $large-panel-size;
+
+  &.withAdditionalContent {
+    width: $large-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsed {
+    width: $large-panel-size + $sidebar-width;
+  }
+}
+
+.medium {
+  width: $medium-panel-size;
+
+  &.withAdditionalContent {
+    width: $medium-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsed {
+    width: $medium-panel-size + $sidebar-width;
+  }
+}
+
+.bodyContainer {
+  padding: 24px;
+}
+
+.perfectScrollbar {
+  flex: 1;
+  margin: 10px 0;
+}
+
+.progressBarContainer {
+  margin-bottom: 16px;
+}
+
+.mainButton {
+  border-radius: 0 !important;
+  flex-shrink: 0;
+  position: relative;
+  width: 100%;
+}
+
+.docked {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  transition: width 0.3s ease;
+
+  .bodyContainer {
+    overflow: hidden;
+  }
+
+  .paper {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+  }
+
+  .mainButton {
+    position: sticky;
+  }
+}
+
+.withAdditionalContentCollapsedDocked {
+  transition: width 0.3s ease;
+}
+
+.closedPersistentPanel {
+  width: 0;
+}
+
+.collapsed {
+  width: $collapsed-panel-size;
+
+  .small,
+  .medium,
+  .large {
+    width: $collapsed-panel-size;
+  }
+}
+
+.collapsedPaper {
+  transition: width 0.3s ease;
+}

package/dist/esm/components/UTPanel/versions/V1/theme.js

@@ -0,0 +1,18 @@
+import { getIn } from 'seamless-immutable';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    barColorPrimary: {
+      background: getIn(theme, ['UTPanel', 'progressBar', 'barColorPrimary', 'background'], 'linear-gradient(90deg, #25E0A6 0%, #20BBFC 100%) !important')
+    },
+    colorPrimary: {
+      backgroundColor: getIn(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], "".concat(theme.Palette.light['04'], " !important"))
+    },
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    }
+  };
+};

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

@@ -0,0 +1,22 @@
+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 { object, objectOf, string } from 'prop-types';
+import { Paper } from '@material-ui/core';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+const UTPaper = _ref => {
+  let {
+    children,
+    classes,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Paper, _extends({}, otherProps, {
+    className: classes.paper
+  }), children);
+};
+UTPaper.propTypes = {
+  children: object,
+  classes: objectOf(string),
+  otherProps: object
+};
+export default WithTheme(retrieveStyle)(UTPaper);

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

@@ -0,0 +1,19 @@
+import { getShadow } from '../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    paper: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '8px',
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      marginTop: '8px',
+      padding: '16px'
+    }
+  };
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTPasswordField = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTPasswordField.propTypes = {
+  version: string
+};
+export default UTPasswordField;

package/dist/esm/components/UTPasswordField/versions/V0/README.md

@@ -0,0 +1,19 @@
+# UTPasswordField
+
+### Description
+Component that abstracts all possible uses for a password field. Based on the `UTTextField` component.
+
+### Usage
+This component shares all `UTTextField` props. The following props are specific to the `UTPasswordField` component:
+
+- `field`: expects an `object` with the field configuration. This prop is passed down to the text field, but the password component extracts
+  - `passwordValidations`: expects an `array` of `objects` with attributes `error: string, expression: string, requirement: string`. The `expression` attribute consists of a regular expression used to check for both an error or password requirement. The error and requirement attributes are messages to be displayed whenever it is needed. Validations are checked in real time, whereas errors show up after a submission failure.
+  - `showValidations`: expects a `boolean`. Flag to show or hide the validations based on the location of the password field. e.g: one would not want to show requirements on a sign in view, would want to in a sign up screen.
+- ValidationPassedIcon: expects an `element`, icon used to indicate when a validation has passed.
+- ValidationFailedIcon: expects an `element`, icon used to indicate when a validation has failed.
+- NoValueIcon: expects an `element`, icon used to indicate when the input has no value and has not failed to submit.
+- ErrorIcon: expects an `element`, icon used to indicate when an error is present.
+
+### Observations
+
+The `passwordValidations` object should be the same one used to set the validations in the field configuration for better understanding between visuals and functionality.

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Error/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import DefaultIcon from '@material-ui/icons/Info';
+import { bool, string, objectOf, elementType } from 'prop-types';
+import UTLabel from '../../../../../../../UTLabel';
+import styles from './styles.module.scss';
+const ErrorMessage = _ref => {
+  let {
+    assertion,
+    classes,
+    dataTestId,
+    ErrorIcon,
+    error
+  } = _ref;
+  const {
+    failedIconStyle,
+    iconStyle
+  } = classes;
+  const Icon = ErrorIcon || DefaultIcon;
+  return !assertion && /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "".concat(iconStyle, " ").concat(failedIconStyle)
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.label,
+    colorTheme: "error",
+    variant: "small",
+    withMarkdown: true
+  }, error));
+};
+ErrorMessage.propTypes = {
+  assertion: bool,
+  classes: objectOf(string),
+  dataTestId: string,
+  ErrorIcon: elementType,
+  error: string
+};
+export default ErrorMessage;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Error/styles.module.scss

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  margin-top: 8px;
+}
+
+.label {
+  margin-left: 8px;
+}