@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTTracker/components/Step/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { bool, func, object } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import { StepPropTypes, VariantPropTypes } from '../../propTypes';
+import UTIcon from '../../../UTIcon';
+import { ERROR } from '../../constants';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { getLabelTheme } from '../../utils';
+import ownStyles from './styles.module.scss';
+const ERROR_ICON_SIZE = 16;
+const Step = _ref => {
+  let {
+    first,
+    isActive,
+    isCompleted,
+    step,
+    classes = {},
+    variant
+  } = _ref;
+  const stepCompleted = isCompleted(step.id);
+  const stepActive = isActive(step.id);
+  const themedStyles = mergeClasses(classes, ownStyles);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "\n     ".concat(themedStyles.outerContainer, "\n      ").concat(stepActive && themedStyles.activeOuterContainer, "\n      ").concat(first && ownStyles.stepMargin, "\n    ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: themedStyles.containerStep
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(themedStyles.container, "\n        ").concat(classes.containerStep, "\n        ").concat(stepCompleted && classes.completedLight, "\n        ").concat(stepActive && classes.activeContainer, "\n        ").concat(stepActive && variant === ERROR && classes.fullContainer, "\n      ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "\n          ".concat(themedStyles.innerContainer, "\n          ").concat(classes.innerContainer, "\n          ").concat(stepCompleted && classes.completedInnerContainer, "\n          ").concat(stepActive && classes.activeInnerContainer, "\n          ").concat(stepCompleted && themedStyles.completedOuterContainer, "\n        ")
+  }, stepActive && variant === ERROR && /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "light",
+    name: "IconX",
+    size: ERROR_ICON_SIZE,
+    className: themedStyles.icon
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(themedStyles.textContainer, " ").concat(stepCompleted && themedStyles.completedOuterContainer)
+  }, step.title && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor),
+    colorTheme: stepActive ? getLabelTheme(variant) : 'dark',
+    variant: "small",
+    weight: "medium"
+  }, step.title), step.subtitle && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(themedStyles.subtitleColor, " ").concat(themedStyles.subtitle)
+  }, step.subtitle), step.description && /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "small",
+    colorTheme: "gray",
+    className: themedStyles.description
+  }, step.description)));
+};
+Step.propTypes = {
+  classes: object,
+  first: bool,
+  isActive: func,
+  isCompleted: func,
+  step: StepPropTypes,
+  variant: VariantPropTypes
+};
+export default Step;

package/dist/esm/components/UTTracker/components/Step/styles.module.scss

@@ -0,0 +1,54 @@
+$oval-size: 20px;
+
+.container {
+  align-items: center;
+  border-radius: $oval-size;
+  border-style: solid;
+  border-width: calc(#{$oval-size} / 10);
+  display: flex;
+  height: $oval-size;
+  justify-content: center;
+  width: $oval-size;
+}
+
+.description {
+  margin-top: 4px;
+}
+
+.icon {
+  align-self: center;
+  margin-left: -2.5px;
+  margin-top: -3px;
+  position: absolute;
+}
+
+.innerContainer {
+  align-items: center;
+  border-radius: calc($oval-size / 2);
+  height: calc($oval-size / 2);
+  width: calc($oval-size / 2);
+}
+
+.outerContainer {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+  margin: 16px 16px 0 16px;
+  position: relative;
+}
+
+.stepMargin {
+  margin-top: 24px;
+}
+
+.subtitle {
+  margin-top: 4px;
+}
+
+.textContainer {
+  width: 60%;
+}
+
+.containerStep {
+  margin: 6px;
+}

package/dist/esm/components/UTTracker/components/SubStep/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { string } from 'prop-types';
+import merge from 'lodash/merge';
+import UTLabel from '../../../UTLabel';
+import ownStyles from './styles.module.scss';
+const SubStep = _ref => {
+  let {
+    style,
+    subtitle,
+    title
+  } = _ref;
+  const themedStyles = merge({}, ownStyles, style);
+  return /*#__PURE__*/React.createElement("div", {
+    className: themedStyles.container
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: themedStyles.titleColor,
+    variant: "small"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: themedStyles.subtitleColor,
+    variant: "small",
+    shade: "01"
+  }, subtitle));
+};
+SubStep.propTypes = {
+  style: string,
+  subtitle: string,
+  title: string
+};
+export default SubStep;

package/dist/esm/components/UTTracker/components/SubStep/styles.module.scss

@@ -0,0 +1,4 @@
+.container {
+  margin-left: 60px;
+  margin-top: 4px;
+}

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

@@ -0,0 +1,33 @@
+export const CARD = 'card';
+export const FLAT = 'flat';
+export const STANDARD = 'standard';
+export const ERROR = 'error';
+export const OVAL_SIZE = 20;
+export const DETAILS_ICON_CARD_SIZE = 20;
+export const DETAILS_ICON_FLAT_SIZE = 24;
+export const ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+export const VARIANTS = {
+  error: 'error',
+  standar: 'standar'
+};
+export const DEFAULT_PROPS = {
+  variant: 'standar'
+};

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

@@ -0,0 +1,111 @@
+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, { useState, useMemo } from 'react';
+import { number, objectOf, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+import Step from './components/Step';
+import SubStep from './components/SubStep';
+import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
+import { CARD, FLAT, STANDARD, ERROR } from './constants';
+const UTTracker = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStep,
+    description,
+    detailsTab,
+    mode = CARD,
+    steps,
+    subtitle,
+    title,
+    variant = STANDARD
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [height, setHeight] = useState(0);
+  const isCompleted = stepNumber => stepNumber < currentStep;
+  const isActive = stepNumber => stepNumber === currentStep;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.outerContainer)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.container, " ").concat(mode !== FLAT ? styles.container : styles.containerFlat, " ").concat(!detailsTab && styles.roundedBorders)
+  }, title && (mode === FLAT && detailsTab !== null && detailsTab !== void 0 && detailsTab.enabled ? /*#__PURE__*/React.createElement(UTButton, {
+    onClick: () => setIsCollapsed(!isCollapsed),
+    classNames: {
+      childrenContainer: styles.button,
+      root: styles.titleTouchable,
+      text: styles.text
+    },
+    variant: "text",
+    Icon: isCollapsed ? 'IconChevronUp' : 'IconChevronDown',
+    iconPlacement: "right"
+  }, title) : /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium",
+    variant: "subtitle1"
+  }, title)), /*#__PURE__*/React.createElement("div", null, (subtitle || description) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.subtitleAndDescription, " ").concat(mode === FLAT ? styles.paddingLeft : '', " ").concat(variant === ERROR ? classes.errorBanner : '')
+  }, subtitle && variant === ERROR && /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "small",
+    weight: "medium"
+  }, subtitle), description && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, description)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height
+    },
+    className: "".concat(title && styles.connectorTitle, " ").concat(isCollapsed ? styles.connectorCollapsed : styles.connector, " ").concat(classes.connector)
+  }), steps && /*#__PURE__*/React.createElement("div", {
+    ref: el => {
+      if (!el) return;
+      setHeight(el.getBoundingClientRect().height - 45);
+    }
+  }, steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    var _step$subSteps;
+    return /*#__PURE__*/React.createElement("div", {
+      key: step.id
+    }, /*#__PURE__*/React.createElement(Step, {
+      first: index === 0,
+      index,
+      isActive,
+      isCompleted,
+      step,
+      variant,
+      classes: classes
+    }), isCollapsed && /*#__PURE__*/React.createElement("div", null, !isEmpty(step.subSteps) && ((_step$subSteps = step.subSteps) === null || _step$subSteps === void 0 ? void 0 : _step$subSteps.map(subStep => /*#__PURE__*/React.createElement(SubStep, _extends({
+      key: subStep.id
+    }, subStep, {
+      className: classes.subStep
+    }))))));
+  })))), (detailsTab === null || detailsTab === void 0 ? void 0 : detailsTab.enabled) && mode === CARD && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.detailButtonContainer, " ").concat(classes.detailButtonContainer)
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      childrenContainer: styles.button,
+      icon: styles.detailIcon,
+      text: styles.text
+    },
+    Icon: isCollapsed ? 'IconChevronUp' : 'IconChevronDown',
+    iconPlacement: "right",
+    onClick: () => setIsCollapsed(!isCollapsed),
+    variant: "text"
+  }, detailsTab.title)));
+};
+UTTracker.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  currentStep: number,
+  description: string,
+  detailsTab: DetailsTabPropTypes,
+  mode: ModePropTypes,
+  steps: StepsPropTypes,
+  subtitle: string,
+  title: string,
+  variant: VariantPropTypes
+};
+export default WithTheme(retrieveStyle)(UTTracker);

package/dist/esm/components/UTTracker/propTypes.js

@@ -0,0 +1,20 @@
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+export const SubStepPropTypes = shape({
+  id: number,
+  subtitle: string,
+  title: string
+});
+export const StepPropTypes = shape({
+  id: number,
+  subSteps: arrayOf(SubStepPropTypes),
+  subtitle: string,
+  title: string
+});
+export const StepsPropTypes = arrayOf(StepPropTypes);
+export const DetailsTabPropTypes = shape({
+  enabled: bool,
+  title: string
+});
+export const ModePropTypes = oneOf([CARD, FLAT]);
+export const VariantPropTypes = oneOf([STANDARD, ERROR]);

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

@@ -0,0 +1,82 @@
+.container {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+.containerFlat {
+  background-color: transparent;
+}
+
+.detailButtonContainer {
+  align-self: baseline;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.roundedBorders {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.titleContainer {
+  justify-content: space-between;
+  display: flex;
+}
+
+.titleTouchable {
+  align-self: baseline;
+}
+
+.connector {
+  flex-grow: 1;
+  margin-bottom: 5px;
+  margin-left: 32.5px;
+  position: absolute;
+}
+
+.connectorTitle {
+  margin-top: 32px !important;
+}
+
+.connectorCollapsed {
+  flex-grow: 1;
+  margin-bottom: 5px;
+  margin-left: 32.5px;
+  position: absolute;
+}
+
+.button {
+  grid-gap: 8px;
+  width: 100%;
+}
+
+.detailIcon {
+  height: 20px;
+  width: 20px;
+}
+
+.text {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.paddingLeft {
+  padding-left: 12px;
+}
+
+.subtitleAndDescription {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 4px;
+  line-break: anywhere;
+  margin-top: 8px;
+  max-width: 400px;
+}

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

@@ -0,0 +1,89 @@
+import { VARIANTS } from './constants';
+import { getVariant } from './utils';
+const getBorderColor = _ref => {
+  var _theme$Palette$action, _theme$Palette$accent;
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || ((_theme$Palette$accent = theme.Palette.accent) === null || _theme$Palette$accent === void 0 ? void 0 : _theme$Palette$accent['04']), " !important");
+};
+const getBorderLightColor = _ref2 => {
+  var _theme$Palette$action2, _theme$Palette$accent2;
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return variant === VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || ((_theme$Palette$accent2 = theme.Palette.accent) === null || _theme$Palette$accent2 === void 0 ? void 0 : _theme$Palette$accent2['04']), " !important");
+};
+export const retrieveStyle = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  const variantTheme = getVariant(variant);
+  return {
+    activeContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    activeInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedOuterContainer: {
+      opacity: 0.5
+    },
+    fullContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    container: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    connector: {
+      borderLeft: "2px dashed ".concat(theme.Palette.gray['04'])
+    },
+    detailButtonContainer: {
+      backgroundColor: theme.Palette.light['01'],
+      borderTop: "1px solid ".concat(theme.Palette.light['04'])
+    },
+    containerStep: {
+      backgroundColor: theme.Palette.light['01'],
+      borderColor: theme.Palette.gray['04']
+    },
+    innerContainer: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    completedLight: {
+      borderColor: getBorderLightColor({
+        theme,
+        variant: variantTheme
+      }),
+      opacity: 0.5
+    },
+    errorBanner: {
+      backgroundColor: theme.Palette.error['01'],
+      borderRadius: 4,
+      padding: 8
+    }
+  };
+};

package/dist/esm/components/UTTracker/utils.js

@@ -0,0 +1,7 @@
+import { DEFAULT_PROPS, FLAT, VARIANTS } from './constants';
+export const getVariant = variant => VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant];
+export const getLabelTheme = variant => ({
+  [VARIANTS.error]: 'error',
+  [VARIANTS.standar]: 'accent'
+})[getVariant(variant)];
+export const getContainerStyle = mode => mode === FLAT ? 'transparent' : 'white';

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

@@ -0,0 +1,69 @@
+# UTValidation
+
+## Description
+
+`UTValidation` is a component designed to display input validation messages in a structured and customizable way. It supports various statuses such as `success`, `error`, and `default`, and can include optional icons for each validation message.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                  |
+| -------------- | ------ | ------- | -------------------------------------------------------------------------------------------- |
+| className      | string |         | Custom CSS class to apply to the root of the component.                                      |
+| dataTestId     | string |         | Component `data-testid`                                                                      |
+| validationData | array  | []      | Array of validation data objects to display messages, each with a status and optional icons. |
+
+### validationData
+
+The `validationData` prop is an array of objects, each representing a group of validation messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
+
+#### Structure of validationData
+
+- **title** (optional): A string representing the title of the validation group.
+- **status** (optional): A string indicating the status of the validation group. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+- **items** (required): An array of objects, each representing an individual validation item.
+  - **text** (required): A string containing the validation message.
+  - **status** (optional): A string indicating the status of the validation item. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
+
+### Example
+
+```javascript
+const validationData = [
+  {
+    items: [
+      {
+        status: 'success',
+        text: 'Must be at least 8 characters long.',
+        withIcon: true // Optional, defaults to true
+      }
+    ]
+  },
+  {
+    title: 'Must meet at least 2 of the following conditions:',
+    status: 'error',
+    items: [
+      {
+        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        status: 'success',
+        text: 'At least 1 number.',
+        withIcon: false // Will not display an icon
+      }
+    ]
+  }
+];
+```
+
+## Statuses
+
+The `status` prop can be one of these values:
+
+- `success`
+- `error`
+- `default`
+
+If `status` is not provided, it defaults to `default`.

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

@@ -0,0 +1,21 @@
+export const STATUSES = {
+  success: 'success',
+  error: 'error',
+  default: 'default'
+};
+export const ICON_STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'light'
+};
+export const STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'gray'
+};
+export const ICON_MAPPER = {
+  [STATUSES.success]: 'IconCheck',
+  [STATUSES.error]: 'IconX'
+};
+export const STATUSES_WITH_ICON = [STATUSES.success, STATUSES.error];
+export const ICON_SIZE = 15;

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { arrayOf, bool, objectOf, shape, string } from 'prop-types';
+import { capitalize } from '../../utils/componentUtils';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { ICON_MAPPER, ICON_SIZE, STATUS_COLOR_MAPPER, STATUSES_WITH_ICON, STATUSES } from './constants';
+import { generateItemKey, generateKey } from './utils';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTValidation = _ref => {
+  let {
+    classes,
+    className,
+    dataTestId,
+    validationData = []
+  } = _ref;
+  if (isEmpty(validationData)) return null;
+  const showIcon = status => STATUSES_WITH_ICON.includes(status);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(className, " ").concat(styles.container)
+  }, validationData.map((_ref2, index) => {
+    let {
+      items,
+      status = STATUSES.default,
+      title
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: generateKey({
+        items,
+        status,
+        title
+      }, index),
+      className: styles.validationContainer
+    }, title && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: STATUS_COLOR_MAPPER[status],
+      variant: "small"
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: styles.itemsContainer
+    }, items.map((_ref3, itemIndex) => {
+      let {
+        text,
+        status: itemStatus = STATUSES.default,
+        withIcon = true
+      } = _ref3;
+      return /*#__PURE__*/React.createElement("div", {
+        key: generateItemKey({
+          text,
+          status: itemStatus
+        }, itemIndex),
+        className: styles.itemContainer,
+        "data-testid": "".concat(dataTestId, ".").concat(index, ".").concat(itemIndex)
+      }, withIcon && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(styles.iconContainer, " ").concat(classes["icon".concat(capitalize(itemStatus))])
+      }, showIcon(itemStatus) && /*#__PURE__*/React.createElement(UTIcon, {
+        colorTheme: itemStatus,
+        name: ICON_MAPPER[itemStatus],
+        size: ICON_SIZE
+      })), /*#__PURE__*/React.createElement(UTLabel, {
+        colorTheme: STATUS_COLOR_MAPPER[itemStatus],
+        variant: "small"
+      }, text));
+    })));
+  }));
+};
+export const validationDataProptypes = arrayOf(shape({
+  items: arrayOf(shape({
+    status: string,
+    text: string,
+    withIcon: bool
+  })),
+  status: string,
+  title: string
+}));
+UTValidation.propTypes = {
+  classes: objectOf(string),
+  className: string,
+  dataTestId: string,
+  validationData: validationDataProptypes
+};
+export default WithTheme(retrieveStyle)(UTValidation);