@widergy/energy-ui 3.2.1 → 3.4.0

package/dist/components/UTSelectableCard/theme.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    aditionalInfoColumn: {
+      textAlign: 'end !important'
+    },
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    grayPressedCheckIcon: {
+      color: "".concat(theme.Palette.light['01'], "  !important")
+    },
+    apareanceGrayPressedIcon: {
+      '& path': {
+        fill: "".concat(theme.Palette.light['01'], "!important")
+      }
+    },
+    checkIcon: {
+      color: theme.Palette.actions.accent['05']
+    },
+    column: {
+      alignSelf: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '4px',
+      justifyContent: 'space-between',
+      textAlign: 'initial'
+    },
+    detailContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    disabledIcon: {
+      '& path': {
+        fill: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    },
+    disabledTooltip: {
+      '& path': {
+        color: "".concat(theme.Palette.gray['04'], " !important")
+      }
+    },
+    icon: {
+      flexShrink: 0,
+      height: '36px',
+      width: '36px',
+      '& path': {
+        fill: theme.Palette.dark['05']
+      }
+    },
+    infoIcon: {
+      '& path': {
+        color: theme.Palette.dark['05']
+      }
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: '4px',
+      boxSizing: 'border-box',
+      display: 'flex',
+      gridGap: '16px',
+      transition: 'background-color 0.1s ease-in-out',
+      width: '100%',
+      '& + div': {
+        marginTop: '20px'
+      }
+    },
+    mediumSize: {
+      padding: '24px'
+    },
+    selectedIcon: {
+      '& path': {
+        fill: theme.Palette.actions.accent['05']
+      }
+    },
+    selectedInfoIcon: {
+      '& path': {
+        color: theme.Palette.actions.accent['05']
+      }
+    },
+    smallSize: {
+      padding: '16px'
+    },
+    textContainer: {
+      display: 'flex',
+      gridGap: '8px',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    titleAndTooltip: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '4px'
+    },
+    tooltip: {
+      display: 'flex'
+    },
+    // white apareance
+
+    whiteApareance: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: '0 3px 6px 0 #182C491A',
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['04'],
+        boxShadow: 'none'
+      }
+    },
+    whiteDisabledContainer: {
+      backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
+      boxShadow: 'none',
+      '&:hover': {
+        cursor: 'default'
+      }
+    },
+    whiteSelectedContainer: {
+      border: "2px solid ".concat(theme.Palette.actions.accent['05']),
+      boxShadow: 'none',
+      '&:hover': {
+        backgroundColor: theme.Palette.actions.accent['01'],
+        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.actions.accent['02'],
+        border: "2px solid ".concat(theme.Palette.actions.accent['05'])
+      }
+    },
+    // Gray apareance
+
+    grayApareance: {
+      backgroundColor: theme.Palette.light['03'],
+      border: "1px solid ".concat(theme.Palette.light['05']),
+      '&:hover': {
+        backgroundColor: theme.Palette.light['04']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['05']
+      }
+    },
+    grayDisabledContainer: {
+      border: "2px solid ".concat(theme.Palette.light['05']),
+      '&:hover': {
+        backgroundColor: "".concat(theme.Palette.light['03'], " !important"),
+        cursor: 'default'
+      }
+    },
+    graySelectedContainer: {
+      backgroundColor: theme.Palette.actions.accent['01'],
+      border: "2px solid ".concat(theme.Palette.actions.accent['03']),
+      '&:hover': {
+        backgroundColor: theme.Palette.actions.accent['02']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.actions.accent['03']
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTStepper/components/Connectors/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _commonTypes = require("../../../../types/commonTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Connectors = _ref => {
+  let {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  } = _ref;
+  const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
+  const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
+  const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        ".concat(_stylesModule.default.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      "),
+    key: key,
+    style: {
+      maxWidth: withPadding ? connectorMaxWidth : null,
+      height: 2
+    }
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.wrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.connectorContainer),
+    style: {
+      maxWidth: withPadding ? containerMaxWidth : null
+    }
+  }, connectors));
+};
+Connectors.propTypes = {
+  classes: _commonTypes.classesType,
+  isCompleted: _propTypes.func,
+  numberOfSteps: _propTypes.number,
+  withPadding: _propTypes.bool
+};
+var _default = exports.default = Connectors;

package/dist/components/UTStepper/components/Connectors/styles.module.scss

@@ -0,0 +1,19 @@
+.wrapper {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transform: translateY(50%);
+  width: 100%;
+}
+
+.connectorContainer {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.connector {
+  height: 1px;
+  transition: all 0.5s;
+  width: 100vw;
+}

package/dist/components/UTStepper/components/Step/assets/check.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L5.35355 8.85355C5.15829 9.04882 4.84171 9.04882 4.64645 8.85355L2.14645 6.35355C1.95118 6.15829 1.95118 5.84171 2.14645 5.64645C2.34171 5.45118 2.65829 5.45118 2.85355 5.64645L5 7.79289L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z"/>
+</g>
+</svg>

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _commonTypes = require("../../../../types/commonTypes");
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var CompletedIcon = function CompletedIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    clipRule: "evenodd",
+    d: "M10.354 3.146a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.793l4.646-4.647a.5.5 0 0 1 .708 0Z"
+  }));
+};
+CompletedIcon.defaultProps = {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const Step = _ref => {
+  let {
+    stage,
+    isActive,
+    isCompleted,
+    size,
+    classes
+  } = _ref;
+  const stageCompleted = isCompleted(stage === null || stage === void 0 ? void 0 : stage.id);
+  const stageActive = isActive(stage === null || stage === void 0 ? void 0 : stage.id);
+  const CustomIcon = stage.Icon;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        ".concat(_stylesModule.default["stepContainer".concat(size)], " ").concat(classes["stepContainer".concat(size)], "\n        ").concat(stageActive ? classes["active".concat(size)] : '', " \n        ").concat(stageCompleted ? classes.completed : '', "\n      ")
+  }, stageCompleted && /*#__PURE__*/_react.default.createElement(CompletedIcon, {
+    className: _stylesModule.default["checkIcon".concat(size)]
+  }), !stageCompleted && size === _constants.SIZES.LARGE && /*#__PURE__*/_react.default.createElement(CustomIcon, {
+    className: "\n            ".concat(stageActive ? classes.activeIcon : classes.nextIcxon, " \n            ").concat(_stylesModule.default["customIcon".concat(size)], "\n          ")
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "xsmall",
+    className: "\n            ".concat(_stylesModule.default.label, "\n            ").concat(stageActive || stageCompleted ? classes.coloredLabel : '', "\n        "),
+    colorTheme: !stageActive && !stageCompleted ? 'gray' : null
+  }, stage.label));
+};
+Step.propTypes = {
+  classes: _commonTypes.classesType,
+  isActive: _propTypes.func,
+  isCompleted: _propTypes.func,
+  size: _propTypes.string,
+  stage: (0, _propTypes.shape)({
+    id: _propTypes.number,
+    label: _propTypes.string,
+    Icon: _propTypes.elementType
+  })
+};
+var _default = exports.default = Step;

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

@@ -0,0 +1,67 @@
+@import '../../../../scss/variables/colors.module.scss';
+
+$vertical-label-offset: 10px;
+
+%stepContainer {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  transition: all 0.5s;
+  z-index: 2;
+}
+
+.stepContainerS {
+  @extend %stepContainer;
+  border-style: solid;
+  border-width: 4px;
+  height: 8px;
+  width: 8px;
+}
+
+.stepContainerL {
+  @extend %stepContainer;
+  height: 32px;
+  width: 32px;
+}
+
+%customIcon {
+  position: absolute;
+  top: 4px;
+}
+
+.customIconS {
+  @extend %customIcon;
+  height: 12px;
+  width: 12px;
+}
+
+.customIconL {
+  @extend %customIcon;
+  height: 24px;
+  width: 24px;
+}
+
+.label {
+  bottom: 0;
+  position: absolute;
+  transform: translateY(calc(100% + #{$vertical-label-offset}));
+  white-space: nowrap;
+}
+
+%checkIcon {
+  fill: $white;
+  position: absolute;
+}
+
+.checkIconS {
+  @extend %checkIcon;
+  bottom: -2px;
+}
+
+.checkIconL {
+  @extend %checkIcon;
+  bottom: 4px;
+  height: 24px;
+  width: 24px;
+}

package/dist/components/UTStepper/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = void 0;
+const SIZES = exports.SIZES = {
+  LARGE: 'L',
+  SMALL: 'S'
+};

package/dist/components/UTStepper/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _classesUtils = require("../../utils/classesUtils");
+var _Step = _interopRequireDefault(require("./components/Step"));
+var _Connectors = _interopRequireDefault(require("./components/Connectors"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+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 UTStepper = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    stages,
+    stepperSize,
+    withPadding
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const orderedStages = Object.values(stages).sort((a, b) => (a === null || a === void 0 ? void 0 : a.id) - (b === null || b === void 0 ? void 0 : b.id));
+  const numberOfSteps = orderedStages.length;
+  const size = stepperSize === _constants.SIZES.LARGE && orderedStages.every(stage => stage.Icon) ? _constants.SIZES.LARGE : _constants.SIZES.SMALL;
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.stepper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: withPadding ? _stylesModule.default.paddingContainer : _stylesModule.default.container
+  }, orderedStages.map(stage => /*#__PURE__*/_react.default.createElement(_Step.default, {
+    classes,
+    withPadding,
+    size,
+    isCompleted,
+    isActive,
+    stage
+  })), /*#__PURE__*/_react.default.createElement(_Connectors.default, {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  })));
+};
+UTStepper.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStage: _propTypes.number,
+  stages: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.number,
+    label: _propTypes.string,
+    Icon: _propTypes.elementType
+  })),
+  stepperSize: (0, _propTypes.oneOf)([_constants.SIZES.LARGE, _constants.SIZES.SMALL]),
+  withPadding: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStepper);

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

@@ -0,0 +1,27 @@
+.stepper {
+  padding: 24px 0 48px;
+}
+
+.paddingContainer {
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  > :first-child {
+    > div {
+      left: -4px;
+    }
+  }
+
+  > :nth-last-child(2) {
+    > div {
+      right: -4px;
+    }
+  }
+}

package/dist/components/UTStepper/theme.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11;
+  let {
+    theme
+  } = _ref;
+  return {
+    connector: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['05']
+    },
+    coloredProgress: {
+      backgroundColor: "".concat((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.actions) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['04'], " !important")
+    },
+    stepContainerS: {
+      backgroundColor: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['05'],
+      borderColor: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03']
+    },
+    stepContainerL: {
+      backgroundColor: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03']
+    },
+    activeS: {
+      backgroundColor: _colorsModule.default.white,
+      borderColor: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.actions) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6.accent['04']
+    },
+    activeL: {
+      backgroundColor: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.actions) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7.accent['04']
+    },
+    completed: {
+      backgroundColor: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.actions) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8.accent['04'],
+      borderColor: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.actions) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9.accent['04']
+    },
+    activeIcon: {
+      fill: _colorsModule.default.white
+    },
+    nextIcon: {
+      fill: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.gray['04']
+    },
+    coloredLabel: {
+      color: "".concat((_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 || (_theme$Palette11 = _theme$Palette11.actions) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.accent['04'], " !important")
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTextInput/theme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _lodash = _interopRequireDefault(require("lodash"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const retrieveStyle = _ref => {
@@ -129,6 +129,6 @@ const retrieveMuiTheme = (theme, muiTheme) => {
       }
     }
   };
-  return (0, _styles.createTheme)(_lodash.default.merge(muiTheme, mui));
+  return (0, _styles.createTheme)((0, _merge.default)(muiTheme, mui));
 };
 exports.retrieveMuiTheme = retrieveMuiTheme;