From 7e070f5ff5c553ff0d30fe6125843c44cb635f0b Mon Sep 17 00:00:00 2001
From: Gabriel de Freitas <gdfreitasdev@gmail.com>
Date: Thu, 26 Nov 2020 14:15:26 -0300
Subject: [PATCH 1/4] =?UTF-8?q?Define=20outline=20padr=C3=A3o=20para=20op?=
 =?UTF-8?q?=C3=A7=C3=B5es=20do=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/menu-vertical-item/menu-vertical-item.scss     | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/app/menu-vertical-item/menu-vertical-item.scss b/src/components/app/menu-vertical-item/menu-vertical-item.scss
index 66c05a7..a343fc5 100644
--- a/src/components/app/menu-vertical-item/menu-vertical-item.scss
+++ b/src/components/app/menu-vertical-item/menu-vertical-item.scss
@@ -42,7 +42,7 @@
   }
 
   &--collapsed > .menu-vertical__list {
-    max-height: 0!important;
+    max-height: 0 !important;
   }
 
   &--floating {
@@ -81,6 +81,8 @@
       background-color: rgba(225, 227, 230, 1);
       text-decoration: none;
       color: var(--bth-app-gray-dark-30);
+      outline: 1px dotted var(--bth-app-gray-dark-30);
+      outline-offset: -1px;
     }
 
     bth-icone {
@@ -121,6 +123,11 @@
     height: 36px;
     padding: 12px 10px 12px 53px;
     cursor: pointer;
+
+    &:focus {
+      outline: 1px dotted var(--bth-app-gray-dark-30);
+      outline-offset: -1px;
+    }
   }
 }
 
@@ -158,4 +165,3 @@
     }
   }
 }
-

From 55f4ee3d225df5db2837eb708477bd3dbe0f2967 Mon Sep 17 00:00:00 2001
From: Gabriel de Freitas <gdfreitasdev@gmail.com>
Date: Thu, 26 Nov 2020 15:06:56 -0300
Subject: [PATCH 2/4] =?UTF-8?q?Ajusta=20outline=20padr=C3=A3o=20dos=20comp?=
 =?UTF-8?q?onentes=20das=20ferramentas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ajuda/ajuda.scss               |  7 +++++
 src/components/ajuda/ajuda.tsx                | 11 ++++----
 src/components/ajuda/readme.md                |  3 +++
 src/components/app/app.scss                   | 18 +++++++++++--
 .../app/menu-ferramenta-icone/readme.md       |  2 ++
 .../app/menu-ferramenta/menu-ferramenta.scss  | 26 +++++++++++++++----
 .../menu-vertical-item.scss                   |  7 +++++
 .../conta-usuario/conta-usuario.scss          |  5 +++-
 .../conta-usuario/conta-usuario.tsx           | 25 +++++++++---------
 src/components/utilitarios/utilitarios.scss   |  3 +++
 src/styles/normalize.scss                     | 10 ++++++-
 11 files changed, 90 insertions(+), 27 deletions(-)

diff --git a/src/components/ajuda/ajuda.scss b/src/components/ajuda/ajuda.scss
index a329282..f50c5ef 100644
--- a/src/components/ajuda/ajuda.scss
+++ b/src/components/ajuda/ajuda.scss
@@ -1,3 +1,5 @@
+@import '../../styles/normalize.scss';
+
 .empty-ajuda {
   display: flex;
   flex-direction: column;
@@ -32,3 +34,8 @@
     }
   }
 }
+
+.descricao-mobile {
+  text-decoration: none;
+  padding: 0 16px;
+}
diff --git a/src/components/ajuda/ajuda.tsx b/src/components/ajuda/ajuda.tsx
index 347629b..79e16b7 100644
--- a/src/components/ajuda/ajuda.tsx
+++ b/src/components/ajuda/ajuda.tsx
@@ -1,11 +1,11 @@
 import { Component, h, Prop, ComponentInterface } from '@stencil/core';
 
-import { getCssVariableValue, isNill } from '../../utils/functions';
+import { isNill } from '../../utils/functions';
 
 @Component({
   tag: 'bth-ajuda',
   styleUrl: 'ajuda.scss',
-  shadow: true
+  shadow: true,
 })
 export class Ajuda implements ComponentInterface {
 
@@ -29,10 +29,10 @@ export class Ajuda implements ComponentInterface {
   render() {
     return (
       <bth-menu-ferramenta descricao="Ajuda" tituloPainelLateral="Ajuda">
-        <bth-icone slot="menu_item_desktop" icone="help-circle" cor={getCssVariableValue('--bth-app-gray-light-40')}></bth-icone>
+        <bth-menu-ferramenta-icone slot="menu_item_desktop" icone="help-circle"></bth-menu-ferramenta-icone>
 
-        <bth-icone slot="menu_item_mobile" icone="help-circle" cor={getCssVariableValue('--bth-app-gray-dark-20')}></bth-icone>
-        <span slot="menu_descricao_mobile">Ajuda</span>
+        <bth-menu-ferramenta-icone slot="menu_item_mobile" icone="help-circle" mobile ></bth-menu-ferramenta-icone>
+        <span slot="menu_descricao_mobile" class="descricao-mobile">Ajuda</span>
 
         <div slot="conteudo_painel_lateral" class="empty-ajuda">
           <div class="empty-ajuda__img"></div>
@@ -43,5 +43,4 @@ export class Ajuda implements ComponentInterface {
       </bth-menu-ferramenta>
     );
   }
-
 }
diff --git a/src/components/ajuda/readme.md b/src/components/ajuda/readme.md
index 9f1c52d..8850d60 100644
--- a/src/components/ajuda/readme.md
+++ b/src/components/ajuda/readme.md
@@ -43,15 +43,18 @@ A configuração é necessária somente caso haja necessidade de informar a url
 ### Depends on
 
 - [bth-menu-ferramenta](../app/menu-ferramenta)
+- [bth-menu-ferramenta-icone](../app/menu-ferramenta-icone)
 - [bth-icone](../comuns/icone)
 
 ### Graph
 ```mermaid
 graph TD;
   bth-ajuda --> bth-menu-ferramenta
+  bth-ajuda --> bth-menu-ferramenta-icone
   bth-ajuda --> bth-icone
   bth-menu-ferramenta --> bth-menu-painel-lateral
   bth-menu-painel-lateral --> bth-icone
+  bth-menu-ferramenta-icone --> bth-icone
   style bth-ajuda fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index feda2ed..9b3bd85 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -154,7 +154,7 @@ slot[name="container_contexto"] {
 
       .menu-vertical__toggle {
         text-decoration: none;
-        padding: 15px 15px 9px 15px;
+        padding: 13px 15px 9px 15px;
         &:before {
           content: "\f035C";
           font-size: 20px;
@@ -168,6 +168,11 @@ slot[name="container_contexto"] {
           background-color: rgba(255, 255, 255, 0.15);
           text-decoration: none;
         }
+
+        &:focus {
+          outline: 1px dotted var(--bth-app-gray-light-10);
+          outline-offset: -2px;
+        }
       }
 
       .menu-ferramentas {
@@ -198,13 +203,17 @@ slot[name="container_contexto"] {
               right: 5px;
               top: 5px;
             }
-
           }
           &:hover,
           &:focus {
             background-color: rgba(255, 255, 255, 0.15);
             text-decoration: none;
           }
+
+          &:focus {
+            outline: 1px dotted var(--bth-app-gray-dark-30);
+            outline-offset: -1px;
+          }
         }
       }
     }
@@ -280,6 +289,11 @@ slot[name="container_contexto"] {
       overflow: hidden;
       padding: 0px 9px 0px 0px;
 
+      &:focus {
+        outline: 1px dotted var(--bth-app-gray-dark-30);
+        outline-offset: -1px;
+      }
+
       &:hover,
       &:focus {
         background-color: rgba(225, 227, 230, 1);
diff --git a/src/components/app/menu-ferramenta-icone/readme.md b/src/components/app/menu-ferramenta-icone/readme.md
index 52ccfa1..73c9910 100644
--- a/src/components/app/menu-ferramenta-icone/readme.md
+++ b/src/components/app/menu-ferramenta-icone/readme.md
@@ -31,6 +31,7 @@ Também implementa a possibilidade de exibição de um `badge` ao lado do ícone
 
 ### Used by
 
+ - [bth-ajuda](../../ajuda)
  - [bth-notificacoes](../../notificacoes)
  - [bth-novidades](../../novidades)
  - [bth-utilitarios](../../utilitarios)
@@ -43,6 +44,7 @@ Também implementa a possibilidade de exibição de um `badge` ao lado do ícone
 ```mermaid
 graph TD;
   bth-menu-ferramenta-icone --> bth-icone
+  bth-ajuda --> bth-menu-ferramenta-icone
   bth-notificacoes --> bth-menu-ferramenta-icone
   bth-novidades --> bth-menu-ferramenta-icone
   bth-utilitarios --> bth-menu-ferramenta-icone
diff --git a/src/components/app/menu-ferramenta/menu-ferramenta.scss b/src/components/app/menu-ferramenta/menu-ferramenta.scss
index 8810b65..e9962aa 100644
--- a/src/components/app/menu-ferramenta/menu-ferramenta.scss
+++ b/src/components/app/menu-ferramenta/menu-ferramenta.scss
@@ -10,11 +10,13 @@
     background-color: rgba(255, 255, 255, 0.2);
   }
 
-  ::slotted(i), ::slotted(bth-icone) {
+  ::slotted(i),
+  ::slotted(bth-icone) {
     font-size: 18px;
   }
 
-  ::slotted(bth-avatar), ::slotted(img), ::slotted(svg) {
+  ::slotted(img),
+  ::slotted(svg) {
     vertical-align: middle;
     box-sizing: border-box;
     margin: 7px 14px;
@@ -24,15 +26,28 @@
     height: 24px;
   }
 
+  ::slotted(bth-avatar) {
+    vertical-align: middle;
+    box-sizing: border-box;
+    margin: 8px 14px;
+    display: unset;
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+  }
+
   a {
     color: var(--bth-app-gray-light-40);
     text-decoration: none;
-    padding: 7px 11px 9px 11px;
+    padding: 7px 11px 8px 11px;
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
     }
+    &:focus {
+      outline: 1px dotted var(--bth-app-gray-light-10);
+      outline-offset: -2px;
+    }
   }
-
 }
 
 .ferramenta-menu__mobile-toggler {
@@ -52,7 +67,8 @@
       background-color: var(--bth-app-gray-light-30);
     }
 
-    ::slotted(i), ::slotted(bth-icone) {
+    ::slotted(i),
+    ::slotted(bth-icone) {
       color: var(--bth-app-gray-dark-20);
       font-size: 20px;
     }
diff --git a/src/components/app/menu-vertical-item/menu-vertical-item.scss b/src/components/app/menu-vertical-item/menu-vertical-item.scss
index a343fc5..77e0976 100644
--- a/src/components/app/menu-vertical-item/menu-vertical-item.scss
+++ b/src/components/app/menu-vertical-item/menu-vertical-item.scss
@@ -62,6 +62,10 @@
           transition: opacity var(--bth-app-transition-delay) cubic-bezier(0.5, 0, 0.1, 1);
         }
       }
+      &:focus {
+        outline: 1px dotted var(--bth-app-gray-dark-30);
+        outline-offset: -1px;
+      }
     }
   }
 
@@ -81,6 +85,9 @@
       background-color: rgba(225, 227, 230, 1);
       text-decoration: none;
       color: var(--bth-app-gray-dark-30);
+    }
+
+    &:focus {
       outline: 1px dotted var(--bth-app-gray-dark-30);
       outline-offset: -1px;
     }
diff --git a/src/components/conta-usuario/conta-usuario.scss b/src/components/conta-usuario/conta-usuario.scss
index ac1ba14..ce684e2 100644
--- a/src/components/conta-usuario/conta-usuario.scss
+++ b/src/components/conta-usuario/conta-usuario.scss
@@ -23,6 +23,10 @@
   }
 }
 
+[slot='menu_item_desktop'] {
+  margin: 2px 0px 1px 0px;
+}
+
 .avatar-mobile {
   box-sizing: content-box;
   margin: 0 12px 0 0;
@@ -49,7 +53,6 @@
 }
 
 .painel-usuario {
-
   .perfil-usuario {
     display: flex;
     flex-direction: column;
diff --git a/src/components/conta-usuario/conta-usuario.tsx b/src/components/conta-usuario/conta-usuario.tsx
index 00ee3bf..b7ab052 100644
--- a/src/components/conta-usuario/conta-usuario.tsx
+++ b/src/components/conta-usuario/conta-usuario.tsx
@@ -115,18 +115,19 @@ export class ContaUsuario implements ComponentInterface {
 
   private renderMenuItemDesktop() {
     return (
-      <bth-avatar
-        slot="menu_item_desktop"
-        class="avatar-desktop"
-        src={this.getUrlImagemPerfil()}
-        title={`Foto de ${this.nome}`}
-        tamanho="menor"
-        borda
-        bordaTamanho="2px"
-        bordaCor={getCssVariableValue('--bth-app-gray-light-10')}
-        bordaRaio="50%"
-        onImageLoadError={this.onImageLoadError}>
-      </bth-avatar>
+      <section slot="menu_item_desktop">
+        <bth-avatar
+          class="avatar-desktop"
+          src={this.getUrlImagemPerfil()}
+          title={`Foto de ${this.nome}`}
+          tamanho="menor"
+          borda
+          bordaTamanho="2px"
+          bordaCor={getCssVariableValue('--bth-app-gray-light-10')}
+          bordaRaio="50%"
+          onImageLoadError={this.onImageLoadError}
+        ></bth-avatar>
+      </section>
     );
   }
 
diff --git a/src/components/utilitarios/utilitarios.scss b/src/components/utilitarios/utilitarios.scss
index 1901cf5..6d90e42 100644
--- a/src/components/utilitarios/utilitarios.scss
+++ b/src/components/utilitarios/utilitarios.scss
@@ -49,6 +49,9 @@
             border: 1px solid var(--bth-app-blue);
             cursor: pointer;
           }
+          &:focus {
+            outline: 1px dotted var(--bth-app-gray-dark-30);
+          }
         }
 
         &--disabled {
diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss
index 9da22e3..975810e 100644
--- a/src/styles/normalize.scss
+++ b/src/styles/normalize.scss
@@ -1,4 +1,6 @@
-*, *:after, *:before {
+*,
+*:after,
+*:before {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -9,6 +11,12 @@
   font-family: var(--bth-app-font-family-primary);
 }
 
+a {
+  &:focus {
+    outline: 1px dotted var(--bth-app-gray-dark-30);
+  }
+}
+
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   height: 6px;

From d30fef3388459e8639fe2a3dd201771587c47dd4 Mon Sep 17 00:00:00 2001
From: Gabriel de Freitas <gdfreitasdev@gmail.com>
Date: Thu, 26 Nov 2020 15:07:20 -0300
Subject: [PATCH 3/4] =?UTF-8?q?Vers=C3=A3o=201.0.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d2c66ec..e67d606 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@betha-plataforma/estrutura-componentes",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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",
@@ -46,8 +46,8 @@
     "lint": "eslint --ext .js,.ts,.tsx src/"
   },
   "keywords": [
-    "estrutura componentes", 
-    "web components", 
+    "estrutura componentes",
+    "web components",
     "stenciljs",
     "plataforma",
     "betha cloud"

From 8dd805361006bcf6ebc696e10318b1d08a6594c7 Mon Sep 17 00:00:00 2001
From: Gabriel de Freitas <gdfreitasdev@gmail.com>
Date: Thu, 26 Nov 2020 15:17:11 -0300
Subject: [PATCH 4/4] Cria CI para build e test em pull requests

---
 .github/workflows/pull_request.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/pull_request.yml

diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
new file mode 100644
index 0000000..4a5e41f
--- /dev/null
+++ b/.github/workflows/pull_request.yml
@@ -0,0 +1,26 @@
+name: Pull Request
+
+on:
+  pull_request:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.17"
+
+      - name: Install
+        run: yarn install --frozen-lockfile
+
+      - name: Test
+        run: yarn test
+
+      - name: Build
+        run: yarn build