@govbr-ds/webcomponents 1.5.0 → 1.6.0

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 +79 -39
  2. package/dist/webcomponents.common.js +19123 -17947
  3. package/dist/webcomponents.common.js.map +1 -1
  4. package/dist/webcomponents.umd.js +19124 -17948
  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,109 @@
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
16
-
17
- Para conseguir usar nossa biblioteca sem problemas temos as seguintes dependências:
18
-
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')
18
+ ## Uso
24
19
 
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.
20
+ Existem 2 maneiras de usar nossos Web Components:
26
21
 
27
- ## Instalação
22
+ - Pacote NPM
28
23
 
29
24
  ```bash
30
-
31
25
  npm install --save @govbr-ds/webcomponents
32
26
  ```
33
27
 
34
- ## Uso
35
-
36
28
  Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
37
29
 
38
30
  ```javascript
39
-
40
31
  @import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
41
32
  ```
42
33
 
34
+ - CDN
35
+
36
+ ```html
37
+ <script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
38
+ ```
39
+
40
+ > Troque **versão** pela versão do pacote que deseja
41
+
42
+ **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.
43
+
44
+ ### Font Awesome e Fonte Rawline
45
+
46
+ 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.
47
+
48
+ 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.
49
+
43
50
  ### Exemplos de uso
44
51
 
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.
52
+ 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.
53
+
54
+ ## Estrutura de pastas
55
+
56
+ > Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
57
+
58
+ ```markdown
59
+ /raiz
60
+ └───public
61
+ │ └───index.html
62
+ └───src
63
+ │ │───App.vue
64
+ │ │───main.js
65
+ │ │
66
+ │ │───library
67
+ │ │ │───lib.js
68
+ │ │ │───components
69
+ │ │ │───mixins
70
+ │ │ └───util
71
+ │ │───pages
72
+ │ │───router
73
+ │ └───stories
74
+ ```
75
+
76
+ - **public/index.html**: página inicial da aplicação Vue que faz uso dos componentes da biblioteca.
77
+ - **src**
78
+ - **App.vue** e **main.js**: arquivos da aplicação Vue.
79
+ - **library**
80
+ - **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
81
+ - **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
82
+ - **mixins**: mixins que são usados em vários componentes.
83
+ - **util**: funções criadas para facilitar ações dentro dos componentes
84
+ - **pages**: páginas da aplicação Vue. São os exemplos que usamos para testar
85
+ - **router**: arquivo com as rotas apontando para as páginas (pages) da aplicação Vue
86
+ - **stories**: Arquivos com as stories gerais do storybook
87
+
88
+ > 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
89
 
47
- ## Rodando localmente
90
+ ## Rodar o projeto na máquina local
48
91
 
49
92
  Clone o projeto:
50
93
 
51
94
  ```bash
52
-
53
95
  git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
54
96
  ```
55
97
 
56
98
  Entre no diretório do projeto:
57
99
 
58
100
  ```bash
59
-
60
101
  cd govbr-ds-wbc
61
102
  ```
62
103
 
63
104
  Instale as dependências:
64
105
 
65
106
  ```bash
66
-
67
107
  npm install
68
108
  ```
69
109
 
@@ -74,7 +114,6 @@ Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:
74
114
  Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.
75
115
 
76
116
  ```node
77
-
78
117
  npm run serve
79
118
  ```
80
119
 
@@ -85,7 +124,6 @@ Nessa visualização o projeto é executado a partir do storybook e convertido p
85
124
  Aqui você consegue testar as configurações, obter snippets de código e visualizar os componentes rodando como nos ambientes de produção.
86
125
 
87
126
  ```node
88
-
89
127
  npm run storybook
90
128
  ```
91
129
 
@@ -99,9 +137,9 @@ Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
99
137
 
100
138
  Antes de abrir um Merge Request tenha em mente algumas informações:
101
139
 
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?').
140
+ - Esse é um projeto opensource e contribuições são bem-vindas.
141
+ - 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').
142
+ - Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
105
143
 
106
144
  ### Reportar bugs/necessidades
107
145
 
@@ -115,27 +153,29 @@ Nos comprometemos a responder a todas as issues.
115
153
 
116
154
  Use nossos canais abaixo para obter tirar suas dúvidas:
117
155
 
118
- - Site do GOVBR-DS <http://gov.br/ds>
156
+ - Site do GovBR-DS <http://gov.br/ds>
119
157
 
120
- - Web Components <https://gov.br/ds/webcomponents/>
158
+ - Web Components <https://gov.br/ds/webcomponents/>
121
159
 
122
- - Pelo nosso email <govbr-ds@serpro.gov.br>
160
+ - Pelo nosso email <govbr-ds@serpro.gov.br>
123
161
 
124
- - Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
162
+ - Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
125
163
 
126
164
  ## Commits
127
165
 
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.
166
+ 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
167
 
130
168
  ## Apêndice
131
169
 
132
170
  ### Polyfill
133
171
 
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.
172
+ 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.
173
+
174
+ Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
135
175
 
136
- Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')## Créditos
176
+ ## Créditos
137
177
 
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.
178
+ 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
179
 
140
180
  ## Licença
141
181