@widergy/energy-ui 1.125.2 → 1.128.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.128.0](https://github.com/widergy/energy-ui/compare/v1.127.0...v1.128.0) (2022-07-07)
+
+
+### Features
+
+* added utdialog footer components ([#301](https://github.com/widergy/energy-ui/issues/301)) ([12f1eb8](https://github.com/widergy/energy-ui/commit/12f1eb817a1b42a2b0d89ceaf1f3b61f2d8cecd6))
+
+# [1.127.0](https://github.com/widergy/energy-ui/compare/v1.126.0...v1.127.0) (2022-06-22)
+
+
+### Features
+
+* customIcon ([#299](https://github.com/widergy/energy-ui/issues/299)) ([bcc1659](https://github.com/widergy/energy-ui/commit/bcc1659663e57414179b3ebd3eb971cdba4726f4))
+
+# [1.126.0](https://github.com/widergy/energy-ui/compare/v1.125.2...v1.126.0) (2022-06-22)
+
+
+### Features
+
+* added UTChecklist, UTRadio and UTRating titles ([#294](https://github.com/widergy/energy-ui/issues/294)) ([39e1cf3](https://github.com/widergy/energy-ui/commit/39e1cf3f19e24ff23df4b47a48f4c91d65003155))
+
 ## [1.125.2](https://github.com/widergy/energy-ui/compare/v1.125.1...v1.125.2) (2022-06-22)
 
 

package/dist/components/UTBarChart/components/Legend/index.js

@@ -120,12 +120,13 @@ var Legend = function Legend(_ref) {
 
   var referenceRenderer = function referenceRenderer(reference) {
     var label = reference.label,
-        className = reference.className;
+        className = reference.className,
+        CustomIcon = reference.CustomIcon;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default["item".concat(displayAs)]
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: className
-    }), /*#__PURE__*/_react.default.createElement(_.UTLabel, {
+    }, CustomIcon && /*#__PURE__*/_react.default.createElement(CustomIcon, null)), /*#__PURE__*/_react.default.createElement(_.UTLabel, {
       className: "".concat(_stylesModule.default.itemLabel, " ").concat(classes.legendItemLabel)
     }, label));
   };

package/dist/components/UTBarChart/types.js

@@ -8,19 +8,19 @@ exports.xAxisDefinitionType = exports.referencesType = exports.linearType = expo
 var _propTypes = require("prop-types");
 
 var barType = (0, _propTypes.shape)({
-  value: _propTypes.number,
-  tooltipContent: _propTypes.string,
-  color: _propTypes.string,
   clickable: _propTypes.bool,
-  highlighted: _propTypes.string,
+  color: _propTypes.string,
   highlightColor: _propTypes.string,
+  highlighted: _propTypes.string,
+  tooltipContent: _propTypes.string,
+  value: _propTypes.number,
   values: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    value: _propTypes.number,
-    tooltipContent: _propTypes.string,
-    color: _propTypes.string,
     clickable: _propTypes.bool,
+    color: _propTypes.string,
+    highlightColor: _propTypes.string,
     highlighted: _propTypes.string,
-    highlightColor: _propTypes.string
+    tooltipContent: _propTypes.string,
+    value: _propTypes.number
   }))
 });
 exports.barType = barType;
@@ -31,13 +31,13 @@ var linearMarkersType = (0, _propTypes.shape)({
 });
 exports.linearMarkersType = linearMarkersType;
 var linearType = (0, _propTypes.shape)({
+  color: _propTypes.string,
   data: (0, _propTypes.arrayOf)({
     xCoodrinate: _propTypes.number,
     value: _propTypes.number
   }),
-  type: _propTypes.string,
-  color: _propTypes.string,
-  marker: linearMarkersType
+  marker: linearMarkersType,
+  type: _propTypes.string
 });
 exports.linearType = linearType;
 var linearDataType = (0, _propTypes.arrayOf)(linearType);
@@ -49,17 +49,18 @@ var levelsType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
 }));
 exports.levelsType = levelsType;
 var referencesType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-  id: _propTypes.string,
-  className: _propTypes.string,
   check: _propTypes.func,
+  className: _propTypes.string,
+  CustomIcon: _propTypes.elementType,
+  id: _propTypes.string,
   label: _propTypes.string,
   orderFunction: _propTypes.func
 }));
 exports.referencesType = referencesType;
 var xAxisDefinitionType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+  labelBackgroundPadding: _propTypes.number,
   mainLabel: _propTypes.string,
   secondaryLabel: _propTypes.string,
-  selectedLabelBackground: _propTypes.string,
-  labelBackgroundPadding: _propTypes.number
+  selectedLabelBackground: _propTypes.string
 }));
 exports.xAxisDefinitionType = xAxisDefinitionType;

package/dist/components/UTCheckList/index.js

@@ -39,6 +39,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -52,6 +54,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var UTCheckList = function UTCheckList(_ref) {
+  var _field$configuration;
+
   var valueKey = _ref.valueKey,
       labelKey = _ref.labelKey,
       input = _ref.input,
@@ -73,7 +77,11 @@ var UTCheckList = function UTCheckList(_ref) {
       allChecked = _ref.allChecked,
       getSelectAllNewValues = _ref.getSelectAllNewValues,
       CustomCheckedIcon = _ref.CustomCheckedIcon,
-      CustomUncheckedIcon = _ref.CustomUncheckedIcon;
+      CustomUncheckedIcon = _ref.CustomUncheckedIcon,
+      field = _ref.field,
+      withUpperTitle = _ref.withUpperTitle,
+      titleProps = _ref.titleProps;
+  var shouldShowUpperTitle = (field === null || field === void 0 ? void 0 : (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
 
   var handleChange = function handleChange(id) {
     var newValues = input.value.indexOf(id) === -1 ? [].concat(_toConsumableArray(input.value), [id]) : input.value.filter(function (elem) {
@@ -112,7 +120,9 @@ var UTCheckList = function UTCheckList(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(className)
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(classes.title)
+  }, titleProps), field.title), /*#__PURE__*/_react.default.createElement("div", {
     className: header ? classes.tableHeader : classes.selectAll
   }, header && header.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -169,39 +179,42 @@ UTCheckList.defaultProps = {
   list: []
 };
 UTCheckList.propTypes = {
-  disabled: _propTypes.bool,
-  valueKey: _propTypes.string.isRequired,
-  labelKey: _propTypes.string.isRequired,
-  input: (0, _propTypes.shape)({
-    onChange: _propTypes.func,
-    value: _propTypes.any
-  }),
   additionalInfo: (0, _propTypes.shape)({
     header: _propTypes.string,
     footer: _propTypes.string
   }),
-  list: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    id: _propTypes.number,
-    label: _propTypes.string,
-    checked: _propTypes.bool
-  })),
   allChecked: _propTypes.bool,
-  shouldShowErrors: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
-  meta: _formTypes.metaPropTypes,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  CustomCheckedIcon: _propTypes.element,
   customRowLabel: _propTypes.element,
   customSelectAllRowLabel: _propTypes.element,
+  CustomUncheckedIcon: _propTypes.element,
+  disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
   getSelectAllNewValues: _propTypes.func,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   header: (0, _propTypes.shape)({
     text: _propTypes.string
   }),
   headerLabel: _propTypes.string,
-  withCheckRow: _propTypes.bool,
+  input: (0, _propTypes.shape)({
+    onChange: _propTypes.func,
+    value: _propTypes.any
+  }),
+  labelKey: _propTypes.string.isRequired,
+  list: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: _propTypes.number,
+    label: _propTypes.string,
+    checked: _propTypes.bool
+  })),
+  meta: _formTypes.metaPropTypes,
+  shouldShowErrors: _propTypes.bool,
+  titleProps: _propTypes.object,
   useCustomIcons: _propTypes.bool,
-  CustomCheckedIcon: _propTypes.element,
-  CustomUncheckedIcon: _propTypes.element
+  valueKey: _propTypes.string.isRequired,
+  withCheckRow: _propTypes.bool,
+  withUpperTitle: _propTypes.bool
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckList);

package/dist/components/UTDialog/index.js

@@ -53,6 +53,7 @@ var UTDialog = function UTDialog(_ref) {
       disableScrollLock = _ref.disableScrollLock,
       disableTypography = _ref.disableTypography,
       elevation = _ref.elevation,
+      FooterComponents = _ref.FooterComponents,
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       onRequestClose = _ref.onRequestClose,
@@ -106,7 +107,7 @@ var UTDialog = function UTDialog(_ref) {
     className: "".concat(classes.warning, " ").concat(warning)
   }), warningAlert), (cancelButton || acceptButton) && /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
     className: "".concat(classes.dialogActions, " ").concat(dialogActions)
-  }, cancelButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
+  }, FooterComponents, cancelButton && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
     ButtonComponent: ButtonComponent,
     button: cancelButton,
     className: classes.cancelButton,
@@ -140,6 +141,7 @@ UTDialog.propTypes = {
   disableScrollLock: _propTypes.bool,
   disableTypography: _propTypes.bool,
   elevation: _propTypes.number,
+  FooterComponents: _propTypes.elementType,
   isOpen: _propTypes.bool,
   onRequestClose: _propTypes.func,
   roundedCloseButton: _propTypes.bool,

package/dist/components/UTPieChart/index.js

@@ -52,25 +52,26 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var UTPieChart = function UTPieChart(_ref) {
-  var className = _ref.className,
+  var animationLength = _ref.animationLength,
+      classes = _ref.classes,
+      className = _ref.className,
       _ref$classNames = _ref.classNames,
       classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
-      classes = _ref.classes,
       data = _ref.data,
-      width = _ref.width,
+      gradientGenerator = _ref.gradientGenerator,
       height = _ref.height,
+      initialAngle = _ref.initialAngle,
       innerRadius = _ref.innerRadius,
-      outerRadius = _ref.outerRadius,
-      animationLength = _ref.animationLength,
       legend = _ref.legend,
-      transition = _ref.transition,
-      withLegend = _ref.withLegend,
-      withLabels = _ref.withLabels,
+      minAngle = _ref.minAngle,
+      outerRadius = _ref.outerRadius,
       outlined = _ref.outlined,
       paddingAngle = _ref.paddingAngle,
       showPercentageInLegend = _ref.showPercentageInLegend,
-      initialAngle = _ref.initialAngle,
-      minAngle = _ref.minAngle;
+      transition = _ref.transition,
+      width = _ref.width,
+      withLabels = _ref.withLabels,
+      withLegend = _ref.withLegend;
   var totalSum = data.reduce(function (acc, _ref2) {
     var value = _ref2.value;
     return acc + value;
@@ -117,9 +118,9 @@ var UTPieChart = function UTPieChart(_ref) {
     className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "LegendWrapper")], " ").concat(_stylesModule.default[position])
   }, withLegend && /*#__PURE__*/_react.default.createElement(_Legend.default, {
     classes: classes,
-    showPercentage: showPercentageInLegend,
     data: data,
     legend: legend,
+    showPercentage: showPercentageInLegend,
     totalConsumption: totalSum
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default["".concat(position.split('-')[0], "PieWrapper")], " ").concat(classNames.chartContainer),
@@ -128,7 +129,7 @@ var UTPieChart = function UTPieChart(_ref) {
     viewBox: "".concat(-containerWidth / 2, " ").concat(-containerHeight / 2, " ").concat(containerWidth, " ").concat(containerHeight),
     width: containerWidth,
     height: containerHeight
-  }, pie.map(function (slice) {
+  }, gradientGenerator === null || gradientGenerator === void 0 ? void 0 : gradientGenerator(), pie.map(function (slice) {
     return /*#__PURE__*/_react.default.createElement("path", {
       d: arcGenerator(slice),
       fill: slice.data.color
@@ -147,55 +148,56 @@ var UTPieChart = function UTPieChart(_ref) {
         value = _slice$data.value,
         id = _slice$data.id;
     return !id && (label || value) && /*#__PURE__*/_react.default.createElement(_ArrowLabel.default, {
-      label: label,
       color: color,
-      value: value / totalSum,
+      label: label,
       midAngle: (endAngle - startAngle) / 2 + startAngle,
-      outerRadius: outerRadius + (outlined ? _constants.OUTLINE_SEPARATION + _constants.OUTLINE_WIDTH : 0)
+      outerRadius: outerRadius + (outlined ? _constants.OUTLINE_SEPARATION + _constants.OUTLINE_WIDTH : 0),
+      value: value / totalSum
     });
   })))));
 };
 
 UTPieChart.propTypes = {
+  animationLength: _propTypes.number,
+  classes: _commonTypes.classesType,
+  className: _propTypes.string,
+  classNames: (0, _propTypes.shape)({
+    chartContainer: _propTypes.string
+  }),
   data: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     color: _propTypes.string,
     label: _propTypes.string,
     value: _propTypes.number
   })),
-  width: _propTypes.number,
+  gradientGenerator: _propTypes.func,
   height: _propTypes.number,
+  initialAngle: _propTypes.number,
   innerRadius: _propTypes.number,
-  outerRadius: _propTypes.number,
-  animationLength: _propTypes.number,
   legend: (0, _propTypes.shape)({
     position: _propTypes.string,
     type: _propTypes.string
   }),
-  transition: _propTypes.string,
-  withLegend: _propTypes.bool,
+  minAngle: _propTypes.number,
+  outerRadius: _propTypes.number,
   outlined: _propTypes.bool,
-  withLabels: _propTypes.bool,
   paddingAngle: _propTypes.number,
-  className: _propTypes.string,
-  classNames: (0, _propTypes.shape)({
-    chartContainer: _propTypes.string
-  }),
   showPercentageInLegend: _propTypes.bool,
-  classes: _commonTypes.classesType,
-  initialAngle: _propTypes.number,
-  minAngle: _propTypes.number
+  transition: _propTypes.string,
+  width: _propTypes.number,
+  withLabels: _propTypes.bool,
+  withLegend: _propTypes.bool
 };
 UTPieChart.defaultProps = {
+  animationLength: _constants.DEFAULT_ANIMATION_LENGTH,
+  classes: {},
   data: _constants.DEFAULT_DATA,
+  initialAngle: _constants.DEFAULT_INITIAL_ANGLE,
   innerRadius: _constants.DEFAULT_INNER_RADIUS,
-  outerRadius: _constants.DEFAULT_OUTER_RADIUS,
-  animationLength: _constants.DEFAULT_ANIMATION_LENGTH,
   legend: _constants.DEFAULT_LEGEND,
-  transition: _constants.DEFAULT_TRANSITION,
-  paddingAngle: _constants.DEFAULT_PADDING_ANGLE,
-  initialAngle: _constants.DEFAULT_INITIAL_ANGLE,
   minAngle: _constants.DEFAULT_MIN_ANGLE,
-  classes: {}
+  outerRadius: _constants.DEFAULT_OUTER_RADIUS,
+  paddingAngle: _constants.DEFAULT_PADDING_ANGLE,
+  transition: _constants.DEFAULT_TRANSITION
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTPieChart);

package/dist/components/UTRadioGroup/index.js

@@ -21,6 +21,8 @@ var _formTypes = require("../../types/formTypes");
 
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+
 var _theme = require("./theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,6 +31,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -115,16 +119,25 @@ var UTRadioGroup = /*#__PURE__*/function (_PureComponent) {
   _createClass(UTRadioGroup, [{
     key: "render",
     value: function render() {
+      var _field$configuration;
+
       var _this$props2 = this.props,
           input = _this$props2.input,
           options = _this$props2.options,
-          containerClassName = _this$props2.containerClassName;
-      return /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+          containerClassName = _this$props2.containerClassName,
+          field = _this$props2.field,
+          withUpperTitle = _this$props2.withUpperTitle,
+          titleProps = _this$props2.titleProps,
+          classes = _this$props2.classes;
+      var shouldShowUpperTitle = (field === null || field === void 0 ? void 0 : (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+        className: "".concat(classes.title)
+      }, titleProps), field.title), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
         name: input.name,
         value: input.value,
         className: containerClassName,
         onChange: this.handleChange
-      }, options.map(this.renderRadioItem));
+      }, options.map(this.renderRadioItem)));
     }
   }]);
 
@@ -132,23 +145,26 @@ var UTRadioGroup = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 UTRadioGroup.defaultProps = {
-  valueKey: 'value',
+  classes: {},
   labelKey: 'name',
-  classes: {}
+  valueKey: 'value'
 };
 UTRadioGroup.propTypes = {
-  input: _formTypes.inputPropTypes,
-  options: (0, _propTypes.arrayOf)(_propTypes.object),
-  valueKey: _propTypes.string,
-  labelKey: _propTypes.string,
-  divider: _propTypes.bool,
-  disabled: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
   containerClassName: _propTypes.string,
   customRadioLabel: _propTypes.element,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  disableRipple: _propTypes.bool
+  disabled: _propTypes.bool,
+  disableRipple: _propTypes.bool,
+  divider: _propTypes.bool,
+  field: _formTypes.fieldType,
+  input: _formTypes.inputPropTypes,
+  labelKey: _propTypes.string,
+  options: (0, _propTypes.arrayOf)(_propTypes.object),
+  titleProps: _propTypes.object,
+  valueKey: _propTypes.string,
+  withUpperTitle: _propTypes.bool
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTRadioGroup);

package/dist/components/UTRating/index.js

@@ -17,6 +17,8 @@ var _formTypes = require("../../types/formTypes");
 
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+
 var _theme = require("./theme");
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -48,10 +50,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var UTRatingContainer = function UTRatingContainer(_ref) {
-  var options = _ref.options,
+  var _field$configuration;
+
+  var classes = _ref.classes,
       field = _ref.field,
       onChange = _ref.onChange,
-      classes = _ref.classes;
+      options = _ref.options,
+      titleProps = _ref.titleProps,
+      withUpperTitle = _ref.withUpperTitle;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,6 +74,8 @@ var UTRatingContainer = function UTRatingContainer(_ref) {
       temporalSelected = _useState6[0],
       setTemporalSelected = _useState6[1];
 
+  var shouldShowUpperTitle = (field === null || field === void 0 ? void 0 : (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+
   var handleClick = function handleClick(order, value) {
     setSelectedOptions((0, _array.autocompleteWithNumbers)(1, order));
     if ((0, _array.isEmpty)(selectedOptions)) setTemporalSelected((0, _array.autocompleteWithNumbers)(1, order));
@@ -92,7 +100,7 @@ var UTRatingContainer = function UTRatingContainer(_ref) {
       value: option.value,
       order: option.order,
       isFirst: options[0].order === option.order,
-      isLast: options.length === option.order,
+      isLast: options[options.length - 1].order === option.order,
       textVariant: field.configuration && field.configuration.text_variant,
       name: option.name,
       classes: classes,
@@ -110,22 +118,29 @@ var UTRatingContainer = function UTRatingContainer(_ref) {
     }, defaultProps));
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
-  }, options.map(handleMapOptions));
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(classes.title)
+  }, titleProps), field.title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, options.map(handleMapOptions)));
 };
 
 UTRatingContainer.propTypes = {
+  classes: (0, _propTypes.shape)({
+    avatar: _propTypes.string,
+    container: _propTypes.string,
+    label: _propTypes.string,
+    ratingContainer: _propTypes.string,
+    title: _propTypes.string
+  }),
+  field: _formTypes.fieldType,
+  onChange: _propTypes.func,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     order: _propTypes.number,
     value: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string])
   })),
-  onChange: _propTypes.func,
-  field: _formTypes.fieldType,
-  classes: (0, _propTypes.shape)({
-    label: _propTypes.string,
-    avatar: _propTypes.string
-  })
+  titleProps: _propTypes.object,
+  withUpperTitle: _propTypes.bool
 };
 
 var _default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTRatingContainer);

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

@@ -3,6 +3,7 @@
 .container {
   display: flex;
   margin: 10px 0;
+
   @media #{$mobile} {
     margin-bottom: 15px;
   }

package/package.json

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