Merge pull request #1 from betha-plataforma/feature-outlines

Outline padrão em elementos focáveis
betha-plataforma · Nov 26, 2020 · cdf0883 · cdf0883
2 parents 0f37252 + 8dd8053
commit cdf0883
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 32 deletions.
diff --git a/.github/workflows/pull_request.yml 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
diff --git 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"

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -42,7 +42,7 @@
   }
 
   &--collapsed > .menu-vertical__list {
-    max-height: 0!important;
+    max-height: 0 !important;
   }
 
   &--floating {
@@ -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;
+      }
     }
   }
 
@@ -83,6 +87,11 @@
       color: var(--bth-app-gray-dark-30);
     }
 
+    &:focus {
+      outline: 1px dotted var(--bth-app-gray-dark-30);
+      outline-offset: -1px;
+    }
+
     bth-icone {
       &:first-child,
       &:last-child {
@@ -121,6 +130,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 +172,3 @@
     }
   }
 }
-
diff --git 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
@@ -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
@@ -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
@@ -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;