@widergy/energy-ui 3.172.3 → 3.173.0

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 +1,133 @@
-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 isEmpty from"lodash/isEmpty";import WithTheme from"../WithTheme";import UTDataElement from"../UTDataElement";import UTLabel from"../UTLabel";import UTButton from"../UTButton";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";const{dataCategory:dataCategory}=TEST_IDS,UTDataCategory=_ref=>{let{action:action,area:area,classes:theme,classNames:classNames,collapsable:collapsable=!0,dataTestId:dataTestId,elements:elements=[],elementsProps:elementsProps={},expanded:expanded=!1,Icon:Icon,iconProps:iconProps,title:title,titleProps:titleProps}=_ref;const IconComponent="string"==typeof Icon?UTIcon:Icon,showTitle=!!title,classes=useMemo(()=>mergeClasses(theme,classNames),[classNames,theme]),[isCollapsed,setIsCollapsed]=useState(showTitle&&collapsable&&!expanded),childrenRef=useRef(null),containerClasses="".concat(styles.container," ").concat(classes.container||""," ").concat(area?classes.area:""),collapseButtonClasses="".concat(styles.collapseButton," ").concat(isCollapsed?styles.collapsed:"");return React.createElement("div",{className:containerClasses,"data-testid":dataTestId?"".concat(dataTestId,".").concat(dataCategory.container):void 0},title&&React.createElement("div",{className:styles.title},IconComponent&&React.createElement(IconComponent,_extends({name:Icon,colorTheme:"gray"},iconProps)),React.createElement(UTLabel,_extends({colorTheme:"gray",weight:"medium"},titleProps),title),collapsable&&React.createElement("div",{className:collapseButtonClasses},React.createElement(UTButton,{Icon:"IconChevronUp",variant:"text",onClick:()=>setIsCollapsed(!isCollapsed),size:"small",dataTestId:dataTestId?"".concat(dataTestId,".").concat(dataCategory.collapseButton):void 0})),action&&React.createElement(MainAction,action)),React.createElement("div",{style:{gridTemplateRows:isCollapsed?"0fr":"1fr",marginTop:isCollapsed||!showTitle?0:16},className:styles.children},React.createElement("div",{ref:childrenRef,className:styles.childrenContent},isEmpty(elements)?React.createElement(UTLabel,{align:"center",colorTheme:"gray"},WITHOUT_DATA_TEXT):elements.map((element,index)=>{const{key:key,...dataElementProps}=element;return React.createElement(UTDataElement,_extends({key:key||index,dataTestId:dataTestId?"".concat(dataTestId,".").concat(index):"".concat(dataCategory.item,".").concat(index),classNames:classes.element},elementsProps,dataElementProps))}))))};UTDataCategory.propTypes={action:object,area:bool,areaProps:object,classes:objectOf(string),classNames:objectOf(string),collapsable:bool,dataTestId:string,elements:array,elementsProps:object,expanded:bool,Icon:string,iconProps:object,style:object,title:string,titleProps:object};export default WithTheme(retrieveStyle)(UTDataCategory);
+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, 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 UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import { mergeClasses } from '../../utils/classesUtils';
+import { TEST_IDS } from '../../constants/testIds';
+import UTIcon from '../UTIcon';
+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;
+const UTDataCategory = _ref => {
+  let {
+    action,
+    area,
+    classes: theme,
+    classNames,
+    collapsable = true,
+    dataTestId,
+    description,
+    descriptionProps = {},
+    elements = [],
+    elementsProps = {},
+    expanded = false,
+    Icon,
+    iconProps,
+    title,
+    titleProps
+  } = _ref;
+  const IconComponent = typeof Icon === 'string' ? UTIcon : Icon;
+  const showTitle = !!title;
+  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 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,
+    colorTheme: "gray"
+  }, iconProps)), /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray",
+    weight: "medium"
+  }, titleProps), title), collapsable && /*#__PURE__*/React.createElement(UTIcon, {
+    className: collapseIconClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.collapseButton) : undefined
+  }), 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
+    },
+    className: styles.children
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: childrenRef,
+    className: styles.childrenContent
+  }, isEmpty(elements) ? /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    colorTheme: "gray"
+  }, WITHOUT_DATA_TEXT) : elements.map((element, index) => {
+    const {
+      key,
+      ...dataElementProps
+    } = element;
+    return /*#__PURE__*/React.createElement(UTDataElement, _extends({
+      key: key || index,
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(dataCategory.item, ".").concat(index),
+      classNames: classes.element
+    }, elementsProps, dataElementProps));
+  }))));
+};
+UTDataCategory.propTypes = {
+  action: object,
+  area: bool,
+  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,
+  Icon: string,
+  iconProps: object,
+  style: object,
+  title: string,
+  titleProps: object
+};
+export default WithTheme(retrieveStyle)(UTDataCategory);

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;

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

@@ -1 +1,27 @@
-import{COLOR_THEMES,COLOR_SHADES}from"../../constants/Palette";export const backgroundColor=function(theme,area){var _theme$Palette;let areaProps=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const colorTheme=areaProps.colorTheme||COLOR_THEMES.light,areaColor=((null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette)[colorTheme],shade=areaProps.shade||(COLOR_THEMES.light===colorTheme?COLOR_SHADES.shade03:COLOR_SHADES.shade01);return{backgroundColor:area?areaColor[shade]:"transparent"}};export const retrieveStyle=_ref=>{let{area:area,theme:theme,areaProps:areaProps}=_ref;return{area:{...backgroundColor(theme,area,areaProps),padding:"var(--UT-dataCategory-padding, 1rem)",borderRadius:8}}};
+import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
+export const backgroundColor = function (theme, area) {
+  var _theme$Palette;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const colorTheme = areaProps.colorTheme || COLOR_THEMES.light;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const areaColor = actionPaletteColors[colorTheme];
+  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
+  return {
+    backgroundColor: area ? areaColor[shade] : 'transparent'
+  };
+};
+export const retrieveStyle = _ref => {
+  let {
+    area,
+    theme,
+    areaProps
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      padding: 'var(--UT-dataCategory-padding, 1rem)',
+      borderRadius: 8
+    }
+  };
+};

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

@@ -0,0 +1,150 @@
+# UTDataElement
+
+A versatile data component that can be customized with various themes, sizes, icons, data elements, and actions. It supports both horizontal and vertical layouts, collapsible content, and different types of actions including buttons and switches.
+
+## Props
+
+| Name               | Type              | Default      | Description                                                        |
+| ------------------ | ----------------- | ------------ | ------------------------------------------------------------------ |
+| action             | object            |              | Action configuration for button or switch. See Action Types below. |
+| area               | bool              | `false`      | Specifies whether the component has a background area.             |
+| areaProps          | object            | `{}`         | Customizes the area background. Supports `colorTheme` (any `COLOR_THEMES` value) and `shade` (`'01'`–`'05'`). Only applies when `area` is `true`. |
+| badge              | string \| number  |              | Displays a badge with text or number.                              |
+| badgeProps         | object            | `{}`         | Additional props for customizing the badge.                        |
+| children           | element           |              | Collapsible content displayed below the main component.            |
+| classes            | objectOf(string)  |              | Theme classes for styling.                                         |
+| classNames         | objectOf(string)  |              | Additional class names for custom styling.                         |
+| Data               | element \| string |              | Data content to display (can be a React element or string).        |
+| dataProps          | object            | `{}`         | Additional props for configuring the data element.                 |
+| forceShowBadge     | bool              | `false`      | Forces the badge to be displayed even when empty.                  |
+| Icon               | element \| string |              | Icon to display (can be a UTIcon name or custom React element).    |
+| iconProps          | object            | `{}`         | Additional props for the icon element.                             |
+| orientation        | string            | `horizontal` | Defines the layout orientation.                                    |
+| paddingVertical    | string            | `medium`     | Vertical padding applied to the component.                         |
+| prefix             | string            |              | Text or symbol displayed before the title.                         |
+| prefixProps        | object            | `{}`         | Additional props for customizing the prefix.                       |
+| spacing            | string            | `medium`     | Defines the spacing between elements.                              |
+| title              | string            |              | Title text displayed in the component.                             |
+| titleProps         | object            | `{}`         | Additional props for customizing the title.                        |
+| transitionDuration | number            | `300`        | Duration of the transition animation in milliseconds.              |
+
+## Action Types
+
+The `action` prop supports two types of actions:
+
+### Button Action
+
+```javascript
+{
+  type: 'button',
+  onClick: () => console.log('Button clicked'),
+  Icon: 'IconEdit',
+  // ... other UTButton props
+}
+```
+
+### Switch Action
+
+```javascript
+{
+  type: 'switch',
+  onChange: (value) => console.log('Switch toggled:', value),
+  value: true,
+  // ... other UTSwitch props
+}
+```
+
+## Orientation
+
+The value of `orientation` must be one of the following:
+
+- `horizontal` - Elements are arranged in a row
+- `vertical` - Elements are arranged in a column
+
+## Padding & Spacing
+
+The values of `paddingVertical` and `spacing` must be one of the following:
+
+- `small` - 8px spacing/padding
+- `medium` - 16px spacing/padding
+
+## Collapsible Content
+
+If the component has any `children`, it will automatically become collapsible. Clicking anywhere on the title/data area expands/collapses the content; the chevron next to the title is only a visual indicator of the current state. Clicks on `action` (button or switch) don't affect the toggle since it sits outside that clickable area.
+
+## Examples
+
+### Basic Usage
+
+```javascript
+<UTDataElement title="User Information" Data="John Doe" Icon="IconUser" />
+```
+
+### With Action and Badge
+
+```javascript
+<UTDataElement
+  title="Status"
+  Data="Active"
+  badge="New"
+  action={{
+    type: 'button',
+    onClick: () => console.log('Edit clicked'),
+    Icon: 'IconEdit'
+  }}
+/>
+```
+
+### With Switch Action
+
+```javascript
+<UTDataElement
+  title="Notifications"
+  Data="Email notifications enabled"
+  action={{
+    type: 'switch',
+    onChange: value => setNotifications(value),
+    value: notificationsEnabled
+  }}
+/>
+```
+
+### With Collapsible Content
+
+```javascript
+<UTDataElement title="Details" Data="Click to expand" Icon="IconInfo">
+  <UTLabel>Additional information here</UTLabel>
+  <UTIcon name="IconBeach" colorTheme="success" />
+</UTDataElement>
+```
+
+### With Custom Data Component
+
+```javascript
+<UTDataElement
+  title="Status"
+  Data={
+    <UTStatus variant="information" Icon="IconPlanet">
+      Online
+    </UTStatus>
+  }
+/>
+```
+
+### With Area Background
+
+```javascript
+<UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
+```
+
+### With Custom Area Style
+
+```javascript
+<UTDataElement
+  area
+  areaProps={{ colorTheme: 'accent', shade: '01' }}
+  title="Custom Area"
+  Data="Custom background color and shade"
+  Icon="IconStar"
+/>
+```