@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTAlert/README.md

@@ -0,0 +1,100 @@
+# UTAlert
+
+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.
+
+---
+
+## Props
+
+### `content` (shape)
+
+Objeto que controla el estado y la apariencia de la alerta.
+
+| Campo | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
+| `open` | `boolean` | `false` | Controla si la alerta está visible. |
+| `type` | `'error' \| 'info' \| 'success' \| 'warning'` | `undefined` | Tipo de alerta. Determina el ícono y el color. |
+| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
+| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
+| `onClose` | `function` | `undefined` | Callback ejecutado al cerrar la alerta. |
+
+### Props de nivel superior
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `withoutIcon` | `boolean` | `undefined` | Si es `true`, oculta el ícono del tipo de alerta. |
+| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
+| `closeDataTestId` | `string` | `undefined` | Identificador de test para el botón de cierre. |
+| `labelDataTestId` | `string` | `undefined` | Identificador de test para el label del mensaje. |
+
+---
+
+## Uso básico
+
+```jsx
+import { UTAlert } from '@widergy/energy-ui';
+
+const MiComponente = () => (
+  <UTAlert
+    content={{
+      message: 'Operación completada exitosamente.',
+      open: true,
+      type: 'success'
+    }}
+  />
+);
+```
+
+---
+
+## Uso con AlertHandler
+
+El patrón recomendado es inicializar `AlertHandler` una sola vez en el componente raíz y luego llamarlo desde cualquier parte de la aplicación.
+
+```jsx
+import { useEffect, useState } from 'react';
+import { UTAlert, AlertHandler } from '@widergy/energy-ui';
+
+const AppRoot = () => {
+  const [alert, setAlert] = useState();
+
+  useEffect(() => {
+    AlertHandler.init({ setState: setAlert });
+  }, []);
+
+  return (
+    <>
+      <UTAlert content={alert} />
+      {/* resto de la app */}
+    </>
+  );
+};
+
+// Desde cualquier otro componente o servicio:
+AlertHandler.success('Guardado correctamente.');
+AlertHandler.error('Ocurrió un error. Intentá nuevamente.');
+AlertHandler.info('Hay actualizaciones disponibles.');
+AlertHandler.warning('Esta acción no se puede deshacer.');
+```
+
+### Métodos de AlertHandler
+
+| Método | Descripción |
+| ------ | ----------- |
+| `init({ setState, duration })` | Inicializa el handler. `setState` es el setter de React. `duration` es la duración por defecto en ms (default: 5000). |
+| `success(message, topRight?, timeDuration?)` | Muestra una alerta de éxito. |
+| `error(message, topRight?, timeDuration?)` | Muestra una alerta de error. |
+| `info(message, topRight?, timeDuration?)` | Muestra una alerta informativa. |
+| `warning(message, topRight?, timeDuration?)` | Muestra una alerta de advertencia. |
+
+---
+
+## Variantes de tipo
+
+| Tipo | Ícono | Descripción |
+| ---- | ----- | ----------- |
+| `success` | CheckCircle | Para operaciones exitosas. |
+| `error` | Error | Para fallas o errores críticos. |
+| `info` | Info | Para notificaciones informativas. |
+| `warning` | Warning | Para acciones que requieren atención. |

package/dist/components/UTAlert/index.js

@@ -1 +1,150 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _CheckCircle=_interopRequireDefault(require("@material-ui/icons/CheckCircle")),_Close=_interopRequireDefault(require("@material-ui/icons/Close")),_Error=_interopRequireDefault(require("@material-ui/icons/Error")),_IconButton=_interopRequireDefault(require("@material-ui/core/IconButton")),_Info=_interopRequireDefault(require("@material-ui/icons/Info")),_react=_interopRequireWildcard(require("react")),_Slide=_interopRequireDefault(require("@material-ui/core/Slide")),_Snackbar=_interopRequireDefault(require("@material-ui/core/Snackbar")),_Warning=_interopRequireDefault(require("@material-ui/icons/Warning")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_testIds=require("../../constants/testIds"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_theme=require("./theme");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)}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{snackBar:snackBar}=_testIds.TEST_IDS,variantIcon={error:_Error.default,info:_Info.default,success:_CheckCircle.default,warning:_Warning.default};class UTAlert extends _react.PureComponent{constructor(){super(...arguments),_defineProperty(this,"handleClose",(_,reason)=>{if("clickaway"===reason)return;const{content:alert}=this.props;return alert.onClose&&alert.onClose()}),_defineProperty(this,"selectAlertType",()=>{const{content:alert,classes:classes}=this.props;switch(alert.type){case"info":return classes.info;case"error":return classes.error;case"warning":return classes.warning;default:return classes.success}})}render(){const{classes:classes={},closeDataTestId:closeDataTestId=snackBar.closeButton,content:alert={},labelDataTestId:labelDataTestId="".concat(snackBar.label,".").concat(alert.type),withoutIcon:withoutIcon}=this.props,anchor={horizontal:alert.topRight?"right":"left",vertical:alert.topRight?"top":"bottom"},transition={direction:alert.topRight?"left":"up"},AlertTypeIcon=alert.type&&variantIcon[alert.type];return _react.default.createElement(_Snackbar.default,{action:[_react.default.createElement(_IconButton.default,{classes:{root:classes.action},color:"inherit","data-testid":closeDataTestId,key:"close",onClick:this.handleClose},_react.default.createElement(_Close.default,null))],anchorOrigin:anchor,autoHideDuration:alert.timeDuration,classes:{root:_stylesModule.default.snackbarRoot},ContentProps:{className:"".concat(_stylesModule.default.snackbarContent," ").concat(classes.snackbarContent," ").concat(this.selectAlertType()),classes:{action:_stylesModule.default.action,message:_stylesModule.default.message}},message:_react.default.createElement("div",{className:"".concat(_stylesModule.default.content," ").concat(classes.content)},!withoutIcon&&AlertTypeIcon&&_react.default.createElement(AlertTypeIcon,{classes:{root:_stylesModule.default.alertTypeIcon}}),_react.default.createElement(_UTLabel.default,{colorTheme:"light",withMarkdown:!0,dataTestId:labelDataTestId},alert.message)),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,timeDuration:_propTypes.number,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:{message:void 0,open:!1,timeDuration:void 0,topRight:void 0,type:void 0},classes:{}};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle,_theme.retrieveMuiTheme)(UTAlert);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _react = _interopRequireWildcard(require("react"));
+var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
+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 _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); }
+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 {
+  snackBar
+} = _testIds.TEST_IDS;
+const variantIcon = {
+  error: _Error.default,
+  info: _Info.default,
+  success: _CheckCircle.default,
+  warning: _Warning.default
+};
+class UTAlert extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleClose", (_, reason) => {
+      // In case you don't want to dismiss notification clicking away
+      if (reason === 'clickaway') {
+        return;
+      }
+      const {
+        content: alert
+      } = this.props;
+      return alert.onClose && alert.onClose();
+    });
+    _defineProperty(this, "selectAlertType", () => {
+      const {
+        content: alert,
+        classes
+      } = this.props;
+      switch (alert.type) {
+        case 'info':
+          return classes.info;
+        case 'error':
+          return classes.error;
+        case 'warning':
+          return classes.warning;
+        default:
+          return classes.success;
+      }
+    });
+  }
+  render() {
+    const {
+      classes = {},
+      closeDataTestId = snackBar.closeButton,
+      content: alert = {},
+      labelDataTestId = "".concat(snackBar.label, ".").concat(alert.type),
+      withoutIcon
+    } = this.props;
+    const anchor = {
+      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,
+      autoHideDuration: alert.timeDuration,
+      classes: {
+        root: _stylesModule.default.snackbarRoot
+      },
+      ContentProps: {
+        className: "".concat(_stylesModule.default.snackbarContent, " ").concat(classes.snackbarContent, " ").concat(this.selectAlertType()),
+        classes: {
+          action: _stylesModule.default.action,
+          message: _stylesModule.default.message
+        }
+      },
+      message: /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
+      }, !withoutIcon && AlertTypeIcon && /*#__PURE__*/_react.default.createElement(AlertTypeIcon, {
+        classes: {
+          root: _stylesModule.default.alertTypeIcon
+        }
+      }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        colorTheme: "light",
+        withMarkdown: true,
+        dataTestId: labelDataTestId
+      }, alert.message)),
+      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,
+    timeDuration: _propTypes.number,
+    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: {
+    message: undefined,
+    open: false,
+    timeDuration: undefined,
+    topRight: undefined,
+    type: undefined
+  },
+  classes: {}
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTAlert);

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

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TopRight = exports.Test = exports.SinIcono = exports.Playground = exports.ConMarkdown = exports.AllTypes = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _UTButton = _interopRequireDefault(require("../../UTButton"));
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+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); }
+const composeContent = _ref => {
+  let {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  } = _ref;
+  return {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  };
+};
+const AllTypesDemo = () => {
+  const [alertState, setAlertState] = (0, _react.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.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px'
+    }
+  }, _storiesConstants.ALERT_TYPES.map(type => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    key: type,
+    onClick: () => showAlert(type),
+    variant: "outlined"
+  }, type)), /*#__PURE__*/_react.default.createElement(_.default, {
+    content: {
+      ...alertState,
+      onClose: handleClose
+    }
+  }));
+};
+var _default = exports.default = {
+  args: {
+    message: 'Este es un mensaje de alerta de ejemplo.',
+    open: true,
+    timeDuration: undefined,
+    topRight: false,
+    type: 'success',
+    withoutIcon: false
+  },
+  argTypes: _storiesConstants.ARG_TYPES,
+  component: _.default,
+  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'
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  render: _ref2 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const AllTypes = exports.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.default.createElement(AllTypesDemo, null)
+};
+const TopRight = exports.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.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const SinIcono = exports.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.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const ConMarkdown = exports.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.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const Test = exports.Test = {
+  name: 'Test',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Story para el Test Runner. Renderiza los cuatro tipos de alerta simultáneamente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _storiesConstants.ALERT_TYPES.map(type => /*#__PURE__*/_react.default.createElement(_.default, {
+    key: type,
+    content: {
+      message: "Alerta ".concat(type),
+      open: true,
+      type
+    }
+  })))
+};

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

@@ -1 +1,107 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ARG_TYPES=exports.ALERT_TYPES=void 0;var _utils=require("stories/utils");const ALERT_TYPES=exports.ALERT_TYPES=["error","info","success","warning"],ARG_TYPES=exports.ARG_TYPES={closeDataTestId:{control:!1,description:"Identificador de test para el botón de cierre.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},labelDataTestId:{control:!1,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:(0,_utils.joinArgTypes)(ALERT_TYPES)}}},withoutIcon:{control:"boolean",description:"Si es `true`, oculta el ícono del tipo de alerta.",table:{defaultValue:{summary:"undefined"},type:{summary:"boolean"}}}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = exports.ALERT_TYPES = void 0;
+var _utils = require("stories/utils");
+const ALERT_TYPES = exports.ALERT_TYPES = ['error', 'info', 'success', 'warning'];
+const ARG_TYPES = exports.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: (0, _utils.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/components/UTAlert/theme.js

@@ -1 +1,78 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=exports.retrieveMuiTheme=void 0;var _seamlessImmutable=require("seamless-immutable"),_styles=require("@material-ui/core/styles"),_colorsModule=_interopRequireDefault(require("../../scss/variables/colors.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const retrieveStyle=_ref=>{var _theme$Palette,_theme$Palette2,_theme$Palette3,_theme$Palette4;let{theme:theme}=_ref;return{error:{backgroundColor:(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.error["04"])||_colorsModule.default.notificationError},info:{backgroundColor:(null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2?void 0:_theme$Palette2.information["04"])||_colorsModule.default.notificationInfo},success:{backgroundColor:(null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.success["04"])||_colorsModule.default.notificationSuccess},warning:{backgroundColor:(null===(_theme$Palette4=theme.Palette)||void 0===_theme$Palette4?void 0:_theme$Palette4.warning["04"])||_colorsModule.default.notificationWarning},action:{padding:(0,_seamlessImmutable.getIn)(theme,["UTAlert","action","padding"]),margin:(0,_seamlessImmutable.getIn)(theme,["UTAlert","action","margin"])},snackbarContent:{minWidth:(0,_seamlessImmutable.getIn)(theme,["UTAlert","content","minWidth"])},content:{fontSize:(0,_seamlessImmutable.getIn)(theme,["UTAlert","content","fontSize"]),fontWeight:(0,_seamlessImmutable.getIn)(theme,["UTAlert","content","fontWeight"])}}};exports.retrieveStyle=retrieveStyle;const retrieveMuiTheme=theme=>(0,_styles.createTheme)({typography:{fontFamily:(0,_seamlessImmutable.getIn)(theme,["Fonts","fontFamily"])},overrides:{MuiSnackbarContent:{root:{minWidth:288,maxWidth:568,"@media (max-width : 767px)":{borderRadius:0,width:"100%",maxWidth:"initial"}}},MuiSnackbar:{root:{"@media (max-width : 767px)":{maxWidth:"initial",width:"100%",left:0,right:0}},anchorOriginBottomLeft:{bottom:0,"@media (max-width : 767px)":{bottom:0,left:0}}}}});exports.retrieveMuiTheme=retrieveMuiTheme;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
+var _seamlessImmutable = require("seamless-immutable");
+var _styles = require("@material-ui/core/styles");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4;
+  let {
+    theme
+  } = _ref;
+  return {
+    error: {
+      backgroundColor: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.error['04']) || _colorsModule.default.notificationError
+    },
+    info: {
+      backgroundColor: ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.information['04']) || _colorsModule.default.notificationInfo
+    },
+    success: {
+      backgroundColor: ((_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.success['04']) || _colorsModule.default.notificationSuccess
+    },
+    warning: {
+      backgroundColor: ((_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.warning['04']) || _colorsModule.default.notificationWarning
+    },
+    action: {
+      padding: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'action', 'padding']),
+      margin: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'action', 'margin'])
+    },
+    snackbarContent: {
+      minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'minWidth'])
+    },
+    content: {
+      fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'fontSize']),
+      fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTAlert', 'content', 'fontWeight'])
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;
+const retrieveMuiTheme = theme => (0, _styles.createTheme)({
+  typography: {
+    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiSnackbarContent: {
+      root: {
+        minWidth: 288,
+        maxWidth: 568,
+        '@media (max-width : 767px)': {
+          borderRadius: 0,
+          width: '100%',
+          maxWidth: 'initial'
+        }
+      }
+    },
+    MuiSnackbar: {
+      root: {
+        '@media (max-width : 767px)': {
+          maxWidth: 'initial',
+          width: '100%',
+          left: 0,
+          right: 0
+        }
+      },
+      anchorOriginBottomLeft: {
+        bottom: 0,
+        '@media (max-width : 767px)': {
+          bottom: 0,
+          left: 0
+        }
+      }
+    }
+  }
+});
+exports.retrieveMuiTheme = retrieveMuiTheme;