Merge pull request #15 from betha-plataforma/feature-NOP-6552

NOP-6552 - Adiciona botão no banner
betha-plataforma · Apr 15, 2024 · 600e73b · 600e73b
2 parents 408c125 + 3b0f8c7
commit 600e73b
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@betha-plataforma/estrutura-componentes",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -740,6 +740,10 @@ declare namespace LocalJSX {
           * É emitido quando o componente de menu possuir alterações na propriedade de banner
          */
         "onBannerAlterado"?: (event: CustomEvent<MenuBannerAlteradoEvent>) => void;
+        /**
+          * É emitido quando o botão do banner é clicado
+         */
+        "onBotaoBannerAcionado"?: (event: CustomEvent<void>) => void;
         /**
           * É emitido quando alguma opção do menu for selecionada
          */

diff --git a/src/components/app/app.interfaces.ts b/src/components/app/app.interfaces.ts
@@ -3,6 +3,13 @@ export interface Banner {
   tipo: 'info' | 'warning' | 'danger';
   link?: string;
   target?: '_blank' | '_parent' | '_self' | '_top';
+  labelLink?: string;
+  icone?: string;
+  button?: ButtonBanner;
+}
+
+export interface ButtonBanner {
+  textButton: string;
 }
 
 export interface MenuBannerAlteradoEvent {

diff --git a/src/components/app/app.scss b/src/components/app/app.scss
@@ -29,6 +29,7 @@ slot[name="container_contexto"] {
   flex-direction: row;
   grid-area: banner;
   justify-content: center;
+  align-items: center;
   overflow: hidden;
   padding: 0 16px;
   position: relative;
@@ -47,30 +48,44 @@ slot[name="container_contexto"] {
 
   &__content {
     line-height: 1.5;
-    margin: 9px 10px;
+    margin: 0 4px;
     max-width: 95%;
     > a {
       color: var(--bth-app-gray-dark-40);
       text-decoration: underline;
-      vertical-align: top;
-      margin-left: 5px;
+      margin-left: 24px;
     }
     > span {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      display: inline-block;
       max-width: 100%;
     }
 
     > span ~ a {
       max-width: 85%;
     }
+
+    > button {
+      background-color: transparent;
+      border: 1px solid var(--bth-app-gray-dark-40);
+      color: #222;
+      text-transform: uppercase;
+      text-align: center;
+      padding: 0 12px;
+      height: 28px;
+      margin-left: 12px;
+      cursor: pointer;
+    }
+
+    > button:hover {
+      background-color: #00000013;
+    }
   }
   &__icon {
     font-size: 18px;
     line-height: 1.5;
-    margin: 7px 0px;
+    margin: 0 4px;
   }
   &--warning {
     background-color: var(--bth-app-yellow-light-10);

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
@@ -70,6 +70,11 @@ export class App implements ComponentInterface {
    */
   @Event() opcaoMenuSelecionada: EventEmitter<OpcaoMenuSelecionadaEvent>;
 
+  /**
+   * É emitido quando o botão do banner é clicado
+   */
+  @Event() botaoBannerAcionado: EventEmitter<void>;
+
   connectedCallback() {
     this.setCorBackgroundCustomizado();
     this.setEstadoInicialMenu();
@@ -494,6 +499,12 @@ export class App implements ComponentInterface {
     this.salvarEstadoLocalStorage();
   };
 
+  private onClickBotaoBanner = (event: CustomEvent | UIEvent) => {
+    event.preventDefault();
+
+    this.botaoBannerAcionado.emit();
+  }
+
   private renderBannerSection() {
     return (
       <header
@@ -504,12 +515,17 @@ export class App implements ComponentInterface {
 
         {this.possuiBanner() && ([
           <div class="banner__icon">
-            <bth-icone icone={this.banner.tipo === 'info' ? 'information' : 'alert'}></bth-icone>
+            <bth-icone icone={this.banner.icone ? this.banner.icone : this.banner.tipo === 'info' ? 'information' : 'alert'}></bth-icone>
           </div>,
           <div class="banner__content">
             <span>{this.banner.texto}</span>
             {!isNill(this.banner.link) && this.banner.link.trim() !== '' && (
-              <a href={this.banner.link} target={this.banner.target} title="Mais informações" rel="noreferrer">Mais informações</a>
+              <a href={this.banner.link} target={this.banner.target} title="Mais informações" rel="noreferrer">
+                {this.banner.labelLink ? this.banner.labelLink : 'Mais informações'}
+              </a>
+            )}
+            {!isNill(this.banner.button) && (
+              <button onClick={this.onClickBotaoBanner}>{this.banner.button.textButton}</button>
             )}
           </div>
         ])}

diff --git a/src/index.html b/src/index.html
@@ -253,12 +253,25 @@ <h2>Comuns</h2>
             link: 'https://www.betha.com.br'
           }
 
+          const bannerComBotao = {
+            texto: 'Há novos recursos no Conecta! Explore a versão que irá otimizar a gestão e o acompanhamento das tarefas.',
+            tipo: 'info',
+            link: 'https://www.betha.com.br',
+            icone: 'party-popper',
+            labelLink: 'Ajuda',
+            button: {
+              textButton: 'Texto botão'
+            }
+          }
+
           if (activeBannerRef === 0) {
             app.banner = bannerInformacao;
           } else if (activeBannerRef === 1) {
             app.banner = bannerAlerta;
           } else if (activeBannerRef === 2) {
             app.banner = bannerPerigo;
+          } else if (activeBannerRef === 3) {
+            app.banner = bannerComBotao;
           } else {
             app.banner = undefined;
             activeBannerRef = -1;