pge-front-common 14.1.16 → 14.1.17

package/lib/components/Header/Header.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface HeaderProps {
+export interface HeaderProps {
     isRHDigital?: boolean;
     isHonorarios?: boolean;
     isCASC?: boolean;
@@ -11,10 +11,11 @@ interface HeaderProps {
     handleLogout: () => void;
     isPortalServidor?: boolean;
     isPortalBeneficios?: boolean;
+    extraComponent?: React.ReactNode;
     profile?: string;
     hasGestor?: boolean;
     fullName?: string;
     firstName?: string;
 }
-declare const Header: ({ isRHDigital, isCASC, isResponsiveCASC, optionSelection, options, name, userName, handleLogout, isPortalServidor, isPortalBeneficios, profile, hasGestor, fullName, firstName, isHonorarios, }: HeaderProps) => React.JSX.Element;
+declare const Header: ({ isRHDigital, isCASC, isResponsiveCASC, optionSelection, options, name, userName, handleLogout, isPortalServidor, isPortalBeneficios, profile, hasGestor, fullName, firstName, isHonorarios, extraComponent, }: HeaderProps) => React.JSX.Element;
 export default Header;

package/lib/components/Header/Header.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithPGERGLogo: Story;
 export declare const WithPGEBENEFICIOSLogo: Story;
 export declare const WithCASCLogo: Story;
+export declare const WithExtraComponent: Story;

package/lib/index.d.ts

@@ -442,12 +442,13 @@ interface HeaderProps$1 {
     handleLogout: () => void;
     isPortalServidor?: boolean;
     isPortalBeneficios?: boolean;
+    extraComponent?: React__default.ReactNode;
     profile?: string;
     hasGestor?: boolean;
     fullName?: string;
     firstName?: string;
 }
-declare const Header: ({ isRHDigital, isCASC, isResponsiveCASC, optionSelection, options, name, userName, handleLogout, isPortalServidor, isPortalBeneficios, profile, hasGestor, fullName, firstName, isHonorarios, }: HeaderProps$1) => React__default.JSX.Element;
+declare const Header: ({ isRHDigital, isCASC, isResponsiveCASC, optionSelection, options, name, userName, handleLogout, isPortalServidor, isPortalBeneficios, profile, hasGestor, fullName, firstName, isHonorarios, extraComponent, }: HeaderProps$1) => React__default.JSX.Element;
 
 interface FooterProps {
     imageFooter: string;

package/lib/index.esm.js

@@ -841,8 +841,8 @@ var RadioGroupBase = function (_a) {
         !hasError && message && React__default.createElement("p", { className: styles$q.message }, message)));
 };
 
-var css_248z$t = ".header-module__separator_background___lYfCd {\r\n  background-color: rgb(188, 157, 50);\r\n  width: 100%;\r\n  height: 4px;\r\n  opacity: 1;\r\n}\r\n.header-module__container___eaqPg {\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 28px 72px;\r\n  min-width: 1024px;\r\n\r\n  @media (max-width: 1024px) {\r\n    padding: 22px 16px;\r\n    min-width: 100%;\r\n  }\r\n}\r\n\r\n.header-module__wrapperMenu___m5rLa {\r\n  display: flex;\r\n  gap: 24px;\r\n  align-items: center;\r\n\r\n  @media (max-width: 1024px) {\r\n    gap: 8px;\r\n  }\r\n}\r\n\r\n.header-module__iconLogo___pcEoN {\r\n  @media (max-width: 1024px) {\r\n    width: 100px;\r\n  }\r\n}\r\n\r\n.header-module__verticalDivider___4JMWc {\r\n  content: \"\";\r\n  display: inline-block;\r\n  height: 50px;\r\n  width: 1px;\r\n  background-color: #ccc;\r\n  margin: 0px 0px 0px 0px;\r\n}\r\n\r\n.header-module__containerHeaderIndex___ueqa- {\r\n  width: 100%;\r\n  max-height: 6rem;\r\n  font-size: 2rem;\r\n  box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.19);\r\n}\r\n\r\n.header-module__set_shadow___UUN7Y {\r\n  border-radius: 0px 0px 16px 16px;\r\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n.header-module__limitedWidth___fsCel {\r\n  max-width: 1440px;\r\n  margin: 0 auto;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .header-module__containerHeaderIndex___ueqa- {\r\n    max-height: 6rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .header-module__containerHeaderIndex___ueqa- {\r\n    max-height: 13rem;\r\n  }\r\n}\r\n\r\n.header-module__iconLogoCASC___3YUG6 {\r\n  height: 65px;\r\n  width: auto;\r\n}\r\n\r\n.header-module__iconLogoPGE___HK3gX {\r\n  margin-right: 20px;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .header-module__iconLogoCASC___3YUG6 {\r\n    height: 45px;\r\n    width: auto;\r\n  }\r\n}\r\n\r\n.header-module__responsiveCASC___KL8jM {\r\n  @media (max-width: 1024px) {\r\n    .header-module__iconLogoCASC___3YUG6 {\r\n      height: 45px;\r\n      width: auto;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .header-module__iconLogoCASC___3YUG6 {\r\n      height: 40px;\r\n      width: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.header-module__limitedWidthBeneficios___-Jcji {\r\n  max-width: 1440px !important;\r\n  margin: 0 auto !important;\r\n}\r\n\r\n.header-module__IconMenu___7JWj- {\r\n  display: flex;\r\n  max-height: 48px;\r\n}\r\n";
-var styles$p = {"separator_background":"header-module__separator_background___lYfCd","container":"header-module__container___eaqPg","wrapperMenu":"header-module__wrapperMenu___m5rLa","iconLogo":"header-module__iconLogo___pcEoN","verticalDivider":"header-module__verticalDivider___4JMWc","containerHeaderIndex":"header-module__containerHeaderIndex___ueqa-","set_shadow":"header-module__set_shadow___UUN7Y","limitedWidth":"header-module__limitedWidth___fsCel","iconLogoCASC":"header-module__iconLogoCASC___3YUG6","iconLogoPGE":"header-module__iconLogoPGE___HK3gX","responsiveCASC":"header-module__responsiveCASC___KL8jM","limitedWidthBeneficios":"header-module__limitedWidthBeneficios___-Jcji","IconMenu":"header-module__IconMenu___7JWj-"};
+var css_248z$t = ".header-module__separator_background___lYfCd {\r\n  background-color: rgb(188, 157, 50);\r\n  width: 100%;\r\n  height: 4px;\r\n  opacity: 1;\r\n}\r\n\r\n.header-module__container___eaqPg {\r\n  height: 100%;\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 28px 72px;\r\n  min-width: 1024px;\r\n\r\n  @media (max-width: 1024px) {\r\n    padding: 22px 16px;\r\n    min-width: 100%;\r\n  }\r\n}\r\n\r\n.header-module__wrapperMenu___m5rLa {\r\n  display: flex;\r\n  gap: 24px;\r\n  align-items: center;\r\n\r\n  @media (max-width: 1024px) {\r\n    gap: 8px;\r\n  }\r\n}\r\n\r\n.header-module__iconLogo___pcEoN {\r\n  @media (max-width: 1024px) {\r\n    width: 100px;\r\n  }\r\n}\r\n\r\n.header-module__verticalDivider___4JMWc {\r\n  content: \"\";\r\n  display: inline-block;\r\n  height: 50px;\r\n  width: 1px;\r\n  background-color: #ccc;\r\n  margin: 0px 0px 0px 0px;\r\n}\r\n\r\n.header-module__containerHeaderIndex___ueqa- {\r\n  width: 100%;\r\n  max-height: 6rem;\r\n  font-size: 2rem;\r\n  box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.19);\r\n}\r\n\r\n.header-module__set_shadow___UUN7Y {\r\n  border-radius: 0px 0px 16px 16px;\r\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n.header-module__limitedWidth___fsCel {\r\n  max-width: 1440px;\r\n  margin: 0 auto;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .header-module__containerHeaderIndex___ueqa- {\r\n    max-height: 6rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .header-module__containerHeaderIndex___ueqa- {\r\n    max-height: 13rem;\r\n  }\r\n}\r\n\r\n.header-module__iconLogoCASC___3YUG6 {\r\n  height: 65px;\r\n  width: auto;\r\n}\r\n\r\n.header-module__iconLogoPGE___HK3gX {\r\n  margin-right: 20px;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .header-module__iconLogoCASC___3YUG6 {\r\n    height: 45px;\r\n    width: auto;\r\n  }\r\n}\r\n\r\n.header-module__responsiveCASC___KL8jM {\r\n  @media (max-width: 1024px) {\r\n    .header-module__iconLogoCASC___3YUG6 {\r\n      height: 45px;\r\n      width: auto;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .header-module__iconLogoCASC___3YUG6 {\r\n      height: 40px;\r\n      width: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.header-module__limitedWidthBeneficios___-Jcji {\r\n  max-width: 1440px !important;\r\n  margin: 0 auto !important;\r\n}\r\n\r\n.header-module__IconMenu___7JWj- {\r\n  display: flex;\r\n  max-height: 48px;\r\n}\r\n\r\n.header-module__wrapperUserButton___M-CBj {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 24px;\r\n\r\n  @media (max-width: 1024px) {\r\n    gap: 8px;\r\n  }\r\n}";
+var styles$p = {"separator_background":"header-module__separator_background___lYfCd","container":"header-module__container___eaqPg","wrapperMenu":"header-module__wrapperMenu___m5rLa","iconLogo":"header-module__iconLogo___pcEoN","verticalDivider":"header-module__verticalDivider___4JMWc","containerHeaderIndex":"header-module__containerHeaderIndex___ueqa-","set_shadow":"header-module__set_shadow___UUN7Y","limitedWidth":"header-module__limitedWidth___fsCel","iconLogoCASC":"header-module__iconLogoCASC___3YUG6","iconLogoPGE":"header-module__iconLogoPGE___HK3gX","responsiveCASC":"header-module__responsiveCASC___KL8jM","limitedWidthBeneficios":"header-module__limitedWidthBeneficios___-Jcji","IconMenu":"header-module__IconMenu___7JWj-","wrapperUserButton":"header-module__wrapperUserButton___M-CBj"};
 styleInject(css_248z$t);
 
 var css_248z$s = ".dropdown-module__dropdown___EIaq- {\r\n  position: absolute;\r\n  border: 1px solid rgb(197, 197, 197);\r\n  background: var(--header-bg-dropdown);\r\n  padding: 8px 0;\r\n  color: #0062cc;\r\n  border-radius: 4px;\r\n  z-index: 400;\r\n  min-width: 280px;\r\n  box-shadow: rgba(197, 164, 164, 0.35) 0px 5px 15px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas {\r\n  margin: 0;\r\n  padding: 0.375rem 0.88rem 0.88rem 0.88rem;\r\n  min-width: 280px;\r\n  color: var(--header-font-dropdown);\r\n  font-size: var(--font-size-16, 16px);\r\n  font-weight: 600;\r\n  text-align: left;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  cursor: pointer;\r\n  min-height: 50px;\r\n  border: none;\r\n\r\n  -webkit-appearance: button;\r\n  background-color: transparent;\r\n  background-image: none;\r\n}\r\n\r\n.dropdown-module__primaryDropdown___I7kas:hover {\r\n  background-color: var(--header-hover-dropdown);\r\n  width: 100%;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__disabled___McFgs {\r\n  color: #c3c3c3;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__home___4Odwr {\r\n  font-weight: 700;\r\n}\r\n\r\n.dropdown-module__primaryDropdown__submenu___eXCiN {\r\n  font-size: var(--font-size-16, 16px);\r\n  line-height: 24px;\r\n  text-align: left;\r\n  padding-left: 30px;\r\n  font-weight: 100;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89 {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__active___RRrmk {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.dropdown-module__contentIcon___aqI89.dropdown-module__inactive___AQdLm {\r\n  transform: rotate(180deg);\r\n}\r\n";
@@ -1055,7 +1055,7 @@ function UserCascButton(_a) {
 }
 
 var Header = function (_a) {
-    var _b = _a.isRHDigital, isRHDigital = _b === void 0 ? false : _b, _c = _a.isCASC, isCASC = _c === void 0 ? false : _c, _d = _a.isResponsiveCASC, isResponsiveCASC = _d === void 0 ? false : _d, optionSelection = _a.optionSelection, options = _a.options, name = _a.name, userName = _a.userName, handleLogout = _a.handleLogout, isPortalServidor = _a.isPortalServidor, isPortalBeneficios = _a.isPortalBeneficios, profile = _a.profile, _e = _a.hasGestor, hasGestor = _e === void 0 ? true : _e, fullName = _a.fullName, firstName = _a.firstName, isHonorarios = _a.isHonorarios;
+    var _b = _a.isRHDigital, isRHDigital = _b === void 0 ? false : _b, _c = _a.isCASC, isCASC = _c === void 0 ? false : _c, _d = _a.isResponsiveCASC, isResponsiveCASC = _d === void 0 ? false : _d, optionSelection = _a.optionSelection, options = _a.options, name = _a.name, userName = _a.userName, handleLogout = _a.handleLogout, isPortalServidor = _a.isPortalServidor, isPortalBeneficios = _a.isPortalBeneficios, profile = _a.profile, _e = _a.hasGestor, hasGestor = _e === void 0 ? true : _e, fullName = _a.fullName, firstName = _a.firstName, isHonorarios = _a.isHonorarios, extraComponent = _a.extraComponent;
     var getHeaderKey = function () {
         if (isRHDigital)
             return "RH_DIGITAL";
@@ -1088,7 +1088,7 @@ var Header = function (_a) {
         CASC: function () { return (React__default.createElement(UserCascButton, { name: name, userName: userName, handleLogout: handleLogout, isPortalServidor: isPortalServidor, isResponsiveCASC: true, isCASC: true, profile: profile, hasGestor: hasGestor, fullName: fullName, firstName: firstName })); },
         DEFAULT: function () { return (React__default.createElement(UserButton, { name: name, userName: userName, handleLogout: handleLogout, isPortalServidor: isPortalServidor, profile: profile, hasGestor: hasGestor, fullName: fullName, firstName: firstName })); },
         HONORARIOS: function () { return (React__default.createElement(UserButton, { name: name, userName: userName, handleLogout: handleLogout, isPortalServidor: false, profile: profile, hasGestor: hasGestor, fullName: fullName, firstName: firstName })); },
-        BENEFICIOS: function () { return (React__default.createElement(UserButton, { name: name, userName: userName, handleLogout: handleLogout, isPortalServidor: isPortalServidor, profile: profile, hasGestor: hasGestor, fullName: fullName, firstName: firstName })); },
+        BENEFICIOS: function () { return (React__default.createElement(UserButton, { name: name, userName: userName, handleLogout: handleLogout, isPortalServidor: isPortalServidor, profile: profile, hasGestor: hasGestor, fullName: fullName, firstName: firstName })); }
     };
     var headerKey = getHeaderKey();
     var userButtonKey = getUserButton();
@@ -1112,7 +1112,9 @@ var Header = function (_a) {
                     React__default.createElement("div", { className: styles$p.IconMenu },
                         React__default.createElement(Menu$2, { options: options, optionSelection: optionSelection })),
                     React__default.createElement(Logo, null)),
-                React__default.createElement(UserButtonComponent, null)))));
+                React__default.createElement("div", { className: styles$p.wrapperUserButton },
+                    extraComponent,
+                    React__default.createElement(UserButtonComponent, null))))));
 };
 
 var css_248z$o = ".styles-module__container___FWA4h {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n\r\n.styles-module__imgContainer___d-9G4 {\r\n  width: 100%;\r\n  max-width: 1440px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.styles-module__footerImg___Timhg {\r\n  width: 100%;\r\n  max-width: 1440px;\r\n  height: 198px;\r\n  object-fit: contain;\r\n}\r\n\r\n.styles-module__footer___em-xX {\r\n  width: 100%;\r\n  max-width: 1440px;\r\n  height: 221px;\r\n  background-repeat: no-repeat;\r\n  background-size: contain;\r\n  background-position: center bottom;\r\n  margin: 0 auto; /* Center the container */\r\n  background-color: transparent;\r\n  margin-bottom: -9px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__footer___em-xX {\r\n    margin-bottom: -3px;\r\n    height: 63px;\r\n    padding: 0px 16px;\r\n  }\r\n\r\n  .styles-module__footer___em-xX.styles-module__dark___RwoTf {\r\n    margin-bottom: -3px;\r\n    height: 63px;\r\n    padding: 0px 16px;\r\n  }\r\n}\r\n\r\n.styles-module__pgeLogoContainer___hF2j3 {\r\n  width: 100%;\r\n  height: 134px;\r\n  background-color: var(--footer-bg-color);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: column;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__pgeLogoContainer___hF2j3 {\r\n    height: 118px;\r\n  }\r\n}\r\n\r\n.styles-module__pgeLogo___b7X5k {\r\n  width: 240px;\r\n  height: 86px;\r\n  background-repeat: no-repeat;\r\n  background-size: contain;\r\n  background-position: center bottom;\r\n  margin: 0 auto;\r\n}\r\n\r\n.styles-module__copyrightContainer___mh-Zd {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  background-color: #000;\r\n  min-height: 46px;\r\n}\r\n\r\n@media screen and (max-width: 480px) {\r\n  .styles-module__copyrightContainer___mh-Zd {\r\n    padding-top: 5px;\r\n    padding-bottom: 5px;\r\n    min-height: 30px;\r\n  }\r\n}\r\n\r\n.styles-module__copyrightText___U8iv8 {\r\n  font-weight: 400;\r\n  font-size: var(--font-size-12, 12px);\r\n  line-height: 16.34px;\r\n  letter-spacing: 0%;\r\n  text-align: center;\r\n  color: #fff;\r\n}\r\n\r\n.styles-module__footerAddress___wdcT4 {\r\n  display: flex;\r\n  margin: 0;\r\n  justify-content: center;\r\n  color: var(--background-color);\r\n  font-size: var(--font-size-12);\r\n  background-color: var(--footer-bg-color);\r\n  padding-top: 8px;\r\n  padding-bottom: 8px;\r\n  color: #fff;\r\n}\r\n";