@widergy/energy-ui 3.163.0 → 3.165.0

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

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import UTButton from '../../UTButton';
+import UTAlert from '..';
+import { ALERT_TYPES, ARG_TYPES } from './storiesConstants';
+const composeContent = _ref => {
+  let {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  } = _ref;
+  return {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  };
+};
+const AllTypesDemo = () => {
+  const [alertState, setAlertState] = useState({
+    open: false
+  });
+  const showAlert = type => setAlertState({
+    message: "Alerta de tipo: ".concat(type),
+    open: true,
+    type
+  });
+  const handleClose = () => setAlertState(prev => ({
+    ...prev,
+    open: false
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px'
+    }
+  }, ALERT_TYPES.map(type => /*#__PURE__*/React.createElement(UTButton, {
+    key: type,
+    onClick: () => showAlert(type),
+    variant: "outlined"
+  }, type)), /*#__PURE__*/React.createElement(UTAlert, {
+    content: {
+      ...alertState,
+      onClose: handleClose
+    }
+  }));
+};
+export default {
+  args: {
+    message: 'Este es un mensaje de alerta de ejemplo.',
+    open: true,
+    timeDuration: undefined,
+    topRight: false,
+    type: 'success',
+    withoutIcon: false
+  },
+  argTypes: ARG_TYPES,
+  component: UTAlert,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'closeDataTestId', 'labelDataTestId']
+    },
+    docs: {
+      description: {
+        component: 'Componente de alerta tipo Snackbar para mostrar notificaciones al usuario. Soporta cuatro tipos (success, error, info, warning), markdown en el mensaje y posicionamiento configurable. Se usa habitualmente junto al `AlertHandler` singleton para disparar alertas desde cualquier lugar de la aplicación.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTAlert'
+};
+export const Playground = {
+  name: 'Playground',
+  render: _ref2 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(UTAlert, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+export const AllTypes = {
+  name: 'Todos los Tipos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacé clic en cada botón para ver el tipo de alerta correspondiente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/React.createElement(AllTypesDemo, null)
+};
+export const TopRight = {
+  args: {
+    message: 'Esta alerta aparece en la esquina superior derecha.',
+    open: true,
+    topRight: true,
+    type: 'info'
+  },
+  name: 'Posición Superior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `topRight: true` en el objeto `content`, la alerta aparece en la esquina superior derecha con animación de slide desde la derecha.'
+      }
+    }
+  },
+  render: _ref3 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(UTAlert, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+export const SinIcono = {
+  args: {
+    message: 'Alerta sin ícono de tipo.',
+    open: true,
+    type: 'warning',
+    withoutIcon: true
+  },
+  name: 'Sin Ícono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `withoutIcon: true` se oculta el ícono del tipo de alerta.'
+      }
+    }
+  },
+  render: _ref4 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref4;
+    return /*#__PURE__*/React.createElement(UTAlert, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+export const ConMarkdown = {
+  args: {
+    message: 'Operación completada. El archivo **reporte_enero.pdf** fue generado *exitosamente*.',
+    open: true,
+    type: 'success'
+  },
+  name: 'Con Markdown',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El campo `message` soporta sintaxis markdown. El texto se renderiza a través de `UTLabel` con `withMarkdown`.'
+      }
+    }
+  },
+  render: _ref5 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(UTAlert, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+export const Test = {
+  name: 'Test',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Story para el Test Runner. Renderiza los cuatro tipos de alerta simultáneamente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, ALERT_TYPES.map(type => /*#__PURE__*/React.createElement(UTAlert, {
+    key: type,
+    content: {
+      message: "Alerta ".concat(type),
+      open: true,
+      type
+    }
+  })))
+};

package/dist/esm/components/UTAlert/stories/storiesConstants.js

@@ -0,0 +1,101 @@
+import { joinArgTypes } from 'stories/utils';
+export const ALERT_TYPES = ['error', 'info', 'success', 'warning'];
+export const ARG_TYPES = {
+  closeDataTestId: {
+    control: false,
+    description: 'Identificador de test para el botón de cierre.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  labelDataTestId: {
+    control: false,
+    description: 'Identificador de test para el label del mensaje.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  message: {
+    control: 'text',
+    description: 'Mensaje a mostrar en la alerta. Pertenece al objeto `content`. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  open: {
+    control: 'boolean',
+    description: 'Controla si la alerta está visible. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  timeDuration: {
+    control: 'number',
+    description: 'Duración en milisegundos antes del cierre automático. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  topRight: {
+    control: 'boolean',
+    description: 'Si es `true`, la alerta aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  type: {
+    control: 'select',
+    description: 'Tipo de alerta. Determina el ícono y el color. Pertenece al objeto `content`.',
+    options: ALERT_TYPES,
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: joinArgTypes(ALERT_TYPES)
+      }
+    }
+  },
+  withoutIcon: {
+    control: 'boolean',
+    description: 'Si es `true`, oculta el ícono del tipo de alerta.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};

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

@@ -20,6 +20,7 @@ const UTBanner = _ref => {
     colorTheme = DEFAULT_PROPS.colorTheme,
     dataTestId,
     description,
+    descriptionProps,
     helpText,
     Icon,
     iconPlacement = DEFAULT_PROPS.iconPlacement,
@@ -28,6 +29,7 @@ const UTBanner = _ref => {
     secondaryButton,
     size = DEFAULT_PROPS.size,
     title,
+    titleProps,
     variant = DEFAULT_PROPS.variant
   } = _ref;
   const isVerticalButton = buttonPlacement === PLACEMENTS.VERTICAL;
@@ -79,16 +81,18 @@ const UTBanner = _ref => {
     dataTestId: dataTestId ? "".concat(dataTestId, ".category.").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: "xsmall",
     weight: "medium"
-  }, category), !!title && /*#__PURE__*/React.createElement(UTLabel, {
+  }, category), !!title && /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: labelColorTheme,
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.TITLE, ".").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: titleVariant,
     weight: "medium"
-  }, title), !!description && /*#__PURE__*/React.createElement(UTLabel, {
+  }, titleProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.TITLE, ".").concat(ID_CONSTANTS.LABEL) : undefined
+  }), title), !!description && /*#__PURE__*/React.createElement(UTLabel, _extends({
     colorTheme: labelColorTheme,
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: descriptionVariant
-  }, description), !!helpText && /*#__PURE__*/React.createElement(UTLabel, {
+  }, descriptionProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined
+  }), description), !!helpText && /*#__PURE__*/React.createElement(UTLabel, {
     colorTheme: secondaryLabelColorTheme,
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.HELP_TEXT, ".").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: "small"
@@ -120,6 +124,7 @@ UTBanner.propTypes = {
   colorTheme: oneOf(Object.values(COLOR_THEMES)),
   dataTestId: string,
   description: string,
+  descriptionProps: object,
   helpText: string,
   Icon: oneOfType([elementType, string]),
   iconPlacement: oneOf(Object.values(PLACEMENTS)),
@@ -128,6 +133,7 @@ UTBanner.propTypes = {
   secondaryButton: buttonType,
   size: oneOf(Object.values(SIZES)),
   title: string,
+  titleProps: object,
   variant: oneOf(Object.values(VARIANTS))
 };
 export default UTBanner;

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

@@ -40,6 +40,10 @@ export default {
       control: 'text',
       description: 'Optional body text shown below the title (small).'
     },
+    descriptionProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the description.'
+    },
     helpText: {
       control: 'text',
       description: 'Optional secondary text shown below the description (small, gray).'
@@ -74,6 +78,10 @@ export default {
       control: 'text',
       description: 'Main text of the banner.'
     },
+    titleProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the title.'
+    },
     variant: {
       control: {
         type: 'select'