zee.athena

Athena

Knowledge center component for Zee.Dog projects

Motivation

Nós da Zee.Dog desenvolvemos esse componente com o intuito de usa-lo em diferentes projetos da Zee.Dog ou até mesmo em projetos a parte, pois ele também pode ser customizável para poder usar outros botões além dos padrões da Zee.Dog.

Installing / Getting started

NPM: npm install --save zee.athena
Yarn: yarn add zee.athena

Developing

Built With

• ES6
• Babel
• Parcel JS

Usage

// ES6 Modules or TypeScript
import Athena from 'zee.athena';
Athena.init();

// CommonJS
const Athena = require('zee.athena');
Athena.init();

Examples

Default buttons

• Faq
• Sizes
• Contact
• Chat

Starting component

OBS: Por padrão ele inicia o componente em inglês e com todos os botões padrões incluídos.

Athena.init();

Customizing

Para alterar a linguagem do componente para português é preciso usar o seguindo trecho de código:

Athena.init({ language: 'pt-br' });

Para customizar o botão inicial de ajuda que faz abrir a lista de botões, passar um objeto onde irão conter as propriedades que customizam o botão principal:

Properties

• title - Altera o título do botão principal.
• icon - Altera o ícone do botão, para alterar o icone precisa-se passar um svg.
• configStyleButton - É um objeto onde irão conter as propriedades de core que serão passadas.
  • backgroundColor - Altera o background do botão.
  • backgroundColorHover - Altera o background do botão ao passar o mouse, pois todo botão tem um background diferente quando está com hover.
  • fontColor - Altera a cor da fonte do botão.
  • colorIcon - Altera a cor do íncone.
• Chat

Athena.init({ mainButtonStyle: {
 title: 'Help',
 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.3 12.8"><path d="M1.4.038c-.2 0-.4.1-.6.1l7.7 7.8c.4.4.9.4 1.3 0l7.8-7.8c-.2-.1-.4-.1-.6-.1H1.4zm16.8.7l-5.8 5.9 5.8 5.4c.1-.2.1-.4.1-.6v-10.1c0-.2 0-.4-.1-.6zM.1.738c-.1.2-.1.4-.1.6v10.1c0 .2 0 .4.1.6l5.8-5.4L.1.738zm11.6 6.6l-1.3 1.3c-.7.7-1.9.7-2.6 0l-1.3-1.3-5.8 5.4c.2.1.4.1.6.1h15.6c.2 0 .4 0 .6-.1l-5.8-5.4z"></path></svg>',
 configStyleButton: {
   backgroundColor: 'black',
   backgroundColorHover: 'black',
   fontColor: 'white',
   colorIcon: 'white'
 },
} });

Se você não quiser usar os botões padrão já inseridos pelo componente e usar outros a sua escolha, é só usar o seguinte trecho de código, você pode usar true ou false, onde true mostram todos e false não mostra nenhum:

Athena.init({ showAllButtons: false }); //Não mostra nenhum dos botões padrão.
Athena.init({ showAllButtons: true }); //Mostra todos botões padrão.

Para customizar os botões padrão, você pode retirar alguns botões padrão, ou customiza-los, passando um array com as configurações de cada um em um objeto:

Neste examplo só o botão de sizes irá aparecer com as suas cores alteradas.

  Athena.init({showAllButtons: false, configButtons: [
    {
      type: 'size',
      show: true,
      classButton: 'sizes',
      configStyleButton: {
        backgroundColor: '#37474f',
        backgroundColorHover: '#90a4ae',
        colorIcon: '#0091ea',
      },
    }
  ]});

Para usar seus próprios botões e e seus próprios conteúdos, usar o seguinte trecho de código, passando um array contendo os botões que serão usados:

Properties

• title - Cria o título do botão.
• icon - Cria o ícone do botão, pode se passar um texto ou svg.
• classButton - Classe do botão que será usada para criar estilos e funções dos botões.
• template - Onde irá ser passado o template com o conteúdo do botão ao ser clicado.
• configStyleButton - É um objeto onde irão conter as propriedades de core que serão passadas.
  • backgroundColor - Altera o background do botão.
  • backgroundColorHover - Altera o background do botão ao passar o mouse, pois todo botão tem um background diferente quando está com hover.
  • fontColor - Altera a cor da fonte do botão.

Athena.init({ showAllButtons: false, newButtons: [
 {
   title: 'teste',
   icon: 'teste',
   classButton: 'test',
   template: `
   <section class="test-content inner__content">
     <header class="custom-content__header">
       <h6 class="title">Custom Element</h6>
     </header>
     <section class="custom-content__body">
       <p>Custom Text</p>
     </section>
   </section>
 `,
   configStyleButton: {
     backgroundColor: '#00796b',
     backgroundColorHover: '#26a69a',
     fontColor: '#00b0ff',
   },
 },
 {
   title: 'teste2',
   icon: 'teste2',
   classButton: 'test2',
   template: `
   <section class="test2-content inner__content">
     <header class="custom-content__header">
       <h6 class="title">Custom Element2</h6>
     </header>
     <section class="custom-content__body">
       <p>Custom Text</p>
     </section>
   </section>
 `,
   configStyleButton: {
     backgroundColor: '#2196f3',
     backgroundColorHover: '#4caf50',
   },
 },
 {
   title: 'teste3',
   icon: 'teste3',
   classButton: 'test3',
   template: `
   <section class="test3-content inner__content">
     <header class="custom-content__header">
       <h6 class="title">Custom Element2</h6>
     </header>
     <section class="custom-content__body">
       <p>Custom Text</p>
     </section>
   </section>
   `,
 },
]});

Browser compatibility

IE11*	Firefox	Chrome	Safari
✔️	✔️	✔️	✔️