@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -0,0 +1,180 @@
+/* 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).'
+    },
+    descriptionProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the description.'
+    },
+    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,
+      description: 'Props adicionales que se pasan al componente Icon.'
+    },
+    classNames: {
+      control: false,
+      description: 'Clases CSS adicionales para personalizar el componente.'
+    },
+    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.'
+    },
+    titleProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the title.'
+    },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: Object.values(VARIANTS)
+    }
+  },
+  component: UTBanner,
+  parameters: {
+    controls: {
+      exclude: ['classNames']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar mensajes de notificación con soporte para icono, título, descripción, texto de ayuda, categoría y botones de acción. Soporta múltiples variantes de color y tamaño, y layouts horizontal y vertical.'
+      }
+    }
+  },
+  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/types.js

@@ -1 +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});
+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

@@ -1 +1,137 @@
-import{COLOR_THEMES,SIZES,VARIANTS}from"./constants";export const getDefaultIconTheme=(colorTheme,variant)=>{var _COLOR_THEMES$ERROR$C;return variant===VARIANTS.DARK?colorTheme===COLOR_THEMES.NEGATIVE?{colorTheme:"dark",shade:"05"}:{colorTheme:"light",shade:"01"}:null!==(_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])&&void 0!==_COLOR_THEMES$ERROR$C?_COLOR_THEMES$ERROR$C:{colorTheme:"accent",shade:"04"}};export const getDefaultIconSize=size=>size===SIZES.LARGE?24:20;export const getDefaultButtonColorTheme=variant=>{const isDark=variant===VARIANTS.DARK;return{button:isDark?"negative":"secondary",onClose:isDark?"negative":"gray",secondaryButton:isDark?"negative":"secondary"}};export const getLabelStyles=size=>{var _SIZES$LARGE$SIZES$ME;return null!==(_SIZES$LARGE$SIZES$ME={[SIZES.LARGE]:{titleVariant:"title3",descriptionVariant:"body"},[SIZES.MEDIUM]:{titleVariant:"subtitle1",descriptionVariant:"small"},[SIZES.SMALL]:{titleVariant:"small",descriptionVariant:"small"}}[size])&&void 0!==_SIZES$LARGE$SIZES$ME?_SIZES$LARGE$SIZES$ME:{titleVariant:"small",descriptionVariant:"small"}};export const getLabelColorTheme=(colorTheme,variant)=>colorTheme===COLOR_THEMES.NEGATIVE?variant===VARIANTS.LIGHT?"light":"dark":variant===VARIANTS.LIGHT?"dark":"light";export const getSecondaryLabelColorTheme=(colorTheme,variant)=>colorTheme===COLOR_THEMES.NEGATIVE?variant===VARIANTS.LIGHT?"light":"gray":variant===VARIANTS.LIGHT?"gray":"light";
+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';
+};