@widergy/energy-ui 3.167.1 → 3.168.0

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/components/GradientTrack/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { GLOW_FILTER_ID, GRADIENT_ID, INNER_CIRCLE_RADIUS, TRACK_CENTER, TRACK_RADIUS, TRACK_STROKE_WIDTH, TRACK_VIEW_BOX_SIZE } from '../../constants';
+import styles from '../../styles.module.scss';
+const GradientTrack = () => /*#__PURE__*/React.createElement("svg", {
+  className: styles.track,
+  overflow: "visible",
+  viewBox: "0 0 ".concat(TRACK_VIEW_BOX_SIZE, " ").concat(TRACK_VIEW_BOX_SIZE),
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  id: GRADIENT_ID,
+  x1: "0%",
+  x2: "100%",
+  y1: "0%",
+  y2: "100%"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0%",
+  style: {
+    stopColor: 'var(--UT-loading-color-start, #25E0A6)'
+  }
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "100%",
+  style: {
+    stopColor: 'var(--UT-loading-color-end, #20BBFC)'
+  }
+})), /*#__PURE__*/React.createElement("filter", {
+  id: GLOW_FILTER_ID,
+  x: "-50%",
+  y: "-50%",
+  height: "200%",
+  width: "200%"
+}, /*#__PURE__*/React.createElement("feGaussianBlur", {
+  result: "blur",
+  stdDeviation: "12"
+}))), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackGlow,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  filter: "url(#".concat(GLOW_FILTER_ID, ")"),
+  r: TRACK_RADIUS
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackBackground,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: TRACK_RADIUS,
+  strokeWidth: TRACK_STROKE_WIDTH
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.innerFill,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: INNER_CIRCLE_RADIUS
+}), /*#__PURE__*/React.createElement("circle", {
+  className: styles.trackGradient,
+  cx: TRACK_CENTER,
+  cy: TRACK_CENTER,
+  r: TRACK_RADIUS,
+  strokeWidth: TRACK_STROKE_WIDTH
+}));
+export default GradientTrack;

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/constants.js

@@ -0,0 +1,8 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const TRACK_VIEW_BOX_SIZE = 120;
+export const TRACK_CENTER = 60;
+export const TRACK_RADIUS = 53;
+export const TRACK_STROKE_WIDTH = 11;
+export const INNER_CIRCLE_RADIUS = 47.5;
+export const GRADIENT_ID = 'UTLoadingTrackGradient';
+export const GLOW_FILTER_ID = 'UTLoadingGlow';

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { bool, node, objectOf, string } from 'prop-types';
+import UTLabel from '../../../../../UTLabel';
+import WithTheme from '../../../../../WithTheme';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { DEFAULT_LOADING_TEXT } from './constants';
+import GradientTrack from './components/GradientTrack';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  UTLoading: UTLoadingTestIds
+} = TEST_IDS;
+const LogoLoader = _ref => {
+  let {
+    children,
+    classes,
+    dataTestId,
+    fullScreen,
+    loading,
+    Logo,
+    text = DEFAULT_LOADING_TEXT
+  } = _ref;
+  return loading ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(fullScreen ? styles.fullScreen : styles.contained, " ").concat(classes.root),
+    "data-testid": dataTestId || UTLoadingTestIds.logoLoader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.loaderWrapper
+  }, /*#__PURE__*/React.createElement(GradientTrack, null), /*#__PURE__*/React.createElement("div", {
+    className: styles.innerCircle
+  }, Logo && /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.logo,
+    src: Logo
+  }))), text && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.text
+  }, text)) : children;
+};
+LogoLoader.propTypes = {
+  children: node,
+  classes: objectOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  Logo: string,
+  text: string
+};
+export default WithTheme(retrieveStyle)(LogoLoader);

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/styles.module.scss

@@ -0,0 +1,107 @@
+@use '../../../../../../scss/variables/colors.module.scss' as *;
+
+$animation-duration: 1.4s;
+$fade-in-animation: fadeIn 0.7s ease-in-out forwards;
+$default-container-background-color: #ffffff;
+
+.contained {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.container {
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.fullScreen {
+  background-color: var(--light01, $default-container-background-color);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.loaderWrapper {
+  align-items: center;
+  animation: $fade-in-animation;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.track {
+  animation: spin $animation-duration linear infinite;
+  display: block;
+  height: var(--UT-loading-size, 7.5rem);
+  width: var(--UT-loading-size, 7.5rem);
+}
+
+.trackGlow {
+  fill: none;
+  opacity: 0.72;
+  stroke: url('#UTLoadingTrackGradient');
+  stroke-width: 18;
+}
+
+.trackBackground {
+  fill: none;
+  stroke: var(--light02);
+  stroke-width: 11;
+}
+
+.innerFill {
+  fill: var(--light01, $white);
+}
+
+.trackGradient {
+  fill: none;
+  stroke: url('#UTLoadingTrackGradient');
+  stroke-linecap: round;
+  stroke-width: 11;
+}
+
+.innerCircle {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.logo {
+  display: block;
+  height: var(--UT-loading-logo-width, 3.5rem);
+  object-fit: contain;
+  width: var(--UT-loading-logo-width, 3.5rem);
+}
+
+.text {
+  animation: $fade-in-animation;
+  font-size: var(--UT-loading-text-size, 0.875rem) !important;
+  margin-top: var(--UT-loading-gap, 1.5rem) !important;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/components/UTLoading/versions/V1/components/LogoLoader/theme.js

@@ -0,0 +1,11 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette;
+  let {
+    theme
+  } = _ref;
+  return {
+    root: {
+      backgroundColor: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.light) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette['01']) || '#FFFFFF'
+    }
+  };
+};

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/constants.js

@@ -0,0 +1 @@
+export const GRADIENT_ID = 'ut-spinner-gradient';

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/components/SpinnerTrack/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { arrayOf, objectOf, string } from 'prop-types';
+import { SPINNER_ARC_LENGTH, SPINNER_CENTER, SPINNER_CIRCUMFERENCE, SPINNER_RADIUS, SPINNER_VIEW_BOX_SIZE } from '../../constants';
+import styles from '../../styles.module.scss';
+import { GRADIENT_ID } from './constants';
+const SpinnerTrack = _ref => {
+  let {
+    classes = {},
+    colors
+  } = _ref;
+  const useGradient = colors && colors.length >= 2;
+  const solidColor = !useGradient && colors && colors.length === 1 ? colors[0] : undefined;
+  const arcStroke = useGradient ? "url(#".concat(GRADIENT_ID, ")") : solidColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: styles.spinner,
+    viewBox: "0 0 ".concat(SPINNER_VIEW_BOX_SIZE, " ").concat(SPINNER_VIEW_BOX_SIZE),
+    xmlns: "http://www.w3.org/2000/svg"
+  }, useGradient && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: GRADIENT_ID,
+    x1: "0%",
+    y1: "0%",
+    x2: "0%",
+    y2: "100%"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: colors[0]
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: colors[1]
+  }))), /*#__PURE__*/React.createElement("circle", {
+    className: "".concat(styles.track, " ").concat(classes.track || ''),
+    cx: SPINNER_CENTER,
+    cy: SPINNER_CENTER,
+    r: SPINNER_RADIUS
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: "".concat(styles.arc, " ").concat(!arcStroke ? classes.arc || '' : ''),
+    cx: SPINNER_CENTER,
+    cy: SPINNER_CENTER,
+    r: SPINNER_RADIUS,
+    strokeDasharray: "".concat(SPINNER_ARC_LENGTH, " ").concat(SPINNER_CIRCUMFERENCE),
+    style: arcStroke ? {
+      stroke: arcStroke
+    } : undefined
+  }));
+};
+SpinnerTrack.propTypes = {
+  classes: objectOf(string),
+  colors: arrayOf(string)
+};
+export default SpinnerTrack;

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/constants.js

@@ -0,0 +1,6 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const SPINNER_VIEW_BOX_SIZE = 50;
+export const SPINNER_CENTER = 25;
+export const SPINNER_RADIUS = 20;
+export const SPINNER_CIRCUMFERENCE = 126;
+export const SPINNER_ARC_LENGTH = 94;

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { arrayOf, bool, node, objectOf, string } from 'prop-types';
+import UTLabel from '../../../../../UTLabel';
+import WithTheme from '../../../../../WithTheme';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { DEFAULT_LOADING_TEXT } from './constants';
+import SpinnerTrack from './components/SpinnerTrack';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const {
+  UTLoading: UTLoadingTestIds
+} = TEST_IDS;
+const Spinner = _ref => {
+  let {
+    children,
+    classes,
+    colors,
+    dataTestId,
+    loading,
+    preventUnmount = false,
+    text = DEFAULT_LOADING_TEXT,
+    wrapperClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId || UTLoadingTestIds.spinner
+  }, /*#__PURE__*/React.createElement(SpinnerTrack, {
+    classes: classes,
+    colors: colors
+  }), text && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.text
+  }, text)), preventUnmount ? /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: loading ? {
+      display: 'none'
+    } : {}
+  }, children) : !loading && children);
+};
+Spinner.propTypes = {
+  children: node,
+  classes: objectOf(string),
+  colors: arrayOf(string),
+  dataTestId: string,
+  loading: bool,
+  preventUnmount: bool,
+  text: string,
+  wrapperClassName: string
+};
+export default WithTheme(retrieveStyle)(Spinner);

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/styles.module.scss

@@ -0,0 +1,39 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.spinner {
+  animation: spin 0.8s linear infinite;
+  display: block;
+  flex-shrink: 0;
+  height: var(--UT-loading-size, 85px);
+  width: var(--UT-loading-size, 85px);
+}
+
+.track {
+  fill: none;
+  opacity: 0.15;
+  stroke-width: 4;
+}
+
+.arc {
+  fill: none;
+  stroke-dasharray: 94 126;
+  stroke-linecap: round;
+  stroke-width: 4;
+}
+
+.text {
+  margin-top: var(--UT-loading-gap, 1.5rem) !important;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/components/UTLoading/versions/V1/components/Spinner/theme.js

@@ -0,0 +1,14 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2;
+  let {
+    theme
+  } = _ref;
+  return {
+    arc: {
+      stroke: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.accent) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette['05']) || '#0136E7'
+    },
+    track: {
+      stroke: ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.accent) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2['05']) || '#0136E7'
+    }
+  };
+};

package/dist/esm/components/UTLoading/versions/V1/constants.js

@@ -0,0 +1,5 @@
+export const DEFAULT_LOADING_TEXT = 'Cargando...';
+export const DEFAULT_PROPS = {
+  fullScreen: true,
+  text: DEFAULT_LOADING_TEXT
+};

package/dist/esm/components/UTLoading/versions/V1/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { arrayOf, bool, node, string } from 'prop-types';
+import LogoLoader from './components/LogoLoader';
+import Spinner from './components/Spinner';
+const V1 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/React.createElement(LogoLoader, props) : /*#__PURE__*/React.createElement(Spinner, props);
+};
+V1.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  text: string,
+  useUtilityLoading: bool,
+  wrapperClassName: string
+};
+export default V1;

package/dist/esm/components/UTLoading/versions/V1/stories/UTLoadingV1.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import * as UTLoadingV1Stories from './UTLoadingV1.stories';
+
+<Meta of={UTLoadingV1Stories} />
+
+# UTLoading — V1
+
+Nueva versión del componente de carga. Incluye un Spinner custom con línea más gruesa y un LogoLoader con track de gradiente animado usando los colores de identidad del cliente.
+
+## Cómo activar V1
+
+Pasar la prop `version="V1"` al componente. Sin esta prop el comportamiento es idéntico al actual (V0).
+
+```jsx
+<UTLoading version="V1" loading useUtilityLoading={false} />
+```
+
+## Spinner
+
+Spinner circular CSS puro. Muestra una línea circular con track de fondo y arco superior en el color de acento del tema. Soporta un label de texto opcional debajo.
+
+<Canvas of={UTLoadingV1Stories.SpinnerPlayground} />
+<Controls of={UTLoadingV1Stories.SpinnerPlayground} />
+
+## LogoLoader
+
+Loader con track circular de gradiente de 2 colores (colores de identidad del cliente). El logo/isologo del cliente se muestra centrado con una animación de escala sincronizada con la rotación del track.
+
+### Full Screen
+
+Cuando `fullScreen=true` el contenedor ocupa toda la pantalla con `position: fixed` y `z-index: 999`.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderFullScreen} />
+
+### En contenedor
+
+Cuando `fullScreen=false` el loader se adapta al contenedor padre y se centra dentro de él.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderEnContenedor} />
+
+### Con logo del cliente
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderConLogo} />
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — versión a renderizar |
+| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
+| `useUtilityLoading` | `bool` | — | `true` → LogoLoader; `false` → Spinner |
+| `fullScreen` | `bool` | `true` | Full screen (`position: fixed`) o adaptado al contenedor |
+| `Logo` | `string` | — | URL del SVG del logo/isologo del cliente |
+| `text` | `string` | `'Cargando...'` | Texto de carga. Pasar `''` para ocultarlo |
+| `dataTestId` | `string` | — | `data-testid` del elemento raíz |
+| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (solo Spinner) |
+| `wrapperClassName` | `string` | — | Clase del wrapper de children (solo Spinner) |
+
+## Design tokens
+
+| Token | Propiedad | Fallback |
+|-------|-----------|---------|
+| `--UT-loading-track-color-start` | Color inicial del gradiente del track | Color de identidad 1 del cliente |
+| `--UT-loading-track-color-end` | Color final del gradiente del track | Color de identidad 2 del cliente |
+| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
+
+> Los tokens de color del gradiente se inyectan automáticamente desde los colores de identidad del cliente (`identitySolidTone1` y `identitySolidTone2`).