desy-html 8.1.0 → 8.1.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 (5) hide show
  1. package/docs/ds/_ds.section.color.njk +92 -44
  2. package/docs/index.html +6 -2
  3. package/package.json +1 -1
  4. package/src/templates/components/searchbar/_examples.searchbar.njk +2 -2
  5. package/src/templates/components/searchbar/_template.searchbar.njk +1 -1
package/docs/ds/_ds.section.color.njk CHANGED
@@ -6,51 +6,99 @@
6
6
  {{ DSSectionTitle({
7
7
  title: "Color"
8
8
  }) }}
9
- <div class="pb-lg"></div>
10
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
11
- {{ DSSubsectionTitle({
12
- title: "Color de interacción"
13
- }) }}
14
- <p class="c-paragraph-base">El azul es el color principal de interacción, presente en los botones primarios y links.</p>
15
- {% include "ds/_ds.example.color-de-interaccion.njk" %}
16
- <div class="my-lg">
17
- {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
18
- {{ DSCodeSnippet("ds/_ds.example.color-de-interaccion.njk", "color-de-interaccion") }}
19
- </div>
20
- <div class="pb-lg"></div>
21
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
22
- {{ DSSubsectionTitle({
23
- title: "Colores de soporte"
24
- }) }}
25
- <p class="c-paragraph-base">Son los colores utilizados para diversos usos.</p>
26
- {% include "ds/_ds.example.colores-de-soporte.njk" %}
27
- <div class="my-lg">
28
- {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
29
- {{ DSCodeSnippet("ds/_ds.example.colores-de-soporte.njk", "colores-de-soporte") }}
30
- </div>
31
- <div class="pb-lg"></div>
32
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
33
- {{ DSSubsectionTitle({
34
- title: "Colores neutros"
35
- }) }}
36
- <p class="mb-8">Utiliza negro para los textos principales, neutral-dark para los textos secundarios, neutral-base para bordes de tarjetas y placeholders, neutral-light y neutral-lighter para fondos.</p>
37
- {% include "ds/_ds.example.colores-neutros.njk" %}
38
- <div class="my-lg">
39
- {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
40
- {{ DSCodeSnippet("ds/_ds.example.colores-neutros.njk", "colores-neutros") }}
41
- </div>
42
- <div class="pb-lg"></div>
43
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
44
- {{ DSSubsectionTitle({
45
- title: "Colores de cabecera"
46
- }) }}
47
- <p class="mb-8">Utiliza logo o letras blancas sobre un azul oscuro poco saturado para el fondo de cabeceras.</p>
48
- {% include "ds/_ds.example.colores-cabecera.njk" %}
49
- <div class="my-lg">
50
- {% from "ds/_ds.macro.code-snippet.njk" import DSCodeSnippet %}
51
- {{ DSCodeSnippet("ds/_ds.example.colores-cabecera.njk", "colores-de-cabecera") }}
9
+ <div class="grid lg:grid-cols-4 grid-rows-12 gap-base">
10
+
11
+ {# 1 #}
12
+ <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
13
+ <div class="w-full">
14
+ <p class="font-semibold text-center self-center">Interacción</p>
15
+ </div>
16
+ </div>
17
+ <div class="flex inset-0 bg-primary-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-light</p><p>#d6eaf0</p></div></div>
18
+ <div class="flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-base</p><p>#00607a</p></div></div>
19
+ <div class="flex inset-0 bg-primary-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-dark</p><p>#00475C</p></div></div>
20
+
21
+ {# 2 #}
22
+ <div class="self-center flex items-center p-base border border-neutral-base rounded lg:row-span-4 h-full">
23
+ <div class="w-full">
24
+ <p class="font-semibold text-center self-center">Soporte</p>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="flex inset-0 bg-warning-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-light</p><p>#fef6b2</p></div></div>
29
+ <div class="flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-base</p><p>#fdcb33</p></div></div>
30
+ <div class="flex inset-0 bg-warning-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-dark</p><p>#b88e12</p></div></div>
31
+
32
+ <div class="flex inset-0 bg-success-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-light</p><p>#dcf8e2</p></div></div>
33
+ <div class="flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-base</p><p>#24d14c</p></div></div>
34
+ <div class="flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-dark</p><p>#1aa23a</p></div></div>
35
+
36
+ <div class="flex inset-0 bg-info-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-light</p><p>#feebcc</p></div></div>
37
+ <div class="flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-base</p><p>#fa9902</p></div></div>
38
+ <div class="flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-dark</p><p>#c97a00</p></div></div>
39
+
40
+ <div class="flex inset-0 bg-alert-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-light</p><p>#fbd3ce</p></div></div>
41
+ <div class="flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-base</p><p>#d22333</p></div></div>
42
+ <div class="flex inset-0 bg-alert-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-dark</p><p>#a40014</p></div></div>
43
+
44
+ {# 3 #}
45
+ <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
46
+ <div class="w-full">
47
+ <p class="font-semibold text-center self-center">Fondo</p>
48
+ </div>
49
+ </div>
50
+ <div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">white</p><p>#ffffff</p></div></div>
51
+ <div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-lighter</p><p>#f6f6f5</p></div></div>
52
+ <div class="flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-light</p><p>#ededec</p></div></div>
53
+
54
+ {# 4 #}
55
+ <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
56
+ <div class="w-full">
57
+ <p class="font-semibold text-center self-center">Contenido</p>
58
+ </div>
59
+ </div>
60
+ <div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-base</p><p>#92949b</p></div></div>
61
+ <div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-dark</p><p>#5e616b</p></div></div>
62
+ <div class="flex inset-0 bg-black font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">black</p><p>#1f2331</p></div></div>
63
+
64
+ {# 5 #}
65
+ <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
66
+ <div class="w-full">
67
+ <p class="font-semibold text-center self-center">Cabecera</p>
68
+ </div>
69
+ </div>
70
+ <div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-base</p><p>#2d495f</p></div></div>
71
+ <div class="flex inset-0 bg-heading-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-dark</p><p>#21384b</p></div></div>
72
+ <div></div>
73
+
74
+ {# 6 #}
75
+ <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded h-full">
76
+ <div class="w-full">
77
+ <p class="font-semibold text-center self-center ">Para gráficas</p>
78
+ </div>
79
+ </div>
80
+ <div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
81
+ <div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#aa3c2b</p></div></div>
82
+ <div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
83
+ <div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#00607a</p></div></div>
84
+ <div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#013c53</p></div></div>
85
+ <div></div>
86
+
87
+ {# 6 #}
88
+ <div class="self-center lg:row-span-2 flex items-center p-base border border-neutral-base rounded h-full">
89
+ <div class="w-full">
90
+ <p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
91
+ </div>
92
+ </div>
93
+ <div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffdc00</p></div></div>
94
+ <div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffaa00</p></div></div>
95
+ <div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ed020d</p></div></div>
96
+ <div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#646464</p></div></div>
97
+ <div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#e1e1e1</p></div></div>
98
+ <div></div>
52
99
  </div>
53
- <div class="pb-lg"></div>
100
+
101
+ <div class="pb-2xl"></div>
54
102
  {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
55
103
  {{ DSSubsectionTitle({
56
104
  title: "Border"
package/docs/index.html CHANGED
@@ -8,8 +8,7 @@
8
8
  <h1>desy-html</h1>
9
9
  <p>desy-html es una librería NPM que sirve para construir la interfaz de usuario de las aplicaciones web del Gobierno de Aragón. Utiliza <a href="https://gulpjs.com/">Gulp</a>, <a href="https://postcss.org/">PostCSS</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a> y <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas html.</p>
10
10
  <p>Si necesitas una librería con más potencia para construir tu aplicación web, te recomendamos mejor, que uses su versión traducida a Angular: <a href="https://bitbucket.org/sdaragon/desy-angular">desy-angular librería NPM</a>, <a href="https://desy.aragon.es/desy-angular">Ejemplos de desy-angular</a></p>
11
- <p>Mira ejemplos de componentes de desy-html en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
12
- <p>Mira ejemplos de templates de página usando los componentes de desy-html: <a href="https://desy.aragon.es/pages/desy-html-templates">https://desy.aragon.es/pages/desy-html-templates</a></p>
11
+ <p>Mira ejemplos de componentes y plantillas de página en la documentación: <a href="https://desy.aragon.es/">https://desy.aragon.es/</a></p>
13
12
 
14
13
  <h2>¿Cómo comenzar?</h2>
15
14
  <ul>
@@ -38,6 +37,11 @@
38
37
 
39
38
  <h2>Changelog (English)</h2>
40
39
  <p>What's new in the latest version of desy-html</p>
40
+ <h3>v.8.1.1</h3>
41
+ <ul class="text-sm">
42
+ <li>Fixed a bug in Searchbar that avoids linebreak in button.</li>
43
+ <li>Added new graphics colors, removed desy-html-templates in docs.</li>
44
+ </ul>
41
45
  <h3>v.8.1.0</h3>
42
46
  <ul class="text-sm">
43
47
  <li>Added a new modifier class in Menu horizontal to show scroll in mobile.</li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "desy-html",
3
- "version": "8.1.0",
3
+ "version": "8.1.1",
4
4
  "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
5
5
  "author": {
6
6
  "name": "Desy (SDA Servicios Digitales de Aragón)",
package/src/templates/components/searchbar/_examples.searchbar.njk CHANGED
@@ -75,7 +75,7 @@
75
75
  "button": {
76
76
  "text": "Buscar",
77
77
  "type": "submit",
78
- "classes": "c-button--primary ml-sm"
78
+ "classes": "c-button--primary"
79
79
  },
80
80
  "classes": "flex-1"
81
81
  }
@@ -91,7 +91,7 @@
91
91
  "button": {
92
92
  "text": "Buscar",
93
93
  "type": "submit",
94
- "classes": "c-button--sm ml-sm"
94
+ "classes": "c-button--sm"
95
95
  },
96
96
  "classes": "flex-1 c-input--sm"
97
97
  }
package/src/templates/components/searchbar/_template.searchbar.njk CHANGED
@@ -17,7 +17,7 @@
17
17
  attributes: params.label.attributes,
18
18
  for: params.id
19
19
  }) }}
20
- <div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
20
+ <div class="relative {%- if params.button %} flex flex-wrap items-end gap-sm{% endif %}">
21
21
  <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.button %} pr-12 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
22
22
  {%- if params.value %} value="{{ params.value}}"{% endif %}
23
23
  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}