@widergy/energy-ui 3.3.0 → 3.4.1

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTCheckbox = _interopRequireDefault(require("../../../../../UTCheckbox"));
+var _useScreenSize = require("../../../../../../utils/useScreenSize");
+var _types = require("../../types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 NavActions = _ref => {
+  let {
+    backButton = {},
+    checkbox,
+    currentStep,
+    nextButton = {},
+    primaryAction,
+    secondaryAction
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = (0, _useScreenSize.useScreenSize)();
+  const isBackButtonHidden = currentStep === 1 && !backButton.isVisible || backButton.isHidden;
+  const hideActions = isBackButtonHidden && nextButton.isHidden;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n      ".concat(_stylesModule.default.actionsContainer, "\n      ").concat(hideActions ? _stylesModule.default.hidden : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsGroup
+  }, !isBackButtonHidden && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: "secondary",
+    disabled: backButton.disabled,
+    Icon: backButton === null || backButton === void 0 ? void 0 : backButton.Icon,
+    iconPlacement: "left",
+    onClick: backButton.onClick,
+    size: "large",
+    variant: "text"
+  }, backButton.label || _constants.BACK), secondaryAction && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: secondaryAction.colorTheme || 'primary',
+    disabled: secondaryAction.disabled,
+    iconPlacement: "left",
+    onClick: secondaryAction.onClick,
+    size: "large",
+    variant: secondaryAction.variant || 'text'
+  }, secondaryAction.label), checkbox && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.checkboxContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, checkbox))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsGroup
+  }, primaryAction && !isMobileOrTablet && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: primaryAction.colorTheme || 'primary',
+    disabled: primaryAction.disabled,
+    iconPlacement: "right",
+    onClick: primaryAction.onClick,
+    size: "large",
+    variant: primaryAction.variant || 'semitransparent'
+  }, primaryAction.label), !nextButton.isHidden && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: _stylesModule.default.navAction
+    },
+    colorTheme: "primary",
+    disabled: nextButton.disabled,
+    Icon: nextButton === null || nextButton === void 0 ? void 0 : nextButton.Icon,
+    iconPlacement: "right",
+    onClick: nextButton.onClick,
+    size: "large"
+  }, nextButton.label || _constants.NEXT)));
+};
+NavActions.propTypes = {
+  backButton: _types.buttonTypes,
+  checkbox: (0, _propTypes.shape)({
+    text: _propTypes.string
+  }),
+  currentStep: _propTypes.number,
+  nextButton: _types.buttonTypes,
+  primaryAction: _types.buttonTypes,
+  secondaryAction: _types.buttonTypes,
+  withIcon: _propTypes.bool
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(NavActions);

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

@@ -0,0 +1,34 @@
+@import '../../../../../../scss/variables/mediaQueries.module.scss';
+
+.hidden {
+  display: none;
+}
+
+.actionsContainer {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 16px 32px;
+
+  @media #{$mobile} {
+    padding: 16px;
+  }
+}
+
+.actionsGroup {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.checkboxContainer {
+  width: 100%;
+}
+
+.navAction {
+  flex-shrink: 0;
+  @media #{$mobile} {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _UTProgressBar = _interopRequireDefault(require("../../../UTProgressBar"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTHeader = _interopRequireDefault(require("../../../UTHeader"));
+var _UTStepper = _interopRequireDefault(require("../../../UTStepper"));
+var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
+var _useScreenSize = require("../../../../utils/useScreenSize");
+var _NavActions = _interopRequireDefault(require("./components/NavActions"));
+var _types = require("./types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 UTWorkflowContainer = _ref => {
+  let {
+    backButton,
+    banner,
+    checkbox,
+    children,
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    currentStep = 1,
+    helpText,
+    headerActions,
+    nextButton,
+    onExit,
+    primaryAction,
+    requiredFieldInfo,
+    secondaryAction,
+    stages,
+    stepperSize = 'S',
+    stepsCount,
+    subtitle,
+    tagline,
+    title,
+    TitleIcon,
+    withIcon = false,
+    withStepperPadding = true
+  } = _ref;
+  (0, _react.useEffect)(() => () => onExit && onExit(), []);
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const {
+    isMobileOrTablet
+  } = (0, _useScreenSize.useScreenSize)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.content
+  }, stages && /*#__PURE__*/_react.default.createElement(_UTStepper.default, {
+    stepperSize,
+    currentStage,
+    stages,
+    withPadding: withStepperPadding
+  }), title && /*#__PURE__*/_react.default.createElement(_UTHeader.default, {
+    actions: [...(headerActions || []), ...(isMobileOrTablet ? [primaryAction, secondaryAction] : [])],
+    banner,
+    helpText,
+    requiredFieldInfo,
+    subtitle,
+    tagline,
+    title,
+    TitleIcon
+  }), children), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.bottomNav, " ").concat(_stylesModule.default.bottomNav)
+  }, checkbox && isMobileOrTablet && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.mobileCheckboxContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, checkbox)), stepsCount && /*#__PURE__*/_react.default.createElement(_UTProgressBar.default, {
+    classNames: {
+      barColorPrimary: classes.barColorPrimary,
+      colorPrimary: classes.colorPrimary,
+      container: _stylesModule.default.progressBarContainer,
+      label: _stylesModule.default.progressBarLabel,
+      root: _stylesModule.default.progress
+    },
+    value: currentStep * 100 / (stepsCount + 1)
+  }), /*#__PURE__*/_react.default.createElement(_NavActions.default, {
+    backButton: backButton,
+    checkbox: checkbox,
+    currentStep: currentStep,
+    nextButton: nextButton,
+    primaryAction: primaryAction,
+    secondaryAction: secondaryAction,
+    withIcon: withIcon
+  })));
+};
+UTWorkflowContainer.propTypes = {
+  backButton: _types.buttonTypes,
+  banner: (0, _propTypes.shape)({
+    Icon: _propTypes.element,
+    text: _propTypes.string
+  }),
+  checkbox: (0, _propTypes.shape)({
+    text: _propTypes.string
+  }),
+  children: _propTypes.element,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStage: _propTypes.number,
+  currentStep: _propTypes.number,
+  extraActions: _propTypes.element,
+  helpText: _propTypes.string,
+  headerActions: (0, _propTypes.arrayOf)(_types.buttonTypes),
+  nextButton: _types.buttonTypes,
+  onExit: _propTypes.func,
+  primaryAction: _types.buttonTypes,
+  requiredFieldInfo: _propTypes.string,
+  secondaryAction: _types.buttonTypes,
+  stages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.number,
+    label: _propTypes.string,
+    Icon: _propTypes.elementType
+  })),
+  stepperSize: _propTypes.string,
+  stepsCount: _propTypes.number,
+  subtitle: _propTypes.string,
+  tagline: _propTypes.string,
+  title: _propTypes.string,
+  TitleIcon: _propTypes.element,
+  withIcon: _propTypes.bool,
+  withStepperPadding: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTWorkflowContainer);

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

@@ -0,0 +1,38 @@
+@import '../../../../scss/variables/colors.module.scss';
+@import '../../../../scss/variables/mediaQueries.module.scss';
+
+.container {
+  border-radius: '4px';
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 32px 16px;
+  max-width: 1200px;
+  width: calc(100% - 64px);
+
+  @media #{$tablet-mobile} {
+    padding: 0 16px 16px;
+    width: calc(100% - 32px);
+  }
+}
+
+.progress {
+  height: 8px;
+}
+
+.bottomNav {
+  bottom: 0;
+  position: sticky;
+  width: 100%;
+}
+
+.mobileCheckboxContainer {
+  padding-left: 16px;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../../../utils/shadowUtils");
+const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$shadow, _theme$Palette, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3, _theme$Palette2;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.container) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.backgroundColor,
+      boxShadow: (0, _shadowUtils.getShadow)({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      })
+    },
+    bottomNav: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['01']
+    },
+    barColorPrimary: {
+      backgroundColor: (_theme$UTWorkflowCont2 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont2 === void 0 || (_theme$UTWorkflowCont2 = _theme$UTWorkflowCont2.progress) === null || _theme$UTWorkflowCont2 === void 0 ? void 0 : _theme$UTWorkflowCont2.backgroundColor
+    },
+    colorPrimary: {
+      backgroundColor: "".concat(((_theme$UTWorkflowCont3 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.progress) === null || _theme$UTWorkflowCont3 === void 0 ? void 0 : _theme$UTWorkflowCont3.color) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['04']), " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonTypes = void 0;
+var _propTypes = require("prop-types");
+const buttonTypes = exports.buttonTypes = (0, _propTypes.shape)({
+  disabled: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  isHidden: _propTypes.bool,
+  isVisible: _propTypes.bool,
+  label: _propTypes.string,
+  onClick: _propTypes.func
+});

package/dist/scss/variables/mediaQueries.module.scss

@@ -3,5 +3,5 @@ $desktop: 'only screen and (min-width : 1024px)';
 $tablet: 'only screen and (min-width : 768px) and (max-width : 1023px)';
 $mobile: 'only screen and (max-width : 767px)';
 $desktop-tablet: 'only screen and (min-width : 768px)';
-$tablet-mobile: 'only screen and (max-width : 1024px)';
+$tablet-mobile: 'only screen and (max-width : 1023px)';
 $small-mobile: 'only screen and (max-width : 361px)';

package/package.json

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