Nl Design system

[mstokericatt]

Toepassing NL Desing system

Er bestaat nog geen NL Design system. dat maakt de toepassing ervan op z'n zachtst gezegd problematisch.
Er zijn wel enkele voorlopers (utrecht/den haag). Het gebruik daarvan is mogelijk, maar kan tot het nodige rework leiden wanneer het NL Design system beschikbaar komt. Ten aanzien van kwaliteit en volledigheid van de voorlopers hebben we ook wat bedenkingen. om een voorbeeld te geven: het checkbox component van het design system van utrecht is niets meer dan een wrapper om een standaard html checkbox. de enige toevoeging is een css classnaam op het element. De wrapper exposed echter niet alle properties van het native checkbox element, waardoor het gebruik niet in alle scenario's goed zal gaan.

We zoeken een middenweg, waarbij we zoveel mogelijk aanhaken, zonder dat het de voortgang van KISS in de weg zit en risico's op aanpassingen achteraf beperkt blijven. Indien we zaken buiten NL Design om doen, zullen we pogen dit op een manier te doen waarbij het geen obstakel vormt voor toekomstige verdere integratie met het NL desing system.

Het design-system bestaat grofweg uit html en css.

Voor wat betreft de css:

We kunnen gewoon de css van utrecht en den haag gebruiken en waardes voor kleuren etc aanpassen. Ontbrekende stukken vullen we aan volgens dezelfde css structuur.

We kunnen ook een stap verder gaan en onze css aanvullingen ook doorvoeren in design token bestanden.
In het nl-design system wordt de css gegenereerd obv die tokens bestandjes.
Er is een github repo. Het is de bedoeling dat elke gemeente daarin een eigen kopie van de design tokens zet. Met hun eigen kleuren etc erin. Daaruit wordt dan de css met de look en feel van die gemeente gegenereerd.
We kunnen met Robbert Broesrma van Nl Ddesign overleggen hoe zelf aanvullingen hierin kunnen doorvoeren en deze laten landen in de reeds bestaande gemeentelijke kopieën. In plaats van onze eigen css kunnen we dan de css van elk van die gemeentes gebruiken.

Voor wat betreft de html:
Dit ligt ingewikkelder. Er is een redelijke set react componenten van utrecht/den haag, die direct gebruikt zouden kunnen worden. Het is niet het doel van het nl-design-system dat het een react-only ding wordt en deze route heeft ook niet de voorkeur van robbert.
Hij wil liever dat we de webcomponents gebruiken. webcomponents is een soort low level framework om custom html componenten te maken die je vervolgens in elk ander framework (of zonder framework) kan gebruiken.
Klinkt ideaal voor een desing system, maar de nl design system webcomponents zijn nog erg onaf. Er zitten ook nog wel wat technische uitdagingen aan het maken van die wecomponents.
robbert wil wel graag dat wij daar aan mee gaan werken en hij wil er dan ook vanuit het nl design team actief aan meewerken.

We kunnen ook zelf vue componenten maken als de webcomponents route te veel obstakels oplevert. Daarbij zullen we zoveel mogelijk analoog aan de react versie werken. Deze kunnen dan vrij eenvoudig 'terug gegeven' worden aan het nl design system. Het maken van vue componenten zou weinig tijd moeten kosten. het bereft redelijk eenvoudige componenten.
Voor zowel het maken van webcomponents als vue componenten zijn wij van mening dat dit alleen zinvol is voor meer complexe componenten (zoals breadcrumbs) en niet voor hele basale componenten die alleen maar een css class nodig hebben (zoals een checkbox)

conclusie:

• we gebruiken de css van utrecht.
• aanvullingen doen ze zoveel mogelijk volgens hetzelfde stramien, zodat deze hopelijk aansluiten op toekomstige ontwikkelingen van het nl design system.
• We gaan nog overleggen met robert broersma hoe we aanvullingen van css/tokens door kunnen laten voeren in de bestaande gemeente themes.
• Voor triviale html elementen gaan we geen componenten gebruiken of maken. we houden de ontwikkeling ten aanzien hiervan in het NL design system in de gaten. Als we wel een component in willen zetten kijken we of utrecht/den haag daar een bruikbaar webcomponent voor heeft. eventueel passen we het aan. Als dit voor problemen zorgt maken we gewoon zelf een vue component. We kijken wel of er een reactcomponent van utrecht of den haag is die we kunnen spiegelen.
• we evalueren deze keuzes na de tweede sprint.

[felixcicatt]

Overleg met Lennart leert dat de Den Haag componenten vaak bruikbaarder zijn de web components van Utrecht. We willen daar toch zoveel mogelijk van gebruiken, maar op de volgende pragmatische manier:

• Copy paste van react component
• Omschrijven naar vue (nice to have: web component)
• Link naar de oorspronkelijke component in github
• Verklaring waarom we de component niet as-is kunnen gebruiken
• Als we een component niet gebruiken, leggen we uit waarom

Bovenstaande benadering kunnen we ook gebruiken voor de web components van Utrecht.

[sytskevanhasselt]

Hanneke heeft met Martin bovenstaande aanpak besproken, en het lijkt hem prima.

• De architectuurclub wil als algemeen principe dat NL Design System gebruikt wordt naar heeft geen expertise om te beoordelen wat wel rijp is en wat niet.
• Besproken: we vragen Robbert of wij de beslissingen over wel en niet hergebruik / doorontwikkeling / nieuwbouw met hem kunnen toetsen en vastleggen.

[Robbert]

Goed te horen dat jullie voorgestelde werkwijze voor de KISS-componenten perfect aansluit bij de estafette-aanpak van NL Design System! Naar aanleiding van jullie analyse zijn we begonnen de componenten van Utrecht beschikbaar te stellen als echte Vue componenten. En we hebben extra aandacht besteed aan de checkbox component! ;)

Hier kun je de voortgang volgen:
https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-vue/src

De component library kun je installeren met npm install --save-dev @utrecht/component-library-vue.

Wanneer jullie aan de slag gaan zijn we benieuwd naar jullie feedback, en we kijken uit naar een samenwerking waarin beide teams nieuwe componenten aanleveren die nog verder nodig zijn.

We gaan nog aan de slag om een klein demo-appje te maken waarin je kunt zien hoe de componenten werken, en dat ze bijvoorbeeld goed werken met Vue form-bindings. In een later stadium willen we de Vue voorbeelden documenteren in een eigen Storybook. We gaan de componenten ook nog verder voorzien van unit tests, die vullen we aan wanneer onze agenda het toelaat.

[hannekevanderhorst]

Hoi Robert - ik heb je een mail gestuurd over samenwerken. Kun jij mij contacten. [email protected]