@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTStatus/styles.module.scss

@@ -0,0 +1,13 @@
+.truncated {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+}
+
+.truncatedLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,216 @@
+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, 8px)',
+    [SIZES.medium]: 'var(--UT-status-gap-medium, 8px)',
+    [SIZES.small]: 'var(--UT-status-gap-small, 4px)',
+    [SIZES.xlarge]: 'var(--UT-status-gap-xlarge, 8px)',
+    [SIZES.xsmall]: 'var(--UT-status-gap-xsmall, 4px)'
+  }[size];
+};
+const getPadding = _ref4 => {
+  let {
+    size
+  } = _ref4;
+  return {
+    [SIZES.large]: 'var(--UT-status-padding-y-large, 4px) var(--UT-status-padding-x-large, 8px)',
+    [SIZES.medium]: 'var(--UT-status-padding-y-medium, 4px) var(--UT-status-padding-x-medium, 8px)',
+    [SIZES.small]: 'var(--UT-status-padding-y-small, 4px) var(--UT-status-padding-x-small, 8px)',
+    [SIZES.xlarge]: 'var(--UT-status-padding-y-xlarge, 8px) var(--UT-status-padding-x-xlarge, 12px)',
+    [SIZES.xsmall]: 'var(--UT-status-padding-y-xsmall, 2px) var(--UT-status-padding-x-xsmall, 4px)'
+  }[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, 20px)',
+    [SIZES.medium]: 'var(--UT-status-icon-size-2xs, 16px)',
+    [SIZES.small]: 'var(--UT-status-icon-size-3xs, 12px)',
+    [SIZES.xlarge]: 'var(--UT-status-icon-size-xs, 20px)',
+    [SIZES.xsmall]: 'var(--UT-status-icon-size-3xs, 12px)'
+  }[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, 4px)',
+      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, 20px)',
+      width: 'var(--UT-status-icon-size-xs, 20px)',
+      '& 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, 12px)',
+      width: 'var(--UT-status-icon-size-3xs, 12px)'
+    },
+    iconSmall: {
+      height: 'var(--UT-status-icon-size-3xs, 12px)',
+      width: 'var(--UT-status-icon-size-3xs, 12px)'
+    },
+    iconMedium: {
+      height: 'var(--UT-status-icon-size-2xs, 16px)',
+      width: 'var(--UT-status-icon-size-2xs, 16px)'
+    },
+    iconLarge: {
+      height: 'var(--UT-status-icon-size-xs, 20px)',
+      width: 'var(--UT-status-icon-size-xs, 20px)'
+    },
+    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

@@ -0,0 +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,
+    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

@@ -0,0 +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'
+};

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

@@ -0,0 +1,105 @@
+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 = {},
+    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.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTStatusMessageStories from './UTStatusMessage.stories.js';
+
+<Meta of={UTStatusMessageStories} />
+
+<Title>UTStatusMessage</Title>
+
+<Description of={UTStatusMessageStories} />
+
+<Canvas of={UTStatusMessageStories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes', 'showPrimaryAction', 'showSecondaryAction', 'iconSize']} />

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'
+};