README

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.

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>

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)
  },
}
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)

@plurall/layout

Usage no npm install needed!