@widergy/energy-ui 3.7.3 → 3.7.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.7.4](https://github.com/widergy/energy-ui/compare/v3.7.3...v3.7.4) (2024-06-03)
+
+
+### Bug Fixes
+
+* add UTBadge ([#452](https://github.com/widergy/energy-ui/issues/452)) ([99e137a](https://github.com/widergy/energy-ui/commit/99e137ad5a6825aae30ac6588af06c3b9c956087))
+
 ## [3.7.3](https://github.com/widergy/energy-ui/compare/v3.7.2...v3.7.3) (2024-05-27)
 
 

package/dist/components/UTBadge/README.md

@@ -0,0 +1,44 @@
+# UTBadge
+
+### Description
+
+Basic badge component for displaying labels with various color themes.
+
+### Color Themes
+
+The color themes are defined by the UX team and are:
+
+- `alert`: Consumes the error variant.
+- `identity`: Consumes the accent variant.
+- `identitySecondary`: Consumes the neutral variant.
+- `negative`: Consumes the negative variant.
+- `information`: Consumes the information variant.
+- `warning`: Consumes the warning variant.
+- `success`: Consumes the success variant.
+
+These color themes will change how the badge looks.
+
+### Props
+
+| Name       | Type   | Default | Description                                                                                                                |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| children   | string |         | The text content to be displayed inside the badge.                                                                         |
+| colorTheme | string |         | The color theme to use. One of: `alert`, `identity`, `identitySecondary`, `negative`, `information`, `warning`, `success`. |
+
+### Example
+
+```jsx
+import React from 'react';
+import UTBadge from '@widergy/energy-ui';
+
+const App = () => (
+  <div>
+    <UTBadge />
+    <UTBadge colorTheme="identity">0</UTBadge>
+    <UTBadge colorTheme="information">999+</UTBadge>
+    <UTBadge colorTheme="success">Success Badge</UTBadge>
+  </div>
+);
+
+export default App;
+```

package/dist/components/UTBadge/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+const COLORS_MAPPER = exports.COLORS_MAPPER = {
+  alert: 'error',
+  identity: 'accent',
+  identitySecondary: 'neutral',
+  information: 'information',
+  negative: 'negative',
+  success: 'success',
+  warning: 'warning'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  colorTheme: 'alert'
+};

package/dist/components/UTBadge/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTBadge = _ref => {
+  let {
+    children,
+    classes,
+    className,
+    colorTheme
+  } = _ref;
+  const textColorTheme = colorTheme === 'negative' ? 'dark' : 'negative';
+  const Component = children ? _UTLabel.default : 'span';
+  const componentProps = children ? {
+    colorTheme: textColorTheme,
+    variant: 'xsmall',
+    weight: 'medium'
+  } : {};
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    className: "".concat(classes.root, " ").concat(className)
+  }, componentProps), children);
+};
+UTBadge.defaultProps = _constants.DEFAULT_PROPS;
+UTBadge.propTypes = {
+  children: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  colorTheme: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBadge);

package/dist/components/UTBadge/theme.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variantsColorTheme = exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const variantsColorTheme = (theme, colorTheme) => {
+  const colorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
+  const paletteTheme = theme.Palette[colorName] || theme.Palette.actions[colorName];
+  const backgroundColorMapper = {
+    alert: paletteTheme['04'],
+    information: paletteTheme['05'],
+    warning: paletteTheme['05'],
+    success: paletteTheme['05'],
+    identity: paletteTheme['05'],
+    identitySecondary: paletteTheme['05'],
+    negative: paletteTheme['04']
+  };
+  return {
+    backgroundColor: backgroundColorMapper[colorTheme]
+  };
+};
+exports.variantsColorTheme = variantsColorTheme;
+const baseButtonTheme = () => ({
+  root: {
+    alignItems: 'center',
+    borderRadius: '100px',
+    display: 'inline-flex',
+    height: 'fit-content',
+    justifyContent: 'center',
+    margin: 10,
+    minHeight: '10px',
+    minWidth: '10px',
+    verticalAlign: 'middle'
+  },
+  text: {
+    height: '20px',
+    padding: '0 6px',
+    textAlign: 'center'
+  }
+});
+const retrieveStyle = _ref => {
+  let {
+    theme,
+    colorTheme,
+    children
+  } = _ref;
+  const baseTheme = baseButtonTheme();
+  const textTheme = children ? baseTheme.text : {};
+  const variantTheme = variantsColorTheme(theme, colorTheme);
+  return {
+    root: {
+      ...baseTheme.root,
+      ...textTheme,
+      ...variantTheme
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "UTAvatar", {
     return _UTAvatar.default;
   }
 });
+Object.defineProperty(exports, "UTBadge", {
+  enumerable: true,
+  get: function () {
+    return _UTBadge.default;
+  }
+});
 Object.defineProperty(exports, "UTBarChart", {
   enumerable: true,
   get: function () {
@@ -383,6 +389,7 @@ var _UTAttachment = _interopRequireDefault(require("./components/UTAttachment"))
 var _UTAttachmentList = _interopRequireDefault(require("./components/UTAttachmentList"));
 var _UTAutocomplete = _interopRequireDefault(require("./components/UTAutocomplete"));
 var _UTAvatar = _interopRequireDefault(require("./components/UTAvatar"));
+var _UTBadge = _interopRequireDefault(require("./components/UTBadge"));
 var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
 var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));

package/package.json

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