@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTStatusMessage/index.js

@@ -1 +1,114 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireDefault(require("react")),_UTButton=_interopRequireDefault(require("../UTButton")),_UTIcon=_interopRequireDefault(require("../UTIcon")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTLoading=_interopRequireDefault(require("../UTLoading")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_testIds=require("../../constants/testIds"),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}const{statusMessage:statusMessage}=_testIds.TEST_IDS,UTStatusMessage=_ref=>{let{children:children,classes:classes,colorTheme:colorTheme=_constants.COLOR_THEMES.DEFAULT,description:description,descriptionProps:descriptionProps,HeaderComponent:HeaderComponent,helpText:helpText,helpTextProps:helpTextProps,icon:icon="IconInfoCircle",iconProps:iconProps={size:40},loading:loading,primaryAction:primaryAction,primaryActionProps:primaryActionProps,primaryActionText:primaryActionText,secondaryAction:secondaryAction,secondaryActionProps:secondaryActionProps,secondaryActionText:secondaryActionText,showHeader:showHeader=!0,title:title,titleProps:titleProps}=_ref;return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(classes.container)},loading?_react.default.createElement(_UTLoading.default,{loading:!0,text:null}):showHeader?_react.default.createElement("div",{className:classes.banner},HeaderComponent?_react.default.createElement(HeaderComponent,null):_react.default.createElement("div",{className:classes.iconContainer},_react.default.createElement(_UTIcon.default,_extends({name:icon,colorTheme:_constants.ICON_COLOR_THEMES[colorTheme],dataTestId:statusMessage.icon},iconProps)))):null,_react.default.createElement("div",{className:"".concat(_stylesModule.default.content," ").concat(classes.content)},(title||description||helpText)&&_react.default.createElement("div",{className:_stylesModule.default.section},title&&_react.default.createElement(_UTLabel.default,_extends({className:_stylesModule.default.label,dataTestId:statusMessage.title,variant:"title3",weight:"medium"},titleProps),title),description&&_react.default.createElement(_UTLabel.default,_extends({className:_stylesModule.default.label,colorTheme:"gray",dataTestId:statusMessage.description,withMarkdown:!0,variant:"body"},descriptionProps),description),helpText&&_react.default.createElement(_UTLabel.default,_extends({className:_stylesModule.default.label,colorTheme:"gray",dataTestId:statusMessage.helperText,variant:"small"},helpTextProps),helpText)),children,(primaryAction||secondaryAction)&&_react.default.createElement("div",{className:_stylesModule.default.section},primaryAction&&_react.default.createElement(_UTButton.default,_extends({onClick:primaryAction},primaryActionProps),primaryActionText),secondaryAction&&_react.default.createElement(_UTButton.default,_extends({onClick:secondaryAction,variant:"text"},secondaryActionProps),secondaryActionText))))};UTStatusMessage.propTypes={children:_propTypes.element,classes:_propTypes.object,colorTheme:_propTypes.string,description:_propTypes.string,descriptionProps:_propTypes.object,HeaderComponent:_propTypes.element,helpText:_propTypes.string,helpTextProps:_propTypes.object,icon:_propTypes.string,iconProps:_propTypes.object,loading:_propTypes.bool,primaryAction:_propTypes.func,primaryActionProps:_propTypes.object,primaryActionText:_propTypes.string,secondaryAction:_propTypes.func,secondaryActionProps:_propTypes.object,secondaryActionText:_propTypes.string,showHeader:_propTypes.bool,title:_propTypes.string,titleProps:_propTypes.object};const UTStatusMessageWithTheme=(0,_WithTheme.default)(_theme.retrieveStyle)(UTStatusMessage);UTStatusMessageWithTheme.displayName="UTStatusMessage";var _default=exports.default=UTStatusMessageWithTheme;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTLoading = _interopRequireDefault(require("../UTLoading"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _testIds = require("../../constants/testIds");
+var _constants = require("./constants");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const {
+  statusMessage
+} = _testIds.TEST_IDS;
+const UTStatusMessage = _ref => {
+  let {
+    children,
+    classes,
+    colorTheme = _constants.COLOR_THEMES.DEFAULT,
+    description,
+    descriptionProps,
+    HeaderComponent,
+    helpText,
+    helpTextProps,
+    icon = 'IconInfoCircle',
+    iconProps = {
+      size: 40
+    },
+    loading,
+    primaryAction,
+    primaryActionProps,
+    primaryActionText,
+    secondaryAction,
+    secondaryActionProps,
+    secondaryActionText,
+    showHeader = true,
+    title,
+    titleProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
+  }, loading ? /*#__PURE__*/_react.default.createElement(_UTLoading.default, {
+    loading: true,
+    text: null
+  }) : showHeader ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.banner
+  }, HeaderComponent ? /*#__PURE__*/_react.default.createElement(HeaderComponent, null) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    name: icon,
+    colorTheme: _constants.ICON_COLOR_THEMES[colorTheme],
+    dataTestId: statusMessage.icon
+  }, iconProps)))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.content, " ").concat(classes.content)
+  }, (title || description || helpText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.section
+  }, title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    dataTestId: statusMessage.title,
+    variant: "title3",
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    colorTheme: "gray",
+    dataTestId: statusMessage.description,
+    withMarkdown: true,
+    variant: "body"
+  }, descriptionProps), description), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: _stylesModule.default.label,
+    colorTheme: "gray",
+    dataTestId: statusMessage.helperText,
+    variant: "small"
+  }, helpTextProps), helpText)), children, (primaryAction || secondaryAction) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.section
+  }, primaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: primaryAction
+  }, primaryActionProps), primaryActionText), secondaryAction && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    onClick: secondaryAction,
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText))));
+};
+UTStatusMessage.propTypes = {
+  children: _propTypes.element,
+  classes: _propTypes.object,
+  colorTheme: _propTypes.string,
+  description: _propTypes.string,
+  descriptionProps: _propTypes.object,
+  HeaderComponent: _propTypes.element,
+  helpText: _propTypes.string,
+  helpTextProps: _propTypes.object,
+  icon: _propTypes.string,
+  iconProps: _propTypes.object,
+  loading: _propTypes.bool,
+  primaryAction: _propTypes.func,
+  primaryActionProps: _propTypes.object,
+  primaryActionText: _propTypes.string,
+  secondaryAction: _propTypes.func,
+  secondaryActionProps: _propTypes.object,
+  secondaryActionText: _propTypes.string,
+  showHeader: _propTypes.bool,
+  title: _propTypes.string,
+  titleProps: _propTypes.object
+};
+const UTStatusMessageWithTheme = (0, _WithTheme.default)(_theme.retrieveStyle)(UTStatusMessage);
+UTStatusMessageWithTheme.displayName = 'UTStatusMessage';
+var _default = exports.default = UTStatusMessageWithTheme;

package/dist/components/UTStatusMessage/stories/UTStatusMessage.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Playground = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _test = require("@storybook/test");
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const renderStory = _ref => {
+  let {
+    iconSize,
+    showPrimaryAction,
+    showSecondaryAction,
+    primaryAction,
+    secondaryAction,
+    ...args
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    iconProps: iconSize ? {
+      size: iconSize
+    } : undefined,
+    primaryAction: showPrimaryAction ? primaryAction : undefined,
+    secondaryAction: showSecondaryAction ? secondaryAction : undefined
+  }));
+};
+var _default = exports.default = {
+  title: 'Energy-UI/UTStatusMessage',
+  component: _.default,
+  args: {
+    children: undefined,
+    ..._storiesConstants.COMMON_ARGS
+  },
+  argTypes: {
+    ..._storiesConstants.COMMON_ARG_TYPES
+  },
+  parameters: {
+    ..._storiesConstants.COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  },
+  render: renderStory
+};
+const Playground = exports.Playground = {
+  args: {
+    colorTheme: 'default',
+    description: 'Descripción adicional con más contexto sobre el estado.',
+    icon: 'IconInfoCircle',
+    iconSize: undefined,
+    showPrimaryAction: true,
+    primaryAction: (0, _test.fn)(),
+    primaryActionText: 'Acción primaria',
+    primaryActionProps: undefined,
+    showSecondaryAction: true,
+    secondaryAction: (0, _test.fn)(),
+    secondaryActionText: 'Acción secundaria',
+    secondaryActionProps: undefined,
+    showHeader: true,
+    title: 'Mensaje de estado'
+  },
+  name: 'Playground'
+};

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

@@ -1 +1,301 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.COMMON_PARAMETERS=exports.COMMON_ARG_TYPES=exports.COMMON_ARGS=void 0;var _constants=require("../constants");const COMMON_ARG_TYPES=exports.COMMON_ARG_TYPES={children:{control:!1,description:"Contenido adicional renderizado dentro del componente.",table:{defaultValue:{summary:"undefined"},type:{summary:"node"}}},classes:{control:!1,description:"Clases personalizadas para sobrescribir el tema del componente.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},colorTheme:{control:"select",description:"Tema de color del componente.",options:Object.values(_constants.COLOR_THEMES),table:{defaultValue:{summary:_constants.COLOR_THEMES.DEFAULT},type:{summary:"string"}}},description:{control:"text",description:"Texto descriptivo secundario. Soporta markdown.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},descriptionProps:{control:!1,description:"Props adicionales para el componente UTLabel de descripción.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},HeaderComponent:{control:!1,description:"Componente personalizado para reemplazar el header (ícono) por defecto.",table:{defaultValue:{summary:"undefined"},type:{summary:"elementType"}}},helpText:{control:"text",description:"Texto de ayuda adicional mostrado debajo de la descripción.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},helpTextProps:{control:!1,description:"Props adicionales para el componente UTLabel de helpText.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},icon:{control:"text",description:"Nombre del ícono Tabler a mostrar en el header.",table:{defaultValue:{summary:"IconInfoCircle"},type:{summary:"string"}}},iconProps:{control:!1,description:"Props adicionales para el componente UTIcon.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},iconSize:{control:"number",description:"Tamaño del ícono en píxeles. Mapea a `iconProps.size`.",table:{defaultValue:{summary:"undefined"},type:{summary:"number"}}},loading:{control:"boolean",description:"Si es `true`, muestra un spinner en lugar del contenido.",table:{defaultValue:{summary:"undefined"},type:{summary:"boolean"}}},primaryAction:{control:!1,description:"Callback ejecutado al hacer clic en el botón primario.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},primaryActionProps:{control:"object",description:"Props adicionales para el UTButton de acción primaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},primaryActionText:{control:"text",description:"Texto del botón de acción primaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},secondaryAction:{control:!1,description:"Callback ejecutado al hacer clic en el botón secundario.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},secondaryActionProps:{control:"object",description:"Props adicionales para el UTButton de acción secundaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},secondaryActionText:{control:"text",description:"Texto del botón de acción secundaria.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},showHeader:{control:"boolean",description:"Si es `true`, muestra el header con el ícono o el HeaderComponent.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}},title:{control:"text",description:"Título principal del mensaje de estado.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},titleProps:{control:!1,description:"Props adicionales para el componente UTLabel del título.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},showPrimaryAction:{control:"boolean",description:"Activa o desactiva el botón de acción primaria en el Playground. Mapea a `primaryAction`.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}},showSecondaryAction:{control:"boolean",description:"Activa o desactiva el botón de acción secundaria en el Playground. Mapea a `secondaryAction`.",table:{defaultValue:{summary:!0},type:{summary:"boolean"}}}},COMMON_ARGS=exports.COMMON_ARGS={colorTheme:_constants.COLOR_THEMES.DEFAULT,loading:!1,showHeader:!0},COMMON_PARAMETERS=exports.COMMON_PARAMETERS={controls:{exclude:["classes","descriptionProps","HeaderComponent","helpTextProps","iconProps","primaryAction","secondaryAction","titleProps"]},docs:{description:{component:"Componente de mensaje de estado que muestra un ícono, título, descripción y acciones opcionales. Soporta múltiples temas de color y un estado de carga."}}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMMON_PARAMETERS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = void 0;
+var _constants = require("../constants");
+const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
+  children: {
+    control: false,
+    description: 'Contenido adicional renderizado dentro del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del componente.',
+    options: Object.values(_constants.COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: _constants.COLOR_THEMES.DEFAULT
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  description: {
+    control: 'text',
+    description: 'Texto descriptivo secundario. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  descriptionProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  HeaderComponent: {
+    control: false,
+    description: 'Componente personalizado para reemplazar el header (ícono) por defecto.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'elementType'
+      }
+    }
+  },
+  helpText: {
+    control: 'text',
+    description: 'Texto de ayuda adicional mostrado debajo de la descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  helpTextProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de helpText.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  icon: {
+    control: 'text',
+    description: 'Nombre del ícono Tabler a mostrar en el header.',
+    table: {
+      defaultValue: {
+        summary: 'IconInfoCircle'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  iconProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTIcon.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  iconSize: {
+    control: 'number',
+    description: 'Tamaño del ícono en píxeles. Mapea a `iconProps.size`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra un spinner en lugar del contenido.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  primaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón primario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  primaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  primaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  secondaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón secundario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  secondaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  secondaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  showHeader: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra el header con el ícono o el HeaderComponent.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  title: {
+    control: 'text',
+    description: 'Título principal del mensaje de estado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  titleProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel del título.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  showPrimaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción primaria en el Playground. Mapea a `primaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  showSecondaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción secundaria en el Playground. Mapea a `secondaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};
+const COMMON_ARGS = exports.COMMON_ARGS = {
+  colorTheme: _constants.COLOR_THEMES.DEFAULT,
+  loading: false,
+  showHeader: true
+};
+const COMMON_PARAMETERS = exports.COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'descriptionProps', 'HeaderComponent', 'helpTextProps', 'iconProps', 'primaryAction', 'secondaryAction', 'titleProps']
+  },
+  docs: {
+    description: {
+      component: 'Componente de mensaje de estado que muestra un ícono, título, descripción y acciones opcionales. Soporta múltiples temas de color y un estado de carga.'
+    }
+  }
+};

package/dist/components/UTStatusMessage/theme.js

@@ -1 +1,78 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _constants=require("./constants");const getIconBackgroundColor=(colorTheme,theme)=>{var _theme$Palette,_theme$Palette2,_theme$Palette3,_theme$Palette4,_theme$Palette5,_theme$Palette6,_theme$Palette7,_theme$Palette8,_theme$Palette9,_theme$Palette0,_theme$Palette1,_theme$Palette10,_theme$Palette11;return{[_constants.COLOR_THEMES.ACCENT]:(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette||null===(_theme$Palette=_theme$Palette.actions)||void 0===_theme$Palette?void 0:_theme$Palette.accent["01"])||(null===(_theme$Palette2=theme.Palette)||void 0===_theme$Palette2?void 0:_theme$Palette2.accent["01"]),[_constants.COLOR_THEMES.DEFAULT]:null===(_theme$Palette3=theme.Palette)||void 0===_theme$Palette3?void 0:_theme$Palette3.light["03"],[_constants.COLOR_THEMES.ERROR]:null===(_theme$Palette4=theme.Palette)||void 0===_theme$Palette4?void 0:_theme$Palette4.error["01"],[_constants.COLOR_THEMES.GRADIENT]:"light",[_constants.COLOR_THEMES.GRAY]:null===(_theme$Palette5=theme.Palette)||void 0===_theme$Palette5?void 0:_theme$Palette5.light["03"],[_constants.COLOR_THEMES.IDENTITY_1]:null===(_theme$Palette6=theme.Palette)||void 0===_theme$Palette6||null===(_theme$Palette6=_theme$Palette6.identitySolid)||void 0===_theme$Palette6?void 0:_theme$Palette6["01"],[_constants.COLOR_THEMES.IDENTITY_2]:null===(_theme$Palette7=theme.Palette)||void 0===_theme$Palette7||null===(_theme$Palette7=_theme$Palette7.identitySolid)||void 0===_theme$Palette7?void 0:_theme$Palette7["02"],[_constants.COLOR_THEMES.IDENTITY_3]:null===(_theme$Palette8=theme.Palette)||void 0===_theme$Palette8||null===(_theme$Palette8=_theme$Palette8.identitySolid)||void 0===_theme$Palette8?void 0:_theme$Palette8["03"],[_constants.COLOR_THEMES.IDENTITY_4]:null===(_theme$Palette9=theme.Palette)||void 0===_theme$Palette9||null===(_theme$Palette9=_theme$Palette9.identitySolid)||void 0===_theme$Palette9?void 0:_theme$Palette9["04"],[_constants.COLOR_THEMES.INFO]:null===(_theme$Palette0=theme.Palette)||void 0===_theme$Palette0?void 0:_theme$Palette0.information["02"],[_constants.COLOR_THEMES.NEGATIVE]:null===(_theme$Palette1=theme.Palette)||void 0===_theme$Palette1?void 0:_theme$Palette1.light["01"],[_constants.COLOR_THEMES.SUCCESS]:null===(_theme$Palette10=theme.Palette)||void 0===_theme$Palette10?void 0:_theme$Palette10.success["02"],[_constants.COLOR_THEMES.WARNING]:null===(_theme$Palette11=theme.Palette)||void 0===_theme$Palette11?void 0:_theme$Palette11.warning["02"]}[colorTheme]},getBannerBackgroundColor=(colorTheme,theme)=>{var _theme$Palette12,_theme$Palette13,_theme$Palette14,_theme$Palette15,_theme$Palette16,_theme$Palette17,_theme$Palette18,_theme$Palette19,_theme$Palette20,_theme$Palette21,_theme$Palette22,_theme$Palette23,_theme$Palette24;return{[_constants.COLOR_THEMES.ACCENT]:(null===(_theme$Palette12=theme.Palette)||void 0===_theme$Palette12||null===(_theme$Palette12=_theme$Palette12.actions)||void 0===_theme$Palette12?void 0:_theme$Palette12.accent["03"])||(null===(_theme$Palette13=theme.Palette)||void 0===_theme$Palette13?void 0:_theme$Palette13.accent["03"]),[_constants.COLOR_THEMES.DEFAULT]:null===(_theme$Palette14=theme.Palette)||void 0===_theme$Palette14?void 0:_theme$Palette14.gray["05"],[_constants.COLOR_THEMES.ERROR]:null===(_theme$Palette15=theme.Palette)||void 0===_theme$Palette15?void 0:_theme$Palette15.error["03"],[_constants.COLOR_THEMES.GRADIENT]:null,[_constants.COLOR_THEMES.GRAY]:null===(_theme$Palette16=theme.Palette)||void 0===_theme$Palette16?void 0:_theme$Palette16.gray["03"],[_constants.COLOR_THEMES.IDENTITY_1]:null===(_theme$Palette17=theme.Palette)||void 0===_theme$Palette17||null===(_theme$Palette17=_theme$Palette17.identitySolid)||void 0===_theme$Palette17?void 0:_theme$Palette17["01"],[_constants.COLOR_THEMES.IDENTITY_2]:null===(_theme$Palette18=theme.Palette)||void 0===_theme$Palette18||null===(_theme$Palette18=_theme$Palette18.identitySolid)||void 0===_theme$Palette18?void 0:_theme$Palette18["02"],[_constants.COLOR_THEMES.IDENTITY_3]:null===(_theme$Palette19=theme.Palette)||void 0===_theme$Palette19||null===(_theme$Palette19=_theme$Palette19.identitySolid)||void 0===_theme$Palette19?void 0:_theme$Palette19["03"],[_constants.COLOR_THEMES.IDENTITY_4]:null===(_theme$Palette20=theme.Palette)||void 0===_theme$Palette20||null===(_theme$Palette20=_theme$Palette20.identitySolid)||void 0===_theme$Palette20?void 0:_theme$Palette20["04"],[_constants.COLOR_THEMES.INFO]:null===(_theme$Palette21=theme.Palette)||void 0===_theme$Palette21?void 0:_theme$Palette21.information["03"],[_constants.COLOR_THEMES.NEGATIVE]:null===(_theme$Palette22=theme.Palette)||void 0===_theme$Palette22?void 0:_theme$Palette22.light["01"],[_constants.COLOR_THEMES.SUCCESS]:null===(_theme$Palette23=theme.Palette)||void 0===_theme$Palette23?void 0:_theme$Palette23.success["03"],[_constants.COLOR_THEMES.WARNING]:null===(_theme$Palette24=theme.Palette)||void 0===_theme$Palette24?void 0:_theme$Palette24.warning["03"]}[colorTheme]},retrieveStyle=_ref=>{var _theme$Palette25,_theme$Palette26;let{showBanner:showBanner=!0,theme:theme,colorTheme:colorTheme=_constants.COLOR_THEMES.DEFAULT,iconProps:iconProps={}}=_ref;const gradient="linear-gradient(45deg, ".concat(null===(_theme$Palette25=theme.Palette)||void 0===_theme$Palette25||null===(_theme$Palette25=_theme$Palette25.identityGradient)||void 0===_theme$Palette25?void 0:_theme$Palette25["01"]," 0%, ").concat(null===(_theme$Palette26=theme.Palette)||void 0===_theme$Palette26||null===(_theme$Palette26=_theme$Palette26.identityGradient)||void 0===_theme$Palette26?void 0:_theme$Palette26["02"]," 100%);"),{size:size=40}=iconProps;return{iconContainer:{alignItems:"center",background:colorTheme!==_constants.COLOR_THEMES.GRADIENT||showBanner?"":gradient,backgroundColor:getIconBackgroundColor(colorTheme,theme),borderRadius:100,display:"flex",height:1.85*size,justifyContent:"center",width:1.85*size},banner:{alignItems:"center",background:colorTheme===_constants.COLOR_THEMES.GRADIENT&&showBanner?gradient:"",backgroundColor:showBanner?getBannerBackgroundColor(colorTheme,theme):"transparent",display:"flex",justifyContent:"center",padding:"12px 0",width:"100%"}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const getIconBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette0, _theme$Palette1, _theme$Palette10, _theme$Palette11;
+  return {
+    [_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01']) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['01']),
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['03'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.error['01'],
+    [_constants.COLOR_THEMES.GRADIENT]: 'light',
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['02'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['02'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['02']
+  }[colorTheme];
+};
+const getBannerBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette12, _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
+  return {
+    [_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 || (_theme$Palette12 = _theme$Palette12.actions) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.accent['03']) || ((_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03']),
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
+    [_constants.COLOR_THEMES.GRADIENT]: null,
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
+  }[colorTheme];
+};
+const retrieveStyle = _ref => {
+  var _theme$Palette25, _theme$Palette26;
+  let {
+    showBanner = true,
+    theme,
+    colorTheme = _constants.COLOR_THEMES.DEFAULT,
+    iconProps = {}
+  } = _ref;
+  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
+  const {
+    size = 40
+  } = iconProps;
+  return {
+    iconContainer: {
+      alignItems: 'center',
+      background: colorTheme === _constants.COLOR_THEMES.GRADIENT && !showBanner ? gradient : '',
+      backgroundColor: getIconBackgroundColor(colorTheme, theme),
+      borderRadius: 100,
+      display: 'flex',
+      height: size * 1.85,
+      justifyContent: 'center',
+      width: size * 1.85
+    },
+    banner: {
+      alignItems: 'center',
+      background: colorTheme === _constants.COLOR_THEMES.GRADIENT && showBanner ? gradient : '',
+      backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '12px 0',
+      width: '100%'
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTStepper/README.md

@@ -0,0 +1,22 @@
+# UTStepper
+
+### Description
+
+This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
+
+## Props
+
+| Name         | Type             | Default | Description                                                                                                                                                                                                                                                                                   |
+| ------------ | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes      | object of string |         | Classes returned by UTStepper's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                  |
+| classNames   | object of string |         | Additional classes.                                                                                                                                                                                                                                                                           |
+| currentStage | number           |         | Represents which stage id will be active.                                                                                                                                                                                                                                                     |
+| stages       | stageType        |         | Defines the structure of the stepper. It is required for each stage inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator.            |
+| stepperSize  | 'S' \| 'L'       | 'S'     | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'. |
+| withPadding  | bool             |         | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center.                                                                                                                                           |
+
+### Custom types
+
+| Type      | Shape                                                     |
+| --------- | --------------------------------------------------------- |
+| stageType | arrayOf( `{ id: number, label: string, Icon: element }` ) |

package/dist/components/UTStepper/components/Connectors/index.js

@@ -1 +1,46 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_commonTypes=require("../../../../types/commonTypes"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const Connectors=_ref=>{let{classes:classes,withPadding:withPadding,isCompleted:isCompleted,numberOfSteps:numberOfSteps}=_ref;const connectorMaxWidth="".concat(100/(numberOfSteps-1),"%"),containerMaxWidth="".concat(100-100/numberOfSteps,"%"),connectors=new Array(numberOfSteps-1).fill(null).map((key,index)=>_react.default.createElement("div",{className:"\n        ".concat(_stylesModule.default.connector," ").concat(classes.connector," ").concat(isCompleted(index+1)&&classes.coloredProgress,"\n      "),key:"connector_".concat(index),style:{maxWidth:withPadding?connectorMaxWidth:null,height:2}}));return _react.default.createElement("div",{className:_stylesModule.default.wrapper},_react.default.createElement("div",{className:"".concat(_stylesModule.default.connectorContainer),style:{maxWidth:withPadding?containerMaxWidth:null}},connectors))};Connectors.propTypes={classes:_commonTypes.classesType,isCompleted:_propTypes.func,numberOfSteps:_propTypes.number,withPadding:_propTypes.bool};var _default=exports.default=Connectors;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _commonTypes = require("../../../../types/commonTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Connectors = _ref => {
+  let {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  } = _ref;
+  const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
+  const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
+  const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n        ".concat(_stylesModule.default.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      ")
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: "connector_".concat(index),
+    style: {
+      maxWidth: withPadding ? connectorMaxWidth : null,
+      height: 2
+    }
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.wrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.connectorContainer),
+    style: {
+      maxWidth: withPadding ? containerMaxWidth : null
+    }
+  }, connectors));
+};
+Connectors.propTypes = {
+  classes: _commonTypes.classesType,
+  isCompleted: _propTypes.func,
+  numberOfSteps: _propTypes.number,
+  withPadding: _propTypes.bool
+};
+var _default = exports.default = Connectors;