@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTButton/stories/UTButtonVariants.stories.js

@@ -0,0 +1,54 @@
+import UTButton from '..';
+import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
+const COMMON_PROPS = {
+  count: 3,
+  Icon: 'IconPencil'
+};
+export default {
+  title: 'Energy-UI/UTButton/Variants',
+  component: UTButton,
+  args: {
+    ...COMMON_ARGS
+  },
+  argTypes: {
+    ...COMMON_ARG_TYPES
+  },
+  parameters: {
+    ...COMMON_PARAMETERS
+  }
+};
+export const Filled = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Filled Variant',
+    variant: 'filled'
+  }
+};
+export const Semitransparent = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Semitransparent Variant',
+    variant: 'semitransparent'
+  }
+};
+export const Outlined = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Outlined Variant',
+    variant: 'outlined'
+  }
+};
+export const Shadow = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Shadow Variant',
+    variant: 'shadow'
+  }
+};
+export const Text = {
+  args: {
+    ...COMMON_PROPS,
+    children: 'Text Variant',
+    variant: 'text'
+  }
+};

package/dist/esm/components/UTButton/stories/storiesConstants.js

@@ -0,0 +1,215 @@
+import { joinArgTypes } from 'stories/utils';
+import { VARIANTS_NAMES, SIZES, ICON_PLACEMENTS, DEFAULT_PROPS, COLORS_MAPPER } from '../constants';
+
+// Common argTypes used across multiple stories files
+export const COMMON_ARG_TYPES = {
+  children: {
+    control: 'text',
+    description: 'Contenido del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  classNames: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del botón.',
+    options: Object.keys(COLORS_MAPPER),
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.colorTheme
+      },
+      type: {
+        summary: joinArgTypes(Object.keys(COLORS_MAPPER))
+      }
+    }
+  },
+  count: {
+    control: 'number',
+    description: 'Número a mostrar en un badge dentro del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  dataTestId: {
+    control: 'text',
+    description: 'Identificador de test para el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón está deshabilitado.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.disabled
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  hideTextOnResponsive: {
+    control: 'boolean',
+    description: 'Si es `true` y el icono no es `null`, el contenido del botón no se muestra en dispositivos móviles.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.hideTextOnResponsive
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  Icon: {
+    control: 'text',
+    description: 'Icono a mostrar en el botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: joinArgTypes(['string', 'ReactComponent'])
+      }
+    }
+  },
+  iconPlacement: {
+    control: 'inline-radio',
+    description: 'Posición del icono en relación al contenido del botón.',
+    options: Object.values(ICON_PLACEMENTS),
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.iconPlacement
+      },
+      type: {
+        summary: joinArgTypes(Object.values(ICON_PLACEMENTS))
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, se muestra un spinner sobre el botón.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.loading
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  onClick: {
+    control: false,
+    description: 'Callback ejecutado cuando se hace clic en el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  size: {
+    control: 'inline-radio',
+    description: 'Tamaño del botón.',
+    options: Object.values(SIZES),
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.size
+      },
+      type: {
+        summary: joinArgTypes(Object.values(SIZES))
+      }
+    }
+  },
+  type: {
+    control: 'text',
+    description: 'Atributo HTML type del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  variant: {
+    control: 'select',
+    description: 'Variante del botón.',
+    options: Object.values(VARIANTS_NAMES),
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.variant
+      },
+      type: {
+        summary: joinArgTypes(Object.values(VARIANTS_NAMES))
+      }
+    }
+  }
+};
+
+// Common args used across multiple stories files
+export const COMMON_ARGS = {
+  colorTheme: DEFAULT_PROPS.colorTheme,
+  dataTestId: 'customButtonId',
+  disabled: DEFAULT_PROPS.disabled,
+  hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
+  iconPlacement: DEFAULT_PROPS.iconPlacement,
+  loading: DEFAULT_PROPS.loading,
+  size: DEFAULT_PROPS.size,
+  type: 'button',
+  variant: DEFAULT_PROPS.variant
+};
+
+// Common parameters used across multiple stories files
+export const COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'classNames', 'onClick']
+  },
+  docs: {
+    description: {
+      component: 'Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable.'
+    }
+  }
+};

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

@@ -0,0 +1,106 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+$big-icon: var(--UT-button-icon-size-md, 1.5rem);
+$small-icon: var(--UT-button-icon-size-sm, 1.25rem);
+
+.baseIcon {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.icon,
+.iconOnlySmall,
+.adaptableIconSmall {
+  font-size: $small-icon;
+  height: $small-icon;
+  width: $small-icon;
+}
+
+.iconOnlyLarge,
+.iconOnlyMedium {
+  font-size: $big-icon;
+  height: $big-icon;
+  width: $big-icon;
+}
+
+.adaptableIconLarge,
+.adaptableIconMedium {
+  @media #{$mobile} {
+    font-size: $big-icon;
+    height: $big-icon;
+    width: $big-icon;
+  }
+}
+
+%childrenContainer {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.smallChildrenContainer {
+  @extend %childrenContainer;
+  grid-gap: var(--UT-button-gap-sm, 8px);
+}
+
+.largeChildrenContainer,
+.mediumChildrenContainer {
+  @extend %childrenContainer;
+  grid-gap: var(--UT-button-gap-md, 8px);
+}
+
+.loading {
+  position: absolute;
+}
+
+.paddingLarge {
+  padding: var(--UT-button-padding-md, 12px) var(--UT-button-padding-lg, 16px);
+}
+
+.paddingMedium {
+  padding: var(--UT-button-padding-sm, 8px) var(--UT-button-padding-md, 12px);
+}
+
+.paddingSmall {
+  padding: var(--UT-button-padding-xs, 4px) var(--UT-button-padding-sm, 8px);
+}
+
+.hideTextOnResponsive {
+  .textContainer {
+    @media #{$mobile} {
+      display: none;
+    }
+  }
+
+  &.paddingLarge {
+    @media #{$mobile} {
+      padding: var(--UT-button-padding-md, 12px);
+    }
+  }
+
+  &.paddingMedium {
+    @media #{$mobile} {
+      padding: var(--UT-button-padding-sm, 8px);
+    }
+  }
+
+  &.paddingSmall {
+    @media #{$mobile} {
+      padding: var(--UT-button-padding-xs, 4px);
+    }
+  }
+}
+
+.noChildren {
+  &.paddingLarge {
+    padding: var(--UT-button-padding-md, 12px);
+  }
+
+  &.paddingMedium {
+    padding: var(--UT-button-padding-sm, 8px);
+  }
+
+  &.paddingSmall {
+    padding: var(--UT-button-padding-xs, 4px);
+  }
+}

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

@@ -0,0 +1,136 @@
+import { withImportant } from '../../utils/classesUtils';
+import { getShadow } from '../../utils/shadowUtils';
+import { COLORS_MAPPER, DEFAULT_PROPS, SHADOW_MAPPER, VARIANTS_NAMES } from './constants';
+export const variantsColorTheme = (theme, colorTheme, variant) => {
+  var _theme$Palette, _theme$Palette$shadow;
+  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const actionTheme = actionPaletteColors[actionColorName];
+  const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[SHADOW_MAPPER[actionColorName]]) || 'transparent';
+  const negativeTheme = actionPaletteColors[COLORS_MAPPER.negative];
+  const neutralTheme = actionPaletteColors[COLORS_MAPPER.secondary];
+  const lightTheme = actionPaletteColors[COLORS_MAPPER.light];
+  const definition = {
+    [VARIANTS_NAMES.filled]: {
+      backgroundColor: actionTheme['04'],
+      border: '1px solid transparent',
+      fill: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
+        boxShadow: getShadow({
+          color: shadowTheme,
+          level: 2
+        })
+      },
+      '&:active': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+        boxShadow: getShadow({
+          color: shadowTheme,
+          level: 2
+        })
+      }
+    },
+    [VARIANTS_NAMES.semitransparent]: {
+      backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+      border: '1px solid transparent',
+      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
+        boxShadow: 'none'
+      }
+    },
+    [VARIANTS_NAMES.outlined]: {
+      border: "1px solid ".concat(actionColorName === COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
+      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      }
+    },
+    [VARIANTS_NAMES.text]: {
+      border: '1px solid transparent',
+      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: 'none'
+      }
+    },
+    [VARIANTS_NAMES.shadow]: {
+      backgroundColor: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
+      boxShadow: getShadow({
+        color: shadowTheme,
+        level: 1
+      }),
+      border: '1px solid transparent',
+      fill: actionTheme['05'],
+      '&:hover': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
+        boxShadow: getShadow({
+          color: shadowTheme,
+          level: 2
+        })
+      },
+      '&:active': {
+        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
+        boxShadow: getShadow({
+          color: shadowTheme,
+          level: 2
+        })
+      }
+    }
+  };
+  const disabledStyle = {
+    opacity: withImportant(0.5),
+    '&.MuiButton-root:hover.Mui-disabled': {
+      backgroundColor: (definition[variant] || definition[DEFAULT_PROPS.variant]).backgroundColor
+    }
+  };
+  return {
+    ...(definition[variant] || definition[DEFAULT_PROPS.variant]),
+    disabled: disabledStyle
+  };
+};
+const baseButtonTheme = theme => {
+  var _theme$UTButton;
+  return {
+    root: {
+      borderRadius: 'var(--UT-button-radius, 4px)',
+      boxShadow: 'none',
+      minWidth: 'auto',
+      textTransform: 'none',
+      transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+    },
+    circularProgress: {
+      color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 || (_theme$UTButton = _theme$UTButton.circularProgress) === null || _theme$UTButton === void 0 ? void 0 : _theme$UTButton.color) || '484848'
+    }
+  };
+};
+export const retrieveStyle = _ref => {
+  let {
+    colorTheme,
+    variant,
+    theme
+  } = _ref;
+  const baseTheme = baseButtonTheme(theme);
+  const variantTheme = variantsColorTheme(theme, colorTheme, variant);
+  return {
+    ...baseTheme,
+    disabled: variantTheme.disabled,
+    root: {
+      ...baseTheme.root,
+      ...variantTheme
+    }
+  };
+};

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

@@ -0,0 +1,31 @@
+import { COLOR_THEMES } from '../../constants/Palette';
+import { capitalize, isUTIcon } from '../../utils/componentUtils';
+import UTIcon from '../UTIcon';
+import { COLORS_MAPPER, SIZES, VARIANTS_NAMES } from './constants';
+import styles from './styles.module.scss';
+const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === VARIANTS_NAMES.filled ? buttonColorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative : COLORS_MAPPER[buttonColorTheme];
+export const getIconProps = _ref => {
+  let {
+    className,
+    colorTheme: buttonColorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    Icon,
+    size,
+    variant: buttonVariant
+  } = _ref;
+  return Icon ? {
+    IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
+    className: "\n          ".concat(styles.baseIcon, "\n          ").concat(className, "\n          ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n          ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n        "),
+    ...(isUTIcon(Icon) ? {
+      colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
+      name: Icon
+    } : {})
+  } : {};
+};
+export const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({
+  colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
+  variant: buttonSize === SIZES.small ? 'small' : 'body',
+  weight: 'medium'
+});
+export const getCounterColorTheme = (colorTheme, variant) => variant === VARIANTS_NAMES.filled ? colorTheme === COLOR_THEMES.negative ? 'dark' : 'negative' : variant === VARIANTS_NAMES.outlined ? colorTheme === COLOR_THEMES.negative ? 'negative' : colorTheme === COLOR_THEMES.primary ? COLORS_MAPPER[colorTheme] : colorTheme === COLOR_THEMES.gray ? 'gray' : 'dark' : colorTheme === COLOR_THEMES.gray ? 'gray' : COLORS_MAPPER[colorTheme];

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

@@ -0,0 +1,30 @@
+# UTButtonGroup
+
+A component that renders a group of buttons with consistent styling and behavior. The selected button is highlighted with a `shadow` variant (for `primary` and `neutral` color themes) or `filled` variant (for `negative`), while inactive buttons use the `text` variant.
+
+The container applies padding and border-radius via design tokens (`--UT-buttonGroup-padding`, `--UT-buttonGroup-radius`), making both values overridable per utility.
+
+## Props
+
+| Name       | Type            | Default   | Required | Description                                                                                    |
+| ---------- | :-------------- | --------- | -------- | ---------------------------------------------------------------------------------------------- |
+| actions    | array           | -         | Yes      | Array of action objects to render. Each action must include `Icon`, `id`, and `onClick` props. |
+| colorTheme | string          | 'primary' | No       | The color theme to use. One of: `primary`, `neutral`, `negative`.                              |
+| selected   | string / number | -         | Yes      | ID of the currently active/selected button.                                                    |
+| shape      | string          | 'square'  | No       | Shape of the button group. One of: `square`, `circle`.                                         |
+| size       | string          | 'small'   | No       | Size of the buttons. One of: `small`, `medium`, `large`.                                       |
+
+## Active variant by colorTheme
+
+| colorTheme | Active variant |
+| ---------- | -------------- |
+| primary    | shadow         |
+| neutral    | shadow         |
+| negative   | filled         |
+
+## Design tokens
+
+| Token                    | Default  | Semantic token  | Description                                    |
+| ------------------------ | -------- | --------------- | ---------------------------------------------- |
+| `--UT-buttonGroup-padding` | `0.25rem` | `padding-2xs`  | Padding del contenedor principal               |
+| `--UT-buttonGroup-radius`  | `8px`    | `radius-md`    | Border-radius del contenedor (variante square) |

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

@@ -0,0 +1,11 @@
+export const BACKGROUND_COLOR_MAPPER = theme => ({
+  primary: theme.lightBackground,
+  negative: theme.negativeBackground,
+  neutral: theme.lightBackground
+});
+export const CIRCLE_TYPE = 'circle';
+export const SQUARE_TYPE = 'square';
+export const DEFAULT_TYPE = SQUARE_TYPE;
+export const DEFAULT_COLOR_THEME = 'primary';
+export const DEFAULT_SIZE = 'small';
+export const SHADOW_ACTIVE_COLOR_THEMES = ['primary', 'neutral'];

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { arrayOf, element, func, number, objectOf, oneOfType, shape, string } from 'prop-types';
+import UTButton from '../UTButton';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import { BACKGROUND_COLOR_MAPPER, DEFAULT_COLOR_THEME, DEFAULT_SIZE, DEFAULT_TYPE, SHADOW_ACTIVE_COLOR_THEMES } from './constants';
+import styles from './styles.module.scss';
+const UTButtonGroup = _ref => {
+  let {
+    actions,
+    classes: theme,
+    colorTheme = DEFAULT_COLOR_THEME,
+    selected,
+    shape: type = DEFAULT_TYPE,
+    size = DEFAULT_SIZE
+  } = _ref;
+  const backgroundColor = BACKGROUND_COLOR_MAPPER(theme)[colorTheme] || BACKGROUND_COLOR_MAPPER(theme).primary;
+  const activeVariant = SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'shadow' : 'filled';
+  const inactiveColorTheme = SHADOW_ACTIVE_COLOR_THEMES.includes(colorTheme) ? 'gray' : colorTheme;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles["".concat(type, "Container")], " ").concat(backgroundColor)
+  }, actions.map(_ref2 => {
+    let {
+      dataTestId,
+      Icon,
+      id,
+      onClick,
+      label
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(UTButton, {
+      colorTheme: selected === id ? colorTheme : inactiveColorTheme,
+      dataTestId: dataTestId,
+      Icon: Icon,
+      key: id,
+      onClick: onClick,
+      size: size,
+      variant: selected === id ? activeVariant : 'text'
+    }, label);
+  }));
+};
+UTButtonGroup.propTypes = {
+  actions: arrayOf(shape({
+    dataTestId: string,
+    Icon: oneOfType([string, element]),
+    id: oneOfType([number, string]),
+    label: string,
+    onClick: func
+  })).isRequired,
+  classes: objectOf(string),
+  colorTheme: string,
+  selected: oneOfType([number, string]).isRequired,
+  shape: string,
+  size: string
+};
+export default WithTheme(retrieveStyle)(UTButtonGroup);