@widergy/energy-ui 3.172.2 → 3.173.0

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAreaStyle = void 0;
+var _Palette = require("../../../../constants/Palette");
+var _colorUtils = require("../../../../utils/colorUtils");
+// colorTheme sin entrada real en la paleta del tenant (ej. 'primary', o un valor inválido) -> se trata como si no
+// se hubiera pasado ningún colorTheme (getAreaStyle no agrega fondo/borde para ese lado del área).
+const resolvePaletteColorTheme = colorTheme => _Palette.VALID_PALETTE_COLOR_THEMES.has(colorTheme) ? colorTheme : undefined;
+
+/**
+ * Calcula el estilo del área de fondo de UTRadioGroup según areaProps. Sin `area`, no agrega borde ni fondo.
+ * A diferencia de UTDataCategory/UTDataElement, acá el fondo no tiene un colorTheme por defecto: solo se
+ * aplica si `areaProps.colorTheme` está configurado explícitamente.
+ * @param {boolean} area - Si el área debe mostrarse.
+ * @param {{ colorTheme?: string, shade?: string, borderColorTheme?: string, borderShade?: string }} [areaProps] - Personalización del área. Sin `colorTheme` no se agrega fondo; sin `borderColorTheme` no se agrega borde.
+ * @returns {object} Estilos inline a aplicar sobre el contenedor.
+ */
+const getAreaStyle = function (area) {
+  let areaProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!area) return {};
+  const colorTheme = resolvePaletteColorTheme(areaProps.colorTheme);
+  const borderColorTheme = resolvePaletteColorTheme(areaProps.borderColorTheme);
+  const shade = areaProps.shade || (colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
+  const borderShade = areaProps.borderShade || (borderColorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
+  return {
+    ...(colorTheme && {
+      backgroundColor: (0, _colorUtils.getPaletteCssVar)(colorTheme, shade)
+    }),
+    ...(borderColorTheme && {
+      border: "1px solid ".concat((0, _colorUtils.getPaletteCssVar)(borderColorTheme, borderShade))
+    }),
+    borderRadius: 8,
+    boxSizing: 'border-box',
+    padding: 8
+  };
+};
+exports.getAreaStyle = getAreaStyle;

package/dist/constants/Palette.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.COLOR_THEMES = exports.COLOR_SHADES = void 0;
+exports.VALID_PALETTE_COLOR_THEMES = exports.PALETTE_CSS_VAR_PREFIX_MAPPER = exports.COLOR_THEMES = exports.COLOR_SHADES = void 0;
 const COLOR_SHADES = exports.COLOR_SHADES = {
   shade01: '01',
   shade02: '02',
@@ -23,4 +23,20 @@ const COLOR_THEMES = exports.COLOR_THEMES = {
   primary: 'primary',
   success: 'success',
   warning: 'warning'
-};
+};
+
+// Prefijo real de la CSS var de la paleta multi-tenant para cada colorTheme (ej. 'accent' -> 'actionAccent01').
+// Los themes sin entrada acá (dark, gray, light, primary) no llevan prefijo: la CSS var coincide con el colorTheme.
+const PALETTE_CSS_VAR_PREFIX_MAPPER = exports.PALETTE_CSS_VAR_PREFIX_MAPPER = {
+  [COLOR_THEMES.accent]: 'actionAccent',
+  [COLOR_THEMES.error]: 'semanticError',
+  [COLOR_THEMES.information]: 'semanticInformation',
+  [COLOR_THEMES.negative]: 'actionNegative',
+  [COLOR_THEMES.neutral]: 'actionNeutral',
+  [COLOR_THEMES.success]: 'semanticSuccess',
+  [COLOR_THEMES.warning]: 'semanticWarning'
+};
+
+// colorTheme de COLOR_THEMES que sí tienen una entrada real en la paleta de cada tenant (ver .storybook/palettes/palette.js).
+// 'primary' queda afuera a propósito: es un valor válido de COLOR_THEMES pero ningún tenant define esa key.
+const VALID_PALETTE_COLOR_THEMES = exports.VALID_PALETTE_COLOR_THEMES = new Set([COLOR_THEMES.accent, COLOR_THEMES.dark, COLOR_THEMES.error, COLOR_THEMES.gray, COLOR_THEMES.information, COLOR_THEMES.light, COLOR_THEMES.negative, COLOR_THEMES.neutral, COLOR_THEMES.success, COLOR_THEMES.warning]);

package/dist/esm/components/UTDataCategory/README.md

@@ -12,6 +12,8 @@ A collapsible container component that displays a list of data elements with an
 | classNames    | object |         | Custom CSS class names for styling the component.                                  |
 | collapsable   | bool   | `true`  | Specifies if the data list is collapsible.                                         |
 | dataTestId    | string |         | Test ID for testing purposes.                                                      |
+| description   | string |         | Description text displayed below the title.                                        |
+| descriptionProps | object |      | Additional props for customizing the description UTLabel component.               |
 | elements      | array  | `[]`    | Array of objects to be rendered as UTDataElement components.                       |
 | elementsProps | object | `{}`    | Additional props that apply to all UTDataElement components.                       |
 | expanded      | bool   | `false` | Controls the initial expanded state of the component.                              |
@@ -21,7 +23,7 @@ A collapsible container component that displays a list of data elements with an
 
 ## Behavior
 
-- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`
+- **Collapsible**: The component is only collapsible if it has a `title` and `collapsable` is `true`. Clicking anywhere on the header (title, description) toggles it; the chevron next to the title is only a visual indicator. Clicks on `action` don't affect the toggle.
 - **Initial State**: The component starts collapsed by default unless `expanded` is `true`
 - **Area Styling**: When `area` is `true`, the component gets background color and padding
 - **Smooth Transitions**: Collapse/expand animations use CSS transitions for smooth UX

package/dist/esm/components/UTDataCategory/UTDataCategory.stories.js

@@ -0,0 +1,400 @@
+/* eslint-disable no-alert */
+import { ACTION_TYPE } from './constants';
+import UTDataCategory from '.';
+
+// Mock data for examples
+const mockElements = [{
+  title: 'Plan Mensual',
+  Data: '$4.999',
+  Icon: 'IconCreditCard',
+  badge: 'Activo'
+}, {
+  title: 'Almacenamiento',
+  Data: '50GB disponibles',
+  Icon: 'IconCloud'
+}, {
+  title: 'Soporte Prioritario',
+  Data: 'Atención 24/7',
+  Icon: 'IconHeadset'
+}];
+const mockElementsWithActions = [{
+  title: 'Streaming Plus',
+  Data: 'Plan mensual',
+  Icon: 'IconDeviceTv',
+  badge: 'Activo',
+  action: {
+    type: ACTION_TYPE.SWITCH,
+    checked: true,
+    onChange: checked => alert("Streaming Plus ".concat(checked ? 'activado' : 'desactivado'))
+  }
+}, {
+  title: 'Almacenamiento en la Nube',
+  Data: '50GB disponibles',
+  Icon: 'IconCloud',
+  action: {
+    type: ACTION_TYPE.BUTTON,
+    text: 'Editar',
+    variant: 'text',
+    onClick: () => alert('Editar plan de almacenamiento')
+  }
+}, {
+  title: 'Soporte Premium',
+  Data: 'Atención prioritaria 24/7',
+  Icon: 'IconHeadset',
+  action: {
+    type: ACTION_TYPE.SWITCH,
+    checked: false,
+    onChange: checked => alert("Soporte Premium ".concat(checked ? 'activado' : 'desactivado'))
+  }
+}];
+export default {
+  args: {
+    title: 'Categoría de Datos',
+    elements: mockElements,
+    collapsable: true,
+    expanded: false
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el encabezado de la categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Descripción que se muestra debajo del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    descriptionProps: {
+      control: false,
+      description: 'Props adicionales para el UTLabel de la descripción.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    Icon: {
+      control: 'text',
+      description: 'Icono que se muestra al inicio del título. Nombre de icono de UTIcon.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    iconProps: {
+      control: false,
+      description: 'Props adicionales para el icono del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    collapsable: {
+      control: 'boolean',
+      description: 'Determina si la categoría es colapsable. Al hacer clic en el encabezado (título, descripción) se expande/colapsa; el chevron junto al título es solo un indicador visual.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    expanded: {
+      control: 'boolean',
+      description: 'Controla el estado inicial expandido del componente.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    action: {
+      control: false,
+      description: 'Configuración de la acción principal del encabezado (botón o switch). No dispara el colapso al hacer clic.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    elements: {
+      control: false,
+      description: 'Array de objetos que se renderizan como componentes UTDataElement.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'array'
+        }
+      }
+    },
+    elementsProps: {
+      control: false,
+      description: 'Props adicionales aplicadas a todos los UTDataElement renderizados.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    area: {
+      control: 'boolean',
+      description: 'Cuando es true, aplica color de fondo y padding para dar apariencia de área.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    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'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'ID de test para pruebas automatizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleProps: {
+      control: false,
+      description: 'Props adicionales para el UTLabel del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classes: {
+      control: false,
+      description: 'Clases de tema para estilos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    }
+  },
+  component: UTDataCategory,
+  parameters: {
+    controls: {
+      exclude: []
+    },
+    docs: {
+      description: {
+        component: 'Contenedor colapsable que agrupa una lista de UTDataElement bajo un título y descripción opcionales.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTDataCategory'
+};
+
+// Basic Stories
+export const Default = {
+  args: {
+    title: 'Información de la Cuenta',
+    elements: mockElements
+  },
+  name: 'Básico'
+};
+export const WithDescription = {
+  args: {
+    title: 'Información de la Cuenta',
+    description: 'Datos generales asociados a tu cuenta actual.',
+    Icon: 'IconUser',
+    elements: mockElements
+  },
+  name: 'Con Descripción'
+};
+export const NonCollapsable = {
+  args: {
+    title: 'Resumen Fijo',
+    description: 'Esta categoría siempre está expandida.',
+    collapsable: false,
+    elements: mockElements
+  },
+  name: 'No Colapsable'
+};
+export const ExpandedByDefault = {
+  args: {
+    title: 'Categoría Expandida',
+    elements: mockElements,
+    expanded: true
+  },
+  name: 'Expandida por Defecto'
+};
+export const WithHeaderAction = {
+  args: {
+    title: 'Métodos de Pago',
+    description: 'Administrá los métodos de pago asociados a tu cuenta.',
+    Icon: 'IconWallet',
+    action: {
+      type: ACTION_TYPE.BUTTON,
+      text: 'Agregar',
+      variant: 'text',
+      onClick: () => alert('Agregar nuevo método de pago')
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción en el Encabezado'
+};
+export const WithButtonAction = {
+  args: {
+    title: 'Datos de Facturación',
+    description: 'Información asociada a tu método de pago activo.',
+    Icon: 'IconCreditCard',
+    action: {
+      type: ACTION_TYPE.BUTTON,
+      text: 'Editar',
+      variant: 'text',
+      onClick: () => alert('Editar datos de facturación')
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción Botón'
+};
+export const WithSwitchAction = {
+  args: {
+    title: 'Notificaciones Push',
+    description: 'Activá o desactivá las notificaciones de tu cuenta.',
+    Icon: 'IconBell',
+    action: {
+      type: ACTION_TYPE.SWITCH,
+      checked: true,
+      onChange: checked => alert("Switch ".concat(checked ? 'activado' : 'desactivado'))
+    },
+    elements: mockElements
+  },
+  name: 'Con Acción Switch'
+};
+export const CollapsableWithActions = {
+  args: {
+    title: 'Suscripciones Activas',
+    description: 'Gestioná los servicios a los que estás suscripto.',
+    Icon: 'IconApps',
+    collapsable: true,
+    action: {
+      type: ACTION_TYPE.BUTTON,
+      text: 'Agregar',
+      variant: 'text',
+      onClick: () => alert('Agregar nueva suscripción')
+    },
+    elements: mockElementsWithActions
+  },
+  name: 'Colapsable con Acciones (Encabezado y Elementos)'
+};
+export const AreaMode = {
+  args: {
+    title: 'Categoría con Área',
+    description: 'Esta categoría tiene un fondo destacado.',
+    area: true,
+    elements: mockElements
+  },
+  name: 'Modo Área'
+};
+export const AreaModeCustomProps = {
+  args: {
+    title: 'Área con Color Personalizado',
+    area: true,
+    areaProps: {
+      colorTheme: 'accent',
+      shade: '01'
+    },
+    elements: mockElements
+  },
+  name: 'Modo Área — Color Personalizado'
+};
+export const CustomDataTestId = {
+  args: {
+    title: 'Con Test ID',
+    elements: mockElements,
+    dataTestId: 'custom-data-category'
+  },
+  name: 'Con Test ID Personalizado'
+};
+export const Playground = {
+  args: {
+    title: 'Categoría de Datos',
+    description: '',
+    Icon: 'IconFolder',
+    collapsable: true,
+    expanded: false,
+    area: false,
+    elements: mockElementsWithActions,
+    dataTestId: 'playground-data-category'
+  },
+  name: 'Playground'
+};

package/dist/esm/components/UTDataCategory/components/MainAction/index.js

@@ -0,0 +1,40 @@
+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); }
+import React from 'react';
+import { bool, oneOf, func, string, number, oneOfType } from 'prop-types';
+import { TEST_IDS } from '../../../../constants/testIds';
+import UTSwitch from '../../../UTSwitch';
+import UTButton from '../../../UTButton';
+import { ACTION_TYPE } from '../../constants';
+const {
+  dataElement
+} = TEST_IDS;
+const MainAction = _ref => {
+  let {
+    type = ACTION_TYPE.BUTTON,
+    onChange,
+    value,
+    onClick,
+    dataTestId,
+    ...props
+  } = _ref;
+  return type === ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/React.createElement(UTSwitch, _extends({
+    onChange: onChange,
+    value: value
+  }, props, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
+    version: "V1"
+  })) : type === ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.buttonAction) : undefined,
+    variant: "text",
+    onClick: onClick
+  }, props)) : null;
+};
+MainAction.propTypes = {
+  dataTestId: string,
+  id: oneOfType([string, number]),
+  onChange: func,
+  onClick: func,
+  type: oneOf(Object.values(ACTION_TYPE)),
+  value: bool
+};
+export default MainAction;

package/dist/esm/components/UTDataCategory/constants.js

@@ -1 +1,5 @@
-export const WITHOUT_DATA_TEXT = 'Sin datos';
+export const WITHOUT_DATA_TEXT = 'Sin datos';
+export const ACTION_TYPE = {
+  SWITCH: 'switch',
+  BUTTON: 'button'
+};

package/dist/esm/components/UTDataCategory/index.js

@@ -1,18 +1,18 @@
 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); }
-import { array, bool, object, objectOf, string } from 'prop-types';
-import React, { useMemo, useRef, useState } from 'react';
+import { array, bool, object, objectOf, shape, string } from 'prop-types';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import WithTheme from '../WithTheme';
 import UTDataElement from '../UTDataElement';
 import UTLabel from '../UTLabel';
-import UTButton from '../UTButton';
+import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
 import { mergeClasses } from '../../utils/classesUtils';
 import { TEST_IDS } from '../../constants/testIds';
 import UTIcon from '../UTIcon';
-import MainAction from '../UTDataElement/components/MainAction';
 import styles from './styles.module.scss';
 import { retrieveStyle } from './theme';
 import { WITHOUT_DATA_TEXT } from './constants';
+import MainAction from './components/MainAction';
 const {
   dataCategory
 } = TEST_IDS;
@@ -24,6 +24,8 @@ const UTDataCategory = _ref => {
     classNames,
     collapsable = true,
     dataTestId,
+    description,
+    descriptionProps = {},
     elements = [],
     elementsProps = {},
     expanded = false,
@@ -37,13 +39,20 @@ const UTDataCategory = _ref => {
   const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
   const [isCollapsed, setIsCollapsed] = useState(showTitle && collapsable && !expanded);
   const childrenRef = useRef(null);
+  useEffect(() => {
+    setIsCollapsed(showTitle && collapsable && !expanded);
+  }, [expanded, showTitle, collapsable]);
   const toggleCollapsed = () => setIsCollapsed(!isCollapsed);
+  const handleHeaderKeyDown = useCallback(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopActionPropagation = useCallback(event => event.stopPropagation(), []);
   const containerClasses = "".concat(styles.container, " ").concat(classes.container || '', " ").concat(area ? classes.area : '');
-  const collapseButtonClasses = "".concat(styles.collapseButton, " ").concat(isCollapsed ? styles.collapsed : '');
-  return /*#__PURE__*/React.createElement("div", {
-    className: containerClasses,
-    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
-  }, title && /*#__PURE__*/React.createElement("div", {
+  const collapseIconClasses = "".concat(styles.collapseButton, " ").concat(isCollapsed ? styles.collapsed : '');
+  const headerContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles.title
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({
     name: Icon,
@@ -51,15 +60,31 @@ const UTDataCategory = _ref => {
   }, iconProps)), /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: "gray",
     weight: "medium"
-  }, titleProps), title), collapsable && /*#__PURE__*/React.createElement("div", {
-    className: collapseButtonClasses
-  }, /*#__PURE__*/React.createElement(UTButton, {
-    Icon: "IconChevronUp",
-    variant: "text",
-    onClick: toggleCollapsed,
-    size: "small",
+  }, titleProps), title), collapsable && /*#__PURE__*/React.createElement(UTIcon, {
+    className: collapseIconClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.collapseButton) : undefined
-  })), action && /*#__PURE__*/React.createElement(MainAction, action)), /*#__PURE__*/React.createElement("div", {
+  }), action &&
+  /*#__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.createElement("div", {
+    onClick: stopActionPropagation,
+    onKeyDown: stopActionPropagation
+  }, /*#__PURE__*/React.createElement(MainAction, action))), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, descriptionProps), description));
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerClasses,
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
+  }, title && (collapsable ? /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(styles.header, " ").concat(styles.clickable),
+    onClick: toggleCollapsed,
+    onKeyDown: handleHeaderKeyDown,
+    "aria-expanded": !isCollapsed
+  }, headerContent) : /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, headerContent)), /*#__PURE__*/React.createElement("div", {
     style: {
       gridTemplateRows: isCollapsed ? '0fr' : '1fr',
       marginTop: isCollapsed || !showTitle ? 0 : 16
@@ -86,11 +111,16 @@ const UTDataCategory = _ref => {
 UTDataCategory.propTypes = {
   action: object,
   area: bool,
-  areaProps: object,
+  areaProps: shape({
+    colorTheme: string,
+    shade: string
+  }),
   classes: objectOf(string),
   classNames: objectOf(string),
   collapsable: bool,
   dataTestId: string,
+  description: string,
+  descriptionProps: object,
   elements: array,
   elementsProps: object,
   expanded: bool,

package/dist/esm/components/UTDataCategory/styles.module.scss

@@ -3,6 +3,17 @@
   flex-direction: column;
 }
 
+.header {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-dataCategory-title-gap, 0.5rem);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
 .title {
   align-items: center;
   display: flex;