@widergy/energy-ui 3.96.7 → 3.97.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.97.0](https://github.com/widergy/energy-ui/compare/v3.96.7...v3.97.0) (2025-08-11)
+
+
+### Features
+
+* [AXCH-556] add back button to utpanel v1 ([#660](https://github.com/widergy/energy-ui/issues/660)) ([7f178f4](https://github.com/widergy/energy-ui/commit/7f178f45479d13382cb229a09b51cfb19998db8f))
+
 ## [3.96.7](https://github.com/widergy/energy-ui/compare/v3.96.6...v3.96.7) (2025-08-06)
 
 

package/dist/components/UTPanel/UTPanel.mdx

@@ -0,0 +1,11 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
+
+import * as UTPanelStories from './UTPanel.stories';
+
+<Meta of={UTPanelStories} />
+
+<Title>UTPanel</Title>
+
+<Description of={UTPanelStories} />
+
+<ArgTypes />

package/dist/components/UTPanel/UTPanel.stories.js

@@ -0,0 +1,700 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("stories/utils");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _2 = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Mock content for the panel
+const mockContent = /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body1",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Este es el contenido del panel. Aqu\xED puedes agregar cualquier componente o contenido que necesites."), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  variant: "body2",
+  colorTheme: "gray",
+  style: {
+    marginBottom: '16px'
+  }
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '24px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+  variant: "filled",
+  colorTheme: "primary",
+  style: {
+    marginRight: '8px'
+  }
+}, "Acci\xF3n Principal"), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+  variant: "outlined",
+  colorTheme: "gray"
+}, "Acci\xF3n Secundaria")));
+const headerItemsExample = [{
+  title: 'Estado',
+  icon: 'IconCheck',
+  value: 'Completado'
+}, {
+  title: 'Fecha',
+  icon: 'IconCalendar',
+  value: '15/12/2023'
+}, {
+  title: 'Usuario',
+  icon: 'IconUser',
+  value: 'Juan Pérez'
+}];
+var _default = exports.default = {
+  args: {
+    children: mockContent,
+    open: false,
+    title: 'Título del Panel',
+    version: 'V0'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente a utilizar.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['V0', 'V1'])
+        }
+      }
+    },
+    open: {
+      control: 'boolean',
+      description: 'Controla si el panel está abierto o cerrado.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el header del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: '(V1 only) Subtítulo que se muestra debajo del título.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    panelSide: {
+      control: 'select',
+      description: 'Lado desde el cual aparece el panel.',
+      options: ['left', 'right', 'top', 'bottom'],
+      table: {
+        defaultValue: {
+          summary: 'right'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['left', 'right', 'top', 'bottom'])
+        }
+      }
+    },
+    size: {
+      control: 'select',
+      description: '(V1 only) Tamaño del panel.',
+      options: ['S', 'M', 'L'],
+      table: {
+        defaultValue: {
+          summary: 'M'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['S', 'M', 'L'])
+        }
+      }
+    },
+    disableScrollbar: {
+      control: 'boolean',
+      description: 'Deshabilita el scrollbar del contenido.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideCloseButton: {
+      control: 'boolean',
+      description: '(V1 only) Oculta el botón de cerrar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideHeader: {
+      control: 'boolean',
+      description: '(V1 only) Oculta completamente el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    hideMainButton: {
+      control: 'boolean',
+      description: '(V1 only) Oculta el botón principal del footer.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showBackButton: {
+      control: 'boolean',
+      description: '(V1 only) Muestra el botón de volver.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showTag: {
+      control: 'boolean',
+      description: '(V1 only) Muestra un tag en el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showMainStatus: {
+      control: 'boolean',
+      description: '(V1 only) Muestra un status principal en el header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    showPagination: {
+      control: 'boolean',
+      description: '(V1 only) Muestra controles de paginación.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    inline: {
+      control: 'boolean',
+      description: '(V1 only) Renderiza el panel inline en lugar de modal.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    collapsablePanel: {
+      control: 'boolean',
+      description: '(V1 only) Permite colapsar el panel cuando está inline.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    collapsableHeader: {
+      control: 'boolean',
+      description: '(V1 only) Permite colapsar el contenido del header.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    isWorkflow: {
+      control: 'boolean',
+      description: '(V1 only) Activa el modo workflow con barra de progreso.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: '(V1 only) Paso actual del workflow.',
+      table: {
+        defaultValue: {
+          summary: '1'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    stepsCount: {
+      control: 'number',
+      description: '(V1 only) Total de pasos del workflow.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    onClose: {
+      control: false,
+      description: 'Callback ejecutado al cerrar el panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onOpen: {
+      control: false,
+      description: 'Callback ejecutado al abrir el panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    onGoBack: {
+      control: false,
+      description: '(V1 only) Callback ejecutado al presionar el botón de volver.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'function'
+        }
+      }
+    },
+    children: {
+      control: false,
+      description: 'Contenido del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'ReactNode'
+        }
+      }
+    },
+    classes: {
+      control: false,
+      description: 'Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: '(V1 only) Clases CSS personalizadas para diferentes elementos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    }
+  },
+  component: _2.default,
+  parameters: {
+    controls: {
+      exclude: ['modalProps', 'perfectScrollbarOptions', 'containerRef', 'TitleComponent', 'TitleIcon', 'HeaderComponent', 'headerItems', 'headerMainActionButton', 'headerSecondaryActionButton', 'mainButton', 'statusProps', 'tagProps', 'titleProps', 'paginationProps', 'BackdropProps', 'onEndReachedCallback', 'titleDataTestId', 'closeButtonDataTestId', 'backButtonDataTestId', 'mainActionDataTestId', 'secondaryActionDataTestId', 'singleHeaderItemsColumn']
+    },
+    docs: {
+      description: {
+        component: 'Componente Panel con dos versiones disponibles. V0 es una versión básica con funcionalidad de drawer. V1 es una versión avanzada con múltiples características como workflow, header items, botones de acción, etc.'
+      }
+    }
+  }
+}; // V0 Stories
+const V0Default = exports.V0Default = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel V0 - Básico',
+    panelSide: 'right',
+    disableScrollbar: false
+  },
+  name: 'V0 - Básico'
+};
+const V0WithCustomTitle = exports.V0WithCustomTitle = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel con Título Personalizado',
+    panelSide: 'right',
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "title2",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Contenido del Panel V0"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel utiliza la versi\xF3n V0 que es m\xE1s simple y b\xE1sica."))
+  },
+  name: 'V0 - Con Título Personalizado'
+};
+const V0LeftSide = exports.V0LeftSide = {
+  args: {
+    version: 'V0',
+    open: false,
+    title: 'Panel desde la Izquierda',
+    panelSide: 'left',
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel aparece desde el lado izquierdo de la pantalla."))
+  },
+  name: 'V0 - Lado Izquierdo'
+};
+
+// V1 Stories
+const V1Default = exports.V1Default = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel V1 - Avanzado',
+    subtitle: 'Subtítulo descriptivo',
+    panelSide: 'right',
+    size: 'M'
+  },
+  name: 'V1 - Básico'
+};
+const V1WithHeaderItems = exports.V1WithHeaderItems = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Header Items',
+    subtitle: 'Información adicional en el header',
+    panelSide: 'right',
+    size: 'M',
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel V1 incluye items adicionales en el header que muestran informaci\xF3n relevante."))
+  },
+  name: 'V1 - Con Header Items'
+};
+const V1WithActions = exports.V1WithActions = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Acciones',
+    subtitle: 'Panel con botones de acción',
+    panelSide: 'right',
+    size: 'M',
+    headerMainActionButton: {
+      colorTheme: 'error',
+      text: 'Guardar',
+      onClick: () => alert('Acción principal ejecutada')
+    },
+    headerSecondaryActionButton: {
+      text: 'Cancelar',
+      onClick: () => alert('Acción secundaria ejecutada')
+    },
+    mainButton: {
+      text: 'Confirmar',
+      onClick: () => alert('Botón principal ejecutado')
+    },
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel incluye botones de acci\xF3n tanto en el header como en el footer."))
+  },
+  name: 'V1 - Con Acciones'
+};
+const V1WithStatus = exports.V1WithStatus = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Status',
+    subtitle: 'Panel con tag y status principal',
+    panelSide: 'right',
+    size: 'M',
+    showTag: true,
+    showMainStatus: true,
+    tagProps: {
+      variant: 'information',
+      children: 'Nuevo'
+    },
+    statusProps: {
+      variant: 'success',
+      label: 'Activo'
+    },
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel muestra un tag y un status principal en el header."))
+  },
+  name: 'V1 - Con Status y Tag'
+};
+const V1Workflow = exports.V1Workflow = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Workflow Panel',
+    subtitle: 'Panel en modo workflow',
+    panelSide: 'right',
+    size: 'L',
+    isWorkflow: true,
+    currentStep: 2,
+    stepsCount: 5,
+    showBackButton: true,
+    onGoBack: () => alert('Volver al paso anterior'),
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "title3",
+      weight: "medium",
+      style: {
+        marginBottom: '16px'
+      }
+    }, "Paso 2 de 5"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel est\xE1 en modo workflow y muestra una barra de progreso en la parte superior."))
+  },
+  name: 'V1 - Workflow'
+};
+const V1WithPagination = exports.V1WithPagination = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Paginación',
+    subtitle: 'Navegación por páginas',
+    panelSide: 'right',
+    size: 'M',
+    showPagination: true,
+    paginationProps: {
+      currentPage: 2,
+      totalPages: 10,
+      nextButton: {
+        onClick: () => alert('Página siguiente')
+      },
+      backButton: {
+        onClick: () => alert('Página anterior')
+      }
+    },
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel incluye controles de paginaci\xF3n en la parte superior."))
+  },
+  name: 'V1 - Con Paginación'
+};
+const V1Inline = exports.V1Inline = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Inline',
+    subtitle: 'Panel renderizado inline',
+    panelSide: 'right',
+    size: 'M',
+    inline: true,
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel est\xE1 renderizado inline en lugar de como un modal."))
+  },
+  name: 'V1 - Inline',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel renderizado inline. Útil cuando se necesita integrar el panel como parte del layout principal.'
+      }
+    }
+  }
+};
+const V1Collapsible = exports.V1Collapsible = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Colapsable',
+    subtitle: 'Panel que se puede colapsar',
+    panelSide: 'right',
+    size: 'M',
+    inline: true,
+    collapsablePanel: true,
+    collapsableHeader: true,
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel se puede colapsar completamente y tambi\xE9n tiene un header colapsable."))
+  },
+  name: 'V1 - Colapsable',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Panel con capacidad de colapsar tanto el contenido completo como el header.'
+      }
+    }
+  }
+};
+const V1LargeSize = exports.V1LargeSize = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Grande',
+    subtitle: 'Panel con tamaño Large',
+    panelSide: 'right',
+    size: 'L',
+    headerItems: headerItemsExample,
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "Este panel utiliza el tama\xF1o Large (L) para mostrar m\xE1s contenido."), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '20px'
+      }
+    }, Array.from({
+      length: 10
+    }, (_, i) => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      key: i,
+      variant: "body2",
+      style: {
+        display: 'block',
+        marginBottom: '8px'
+      }
+    }, "L\xEDnea de contenido ", i + 1, " - Lorem ipsum dolor sit amet consectetur."))))
+  },
+  name: 'V1 - Tamaño Grande'
+};
+const Playground = exports.Playground = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel Playground',
+    subtitle: 'Experimenta con todas las opciones',
+    panelSide: 'right',
+    size: 'M',
+    disableScrollbar: false,
+    hideCloseButton: false,
+    hideHeader: false,
+    hideMainButton: false,
+    showBackButton: false,
+    showTag: false,
+    showMainStatus: false,
+    showPagination: false,
+    inline: false,
+    collapsablePanel: false,
+    collapsableHeader: false,
+    isWorkflow: false,
+    currentStep: 1,
+    stepsCount: 3
+  },
+  name: 'Playground'
+};

package/dist/components/UTPanel/versions/V1/README.md

@@ -4,39 +4,43 @@ Component used for displaying a side panel.
 
 ## Props
 
-| Name                        | Type   | Default  | Description                                                                                                                                                                                                    |
-| :-------------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| children                    | node   |          | Component content                                                                                                                                                                                              |
-| classes                     | object |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                                                        |
-| classNames                  | object |          | Overrides the default panel theme. headerMainActionButton                                                                                                                                                      |
-| collapsableHeader           | bool   | false    | Indicates if "header items" section is collapsible.                                                                                                                                                            |
-| currentStep                 | number | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                                                    |
-| disableScrollbar            | bool   | false    | Render the children without scrollbar                                                                                                                                                                          |
-| HeaderComponent             | node   |          | Custom header to render.                                                                                                                                                                                       |
-| headerItems                 | array  |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                                                          |
-| headerMainActionButton      | object |          | Object with header main button details: "colorTheme" - string - deafult: 'primary' // "variant" - string - default: 'semitransparent'<br />// This prop will be spread so that it supports any UTButton props. |
-| headerSecondaryActionButton | object |          | Object with header secondary button details: "colorTheme" - string - default: "success" // "variant" - string - default: "filled" // This prop will be spread so that it supports any UTButton props.          |
-| hideCloseButton             | bool   | false    | Indicates whether the close button is hide or not                                                                                                                                                              |
-| hideHeader                  | bool   | false    | Indicates whether the entire header is hide or not                                                                                                                                                             |
-| hideMainButton              | bool   | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                                                      |
-| isWorkflow                  | bool   | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                                                    |
-| mainButton                  | object |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                                                 |
-| modalProps                  | object |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                                                        |
-| onClose                     | func   |          | Callback to execute when closing panel.                                                                                                                                                                        |
-| onEndReachedCallback        | func   |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                                               |
-| onOpen                      | func   | () => {} | Callback to execute when opening panel.                                                                                                                                                                        |
-| open                        | bool   |          | Indicates whether the panel is open or not                                                                                                                                                                     |
-| panelSide                   | string |          | Indicates panel side.                                                                                                                                                                                          |
-| perfectScrollbarOptions     | object |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                                               |
-| singleHeaderItemsColumn     | bool   | false    | Indicates whether the header items are shown in a single column or not                                                                                                                                         |
-| size                        | string | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                                                  |
-| stepsCount                  | Number |          | Indicates the total steps in case of workflow                                                                                                                                                                  |
-| subtitle                    | string |          | Subtitle to show                                                                                                                                                                                               |
-| title                       | string |          | Title to show                                                                                                                                                                                                  |
-| titleProps                  | object | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                                                       |
-| collapsablePanel            | bool   | false    | Indicates if panel can be collapsed when inline mode is enabled                                                                                                                                                |
-| inline                      | bool   | false    | Indicates if panel should be rendered inline instead of as a modal                                                                                                                                             |
-| paginationProps             | object | {}       | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number)                                                                |
-| showMainStatus              | bool   | false    | Shows a status indicator next to the title                                                                                                                                                                     |
-| showPagination              | bool   | false    | Shows pagination controls in the header                                                                                                                                                                        |
-| statusProps                 | object | {}       | Props passed to UTStatus component when showMainStatus is true                                                                                                                                                 |
+| Name                        | Type    | Default  | Description                                                                                                                                                                                                    |
+| :-------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children                    | node    |          | Component content                                                                                                                                                                                              |
+| classes                     | object  |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                                                        |
+| classNames                  | object  |          | Overrides the default panel theme. headerMainActionButton                                                                                                                                                      |
+| collapsableHeader           | bool    | false    | Indicates if "header items" section is collapsible.                                                                                                                                                            |
+| currentStep                 | number  | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                                                    |
+| disableScrollbar            | bool    | false    | Render the children without scrollbar                                                                                                                                                                          |
+| HeaderComponent             | node    |          | Custom header to render.                                                                                                                                                                                       |
+| headerItems                 | array   |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                                                          |
+| headerMainActionButton      | object  |          | Object with header main button details: "colorTheme" - string - deafult: 'primary' // "variant" - string - default: 'semitransparent'<br />// This prop will be spread so that it supports any UTButton props. |
+| headerSecondaryActionButton | object  |          | Object with header secondary button details: "colorTheme" - string - default: "success" // "variant" - string - default: "filled" // This prop will be spread so that it supports any UTButton props.          |
+| hideCloseButton             | bool    | false    | Indicates whether the close button is hide or not                                                                                                                                                              |
+| hideHeader                  | bool    | false    | Indicates whether the entire header is hide or not                                                                                                                                                             |
+| hideMainButton              | bool    | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                                                      |
+| isWorkflow                  | bool    | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                                                    |
+| mainButton                  | object  |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                                                 |
+| modalProps                  | object  |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                                                        |
+| onClose                     | func    |          | Callback to execute when closing panel.                                                                                                                                                                        |
+| onEndReachedCallback        | func    |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                                               |
+| onGoBack                    | func    | () => {} | Callback to execute when goBackButton is used                                                                                                                                                                  |
+| onOpen                      | func    | () => {} | Callback to execute when opening panel.                                                                                                                                                                        |
+| open                        | bool    |          | Indicates whether the panel is open or not                                                                                                                                                                     |
+| panelSide                   | string  |          | Indicates panel side.                                                                                                                                                                                          |
+| perfectScrollbarOptions     | object  |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                                               |
+| singleHeaderItemsColumn     | bool    | false    | Indicates whether the header items are shown in a single column or not                                                                                                                                         |
+| size                        | string  | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                                                  |
+| stepsCount                  | Number  |          | Indicates the total steps in case of workflow                                                                                                                                                                  |
+| subtitle                    | string  |          | Subtitle to show                                                                                                                                                                                               |
+| title                       | string  |          | Title to show                                                                                                                                                                                                  |
+| titleProps                  | object  | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                                                       |
+| collapsablePanel            | bool    | false    | Indicates if panel can be collapsed when inline mode is enabled                                                                                                                                                |
+| inline                      | bool    | false    | Indicates if panel should be rendered inline instead of as a modal                                                                                                                                             |
+| paginationProps             | object  | {}       | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number)                                                                |
+| showMainStatus              | bool    | false    | Shows a status indicator next to the title                                                                                                                                                                     |
+| showPagination              | bool    | false    | Shows pagination controls in the header                                                                                                                                                                        |
+| statusProps                 | object  | {}       | Props passed to UTStatus component when showMainStatus is true                                                                                                                                                 |
+| showBackButton              | boolean | false    | Shows a go back arrow button                                                                                                                                                                                   |
+| showTag                     | bool    | false    | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag.                                                                                  |
+| tagProps                    | object  | {}       | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus)                    |

package/dist/components/UTPanel/versions/V1/index.js

@@ -31,10 +31,11 @@ const {
 } = _testIds.TEST_IDS;
 const UTPanel = _ref => {
   let {
+    backButtonDataTestId = panel.backButton,
     BackdropProps = {},
     children,
-    classes: theme,
     classNames,
+    classes: theme,
     closeButtonDataTestId = panel.closeButton,
     collapsableHeader = false,
     collapsablePanel = false,
@@ -54,19 +55,23 @@ const UTPanel = _ref => {
     modalProps,
     onClose,
     onEndReachedCallback,
+    onGoBack = () => {},
     onOpen = () => {},
     open,
     paginationProps = {},
     panelSide,
     perfectScrollbarOptions,
     secondaryActionDataTestId = panel.secondaryAction,
+    showBackButton = false,
     showMainStatus = false,
     showPagination = false,
+    showTag = false,
     singleHeaderItemsColumn = false,
     size = 'M',
     statusProps = {},
     stepsCount,
     subtitle = '',
+    tagProps = {},
     title = '',
     titleDataTestId = panel.title,
     titleProps = {},
@@ -87,8 +92,10 @@ const UTPanel = _ref => {
     totalPages = 1
   } = paginationProps;
   const {
+    backButton: backButtonClass,
     closeButton: closeButtonClass,
     headerContainer: headerContainerClass,
+    iconBack: iconBackClass,
     iconClose: iconCloseClass,
     perfectScrollbar: perfectScrollbarClass,
     title: titleClass,
@@ -119,11 +126,22 @@ const UTPanel = _ref => {
     open: panelIsCollapsible || open,
     swipeAreaWidth: 0,
     variant: inline ? collapsablePanel ? 'permanent' : 'persistent' : 'temporary'
-  }, props), (!hideCloseButton || isWorkflow || panelIsCollapsible) && /*#__PURE__*/_react.default.createElement("div", {
+  }, props), (!hideCloseButton || isWorkflow || panelIsCollapsible || showBackButton) && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.controlAreaContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.controlAreaBar
-  }, showPagination && /*#__PURE__*/_react.default.createElement("div", {
+  }, showBackButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.backButtonContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: iconBackClass,
+      root: backButtonClass
+    },
+    dataTestId: backButtonDataTestId,
+    Icon: "IconArrowLeft",
+    onClick: onGoBack,
+    variant: "text"
+  })), showPagination && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.paginationContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray"
@@ -155,7 +173,7 @@ const UTPanel = _ref => {
     className: _stylesModule.default.headerArea
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerLeftArea
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, showTag && tagProps && /*#__PURE__*/_react.default.createElement(_UTStatus.default, tagProps, tagProps.children), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.titleArea
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     className: classes.title,
@@ -209,6 +227,7 @@ const UTPanel = _ref => {
   }, mainButton), (mainButton === null || mainButton === void 0 ? void 0 : mainButton.text) || _constants.ACCEPT_BUTTON_TEXT));
 };
 UTPanel.propTypes = {
+  backButtonDataTestId: _propTypes.string,
   BackdropProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: _propTypes.object,
@@ -245,6 +264,7 @@ UTPanel.propTypes = {
   modalProps: _propTypes.object,
   onClose: _propTypes.func,
   onEndReachedCallback: _propTypes.func,
+  onGoBack: _propTypes.func,
   onOpen: _propTypes.func,
   open: _propTypes.bool,
   panelSide: _propTypes.string,
@@ -252,14 +272,28 @@ UTPanel.propTypes = {
   secondaryActionDataTestId: _propTypes.string,
   singleHeaderItemsColumn: _propTypes.bool,
   size: (0, _propTypes.oneOf)(Object.keys(_constants.SIZES)),
+  showBackButton: _propTypes.bool,
   showMainStatus: _propTypes.bool,
+  showTag: _propTypes.bool,
+  showPagination: _propTypes.bool,
   statusProps: _propTypes.object,
   stepsCount: _propTypes.number,
-  showPagination: _propTypes.bool,
   currentPage: _propTypes.number,
   totalPages: _propTypes.number,
   subtitle: _propTypes.string,
   paginationProps: _propTypes.object,
+  tagProps: (0, _propTypes.shape)({
+    classes: (0, _propTypes.objectOf)(_propTypes.string),
+    className: _propTypes.string,
+    Icon: _propTypes.elementType,
+    iconProps: _propTypes.object,
+    labelDataTestId: _propTypes.string,
+    size: _propTypes.string,
+    title: _propTypes.string,
+    type: _propTypes.string,
+    variant: _propTypes.string,
+    withoutIcon: _propTypes.bool
+  }),
   title: _propTypes.string,
   titleDataTestId: _propTypes.string,
   titleProps: _propTypes.object

package/dist/components/UTPanel/versions/V1/styles.module.scss

@@ -8,6 +8,11 @@ $collapsed-panel-size: 58px;
   height: 100%;
 }
 
+.backButtonContainer {
+  margin-right: auto;
+  padding-right: 8px;
+}
+
 .controlAreaBar {
   display: flex;
   justify-content: flex-end;
@@ -64,25 +69,25 @@ $collapsed-panel-size: 58px;
 .headerItemsContainer {
   display: flex;
   flex-wrap: wrap;
+  margin-top: 0;
+
+  max-height: 100%;
   padding: 0 24px;
   transition:
     max-height 0.08s ease,
     opacity 0.08s ease,
     margin-top 0.08s ease;
-
-  max-height: 100%;
-  margin-top: 0;
 }
 
 .expandedContainer {
-  opacity: 1;
   max-height: 100%;
+  opacity: 1;
 }
 
 .collapsedContainer {
-  opacity: 0;
-  max-height: 0;
   margin-top: -16px;
+  max-height: 0;
+  opacity: 0;
 }
 
 .small {

package/dist/constants/testIds.js

@@ -65,6 +65,7 @@ const TEST_IDS = exports.TEST_IDS = {
     title: "".concat(ID_CONSTANTS.ONBOARDING, ".title")
   },
   panel: {
+    backButton: "".concat(ID_CONSTANTS.PANEL, ".backButton"),
     closeButton: "".concat(ID_CONSTANTS.PANEL, ".closeButton"),
     mainAction: "".concat(ID_CONSTANTS.PANEL, ".mainAction"),
     secondaryAction: "".concat(ID_CONSTANTS.PANEL, ".secondaryAction"),

package/package.json

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