@widergy/energy-ui 3.18.7 → 3.19.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.19.0](https://github.com/widergy/energy-ui/compare/v3.18.8...v3.19.0) (2024-09-23)
+
+
+### Features
+
+* ut button group ([#488](https://github.com/widergy/energy-ui/issues/488)) ([ee41125](https://github.com/widergy/energy-ui/commit/ee41125452e6abc9ec5197221b842ae654552ac7))
+
+## [3.18.8](https://github.com/widergy/energy-ui/compare/v3.18.7...v3.18.8) (2024-09-20)
+
+
+### Bug Fixes
+
+* icon shrinking ([#489](https://github.com/widergy/energy-ui/issues/489)) ([4a929a0](https://github.com/widergy/energy-ui/commit/4a929a01d463ca9c31a40f7394692b1975041aad))
+
 ## [3.18.7](https://github.com/widergy/energy-ui/compare/v3.18.6...v3.18.7) (2024-09-16)
 
 

package/dist/components/UTButtonGroup/README.md

@@ -0,0 +1,10 @@
+# UTButton
+
+## Props
+
+| Name       | Type            | Default   | Description                                                                            |
+| ---------- | :-------------- | --------- | -------------------------------------------------------------------------------------- |
+| actions    | array           |           | Array of actions to render. Each action must include:`Icon`, `id` and `onClick` props. |
+| colorTheme | string          | 'primary' | The color theme to use. One of:`primary`, `secondary`, `negative`.                     |
+| shape       | string          | 'square'  | Type of the button. One of:`square`, `circle`.                                         |
+| selected   | string / number |           | Id of the active button.                                                               |

package/dist/components/UTButtonGroup/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SQUARE_TYPE = exports.DEFAULT_TYPE = exports.DEFAULT_COLOR_THEME = exports.CIRCLE_TYPE = exports.BACKGROUND_COLOR_MAPPER = void 0;
+const BACKGROUND_COLOR_MAPPER = theme => ({
+  primary: theme.lightBackground,
+  negative: theme.negativeBackground,
+  neutral: theme.lightBackground
+});
+exports.BACKGROUND_COLOR_MAPPER = BACKGROUND_COLOR_MAPPER;
+const CIRCLE_TYPE = exports.CIRCLE_TYPE = 'circle';
+const SQUARE_TYPE = exports.SQUARE_TYPE = 'square';
+const DEFAULT_TYPE = exports.DEFAULT_TYPE = SQUARE_TYPE;
+const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = 'primary';

package/dist/components/UTButtonGroup/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTButtonGroup = _ref => {
+  let {
+    actions,
+    classes: theme,
+    colorTheme = _constants.DEFAULT_COLOR_THEME,
+    selected,
+    shape: type = _constants.DEFAULT_TYPE
+  } = _ref;
+  const backgroundColor = (0, _constants.BACKGROUND_COLOR_MAPPER)(theme)[colorTheme] || (0, _constants.BACKGROUND_COLOR_MAPPER)(theme).primary;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default[`${type}Container`]} ${backgroundColor}`
+  }, actions.map(_ref2 => {
+    let {
+      Icon,
+      id,
+      onClick
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      colorTheme: colorTheme,
+      Icon: Icon,
+      key: id,
+      onClick: onClick,
+      size: "large",
+      variant: selected === id ? 'filled' : 'text'
+    });
+  }));
+};
+UTButtonGroup.propTypes = {
+  actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    Icon: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.element]),
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    onClick: _propTypes.func
+  })).isRequired,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  colorTheme: _propTypes.string,
+  selected: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]).isRequired,
+  shape: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTButtonGroup);

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

@@ -0,0 +1,36 @@
+$default-border-radius: 8px;
+$square-border-radius: calc(#{$default-border-radius} - 1px);
+$rounded-border-radius: 100px;
+
+%container {
+  display: flex;
+  width: fit-content;
+}
+
+.squareContainer {
+  @extend %container;
+  border-radius: $default-border-radius;
+
+  & > button {
+    border-radius: 0 !important;
+  }
+
+  & > button:first-child {
+    border-bottom-left-radius: $square-border-radius !important;
+    border-top-left-radius: $square-border-radius !important;
+  }
+
+  & > button:last-child {
+    border-bottom-right-radius: $square-border-radius !important;
+    border-top-right-radius: $square-border-radius !important;
+  }
+}
+
+.circleContainer {
+  @extend %container;
+  border-radius: $rounded-border-radius;
+
+  & > button {
+    border-radius: $rounded-border-radius !important;
+  }
+}

package/dist/components/UTButtonGroup/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    lightBackground: {
+      backgroundColor: theme.Palette.light['03']
+    },
+    negativeBackground: {
+      backgroundColor: theme.Palette.actions?.negative['02'] || theme.Palette.negative['02']
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTIcon/index.js

@@ -8,8 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _theme = require("./theme");
 var _constants = require("./constants");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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(e) { return e && e.__esModule ? e : { default: e }; }
@@ -39,7 +40,7 @@ const UTIcon = _ref => {
   const IconComponent = _constants.ENERGY_ICONS[name] || TablerIcons[name];
   if (!IconComponent) return null;
   return /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
-    className: className
+    className: `${className} ${_stylesModule.default.icon}`
   }, iconProps));
 };
 UTIcon.propTypes = {

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

@@ -0,0 +1,3 @@
+.icon {
+  flex-shrink: 0;
+}

package/dist/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "UTButton", {
     return _UTButton.default;
   }
 });
+Object.defineProperty(exports, "UTButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _UTButtonGroup.default;
+  }
+});
 Object.defineProperty(exports, "UTCBUInput", {
   enumerable: true,
   get: function () {
@@ -411,6 +417,7 @@ var _UTBadge = _interopRequireDefault(require("./components/UTBadge"));
 var _UTBarChart = _interopRequireDefault(require("./components/UTBarChart"));
 var _UTBreadcrumbs = _interopRequireDefault(require("./components/UTBreadcrumbs"));
 var _UTButton = _interopRequireDefault(require("./components/UTButton"));
+var _UTButtonGroup = _interopRequireDefault(require("./components/UTButtonGroup"));
 var _UTCaptcha = _interopRequireDefault(require("./components/UTCaptcha"));
 var _UTCard = _interopRequireDefault(require("./components/UTCard"));
 var _UTCarousel = _interopRequireDefault(require("./components/UTCarousel"));

package/package.json

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