nl-design-system / utrecht Goto Github PK

Work in Progress: Utrecht Design System based on the NL Design System architecture. Storybook: https://nl-design-system.github.io/utrecht/storybook/

Home Page: https://nl-design-system.github.io/utrecht/

License: European Union Public License 1.2

JavaScript 4.88% HTML 0.98% CSS 0.13% SCSS 12.58% TypeScript 75.38% Vue 1.28% Shell 0.01% MDX 4.77%

nl-design-system storybook

utrecht's People

Contributors

Stargazers

Watchers

Forkers

robbert thbroersma bddjong usethetics sushitommy ylebre maykinmedia remko48 hidde sergei-maertens vjawala

utrecht's Issues

Hosting vraagstuk beantwoorden

Hoe gaan we de hosting regelen van designsystem.utrecht.nl?

DNS wijziging aanvraag via Utrecht.nl (Rene en Jeroen)
DNS wijziging op Utrecht.nl (Rene en Jeroen)
Github pages verwijzen naar de nieuwe domeinnaam (Robbert)

Formulier demo maken

Formulier maken met als doel de componenten in samenhang kunnen zien. Formulier van 1 pagina met simpele flow:

Ongeaddresseerde reclame.
Figma
Code

https://pki.utrecht.nl/Formulieren/flow/stateAction.do?flow=kl_process_add_meldenongeadresseerdereclame&state=uwgegevens_personen

Component: Dropdown met label

Een dropdown om een keuze te kunnen maken.

Component: Card

Een card toont een klein stukje informatie met een link naar meer info en een afbeelding

Plan voor versienummers

Voor semantic versioning willen we het design system automatisch nummeren?

Bijvoorbeeld: elke nieuwe feature een major versie ophogen?

Of willen we het versienummer kunstmatig laag houden?

Links
Semantic Versioning 2.0.0
semver.org

Semantic release
semantic-release.gitbook

Voorbeeld DSO Toolkit:
Voorbeeld DSO toolkit

Changelog genereren en in Storybook tonen

Checken code quality van batch van componenten

De componenten:

Opruimen van niet-relevante dingen in Storybook

Componenten
Losstaande documentatie

Uitzoeken wat niet meer relevant is en verwijderen. Rene en Jeroen geven het aan, laten checken door Robert/Yolijn.

TODO:

X opruimen

Component: Toptaken blok

Toptaken blok. Let op het gedrag bij de verschillende break points: Zie screenshot hieronder.

Component: Formulier veld Informatie knop

Een Informatie button bij formuliervelden kunnen toevoegen

Component: Page Footer

Een huisstijl footer kunnen toevoegen, met bijhorende kleuren en gekleurde elementen

Design Tokens ook in Docusaurus

In storybook in de README van componenten worden design tokens van dat component getoond.

Dit willen we ook in Docusaurus

Component: Seperator component

We willen graag een seperator component toevoegen.

Een mooie grijze seperator.

Component: Stappenmodel

Een manier voor de gebruiker om te weten bij welke stap in het proces hij is. Zie screenshot hieronder:

Weergave kleuren in storybook & docusaurus fixen

Kleuren tabellen worden niet meer getoond. Fixen zodat ze wel getoond worden.

Component: Menulijst

Een lijst met menu linkjes.
Weergeven zoals stijlgids, met UL, LI en icons

Component: Paragraph

We willen graag een paragraph component toevoegen.

We hebben een intro paragraaf en een 'normale' paragraaf. Zie screenshot hieronder:

Component: Button

We willen graag een button component toevoegen aan de repository.

@Ollie-nl: Zou jij onderstaande lijst met buttons kunnen aanvullen?

Primaire button
Primaire button met iccon
Primaire button met icoon inactive
Primaire button met icoon met groene achtergrond

Definition of done:

Components aanmaken in Docusaurus

Werken aan Docusaurus:

Logo component toevoegen inclusief richtlijnen
Paragraaf component toevoegen inclusief richtlijnen
Paragraaf componenten los maken in storybook
Link component toevoegen inclusief richtlijnen
Menustructuur in docusaurus proberen aan te passen
Formulier elementen in Docusaurus

Table component

Voorbeelden:

https://www.utrecht.nl/wonen-en-leven/parkeren/ervaart-u-parkeeroverlast/spinozaplantsoen-invoeren-betaald-parkeren/

https://www.utrecht.nl/ondernemen/vergunningen-en-regels/horecaloket/regels-voor-geluid/akoestisch-onderzoek/geluidsproductie-horeca/

Component: Textarea

In een formulier een textarea kunnen toevoegen

Table CSS classes names

The BEM classes for the table include utrecht-table__heading and utrecht-table__header. Looking at the HTML CSS, I believe the naming of these classes is very confusing.

HTML spec refers to th as being a header cell. But the CSS is using the __heading element. Whilst the thead selector is using the __header class.

Alle documentatie in het Nederlands

Alle omschrijvingen en toelichtingen zijn in het Nederlands.

Component: Logo Gemeente Utrecht

Graag het logo van de gemeente Utrecht toevoegen aan het NL Design System.

Logo wordt toegevoegd aan dit issue.

Component: Blockquote

Een mooi stukje tekst om een citaat in te zetten. Zie voorbeeld hieronder.

Variant: met attribution
Variant: zonder attribution

Fixed story id's in storybook

Om stories in Docusaurus in te laden gebruiken we story id's. Deze worden autmatisch door storybook gegenereerd, wat onderhoudbaarheid van deze link in de weg kan zitten.

Bedenk en documenteer een naming convention voor story id's
Gebruik custom id's in stories met https://storybook.js.org/docs/react/configure/sidebar-and-urls#permalinking-to-stories
Gebruik deze id's in docusaurus

Component: Heading component

We willen graag een heading component toevoegen.

Het gaat om h1 tot en met h6.

Design tokens van de headers staan in de main branch in deisgn-tokens.css.

Component: Collapse

Een uitklapbaar blok toevoegen.
Met een collapse kan secundaire informatie verborgen worden. Door op de titel te klikken wordt de informatie zichtbaar.

Docusaurus images zoals logo

Logo.mdx verwijst naar images uit propriertary/assets. Voor storybook worden deze beschikbaar gemaakt als static bestanden tijdens build.

Docusaurus moet ook deze plaatjes in kunnen laden, zónder dat we handmatig dingen in sync moeten houden en terwijl de storybook images uit dezelfde markdown blijven werken.

Inspiratie op doen bij andere design systems

Hoe categoriseer componenten
Hoe introduceer/begeleid je bezoekers op je site?

Links:
https://designsystemsrepo.com/design-systems/

Overzicht:
https://miro.com/app/board/uXjVOU8NzU8=/?invite_link_id=926546318470

Onderzoeken hoe we overzicht kunnen creeëren in documentatie

Uitzoeken: Hoe zorgen we er voor dat onze documentatie overzichtelijker wordt? Mogelijkheden bedenken

Voorbeelden van andere Design Systems (Helsinki en Amsterdam)
Hoe gaan we om met dubbellingen? CSS-component, Web-component, HTML, Vue, React, Angular. Denk ook aan zoekresultaten!
"Ik zie wat ik wil zien"
Is er een manier te bedenken voor de verschillende gebruikers van het systeem: iemand van de redactie kijkt anders naar het DS dan een developer die componenten wil gebruiken.

Wat hoort in storybook? En wat niet? Als het er niet hoort, waar hoort het dan wel?

NB: Beheer doen op oplossing.
NB: 1 bron van waarheid

Gewenste uitkomsten:
-Basis om een vervolgstory te bouwen waarin we kunnen beschrijven wat we willen.
-Storybook opsplitsen CSS/HTML/React/web
-1 map 'buiten' storybook in documentatiesysteem (docz?)
-Links binnen docz, niet in storybook.
-Mini-POC: Heading component.

Component: Checkbox

Een checkbox met label of zonder toevoegen

Search poc Docusaurus

Gegevens aanvragen bij algolia.com
Token ontvangen van Algolia
Algolia search toevoegen met search bar
Alternatieve custom search uitwerken die we eventueel voor oudere versies kunnen gebruiken

Component: Skip Link

https://utrecht.nl heeft een skip link:

<!-- START skiplinks -->
<div class="skiplinks rs_skip">
    <a href="#page-content" title="Naar de inhoud" accesskey="1">
        <span>Naar inhoud</span>
    </a>
    <a href="#menu" title="Open menu" accesskey="2">
        <span>Naar menu</span>
    </a>
    <a href="#searchHomepage" title="Open zoeken" accesskey="3">
        <span>Naar zoekveld</span>
    </a>
</div>

Huwelijksplanner heeft ook een (simpele) skip link, zonder een eigen wrapper element zoals <div> of <p>:

<a class="skiplink" href="#content">
  <span class="skiplink__text">Ga direct naar inhoud</span>
</a>

Hiervoor hebben we ook styling nodig.

Docusaurus watcher verbeteren

Het lijkt erop dat de docusaurus watcher niet altijd blijft draaien

Kunnen we docusaurus herstarten na het (proberen te) fixen van errors
Kunnen we docusaurus herstarten als de configuratie is gewijzigd
Testen of de watchers van documentatie/website en components blijft draaien en voor een rerender zorgt