@govbr-ds/webcomponents 1.5.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +81 -37
  2. package/dist/webcomponents.common.js +19234 -18037
  3. package/dist/webcomponents.common.js.map +1 -1
  4. package/dist/webcomponents.umd.js +19220 -18023
  5. package/dist/webcomponents.umd.js.map +1 -1
  6. package/dist/webcomponents.umd.min.js +7 -1
  7. package/dist/webcomponents.umd.min.js.map +1 -1
  8. package/package.json +63 -63
package/README.md CHANGED
@@ -1,69 +1,113 @@
1
- # Web Components GOVBR-DS
1
+ # Web Components GovBR-DS
2
2
 
3
- Biblioteca baseada no [GOVBR-DS](https://gov.br/ds 'GOVBR-DS') e construída usando Web Components para ser independente de frameworks.
3
+ Biblioteca baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') e construída usando Web Components para ser independente de frameworks.
4
4
 
5
5
  ## Tecnologias
6
6
 
7
7
  Esse projeto é desenvolvido usando:
8
8
 
9
- 1. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
10
- 1. [Storybook](https://storybook.js.org/ 'Storybook')
11
- 1. [Jest](https://jestjs.io/ 'Jest')
9
+ 1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
10
+ 2. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
11
+ 3. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
12
+ 4. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
13
+ 5. [Storybook](https://storybook.js.org/ 'Storybook')
14
+ 6. [Jest](https://jestjs.io/ 'Jest')
12
15
 
13
- Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
16
+ > Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
14
17
 
15
- ## Dependências
18
+ ## Documentações Complementares
16
19
 
17
- Para conseguir usar nossa biblioteca sem problemas temos as seguintes dependências:
20
+ Consulte nossa a seção sobre Web Componente na nossa [Wiki](https://govbr-ds.gitlab.io/tools/wiki/hugo-cms/desenvolvimento/web-components) para obter mais informações.
18
21
 
19
- 1. [GOVBR-DS](https://gov.br/ds/ 'GOVBR-DS')
20
-
21
- 1. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
22
-
23
- 1. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
22
+ ## Uso
24
23
 
25
- > O fontawesome e a fonte rawline podem ser importadas de um CDN. Consulte a documentação no site do [GOVBR-DS](https://www.gov.br/ds/ 'GOVBR-DS') para mais detalhes.
24
+ Existem 2 maneiras de usar nossos Web Components:
26
25
 
27
- ## Instalação
26
+ - Pacote NPM
28
27
 
29
28
  ```bash
30
-
31
29
  npm install --save @govbr-ds/webcomponents
32
30
  ```
33
31
 
34
- ## Uso
35
-
36
32
  Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
37
33
 
38
34
  ```javascript
39
-
40
35
  @import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
41
36
  ```
42
37
 
38
+ - CDN
39
+
40
+ ```html
41
+ <script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
42
+ ```
43
+
44
+ > Troque **versão** pela versão do pacote que deseja
45
+
46
+ **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.
47
+
48
+ ### Font Awesome e Fonte Rawline
49
+
50
+ Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
51
+
52
+ Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
53
+
43
54
  ### Exemplos de uso
44
55
 
45
- Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GOVBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
56
+ Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GovBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
57
+
58
+ ## Estrutura de pastas
59
+
60
+ > Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
61
+
62
+ ```markdown
63
+ /raiz
64
+ └───public
65
+ │ └───index.html
66
+ └───src
67
+ │ │───App.vue
68
+ │ │───main.js
69
+ │ │
70
+ │ │───library
71
+ │ │ │───lib.js
72
+ │ │ │───components
73
+ │ │ │───mixins
74
+ │ │ └───util
75
+ │ │───pages
76
+ │ │───router
77
+ │ └───stories
78
+ ```
79
+
80
+ - **public/index.html**: página inicial da aplicação Vue que faz uso dos componentes da biblioteca.
81
+ - **src**
82
+ - **App.vue** e **main.js**: arquivos da aplicação Vue.
83
+ - **library**
84
+ - **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
85
+ - **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
86
+ - **mixins**: mixins que são usados em vários componentes.
87
+ - **util**: funções criadas para facilitar ações dentro dos componentes
88
+ - **pages**: páginas da aplicação Vue. São os exemplos que usamos para testar
89
+ - **router**: arquivo com as rotas apontando para as páginas (pages) da aplicação Vue
90
+ - **stories**: Arquivos com as stories gerais do storybook
91
+
92
+ > 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.
46
93
 
47
- ## Rodando localmente
94
+ ## Rodar o projeto na máquina local
48
95
 
49
96
  Clone o projeto:
50
97
 
51
98
  ```bash
52
-
53
99
  git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
54
100
  ```
55
101
 
56
102
  Entre no diretório do projeto:
57
103
 
58
104
  ```bash
59
-
60
105
  cd govbr-ds-wbc
61
106
  ```
62
107
 
63
108
  Instale as dependências:
64
109
 
65
110
  ```bash
66
-
67
111
  npm install
68
112
  ```
69
113
 
@@ -74,7 +118,6 @@ Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:
74
118
  Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.
75
119
 
76
120
  ```node
77
-
78
121
  npm run serve
79
122
  ```
80
123
 
@@ -85,7 +128,6 @@ Nessa visualização o projeto é executado a partir do storybook e convertido p
85
128
  Aqui você consegue testar as configurações, obter snippets de código e visualizar os componentes rodando como nos ambientes de produção.
86
129
 
87
130
  ```node
88
-
89
131
  npm run storybook
90
132
  ```
91
133
 
@@ -99,9 +141,9 @@ Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
99
141
 
100
142
  Antes de abrir um Merge Request tenha em mente algumas informações:
101
143
 
102
- - Esse é um projeto opensource e contribuições são bem-vindas.
103
- - 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](https://govbr-ds.gitlab.io/govbr-ds-wiki/ 'Wiki').
104
- - Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
144
+ - Esse é um projeto opensource e contribuições são bem-vindas.
145
+ - 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](https://gov.br/ds/wiki/ 'Wiki').
146
+ - Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
105
147
 
106
148
  ### Reportar bugs/necessidades
107
149
 
@@ -115,27 +157,29 @@ Nos comprometemos a responder a todas as issues.
115
157
 
116
158
  Use nossos canais abaixo para obter tirar suas dúvidas:
117
159
 
118
- - Site do GOVBR-DS <http://gov.br/ds>
160
+ - Site do GovBR-DS <http://gov.br/ds>
119
161
 
120
- - Web Components <https://gov.br/ds/webcomponents/>
162
+ - Web Components <https://gov.br/ds/webcomponents/>
121
163
 
122
- - Pelo nosso email <govbr-ds@serpro.gov.br>
164
+ - Pelo nosso email <govbr-ds@serpro.gov.br>
123
165
 
124
- - Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
166
+ - Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
125
167
 
126
168
  ## Commits
127
169
 
128
- Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://govbr-ds.gitlab.io/govbr-ds-wiki/ 'Wiki') para aprender sobre os nossos padrões.
170
+ Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender sobre os nossos padrões.
129
171
 
130
172
  ## Apêndice
131
173
 
132
174
  ### Polyfill
133
175
 
134
- Caso os requisitos to seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os [polyfills](https://www.webcomponents.org/polyfills) ao seu projeto.
176
+ Caso os requisitos do seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os [polyfills](https://www.webcomponents.org/polyfills) ao seu projeto.
177
+
178
+ Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
135
179
 
136
- Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')## Créditos
180
+ ## Créditos
137
181
 
138
- Os Web Components do [GOVBR-DS](https://gov.br/ds/ 'GOVBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
182
+ Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
139
183
 
140
184
  ## Licença
141
185