widget-layout (Layout Elo)

Nosso Layout é um componente inteligente, que por sua vez pode ser usado com ou sem nosso sistema de grid, mas recomendamos fortemente que sempre de preferência para nosso sistema de grid. Todos os layouts definidos pelo time de UX, seguem essa linha. Para saber mais sobre o sistema de grid, você pode olhar a documentação em Elo Grid System

O nosso layout já vem com a arquitetura das disposição do conteudo e o menu, assim como todas as suas variações e funcionalidades, sendo obrigátorio apenas a passagem do token e ambiente do usuário logado.

Obs: Você pode redimensionar a tela do browser para ver o layout com suas variações de breakpoints.

Atualização do pacote @plurall/layout

O projeto widget layout @plurall/layout é amplamente utilizado em vários projetos do capítulo frontend. Sendo um projeto comunitário do capítulo e, mantido pela nossa stack de frontend, é o "Elo" que padroniza nossos projetos. É necessário realizar a atualização da versão do pacote @plurall/layout em uma série de outros repositórios quando uma nova feature/fix é realizado no projeto. Sendo de responsabilidade do demandante a atualização (Abertura de MRs) de acordo com o consumo do @plurall/layout na listagem abaixo:

• Lista de projetos

Para os projetos em outras stacks (AngularJs - Maestro) ou qualquer outro que não React, é utilizado o repositório: web-components que irá gerar um bundle

<div id="elo-menu"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"><script>

<script src="https://assets.cdn.plurall.net/web-components/bundle-59f3ec3.js"></script>

 ReactDOM.render(React.createElement(PlurallEloLayout, {
    userToken: userToken,
    apiURL: settings.plurallEndPoint,
    menuURL: settings.plurallEndPointMenu ? `${settings.plurallEndPointMenu}/plurall` : '',
    graphqlURL: `${settings.ssoPlurall}/graphql`,
    applicationId: 'NWU3NTFkODZjZjQ2OWE0',
    service: service,
    projectName: projectName,
  }), document.getElementById('elo-menu'));

Exemplo 1: Usando conteúdo do Layout com o grid

  <Layout>
    <GridContainer>
      <Row>
        <Grid desktop={12} tablet={12} mobile={12}>
          <Heading element='h1'>Welcome to Elo</Heading>
        </Grid>
      </Row>
    </GridContainer>
  </Layout>

Exemplo 2: Usando conteúdo do Layout sem o grid

  <Layout>
    <div>
      <h1>Aqui entra o seu conteúdo</h1>
      <p>
        podendo ou não usar o nosso sistema de grid. Mas recomendamos fortemente
        a ser usado, pois é o sistema que todo o time de UX usa na criação das
        páginas. Assim evitando `duplicidade de código` e tamanhos/padding
        diferentes em suas variações.
      </p>
    </div>
  </Layout>

Exemplo 3: Usando as Notificações no Layout do Plurall

Para rodar localmente: copiar as variáveis de .env.development

  <Layout
      {...props}
      msApiURL={'Url da API de comunicações'}
      apiKey={'Chave do firebase'}
      authDomain={'Url de auth do firebase'}
      projectId={'Project ID do firebase'}
      storageBucket={'Chave de config. do firebase'}
      messagingSenderId={'Chave de config. do firebase'}
      appId={'Chave de config. do firebase'}
      measurementId={'Chave de config. do firebase'}
    >
    <div>
      <h1>Aqui entra o seu conteúdo</h1>
    </div>
  </Layout>

Toasts

O component Layout utiliza-se do component do Elo ToastContainer, nesse sentido há interfaces expostas para disparo de toast no formato de empilhamento.

Params

const toast = {
  text: 'toast text',
  autoClose: true,
  action: '',
  actionLink: '',
  actionTarget: '',
  disableButtonClose: false,
  seconds: 6, // in seconds
  variant: 'attention', // 'informative' || 'negative' || 'positive'
  onDismiss: () => {
    console.log('onDismiss')
  },
  onActionClick: () => {
    console.log('onActionClick')
  }
}

Usage

/* Armazenando toasts ids */
let toastIds = []
const toastId = window.PLURALL_ELO_TOAST_CONTAINER.addToast({ text:'toast text', variant: 'positive' })
toastIds.push(toastId)

/* Forçar a dispensa de toasts dado ids */
toastIds.forEach(toastId => {
  window.PLURALL_ELO_TOAST_CONTAINER.removeToast(toastId)
})

Banner Top

Usados com posição edge to edge no topo da página, deve ser exibido em todas as páginas que for necessário. Proposto para conteúdos de contexto da aplicação, independente da página atual.

Sendo assim o controle do Banner top é feito por uma funcionalidade criada por esse componente e acesível em qualquer parte do sistema via js em: window.PLURALL_ELO.bannerTopShow

A função bannerTopShow precisa de 2 argumentos, sendo o primeiro apenas uma variável boolean e o segundo um objeto com props do banner que são válidas pro banner top

const show = true
const data = {
  text: 'Falta configurar seus dados de xpto',
  variant: 'informative',
  linkText: 'configurar',
  target: '_blank',
  href: 'https://xpto.s.plurall.net/configurar',
  onClick: () => {
    // Qualquer outro código seu Aqui
    // ...

    // Caso queira fechar o banner top depois do clique
    window.PLURALL_ELO.bannerTopShow(false)
  },
  isSticky: false,
}
window.PLURALL_ELO.bannerTopShow(show, data)

A prop text é obrigatória, pois é ela que gera o children do Banner, e deve ser apenas uma string

O restante das props do objeto data sao passadas pro componente Banner então devem respeitar os tipos e obrigatoriedades definidos pelo Banner

• OBS.: As props que não forem necessárias não precisam ser passadas no objeto data

Para fechar o Banner top só precisa passar o primeiro argumento como false

window.PLURALL_ELO.bannerTopShow(false)