@widergy/energy-ui 3.160.1 → 3.162.0

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

@@ -0,0 +1,30 @@
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+export const COLOR_THEMES = {
+  ERROR: 'error',
+  GRAY: 'gray',
+  INFORMATION: 'information',
+  NEGATIVE: 'negative',
+  PRIMARY: 'primary',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  WHITE: 'white'
+};
+export const VARIANTS = {
+  DARK: 'dark',
+  LIGHT: 'light'
+};
+export const PLACEMENTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+export const DEFAULT_PROPS = {
+  buttonPlacement: PLACEMENTS.HORIZONTAL,
+  colorTheme: COLOR_THEMES.GRAY,
+  iconPlacement: PLACEMENTS.HORIZONTAL,
+  size: SIZES.MEDIUM,
+  variant: VARIANTS.LIGHT
+};

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

@@ -1,29 +1,133 @@
-import React, { useMemo } from 'react';
-import { object, objectOf, string } from 'prop-types';
+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 { elementType, func, object, objectOf, oneOf, oneOfType, string } from 'prop-types';
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
-import { mergeClasses } from '../../utils/classesUtils';
-import WithTheme from '../WithTheme';
+import { capitalize, isUTIcon } from '../../utils/componentUtils';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import { ID_CONSTANTS } from '../../constants/testIds';
 import styles from './styles.module.scss';
-import { retrieveStyle } from './theme';
+import { buttonType } from './types';
+import { getDefaultButtonColorTheme, getDefaultIconSize, getDefaultIconTheme, getLabelColorTheme, getLabelStyles, getSecondaryLabelColorTheme } from './utils';
+import { COLOR_THEMES, DEFAULT_PROPS, PLACEMENTS, SIZES, VARIANTS } from './constants';
 const UTBanner = _ref => {
   let {
-    classes: themeClasses = {},
+    button,
+    buttonPlacement = DEFAULT_PROPS.buttonPlacement,
+    category,
     classNames,
-    children,
+    colorTheme = DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    helpText,
+    Icon,
+    iconPlacement = DEFAULT_PROPS.iconPlacement,
     iconProps,
-    Icon
+    onClose,
+    secondaryButton,
+    size = DEFAULT_PROPS.size,
+    title,
+    variant = DEFAULT_PROPS.variant
   } = _ref;
-  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const isVerticalButton = buttonPlacement === PLACEMENTS.VERTICAL;
+  const isVerticalIcon = iconPlacement === PLACEMENTS.VERTICAL;
+  const labelColorTheme = getLabelColorTheme(colorTheme, variant);
+  const secondaryLabelColorTheme = getSecondaryLabelColorTheme(colorTheme, variant);
+  const {
+    titleVariant,
+    descriptionVariant
+  } = getLabelStyles(size);
+  const iconTheme = getDefaultIconTheme(colorTheme, variant);
+  const iconSize = getDefaultIconSize(size);
+  const buttonColorTheme = getDefaultButtonColorTheme(variant);
+  const gapClass = styles["gap".concat(capitalize(size))];
+  const paddingClass = styles["padding".concat(capitalize(size))];
+  const colorClass = styles["".concat(colorTheme).concat(capitalize(variant))];
+  const dynamicClasses = {
+    bannerContainer: [colorClass, paddingClass, gapClass].filter(Boolean).join(' '),
+    contentContainer: [isVerticalButton ? styles.contentVertical : styles.contentHorizontal, gapClass].filter(Boolean).join(' '),
+    iconTextContainer: [isVerticalIcon ? styles.iconVertical : styles.iconHorizontal, !isVerticalButton ? styles.iconFlex : ''].filter(Boolean).join(' '),
+    textContainer: !isVerticalIcon ? styles.textFlex : '',
+    buttonsContainer: isVerticalButton ? styles.buttonsVertical : ''
+  };
+  const normalizedClassNames = classNames ? {
+    ...classNames,
+    bannerContainer: classNames.infoContainer
+  } : undefined;
+  const classes = mergeMultipleClassNames(styles, dynamicClasses, normalizedClassNames);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.bannerContainer, " ").concat(classes.infoContainer)
-  }, Icon && /*#__PURE__*/React.createElement(Icon, iconProps), /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.bannerContainer,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconTextContainer
+  }, !!Icon && isUTIcon(Icon) ? /*#__PURE__*/React.createElement(UTIcon, _extends({
+    colorTheme: iconTheme.colorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined,
+    name: Icon,
+    shade: iconTheme.shade,
+    size: iconSize
+  }, iconProps)) : !!Icon && /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+    "data-testId": dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.textContainer
+  }, !!category && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.uppercase,
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".category.").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: "xsmall",
+    weight: "medium"
+  }, category), !!title && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.TITLE, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: titleVariant,
+    weight: "medium"
+  }, title), !!description && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: labelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    variant: descriptionVariant
+  }, description), !!helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: secondaryLabelColorTheme,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.HELP_TEXT, ".").concat(ID_CONSTANTS.LABEL) : undefined,
     variant: "small"
-  }, children));
+  }, helpText))), !!(button || secondaryButton) && /*#__PURE__*/React.createElement("div", {
+    className: classes.buttonsContainer
+  }, !!button && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: buttonColorTheme.button
+  }, button, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".button.").concat(ID_CONSTANTS.SECONDARY_ACTION) : undefined
+  }), button.title), !!secondaryButton && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: buttonColorTheme.secondaryButton,
+    variant: "text"
+  }, secondaryButton, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  }), secondaryButton.title))), !!onClose && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: buttonColorTheme.onClose,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    Icon: "IconX",
+    onClick: onClose,
+    size: "small",
+    variant: "text"
+  }));
 };
 UTBanner.propTypes = {
-  classes: objectOf(string),
+  button: buttonType,
+  buttonPlacement: oneOf(Object.values(PLACEMENTS)),
+  category: string,
   classNames: objectOf(string),
-  Icon: object,
-  iconProps: object
+  colorTheme: oneOf(Object.values(COLOR_THEMES)),
+  dataTestId: string,
+  description: string,
+  helpText: string,
+  Icon: oneOfType([elementType, string]),
+  iconPlacement: oneOf(Object.values(PLACEMENTS)),
+  iconProps: object,
+  onClose: func,
+  secondaryButton: buttonType,
+  size: oneOf(Object.values(SIZES)),
+  title: string,
+  variant: oneOf(Object.values(VARIANTS))
 };
-export default WithTheme(retrieveStyle)(UTBanner);
+export default UTBanner;

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

@@ -0,0 +1,157 @@
+/* eslint-disable no-alert */
+import UTBanner from '..';
+import { COLOR_THEMES, PLACEMENTS, SIZES, VARIANTS } from '../constants';
+export default {
+  args: {
+    buttonPlacement: PLACEMENTS.HORIZONTAL,
+    colorTheme: COLOR_THEMES.GRAY,
+    iconPlacement: PLACEMENTS.HORIZONTAL,
+    size: SIZES.MEDIUM,
+    title: 'Your account information has been updated successfully.',
+    variant: VARIANTS.LIGHT
+  },
+  argTypes: {
+    button: {
+      control: 'object',
+      description: 'Primary action button. Accepts all UTButton props.',
+      table: {
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    buttonPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(PLACEMENTS)
+    },
+    category: {
+      control: 'text',
+      description: 'Optional category label shown above the title (xsmall, uppercase, gray).'
+    },
+    colorTheme: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(COLOR_THEMES)
+    },
+    description: {
+      control: 'text',
+      description: 'Optional body text shown below the title (small).'
+    },
+    helpText: {
+      control: 'text',
+      description: 'Optional secondary text shown below the description (small, gray).'
+    },
+    iconPlacement: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(PLACEMENTS)
+    },
+    Icon: {
+      control: 'text',
+      description: 'Nombre del ícono (string) o componente React. Ej: "IconAlertCircle".'
+    },
+    iconProps: {
+      control: false
+    },
+    onClose: {
+      control: false
+    },
+    secondaryButton: {
+      control: 'object',
+      description: 'Secondary action button. Renders as variant="text" by default.'
+    },
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(SIZES)
+    },
+    title: {
+      control: 'text',
+      description: 'Main text of the banner.'
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(VARIANTS)
+    }
+  },
+  component: UTBanner,
+  title: 'Energy-UI/UTBanner'
+};
+export const Playground = {};
+export const WithClose = {
+  args: {
+    colorTheme: COLOR_THEMES.WARNING,
+    onClose: () => alert('closed'),
+    title: 'Session will expire in 5 minutes.'
+  },
+  name: 'With Close Button'
+};
+export const WithActions = {
+  args: {
+    button: {
+      title: 'Retry',
+      onClick: () => alert('retry')
+    },
+    colorTheme: COLOR_THEMES.ERROR,
+    secondaryButton: {
+      title: 'Dismiss',
+      onClick: () => alert('dismiss')
+    },
+    title: 'Something went wrong while loading your data.'
+  },
+  name: 'With Actions'
+};
+export const WithCategoryAndHelpText = {
+  args: {
+    category: 'Notice',
+    colorTheme: COLOR_THEMES.INFORMATION,
+    helpText: 'Contact billing if you have any questions.',
+    title: 'Your invoice is due in 3 days.'
+  },
+  name: 'With Category and Help Text'
+};
+export const WithDescription = {
+  args: {
+    colorTheme: COLOR_THEMES.INFORMATION,
+    description: 'This action cannot be undone. All associated data will be permanently removed.',
+    title: 'Are you sure you want to delete this account?'
+  },
+  name: 'With Description'
+};
+export const VerticalLayout = {
+  args: {
+    button: {
+      title: 'View Details',
+      onClick: () => alert('details')
+    },
+    buttonPlacement: PLACEMENTS.VERTICAL,
+    category: 'Update',
+    colorTheme: COLOR_THEMES.PRIMARY,
+    description: 'This update includes performance improvements and bug fixes.',
+    helpText: 'Restart the app to apply changes.',
+    iconPlacement: PLACEMENTS.VERTICAL,
+    secondaryButton: {
+      title: 'Later',
+      onClick: () => alert('later')
+    },
+    size: SIZES.LARGE,
+    title: 'A new version is available.'
+  },
+  name: 'Vertical Layout'
+};
+export const DarkVariant = {
+  args: {
+    colorTheme: COLOR_THEMES.NEGATIVE,
+    onClose: () => alert('closed'),
+    title: 'Critical maintenance scheduled for tonight.',
+    variant: VARIANTS.DARK
+  },
+  name: 'Dark Variant'
+};

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

@@ -1,7 +1,151 @@
 .bannerContainer {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    grid-gap: 16px;
-    padding: 16px;
+  align-items: flex-start;
+  border-radius: var(--UT-banner-radius, 8px);
+  display: flex;
+  flex-direction: row;
+}
+
+.contentContainer {
+  display: flex;
+  flex: 1;
+}
+
+.contentHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.contentVertical {
+  flex-direction: column;
+}
+
+.iconTextContainer {
+  display: flex;
+  grid-gap: var(--UT-banner-icon-gap, 12px);
+}
+
+.iconHorizontal {
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.iconVertical {
+  flex-direction: column;
+}
+
+.iconFlex {
+  flex: 1;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-banner-text-gap, 8px);
+}
+
+.textFlex {
+  flex: 1;
+}
+
+.buttonsContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: var(--UT-banner-buttons-gap, 8px);
+}
+
+.buttonsVertical {
+  align-self: flex-start;
+}
+
+.gapSmall {
+  grid-gap: var(--UT-banner-gap-sm, 8px);
+}
+
+.gapMedium {
+  grid-gap: var(--UT-banner-gap-md, 16px);
+}
+
+.gapLarge {
+  grid-gap: var(--UT-banner-gap-lg, 24px);
+}
+
+.paddingSmall {
+  padding: var(--UT-banner-padding-y-sm, 8px) var(--UT-banner-padding-x-sm, 12px);
+}
+
+.paddingMedium {
+  padding: var(--UT-banner-padding-md, 16px);
+}
+
+.paddingLarge {
+  padding: var(--UT-banner-padding-lg, 24px);
+}
+
+.errorLight {
+  background-color: var(--actionError01);
+}
+
+.errorDark {
+  background-color: var(--actionError04);
+}
+
+.grayLight {
+  background-color: var(--light02);
+}
+
+.grayDark {
+  background-color: var(--gray05);
+}
+
+.informationLight {
+  background-color: var(--semanticInformation01);
+}
+
+.informationDark {
+  background-color: var(--semanticInformation04);
+}
+
+.negativeLight {
+  background-color: var(--actionNegative02);
+}
+
+.negativeDark {
+  background-color: var(--actionNegative04);
+}
+
+.primaryLight {
+  background-color: var(--actionAccent01);
+}
+
+.primaryDark {
+  background-color: var(--actionAccent04);
+}
+
+.successLight {
+  background-color: var(--semanticSuccess01);
+}
+
+.successDark {
+  background-color: var(--semanticSuccess04);
+}
+
+.warningLight {
+  background-color: var(--semanticWarning01);
+}
+
+.warningDark {
+  background-color: var(--semanticWarning04);
+}
+
+.whiteLight {
+  background-color: var(--light01);
+}
+
+.whiteDark {
+  background-color: var(--dark04);
+}
+
+.uppercase {
+  text-transform: uppercase;
 }

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

@@ -0,0 +1,14 @@
+import { bool, func, node, oneOfType, shape, string } from 'prop-types';
+export const buttonType = shape({
+  colorTheme: string,
+  dataTestId: string,
+  disabled: bool,
+  Icon: oneOfType([string, func]),
+  iconPlacement: string,
+  loading: bool,
+  onClick: func,
+  size: string,
+  title: node,
+  type: string,
+  variant: string
+});

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

@@ -0,0 +1,137 @@
+import { COLOR_THEMES, SIZES, VARIANTS } from './constants';
+
+/**
+ * Returns the default UTIcon colorTheme and shade for the banner icon based on the
+ * banner's colorTheme and variant. Matches the mobile implementation.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ colorTheme: string, shade: string }}
+ */
+export const getDefaultIconTheme = (colorTheme, variant) => {
+  var _COLOR_THEMES$ERROR$C;
+  if (variant === VARIANTS.DARK) {
+    return colorTheme === COLOR_THEMES.NEGATIVE ? {
+      colorTheme: 'dark',
+      shade: '05'
+    } : {
+      colorTheme: 'light',
+      shade: '01'
+    };
+  }
+  return (_COLOR_THEMES$ERROR$C = {
+    [COLOR_THEMES.ERROR]: {
+      colorTheme: 'error',
+      shade: '04'
+    },
+    [COLOR_THEMES.GRAY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.INFORMATION]: {
+      colorTheme: 'information',
+      shade: '04'
+    },
+    [COLOR_THEMES.NEGATIVE]: {
+      colorTheme: 'light',
+      shade: '01'
+    },
+    [COLOR_THEMES.PRIMARY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [COLOR_THEMES.SUCCESS]: {
+      colorTheme: 'success',
+      shade: '04'
+    },
+    [COLOR_THEMES.WARNING]: {
+      colorTheme: 'warning',
+      shade: '04'
+    },
+    [COLOR_THEMES.WHITE]: {
+      colorTheme: 'accent',
+      shade: '04'
+    }
+  }[colorTheme]) !== null && _COLOR_THEMES$ERROR$C !== void 0 ? _COLOR_THEMES$ERROR$C : {
+    colorTheme: 'accent',
+    shade: '04'
+  };
+};
+
+/**
+ * Returns the default icon size in pixels based on the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {number}
+ */
+export const getDefaultIconSize = size => size === SIZES.LARGE ? 24 : 20;
+
+/**
+ * Returns the default colorTheme for buttons and the close button based on the
+ * banner variant. Dark variant uses 'negative'; light variant uses standard colors.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ button: string, onClose: string, secondaryButton: string }}
+ */
+export const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === VARIANTS.DARK;
+  return {
+    button: isDark ? 'negative' : 'secondary',
+    onClose: isDark ? 'negative' : 'gray',
+    secondaryButton: isDark ? 'negative' : 'secondary'
+  };
+};
+
+/**
+ * Returns the UTLabel variant and weight for the main text (children) based on
+ * the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {{ variant: string, weight: string }}
+ */
+export const getLabelStyles = size => {
+  var _SIZES$LARGE$SIZES$ME;
+  return (_SIZES$LARGE$SIZES$ME = {
+    [SIZES.LARGE]: {
+      titleVariant: 'title3',
+      descriptionVariant: 'body'
+    },
+    [SIZES.MEDIUM]: {
+      titleVariant: 'subtitle1',
+      descriptionVariant: 'small'
+    },
+    [SIZES.SMALL]: {
+      titleVariant: 'small',
+      descriptionVariant: 'small'
+    }
+  }[size]) !== null && _SIZES$LARGE$SIZES$ME !== void 0 ? _SIZES$LARGE$SIZES$ME : {
+    titleVariant: 'small',
+    descriptionVariant: 'small'
+  };
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's main text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use dark text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {string} UTLabel colorTheme value.
+ */
+export const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'dark';
+  }
+  return variant === VARIANTS.LIGHT ? 'dark' : 'light';
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's secondary text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use gray text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'gray').
+ * @returns {string} UTLabel colorTheme value.
+ */
+export const getSecondaryLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === COLOR_THEMES.NEGATIVE) {
+    return variant === VARIANTS.LIGHT ? 'light' : 'gray';
+  }
+  return variant === VARIANTS.LIGHT ? 'gray' : 'light';
+};

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { array, object, objectOf, string } from 'prop-types';
 import { mergeMultipleClassNames } from '../../utils/classesUtils';
@@ -168,7 +168,7 @@ const UTGraph = _ref => {
       crossAxisLeft,
       crossAxisRight
     } = _ref2;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Bars, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bars, {
       crossAxisLeft: crossAxisLeft,
       crossAxisRight: crossAxisRight,
       dataset: dataset,

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

@@ -146,8 +146,9 @@ const UTHeader = _ref => {
       height: BANNER_ICON_SIZE,
       width: BANNER_ICON_SIZE
     },
-    Icon: banner.Icon
-  }, banner.text)));
+    Icon: banner.Icon,
+    title: banner.text
+  })));
 };
 UTHeader.propTypes = {
   actions: arrayOf(object),