@widergy/energy-ui 3.17.1 → 3.18.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [3.18.1](https://github.com/widergy/energy-ui/compare/v3.18.0...v3.18.1) (2024-08-26)
+
+
+### Bug Fixes
+
+* add counter ([#480](https://github.com/widergy/energy-ui/issues/480)) ([7d2d122](https://github.com/widergy/energy-ui/commit/7d2d12228d53af2937c0258756037329ba32714d))
+
+# [3.18.0](https://github.com/widergy/energy-ui/compare/v3.17.1...v3.18.0) (2024-08-26)
+
+
+### Bug Fixes
+
+* import ([e97d3a2](https://github.com/widergy/energy-ui/commit/e97d3a205822fe9ee485efa6b5127e876c828d87))
+* some fixes ([2050111](https://github.com/widergy/energy-ui/commit/20501114dce2f5fbf9623a70a9c3fe216a045071))
+* some fixes ([ace0413](https://github.com/widergy/energy-ui/commit/ace04133a7a954d4676e046950b8d21655be5d23))
+* styles ([4de22c5](https://github.com/widergy/energy-ui/commit/4de22c5344ed1b5094039ade8463a70262c03cff))
+
+
+### Features
+
+* add uttracker ([d4ce615](https://github.com/widergy/energy-ui/commit/d4ce615cfd96eba2381c4da547a8c7040d7232a0))
+
 ## [3.17.1](https://github.com/widergy/energy-ui/compare/v3.17.0...v3.17.1) (2024-08-21)
 
 

package/dist/components/UTBadge/constants.js

@@ -3,16 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
-const COLORS_MAPPER = exports.COLORS_MAPPER = {
-  alert: 'error',
-  identity: 'accent',
-  identitySecondary: 'neutral',
-  information: 'information',
-  negative: 'negative',
-  success: 'success',
-  warning: 'warning'
-};
+exports.DEFAULT_PROPS = void 0;
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
-  colorTheme: 'alert'
+  colorTheme: 'error'
 };

package/dist/components/UTBadge/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
+var _Palette = require("../../constants/Palette");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _theme = require("./theme");
@@ -19,7 +20,7 @@ const UTBadge = _ref => {
     className,
     colorTheme
   } = _ref;
-  const textColorTheme = colorTheme === 'negative' ? 'dark' : 'negative';
+  const textColorTheme = [_Palette.COLOR_THEMES.negative, _Palette.COLOR_THEMES.light].includes(colorTheme) ? 'dark' : 'negative';
   const Component = children ? _UTLabel.default : 'span';
   const componentProps = children ? {
     colorTheme: textColorTheme,

package/dist/components/UTBadge/theme.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _componentUtils = require("../../utils/componentUtils");
 var _constants = require("./constants");
 const variantsColorTheme = (theme, colorTheme) => {
-  const colorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const paletteTheme = theme.Palette[colorName] || theme.Palette.actions?.[colorName];
-  const backgroundColorMapper = {
-    alert: paletteTheme['04'],
-    information: paletteTheme['05'],
-    warning: paletteTheme['05'],
-    success: paletteTheme['05'],
-    identity: paletteTheme['05'],
-    identitySecondary: paletteTheme['05'],
-    negative: paletteTheme['04']
-  };
+  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+  const colorShade = (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return {
-    backgroundColor: backgroundColorMapper[colorTheme]
+    backgroundColor: colorThemeDefinition[colorShade]
   };
 };
 exports.variantsColorTheme = variantsColorTheme;
@@ -29,7 +21,6 @@ const baseButtonTheme = () => ({
     display: 'inline-flex',
     height: 'fit-content',
     justifyContent: 'center',
-    margin: 10,
     minHeight: '10px',
     minWidth: '10px',
     verticalAlign: 'middle'

package/dist/components/UTButton/index.js

@@ -8,7 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
 var _propTypes = require("prop-types");
+var _componentUtils = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
+var _UTBadge = _interopRequireDefault(require("../UTBadge"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _constants = require("./constants");
 var _theme = require("./theme");
@@ -23,6 +25,7 @@ const UTButton = _ref => {
     classes: theme,
     classNames,
     colorTheme,
+    count,
     dataTestId,
     disabled,
     hideTextOnResponsive,
@@ -54,16 +57,21 @@ const UTButton = _ref => {
     variant
   }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
   const IconToShow = IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, iconProps);
+  const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
   const RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
-    className: `
-        ${childrenContainer}
-        ${_stylesModule.default.childrenContainer}
-      `
-  }, iconPlacement === _constants.ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.text} ${hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive} ${classes.text}`
+    className: `${childrenContainer} ${_stylesModule.default.childrenContainer}`
+  }, count && /*#__PURE__*/_react.default.createElement(_UTBadge.default, {
+    colorTheme: counterColorTheme
+  }, count), iconPlacement === _constants.ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.textContainer} ${classes.text}`
   }, children), iconPlacement !== _constants.ICON_PLACEMENTS.left && IconToShow);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classes: materialButtonClasses,
+    className: `
+        ${_stylesModule.default[`padding${(0, _componentUtils.capitalize)(size)}`]}
+        ${hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive}
+        ${!hideTextOnResponsive && !children && _stylesModule.default.noChildren}}
+      `,
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -80,6 +88,7 @@ UTButton.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   colorTheme: _propTypes.string,
+  count: _propTypes.number,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,

package/dist/components/UTButton/styles.module.scss

@@ -3,26 +3,6 @@
 $big-icon: 1.5rem;
 $small-icon: 1.25rem;
 
-.hideTextOnResponsive {
-  @media #{$mobile} {
-    display: none;
-  }
-}
-
-.text {
-  .baseIcon + &,
-  & + .baseIcon {
-    margin-left: 8px;
-
-    &.adaptableIconMedium,
-    &.adaptableIconLarge {
-      @media #{$mobile} {
-        margin-left: -4px;
-      }
-    }
-  }
-}
-
 .baseIcon {
   box-sizing: border-box;
   flex-shrink: 0;
@@ -40,26 +20,14 @@ $small-icon: 1.25rem;
 .iconOnlyMedium {
   font-size: $big-icon;
   height: $big-icon;
-  margin: -1px -5px;
   width: $big-icon;
 }
 
-.iconOnlySmall {
-  margin: -1px -5px;
-}
-
-.adaptableIconSmall {
-  @media #{$mobile} {
-    margin: -1px -5px;
-  }
-}
-
 .adaptableIconLarge,
 .adaptableIconMedium {
   @media #{$mobile} {
     font-size: $big-icon;
     height: $big-icon;
-    margin: -1px -5px;
     width: $big-icon;
   }
 }
@@ -67,9 +35,62 @@ $small-icon: 1.25rem;
 .childrenContainer {
   align-items: center;
   display: flex;
+  grid-gap: 8px;
   justify-content: flex-start;
 }
 
 .loading {
   position: absolute;
 }
+
+.paddingLarge {
+  padding: 12px 16px;
+}
+
+.paddingMedium {
+  padding: 8px 12px;
+}
+
+.paddingSmall {
+  padding: 4px 8px;
+}
+
+.hideTextOnResponsive {
+  .textContainer {
+    @media #{$mobile} {
+      display: none;
+    }
+  }
+
+  &.paddingLarge {
+    @media #{$mobile} {
+      padding: 12px;
+    }
+  }
+
+  &.paddingMedium {
+    @media #{$mobile} {
+      padding: 8px;
+    }
+  }
+
+  &.paddingSmall {
+    @media #{$mobile} {
+      padding: 4px;
+    }
+  }
+}
+
+.noChildren {
+  &.paddingLarge {
+    padding: 12px;
+  }
+
+  &.paddingMedium {
+    padding: 8px;
+  }
+
+  &.paddingSmall {
+    padding: 4px;
+  }
+}

package/dist/components/UTButton/theme.js

@@ -135,19 +135,16 @@ const baseButtonTheme = theme => ({
     fontWeight: '500',
     lineHeight: '1.375rem',
     minWidth: 'auto',
-    padding: '8px 12px',
     textTransform: 'none',
     transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
   },
   sizeLarge: {
     fontSize: '1rem',
-    fontWeight: '500',
-    padding: '12px 16px'
+    fontWeight: '500'
   },
   sizeSmall: {
     fontSize: '0.875rem',
-    fontWeight: '500',
-    padding: '4px 8px'
+    fontWeight: '500'
   },
   circularProgress: {
     color: theme.UTButton?.circularProgress?.color || '484848'

package/dist/components/UTButton/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIconProps = void 0;
+exports.getIconProps = exports.getCounterColorTheme = void 0;
 var _Palette = require("../../constants/Palette");
 var _componentUtils = require("../../utils/componentUtils");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
@@ -36,4 +36,6 @@ const getIconProps = _ref => {
     } : {})
   };
 };
-exports.getIconProps = getIconProps;
+exports.getIconProps = getIconProps;
+const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : _constants.COLORS_MAPPER[colorTheme];
+exports.getCounterColorTheme = getCounterColorTheme;

package/dist/components/UTIcon/theme.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveColor = exports.getIconProps = void 0;
-var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
 var _constants = require("./constants");
-const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 const retrieveColor = _ref => {
   let {
     colorTheme,
@@ -14,7 +13,7 @@ const retrieveColor = _ref => {
     theme
   } = _ref;
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_COLOR_THEME];
-  const colorShade = shade || getDefaultColorShade(colorTheme);
+  const colorShade = shade || (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade];
 };
 exports.retrieveColor = retrieveColor;

package/dist/components/UTLabel/theme.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _Palette = require("../../constants/Palette");
+var _componentUtils = require("../../utils/componentUtils");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions?.[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
-  const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
 const linkColor = (theme, colorTheme) => {

package/dist/components/UTTracker/README.md

@@ -0,0 +1,24 @@
+# UTTracker
+
+### Description
+
+This component displays a vertical stepper intended to track progress
+
+## Props
+
+| Name        | Type              | Default  | Description                                                                                                                                                           |
+| ----------- | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title       | string            |          | Displays the title above the tracker.                                                                                                                                 |
+| mode        | card \| flat      | card     | Defines whether the component should display as a card or as the bare components without any background.                                                              |
+| variant     | standard \| error | standard | Defines the color scheme of the tracker steps and the icon on the active step.                                                                                        |
+| steps       | stepsType         |          | Displays a step with a rounded icon on the left for each object received.                                                                                             |
+| currentStep | number            |          | Defines which step will be active, previous ones will be marked as completed while following ones will not. Use 1 for the first step                                  |
+| detailsTab  | detailsType       |          | Defines whether the detailsTab is enabled or not, if it is, it will show the subSteps of each step. The title property shows a message along the tab (card mode only) |
+
+### Custom Types
+
+| Type         | Shape                                                                          |
+| ------------ | ------------------------------------------------------------------------------ |
+| stepsType    | `{ id: number, title: string, subtitle: string, subSteps: [...subStepsType] }` |
+| subStepsType | `{ id: number, title: string, subtitle: string }`                              |
+| detailsType  | `{ enabled: bool, title: string }`                                             |

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _propTypes2 = require("../../propTypes");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
+var _constants = require("../../constants");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _utils = require("../../utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 = (0, _classesUtils.mergeClasses)({}, _stylesModule.default);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `
+     ${themedStyles.outerContainer}
+      ${stepActive && themedStyles.activeOuterContainer}
+      ${first && _stylesModule.default.stepMargin}
+    `
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: themedStyles.containerStep
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `
+        ${themedStyles.container}
+        ${classes.containerStep}
+        ${stepCompleted && classes.completedLight}
+        ${stepActive && classes.activeContainer}
+        ${stepActive && variant === _constants.ERROR && classes.fullContainer}
+      `
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `
+          ${themedStyles.innerContainer}
+          ${classes.innerContainer}
+          ${stepCompleted && classes.completedInnerContainer}
+          ${stepActive && classes.activeInnerContainer}
+          ${stepCompleted && themedStyles.completedOuterContainer}
+        `
+  }, stepActive && variant === _constants.ERROR && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "light",
+    name: "IconX",
+    size: ERROR_ICON_SIZE,
+    className: themedStyles.icon
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${themedStyles.textContainer} ${stepCompleted && themedStyles.completedOuterContainer}`
+  }, step.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: `${stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor}`,
+    colorTheme: stepActive ? (0, _utils.getLabelTheme)(variant) : 'dark',
+    variant: "small",
+    weight: "medium"
+  }, step.title), step.subtitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: `${themedStyles.subtitleColor} ${themedStyles.subtitle}`
+  }, step.subtitle), step.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: "gray",
+    className: themedStyles.description
+  }, step.description)));
+};
+Step.propTypes = {
+  classes: _propTypes.object,
+  first: _propTypes.bool,
+  isActive: _propTypes.func,
+  isCompleted: _propTypes.func,
+  step: _propTypes2.StepPropTypes,
+  variant: _propTypes2.VariantPropTypes
+};
+var _default = exports.default = Step;

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

@@ -0,0 +1,58 @@
+$oval-size: 20px;
+
+.completedOuterContainer {
+  opacity: 0.5;
+}
+
+.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: ($oval-size / 2);
+  height: ($oval-size / 2);
+  width: ($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 {
+  padding: 6px;
+}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SubStep = _ref => {
+  let {
+    style,
+    subtitle,
+    title
+  } = _ref;
+  const themedStyles = (0, _merge.default)({}, _stylesModule.default, style);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: themedStyles.container
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: themedStyles.titleColor,
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: themedStyles.subtitleColor,
+    variant: "small",
+    shade: "01"
+  }, subtitle));
+};
+SubStep.propTypes = {
+  style: _propTypes.string,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+};
+var _default = exports.default = SubStep;

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

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

package/dist/components/UTTracker/constants.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ownModeStyles = exports.VARIANTS = exports.STANDARD = exports.OVAL_SIZE = exports.FLAT = exports.ERROR = exports.DETAILS_ICON_FLAT_SIZE = exports.DETAILS_ICON_CARD_SIZE = exports.DEFAULT_PROPS = exports.CARD = void 0;
+const CARD = exports.CARD = 'card';
+const FLAT = exports.FLAT = 'flat';
+const STANDARD = exports.STANDARD = 'standard';
+const ERROR = exports.ERROR = 'error';
+const OVAL_SIZE = exports.OVAL_SIZE = 20;
+const DETAILS_ICON_CARD_SIZE = exports.DETAILS_ICON_CARD_SIZE = 20;
+const DETAILS_ICON_FLAT_SIZE = exports.DETAILS_ICON_FLAT_SIZE = 24;
+const ownModeStyles = exports.ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+const VARIANTS = exports.VARIANTS = {
+  error: 'error',
+  standar: 'standar'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'standar'
+};

package/dist/components/UTTracker/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _Step = _interopRequireDefault(require("./components/Step"));
+var _SubStep = _interopRequireDefault(require("./components/SubStep"));
+var _propTypes2 = require("./propTypes");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const UTTracker = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStep,
+    detailsTab,
+    mode = _constants.CARD,
+    steps,
+    title,
+    variant = _constants.STANDARD
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  const [height, setHeight] = (0, _react.useState)(0);
+  const isCompleted = stepNumber => stepNumber < currentStep;
+  const isActive = stepNumber => stepNumber === currentStep;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${classes.outerContainer}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${classes.container} ${mode !== _constants.FLAT ? _stylesModule.default.container : _stylesModule.default.containerFlat} ${!detailsTab && _stylesModule.default.roundedBorders}`
+  }, title && (mode === _constants.FLAT ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    onClick: () => setIsCollapsed(!isCollapsed),
+    classNames: {
+      childrenContainer: _stylesModule.default.button,
+      root: _stylesModule.default.titleTouchable,
+      text: _stylesModule.default.text
+    },
+    variant: "text",
+    Icon: detailsTab?.enabled && mode === _constants.FLAT ? isCollapsed ? 'IconChevronUp' : 'IconChevronDown' : null,
+    iconPlacement: "right"
+  }, title) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    variant: "subtitle1"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height
+    },
+    className: `${title ? _stylesModule.default.connectorTitle : _stylesModule.default.connector} ${isCollapsed ? _stylesModule.default.connectorCollapsed : _stylesModule.default.connector}`
+  }), steps && /*#__PURE__*/_react.default.createElement("div", {
+    ref: el => {
+      if (!el) return;
+      setHeight(el.getBoundingClientRect().height - 45);
+    }
+  }, steps?.map((step, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: step.id
+  }, /*#__PURE__*/_react.default.createElement(_Step.default, {
+    first: index === 0,
+    index,
+    isActive,
+    isCompleted,
+    step,
+    variant,
+    classes: classes
+  }), isCollapsed && /*#__PURE__*/_react.default.createElement("div", null, !(0, _isEmpty.default)(step.subSteps) && step.subSteps?.map(subStep => /*#__PURE__*/_react.default.createElement(_SubStep.default, _extends({
+    key: subStep.id
+  }, subStep, {
+    className: classes.subStep
+  }))))))))), detailsTab?.enabled && mode === _constants.CARD && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.detailButtonContainer} ${classes.detailButtonContainer}`
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      childrenContainer: _stylesModule.default.button,
+      icon: _stylesModule.default.detailIcon,
+      text: _stylesModule.default.text
+    },
+    Icon: isCollapsed ? 'IconChevronUp' : 'IconChevronDown',
+    iconPlacement: "right",
+    onClick: () => setIsCollapsed(!isCollapsed),
+    variant: "text"
+  }, detailsTab.title)));
+};
+UTTracker.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStep: _propTypes.number,
+  detailsTab: _propTypes2.DetailsTabPropTypes,
+  mode: _propTypes2.ModePropTypes,
+  steps: _propTypes2.StepsPropTypes,
+  title: _propTypes.string,
+  variant: _propTypes2.VariantPropTypes
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTracker);

package/dist/components/UTTracker/propTypes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariantPropTypes = exports.SubStepPropTypes = exports.StepsPropTypes = exports.StepPropTypes = exports.ModePropTypes = exports.DetailsTabPropTypes = void 0;
+var _propTypes = require("prop-types");
+var _constants = require("./constants");
+const SubStepPropTypes = exports.SubStepPropTypes = (0, _propTypes.shape)({
+  id: _propTypes.number,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+});
+const StepPropTypes = exports.StepPropTypes = (0, _propTypes.shape)({
+  id: _propTypes.number,
+  subSteps: (0, _propTypes.arrayOf)(SubStepPropTypes),
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+});
+const StepsPropTypes = exports.StepsPropTypes = (0, _propTypes.arrayOf)(StepPropTypes);
+const DetailsTabPropTypes = exports.DetailsTabPropTypes = (0, _propTypes.shape)({
+  enabled: _propTypes.bool,
+  title: _propTypes.string
+});
+const ModePropTypes = exports.ModePropTypes = (0, _propTypes.oneOf)([_constants.CARD, _constants.FLAT]);
+const VariantPropTypes = exports.VariantPropTypes = (0, _propTypes.oneOf)([_constants.STANDARD, _constants.ERROR]);

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

@@ -0,0 +1,73 @@
+@import '../../scss/variables/colors.module.scss';
+
+.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 {
+  border-left: 2px dashed gray;
+  flex-grow: 1;
+  margin-bottom: 5px;
+  margin-left: 32.5px;
+  position: absolute;
+}
+
+.connectorTitle {
+  margin-top: 32px !important;
+}
+
+.connectorCollapsed {
+  border-left: 2px dashed gray;
+  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%;
+}

package/dist/components/UTTracker/theme.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+var _utils = require("./utils");
+const getBorderColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === _constants.VARIANTS.error ? `${theme.Palette.error['04']} !important` : `${theme.Palette.accent['04']} !important`;
+};
+const getBorderLightColor = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return variant === _constants.VARIANTS.error ? `rgba(${theme.Palette.error['04'].match(/\w\w/g).map(x => parseInt(x, 16)).join(', ')}, 0.5) !important` : `rgba(${theme.Palette.accent['04'].match(/\w\w/g).map(x => parseInt(x, 16)).join(', ')}, 0.5) !important`;
+};
+const retrieveStyle = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  const variantTheme = (0, _utils.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
+      })
+    },
+    fullContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    container: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    detailButtonContainer: {
+      backgroundColor: theme.Palette.light['01'],
+      borderTop: `1px solid ${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
+      })
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTracker/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariant = exports.getLabelTheme = exports.getContainerStyle = void 0;
+var _constants = require("./constants");
+const getVariant = variant => _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
+exports.getVariant = getVariant;
+const getLabelTheme = variant => ({
+  [_constants.VARIANTS.error]: 'error',
+  [_constants.VARIANTS.standar]: 'accent'
+})[getVariant(variant)];
+exports.getLabelTheme = getLabelTheme;
+const getContainerStyle = mode => mode === _constants.FLAT ? 'transparent' : 'white';
+exports.getContainerStyle = getContainerStyle;

package/dist/index.js

@@ -363,6 +363,12 @@ Object.defineProperty(exports, "UTTouchableWithoutFeedback", {
     return _UTTouchableWithoutFeedback.default;
   }
 });
+Object.defineProperty(exports, "UTTracker", {
+  enumerable: true,
+  get: function () {
+    return _UTTracker.default;
+  }
+});
 Object.defineProperty(exports, "UTVirtualizedList", {
   enumerable: true,
   get: function () {
@@ -429,6 +435,7 @@ var _UTLoading = _interopRequireDefault(require("./components/UTLoading"));
 var _UTMap = _interopRequireDefault(require("./components/UTMap"));
 var _UTMenu = _interopRequireDefault(require("./components/UTMenu"));
 var _UTModal = _interopRequireDefault(require("./components/UTModal"));
+var _UTOnboarding = _interopRequireDefault(require("./components/UTOnboarding"));
 var _UTPagination = _interopRequireDefault(require("./components/UTPagination"));
 var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
 var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
@@ -453,9 +460,9 @@ var _UTToggle = _interopRequireDefault(require("./components/UTToggle"));
 var _UTTooltip = _interopRequireDefault(require("./components/UTTooltip"));
 var _UTTopbar = _interopRequireDefault(require("./components/UTTopbar"));
 var _UTTouchableWithoutFeedback = _interopRequireDefault(require("./components/UTTouchableWithoutFeedback"));
+var _UTTracker = _interopRequireDefault(require("./components/UTTracker"));
 var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtualizedList"));
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
 var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
-var _UTOnboarding = _interopRequireDefault(require("./components/UTOnboarding"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/componentUtils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUTIcon = exports.default = exports.capitalize = void 0;
+exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.capitalize = void 0;
+var _Palette = require("../constants/Palette");
 const A_CHAR_CODE = 65;
 const Z_CHAR_CODE = 90;
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
@@ -18,6 +19,8 @@ const getAvatarColors = (userName, colors) => {
 const getFirstLetter = userName => userName?.trim().slice(0, 1).toUpperCase() || 'A';
 const isUTIcon = icon => typeof icon === 'string';
 exports.isUTIcon = isUTIcon;
+const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
+exports.getDefaultColorShade = getDefaultColorShade;
 var _default = exports.default = {
   capitalize,
   getAvatarColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.17.1",
+  "version": "3.18.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",