Nosso objetivo é disponibilizar uma biblioteca de componentes baseada no GovBR-DS que possa ser consumida independente de frameworks ou tecnologias utilizadas nos projetos.
Acesse nossos sites e veja nossos componentes em ação:
Esse projeto é desenvolvido usando:
Para saber mais detalhes sobre Web Components sugerimos que consulte o MDN.
Consulte nossa a seção sobre Web Componente na nossa Wiki para obter mais informações.
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"
- CDN
<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.
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.
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.
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.
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
Nossa documentação está disponível em https://gov.br/ds/webcomponents/.
Para outras informações, consulte nossa Wiki.
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
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.
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.
Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa wiki para aprender sobre os nossos padrões.
Por favor não crie issues para fazer perguntas...
Use nossos canais abaixo para obter tirar suas dúvidas:
-
Site do GovBR-DS http://gov.br/ds
-
Web Components https://gov.br/ds/webcomponents/
-
Usando nosso canal no discord https://discord.gg/U5GwPfqhUP
Os Web Components do GovBR-DS são criados pelo SERPRO e Dataprev juntamente com a participação da comunidade.
Nesse projeto usamos a licença MIT.