@widergy/energy-ui 3.167.0 → 3.168.0

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

@@ -0,0 +1,362 @@
+import React from 'react';
+import UTLoading from '../../../index';
+export default {
+  args: {
+    loading: true,
+    version: 'V1'
+  },
+  argTypes: {
+    colors: {
+      control: 'object',
+      description: 'Array de colores para el Spinner. 2 colores → gradiente lineal. 1 color → sólido. Sin prop → usa el color del tema.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string[]'
+        }
+      }
+    },
+    dataTestId: {
+      control: 'text',
+      description: 'Identificador para pruebas automatizadas.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    fullScreen: {
+      control: 'boolean',
+      description: 'Cuando es true el loader ocupa toda la pantalla (position fixed). Cuando es false se adapta al contenedor padre.',
+      table: {
+        defaultValue: {
+          summary: 'true'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Controla si se muestra el loader o los children.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    Logo: {
+      control: 'text',
+      description: 'URL del asset SVG del logo/isologo del cliente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    text: {
+      control: 'text',
+      description: 'Texto de carga opcional.',
+      table: {
+        defaultValue: {
+          summary: 'Cargando...'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    useUtilityLoading: {
+      control: 'boolean',
+      description: 'Cuando es true muestra el LogoLoader. Cuando es false muestra el Spinner nuevo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    version: {
+      control: 'select',
+      description: 'Versión del componente a utilizar.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    }
+  },
+  component: UTLoading,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'className', 'color', 'size', 'textClassName', 'thickness', 'wrapperClassName']
+    },
+    docs: {
+      description: {
+        component: 'UTLoading V1 — Nueva versión del componente de carga. Incluye un Spinner custom con línea gruesa y un LogoLoader con track de gradiente animado y logo del cliente.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTLoading/V1'
+};
+export const SpinnerPlayground = {
+  args: {
+    loading: true,
+    text: 'Cargando...',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  name: 'Spinner — Playground',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner circular custom con línea gruesa y label de texto opcional.'
+      }
+    }
+  }
+};
+export const SpinnerConGradiente = {
+  args: {
+    colors: ['var(--UT-loading-color-start)', 'var(--UT-loading-color-end)'],
+    loading: true,
+    text: 'Cargando...',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, "\n          :root {\n            --identitySolidTone3: #4D97FA;\n            --identitySolidTone2: #7BB8FF;\n            --UT-loading-color-start: var(--identitySolidTone3);\n            --UT-loading-color-end: var(--identitySolidTone2);\n          }\n        "), /*#__PURE__*/React.createElement(Story, null))],
+  name: 'Spinner — Con gradiente',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner con gradiente lineal. Se pasan 2 colores vía prop `colors`. En producción se inyectan desde los design tokens `--UT-loading-color-start` y `--UT-loading-color-end`.'
+      }
+    }
+  }
+};
+export const SpinnerSinTexto = {
+  args: {
+    loading: true,
+    text: '',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  name: 'Spinner — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner sin label de texto.'
+      }
+    }
+  }
+};
+export const LogoLoaderFullScreen = {
+  args: {
+    fullScreen: true,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: '',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  name: 'LogoLoader — Full Screen',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader en modo full screen (position fixed, z-index 999). Muestra el track con gradiente de identidad del cliente rotando.'
+      }
+    }
+  }
+};
+export const LogoLoaderEnContenedor = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: 'Cargando...',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — En contenedor',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader adaptado al contenedor padre (fullScreen=false). Se centra dentro del div contenedor.'
+      }
+    }
+  }
+};
+export const LogoLoaderConLogo = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: 'Cargando...',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — Con logo',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader con logo SVG del cliente centrado dentro del track.'
+      }
+    }
+  }
+};
+export const LogoLoaderSinTexto = {
+  args: {
+    fullScreen: false,
+    loading: true,
+    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
+    text: '',
+    useUtilityLoading: true,
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader sin label de texto debajo del track.'
+      }
+    }
+  }
+};
+export const TestSite = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading true"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: true,
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 sin texto"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: true,
+    text: "",
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading false (muestra children)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: false,
+    useUtilityLoading: false,
+    version: "V1"
+  }, /*#__PURE__*/React.createElement("span", null, "Contenido cargado")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 en contenedor (fullScreen=false)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '200px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    fullScreen: false,
+    loading: true,
+    Logo: "https://utilitygo-demo-qa-ev.widergydev.com/favicon.png",
+    useUtilityLoading: true,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 loading false (muestra children)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '80px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    fullScreen: false,
+    loading: false,
+    useUtilityLoading: true,
+    version: "V1"
+  }, /*#__PURE__*/React.createElement("span", null, "Contenido cargado"))))),
+  name: 'Test Site',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Casos de prueba para el Storybook Test Runner.'
+      }
+    }
+  }
+};

package/dist/esm/constants/testIds.js

@@ -163,6 +163,10 @@ export const TEST_IDS = {
   wrapperObservation: {
     actionIcon: 'wrapperObservation.actionIcon.'
   },
+  UTLoading: {
+    logoLoader: 'UTLoading.logoLoader',
+    spinner: 'UTLoading.spinner'
+  },
   UTSnackbar: {
     closeButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".closeButton"),
     description: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".description"),

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -1,5 +1,8 @@
 export const baseTokens = {
   base: {
+    'size-12a': '4.5rem',
+    'size-13a': '7.5rem',
+    'size-16a': '12.5rem',
     'size-full': '100%',
     'size-0': '0rem',
     'size-1': '0.125rem',
@@ -131,6 +134,12 @@ export const baseTokens = {
     'size-control-xl': 'size-11',
     'size-control-2xl': 'size-12',
     'size-control-3xl': 'size-13',
+    'size-control-4xl': 'size-13a',
+    'size-brand-logo-2xs': 'size-11',
+    'size-brand-logo-xs': 'size-12a',
+    'size-brand-logo-sm': 'size-13a',
+    'size-brand-logo-md': 'size-15',
+    'size-brand-logo-lg': 'size-16a',
     'size-icon-3xs': 'size-4',
     'size-icon-2xs': 'size-5',
     'size-icon-xs': 'size-6',
@@ -292,6 +301,12 @@ export const baseTokens = {
     'UT-datepicker-calendar-gap': 'gap-lg',
     'UT-datepicker-calendar-padding': 'padding-md',
     'UT-datepicker-input-padding-x': 'padding-sm',
-    'UT-datepicker-input-height': 'size-control-sm'
+    'UT-datepicker-input-height': 'size-control-sm',
+    'UT-loading-size': 'size-control-4xl',
+    'UT-loading-logo-width': 'size-brand-logo-2xs',
+    'UT-loading-color-start': 'var(--identitySolidTone3)',
+    'UT-loading-color-end': 'var(--identitySolidTone2)',
+    'UT-loading-text-size': 'font-body-size-md',
+    'UT-loading-gap': 'gap-lg'
   }
 };

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.baseTokens = void 0;
 const baseTokens = exports.baseTokens = {
   base: {
+    'size-12a': '4.5rem',
+    'size-13a': '7.5rem',
+    'size-16a': '12.5rem',
     'size-full': '100%',
     'size-0': '0rem',
     'size-1': '0.125rem',
@@ -137,6 +140,12 @@ const baseTokens = exports.baseTokens = {
     'size-control-xl': 'size-11',
     'size-control-2xl': 'size-12',
     'size-control-3xl': 'size-13',
+    'size-control-4xl': 'size-13a',
+    'size-brand-logo-2xs': 'size-11',
+    'size-brand-logo-xs': 'size-12a',
+    'size-brand-logo-sm': 'size-13a',
+    'size-brand-logo-md': 'size-15',
+    'size-brand-logo-lg': 'size-16a',
     'size-icon-3xs': 'size-4',
     'size-icon-2xs': 'size-5',
     'size-icon-xs': 'size-6',
@@ -298,6 +307,12 @@ const baseTokens = exports.baseTokens = {
     'UT-datepicker-calendar-gap': 'gap-lg',
     'UT-datepicker-calendar-padding': 'padding-md',
     'UT-datepicker-input-padding-x': 'padding-sm',
-    'UT-datepicker-input-height': 'size-control-sm'
+    'UT-datepicker-input-height': 'size-control-sm',
+    'UT-loading-size': 'size-control-4xl',
+    'UT-loading-logo-width': 'size-brand-logo-2xs',
+    'UT-loading-color-start': 'var(--identitySolidTone3)',
+    'UT-loading-color-end': 'var(--identitySolidTone2)',
+    'UT-loading-text-size': 'font-body-size-md',
+    'UT-loading-gap': 'gap-lg'
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.167.0",
+  "version": "3.168.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",