@widergy/energy-ui 3.171.3 → 3.172.1

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

@@ -0,0 +1,325 @@
+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 { joinArgTypes } from 'stories/utils';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+import UTTracker from '.';
+const subSteps = [{
+  id: 1,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 2,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 3,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}];
+const defaultSteps = [{
+  id: 1,
+  subSteps,
+  title: 'Solicitud confirmada'
+}, {
+  id: 2,
+  subSteps,
+  title: 'En preparación'
+}, {
+  id: 3,
+  title: 'En camino'
+}, {
+  description: 'Fecha estimada 07 de agosto',
+  id: 4,
+  title: 'Entregado'
+}];
+export default {
+  args: {
+    currentStep: 2,
+    description: 'Hora estimada de entrega 7:00 PM',
+    detailsTab: {
+      enabled: true,
+      title: 'Ver Detalle'
+    },
+    mode: CARD,
+    steps: defaultSteps,
+    subtitle: '',
+    title: 'Pedido en curso',
+    variant: STANDARD
+  },
+  argTypes: {
+    classes: {
+      control: false,
+      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Objeto de clases CSS para override de estilos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: 'Número del paso activo actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del subtítulo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    detailsTab: {
+      control: 'object',
+      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ enabled: boolean, title: string }'
+        }
+      }
+    },
+    mode: {
+      control: 'inline-radio',
+      description: 'Determina el modo visual del componente.',
+      options: [CARD, FLAT],
+      table: {
+        defaultValue: {
+          summary: CARD
+        },
+        type: {
+          summary: joinArgTypes([CARD, FLAT])
+        }
+      }
+    },
+    steps: {
+      control: 'object',
+      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Determina la variante visual del componente.',
+      options: [STANDARD, ERROR],
+      table: {
+        defaultValue: {
+          summary: STANDARD
+        },
+        type: {
+          summary: joinArgTypes([STANDARD, ERROR])
+        }
+      }
+    }
+  },
+  component: UTTracker,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTTracker'
+};
+export const Default = {
+  name: 'Playground'
+};
+export const CardMode = {
+  args: {
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Modo Card',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
+      }
+    }
+  }
+};
+export const FlatMode = {
+  args: {
+    mode: FLAT,
+    variant: STANDARD
+  },
+  name: 'Modo Flat',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
+      }
+    }
+  }
+};
+export const ErrorVariant = {
+  args: {
+    description: 'Quería recargas catalíticas y pedí normales',
+    mode: CARD,
+    subtitle: 'Me equivoqué en el pedido',
+    variant: ERROR
+  },
+  name: 'Variante Error',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
+      }
+    }
+  }
+};
+export const WithoutDetailsTab = {
+  args: {
+    detailsTab: undefined,
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Sin Pestaña de Detalle',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
+      }
+    }
+  }
+};
+export const WithoutTitle = {
+  args: {
+    mode: CARD,
+    title: undefined,
+    variant: STANDARD
+  },
+  name: 'Sin Título',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin título.'
+      }
+    }
+  }
+};
+export const AllModes = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, [CARD, FLAT].map(mode => /*#__PURE__*/React.createElement("div", {
+    key: mode,
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    mode: mode,
+    title: "Modo: ".concat(mode)
+  }))))),
+  name: 'Todos los Modos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
+      }
+    }
+  }
+};
+export const AllVariants = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Hora estimada de entrega 7:00 PM",
+    subtitle: "",
+    title: "Variante: standard",
+    variant: STANDARD
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
+    subtitle: "Me equivoqu\xE9 en el pedido",
+    title: "Variante: error",
+    variant: ERROR
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
+      }
+    }
+  }
+};

package/package.json

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