desy-html

Versión: 15.0.3

Una librería NPM para construir interfaces de usuario para aplicaciones web del Gobierno de Aragón. Utiliza Vite, Tailwind CSS y Nunjucks para renderizar componentes HTML+CSS+JS. Es útil para crear aplicaciones web ligeras o maquetas HTML.

Descripción general

desy-html es la librería del sistema de diseño principal que proporciona:

• Vite - Herramienta de compilación rápida y servidor de desarrollo con reemplazo de módulo en caliente
• Tailwind CSS v4 - Framework CSS basado en utilidades
• Nunjucks - Motor de plantillas potente para generar HTML
• Sharp - Optimización de imágenes para compilaciones de producción
• Componentes Accesibles - Componentes UI preconstruidos siguiendo patrones ARIA

Si necesitas una librería más potente basada en esta, usa su versión de Angular en su lugar: desy-angular

Enlaces rápidos

• Documentación: https://desy.aragon.es/
• Repositorio: https://bitbucket.org/sdaragon/desy-html/
• Proyecto Starter: https://bitbucket.org/sdaragon/desy-html-starter/

¿Cómo comienzo un proyecto que usa los componentes de desy-html?

Para comenzar un nuevo proyecto que usa desy-html como dependencia, no uses este repositorio, usa el repositorio desy-html-starter en su lugar:

1. Descarga el proyecto desy-html-starter desde https://bitbucket.org/sdaragon/desy-html-starter
2. Personaliza el proyecto descargado según tus necesidades
3. Podrás usar cualquier componente de desy-html en ese proyecto

Requisitos previos

Antes de comenzar, asegúrate de tener instalado lo siguiente:

• Node.js >=20.19.2 <23.0.0
• npm >=10.0.0

Primeros pasos

1. Clonar el repositorio

git clone https://bitbucket.org/sdaragon/desy-html.git
cd desy-html

2. Instalar dependencias

npm install

3. Iniciar el servidor de desarrollo

npm run dev

Esto inicia el servidor de desarrollo de Vite con reemplazo de módulo en caliente. Abre tu navegador en la URL mostrada en la salida del terminal.

4. Compilar para producción

npm run build

Esto compila HTML, purga y minifica CSS, y optimiza JavaScript en la carpeta `/dist`.

5. Previsualizar la compilación de producción

npm run preview

Estilos

Usando Tailwind CSS

El proyecto utiliza Tailwind CSS v4. Todas las clases de utilidad de Tailwind están disponibles en tus plantillas.

Variables de tema

desy-html proporciona propiedades CSS personalizadas (variables) para una temática consistente. Estos se incluyen en la hoja de estilos principal.

Imágenes

Estructura de imágenes

Las imágenes se almacenan en `public/images/` y se pueden referenciar en plantillas usando la ruta `/images/`:

<img src="/images/my-image.png" alt="Description">

Optimización de imágenes

Durante las compilaciones de producción, las imágenes se optimizan automáticamente usando Sharp:

• Formatos compatibles: jpg, png, webp, avif
• Los tamaños de archivo se optimizan para producción

Consejos de desarrollo

Reemplazo de módulo en caliente

El servidor de desarrollo admite HMR. Los cambios en CSS, JavaScript y plantillas se actualizarán automáticamente en el navegador.

Depuración

• Comprueba la consola del navegador para ver errores de JavaScript
• Usa la salida del terminal de Vite para errores de compilación
• Inspecciona el HTML generado en las herramientas de desarrollo del navegador

Referencia de scripts

Comando	Descripción
npm run dev	Inicia el servidor de desarrollo con HMR
npm run build	Compila para producción
npm run preview	Previsualiza la compilación de producción localmente

Accesibilidad

Todos los componentes de desy-html están construidos teniendo en cuenta la accesibilidad:

• Atributos y roles ARIA adecuados
• Soporte de navegación por teclado
• Compatibilidad con lectores de pantalla
• Gestión del enfoque

Soporte de navegadores

El proyecto está dirigido a navegadores modernos. Para obtener información específica sobre compatibilidad, consulta la documentación de desy.

Contribuciones

1. Haz un fork del repositorio
2. Crea una rama de características
3. Realiza tus cambios
4. Envía una solicitud de extracción

Contacta con el equipo

desy-html está mantenido por un equipo de SDA Servicios Digitales de Aragón (España). Si quieres saber más acerca de desy-html, puedes escribir por email a alguno de los commiters.

Autor

SDA Servicios Digitales de Aragón

Licencia del software

Este proyecto está licenciado bajo la licencia EUPL-1.2. Lee la licencia.

Changelog (English)

What's new in the latest version of desy-html

v.15.0.3

• Minor fixes

v.15.0.2

• Minor fixes

v.15.0.1

• Minor fixes

v.15.0.0

• Uses Vite instead of Gulp.
• Migrated to TailwindCSS v4.
• Fixes related with the migration.

v.14.0.0

• Added Treegrid component. Better gulp compilation with errors.

v.13.0.2

• Accesibility fixes in most of the component examples.

v.13.0.1

• Removed backstop npm script entries as they are not used.

v.13.0.0

• Accesibility fixes in most of the components.
• Header and Header advanced uses Menu navigation now instead of HeaderNavigation.
• Fixed a bug in Menubar.
• Added svg separator icon to breadcrumbs.
• Footer doesn't use abbr now.

v.12.1.0

• Fixed a bug in dropdown with focusable elements.
• Accesibility fixes in Card, Item, Pagination, Table, Table advanced and Menu horizontal, Links list and Header examples.
• Improvements in docs.

v.12.0.1

• Minor fixes.

v.12.0.0

• Datepicker now uses Spanish date format: DD-MM-AAAA.
• Dropdowns that has no menu, now has the correct arias using data attributes.
• Accesibility fixes in Header mini, Datepicker, Dropdown, Tooltip and Links list.
• Docs examples in Nunjucks have single quotes in attributes instead of escaped double quotes.
• Docs improvements for AI and robots.
• Validation fixes.

v.11.2.0

• Added global function to Links list and Tree navigation to activate items.
• Added parameter in Table advanced to customize filter texts in table head.
• Added parameter in Tabs to improve customization.
• Added large modifier in Button, Button loader, Dropdown, Listbox, Menu navigation and Menebar.
• Added style for links.
• Validation fixes.

v.11.1.2

• Improved initial tooltip visualization in Dropdown, Listbox, Menu navigation, Menubar and Tooltip.
• Validation fixes in Tree.

v.11.1.1

• Fixes in Collapsible and Tree.
• Minor improvements.

v.11.1.0

• Added Tree navigation param to use the Tree as a folded menu.
• Fixes in Tree, Accordion and Accordion history.

v.11.0.5

• Minor fixes in breadcrumbs.
• Added default font size and line height to body to improve accessibility.

v.11.0.4

• Fixed previous responsive with Tailwind CSS breakpoint prefixes.
• Changed footer text size in mobile.

v.11.0.3

• Text styles are now responsive with Tailwind CSS breakpoint prefixes.
• Added Table modifier to not stack cells in mobile.
• Accessibility fixes.

v.11.0.2

• Accessibility fixes.

v.11.0.1

• Minor fixes.

v.11.0.0

• Pagination now uses select instead of listbox and changes in parameters.

v.10.2.2

• Added missing params in Toggle and Notification.
• Accessibility fixes.

v.10.2.1

• Minor fixes in Tabs and Prose styles.

v.10.2.0

• Menu horizontal improvements and modifiers.
• Links list improvements and icon customizations.
• Added new params to style collapsible elements.
• Table now is stacked in mobile.
• Improvements in additional breakpoints.
• Footer columns fixes.

v.10.1.1

• Fixed columns in Footer navigation items.

v.10.1.0

• Added new param in Footer to improve columns.

v.10.0.1

• Fixed cally not loading in templates.

v.10.0.0

• Updated to Node v20.14.0 and Npm v10.8.1. Audit fix --save to update dependencies to latest.

v.9.0.1

• Minor fixes.

v.9.0.0

• Added Datepicker component using Cally v0.6.1. as js file.
• Updated Gulp to 5.0.0
• Added additional breakpoints to Docs.

v.8.13.1

• Minor fixes.

v.8.13.0

• Added logos in Header Advanced examples.
• Added FEADER logos in Footer.
• Tooltip now allows select content inside.
• Updated to latest Tailwind CSS.
• Accessibility fixes.
• Minor improvements.

v.8.12.1

• Fixed logo.html parameter in Footer and improved styles for logo.
• Minor improvements.

v.8.12.0

• Added new logos and parameters in Footer.
• Added global function to open/close Tree items.
• Added global funcion to Notification to close it.
• Accessibility fixes.
• Improvements in docs.

v.8.11.0

• Added global funcion to Accordion and Accordion history to open/close all items.
• Added global function to check/uncheck Toggle.
• Bug fixes.
• Improvements in docs.

v.8.10.2

• Updated Tailwind CSS form and typography plugins.

v.8.10.1

• Fixed a bug in conditionals in radios.

v.8.10.0

• Updated to Tailwind CSS v3.3.5
• Fixed bugs in Checkboxes and Radio conditionals.
• Added global function to select items in Listbox.
• Added global function to open/close Collapsible and Dialog.
• Accessibility improvements.
• Improvements in Docs.

v.8.9.0

• Added global function to select items and refactor Menu navigation to fix keyboard navigation.
• More improvements of height in offcanvas in Header and Header advanced.
• Improvements in Docs.

v.8.8.1

• Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.
• Improved height in offcanvas in Header and Header advanced.

v.8.8.0

• Added global function to select items in Listbox.
• Added global function to open items in Accordion and Accordion history.
• Fixed a bug in Tabs.
• Improvements in Docs. Added menu navigation in header advanced in template example.

v.8.7.0

• Added global function to select items and subitems in Menubar and Menu horizontal.
• Now Tabs can have html inside their titles.
• Improvements and better accessibility in docs.

v.8.6.0

• Added global function to select items and subitems in Menu navigation.
• Bug fixes.
• Improvements in docs.

v.8.5.0

• Added global function to select an item in Tabs.
• Added new param in Breadcrumbs to show the items inline on mobile.
• Docs fixed bad units in text styles.
• Improvements in docs.

v.8.4.1

• Active items are font-bold now in all components.
• Minor improvements.

v.8.4.0

• Added global function to select an item in Nav.
• Docs now show the active section in offcanvas menus.

v.8.3.1

• Minor fixes.

v.8.3.0

• Added global function to select an item in Header navigation in Header and Header advanced components.
• Docs now show the active section in header menu.
• Minor fixes.

v.8.2.2

• Fixed duplicate ids in subitems in components with subitems.
• Minor fixes.

v.8.2.1

• Minor fixes.

v.8.2.0

• Added global function to select an item in Menu vertical.
• Added tfoot in Table and Table advanced, that is not affected by orderby. Useful for showing totals in tables.
• Removed aspect-ratio plugin from Tailwind CSS as it's now baked by default.
• Added first and last buttons to navigate in Pagination.
• Minor improvements.

v.8.1.7

• Fixed bad html copy code in caller components.

v.8.1.6

• Minor changes in docs.

v.8.1.5

• Changed gap-xl to gap-lg as the default gap in layout grids.

v.8.1.4

• Fixed anchors in examples.

v.8.1.3

• Fixed anchors in docs.

v.8.1.2

• Improvements in estilos page in docs.

v.8.1.1

• Fixed a bug in Searchbar that avoids linebreak in button.
• Added new graphics colors, removed desy-html-templates in docs.

v.8.1.0

• Added a new modifier class in Menu horizontal to show scroll in mobile.
• Bug fixes.

v.8.0.1

• Fixed a bug in examples Nunjucks code.

v.8.0.0

• Improved indentation in examples.
• Added functions to show source code in Nunjucks and HTML.
• Removed Prism.
• Fixed a bug in telephone link in footer.
• Fixed an example of Searchbar with button breaking line.

v.7.4.0

• Translated examples to español.

v.7.3.1

• Added source code links to Plantillas pages.

v.7.3.0

• Added desy-html-starter page templates and Plantillas page.

v.7.2.0

• Removed cdn links for popper and tippy.
• Redesigned component examples pages.
• Improved indentation in component examples pages.
• Added new parameter in footer for logo FEDER url.
• Docs improvements.

v.7.1.2

• Minor improvements.

v.7.1.1

• Fixed a bug in checkboxes and radios. Now the conditionals work properly.
• Minor fixes.

v.7.1.0

• Added class to Tabs to better display them inline with scroll if needed in mobile.

v.7.0.1

• Accessibility and docs improvements.

v.7.0.0

• Updated to node 16.17.1 and npm 8.15.0. Updated to latest packages.
• Docs improvements.
• Bug fixes in Tree and Toggle.

v.6.6.0

• Removed Backstop.js visual regression testing library to make the library lighter. We will use it only in test branch.
• Added Card component.
• Added Links list component.
• Added a bigger c-h0 heading style. A smaller c-h4 style and prose improvements.
• Docs improvements.
• Bug fixes.

v.6.5.0

• Added Backstop.js visual regression testing library.
• Improved documentation.

v.6.4.1

• Fixed notification close.
• Header GA logo has now the right colors.
• Improved documentation.

v.6.4.0

• Added title for mobile in Header.
• Now the Dialog close on click outside.
• Fixed Notification not closing on close button click.
• Fixed Toggle bad arias and colors.
• Fixed Collapsible bad arias and not opening.
• Fixed Tabs active element.
• Improved prose styles. Now the lists have black bullets and paragraphs correct line heights.
• Improvements in documentation.

v.6.3.3

• Fixed behavior in Accordion and Accordion history.
• Fixed bad "Show code" button position in docs.
• Minor improvements and fixes in docs.

v.6.3.2

• Added header background images.

v.6.3.1

• Added new header background colors.
• Changes in heading advanced examples.

v.6.3.0

• Added parameters and changes in Header advanced.
• Added active parameter in Tabs.
• Removed alpine.js and added new collapsible.js file.
• Fixed keyboard navigation in Tree.
• Minor fixes.

v.6.2.1

• Fixed bad vertical spacing in c-form-group that affected forms in desy-angular.
• Minor fixes in listbox, dropdown and menubar for header modifier.
• Minor accessibility improvements.

v.6.2.0

• Added classes for base modifiers in form components to improve responsive styles.
• Added a listbox in Pagination to choose the items per page.
• Item can position the icon with a new parameter.
• Accessibility fixes and improvements in Accordion history, Menu navigation, Toggle examples, Footer.
• Minor improvements in Table advanced.

v.6.1.0

• The header is now colored.
• Added new components: Header advanced and Header mini.
• Minor validation fixes.

v.6.0.0

• Compilation
  • Updated to TailwindCSS v3.0.24
  • Improved file compilation with TailwindCSS v.3 just-in-time mode by default. Now it's simpler and compiles all in any file changes. Removed cleancss. Now compiles css in Nunjucks, html or js changes.
  • Improved headings styles in prose with the tailwind typography plugin.
• Components
  • Added new component Menu navigation
  • Table advanced: Added selects in table head for filtering in columns
  • Modal: Added button loaders in items if param isButtonLoader is provided
  • Header: Added 2 zones to nest HTML content (customLogoHtml, customNavigationHtml). One after the logo and the other after the navigation. Added a param to hide the default GA logo (noLogo). Added target param to navigation items
  • Added new component Accordion history.
  • Footer: Added custom description, noLogo params. Improvements in logo position and navigation items position in mobile.
  • Toggle: now uses aria-expanded instead of aria-pressed by default.
• Improvements
  • Searchbar: improvements and example for visible label.
  • File upload: added button styles.
  • Tree: fixed acc. Improved examples.
  • Toggle examples: accessibility fixes.
  • Button: Added new modifier class for has selection as Dropdown. Improved dropdown has selection class.
  • Item: improved icons and text for screenreaders.
  • Button loader: fixed a bug that makes an error when no loader.text is provided
  • improved the check icon for Button loader, Listbox and Menubar: now it's the same in all browsers.
  • Accordion: Added disabled param to items. Now the show/hide info can be customized. Fixed item.classes not applied. Added cursor not allowed in disabled items.
  • Menu horizontal: Added new styles for tabs in mobile.
  • Header: Improvements in header active items and menu navigation active items.
  • Strong tag in base styles is font-semibold instead of font-bold.
• Fixed validation errors in Footer examples, Spinner, Button loader and Button.
• Docs: Improved grid example. Added font-bold example for headings style, font-semibold for strong example, and em example.

v.5.3.0

• Added missing params in input-group for inputs.
• Docs improvements.
• Minor validation fixes.

v.5.2.2

• Minor fixes.

v.5.2.1

• Docs improvements.

v.5.2.0

• Added toggle component.
• Added searchbar to tree component.
• Minor validation fixes.

v.5.1.1

• Fixed pagination from having too much listbox height.

v.5.1.0

• Added tree component.

v.5.0.1

• Fixed accessibility bad semantics in subnav. Added dropdown contentHtml rendering and example.

v.5.0.0

• Header now uses correct dropdown params.

v.4.3.0

• Added disabled and active param in menubar and fixed accessibility issues.
• Accessibility fixes in menu horizontal.
• Minor improvements in documentation.

v.4.2.1

• Minor fixes.

v.4.2.0

• Checkboxes can be indeterminate at init.
• Fixes in alert. Now it's read by screen readers.
• Header now uses dropdowns.
• Dropdowns, listboxes and tooltips now closes when loosing focus.
• Minor improvements in documentation.

v.4.1.3

• Minor improvements.

v.4.1.2

• Improvements in docs and Spanish translation of texts.

v.4.1.1

• Accessibility improvements in header.

v.4.1.0

• Added new parameters for customizing the skip link inside header component.

v.4.0.3

• Minor improvements.

v.4.0.2

• Improved headings spacing.

v.4.0.1

• Minor fixes in checkboxes, radios, input group and date input.
• Minor improvements with license file compilation.

v.4.0.0

• Updated tailwindcss to 2.2.7 and tailwind plugins related to latest versions. Changed the way we compile nested css. It affects gulp tasks so it bumps to a desy major version.
• Added js files to purge in tailwind.config.js
• Header uses container now and accepts breakpoints as footer.
• Added heading level param to item component.
• Added a new parameter in table advanced to show horizontal scrollbar in large tables and to apply classes to checkboxes.
• Select has optgroups and new hidden parameter to mimic a placeholder.
• Date input can be used now as time input using new divider parameters.
• Accessibility improvements in table advanced, accordion
• Fixes in notification, tooltip, modal, menu vertical, listbox, status item,
• Improvements in many component examples. Added inline examples for input, textarea, character count and select. Added fixed columns in table examples.

v.3.2.1

• Fixed minor js validation issues.
• Fixed color examples in estilos page in docs.
• Fixed widths and line breaks in dropdowns with nav, listboxes and menubar items.

v.3.2.0

• Accessibility and validation improvements in accordion, menu vertical, nav, pagination and tooltip.
• Added new headingLevel parameter to control the heading hierarchy in accordion, error-summary, fieldset, label, modal, notification and tabs.
• Javascript minor fixes.
• Updated postcss npm dependencies.

v.3.1.3

• Improved responsiveness and accessibility in header.

v.3.1.2

• Searchbar has a param to show a custom button instead of lens icon.
• Date input can be better customized.
• Fixed validation in: nav.
• Accessibility improvements in: tooltip, modal, notification, button, menu vertical and listbox.

v.3.1.1

• Minor fixes.

v.3.1.0

• Added tooltip component.
• Changes in menu vertical component: Simplified html and parameters.
• Changes in nav and pagination components: Changed parameters, roles and arias.
• Improved w3c validation of all component examples.
• Accessibility and bug fixes in notification, modal, table advanced, footer, header, dropdown and listboxes.

v.3.0.3

• Minor fixes.

v.3.0.2

• Minor fixes.

v.3.0.1

• Removed jit mode in tailwindcss compilation to avoid problems with purgecss safelist.

v.3.0.0

• Updated Tailwindcss to 2.1.1 and activated jit mode to seed up css compilation.
• Build folder is named "dist" now.
• Improved js: now it's more modular, and better to be used as plug and play in desy-html-starter project. This is a breaking change for projects that used previous versions of desy-html.
• Removed unneeded details js cdn polyfill.
• Added an optional ".dev" class to the body to be used in development environments.
• Added open and close html comments in rendered html for each component.
• Added an optional win-node-env dependency to allow node environment variables in Windows.
• Many accessibility fixes and improvements in menubar, searchbar, header and offcanvas menu, pagination, modals, nav and footer.

v.2.1.3

• Minor fixes.

v.2.1.2

• Menubar now can have groups with their own aria-label that groups menuitem, menuitemcheckbox and menuitemradio.
• Added element that acts as label for listbox and menubar for screenreaders.
• Select error now goes before select.
• Fixed bad positioned subnav dropdown in header.
• Minor fixes and accessibility improvements.

v.2.1.1

• Minor fixes and improvements.

v.2.1.0

• Added listbox and menubar components.
• Removed secondary modifiers from dropbox, modal and dialog.

v.2.0.4

• Minor fixes.

v.2.0.3

• Many improvements in docs: Added catalog page with all the components at glance.
• Changes in menu horizontal: fixes and changed styling to match tabs styling.
• Fixes in: menu horizontal, tabs, button, input, select, searchbar, footer, date input and checkboxes.
• Improvements in footer spacing and page integration. Changed page bg color for that.

v.2.0.2

• Accessibility improvements in: menu vertical, status item, notifications, alert, modals, dialog and tabs.

v.2.0.1

• Fixed radios not checked if has no conditional.
• Improvements in header: Added logo letters, offcanvas is now a dialog and traps focus inside. Removed extra navs.
• Accessibility improvements in: pagination, offcanvas, header, menu vertical, modal, dialog, notification, alert, item, status item, tabs and focus styles.

v.2.0

• Updated Tailwindcss to 2.0
• Added Tailwind aspect ratio plugin and used in colors docs.
• Added missing placeholder params to textarea and character count.
• Fixes in header, menu vertical, button icons, search and radios.
• Fixed bad heights in input, textarea, select. Now they have the same height as buttons.
• Added alert component that triggers notifications.
• Improved focus styles.
• Added divider in input group.

v.1.9.0

• Updated Tailwindcss to 1.9.6
• Fixed a bug in tailwind.config.js that avoid compile in desy-angular
• Refactored accordion component.
• Added software license.
• Improved focus styles in components and links.
• Added alert and neutral modifiers to c-link
• New components: notification, modal, dialog, status and status item.
• Added a close button inside offcanvas navigation.
• Menu vertical now has icons, improved styles and a param to show all items unfolded.
• Fixes in docs, details, nav, footer

v.1.8.3

• Added changelog in docs.
• Changes in details component. Now it's a caller component and has better params.

v.1.8.2

• Updated Gobierno de Aragon logo. Now it has the square outside the img in both expanded and normal versions.
• Now package.json is being copied to build folder, in order to be published along the html files. This way we can track which version is online. You can see now the published package.json here
• Changed rounded-sm corners to button, button-loader and dropdown. Now is smaller and has a more squared aspect, as the input and selects.
• Added variants: group-hover and group-focus to display css properties. Now we can show/hide children elements on hover or focus.
• Fixed bugs in accessibility in navs, and fixed a bug in dropdowns.

v.1.8.1

• Removed © copyright symbol from footer as we use creative commons license.

v.1.8

• Added tabs component.
• Added an expanded version of logo in header that has responsive variants.
• Added a subnav in header to show the current app as title or to navigate between different apps.
• Added favicon to docs.
• Added SDA logo and links in footer and improved footer examples.

v.1.7.3

• Fixed gulp clean task that broke build process if build folder didn't exists before.
• Added width spacings for dropdown to use.
• Fixes in dropdown, pagination and items.