@widergy/energy-ui 3.121.3 → 3.122.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [3.122.1](https://github.com/widergy/energy-ui/compare/v3.122.0...v3.122.1) (2025-12-05)
+
+
+### Bug Fixes
+
+* [AXCH-799] add export fix lib imports ([#732](https://github.com/widergy/energy-ui/issues/732)) ([67eafd1](https://github.com/widergy/energy-ui/commit/67eafd190201ce42cad66557bcec57ee350005ff))
+* branch name hook ([1491505](https://github.com/widergy/energy-ui/commit/1491505ad131a11d04c2c1261310ed384e0a641c))
+* ci debug ([50f2ed3](https://github.com/widergy/energy-ui/commit/50f2ed3ce719cc08d3cd167fa1f6b968754c2b87))
+* disables storybook test ([793d00e](https://github.com/widergy/energy-ui/commit/793d00e3c0eedb03b87ce96371f52be50a24917c))
+* node version ([8785ce8](https://github.com/widergy/energy-ui/commit/8785ce8378fe1061b1049a2da36eb5bd116e9a58))
+* semantic debug ([c255375](https://github.com/widergy/energy-ui/commit/c25537503a71eeed40e56bfa7d40b5d22fa97319))
+* updates readme ([25065ce](https://github.com/widergy/energy-ui/commit/25065ceb9beb6b1390a2fba2cb972cc3849dfcb0))
+
+# [3.122.0](https://github.com/widergy/energy-ui/compare/v3.121.3...v3.122.0) (2025-12-04)
+
+
+### Features
+
+* [AXCH-799] ut filter grouping ([#720](https://github.com/widergy/energy-ui/issues/720)) ([f38ea78](https://github.com/widergy/energy-ui/commit/f38ea7881ad42eadde1757309c412ed8ebd43823))
+
 ## [3.121.3](https://github.com/widergy/energy-ui/compare/v3.121.2...v3.121.3) (2025-11-28)
 
 

package/README.md

@@ -1,4 +1,3 @@
-
 > Widergy Web Components
 
 ![WidergyWeb](https://img.shields.io/badge/WIDERGY-WEB-00d564.svg)

package/dist/components/UTAvatar/constants.js

@@ -3,7 +3,50 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultPalette = void 0;
+exports.defaultPalette = exports.TYPE = exports.SIZE_VARIANTS = exports.SIZE = exports.SHAPE = exports.DEFAULT_ICON = void 0;
+const DEFAULT_ICON = exports.DEFAULT_ICON = 'IconUser';
+const SHAPE = exports.SHAPE = {
+  CIRCLE: 'circle',
+  SQUARE: 'rounded'
+};
+const SIZE = exports.SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  XLARGE: 'xlarge',
+  XXLARGE: 'xxlarge',
+  XXXLARGE: 'xxxlarge'
+};
+const TYPE = exports.TYPE = {
+  ICON: 'icon',
+  LETTER: 'letter'
+};
+const SIZE_VARIANTS = exports.SIZE_VARIANTS = {
+  [SIZE.SMALL]: {
+    [TYPE.LETTER]: 'small',
+    [TYPE.ICON]: 16
+  },
+  [SIZE.MEDIUM]: {
+    [TYPE.LETTER]: 'subtitle1',
+    [TYPE.ICON]: 16
+  },
+  [SIZE.LARGE]: {
+    [TYPE.LETTER]: 'subtitle1',
+    [TYPE.ICON]: 18
+  },
+  [SIZE.XLARGE]: {
+    [TYPE.LETTER]: 'title2',
+    [TYPE.ICON]: 24
+  },
+  [SIZE.XXLARGE]: {
+    [TYPE.LETTER]: 'title1',
+    [TYPE.ICON]: 28
+  },
+  [SIZE.XXXLARGE]: {
+    [TYPE.LETTER]: 'title1',
+    [TYPE.ICON]: 32
+  }
+};
 const defaultPalette = exports.defaultPalette = [{
   backgroundColor: 'rgb(0, 0, 180)',
   color: '#FFF',

package/dist/components/UTAvatar/index.js

@@ -8,16 +8,24 @@ var _react = _interopRequireDefault(require("react"));
 var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
 var _propTypes = require("prop-types");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _componentUtils = _interopRequireDefault(require("../../utils/componentUtils"));
 var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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 UTAvatar = _ref => {
+  var _iconProps$name;
   let {
+    areaShape = _constants.SHAPE.CIRCLE,
     className,
-    manualColors,
+    iconProps,
     labelProps,
+    manualColors,
     palette,
+    size = _constants.SIZE.MEDIUM,
+    dataTestId,
+    type = _constants.TYPE.LETTER,
     userName
   } = _ref;
   const {
@@ -28,18 +36,29 @@ const UTAvatar = _ref => {
   const {
     colorTheme,
     ...styles
-  } = getAvatarColors(userName, palette || _constants.defaultPalette);
+  } = getAvatarColors(type === _constants.TYPE.LETTER ? userName : (_iconProps$name = iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) !== null && _iconProps$name !== void 0 ? _iconProps$name : _constants.DEFAULT_ICON, palette || _constants.defaultPalette);
+  const sizeVariant = _constants.SIZE_VARIANTS[size][type];
   return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
-    className: className,
-    style: manualColors ? {} : styles
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(size ? _stylesModule.default[size] : ''),
+    style: manualColors ? {} : styles,
+    variant: areaShape,
+    "data-testid": dataTestId
+  }, type === _constants.TYPE.LETTER ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: colorTheme,
+    variant: sizeVariant,
+    weight: "medium"
+  }, labelProps), firstNameLetter) : /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     colorTheme: colorTheme,
-    variant: "title2",
-    weight: "semibold"
-  }, labelProps), firstNameLetter));
+    name: _constants.DEFAULT_ICON,
+    size: sizeVariant
+  }, iconProps)));
 };
 UTAvatar.propTypes = {
   className: _propTypes.string,
+  iconProps: (0, _propTypes.shape)({
+    className: _propTypes.string,
+    variant: _propTypes.string
+  }),
   labelProps: (0, _propTypes.shape)({
     className: _propTypes.string,
     variant: _propTypes.string,
@@ -50,6 +69,10 @@ UTAvatar.propTypes = {
     color: _propTypes.string,
     backgroundColor: _propTypes.string
   })),
+  areaShape: _propTypes.string,
+  size: _propTypes.string,
+  dataTestId: _propTypes.string,
+  type: _propTypes.string,
   userName: _propTypes.string
 };
 var _default = exports.default = UTAvatar;

package/dist/components/UTAvatar/stories/UTAvatar.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTAvatarStories from './UTAvatar.stories';
+
+<Meta of={UTAvatarStories} />
+
+<Title>UTAvatar</Title>
+
+<Description of={UTAvatarStories} />
+
+<Canvas of={UTAvatarStories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />

package/dist/components/UTAvatar/stories/UTAvatar.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = void 0;
+var _index = _interopRequireDefault(require("../index"));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTAvatar',
+  component: _index.default,
+  args: {
+    userName: undefined,
+    className: undefined,
+    labelProps: undefined,
+    iconProps: undefined,
+    palette: undefined,
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  }
+};
+const Playground = exports.Playground = {
+  args: {
+    userName: 'John Doe'
+  },
+  name: 'Playground'
+};

package/dist/components/UTAvatar/stories/UTAvatarColors.stories.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SameNameConsistentColor = exports.ManualColors = exports.DifferentNames = exports.AutomaticColors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../index"));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTAvatar/Colors',
+  component: _index.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const AutomaticColors = exports.AutomaticColors = {
+  args: {
+    userName: 'John Doe',
+    manualColors: false
+  }
+};
+const ManualColors = exports.ManualColors = {
+  args: {
+    userName: 'Manual Colors',
+    manualColors: true
+  }
+};
+const DifferentNames = exports.DifferentNames = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Alice"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Bob"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Charlie"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Diana"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Edward"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Fiona"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "George"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Hannah"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Isaac"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Julia"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Kevin"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Laura"
+  }))
+};
+const SameNameConsistentColor = exports.SameNameConsistentColor = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Doe John"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Doe John"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Doe John"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Smith Jane"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Smith Jane"
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Smith Jane"
+  }))
+};

package/dist/components/UTAvatar/stories/UTAvatarShapes.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Square = exports.Circle = exports.AllShapes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../index"));
+var _constants = require("../constants");
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTAvatar/Shapes',
+  component: _index.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Circle = exports.Circle = {
+  args: {
+    userName: 'Isabella Martinez',
+    areaShape: _constants.SHAPE.CIRCLE
+  }
+};
+const Square = exports.Square = {
+  args: {
+    userName: 'Jack Robinson',
+    areaShape: _constants.SHAPE.SQUARE
+  }
+};
+const AllShapes = exports.AllShapes = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Circle",
+    areaShape: _constants.SHAPE.CIRCLE
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Square",
+    areaShape: _constants.SHAPE.SQUARE
+  }))
+};

package/dist/components/UTAvatar/stories/UTAvatarSizes.stories.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.XXXLarge = exports.XXLarge = exports.XLarge = exports.Small = exports.Medium = exports.Large = exports.AllSizes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../index"));
+var _constants = require("../constants");
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTAvatar/Sizes',
+  component: _index.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Small = exports.Small = {
+  args: {
+    userName: 'Alice Brown',
+    size: _constants.SIZE.SMALL
+  }
+};
+const Medium = exports.Medium = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.MEDIUM,
+    type: _constants.TYPE.ICON
+  }
+};
+const Large = exports.Large = {
+  args: {
+    userName: 'Emma Wilson',
+    size: _constants.SIZE.LARGE
+  }
+};
+const XLarge = exports.XLarge = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.XLARGE,
+    type: _constants.TYPE.ICON
+  }
+};
+const XXLarge = exports.XXLarge = {
+  args: {
+    userName: 'Grace Taylor',
+    size: _constants.SIZE.XXLARGE
+  }
+};
+const XXXLarge = exports.XXXLarge = {
+  args: {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.XXXLARGE,
+    type: _constants.TYPE.ICON
+  }
+};
+const AllSizes = exports.AllSizes = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Small",
+    size: _constants.SIZE.SMALL
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.MEDIUM,
+    type: _constants.TYPE.ICON
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Large",
+    size: _constants.SIZE.LARGE
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.XLARGE,
+    type: _constants.TYPE.ICON
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "XXLarge",
+    size: _constants.SIZE.XXLARGE
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    iconProps: {
+      name: 'IconPencil'
+    },
+    size: _constants.SIZE.XXXLARGE,
+    type: _constants.TYPE.ICON
+  }))
+};

package/dist/components/UTAvatar/stories/UTAvatarTypes.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LetterVsIcon = exports.Letter = exports.Icon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../index"));
+var _constants = require("../constants");
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Energy-UI/UTAvatar/Types',
+  component: _index.default,
+  args: {
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS
+  }
+};
+const Letter = exports.Letter = {
+  args: {
+    userName: 'John Doe',
+    type: _constants.TYPE.LETTER
+  }
+};
+const Icon = exports.Icon = {
+  args: {
+    userName: 'Icon Avatar',
+    type: _constants.TYPE.ICON
+  }
+};
+const LetterVsIcon = exports.LetterVsIcon = {
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Letter Type",
+    type: _constants.TYPE.LETTER
+  }), /*#__PURE__*/_react.default.createElement(_index.default, {
+    userName: "Icon Type",
+    type: _constants.TYPE.ICON
+  }))
+};

package/dist/components/UTAvatar/stories/storiesConstants.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMMON_PARAMETERS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = void 0;
+var _constants = require("../constants");
+// Common argTypes used across multiple stories files
+const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
+  userName: {
+    control: 'text',
+    description: 'The name of the user to display (first letter will be shown)',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  areaShape: {
+    control: 'select',
+    description: 'The shape of the avatar',
+    options: Object.values(_constants.SHAPE),
+    table: {
+      defaultValue: {
+        summary: _constants.SHAPE.CIRCLE
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  size: {
+    control: 'select',
+    description: 'The size of the avatar',
+    options: Object.values(_constants.SIZE),
+    table: {
+      defaultValue: {
+        summary: _constants.SIZE.MEDIUM
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  type: {
+    control: 'select',
+    description: 'The type of avatar content (letter or icon)',
+    options: Object.values(_constants.TYPE),
+    table: {
+      defaultValue: {
+        summary: _constants.TYPE.LETTER
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  manualColors: {
+    control: 'boolean',
+    description: 'Whether to use manual colors instead of automatic palette',
+    table: {
+      defaultValue: {
+        summary: false
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  className: {
+    control: 'text',
+    description: 'Additional CSS class names',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  labelProps: {
+    control: false,
+    description: 'Props for the internal UTLabel component',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  iconProps: {
+    control: false,
+    description: 'Props for the internal UTIcon component',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  palette: {
+    control: false,
+    description: 'Custom color palette array',
+    table: {
+      defaultValue: {
+        summary: 'defaultPalette'
+      },
+      type: {
+        summary: 'array'
+      }
+    }
+  },
+  dataTestId: {
+    control: 'text',
+    description: 'Test identifier for the avatar',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  }
+};
+
+// Common args used across multiple stories files
+const COMMON_ARGS = exports.COMMON_ARGS = {
+  userName: 'John Doe',
+  areaShape: _constants.SHAPE.CIRCLE,
+  size: _constants.SIZE.XLARGE,
+  type: _constants.TYPE.LETTER,
+  manualColors: false,
+  dataTestId: 'customAvatarId'
+};
+
+// Common parameters used across multiple stories files
+const COMMON_PARAMETERS = exports.COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['labelProps', 'iconProps', 'palette', 'className']
+  },
+  docs: {
+    description: {
+      component: 'Avatar component that displays user initials or icons with automatically generated colors based on the user name. Supports multiple sizes and shapes.'
+    }
+  }
+};

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

@@ -0,0 +1,24 @@
+.small {
+  height: 24px;
+  width: 24px;
+}
+.medium {
+  height: 32px;
+  width: 32px;
+}
+.large {
+  height: 40px;
+  width: 40px;
+}
+.xlarge {
+  height: 48px;
+  width: 48px;
+}
+.xxlarge {
+  height: 56px;
+  width: 56px;
+}
+.xxxlarge {
+  height: 64px;
+  width: 64px;
+}