@widergy/energy-ui 3.172.2 → 3.173.0

package/dist/components/UTDataElement/UTDataElement.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithTooltip = exports.WithSwitchAction = exports.WithPrefix = exports.WithNumericBadge = exports.WithIcon = exports.WithExpandableContent = exports.WithButtonAction = exports.WithBadge = exports.VerticalOrientation = exports.SmallSpacing = exports.SmallPadding = exports.Playground = exports.NestedExample = exports.ForcedBadge = exports.Default = exports.CustomDataTestId = exports.ComplexExample = exports.AreaMode = void 0;
+exports.default = exports.WithTooltip = exports.WithSwitchAction = exports.WithPrefix = exports.WithNumericBadge = exports.WithIcon = exports.WithExpandableContent = exports.WithButtonAction = exports.WithBadge = exports.VerticalOrientation = exports.SmallSpacing = exports.SmallPadding = exports.Playground = exports.NestedExample = exports.ForcedBadge = exports.Default = exports.CustomDataTestId = exports.ComplexExample = exports.AreaModeCustomProps = exports.AreaMode = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -175,6 +175,18 @@ var _default = exports.default = {
         }
       }
     },
+    areaProps: {
+      control: false,
+      description: "Personaliza el fondo del área. Acepta `colorTheme` (cualquier valor de COLOR_THEMES) y `shade` ('01'–'05'). Solo aplica cuando `area` es `true`.",
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
     action: {
       control: false,
       description: 'Configuración de la acción principal del elemento.',
@@ -531,6 +543,22 @@ const AreaMode = exports.AreaMode = {
   },
   name: 'Modo Área'
 };
+const AreaModeCustomProps = exports.AreaModeCustomProps = {
+  args: {
+    title: 'Área con Color Personalizado',
+    Data: mockDataContent,
+    Icon: 'IconPalette',
+    area: true,
+    areaProps: {
+      colorTheme: 'accent',
+      shade: '01'
+    },
+    orientation: _constants.ORIENTATION.HORIZONTAL,
+    paddingVertical: _constants.PADDING.MEDIUM,
+    spacing: _constants.SPACING.MEDIUM
+  },
+  name: 'Modo Área — Color Personalizado'
+};
 const SmallPadding = exports.SmallPadding = {
   args: {
     title: 'Padding Pequeño',

package/dist/components/UTDataElement/index.js

@@ -12,11 +12,11 @@ var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _UTBadge = _interopRequireDefault(require("../UTBadge"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _componentUtils = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
-var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _testIds = require("../../constants/testIds");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -40,6 +40,7 @@ const UTDataElement = _ref => {
     Data,
     dataProps = {},
     dataTestId,
+    expanded = false,
     forceShowBadge = false,
     Icon,
     iconProps = {},
@@ -53,35 +54,67 @@ const UTDataElement = _ref => {
     transitionDuration = _constants.ANIMATION.TRANSITION_DURATION
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [classNames, theme]);
-  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(!expanded);
   const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
-  const [contentHeight, setContentHeight] = (0, _react.useState)('0px');
+  const [contentHeight, setContentHeight] = (0, _react.useState)(expanded ? 'none' : '0px');
   const childrenRef = (0, _react.useRef)(null);
+  const hasMountedRef = (0, _react.useRef)(false);
+  const transitionTimeoutRef = (0, _react.useRef)(null);
+  const transitionFrameRef = (0, _react.useRef)(null);
+  const clearPendingTransition = (0, _react.useCallback)(() => {
+    if (transitionTimeoutRef.current) {
+      clearTimeout(transitionTimeoutRef.current);
+      transitionTimeoutRef.current = null;
+    }
+    if (transitionFrameRef.current) {
+      cancelAnimationFrame(transitionFrameRef.current);
+      transitionFrameRef.current = null;
+    }
+  }, []);
+  const prepareContentTransition = (0, _react.useCallback)(() => {
+    if (!childrenRef.current) return false;
+    clearPendingTransition();
+    setContentHeight("".concat(childrenRef.current.scrollHeight, "px"));
+    setIsTransitioning(true);
+    return true;
+  }, [clearPendingTransition]);
+  const openContent = (0, _react.useCallback)(() => {
+    if (!prepareContentTransition()) return;
+    setIsCollapsed(false);
+    transitionTimeoutRef.current = setTimeout(() => {
+      setIsTransitioning(false);
+      setContentHeight('none');
+    }, transitionDuration);
+  }, [prepareContentTransition, transitionDuration]);
+  const closeContent = (0, _react.useCallback)(() => {
+    if (!prepareContentTransition()) return;
+    transitionFrameRef.current = requestAnimationFrame(() => {
+      setContentHeight('0px');
+      setIsCollapsed(true);
+      transitionTimeoutRef.current = setTimeout(() => setIsTransitioning(false), transitionDuration);
+    });
+  }, [prepareContentTransition, transitionDuration]);
+  (0, _react.useEffect)(() => clearPendingTransition, []);
   const toggleCollapsed = (0, _react.useCallback)(() => {
-    if (isCollapsed) {
-      if (childrenRef.current) {
-        const height = childrenRef.current.scrollHeight;
-        setContentHeight("".concat(height, "px"));
-        setIsTransitioning(true);
-        setIsCollapsed(false);
-        setTimeout(() => {
-          setIsTransitioning(false);
-          setContentHeight('none');
-        }, transitionDuration);
-      }
-    } else if (childrenRef.current) {
-      const height = childrenRef.current.scrollHeight;
-      setContentHeight("".concat(height, "px"));
-      setIsTransitioning(true);
-      requestAnimationFrame(() => {
-        setContentHeight('0px');
-        setIsCollapsed(true);
-        setTimeout(() => setIsTransitioning(false), transitionDuration);
-      });
+    if (isCollapsed) openContent();else closeContent();
+  }, [isCollapsed, openContent, closeContent]);
+  (0, _react.useEffect)(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
     }
-  }, [isCollapsed]);
+    if (expanded) openContent();else closeContent();
+  }, [expanded, openContent, closeContent]);
+  const handleInfoKeyDown = (0, _react.useCallback)(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopDataPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
   const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
-  const DataComponent = (0, _componentUtils.isUTLabel)(Data) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
+  const isDataLabel = (0, _componentUtils.isUTLabel)(Data);
+  const DataComponent = isDataLabel ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
   const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
   const {
     tooltip: titleTooltip
@@ -92,18 +125,7 @@ const UTDataElement = _ref => {
   const infoClasses = "".concat(classes.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && classes.vertical);
   const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
   const childrenClasses = "".concat(classes.children, " ").concat(isCollapsed ? classes.childrenCollapsed : classes.childrenExpanded, " ").concat(isTransitioning ? classes.childrenTransitioning : classes.childrenStatic);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
-    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: contentClasses
-  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
-    name: Icon,
-    colorTheme: "gray",
-    size: "var(--UT-dataElement-icon-size, 1.5rem)"
-  }, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
-    className: infoClasses
-  }, (prefix || title || showBadge) && /*#__PURE__*/_react.default.createElement("div", {
+  const infoContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (prefix || title || showBadge || children) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.topInfo
   }, prefix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
@@ -112,21 +134,41 @@ const UTDataElement = _ref => {
     content: titleTooltip
   } : {}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
-  }, titleProps), title))), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
+  }, titleProps), title))), children && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: iconCollapseButtonClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
+    size: "var(--UT-dataElement-chevron-icon-size, 1.25rem)",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
+  }), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
     colorTheme: "accent",
     className: classes.badge
-  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({
-    dataTestId: dataTestId
-  }, action)), children && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    classNames: {
-      icon: iconCollapseButtonClasses
-    },
-    Icon: "IconChevronUp",
+  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && (isDataLabel ? DataComponent :
+  /*#__PURE__*/
+  // Sin role="button": este div solo corta la propagación del click/keydown hacia el toggle de colapso, no es un control propio.
+  _react.default.createElement("div", {
+    onClick: stopDataPropagation,
+    onKeyDown: stopDataPropagation
+  }, DataComponent)));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: contentClasses
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray",
+    size: "var(--UT-dataElement-icon-size, 1.5rem)"
+  }, iconProps)), children ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(infoClasses, " ").concat(classes.clickable),
     onClick: toggleCollapsed,
-    size: "small",
-    variant: "text",
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
-  })), children && /*#__PURE__*/_react.default.createElement("div", {
+    onKeyDown: handleInfoKeyDown,
+    "aria-expanded": !isCollapsed
+  }, infoContent) : /*#__PURE__*/_react.default.createElement("div", {
+    className: infoClasses
+  }, infoContent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({
+    dataTestId: dataTestId
+  }, action))), children && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxHeight: contentHeight
     },
@@ -138,6 +180,10 @@ const UTDataElement = _ref => {
 UTDataElement.propTypes = {
   action: _propTypes.object,
   area: _propTypes.bool,
+  areaProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    shade: _propTypes.string
+  }),
   badge: _propTypes.string,
   badgeProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
@@ -145,6 +191,7 @@ UTDataElement.propTypes = {
   Data: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
   dataProps: _propTypes.object,
   dataTestId: _propTypes.string,
+  expanded: _propTypes.bool,
   forceShowBadge: _propTypes.bool,
   Icon: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
   iconProps: _propTypes.object,

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

@@ -33,6 +33,7 @@
 }
 
 .info {
+  align-items: stretch;
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -40,6 +41,10 @@
   justify-content: space-between;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .vertical {
   flex-direction: column;
   grid-gap: var(--UT-dataElement-content-gap-y, 0.5rem);

package/dist/components/UTDataElement/theme.js

@@ -5,23 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = exports.backgroundColor = void 0;
 var _Palette = require("../../constants/Palette");
-const backgroundColor = (theme, area) => {
-  var _theme$Palette;
-  const colorTheme = _Palette.COLOR_THEMES.light;
-  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const paletteColors = theme.Palette;
-  const areaColor = actionPaletteColors[colorTheme] || paletteColors[colorTheme];
+const backgroundColor = function (theme, area) {
+  var _theme$Palette, _theme$Palette2;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const requestedColorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
+  const colorTheme = _Palette.VALID_PALETTE_COLOR_THEMES.has(requestedColorTheme) ? requestedColorTheme : _Palette.COLOR_THEMES.light;
+  const areaColor = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette[colorTheme]) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2[colorTheme]);
+  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
   return {
-    backgroundColor: area ? areaColor['03'] : 'transparent'
+    backgroundColor: area ? areaColor === null || areaColor === void 0 ? void 0 : areaColor[shade] : 'transparent'
   };
 };
 exports.backgroundColor = backgroundColor;
 const retrieveStyle = _ref => {
   let {
     area,
-    theme
+    theme,
+    areaProps
   } = _ref;
-  const areaBackgroundColor = backgroundColor(theme, area);
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
   return {
     area: {
       ...areaBackgroundColor,

package/dist/components/UTRadioGroup/UTRadioGroup.stories.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.V1Categorized = exports.V1CardVariant = exports.V1ButtonVariant = exports.V0WithField = exports.V0WithDividers = exports.V0Disabled = exports.V0Basic = exports.Playground = void 0;
+exports.default = exports.V1WithArea = exports.V1Categorized = exports.V1CardVariant = exports.V1ButtonVariant = exports.V0WithField = exports.V0WithDividers = exports.V0Disabled = exports.V0Basic = exports.Playground = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _previewApi = require("@storybook/preview-api");
 var _utils = require("stories/utils");
-var _constants = require("../UTCheckbox/versions/V1/constants");
+var _constants = require("./versions/V1/constants");
 var _constants2 = require("./versions/V1/components/Radio/constants");
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -319,6 +319,102 @@ var _default = exports.default = {
         eq: 'V1'
       }
     },
+    area: {
+      control: 'boolean',
+      description: 'Muestra un área de fondo alrededor del grupo de opciones (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    areaProps: {
+      control: 'object',
+      description: 'Personalización del área de fondo: `colorTheme`, `shade`, `borderColorTheme`, `borderShade` (V1 only). Sin `colorTheme` no se agrega fondo; sin `borderColorTheme` no se agrega borde.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    iconSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el ícono de la opción seleccionada, sobrescriben `iconProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de cada opción (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    nameSelectedProps: {
+      control: 'object',
+      description: 'Props adicionales para el UTLabel del nombre de la opción seleccionada, sobrescriben `nameProps` (V1 only).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
     dataTestId: {
       control: 'text',
       description: 'ID de prueba para el elemento raíz.',
@@ -424,8 +520,8 @@ const Playground = exports.Playground = {
     options: defaultOptions,
     title: 'Selecciona una opción',
     value: '',
-    horizontalSpacing: 'medium',
-    verticalSpacing: 'medium',
+    horizontalSpacing: _constants.SPACING.MEDIUM,
+    verticalSpacing: _constants.SPACING.MEDIUM,
     reversed: false,
     required: false,
     disabled: false,
@@ -481,6 +577,30 @@ const V1ButtonVariant = exports.V1ButtonVariant = {
   },
   name: 'V1 - Variante Button'
 };
+const V1WithArea = exports.V1WithArea = {
+  render: V1Template,
+  args: {
+    version: 'V1',
+    options: defaultOptions,
+    title: 'Opciones con Área de Fondo',
+    value: '',
+    area: true,
+    areaProps: {
+      colorTheme: 'light',
+      borderColorTheme: 'gray'
+    },
+    iconProps: {
+      colorTheme: 'dark'
+    },
+    iconSelectedProps: {
+      colorTheme: 'accent'
+    },
+    nameSelectedProps: {
+      weight: 'bold'
+    }
+  },
+  name: 'V1 - Con Área de Fondo'
+};
 
 // V0 Stories
 const V0Basic = exports.V0Basic = {

package/dist/components/UTRadioGroup/versions/V1/components/Radio/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
 var _propTypes = require("prop-types");
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../../../UTTouchableWithoutFeedback"));
 var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
 var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../../../../../WithTheme"));
@@ -21,18 +22,20 @@ const Radio = _ref => {
     descriptionProps = {},
     disabled,
     icon,
+    iconProps = {},
+    iconSelectedProps = {},
     name,
     nameProps = {},
+    nameSelectedProps = {},
     onChange,
     prefix,
     selected,
     suffix,
     variant = _constants.RADIO_VARIANTS.DEFAULT
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     className: classes.root,
-    onClick: () => !disabled && onChange(),
-    role: "button"
+    onClick: () => !disabled && onChange()
   }, variant === _constants.RADIO_VARIANTS.DEFAULT && /*#__PURE__*/_react.default.createElement(_Radio.default, {
     checked: selected,
     onChange: onChange,
@@ -40,11 +43,11 @@ const Radio = _ref => {
     disabled: disabled
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.content
-  }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+  }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
     name: icon,
     colorTheme: selected ? 'accent' : 'dark',
     size: _constants.ICON_SIZES[variant]
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, iconProps, selected ? iconSelectedProps : {})), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.contentContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.content
@@ -52,7 +55,7 @@ const Radio = _ref => {
     colorTheme: "gray"
   }, prefix), name && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: selected ? 'accent' : 'dark'
-  }, nameProps), name), suffix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, nameProps, selected ? nameSelectedProps : {}), name), suffix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     variant: "small",
     weight: "medium"
@@ -70,8 +73,11 @@ Radio.propTypes = {
   descriptionProps: _propTypes.object,
   disabled: _propTypes.bool,
   icon: _propTypes.string,
+  iconProps: _propTypes.object,
+  iconSelectedProps: _propTypes.object,
   name: _propTypes.string,
   nameProps: _propTypes.object,
+  nameSelectedProps: _propTypes.object,
   onChange: _propTypes.func,
   prefix: _propTypes.string,
   selected: _propTypes.bool,

package/dist/components/UTRadioGroup/versions/V1/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SPACING = exports.NO_CATEGORY = void 0;
 const SPACING = exports.SPACING = {
+  NONE: 'none',
   SMALL: 'small',
   MEDIUM: 'medium'
 };

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

@@ -14,6 +14,7 @@ var _utils = require("../../../UTValidation/utils");
 var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _Radio = _interopRequireDefault(require("./components/Radio"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _utils2 = require("./utils");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -21,15 +22,20 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const UTRadioGroup = _ref => {
   let {
     actions,
+    area,
+    areaProps,
     classNames = {},
     dataTestId,
     descriptionProps,
     disabled,
     error,
     errorDataTestId,
-    horizontalSpacing = 'medium',
+    horizontalSpacing = _constants.SPACING.MEDIUM,
+    iconProps,
+    iconSelectedProps,
     itemDataTestId,
     nameProps,
+    nameSelectedProps,
     onChange = () => {},
     options,
     required,
@@ -37,7 +43,7 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    verticalSpacing = 'medium'
+    verticalSpacing = _constants.SPACING.MEDIUM
   } = _ref;
   const categorizedOptions = (0, _react.useMemo)(() => {
     const optionsGrouped = options.reduce((groupedOptions, option) => {
@@ -60,11 +66,13 @@ const UTRadioGroup = _ref => {
     });
   }, [options]);
   const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
+  const areaStyle = (0, _react.useMemo)(() => (0, _utils2.getAreaStyle)(area, areaProps), [area, areaProps]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, "  ").concat(classNames.root),
-    "data-testid": dataTestId
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames.root || ''),
+    "data-testid": dataTestId,
+    style: areaStyle
   }, title && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header)
+    className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header || '')
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     actions: actions,
     required: required
@@ -85,8 +93,11 @@ const UTRadioGroup = _ref => {
       dataTestId: itemDataTestId ? "".concat(itemDataTestId, ".category_").concat(catIndex, ".").concat(index) : null,
       descriptionProps: descriptionProps,
       disabled: item.disabled || disabled,
+      iconProps: iconProps,
+      iconSelectedProps: iconSelectedProps,
       key: item.value,
       nameProps: nameProps,
+      nameSelectedProps: nameSelectedProps,
       onChange: () => onChange(item.value),
       reversed: reversed,
       selected: item.value === value,
@@ -100,15 +111,20 @@ const UTRadioGroup = _ref => {
 };
 UTRadioGroup.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  area: _propTypes.bool,
+  areaProps: _propTypes.object,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
   descriptionProps: _propTypes.object,
   disabled: _propTypes.bool,
   error: _propTypes.string,
   errorDataTestId: _propTypes.string,
-  horizontalSpacing: _propTypes.string,
+  horizontalSpacing: (0, _propTypes.oneOf)(Object.values(_constants.SPACING)),
+  iconProps: _propTypes.object,
+  iconSelectedProps: _propTypes.object,
   itemDataTestId: _propTypes.string,
   nameProps: _propTypes.object,
+  nameSelectedProps: _propTypes.object,
   onChange: _propTypes.func,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     category: _propTypes.string,
@@ -123,6 +139,6 @@ UTRadioGroup.propTypes = {
   title: _propTypes.string,
   value: _propTypes.string,
   variant: _propTypes.string,
-  verticalSpacing: _propTypes.string
+  verticalSpacing: (0, _propTypes.oneOf)(Object.values(_constants.SPACING))
 };
 var _default = exports.default = UTRadioGroup;

package/dist/components/UTRadioGroup/versions/V1/styles.module.scss

@@ -17,6 +17,11 @@ $spacing-small: 8px;
   grid-gap: $spacing-small;
 }
 
+.noneCategoryContainer {
+  @extend %categoryContainer;
+  grid-gap: 0;
+}
+
 .categoryTitle {
   padding: 8px 0;
 }