@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,216 @@
-import{COLOR_THEMES}from"../../constants/Palette";import{DEFAULT_PROPS,SIZES,TYPES,VARIANTS}from"./constants";const getBackgroundColor=_ref=>{let{theme:theme,type:type,variant:variant}=_ref;return variant!==VARIANTS.unassigned?theme.Palette[variant][type===TYPES.negative?"04":"01"]:type===TYPES.negative?theme.Palette.gray["04"]:theme.Palette.light["04"]},getIconFill=_ref2=>{let{theme:theme,type:type,variant:variant}=_ref2;return{[TYPES.default]:theme.Palette.dark["05"],[TYPES.light]:theme.Palette[variant!==VARIANTS.unassigned?variant:"gray"]["05"],[TYPES.negative]:theme.Palette.light["01"]}[type]},getGridGap=_ref3=>{let{size:size}=_ref3;return{[SIZES.large]:"var(--UT-status-gap-large, 0.5rem)",[SIZES.medium]:"var(--UT-status-gap-medium, 0.5rem)",[SIZES.small]:"var(--UT-status-gap-small, 0.25rem)",[SIZES.xlarge]:"var(--UT-status-gap-xlarge, 0.5rem)",[SIZES.xsmall]:"var(--UT-status-gap-xsmall, 0.25rem)"}[size]},getPadding=_ref4=>{let{size:size}=_ref4;return{[SIZES.large]:"var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)",[SIZES.medium]:"var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)",[SIZES.small]:"var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)",[SIZES.xlarge]:"var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)",[SIZES.xsmall]:"var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)"}[size]};export const getLabelVariant=_ref5=>{let{size:size}=_ref5;return{[SIZES.large]:"body",[SIZES.medium]:"small",[SIZES.small]:"xsmall",[SIZES.xlarge]:"body",[SIZES.xsmall]:"xsmall"}[size]};export const getIconSize=_ref6=>{let{size:size}=_ref6;return{[SIZES.large]:"var(--UT-status-icon-size-xs, 1.25rem)",[SIZES.medium]:"var(--UT-status-icon-size-2xs, 1rem)",[SIZES.small]:"var(--UT-status-icon-size-3xs, 0.75rem)",[SIZES.xlarge]:"var(--UT-status-icon-size-xs, 1.25rem)",[SIZES.xsmall]:"var(--UT-status-icon-size-3xs, 0.75rem)"}[size]};export const defaultIconMapper=variant=>({[VARIANTS.accent]:"IconCheck",[VARIANTS.error]:"IconX",[VARIANTS.information]:"IconInfoCircle",[VARIANTS.success]:"IconCheck",[VARIANTS.unassigned]:"IconArchive",[VARIANTS.warning]:"IconAlertTriangle"}[variant]);export const validateProps=_ref7=>{let{type:type,variant:variant,...props}=_ref7;return{type:TYPES[type]||TYPES[DEFAULT_PROPS.type],variant:VARIANTS[variant]||VARIANTS[DEFAULT_PROPS.variant],...props}};export const retrieveStyle=_ref8=>{let{theme:theme,size:size=DEFAULT_PROPS.size,type:type=DEFAULT_PROPS.type,uppercase:uppercase,variant:variant=DEFAULT_PROPS.variant}=_ref8;return{root:{alignItems:"center",backgroundColor:getBackgroundColor({theme:theme,...validateProps({type:type,variant:variant})}),borderRadius:"var(--UT-status-radius, 0.25rem)",display:"flex",gridGap:getGridGap({size:size}),height:"fit-content",padding:getPadding({size:size}),width:"fit-content","&:empty":{display:"none"}},label:{...uppercase?{textTransform:"uppercase"}:{}},icon:{flexShrink:"0",height:"var(--UT-status-icon-size-xs, 1.25rem)",width:"var(--UT-status-icon-size-xs, 1.25rem)","& path":{fill:getIconFill({theme:theme,...validateProps({type:type,variant:variant})})}},badge:{backgroundColor:type===TYPES.negative?"".concat(theme.Palette[variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray]["03"]," !important"):"".concat(theme.Palette[variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray][variant!==VARIANTS.error?"03":"04"]," !important")},adornmentIcon:{flexShrink:"0","& path":{stroke:getIconFill({theme:theme,...validateProps({type:type,variant:variant})})}},iconXsmall:{height:"var(--UT-status-icon-size-3xs, 0.75rem)",width:"var(--UT-status-icon-size-3xs, 0.75rem)"},iconSmall:{height:"var(--UT-status-icon-size-3xs, 0.75rem)",width:"var(--UT-status-icon-size-3xs, 0.75rem)"},iconMedium:{height:"var(--UT-status-icon-size-2xs, 1rem)",width:"var(--UT-status-icon-size-2xs, 1rem)"},iconLarge:{height:"var(--UT-status-icon-size-xs, 1.25rem)",width:"var(--UT-status-icon-size-xs, 1.25rem)"},badgeXsmall:{height:"8px",width:"8px"},iconXlarge:{height:"20px",width:"20px"},badgeSmall:{height:"8px",width:"8px"},badgeMedium:{height:"10px",width:"10px"},badgeLarge:{height:"10px",width:"10px"},badgeXlarge:{height:"10px",width:"10px"},withoutArea:{backgroundColor:"transparent !important"},roundedArea:{borderRadius:"var(--UT-status-radius-rounded, 9999px)"}}};export const getColorTheme=_ref9=>{let{type:type,variant:variant}=_ref9;return{[TYPES.accent]:COLOR_THEMES.accent,[TYPES.default]:COLOR_THEMES.dark,[TYPES.light]:variant!==VARIANTS.unassigned?variant:COLOR_THEMES.gray,[TYPES.negative]:COLOR_THEMES.light}[type]};
+import { COLOR_THEMES } from '../../constants/Palette';
+import { DEFAULT_PROPS, SIZES, TYPES, VARIANTS } from './constants';
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    type,
+    variant
+  } = _ref;
+  return variant !== VARIANTS.unassigned ? theme.Palette[variant][type === TYPES.negative ? '04' : '01'] : type === TYPES.negative ? theme.Palette.gray['04'] : theme.Palette.light['04'];
+};
+const getIconFill = _ref2 => {
+  let {
+    theme,
+    type,
+    variant
+  } = _ref2;
+  return {
+    [TYPES.default]: theme.Palette.dark['05'],
+    [TYPES.light]: theme.Palette[variant !== VARIANTS.unassigned ? variant : 'gray']['05'],
+    [TYPES.negative]: theme.Palette.light['01']
+  }[type];
+};
+const getGridGap = _ref3 => {
+  let {
+    size
+  } = _ref3;
+  return {
+    [SIZES.large]: 'var(--UT-status-gap-large, 0.5rem)',
+    [SIZES.medium]: 'var(--UT-status-gap-medium, 0.5rem)',
+    [SIZES.small]: 'var(--UT-status-gap-small, 0.25rem)',
+    [SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 0.5rem)',
+    [SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 0.25rem)'
+  }[size];
+};
+const getPadding = _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return {
+    [SIZES.large]: 'var(--UT-status-padding-y-large, 0.25rem) var(--UT-status-padding-x-large, 0.5rem)',
+    [SIZES.medium]: 'var(--UT-status-padding-y-medium, 0.25rem) var(--UT-status-padding-x-medium, 0.5rem)',
+    [SIZES.small]: 'var(--UT-status-padding-y-small, 0.25rem) var(--UT-status-padding-x-small, 0.5rem)',
+    [SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 0.5rem) var(--UT-status-padding-x-xlarge, 0.75rem)',
+    [SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 0.125rem) var(--UT-status-padding-x-xsmall, 0.25rem)'
+  }[size];
+};
+export const getLabelVariant = _ref5 => {
+  let {
+    size
+  } = _ref5;
+  return {
+    [SIZES.large]: 'body',
+    [SIZES.medium]: 'small',
+    [SIZES.small]: 'xsmall',
+    [SIZES.xlarge]: 'body',
+    [SIZES.xsmall]: 'xsmall'
+  }[size];
+};
+export const getIconSize = _ref6 => {
+  let {
+    size
+  } = _ref6;
+  return {
+    [SIZES.large]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [SIZES.medium]: 'var(--UT-status-icon-size-2xs, 1rem)',
+    [SIZES.small]: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+    [SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 1.25rem)',
+    [SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 0.75rem)'
+  }[size];
+};
+export const defaultIconMapper = variant => ({
+  [VARIANTS.accent]: 'IconCheck',
+  [VARIANTS.error]: 'IconX',
+  [VARIANTS.information]: 'IconInfoCircle',
+  [VARIANTS.success]: 'IconCheck',
+  [VARIANTS.unassigned]: 'IconArchive',
+  [VARIANTS.warning]: 'IconAlertTriangle'
+})[variant];
+export const validateProps = _ref7 => {
+  let {
+    type,
+    variant,
+    ...props
+  } = _ref7;
+  return {
+    type: TYPES[type] || TYPES[DEFAULT_PROPS.type],
+    variant: VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant],
+    ...props
+  };
+};
+export const retrieveStyle = _ref8 => {
+  let {
+    theme,
+    size = DEFAULT_PROPS.size,
+    type = DEFAULT_PROPS.type,
+    uppercase,
+    variant = DEFAULT_PROPS.variant
+  } = _ref8;
+  return {
+    root: {
+      alignItems: 'center',
+      backgroundColor: getBackgroundColor({
+        theme,
+        ...validateProps({
+          type,
+          variant
+        })
+      }),
+      borderRadius: 'var(--UT-status-radius, 0.25rem)',
+      display: 'flex',
+      gridGap: getGridGap({
+        size
+      }),
+      height: 'fit-content',
+      padding: getPadding({
+        size
+      }),
+      width: 'fit-content',
+      '&:empty': {
+        display: 'none'
+      }
+    },
+    label: {
+      ...(uppercase ? {
+        textTransform: 'uppercase'
+      } : {})
+    },
+    icon: {
+      flexShrink: '0',
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      '& path': {
+        fill: getIconFill({
+          theme,
+          ...validateProps({
+            type,
+            variant
+          })
+        })
+      }
+    },
+    badge: {
+      backgroundColor: type === TYPES.negative ? "".concat(theme.Palette[variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray]['03'], " !important") : "".concat(theme.Palette[variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray][variant !== VARIANTS.error ? '03' : '04'], " !important")
+    },
+    adornmentIcon: {
+      flexShrink: '0',
+      '& path': {
+        stroke: getIconFill({
+          theme,
+          ...validateProps({
+            type,
+            variant
+          })
+        })
+      }
+    },
+    iconXsmall: {
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
+    },
+    iconSmall: {
+      height: 'var(--UT-status-icon-size-3xs, 0.75rem)',
+      width: 'var(--UT-status-icon-size-3xs, 0.75rem)'
+    },
+    iconMedium: {
+      height: 'var(--UT-status-icon-size-2xs, 1rem)',
+      width: 'var(--UT-status-icon-size-2xs, 1rem)'
+    },
+    iconLarge: {
+      height: 'var(--UT-status-icon-size-xs, 1.25rem)',
+      width: 'var(--UT-status-icon-size-xs, 1.25rem)'
+    },
+    badgeXsmall: {
+      height: '8px',
+      width: '8px'
+    },
+    iconXlarge: {
+      height: '20px',
+      width: '20px'
+    },
+    badgeSmall: {
+      height: '8px',
+      width: '8px'
+    },
+    badgeMedium: {
+      height: '10px',
+      width: '10px'
+    },
+    badgeLarge: {
+      height: '10px',
+      width: '10px'
+    },
+    badgeXlarge: {
+      height: '10px',
+      width: '10px'
+    },
+    withoutArea: {
+      backgroundColor: 'transparent !important'
+    },
+    roundedArea: {
+      borderRadius: 'var(--UT-status-radius-rounded, 9999px)'
+    }
+  };
+};
+export const getColorTheme = _ref9 => {
+  let {
+    type,
+    variant
+  } = _ref9;
+  return {
+    [TYPES.accent]: COLOR_THEMES.accent,
+    [TYPES.default]: COLOR_THEMES.dark,
+    [TYPES.light]: variant !== VARIANTS.unassigned ? variant : COLOR_THEMES.gray,
+    [TYPES.negative]: COLOR_THEMES.light
+  }[type];
+};

package/dist/esm/components/UTStatus/utils.js

@@ -1 +1,84 @@
-import{isUTIcon}from"../../utils/componentUtils";import UTIcon from"../UTIcon";import{COMPONENT_KEYS,COMPONENTS_MAPPER,SIZES}from"./constants";import{getColorTheme,getIconSize}from"./theme";export const getIconProps=_ref=>{let{className:className,Icon:Icon,type:type,variant:variant,size:size}=_ref;return{IconComponent:isUTIcon(Icon)?UTIcon:Icon,...isUTIcon(Icon)?{colorTheme:getColorTheme({type:type,variant:variant}),name:Icon,size:getIconSize({size:size})}:{className:className}}};export const validateAdornments=adornments=>adornments.every(adornment=>adornment.left||adornment.right?(!adornment.left||COMPONENTS_MAPPER[adornment.left.name])&&(!adornment.right||COMPONENTS_MAPPER[adornment.right.name]):COMPONENTS_MAPPER[adornment.name]);const interpreterSize=(size,classes)=>{const{iconXsmall:iconXsmall,iconSmall:iconSmall,iconMedium:iconMedium,iconLarge:iconLarge,iconXlarge:iconXlarge,badgeXsmall:badgeXsmall,badgeSmall:badgeSmall,badgeMedium:badgeMedium,badgeLarge:badgeLarge,badgeXlarge:badgeXlarge}=classes||{};return{[COMPONENT_KEYS.BADGE]:{[SIZES.xsmall]:badgeXsmall,[SIZES.small]:badgeSmall,[SIZES.medium]:badgeMedium,[SIZES.large]:badgeLarge,[SIZES.xlarge]:badgeXlarge}[size],[COMPONENT_KEYS.ICON]:{[SIZES.xsmall]:iconXsmall,[SIZES.small]:iconSmall,[SIZES.medium]:iconMedium,[SIZES.large]:iconLarge,[SIZES.xlarge]:iconXlarge}[size]}};export const getAdornmentsThemeProps=props=>{const{adornmentName:adornmentName,classes:classes,size:size=SIZES.medium}=props||{},{badge:badge,adornmentIcon:adornmentIcon}=classes||{},recoverClassForSizeAndType=interpreterSize(size,classes)[adornmentName];return{[COMPONENT_KEYS.BADGE]:{className:"".concat(badge," ").concat(recoverClassForSizeAndType)},[COMPONENT_KEYS.ICON]:{className:"".concat(adornmentIcon," ").concat(recoverClassForSizeAndType)}}[adornmentName]};
+import { isUTIcon } from '../../utils/componentUtils';
+import UTIcon from '../UTIcon';
+import { COMPONENT_KEYS, COMPONENTS_MAPPER, SIZES } from './constants';
+import { getColorTheme, getIconSize } from './theme';
+export const getIconProps = _ref => {
+  let {
+    className,
+    Icon,
+    type,
+    variant,
+    size
+  } = _ref;
+  return {
+    IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
+    ...(isUTIcon(Icon) ? {
+      colorTheme: getColorTheme({
+        type,
+        variant
+      }),
+      name: Icon,
+      size: getIconSize({
+        size
+      })
+    } : {
+      className
+    })
+  };
+};
+export const validateAdornments = adornments => adornments.every(adornment => {
+  if (adornment.left || adornment.right) {
+    return (!adornment.left || COMPONENTS_MAPPER[adornment.left.name]) && (!adornment.right || COMPONENTS_MAPPER[adornment.right.name]);
+  }
+  return COMPONENTS_MAPPER[adornment.name];
+});
+const interpreterSize = (size, classes) => {
+  const {
+    iconXsmall,
+    iconSmall,
+    iconMedium,
+    iconLarge,
+    iconXlarge,
+    badgeXsmall,
+    badgeSmall,
+    badgeMedium,
+    badgeLarge,
+    badgeXlarge
+  } = classes || {};
+  return {
+    [COMPONENT_KEYS.BADGE]: {
+      [SIZES.xsmall]: badgeXsmall,
+      [SIZES.small]: badgeSmall,
+      [SIZES.medium]: badgeMedium,
+      [SIZES.large]: badgeLarge,
+      [SIZES.xlarge]: badgeXlarge
+    }[size],
+    [COMPONENT_KEYS.ICON]: {
+      [SIZES.xsmall]: iconXsmall,
+      [SIZES.small]: iconSmall,
+      [SIZES.medium]: iconMedium,
+      [SIZES.large]: iconLarge,
+      [SIZES.xlarge]: iconXlarge
+    }[size]
+  };
+};
+export const getAdornmentsThemeProps = props => {
+  const {
+    adornmentName,
+    classes,
+    size = SIZES.medium
+  } = props || {};
+  const {
+    badge,
+    adornmentIcon
+  } = classes || {};
+  const recoverClassForSizeAndType = interpreterSize(size, classes)[adornmentName];
+  return {
+    [COMPONENT_KEYS.BADGE]: {
+      className: "".concat(badge, " ").concat(recoverClassForSizeAndType)
+    },
+    [COMPONENT_KEYS.ICON]: {
+      className: "".concat(adornmentIcon, " ").concat(recoverClassForSizeAndType)
+    }
+  }[adornmentName];
+};

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

@@ -0,0 +1,87 @@
+# UTStatusMessage
+
+The purpose of this component, as its name indicates, is to communicate a message about the status of the view or component in which it is contextually situated.
+
+## Props
+
+| Name                 | Type    | Default        | Description                                                                 |
+| -------------------- | ------- | -------------- | --------------------------------------------------------------------------- |
+| children             | element |                | The content to be rendered inside the component.                            |
+| classes              | object  |                | Custom CSS classes for styling the component.                               |
+| colorTheme           | string  | default        | Defines the color theme for the component.                                  |
+| description          | string  |                | Description text providing additional context or information.               |
+| descriptionProps     | object  |                | Props to be applied to the description UTLabel.                             |
+| helpText             | string  |                | Help text displayed to guide the user.                                      |
+| helpTextProps        | object  |                | Props to be applied to the help text UTLabel.                               |
+| icon                 | string  | IconInfoCircle | Icon to be displayed in the header.                                         |
+| iconProps            | object  | {}             | Props to be applied to the UTIcon.                                          |
+| HeaderComponent      | element |                | Component to be displayed in the header, replacing the icon.                |
+| loading              | bool    | false          | Indicates whether the component is in a loading state. Replaces the header. |
+| primaryAction        | func    |                | Callback function for the primary action.                                   |
+| primaryActionProps   | object  |                | Props to be applied to the primary action UTButton.                         |
+| primaryActionText    | string  |                | Text for the primary action UTButton.                                       |
+| secondaryAction      | func    |                | Callback function for the secondary action.                                 |
+| secondaryActionProps | object  |                | Props to be applied to the secondary action UTButton.                       |
+| secondaryActionText  | string  |                | Text for the secondary action UTButton.                                     |
+| showBanner           | bool    | true           | Indicates whether to display the banner background styling.                 |
+| showHeader           | bool    | true           | Indicates whether to display the header section of the component.           |
+| title                | string  |                | Title for the component, providing context to the user.                     |
+| titleProps           | object  |                | Props to be applied to the title UTLabel.                                   |
+
+## Usage
+
+```jsx
+import { UTStatusMessage } from '@energy/ui';
+
+// Basic usage
+<UTStatusMessage
+  title="Operation completed successfully"
+  description="Your changes have been saved and are now active."
+  colorTheme="success"
+/>
+
+// With actions
+<UTStatusMessage
+  title="Action required"
+  description="Please review and confirm your selection."
+  primaryAction={() => handleConfirm()}
+  primaryActionText="Confirm"
+  secondaryAction={() => handleCancel()}
+  secondaryActionText="Cancel"
+  colorTheme="warning"
+/>
+
+// With custom header component
+<UTStatusMessage
+  title="Custom header"
+  HeaderComponent={() => <CustomIcon />}
+  description="This uses a custom header component instead of the default icon."
+/>
+
+// Loading state
+<UTStatusMessage
+  loading={true}
+  title="Processing your request"
+  description="Please wait while we complete the operation."
+/>
+```
+
+## Color Themes
+
+The `colorTheme` prop accepts the following values:
+
+| Theme       | Description                   |
+| ----------- | ----------------------------- |
+| `accent`    | Accent color theme            |
+| `default`   | Default color theme (default) |
+| `error`     | Error state color theme       |
+| `gradient`  | Gradient color theme          |
+| `gray`      | Gray color theme              |
+| `identity1` | Identity color theme 1        |
+| `identity2` | Identity color theme 2        |
+| `identity3` | Identity color theme 3        |
+| `identity4` | Identity color theme 4        |
+| `info`      | Information color theme       |
+| `negative`  | Negative state color theme    |
+| `success`   | Success state color theme     |
+| `warning`   | Warning state color theme     |

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

@@ -1 +1,30 @@
-export const COLOR_THEMES={ACCENT:"accent",DEFAULT:"default",ERROR:"error",GRADIENT:"gradient",GRAY:"gray",IDENTITY_1:"identity1",IDENTITY_2:"identity2",IDENTITY_3:"identity3",IDENTITY_4:"identity4",INFO:"info",NEGATIVE:"negative",SUCCESS:"success",WARNING:"warning"};export const ICON_COLOR_THEMES={[COLOR_THEMES.ACCENT]:"accent",[COLOR_THEMES.DEFAULT]:"dark",[COLOR_THEMES.ERROR]:"error",[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:"gray",[COLOR_THEMES.IDENTITY_1]:"light",[COLOR_THEMES.IDENTITY_2]:"light",[COLOR_THEMES.IDENTITY_3]:"light",[COLOR_THEMES.IDENTITY_4]:"light",[COLOR_THEMES.INFO]:"information",[COLOR_THEMES.NEGATIVE]:"dark",[COLOR_THEMES.SUCCESS]:"success",[COLOR_THEMES.WARNING]:"warning"};
+export const COLOR_THEMES = {
+  ACCENT: 'accent',
+  DEFAULT: 'default',
+  ERROR: 'error',
+  GRADIENT: 'gradient',
+  GRAY: 'gray',
+  IDENTITY_1: 'identity1',
+  IDENTITY_2: 'identity2',
+  IDENTITY_3: 'identity3',
+  IDENTITY_4: 'identity4',
+  INFO: 'info',
+  NEGATIVE: 'negative',
+  SUCCESS: 'success',
+  WARNING: 'warning'
+};
+export const ICON_COLOR_THEMES = {
+  [COLOR_THEMES.ACCENT]: 'accent',
+  [COLOR_THEMES.DEFAULT]: 'dark',
+  [COLOR_THEMES.ERROR]: 'error',
+  [COLOR_THEMES.GRADIENT]: 'light',
+  [COLOR_THEMES.GRAY]: 'gray',
+  [COLOR_THEMES.IDENTITY_1]: 'light',
+  [COLOR_THEMES.IDENTITY_2]: 'light',
+  [COLOR_THEMES.IDENTITY_3]: 'light',
+  [COLOR_THEMES.IDENTITY_4]: 'light',
+  [COLOR_THEMES.INFO]: 'information',
+  [COLOR_THEMES.NEGATIVE]: 'dark',
+  [COLOR_THEMES.SUCCESS]: 'success',
+  [COLOR_THEMES.WARNING]: 'warning'
+};

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

@@ -1 +1,107 @@
-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{bool,element,func,object,string}from"prop-types";import React from"react";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import WithTheme from"../WithTheme";import{TEST_IDS}from"../../constants/testIds";import{ICON_COLOR_THEMES,COLOR_THEMES}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const{statusMessage:statusMessage}=TEST_IDS,UTStatusMessage=_ref=>{let{children:children,classes:classes,colorTheme:colorTheme=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.createElement("div",{className:"".concat(styles.container," ").concat(classes.container)},loading?React.createElement(UTLoading,{loading:!0,text:null}):showHeader?React.createElement("div",{className:classes.banner},HeaderComponent?React.createElement(HeaderComponent,null):React.createElement("div",{className:classes.iconContainer},React.createElement(UTIcon,_extends({name:icon,colorTheme:ICON_COLOR_THEMES[colorTheme],dataTestId:statusMessage.icon},iconProps)))):null,React.createElement("div",{className:"".concat(styles.content," ").concat(classes.content)},(title||description||helpText)&&React.createElement("div",{className:styles.section},title&&React.createElement(UTLabel,_extends({className:styles.label,dataTestId:statusMessage.title,variant:"title3",weight:"medium"},titleProps),title),description&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.description,withMarkdown:!0,variant:"body"},descriptionProps),description),helpText&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.helperText,variant:"small"},helpTextProps),helpText)),children,(primaryAction||secondaryAction)&&React.createElement("div",{className:styles.section},primaryAction&&React.createElement(UTButton,_extends({onClick:primaryAction},primaryActionProps),primaryActionText),secondaryAction&&React.createElement(UTButton,_extends({onClick:secondaryAction,variant:"text"},secondaryActionProps),secondaryActionText))))};UTStatusMessage.propTypes={children:element,classes:object,colorTheme:string,description:string,descriptionProps:object,HeaderComponent:element,helpText:string,helpTextProps:object,icon:string,iconProps:object,loading:bool,primaryAction:func,primaryActionProps:object,primaryActionText:string,secondaryAction:func,secondaryActionProps:object,secondaryActionText:string,showHeader:bool,title:string,titleProps:object};const UTStatusMessageWithTheme=WithTheme(retrieveStyle)(UTStatusMessage);UTStatusMessageWithTheme.displayName="UTStatusMessage";export default UTStatusMessageWithTheme;
+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 { bool, element, func, object, string } from 'prop-types';
+import React from 'react';
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import UTLoading from '../UTLoading';
+import WithTheme from '../WithTheme';
+import { TEST_IDS } from '../../constants/testIds';
+import { ICON_COLOR_THEMES, COLOR_THEMES } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  statusMessage
+} = TEST_IDS;
+const UTStatusMessage = _ref => {
+  let {
+    children,
+    classes,
+    colorTheme = 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.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classes.container)
+  }, loading ? /*#__PURE__*/React.createElement(UTLoading, {
+    loading: true,
+    text: null
+  }) : showHeader ? /*#__PURE__*/React.createElement("div", {
+    className: classes.banner
+  }, HeaderComponent ? /*#__PURE__*/React.createElement(HeaderComponent, null) : /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, _extends({
+    name: icon,
+    colorTheme: ICON_COLOR_THEMES[colorTheme],
+    dataTestId: statusMessage.icon
+  }, iconProps)))) : null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.content, " ").concat(classes.content)
+  }, (title || description || helpText) && /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, title && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: styles.label,
+    dataTestId: statusMessage.title,
+    variant: "title3",
+    weight: "medium"
+  }, titleProps), title), description && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: styles.label,
+    colorTheme: "gray",
+    dataTestId: statusMessage.description,
+    withMarkdown: true,
+    variant: "body"
+  }, descriptionProps), description), helpText && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: styles.label,
+    colorTheme: "gray",
+    dataTestId: statusMessage.helperText,
+    variant: "small"
+  }, helpTextProps), helpText)), children, (primaryAction || secondaryAction) && /*#__PURE__*/React.createElement("div", {
+    className: styles.section
+  }, primaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: primaryAction
+  }, primaryActionProps), primaryActionText), secondaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: secondaryAction,
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText))));
+};
+UTStatusMessage.propTypes = {
+  children: element,
+  classes: object,
+  colorTheme: string,
+  description: string,
+  descriptionProps: object,
+  HeaderComponent: element,
+  helpText: string,
+  helpTextProps: object,
+  icon: string,
+  iconProps: object,
+  loading: bool,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  showHeader: bool,
+  title: string,
+  titleProps: object
+};
+const UTStatusMessageWithTheme = WithTheme(retrieveStyle)(UTStatusMessage);
+UTStatusMessageWithTheme.displayName = 'UTStatusMessage';
+export default UTStatusMessageWithTheme;

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

@@ -0,0 +1,61 @@
+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 { fn } from '@storybook/test';
+import UTStatusMessage from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+const renderStory = _ref => {
+  let {
+    iconSize,
+    showPrimaryAction,
+    showSecondaryAction,
+    primaryAction,
+    secondaryAction,
+    ...args
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTStatusMessage, _extends({}, args, {
+    iconProps: iconSize ? {
+      size: iconSize
+    } : undefined,
+    primaryAction: showPrimaryAction ? primaryAction : undefined,
+    secondaryAction: showSecondaryAction ? secondaryAction : undefined
+  }));
+};
+export default {
+  title: 'Energy-UI/UTStatusMessage',
+  component: UTStatusMessage,
+  args: {
+    children: undefined,
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS,
+    options: {
+      storySort: {
+        method: 'alphabetical'
+      }
+    }
+  },
+  render: renderStory
+};
+export const Playground = {
+  args: {
+    colorTheme: 'default',
+    description: 'Descripción adicional con más contexto sobre el estado.',
+    icon: 'IconInfoCircle',
+    iconSize: undefined,
+    showPrimaryAction: true,
+    primaryAction: fn(),
+    primaryActionText: 'Acción primaria',
+    primaryActionProps: undefined,
+    showSecondaryAction: true,
+    secondaryAction: fn(),
+    secondaryActionText: 'Acción secundaria',
+    secondaryActionProps: undefined,
+    showHeader: true,
+    title: 'Mensaje de estado'
+  },
+  name: 'Playground'
+};