@widergy/energy-ui 3.7.5 → 3.9.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [3.9.0](https://github.com/widergy/energy-ui/compare/v3.8.0...v3.9.0) (2024-06-06)
+
+
+### Features
+
+* add wizard to workflow component ([#450](https://github.com/widergy/energy-ui/issues/450)) ([943896d](https://github.com/widergy/energy-ui/commit/943896d4d36c22574d06274da3d1b270d215f75a))
+
+# [3.8.0](https://github.com/widergy/energy-ui/compare/v3.7.5...v3.8.0) (2024-06-06)
+
+
+### Bug Fixes
+
+* remove onboarding in example ([8b531c0](https://github.com/widergy/energy-ui/commit/8b531c097c00ff4c54f87cfeed20c532d91e48c4))
+* remove prev button for first step ([e7f59b4](https://github.com/widergy/energy-ui/commit/e7f59b4fca9f63425f509df0b1f8e5fcb5b9f014))
+* some fixes ([2b642de](https://github.com/widergy/energy-ui/commit/2b642de2b9c4eb79cbc906182ba837d80b6e4077))
+* some fixes ([3c86c20](https://github.com/widergy/energy-ui/commit/3c86c203b5515b6151b13cf5defef499f94256b4))
+
+
+### Features
+
+* add utonboarding ([8eff9a7](https://github.com/widergy/energy-ui/commit/8eff9a70ad6286954bae20bdc4913f06efed7591))
+
 ## [3.7.5](https://github.com/widergy/energy-ui/compare/v3.7.4...v3.7.5) (2024-06-05)
 
 

package/dist/components/UTOnboarding/README.md

@@ -0,0 +1,44 @@
+# UTOnboarding
+
+### Description
+
+Onboarding component.
+
+### Variants
+
+- Default: variant = 'dark'
+- Information: variant = 'information'
+- Light: variant = 'light'
+
+### Props
+
+- handleOnClose: function --> optional, se ejecutara cuando se cierra el onboarding
+- handleComplete: function --> optional, se ejecutara cuando se completa el onboarding
+- options: object | Espera recibir un objeto propio de la libreria de intro react js. Ejemplo de valores posibles
+  - nextLabel: string --> Next button label
+  - prevLabel: string --> Previous button label
+  - options: objeto --> Ejemplo de lo que se puede pasar:
+    {{ positionPrecedence: ['right'] }} (posicion del onboarding)
+- steps: array of object --> requerido
+
+  - Cada objeto espera recibir:
+
+    ` {
+    title: '¡Bienvenido a tu oficina virtual!',
+    element: '.step_1',
+    image: '',
+    description:
+      'Inicia el tutorial de introducción y descubrí todas las gestiones que podés realizar en tus cuentas.'
+}`
+
+  - title: Titulo del onboarding
+  - element: string | CSS selector to use for the step
+  - position: string | Position of the tooltip
+  - intro : string | The tooltip content
+  - description: string | si quiero agregar una imagen voy a tener que pasarle una description en lugar del intro
+  - image: imagen de tipo png
+  - vectorImage: imagen de tipo svg
+  - hideFooter: bool | oculta los botones y los steps
+  - highlightClass: CSS class of the helperLayer.
+  - tooltipClass: CSS class of the tooltip
+  - isSuggestion: bool | si es el primer paso y no quiero que tenga tooltip puedo dejarlo en true

package/dist/components/UTOnboarding/components/OnboardingStep/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("intro.js/introjs.css");
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const OnboardingStep = _ref => {
+  let {
+    hideFooter = false,
+    currentStep,
+    step,
+    totalSteps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: _stylesModule.default.description
+  }, step.description), step.vectorImage ? /*#__PURE__*/_react.default.createElement(step.vectorImage, {
+    alt: "",
+    className: _stylesModule.default.wizardImage
+  }) : step.image && /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    className: _stylesModule.default.wizardImage,
+    src: step.image
+  }), !hideFooter && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: _stylesModule.default.counterSteps
+  }, currentStep + 1, " de ", totalSteps)));
+};
+OnboardingStep.propTypes = {
+  currentStep: _propTypes.number,
+  hideFooter: _propTypes.bool,
+  step: _propTypes.object,
+  totalSteps: _propTypes.number
+};
+var _default = exports.default = OnboardingStep;

package/dist/components/UTOnboarding/components/OnboardingStep/styles.module.scss

@@ -0,0 +1,55 @@
+@import '../../../../scss/variables/colors.module.scss';
+
+.description {
+  padding: 0;
+  margin-top: 4px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.counterSteps {
+  font-size: 12px;
+  padding: 0;
+  margin-top: 4px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  align-self: center;
+}
+
+.footer {
+  display: flex;
+  margin-top: 16px;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  position: absolute;
+}
+
+.buttons {
+  padding: 4px 8px;
+  font-size: 14px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  border-radius: 4px;
+  border: 0;
+  color: inherit;
+}
+
+.nextButton {
+  background-color: $white;
+  color: #091e42;
+  &:hover {
+    color: $white;
+    background-color: #091e42;
+  }
+}
+
+.wizardImage {
+  max-height: 180px;
+  max-width: 264px;
+  object-fit: cover;
+}

package/dist/components/UTOnboarding/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.START_LABEL = exports.PREV_LABEL = exports.NEXT_LABEL = exports.DONE_LABEL = exports.DEFAULT_PROPS = void 0;
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'dark'
+};
+const DONE_LABEL = exports.DONE_LABEL = 'Finalizar';
+const NEXT_LABEL = exports.NEXT_LABEL = 'Siguiente';
+const PREV_LABEL = exports.PREV_LABEL = 'Atrás';
+const START_LABEL = exports.START_LABEL = 'Comenzar';

package/dist/components/UTOnboarding/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _intro = require("intro.js-react");
+require("intro.js/introjs.css");
+var _propTypes = require("prop-types");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _OnboardingStep = _interopRequireDefault(require("./components/OnboardingStep"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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; }
+const UTOnboarding = _ref => {
+  var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
+  let {
+    classes: themeClasses,
+    classNames,
+    handleComplete,
+    handleOnClose,
+    options,
+    steps,
+    variant
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [themeClasses, classNames]) || {};
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [enabled, setEnabled] = (0, _react.useState)(true);
+  const currentStepIsSuggestion = (_steps$currentStep$is = (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.isSuggestion) !== null && _steps$currentStep$is !== void 0 ? _steps$currentStep$is : false;
+  const hideFooter = (_steps$currentStep$hi = (_steps$currentStep2 = steps[currentStep]) === null || _steps$currentStep2 === void 0 ? void 0 : _steps$currentStep2.hideFooter) !== null && _steps$currentStep$hi !== void 0 ? _steps$currentStep$hi : false;
+  const totalSteps = steps.length;
+  (0, _react.useEffect)(() => {
+    setLoading(false);
+  }, [steps]);
+  (0, _react.useEffect)(() => {
+    const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer');
+    if (currentStepIsSuggestion) {
+      var _referenceLayer$class;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class = referenceLayer.classList) === null || _referenceLayer$class === void 0 || _referenceLayer$class.add(_stylesModule.default.suggestionReference);
+    } else {
+      var _referenceLayer$class2;
+      referenceLayer === null || referenceLayer === void 0 || (_referenceLayer$class2 = referenceLayer.classList) === null || _referenceLayer$class2 === void 0 || _referenceLayer$class2.remove(_stylesModule.default.suggestionReference);
+    }
+    const footer = document.querySelector('.introjs-tooltipbuttons');
+    if (hideFooter) {
+      var _footer$classList;
+      footer === null || footer === void 0 || (_footer$classList = footer.classList) === null || _footer$classList === void 0 || _footer$classList.add(_stylesModule.default.displayNone);
+    } else {
+      var _footer$classList2;
+      footer === null || footer === void 0 || (_footer$classList2 = footer.classList) === null || _footer$classList2 === void 0 || _footer$classList2.remove(_stylesModule.default.displayNone);
+    }
+  });
+  return loading ? null : /*#__PURE__*/_react.default.createElement(_intro.Steps, {
+    enabled: enabled,
+    steps: steps.map((step, index) => ({
+      ...step,
+      intro: step.description ? /*#__PURE__*/_react.default.createElement(_OnboardingStep.default, {
+        key: step,
+        step: step,
+        currentStep: index,
+        totalSteps: totalSteps,
+        classes: classes,
+        hideFooter: step === null || step === void 0 ? void 0 : step.hideFooter,
+        buttonPreviousTitle: step === null || step === void 0 ? void 0 : step.buttonPreviousTitle,
+        nextStep: step === null || step === void 0 ? void 0 : step.nextStep,
+        variant: variant
+      }) : step.intro
+    })),
+    initialStep: 0,
+    onExit: handleOnClose || (() => setEnabled(false)),
+    onBeforeChange: nextStep => {
+      var _steps$nextStep;
+      const overlay = document.querySelector('.introjs-overlay');
+      setCurrentStep(nextStep);
+      if ((_steps$nextStep = steps[nextStep]) !== null && _steps$nextStep !== void 0 && _steps$nextStep.isSuggestion) {
+        var _overlay$classList;
+        overlay === null || overlay === void 0 || (_overlay$classList = overlay.classList) === null || _overlay$classList === void 0 || _overlay$classList.add(_stylesModule.default.suggestionOverlay);
+      } else {
+        var _overlay$classList2;
+        overlay === null || overlay === void 0 || (_overlay$classList2 = overlay.classList) === null || _overlay$classList2 === void 0 || _overlay$classList2.remove(_stylesModule.default.suggestionOverlay);
+      }
+    },
+    onComplete: handleComplete || {},
+    options: {
+      buttonClass: "".concat(_stylesModule.default.button, " ").concat(classes.buttons),
+      doneLabel: _constants.DONE_LABEL,
+      exitOnEsc: false,
+      exitOnOverlayClick: false,
+      helperElementPadding: 20,
+      hidePrev: true,
+      nextLabel: currentStep === 0 ? _constants.START_LABEL : _constants.NEXT_LABEL,
+      prevLabel: _constants.PREV_LABEL,
+      showBullets: false,
+      showProgress: false,
+      tooltipClass: "".concat(_stylesModule.default.tooltipContainer, " ").concat(classes.onboardingContainer),
+      highlightClass: (_steps$currentStep3 = steps[currentStep]) !== null && _steps$currentStep3 !== void 0 && _steps$currentStep3.isSuggestion ? _stylesModule.default.suggestionHighlight : _stylesModule.default.highlight,
+      ...((_steps$currentStep4 = steps[currentStep]) !== null && _steps$currentStep4 !== void 0 && _steps$currentStep4.hideFooter ? {
+        hidePrev: true,
+        hideNext: true,
+        showProgress: false,
+        showButtons: false
+      } : null),
+      ...options
+    }
+  });
+};
+UTOnboarding.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  handleComplete: _propTypes.func,
+  handleOnClose: _propTypes.func,
+  options: _propTypes.object,
+  steps: _propTypes.array,
+  variant: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTOnboarding);

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

@@ -0,0 +1,162 @@
+@import '../../scss/variables/colors.module.scss';
+$intro-js-disabled-button-class: 'introjs-disabled';
+$introjs-progress: 'introjs-progress';
+$introjs-progressbar: 'introjs-progressbar';
+$introjs-skipbutton: 'introjs-skipbutton';
+$introjs-arrow: 'introjs-arrow';
+$introjs-tooltip-header: 'introjs-tooltip-header';
+$introjs-tooltiptext: 'introjs-tooltiptext';
+$introjs-tooltip-title: 'introjs-tooltip-title';
+$introjs-nextbutton: 'introjs-nextbutton';
+$introjs-prevbutton: 'introjs-prevbutton';
+$introjs-overlay: 'introjs-overlay';
+$introjs-tooltip-reference-layer: 'introjs-tooltipReferenceLayer';
+$introjs-helper-layer: 'introjs-helperLayer';
+$introjs-show-element: 'introjs-showElement';
+$introjs-tooltipbuttons: 'introjs-tooltipbuttons';
+
+%tooltipContainer {
+  box-sizing: border-box;
+  color: $white;
+  margin: 0;
+  padding: 16px !important;
+  width: 296px;
+  z-index: 1290;
+  [class*='#{$introjs-skipbutton}'] {
+    color: $white;
+    font-size: 30px;
+    font-weight: 400;
+    position: relative;
+    top: -10px;
+    &:hover {
+      background-color: var(--actionAccent03) !important;
+    }
+  }
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('https://fonts.gstatic.com/s/inter/v8/UcCO3FwrqlXbO-JbATNBXYFF.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+1F1E6-1F1FF;
+}
+
+.button {
+  background-color: var(--actionAccent04) !important;
+  border-radius: 4px;
+  box-shadow: none;
+  color: var(--actionNegative04) !important;
+  cursor: pointer;
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.375rem;
+  padding: 4px 8px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 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;
+}
+
+.button:hover {
+  opacity: 0.5;
+}
+
+[class*='#{$intro-js-disabled-button-class}'] {
+  border-color: none;
+  cursor: auto;
+}
+[class*='#{$introjs-tooltip-header}'] {
+  display: flex;
+  padding: 0;
+}
+
+[class*='#{$introjs-tooltiptext}'] {
+  padding: 0;
+}
+
+[class*='#{$introjs-tooltip-title}'] {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+[class*='#{$introjs-overlay}'] {
+  z-index: 1280;
+}
+
+[class*='#{$introjs-nextbutton}'] {
+  &:focus {
+    outline: none;
+  }
+}
+
+[class*='#{$introjs-tooltip-reference-layer}'] {
+  margin: 16px;
+  z-index: 1290;
+}
+
+[class*='#{$introjs-helper-layer}'] {
+  z-index: 1275;
+}
+
+[class*='#{$introjs-show-element}'] {
+  z-index: 1285 !important;
+}
+
+.suggestionHighlight {
+  box-shadow: none !important;
+  height: unset !important;
+}
+
+.suggestionOverlay {
+  display: none;
+}
+
+.tooltipSuggestionContainer {
+  @extend %tooltipContainer;
+  background-color: var(--actionNeutral05);
+  color: var(--light01);
+
+  [class*='#{$introjs-skipbutton}'] {
+    border-radius: 4px;
+    color: var(--light01);
+    &:hover {
+      background-color: var(--actionAccent03) !important;
+    }
+  }
+}
+[class*='#{$introjs-arrow}'] {
+  border: none;
+}
+.suggestionReference {
+  height: unset !important;
+}
+
+.tooltipContainer {
+  @extend %tooltipContainer;
+}
+
+.displayNone {
+  display: none !important;
+}
+
+[class*='#{$introjs-tooltipbuttons}'] {
+  border-top: none;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: flex-end;
+  padding-top: 16px !important;
+  padding: 0;
+}
+
+.highlight {
+  border-radius: 0;
+  border: 4px #17f455 solid;
+  box-shadow:
+    #17f455 0px 0px 1px 2px,
+    rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
+}

package/dist/components/UTOnboarding/theme.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateProps = exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant !== _constants.VARIANTS.light ? theme.Palette[variant]['05'] : theme.Palette.light['01'];
+};
+const getLabelTheme = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.light['01'],
+    [_constants.VARIANTS.information]: theme.Palette.light['01'],
+    [_constants.VARIANTS.light]: theme.Palette.dark['05']
+  }[variant];
+};
+const getButtonTheme = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.actions.negative['04'],
+    [_constants.VARIANTS.information]: theme.Palette.actions.negative['04'],
+    [_constants.VARIANTS.light]: theme.Palette.actions.accent['04']
+  }[variant];
+};
+const getButtonNextTextTheme = _ref4 => {
+  let {
+    theme,
+    variant
+  } = _ref4;
+  return {
+    [_constants.VARIANTS.dark]: theme.Palette.actions.neutral['05'],
+    [_constants.VARIANTS.information]: theme.Palette.actions.neutral['05'],
+    [_constants.VARIANTS.light]: theme.Palette.actions.negative['05']
+  }[variant];
+};
+const validateProps = _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return {
+    variant: _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant]
+  };
+};
+exports.validateProps = validateProps;
+const retrieveStyle = _ref6 => {
+  let {
+    theme,
+    variant
+  } = _ref6;
+  return {
+    onboardingContainer: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }),
+      color: getLabelTheme({
+        theme,
+        ...validateProps({
+          variant
+        })
+      }),
+      '& .introjs-skipbutton': {
+        color: getLabelTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        })
+      },
+      '& .introjs-nextbutton': {
+        backgroundColor: "".concat(getButtonTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important"),
+        color: "".concat(getButtonNextTextTheme({
+          theme,
+          ...validateProps({
+            variant
+          })
+        }), " !important")
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTWizard/components/StepImage/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepImage = _ref => {
+  let {
+    Image
+  } = _ref;
+  return typeof Image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    className: _stylesModule.default.image,
+    src: Image
+  }) : /*#__PURE__*/_react.default.createElement(Image, {
+    className: _stylesModule.default.image
+  });
+};
+StepImage.propTypes = {
+  Image: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.elementType])
+};
+var _default = exports.default = StepImage;

package/dist/components/UTWizard/components/StepImage/styles.module.scss

@@ -0,0 +1,6 @@
+.image {
+  align-self: center;
+  display: flex;
+  max-height: 180px;
+  max-width: 264px;
+}

package/dist/components/UTWizard/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANTS = exports.DISABLE_TEXT = exports.DEFAULT_PROPS = void 0;
+const DISABLE_TEXT = exports.DISABLE_TEXT = 'No volver a mostrar';
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'dark'
+};

package/dist/components/UTWizard/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+require("react-perfect-scrollbar/dist/css/styles.css");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _StepImage = _interopRequireDefault(require("./components/StepImage"));
+var _theme = require("./theme");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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; }
+const UTWizard = _ref => {
+  let {
+    classes: themeClasses,
+    classNames,
+    description,
+    enabled,
+    handleOnClick,
+    image,
+    title,
+    variant
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const stepEnabled = enabled && !!(description || image || title);
+  return stepEnabled && (isOpen ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.container, " ").concat(_stylesModule.default.container)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.header
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.title
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    colorTheme: (0, _utils.getLabelTheme)(variant),
+    withMarkdown: true
+  }, title), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    Icon: "IconChevronDown",
+    onClick: () => setIsOpen(false),
+    size: "small",
+    variant: "text",
+    colorTheme: (0, _utils.getButtonTheme)(variant)
+  })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: (0, _utils.getLabelTheme)(variant),
+    withMarkdown: true
+  }, description)), image && /*#__PURE__*/_react.default.createElement(_StepImage.default, {
+    Image: image
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    variant: "text",
+    onClick: handleOnClick,
+    size: "small",
+    colorTheme: (0, _utils.getButtonTheme)(variant),
+    weight: "medium"
+  }, _constants.DISABLE_TEXT)))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.buttonContainer, " ").concat(_stylesModule.default.buttonContainer)
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    size: "small",
+    classNames: {
+      root: "".concat(_stylesModule.default.button, " ").concat(classes.buttonStyle)
+    },
+    onClick: () => setIsOpen(true),
+    colorTheme: (0, _utils.getButtonMinimizedTheme)(variant),
+    Icon: "IconQuestionMark"
+  })));
+};
+UTWizard.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  description: _propTypes.string,
+  enabled: _propTypes.bool,
+  handleOnClick: _propTypes.func,
+  image: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.elementType]),
+  title: _propTypes.string,
+  variant: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWizard);

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

@@ -0,0 +1,54 @@
+.container {
+  border-radius: 4px;
+  bottom: calc(100% + 16px);
+  display: flex;
+  height: fit-content;
+  max-width: 296px;
+  padding: 16px;
+  position: absolute;
+  right: 16px;
+  z-index: 9999;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  max-width: 264px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 264px;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.buttonContainer {
+  bottom: calc(100% + 16px);
+  display: flex;
+  position: absolute;
+  right: 16px;
+  z-index: 9999;
+}
+
+.button {
+  border-radius: 50% !important;
+  height: 48px;
+  width: 48px;
+}

package/dist/components/UTWizard/theme.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+var _utils = require("./utils");
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === _constants.VARIANTS.light ? theme.Palette.light['01'] : theme.Palette[variant]['05'];
+};
+const retrieveStyle = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  const variantTheme = (0, _utils.getVariant)(variant);
+  return {
+    container: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    buttonStyle: {
+      backgroundColor: "".concat(getBackgroundColor({
+        theme,
+        variant: variantTheme
+      }), " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTWizard/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariant = exports.getLabelTheme = exports.getButtonTheme = exports.getButtonMinimizedTheme = 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.dark]: 'light',
+  [_constants.VARIANTS.information]: 'light',
+  [_constants.VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+exports.getLabelTheme = getLabelTheme;
+const getButtonTheme = variant => ({
+  [_constants.VARIANTS.dark]: 'negative',
+  [_constants.VARIANTS.information]: 'negative',
+  [_constants.VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+exports.getButtonTheme = getButtonTheme;
+const getButtonMinimizedTheme = variant => ({
+  [_constants.VARIANTS.dark]: 'secondary',
+  [_constants.VARIANTS.information]: 'secondary',
+  [_constants.VARIANTS.light]: 'negative'
+})[getVariant(variant)];
+exports.getButtonMinimizedTheme = getButtonMinimizedTheme;

package/dist/components/UTWorkflowContainer/versions/V0/index.js

@@ -12,6 +12,7 @@ var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
 var _classesUtils = require("../../../../utils/classesUtils");
+var _UTWizard = _interopRequireDefault(require("../../../UTWizard"));
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
 var _constants = require("./constants");
 var _types = require("./types");
@@ -21,6 +22,7 @@ var _usePrevious = require("./hooks/use-previous");
 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 UTWorkflowContainer = _ref => {
   let {
     backButton,
@@ -39,7 +41,8 @@ const UTWorkflowContainer = _ref => {
     subtitle,
     title,
     TitleIcon,
-    withIcon = false
+    withIcon = false,
+    wizardConfig = {}
   } = _ref;
   (0, _react.useEffect)(() => () => onExit && onExit(), []);
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
@@ -104,7 +107,12 @@ const UTWorkflowContainer = _ref => {
     className: _stylesModule.default.subtitle,
     colorTheme: "gray",
     withMarkdown: true
-  }, subtitle)), children)));
+  }, subtitle)), children), /*#__PURE__*/_react.default.createElement(_UTWizard.default, _extends({
+    classNames: {
+      container: _stylesModule.default.wizardContainer,
+      buttonContainer: _stylesModule.default.wizardButtonContainer
+    }
+  }, wizardConfig))));
 };
 UTWorkflowContainer.propTypes = {
   backButton: _types.buttonTypes,
@@ -123,6 +131,13 @@ UTWorkflowContainer.propTypes = {
   subtitle: _propTypes.string,
   title: _propTypes.string,
   TitleIcon: _propTypes.element,
-  withIcon: _propTypes.bool
+  withIcon: _propTypes.bool,
+  wizardConfig: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    enabled: _propTypes.bool,
+    handleOnClick: _propTypes.func,
+    title: _propTypes.string,
+    variant: _propTypes.string
+  })
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

package/dist/components/UTWorkflowContainer/versions/V0/styles.module.scss

@@ -33,3 +33,11 @@
 .hidden {
   display: none;
 }
+
+.wizardButtonContainer {
+  bottom: 16px;
+}
+
+.wizardContainer {
+  bottom: 16px;
+}

package/dist/components/UTWorkflowContainer/versions/V1/index.js

@@ -13,6 +13,7 @@ var _UTHeader = _interopRequireDefault(require("../../../UTHeader"));
 var _UTStepper = _interopRequireDefault(require("../../../UTStepper"));
 var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
 var _useScreenSize = require("../../../../utils/useScreenSize");
+var _UTWizard = _interopRequireDefault(require("../../../UTWizard"));
 var _NavActions = _interopRequireDefault(require("./components/NavActions"));
 var _types = require("./types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -46,7 +47,8 @@ const UTWorkflowContainer = _ref => {
     title,
     variant = _constants.VARIANTS.DEFAULT,
     withIcon = false,
-    withStepperPadding = true
+    withStepperPadding = true,
+    wizardConfig = {}
   } = _ref;
   (0, _react.useEffect)(() => () => onExit && onExit(), []);
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
@@ -82,7 +84,9 @@ const UTWorkflowContainer = _ref => {
     className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_constants.childrenContentStyle[variant] || _stylesModule.default.childrenContent, " ").concat(classes.childrenContent)
-  }, children))), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
+  }, children))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.footer
+  }, /*#__PURE__*/_react.default.createElement(_UTWizard.default, wizardConfig), !isNavHidden && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
   }, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.mobileCheckboxContainer
@@ -103,7 +107,7 @@ const UTWorkflowContainer = _ref => {
     primaryAction: primaryAction,
     secondaryAction: secondaryAction,
     withIcon: withIcon
-  })));
+  }))));
 };
 UTWorkflowContainer.propTypes = {
   backButton: _types.buttonTypes,
@@ -134,6 +138,13 @@ UTWorkflowContainer.propTypes = {
   title: _propTypes.string,
   variant: _propTypes.string,
   withIcon: _propTypes.bool,
-  withStepperPadding: _propTypes.bool
+  withStepperPadding: _propTypes.bool,
+  wizardConfig: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    enabled: _propTypes.bool,
+    handleOnClick: _propTypes.func,
+    title: _propTypes.string,
+    variant: _propTypes.string
+  })
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

package/dist/components/UTWorkflowContainer/versions/V1/styles.module.scss

@@ -92,3 +92,9 @@
 .mobileCheckboxContainer {
   padding-left: 16px;
 }
+
+.footer {
+  display: flex;
+  position: relative;
+  width: 100%;
+}

package/dist/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "UTModal", {
     return _UTModal.default;
   }
 });
+Object.defineProperty(exports, "UTOnboarding", {
+  enumerable: true,
+  get: function () {
+    return _UTOnboarding.default;
+  }
+});
 Object.defineProperty(exports, "UTPagination", {
   enumerable: true,
   get: function () {
@@ -444,4 +450,5 @@ var _UTVirtualizedList = _interopRequireDefault(require("./components/UTVirtuali
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.7.5",
+  "version": "3.9.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -39,6 +39,8 @@
     "d3": "^7.0.1",
     "dayjs": "^1.10.7",
     "emojilib": "^3.0.10",
+    "intro.js": "^7.2.0",
+    "intro.js-react": "0.7.1",
     "node-sass": "^8.0.0",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",