@widergy/energy-ui 3.7.0 → 3.7.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.7.2](https://github.com/widergy/energy-ui/compare/v3.7.1...v3.7.2) (2024-05-23)
+
+
+### Bug Fixes
+
+* utIcon component ([#449](https://github.com/widergy/energy-ui/issues/449)) ([ab82968](https://github.com/widergy/energy-ui/commit/ab82968128d21dffe647d58874fb4c79892c044c))
+
+## [3.7.1](https://github.com/widergy/energy-ui/compare/v3.7.0...v3.7.1) (2024-05-20)
+
+
+### Bug Fixes
+
+* utbutton fixes ([#448](https://github.com/widergy/energy-ui/issues/448)) ([b691c07](https://github.com/widergy/energy-ui/commit/b691c071d5a180637e95d2634e76cb940612e68a))
+
 # [3.7.0](https://github.com/widergy/energy-ui/compare/v3.6.3...v3.7.0) (2024-04-26)
 
 

package/dist/components/UTButton/constants.js

@@ -8,8 +8,8 @@ const VARIANTS = exports.VARIANTS = {
   filled: 'contained',
   outlined: 'outlined',
   semitransparent: 'contained',
-  text: 'text',
-  shadow: 'text'
+  shadow: 'text',
+  text: 'text'
 };
 const SIZES = exports.SIZES = {
   small: 'small',
@@ -30,14 +30,15 @@ const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   variant: 'filled'
 };
 const COLORS_MAPPER = exports.COLORS_MAPPER = {
+  error: 'error',
+  negative: 'negative',
   primary: 'accent',
   secondary: 'neutral',
-  error: 'error',
-  negative: 'negative'
+  success: 'success'
 };
 const SHADOW_MAPPER = exports.SHADOW_MAPPER = {
-  [COLORS_MAPPER.primary]: 'accent',
-  [COLORS_MAPPER.secondary]: 'grayscale',
   [COLORS_MAPPER.error]: 'accentError',
-  [COLORS_MAPPER.negative]: 'accentNeutral'
+  [COLORS_MAPPER.negative]: 'accentNeutral',
+  [COLORS_MAPPER.primary]: 'accent',
+  [COLORS_MAPPER.secondary]: 'grayscale'
 };

package/dist/components/UTButton/index.js

@@ -21,6 +21,7 @@ const UTButton = _ref => {
     children,
     classes: theme,
     classNames,
+    dataTestId,
     disabled,
     hideTextOnResponsive,
     Icon,
@@ -31,7 +32,7 @@ const UTButton = _ref => {
     type,
     variant
   } = _ref;
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames));
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const {
     childrenContainer,
     circularProgress,
@@ -49,12 +50,13 @@ const UTButton = _ref => {
     className: iconClassname
   }));
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    disabled: disabled || loading,
     classes: materialButtonClasses,
+    "data-testid": dataTestId,
+    disabled: disabled || loading,
     onClick: onClick,
     size: size,
-    variant: _constants.VARIANTS[variant],
-    type: type
+    type: type,
+    variant: _constants.VARIANTS[variant]
   }, RenderedChildren, loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
     size: 24,
     className: "".concat(_stylesModule.default.loading, " ").concat(circularProgress)
@@ -64,6 +66,7 @@ UTButton.defaultProps = _constants.DEFAULT_PROPS;
 UTButton.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,
   Icon: _propTypes.elementType,

package/dist/components/UTButton/theme.js

@@ -147,7 +147,7 @@ const baseButtonTheme = theme => {
       padding: '12px 16px'
     },
     sizeSmall: {
-      fontSize: '1rem',
+      fontSize: '0.875rem',
       fontWeight: '500',
       padding: '4px 8px'
     },

package/dist/components/UTIcon/README.md

@@ -0,0 +1,36 @@
+# 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                         |
+| --------- | ----------------------------------- |
+| name      | The name of the icon in TablerIcons |
+| classname | The classname to aplied to the Icon |
+| color     | The icon color                      |
+| size      | The icon size in px                 |
+
+### 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" color="red" size={48} className={styles.iconClassname} />
+    </div>
+  );
+};
+
+export default MyComponent;
+```

package/dist/components/UTIcon/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const UTIcon = _ref => {
+  let {
+    className,
+    color,
+    name,
+    size
+  } = _ref;
+  const IconComponent = TablerIcons[name];
+  if (!IconComponent) return null;
+  return /*#__PURE__*/_react.default.createElement(IconComponent, {
+    className: className,
+    color: color,
+    size: size
+  });
+};
+UTIcon.propTypes = {
+  className: _propTypes.string,
+  color: _propTypes.string,
+  name: _propTypes.string,
+  size: _propTypes.number
+};
+var _default = exports.default = UTIcon;

package/dist/components/UTLabel/index.js

@@ -25,20 +25,18 @@ const UTLabel = _ref => {
     classes: theme,
     className,
     markdownRenderers,
-    style,
     title,
     variant,
     withMarkdown
   } = _ref;
-  if (children == null) return null;
+  if (!children) return null;
   const Component = _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, {
     className
-  }));
+  }), [theme, className]);
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
     className: "".concat(classes.root, " ").concat(classes.className).trim(),
-    title: title,
-    style: style
+    title: title
   }, withMarkdown && /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
     children: children,
     components: markdownRenderers,
@@ -54,8 +52,6 @@ UTLabel.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
   markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
-  // TODO: this "style" prop is for compatibility with the -base project only. Delete it when no longer needed
-  style: _propTypes.object,
   title: _propTypes.string,
   variant: _propTypes.string,
   withMarkdown: _propTypes.bool

package/dist/components/UTLabel/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.variantsColorTheme = exports.retrieveStyle = exports.linkColor = void 0;
+exports.retrieveStyle = void 0;
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -13,12 +13,10 @@ const variantsColorTheme = (colorTheme, shade, theme) => {
   const colorShade = Object.values(_constants.SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
-exports.variantsColorTheme = variantsColorTheme;
 const linkColor = (theme, colorTheme) => {
   const color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative[_constants.SHADES.shade05] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error[_constants.SHADES.shade05] : theme.Palette.actions.neutral[_constants.SHADES.shade05];
   return color;
 };
-exports.linkColor = linkColor;
 const retrieveStyle = _ref => {
   var _field$configuration$, _field$configuration, _field$configuration$2, _field$configuration2, _theme$Fonts, _field$configuration$3, _field$configuration3, _field$configuration$4, _field$configuration4, _field$configuration$5, _field$configuration5;
   let {

package/dist/index.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "UTFileInput", {
     return _UTFileInput.default;
   }
 });
+Object.defineProperty(exports, "UTIcon", {
+  enumerable: true,
+  get: function () {
+    return _UTIcon.default;
+  }
+});
 Object.defineProperty(exports, "UTIconButton", {
   enumerable: true,
   get: function () {
@@ -394,6 +400,7 @@ var _UTDotMenu = _interopRequireDefault(require("./components/UTDotMenu"));
 var _UTEmojiPicker = _interopRequireDefault(require("./components/UTEmojiPicker"));
 var _UTExternalLink = _interopRequireDefault(require("./components/UTExternalLink"));
 var _UTFileInput = _interopRequireDefault(require("./components/UTFileInput"));
+var _UTIcon = _interopRequireDefault(require("./components/UTIcon"));
 var _UTIconButton = _interopRequireDefault(require("./components/UTIconButton"));
 var _UTImageRadio = _interopRequireDefault(require("./components/UTImageRadio"));
 var _UTLabel = _interopRequireDefault(require("./components/UTLabel"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@material-ui/icons": "^3.0.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.3.10",
+    "@tabler/icons-react": "^2.0.0",
     "@tippy.js/react": "^3.0.0",
     "@trainline/react-skeletor": "^1.0.2",
     "@widergy/energy-hooks": "^2.0.0",
@@ -38,6 +39,7 @@
     "d3": "^7.0.1",
     "dayjs": "^1.10.7",
     "emojilib": "^3.0.10",
+    "node-sass": "^8.0.0",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",
     "react-google-maps": ">=9.2.2",
@@ -49,7 +51,6 @@
     "react-window": "^1.8.5",
     "rehype-raw": "^6.1.0",
     "remark-breaks": "^3.0.2",
-    "node-sass": "^8.0.0",
     "sass-loader": "^10.0.5",
     "seamless-immutable": "^7.1.4"
   },