Component library for xxllnc UI

This library can be installed in any node project. It will give the auther access to web components needed to build a front end consistent with the brand guidelines of the company.

Installing

For the moment, only NPM installation is possible, but soon there will be an option to add a script tag to your HTML.

This is a scoped package and can be installed with: npm install @xxllnc/xxllnc-ui

Using

Import either the entire library, or individual components into your project JS e.g:

• import * as ui from "@xxllnc/xxllnc-ui";
• import { xx_logo } from "@xxllnc/xxllnc-ui";

It's not necessary to call a function after import. The import alone causes the components to be added to the registry.

Available components

xx_logo

Called individually with import { xx_logo } from "@xxllnc/xxllnc-ui";

Used in HTML as <xx-logo></xx-logo>

Supported attributes:

• team=[team]

Where "team" can be one of the following:

• belastingen_bz
• belastingen_hf
• belastingen_ob
• belastingen_sw
• belastingen_wd
• belastingen_hc
• productiviteit_od
• productiviteit_tr
• productiviteit_vg
• productiviteit_pg
• productiviteit_kp
• productiviteit_es
• productiviteit_an
• sociaal_lv
• sociaal_lb
• sociaal_ol
• sociaal_ok
• sociaal_rg
• sociaal_sp
• sociaal_vs
• zaakgericht_zk
• zaakgericht_fm

Find your application's two characters on the website under "Applicaties"

Using the team attribute causes the logo to render as a team specific logo. Not using the attribute, or providing a value which is not (yet) mapped in the library will cause the logo to render a standard xxllnc logo.

Contributing

If you want to contribute, please make a pull request. Your additions/changes should conform to the current format.

If you add a property to a team, please add it to all teams, even if it's empty or generic. Or if you like, replace the teams export with a pre-processed object that equalizes all teams.

Document your changes in this readme.

When your pull request is accepted and merged, a pipeline will be triggered that re-publishes the package to NPM.

Contributers

• Tim Bauwens 2024
• [Your name here? :-)]