@govbr-ds/webcomponents NPM

Web Components GovBR-DS

Nosso objetivo é disponibilizar uma biblioteca de componentes baseada no GovBR-DS que possa ser consumida independente de frameworks ou tecnologias utilizadas nos projetos.

Demonstração

Acesse nossos sites e veja nossos componentes em ação:

Tecnologias

Esse projeto é desenvolvido usando:

Para saber mais detalhes sobre Web Components sugerimos que consulte o MDN.

Documentações Complementares

Consulte nossa a seção sobre Web Componente na nossa Wiki para obter mais informações.

Uso

Existem 2 maneiras de usar nossos Web Components:

Pacote NPM

npm install --save @govbr-ds/webcomponents

Depois de instalada, importe a biblioteca de dentro da pasta node_modules:

@import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"

<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>

Troque versão pela versão do pacote que deseja

Importante: O CDN https://unpkg.com/ não é mantido por nossa equipe e portanto não podemos garantir um SLO. Considere importar os arquivos necessários para uma infraestrutura interna caso isso seja um impedimento para seu projeto.

Font Awesome e Fonte Rawline

Nossos componentes usam a Fonte Rawline juntamente com a Font Awesome padrão do DS.

Consulte a documentação no site do GovBR-DS para mais detalhes sobre como importá-los de seus respectivos CDNs.

Exemplos de uso

Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o nosso grupo aqui no gitlab e procure pelos projetos de 'Quickstart' para mais detalhes.

Estrutura de pastas

Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.

/raiz
└───src
│───assets
│───library
│ │───lib.js
│ │───components
│ │───mixins
│ └───util
└───stories

src
- assets: pasta com arquivos estáticos
- library
  - lib.js: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
  - components: pasta com os componentes da biblioteca, seus testes e stories do storybook.
  - mixins: mixins que são usados em vários componentes.
  - util: funções criadas para facilitar ações dentro dos componentes
- stories: Arquivos com as stories gerais do storybook

Aplicação Vue é uma aplicação criada para testar rapidamente nossos componentes. Ela não é disponibilizada no build e nem disponibilizamos um site com ela.

Rodar o projeto na máquina local

Clone o projeto:

git clone git@gitlab.com:govbr-ds/bibliotecas/wc/govbr-ds-wc.git

cd govbr-ds-wc

npm install

npm run storybook

Documentação

Nossa documentação está disponível em https://gov.br/ds/webcomponents/.

Para outras informações, consulte nossa Wiki.

Polyfill

Acesse os seguintes links para entender mais sobre o suporte dos browsers a Custom Elements e a Shadow Dom.

Caso os requisitos do seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os polyfills ao seu projeto.

Para aprender com instalar, consulte a documentação oficial

Contribuindo

Antes de abrir um Merge Request tenha em mente algumas informações:

Esse é um projeto opensource e contribuições são bem-vindas.
Para facilitar a aprovação da sua contribuição, escolha um título curto, simples e explicativo para o MR, e siga os padrões da nossa wiki.
Quer contribuir com o projeto? Confira o nosso guia como contribuir.

Reportar bugs/necessidades

Você pode usar as issues para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.

Nos comprometemos a responder a todas as issues.