@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTGraph/styles.module.scss

@@ -0,0 +1,67 @@
+$TOOLTIP_SIZE: 17px;
+
+.container {
+  flex: 1;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  grid-gap: 24px;
+  height: 100%;
+  min-height: 0;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  grid-gap: 16px;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.planeWrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  grid-gap: 10px;
+}
+
+.tooltipIcon {
+  height: $TOOLTIP_SIZE;
+}
+
+.legends {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  grid-gap: 12px;
+}
+
+.legendBar {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+}
+
+.legendLine {
+  width: 16px;
+  height: 2px;
+}
+
+.legendPoint {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}

package/dist/esm/components/UTGraph/theme.js

@@ -0,0 +1,17 @@
+import { getShadow } from '../../utils/shadowUtils';
+import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      })
+    }
+  };
+};

package/dist/esm/components/UTGraph/utils.js

@@ -0,0 +1,143 @@
+import isEmpty from 'lodash/isEmpty';
+import { BAR_TYPE, LEFT_SIDE, LINE_TYPE, POINT_TYPE, RIGHT_SIDE } from './constants';
+export const computeCrossAxisDomain = (tab, dataset) => {
+  if (!dataset) return [0, 1];
+  const {
+    yMin,
+    yMax
+  } = dataset.domain.reduce((acc, record) => {
+    const clusterMaxValues = tab.subitems.map(cluster => {
+      const typeGroups = cluster.reduce((groups, series) => {
+        if (!groups[series.type]) groups[series.type] = [];
+        groups[series.type].push(series);
+        return groups;
+      }, {});
+      const typeSums = Object.entries(typeGroups).map(_ref => {
+        let [type, typeSeries] = _ref;
+        const positiveSum = typeSeries.map(series => {
+          var _record$concepts$find, _record$concepts$find2;
+          return (_record$concepts$find = (_record$concepts$find2 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find2 === void 0 ? void 0 : _record$concepts$find2.value) !== null && _record$concepts$find !== void 0 ? _record$concepts$find : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v >= 0 ? sum + v : sum, 0);
+        const negativeSum = typeSeries.map(series => {
+          var _record$concepts$find3, _record$concepts$find4;
+          return (_record$concepts$find3 = (_record$concepts$find4 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find4 === void 0 ? void 0 : _record$concepts$find4.value) !== null && _record$concepts$find3 !== void 0 ? _record$concepts$find3 : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v < 0 ? sum + v : sum, 0);
+        return {
+          type,
+          positiveSum,
+          negativeSum
+        };
+      });
+      return {
+        positiveSum: Math.max(...typeSums.map(g => g.positiveSum)),
+        negativeSum: Math.min(...typeSums.map(g => g.negativeSum))
+      };
+    });
+    const maxPos = Math.max(...clusterMaxValues.map(g => g.positiveSum), acc.yMax);
+    const minNeg = Math.min(...clusterMaxValues.map(g => g.negativeSum), acc.yMin);
+    return {
+      yMin: minNeg,
+      yMax: maxPos
+    };
+  }, {
+    yMin: 0,
+    yMax: 0
+  });
+  if (yMax === 0 && yMin === 0) return [0, 1];
+  return [Math.min(0, yMin), Math.max(0, yMax)];
+};
+export const computeCrossAxisDomainForSide = (tab, dataset, side) => {
+  const filteredTab = {
+    ...tab,
+    subitems: tab.subitems.map(cluster => cluster.filter(series => (series.range || LEFT_SIDE) === side))
+  };
+  filteredTab.subitems = filteredTab.subitems.filter(cluster => cluster.length > 0);
+  return computeCrossAxisDomain(filteredTab, dataset);
+};
+export const applyHeadroom = function (_ref2) {
+  let [min, max] = _ref2;
+  let {
+    padBottom = 0,
+    padTop = 0.08
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return [min * (1 - padBottom), max * (1 + padTop)];
+};
+export const getValuesMapByCategory = dataset => {
+  const map = new Map();
+  if (!dataset) return map;
+  dataset.domain.forEach(record => {
+    map.set(record.domain_value, Object.fromEntries(record.concepts.map(datum => [datum.code, datum.value])));
+  });
+  return map;
+};
+export const detectAxisSides = tab => {
+  let hasLeft = false;
+  let hasRight = false;
+  tab.subitems.forEach(cluster => {
+    cluster.forEach(s => {
+      if (s.type === LINE_TYPE || s.type === BAR_TYPE || s.type === POINT_TYPE) {
+        const side = s.range || LEFT_SIDE;
+        if (side === LEFT_SIDE) hasLeft = true;
+        if (side === RIGHT_SIDE) hasRight = true;
+      }
+    });
+  });
+  return {
+    hasLeft,
+    hasRight
+  };
+};
+export const computeMainAxisExtentNumerical = (tab, dataset) => {
+  if (!tab || !dataset) return [0, 1];
+  const domainCodes = new Set();
+  tab.subitems.forEach(cluster => cluster.forEach(series => {
+    var _series$bindings;
+    const code = series === null || series === void 0 || (_series$bindings = series.bindings) === null || _series$bindings === void 0 ? void 0 : _series$bindings.domain;
+    if (code) domainCodes.add(code);
+  }));
+  if (domainCodes.size === 0) return [0, 1];
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  dataset.domain.forEach(record => {
+    const dict = Object.fromEntries(record.concepts.map(d => [d.code, d.value]));
+    domainCodes.forEach(code => {
+      const v = dict[code];
+      if (Number.isFinite(v)) {
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    });
+  });
+  if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+    return [0, 1];
+  }
+  return [min, max];
+};
+export const getRowList = dataset => {
+  if (!dataset || !Array.isArray(dataset.domain)) return [];
+  return dataset.domain.map(record => Object.fromEntries(record.concepts.map(d => [d.code, d.value])));
+};
+export const getSeriesForSide = (series, side) => series.filter(s => (s.range || LEFT_SIDE) === side).map(s => {
+  var _s$bindings, _s$bindings2, _s$bindings3, _s$bindings4;
+  return {
+    rangeCode: (_s$bindings = s.bindings) === null || _s$bindings === void 0 ? void 0 : _s$bindings.range,
+    domainCode: (_s$bindings2 = s.bindings) === null || _s$bindings2 === void 0 ? void 0 : _s$bindings2.domain,
+    sizeCode: (_s$bindings3 = s.bindings) === null || _s$bindings3 === void 0 ? void 0 : _s$bindings3.size,
+    colorCode: (_s$bindings4 = s.bindings) === null || _s$bindings4 === void 0 ? void 0 : _s$bindings4.color
+  };
+});
+export const getClusters = (tab, type) => tab.subitems.map(cluster => {
+  const series = cluster.filter(s => s.type === type);
+  const leftItems = getSeriesForSide(series, LEFT_SIDE);
+  const rightItems = getSeriesForSide(series, RIGHT_SIDE);
+  return {
+    leftItems,
+    rightItems
+  };
+}).filter(_ref3 => {
+  let {
+    leftItems,
+    rightItems
+  } = _ref3;
+  return !isEmpty(leftItems) || !isEmpty(rightItems);
+});

package/dist/esm/components/UTHeader/README.md

@@ -0,0 +1,27 @@
+# UTHeader
+
+### Description
+
+This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
+
+## Props
+
+| Name              | Type             | Default | Description                                                                                                                                                              |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| actions           | actionType       |         | Actions to be displayed in a dropdown menu at the top right corner, the first one that has the prop `main` as true will be displayed next to the menu with its own icon. |
+| banner            | bannerType       |         | If present, it will render a banner at the bottom.                                                                                                                       |
+| classes           | object of string |         | Classes returned by UTHeader's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                              |
+| classNames        | object of string |         | Additional classes.                                                                                                                                                      |
+| helpText          | string           |         | Text that will be rendered above the banner.                                                                                                                             |
+| requiredFieldInfo | string           |         | Text to display as a helper for required fields, it will be rendered below the description.                                                                              |
+| subtitle          | string           |         | Text that will be rendered below the title.                                                                                                                              |
+| tagline           | string           |         | Text that will be rendered in uppercase on top of the title.                                                                                                             |
+| title             | string           |         | Text that will be rendered between the stages and the content.                                                                                                           |
+| TitleIcon         | element          |         | Icon that will be rendered on top of the title.                                                                                                                          |
+
+### Custom Types
+
+| Type       | Shape                                                         |
+| ---------- | ------------------------------------------------------------- |
+| actionType | `{ label: string, onClick: func, main: bool, Icon: element }` |
+| bannerType | `{ Icon: element, text: string }`                             |

package/dist/esm/components/UTHeader/assets/edit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0189 10.6782L13.3239 7.98319L15.2719 6.03419L17.9659 8.72819L16.0189 10.6782ZM9.0799 17.6242L6.1029 17.8952L6.3669 14.9392L11.9839 9.32219L14.6799 12.0182L9.0799 17.6242ZM19.4039 7.33719L19.4029 7.33619L16.6649 4.59819C15.9239 3.85919 14.6509 3.82419 13.9489 4.52919L4.9529 13.5252C4.6269 13.8502 4.4249 14.2822 4.3829 14.7392L4.0039 18.9092C3.9779 19.2042 4.0829 19.4962 4.2929 19.7062C4.4819 19.8952 4.7369 19.9992 4.9999 19.9992C5.0309 19.9992 5.0609 19.9982 5.0909 19.9952L9.2609 19.6162C9.7189 19.5742 10.1499 19.3732 10.4749 19.0482L19.4719 10.0512C20.1999 9.32119 20.1689 8.10319 19.4039 7.33719Z"/>
+</svg>

package/dist/esm/components/UTHeader/assets/ellipsis.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12C7 13.1046 6.10457 14 5 14C3.89543 14 3 13.1046 3 12ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM17 12C17 10.8954 17.8954 10 19 10C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14C17.8954 14 17 13.1046 17 12Z"/>
+</svg>

package/dist/esm/components/UTHeader/index.js

@@ -0,0 +1,183 @@
+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); }
+import React, { useMemo, useState } from 'react';
+import { arrayOf, bool, element, func, object, objectOf, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import WithTheme from '../WithTheme';
+import UTLabel from '../UTLabel';
+import UTBanner from '../UTBanner';
+import { mergeClasses } from '../../utils/classesUtils';
+import UTMenu from '../UTMenu';
+import UTButton from '../UTButton';
+var Ellipsis = function Ellipsis(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
+  }));
+};
+Ellipsis.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var Edit = function Edit(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"
+  }));
+};
+Edit.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTHeader = _ref => {
+  var _titleProps$variant, _titleProps$weight;
+  let {
+    actions,
+    banner,
+    classNames,
+    classes: themeClasses = {},
+    helpText,
+    helpTextDataTestId,
+    isLastStep,
+    requiredFieldInfo,
+    requiredFieldInfoDataTestId,
+    subtitle,
+    subtitleDataTestId,
+    tagline,
+    taglineDataTestId,
+    title,
+    titleDataTestId,
+    TitleIcon,
+    titleProps
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const mainAction = actions.find(action => action.main);
+  const moreActions = actions.filter((_action, index) => index !== actions.indexOf(mainAction));
+  const MainIcon = (mainAction === null || mainAction === void 0 ? void 0 : mainAction.Icon) || Edit;
+  const hasHeader = tagline || title || subtitle || requiredFieldInfo || helpText || banner;
+  const [menuAnchor, setMenuAnchor] = useState();
+  const openMenu = event => setMenuAnchor(event.target);
+  const closeMenu = () => setMenuAnchor();
+  const BANNER_ICON_SIZE = '20px';
+  const renderComponent = (prop, standardComponent) => /*#__PURE__*/React.isValidElement(prop) ? prop : standardComponent;
+  const Tagline = renderComponent(tagline, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.stepTitle,
+    colorTheme: "gray",
+    dataTestId: taglineDataTestId,
+    variant: "small",
+    weight: "medium"
+  }, tagline));
+  const Title = renderComponent(title, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: "".concat(styles.title, " ").concat(titleProps.className),
+    dataTestId: titleDataTestId,
+    variant: (_titleProps$variant = titleProps.variant) !== null && _titleProps$variant !== void 0 ? _titleProps$variant : 'title2',
+    weight: (_titleProps$weight = titleProps.weight) !== null && _titleProps$weight !== void 0 ? _titleProps$weight : 'medium'
+  }, titleProps, {
+    withMarkdown: true
+  }), title));
+  const Subtitle = renderComponent(subtitle, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.subtitle,
+    colorTheme: "gray",
+    dataTestId: subtitleDataTestId,
+    variant: "body",
+    withMarkdown: true
+  }, subtitle));
+  const RequiredFieldInfo = renderComponent(requiredFieldInfo, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: requiredFieldInfoDataTestId,
+    variant: "small",
+    withMarkdown: true
+  }, requiredFieldInfo));
+  const HelpText = renderComponent(helpText, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: helpTextDataTestId,
+    variant: "small"
+  }, helpText));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.outerContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(!hasHeader && styles.containerMargin, " ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.header, " ").concat((banner === null || banner === void 0 ? void 0 : banner.text) && styles.bottomPadding)
+  }, tagline && !isLastStep && Tagline, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.titles, " ").concat(classes.titles)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleAndActionsContainer
+  }, TitleIcon && /*#__PURE__*/React.createElement(TitleIcon, {
+    className: classes.titleIcon
+  }), Title, !isEmpty(actions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.actionsContainer
+  }, mainAction && (mainAction.Component ? /*#__PURE__*/React.createElement(mainAction.Component, null) : /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: "primary",
+    Icon: MainIcon,
+    onClick: mainAction.onClick,
+    variant: "text"
+  })), !isEmpty(moreActions) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, {
+    onClick: openMenu,
+    variant: "text",
+    Icon: Ellipsis
+  }), /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: menuAnchor,
+    items: moreActions.map(_ref2 => {
+      let {
+        label,
+        onClick
+      } = _ref2;
+      return {
+        key: label,
+        label,
+        onClick
+      };
+    }),
+    menuPlacement: "bottom-end",
+    onClose: closeMenu
+  })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/React.createElement(UTBanner, {
+    classNames: {
+      infoContainer: styles.bannerContainer
+    },
+    iconProps: {
+      height: BANNER_ICON_SIZE,
+      width: BANNER_ICON_SIZE
+    },
+    Icon: banner.Icon
+  }, banner.text)));
+};
+UTHeader.propTypes = {
+  actions: arrayOf(object),
+  banner: shape({
+    Icon: object,
+    text: string
+  }),
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  helpText: string,
+  helpTextDataTestId: string,
+  isLastStep: bool,
+  requiredFieldInfo: string,
+  requiredFieldInfoDataTestId: string,
+  subtitle: string,
+  subtitleDataTestId: string,
+  tagline: string,
+  taglineDataTestId: string,
+  title: string,
+  titleDataTestId: string,
+  TitleIcon: element,
+  titleProps: shape({
+    align: string,
+    classes: objectOf(string),
+    className: string,
+    dataTestId: string,
+    markdownRenderers: objectOf(func),
+    title: string,
+    variant: string,
+    withMarkdown: bool
+  })
+};
+export default WithTheme(retrieveStyle)(UTHeader);

package/dist/esm/components/UTHeader/styles.module.scss

@@ -0,0 +1,69 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+$header-workflow-max-width: 966px;
+
+.actionsContainer {
+  align-items: flex-start;
+  display: flex;
+  gap: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: $header-workflow-max-width;
+  padding: 24px 32px 32px;
+
+  @media #{$tablet-mobile} {
+    padding: 24px 16px;
+  }
+}
+
+.containerMargin {
+  margin-bottom: 32px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0;
+  width: 100%;
+}
+
+.bottomPadding {
+  padding-bottom: 16px;
+}
+
+.bannerContainer {
+  border-radius: 8px;
+  margin-bottom: 0;
+}
+
+.stepTitle {
+  text-transform: uppercase;
+}
+
+.titles {
+  display: flex;
+  flex-direction: column;
+}
+
+.titleAndActionsContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+  word-break: break-word;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.title,
+.subtitle {
+  max-width: 500px;
+  overflow-wrap: break-word;
+  line-height: 22px;
+}

package/dist/esm/components/UTHeader/theme.js

@@ -0,0 +1,14 @@
+export const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    titleIcon: {
+      color: (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.titleIcon) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.color
+    },
+    mainAction: {
+      fill: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 || (_theme$Palette$action = _theme$Palette$action.accent) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action['04']) || theme.Palette.accent['04']
+    }
+  };
+};

package/dist/esm/components/UTIcon/README.md

@@ -0,0 +1,73 @@
+# UTIcon
+
+### Description
+
+Icon component using Tabler Icons library.
+
+### Name
+
+The icon name must be with the first letter of each word in uppercase.
+
+### Props
+
+| Name       | Description                                                                                                                                         |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| area       | padding around the icon is shown when it is true. (Default: false).                                                                                 |
+| name       | The name of the icon in TablerIcons                                                                                                                 |
+| classname  | The classname to aplied to the Icon                                                                                                                 |
+| colorTheme | The icon color                                                                                                                                      |
+| dataTestId | Icon's data-testid                                                                                                                                  |
+| shade      | The icon color shade                                                                                                                                |
+| size       | The icon size in px                                                                                                                                 |
+| variant    | It depends on the `area` property and defines whether it should be displayed filled (`default`) or just with a border (`outlined`) around the icon. |
+
+## Fill Theme (optional)
+
+The `fillTheme` prop could be one of these values:
+
+- `accent`
+- `dark`
+- `error`
+- `gray`
+- `information`
+- `light`
+- `negative`
+- `neutral`
+- `success`
+- `warning`
+
+Clarifications:
+
+- Note that not all icons look good with an internal fill color.
+
+## Fill Shade (optional)
+
+The `fillShade` prop must be one of these:
+
+- `01`
+- `02`
+- `03`
+- `04`
+- `05`
+
+Clarifications:
+
+- The default shade is '02' (if 'fillTheme' exists).
+
+### Usage
+
+```javascript
+import React from 'react';
+import { UTIcon } from '@widergy/energy-ui';
+import styles from './styles.module.scss';
+
+const MyComponent = () => {
+  return (
+    <div>
+      <UTIcon name="IconArrowLeft" colorTheme="dark" size={48} className={styles.iconClassname} />
+    </div>
+  );
+};
+
+export default MyComponent;
+```

package/dist/esm/components/UTIcon/UTIcon.mdx

@@ -0,0 +1,17 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
+
+import * as UTIconStories from './UTIcon.stories';
+
+<Meta of={UTIconStories} />
+
+<Title>UTIcon</Title>
+
+## Deprecation Notice
+
+The `color` prop is deprecated and will be removed in a future release. Please use `colorTheme` instead.
+
+## Props
+
+<Description of={UTIconStories} />
+
+<ArgTypes />