Inventarisatie Manon components

button

• https://minvws.github.io/nl-rdo-manon/documentation/components/button.html
• waardevolle documentatie over <button> vs <a> (vs <input type="button">)
• CSS component
• HTML component voor <button>, vergelijkbaar met Utrecht HTML button component. type attribuut is helaas wel case sensitive, gebruikt niet zoals Utrecht input[type="button" i]
• call to action button is vergelijkbaar met Utrecht primary action button

button container

• https://minvws.github.io/nl-rdo-manon/documentation/components/button-container.html
• vergelijkbaar met Utrecht button group

icon button

• https://minvws.github.io/nl-rdo-manon/documentation/components/button-icon.html
• <button class="icon icon-cat"> voor vergelijkbaar met Utrecht secondary action button
• <button class="icon-only icon-cat> voor vergelijkbaarm et Utrecht subtle button

dropdown button

• https://minvws.github.io/nl-rdo-manon/documentation/components/button-dropdown.html
• implementatie is nog niet optimaal qua toegankelijkheid, gebruikt bijvoorbeeld aria-haspopup="menu" zonder dat er een menu role element uitklapt, het is op dit moment nog een list met links

link

• https://minvws.github.io/nl-rdo-manon/documentation/components/link.html
• vergelijkbaar met Utrecht link component

logo

• https://minvws.github.io/nl-rdo-manon/documentation/components/logo.html
• vergelijkbaar met Utrecht logo component

Icon

• https://minvws.github.io/nl-rdo-manon/documentation/components/icons.html
• vergelijkbaar met Utrecht icon component

Iconset

• https://minvws.github.io/nl-rdo-manon/documentation/components/iconset-add.html
• handige documentatie om een eigen iconset te maken met class names
• lijkt gemaakt te zijn om alleen te werken met Unicode characters, voor icon fonts.
• NL Design System verkiest SVG boven icon fonts, maar daar over ontbreekt nog documentatie
• misschien vergelijkbaar met de GemeentenIconen.nl / Utrecht iconset scripts om automatisch icon web components te genereren?

Definition list

• https://minvws.github.io/nl-rdo-manon/documentation/components/description-list.html
• vergelijkbaar met Utrecht data list component

Afbeelding

Cover afbeelding

• https://minvws.github.io/nl-rdo-manon/documentation/components/image-cover.html
• bestaat denk ik nog niet in NL Design System, maar misschien heeft Den Haag wel iets vergelijkbaars intern. Interessant!
• gebruikt niet <figure> — ben benieuwd naar de gedachte daarachter

Taalselectie

• https://minvws.github.io/nl-rdo-manon/documentation/components/language-selector.html
• vergelijkbaar met de alternate language navigation component van Den Haag

Zijmenu

• https://minvws.github.io/nl-rdo-manon/documentation/components/side-menu.html
• gemeente Utrecht en Den Haag doen navigatie anders, gemeente Amsterdam en RIVM hebben deze component denk ik ook
• vergelijkbaar met de navigatie sidebar van nldesignsystem.nl, zeker wat betreft expand/collapse button
• navigatie is sticky, erg handig!
• <nav> staat binnen <main>, maar ik dacht dat je ARIA landmarks niet moet nesten op deze manier 🤔

Tag

• https://minvws.github.io/nl-rdo-manon/documentation/components/tag.html
• Vergelijkbaar met Data badge component bij Utrecht
• ondersteunt een <p> element voor rendering, dat maakt nesting van een tag binnen een ander <p> onmogelijk
• geen badge list component die vergelijkbaar is met die van Utrecht, om meerdere badges op één regel te tonen met gewenste padding/line-height
• 6 x 3 varianten waarin je eigen kleuren kan kiezen op basis van een class name, 6 kleuren als optie met 3 tinten per kleur (dark, medium en light)

Pagination

• https://minvws.github.io/nl-rdo-manon/documentation/components/pagination.html
• vergelijkbaar met Pagination component bij Utrecht

Notificatie-teller

• https://minvws.github.io/nl-rdo-manon/documentation/components/message-counter.html
• vergelijkbaar met de counter badge component van Utrecht
• <span class="message-counter" aria-label="Nieuwe berichten">12.830</span> lijkt me niet toegankelijk, want dan wordt het nummer niet meer genoemd 🤔

Notificaties

Foutmelding

• https://minvws.github.io/nl-rdo-manon/documentation/components/notification-error.html
• alert/spotlight section in 't rood
• vergelijkbaar met Utrecht alert component, type=error
• vergelijkbaar met de Utrecht form-field-description / error component, want deze component wordt ook in formulieren gebruikt
• voorbeeld van een tabelrij die een foutmelding is — interssant!

Waarschuwing

• https://minvws.github.io/nl-rdo-manon/documentation/components/notification-warning.html
• alert/spotlight section in oranje
• vergelijkbaar met Utrecht alert component, type=warning
• vergelijkbaar met Utrecht spotlight section component, type=warning
• vergelijkbaar met de Utrecht form-field-description, maar die heeft geen warning variant. Waarschijnlijk zou je daar een spotlight section binnen een form field description plaatsen

Bevestiging

• https://minvws.github.io/nl-rdo-manon/documentation/components/notification-confirmation.html
• alert/spotlight section in 't groen

Toelichting

• https://minvws.github.io/nl-rdo-manon/documentation/components/notification-explanation.html
• alert/spotlight section in 't blauw

Systeembericht

• https://minvws.github.io/nl-rdo-manon/documentation/components/notification-system-message.html
• ik weet niet of er een vergelijkbare component is binnen de NL Design System community
• lijkt wel op alert/spotlight section in het grijs, net als de default kleur van Utrecht

Kruimelpad

• https://minvws.github.io/nl-rdo-manon/documentation/components/breadcrumb-bar.html
• Vergelijkbaar met Utrecht breadcrumb navigation component

Kaart / Card

• https://minvws.github.io/nl-rdo-manon/documentation/components/card.html
• geen landkaart dus

Inklapbaar

• https://minvws.github.io/nl-rdo-manon/documentation/components/collapsible.html
• Container element waarbij automatisch een dropdown button wordt gemaakt om de inhoud uit te klappen
• Zou waarschijnlijk ideaal zijn als web component
• Niet vergelijkbaar met <details>/<summary>

Accordion

• https://minvws.github.io/nl-rdo-manon/documentation/components/accordion.html
• vergelijkbaar met accordion component van Utrecht

Tegelweergave

• https://minvws.github.io/nl-rdo-manon/documentation/components/tiles.html
• een soort card grid

Paragraaf

• https://minvws.github.io/nl-rdo-manon/documentation/components/paragraph.html
• vergelijkbaar met Utrecht paragraph component
• lead variant van Utrecht lijkt vergelijkbaar met "Benadrukte weergave" <p class="emphasized"> https://minvws.github.io/nl-rdo-manon/documentation/components/emphasized.html
• small variant van Utrecht lijkt vergelijkbaar met "Subtielere weergave" <p class="de-emphasized"> https://minvws.github.io/nl-rdo-manon/documentation/components/de-emphasized.html
• nota bene variant, ik weet niet zo goed hoe ik deze moet plaatsen... ik moest in eerste instantie denken aan <p><strong>Let op:</strong>...</p> maar dit is wat anders https://minvws.github.io/nl-rdo-manon/documentation/components/nota-bene.html

Titel

• https://minvws.github.io/nl-rdo-manon/documentation/components/headings.html
• vergelijkbaar met heading 1 - heading 6 components van Utrecht
• heeft uitleg voor design token aliasing, maakt niet gebruik van fallback CSS variables voor common tokens voor alle heading levels

Table

• https://minvws.github.io/nl-rdo-manon/documentation/components/table.html
• vergelijkbaar met table component van Utrecht

Invoerveld

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input.html
• vergelijkbaar met form field en textbox componenten van Utrecht

Email

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-email.html
• vergelijkbaar met Utrecht textbox component, e-mail variant
• heeft behalve type="email" niet speciale code, documentatie of voorbeelden, zoals autocomplete of ligatures uitzetten

Date input

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-date.html
• <input type="date">, niet een custom date picker

Radio-selecteerknop

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-radio.html
• vergelijkbaar met form field radio button en radio button componenten bij Utrecht
• geen custom design tokens voor instellen huisstijl

File

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-file.html
• <input type="file">, niet een custom file upload component met bijvoorbeeld een drop area of en overzicht van toegevoegde bestanden

Selectievak

• https://minvws.github.io/nl-rdo-manon/documentation/components/checkbox.html
• vergelijkbaar met form field checkbox en checkbox componenten van Utrecht
• geen customizations voor huisstijl

Tekstveld

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-textarea.html
• vergelijkbaar met form field en textarea component van Utrecht
• adviseert description in een placeholder te zetten 🤔

Fieldset

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-fieldset.html
• vergelijkbaar met fieldset en fieldset legend componenten bij Utrecht
• niet een extra <div> er omheen voor styling doeleinden

Password

• https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-password.html
• gebruikt een title attribute voor een beschrijving van regels voor het wachtwoord 🤔
• gebruikt een pattern voor client side validatie
• geen autocomplete

Algemeen

• gebruikt nog geen logical CSS properties (werkt niet automatisch voor right-to-left vertaling)
• gebruikt CSS variabelen voor component design tokens
• gebruikt geen manon of rdo prefix voor CSS variabelen