@widergy/energy-ui 3.50.0 → 3.51.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.51.0](https://github.com/widergy/energy-ui/compare/v3.50.1...v3.51.0) (2025-01-02)
+
+
+### Features
+
+* [AUT-411] [AUT-415] multiple component test ids ([#551](https://github.com/widergy/energy-ui/issues/551)) ([bca605f](https://github.com/widergy/energy-ui/commit/bca605f133f100adf89b702e2484e33edf1ca3c6))
+
+## [3.50.1](https://github.com/widergy/energy-ui/compare/v3.50.0...v3.50.1) (2024-12-19)
+
+
+### Bug Fixes
+
+* select options string cast ([#554](https://github.com/widergy/energy-ui/issues/554)) ([0bc707c](https://github.com/widergy/energy-ui/commit/0bc707c484243eab0b43fe3a28ffc82b54544211))
+
 # [3.50.0](https://github.com/widergy/energy-ui/compare/v3.49.8...v3.50.0) (2024-12-19)
 
 

package/dist/components/UTAlert/index.js

@@ -4,30 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
-var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _react = _interopRequireWildcard(require("react"));
 var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
+var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _propTypes = require("prop-types");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _testIds = require("../../constants/testIds");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _theme = require("./theme");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const {
+  closeButtonId,
+  labelId
+} = _testIds.COMPONENT_IDS.snackBarIds;
 const variantIcon = {
-  success: _CheckCircle.default,
   error: _Error.default,
   info: _Info.default,
+  success: _CheckCircle.default,
   warning: _Warning.default
 };
 class UTAlert extends _react.PureComponent {
@@ -62,25 +67,32 @@ class UTAlert extends _react.PureComponent {
   }
   render() {
     const {
+      classes = {},
+      closeDataTestId = closeButtonId,
       content: alert = {},
-      withoutIcon,
-      classes = {}
+      labelDataTestId = labelId,
+      withoutIcon
     } = this.props;
     const anchor = {
-      vertical: alert.topRight ? 'top' : 'bottom',
-      horizontal: alert.topRight ? 'right' : 'left'
+      horizontal: alert.topRight ? 'right' : 'left',
+      vertical: alert.topRight ? 'top' : 'bottom'
     };
     const transition = {
       direction: alert.topRight ? 'left' : 'up'
     };
     const AlertTypeIcon = alert.type && variantIcon[alert.type];
     return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
+      action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
+        classes: {
+          root: classes.action
+        },
+        color: "inherit",
+        "data-testid": closeDataTestId,
+        key: "close",
+        onClick: this.handleClose
+      }, /*#__PURE__*/_react.default.createElement(_Close.default, null))],
       anchorOrigin: anchor,
-      open: alert.open,
       autoHideDuration: alert.timeDuration,
-      onClose: this.handleClose,
-      TransitionProps: transition,
-      TransitionComponent: _Slide.default,
       classes: {
         root: _stylesModule.default.snackbarRoot
       },
@@ -99,42 +111,41 @@ class UTAlert extends _react.PureComponent {
         }
       }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
         colorTheme: "light",
-        withMarkdown: true
+        withMarkdown: true,
+        dataTestId: labelDataTestId
       }, alert.message)),
-      action: [/*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        classes: {
-          root: classes.action
-        },
-        key: "close",
-        color: "inherit",
-        onClick: this.handleClose
-      }, /*#__PURE__*/_react.default.createElement(_Close.default, null))]
+      onClose: this.handleClose,
+      open: alert.open,
+      TransitionComponent: _Slide.default,
+      TransitionProps: transition
     });
   }
 }
 UTAlert.propTypes = {
   content: (0, _propTypes.shape)({
     message: _propTypes.string,
+    onClose: _propTypes.func,
     open: _propTypes.bool,
-    type: _propTypes.string,
-    topRight: _propTypes.bool,
     timeDuration: _propTypes.number,
-    onClose: _propTypes.func
+    topRight: _propTypes.bool,
+    type: _propTypes.string
   }),
   classes: (0, _propTypes.shape)({
     error: _propTypes.string,
     info: _propTypes.string,
     success: _propTypes.string
   }),
+  closeDataTestId: _propTypes.string,
+  labelDataTestId: _propTypes.string,
   withoutIcon: _propTypes.bool
 };
 UTAlert.defaultProps = {
   content: {
-    open: false,
-    type: undefined,
     message: undefined,
+    open: false,
+    timeDuration: undefined,
     topRight: undefined,
-    timeDuration: undefined
+    type: undefined
   },
   classes: {}
 };

package/dist/components/UTBreadcrumbs/index.js

@@ -11,6 +11,7 @@ var _UTMenu = _interopRequireDefault(require("../UTMenu"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _classesUtils = require("../../utils/classesUtils");
+var _testIds = require("../../constants/testIds");
 var _constants = require("./constants");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -18,6 +19,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 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 _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 {
+  buttonId
+} = _testIds.COMPONENT_IDS.breadcrumbsIds;
 const UTBreadcrumbs = _ref => {
   let {
     breadcrumbs,
@@ -150,7 +154,7 @@ const UTBreadcrumbs = _ref => {
       key: "".concat(route, "-").concat(label)
     }, !route && !menuItems || disableMenu ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: _stylesModule.default.label,
-      dataTestId: dataTestId,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, "}.").concat(index),
       variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), label) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
@@ -159,12 +163,13 @@ const UTBreadcrumbs = _ref => {
         childrenContainer: overflowControl ? _stylesModule.default.buttonContainer : null,
         text: overflowControl ? _stylesModule.default.ellipsis : null
       },
-      dataTestId: dataTestId,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, "}.").concat(index),
       onClick: handleClick,
       size: "small",
       variant: "text"
     }, colorThemesDefinition.button), "".concat(label)), !isLast && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: classes.separator,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, "}.").concat(index),
       variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), separator));

package/dist/components/UTCheckList/versions/V1/index.js

@@ -26,6 +26,7 @@ const UTCheckList = _ref => {
     error,
     horizontalSpacing = 'medium',
     isSimple = false,
+    itemDataTestId,
     onChange = () => {},
     options,
     required,
@@ -108,7 +109,7 @@ const UTCheckList = _ref => {
     value: areAllSelected,
     variant: variant,
     version: "V1"
-  }), categorizedOptions.map(_ref5 => {
+  }), categorizedOptions.map((_ref5, catIndex) => {
     let [category, categoryOptions] = _ref5;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(_stylesModule.default.categoryContainer, " ").concat(smallVerticalSpacingClass),
@@ -118,8 +119,9 @@ const UTCheckList = _ref => {
       colorTheme: "gray",
       variant: "small",
       weight: "medium"
-    }, category.toUpperCase()), categoryOptions.map(item => /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    }, category.toUpperCase()), categoryOptions.map((item, index) => /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
       classNames: classNames.item,
+      dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
       disabled: item.disabled || disabled,
       isSimple: isSimple,
       key: item.value,
@@ -140,6 +142,7 @@ UTCheckList.propTypes = {
   error: _propTypes.string,
   horizontalSpacing: _propTypes.string,
   isSimple: _propTypes.bool,
+  itemDataTestId: _propTypes.string,
   onChange: _propTypes.func,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     checked: _propTypes.bool,

package/dist/components/UTDialog/index.js

@@ -15,19 +15,29 @@ var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _testIds = require("../../constants/testIds");
 var _types = require("./types");
 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 {
+  acceptButtontId,
+  cancelButtonId,
+  closeButtonId,
+  titleId
+} = _testIds.COMPONENT_IDS.dialogIds;
 const UTDialog = _ref => {
   let {
     acceptButton,
+    acceptButtonDataTestId = acceptButtontId,
     alertConfig,
     cancelButton,
+    cancelButtonDataTestId = cancelButtonId,
     children,
-    classes,
     classNames,
+    classes,
+    closeButtonDataTestId = closeButtonId,
     contentName,
     dialogProps,
     disableEnforceFocus,
@@ -39,6 +49,7 @@ const UTDialog = _ref => {
     onRequestClose,
     roundedCloseButton,
     title,
+    titleDataTestId = titleId,
     TransitionProps,
     warningAlert,
     whiteTitle,
@@ -57,44 +68,48 @@ const UTDialog = _ref => {
     dialogActions
   } = classNames || {};
   return /*#__PURE__*/_react.default.createElement(_Dialog.default, _extends({
-    open: isOpen,
-    onClose: withClickAway ? onRequestClose : undefined,
-    "aria-labelledby": "alert-dialog-title",
     "aria-describedby": "alert-dialog-description",
+    "aria-labelledby": "alert-dialog-title",
     classes: {
       paper: "".concat(classes.container, " ").concat(container),
       root: "".concat(classes.root, " ").concat(root)
     },
+    disableEnforceFocus: disableEnforceFocus,
+    disableScrollLock: disableScrollLock,
+    onClose: withClickAway ? onRequestClose : undefined,
+    open: isOpen,
     PaperProps: {
       elevation
     },
-    disableEnforceFocus: disableEnforceFocus,
-    disableScrollLock: disableScrollLock,
     TransitionProps: TransitionProps
   }, dialogProps), title && /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
-    disableTypography: disableTypography,
     className: "".concat(classes.mainTitle, " ").concat(whiteTitle && classes.whiteTitle, " ").concat(mainTitle),
+    "data-testid": titleDataTestId,
+    disableTypography: disableTypography,
     id: "alert-dialog-title"
   }, title, withCloseButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
       icon: "".concat(classes.closeIcon, " ").concat(closeIcon),
       root: "".concat(classes.closeButton, " ").concat(whiteTitle && classes.whiteCloseButton, " ").concat(closeButton)
     },
+    dataTestId: closeButtonDataTestId,
     Icon: CloseIcon,
     onClick: onRequestClose,
     variant: "text"
   })), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
-    name: contentName,
-    className: "".concat(classes.content, " ").concat(content)
+    className: "".concat(classes.content, " ").concat(content),
+    name: contentName
   }, children), warningAlert && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, alertConfig, {
     className: "".concat(classes.warning, " ").concat(warning)
   }), warningAlert), (cancelButton || acceptButton) && /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
     className: "".concat(classes.dialogActions, " ").concat(dialogActions)
   }, FooterComponents, cancelButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "secondary",
+    dataTestId: cancelButtonDataTestId,
     variant: "text"
   }, cancelButton), cancelButton.text || _constants.CANCEL_BUTTON_TEXT), acceptButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "primary",
+    dataTestId: acceptButtonDataTestId,
     variant: "filled"
   }, acceptButton), acceptButton.text || _constants.ACCEPT_BUTTON_TEXT)));
 };
@@ -108,10 +123,13 @@ UTDialog.defaultProps = {
 };
 UTDialog.propTypes = {
   acceptButton: _types.dialogButtonPropTypes,
+  acceptButtonDataTestId: _propTypes.string,
   alertConfig: _propTypes.object,
   cancelButton: _types.dialogButtonPropTypes,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  cancelButtonDataTestId: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  closeButtonDataTestId: _propTypes.string,
   contentName: _propTypes.string,
   dialogProps: _propTypes.object,
   disableEnforceFocus: _propTypes.bool,
@@ -123,6 +141,7 @@ UTDialog.propTypes = {
   onRequestClose: _propTypes.func,
   roundedCloseButton: _propTypes.bool,
   title: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  titleDataTestId: _propTypes.string,
   TransitionProps: _propTypes.object,
   warningAlert: _propTypes.string,
   whiteTitle: _propTypes.bool,

package/dist/components/UTFieldLabel/index.js

@@ -14,6 +14,7 @@ const UTFieldLabel = _ref => {
   let {
     children,
     colorTheme,
+    dataTestId,
     required,
     className,
     variant,
@@ -23,6 +24,7 @@ const UTFieldLabel = _ref => {
     className: "".concat(_stylesModule.default.label, " ").concat(className)
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: colorTheme,
+    dataTestId: dataTestId,
     variant: variant,
     withMarkdown: true
   }, children), required && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -35,6 +37,7 @@ const UTFieldLabel = _ref => {
 UTFieldLabel.propTypes = {
   className: _propTypes.string,
   colorTheme: _propTypes.string,
+  dataTestId: _propTypes.string,
   required: _propTypes.bool,
   variant: _propTypes.string,
   weight: _propTypes.string

package/dist/components/UTHeader/index.js

@@ -48,14 +48,19 @@ const UTHeader = _ref => {
   let {
     actions,
     banner,
-    classes: themeClasses = {},
     classNames,
+    classes: themeClasses = {},
     helpText,
+    helpTextDataTestId,
     isLastStep,
     requiredFieldInfo,
+    requiredFieldInfoDataTestId,
     subtitle,
+    subtitleDataTestId,
     tagline,
+    taglineDataTestId,
     title,
+    titleDataTestId,
     TitleIcon
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
@@ -69,31 +74,36 @@ const UTHeader = _ref => {
   const BANNER_ICON_SIZE = '20px';
   const renderComponent = (prop, standardComponent) => /*#__PURE__*/_react.default.isValidElement(prop) ? prop : standardComponent;
   const Tagline = renderComponent(tagline, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    variant: "small",
+    className: _stylesModule.default.stepTitle,
     colorTheme: "gray",
-    weight: "medium",
-    className: _stylesModule.default.stepTitle
+    dataTestId: taglineDataTestId,
+    variant: "small",
+    weight: "medium"
   }, tagline));
   const Title = renderComponent(title, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.title,
+    dataTestId: titleDataTestId,
     variant: "title2",
     weight: "medium",
-    withMarkdown: true,
-    className: _stylesModule.default.title
+    withMarkdown: true
   }, title));
   const Subtitle = renderComponent(subtitle, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    variant: "subtitle2",
+    className: _stylesModule.default.subtitle,
     colorTheme: "gray",
-    withMarkdown: true,
-    className: _stylesModule.default.subtitle
+    dataTestId: subtitleDataTestId,
+    variant: "subtitle2",
+    withMarkdown: true
   }, subtitle));
   const RequiredFieldInfo = renderComponent(requiredFieldInfo, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    variant: "small",
     colorTheme: "gray",
+    dataTestId: requiredFieldInfoDataTestId,
+    variant: "small",
     withMarkdown: true
   }, requiredFieldInfo));
   const HelpText = renderComponent(helpText, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    variant: "small",
-    colorTheme: "gray"
+    colorTheme: "gray",
+    dataTestId: helpTextDataTestId,
+    variant: "small"
   }, helpText));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.outerContainer
@@ -111,9 +121,9 @@ const UTHeader = _ref => {
     className: _stylesModule.default.actionsContainer
   }, mainAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     colorTheme: "primary",
+    Icon: MainIcon,
     onClick: mainAction.onClick,
-    variant: "text",
-    Icon: MainIcon
+    variant: "text"
   }), !(0, _isEmpty.default)(moreActions) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     onClick: openMenu,
     variant: "text",
@@ -134,14 +144,14 @@ const UTHeader = _ref => {
     menuPlacement: "bottom-end",
     onClose: closeMenu
   })))), subtitle && Subtitle), requiredFieldInfo && RequiredFieldInfo, helpText && HelpText), (banner === null || banner === void 0 ? void 0 : banner.text) && /*#__PURE__*/_react.default.createElement(_UTBanner.default, {
-    Icon: banner.Icon,
+    classNames: {
+      infoContainer: _stylesModule.default.bannerContainer
+    },
     iconProps: {
       height: BANNER_ICON_SIZE,
       width: BANNER_ICON_SIZE
     },
-    classNames: {
-      infoContainer: _stylesModule.default.bannerContainer
-    }
+    Icon: banner.Icon
   }, banner.text)));
 };
 UTHeader.propTypes = {
@@ -150,14 +160,19 @@ UTHeader.propTypes = {
     Icon: _propTypes.object,
     text: _propTypes.string
   }),
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   helpText: _propTypes.string,
+  helpTextDataTestId: _propTypes.string,
   isLastStep: _propTypes.bool,
   requiredFieldInfo: _propTypes.string,
+  requiredFieldInfoDataTestId: _propTypes.string,
   subtitle: _propTypes.string,
+  subtitleDataTestId: _propTypes.string,
   tagline: _propTypes.string,
+  taglineDataTestId: _propTypes.string,
   title: _propTypes.string,
+  titleDataTestId: _propTypes.string,
   TitleIcon: _propTypes.element
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTHeader);

package/dist/components/UTSelect/versions/V0/index.js

@@ -4,46 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _clone = _interopRequireDefault(require("lodash/clone"));
 var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-var _propTypes = require("prop-types");
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
-var _form = require("@widergy/web-utils/lib/form");
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _react = _interopRequireWildcard(require("react"));
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _propTypes = require("prop-types");
 var _array = require("@widergy/web-utils/lib/array");
-var _clone = _interopRequireDefault(require("lodash/clone"));
-var _formTypes = require("../../../../types/formTypes");
+var _form = require("@widergy/web-utils/lib/form");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _formTypes = require("../../../../types/formTypes");
 var _classesUtils = require("../../../../utils/classesUtils");
 var _Option = _interopRequireDefault(require("./components/Option"));
-var _theme = require("./theme");
-var _stylesJS = _interopRequireDefault(require("./stylesJS"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _stylesJS = _interopRequireDefault(require("./stylesJS"));
 var _constants = require("./constants");
+var _theme = require("./theme");
 var _utils = require("./utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
 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 UTSelect = _ref => {
   let {
     captionLabel,
     classNames,
     classes: themeClasses,
-    disabled,
+    dataTestId,
     disableFirstOption,
+    disabled,
+    errorDataTestId,
     field,
     iconPlaceholder: IconPlaceholder,
     input,
+    itemDataTestId,
     labelKey,
     labelProps,
+    listDataTestId,
     menuPlaceholder,
     meta,
     options,
@@ -91,29 +95,40 @@ const UTSelect = _ref => {
   }, /*#__PURE__*/_react.default.createElement(IconPlaceholder, {
     className: classes.labelIcon
   }), /*#__PURE__*/_react.default.createElement("div", null, placeholder)) : placeholder), /*#__PURE__*/_react.default.createElement(_Select.default, _extends({
-    name: input.name,
-    multiple: isMultiple,
-    value: isMultiple ? (0, _array.isEmpty)(input.value) ? [] : (0, _clone.default)(input.value) : input.value,
-    onChange: handleChange,
-    disabled: disabled,
-    label: variant === 'outlined' && placeholder,
     classes: {
       nativeInput: _stylesModule.default.nativeInput
-    }
+    },
+    disabled: disabled,
+    inputProps: {
+      'data-testid': dataTestId
+    },
+    label: variant === 'outlined' && placeholder,
+    MenuProps: {
+      MenuListProps: {
+        'data-testid': listDataTestId
+      }
+    },
+    multiple: isMultiple,
+    name: input.name,
+    onChange: handleChange,
+    value: isMultiple ? (0, _array.isEmpty)(input.value) ? [] : (0, _clone.default)(input.value) : input.value
   }, isMultiple ? {
     renderValue: handleRenderValue
   } : {}, selectProps), !withoutFirstOption && /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    value: "",
-    disabled: isMultiple || disableFirstOption
-  }, menuPlaceholder || (isMultiple ? _constants.MENU_TITLE_MULTIPLE : _constants.MENU_TITLE)), sortedOptions.map(option => (0, _array.isEmpty)(option.subOptions) ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    "data-testid": "".concat(itemDataTestId, ".firstOption"),
+    disabled: isMultiple || disableFirstOption,
+    value: ""
+  }, menuPlaceholder || (isMultiple ? _constants.MENU_TITLE_MULTIPLE : _constants.MENU_TITLE)), sortedOptions.map((option, i) => (0, _array.isEmpty)(option.subOptions) ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+    "data-testid": "".concat(itemDataTestId, ".").concat(i),
     key: option[valueKey],
     value: option[valueKey]
   }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
     optionProps: option
   }, optionCommonProps))) : [/*#__PURE__*/_react.default.createElement(_ListSubheader.default, {
     className: _stylesModule.default.subHeader
-  }, option[labelKey]), option.subOptions.map(subOption => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+  }, option[labelKey]), option.subOptions.map((subOption, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     className: classes.subOption,
+    "data-testid": "".concat(itemDataTestId, ".").concat(index),
     key: subOption[valueKey],
     value: subOption[valueKey]
   }, /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
@@ -126,15 +141,16 @@ const UTSelect = _ref => {
   }, captionLabel), (0, _form.shouldShowErrors)(meta) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.errorLabel,
     colorTheme: "error",
+    dataTestId: errorDataTestId,
     variant: "small"
   }, meta.error)));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, tooltip ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    style: _stylesJS.default.gridContainer,
+    alignItems: "flex-end",
     container: true,
     spacing: 1,
-    alignItems: "flex-end"
+    style: _stylesJS.default.gridContainer
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
     xs: true
@@ -177,13 +193,17 @@ UTSelect.propTypes = {
     tooltipIcon: _propTypes.string,
     upperTitle: _propTypes.string
   }),
-  disabled: _propTypes.bool,
+  dataTestId: _propTypes.string,
   disableFirstOption: _propTypes.bool,
+  disabled: _propTypes.bool,
+  errorDataTestId: _propTypes.string,
   field: _formTypes.fieldType,
   iconPlaceholder: _propTypes.node,
   input: _formTypes.inputPropTypes,
+  itemDataTestId: _propTypes.string,
   labelKey: _propTypes.string,
   labelProps: _propTypes.object,
+  listDataTestId: _propTypes.string,
   menuPlaceholder: _propTypes.string,
   meta: _formTypes.metaPropTypes,
   options: (0, _propTypes.arrayOf)(_propTypes.object),