Introdução
Esta é a documentação histórica da versão 1.21.3 dos Web Components
GovBR-DS. O texto desta página foi copiado do conteúdo publicado com a tag
v1.21.3
para que a documentação continue legível mesmo quando o Storybook legado não
estiver disponível.
Esta página descreve a API 1.x. Ela não é a documentação dos componentes 2.x. Os links de demonstração abrem o Storybook congelado em uma nova aba e servem para testar a interação exata desta versão.
Web Components GovBR-DS
Nosso objetivo é disponibilizar uma biblioteca de componentes baseada no GovBR-DS que possa ser consumida independentemente dos frameworks ou tecnologias usados nos projetos.
Demonstração
Acesse os sites abaixo para ver os componentes em ação:
- Storybook legado da versão 1.21.3 (introdução e navegação dos exemplos).
- Storybook de produção do GovBR-DS.
- Projeto e Storybook de desenvolvimento.
- Código-fonte congelado na tag v1.21.3.
O catálogo de componentes desta versão está em Componentes. Cada exemplo do catálogo tem um link “Testar” que também abre uma nova aba.
Tecnologias
O projeto histórico foi desenvolvido usando:
Para conhecer a tecnologia de Web Components, consulte a documentação da MDN.
Documentações complementares
Consulte a seção de Web Components na Wiki do GovBR-DS para informações de desenvolvimento. As páginas históricas de links relacionados, eventos, utilitários JavaScript, contribuição, segurança e notas de versão continuam disponíveis no Storybook legado.
Uso
Há duas formas históricas de usar os Web Components.
Pacote NPM
npm install --save @govbr-ds/webcomponents@1.21.3
Depois da instalação, carregue o bundle da pasta node_modules:
<script src="./node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"></script>
O nome e o caminho acima são da série 1.x. Para projetos novos, consulte a documentação atual antes de copiar este comando.
CDN
<script src="https://unpkg.com/@govbr-ds/webcomponents@1.21.3/dist/webcomponents.umd.min.js"></script>
Troque 1.21.3 pela versão do pacote que deseja usar. O CDN
unpkg
não é mantido pela equipe do GovBR-DS e não oferece garantia de SLO. Quando
isso for um requisito, hospede os arquivos necessários em uma infraestrutura
interna.
Font Awesome e fonte Rawline
Os componentes usam a fonte Rawline juntamente com a Font Awesome do DS. Consulte a documentação de instalação do GovBR-DS para detalhes sobre os arquivos de fonte e ícones.
Exemplos de uso
Há exemplos de integração com diferentes tecnologias no grupo do projeto no GitLab. Procure os projetos de Quickstart para ver as aplicações de referência.
Estrutura de pastas da versão histórica
As pastas abaixo são as que o projeto 1.21.3 apresentava para desenvolvimento e contribuição:
/raiz
└── src
├── assets
├── library
│ ├── lib.js
│ ├── components
│ ├── mixins
│ └── util
└── stories
O aplicativo Vue consumia library/lib.js, enquanto as stories em stories
documentavam os componentes no Storybook.
Executar o projeto histórico localmente
git clone git@gitlab.com:govbr-ds/bibliotecas/wbc/govbr-ds-wbc.git
cd govbr-ds-wbc
git checkout 1.x.x
npm install
npm run storybook
O comando reproduz o ambiente de desenvolvimento da linha 1 somente quando a tag e as dependências históricas ainda estão disponíveis. Para consultar a documentação publicada, abra a documentação online.
Polyfills e compatibilidade
Consulte o suporte dos navegadores a Custom Elements e Shadow DOM. Se o projeto precisar de navegadores sem suporte completo a Web Components, avalie os polyfills e a documentação oficial do webcomponentsjs.
