dso-toolkit/dso-toolkit

DSO Toolkit

• Slack chat
• Slack chat invite link

DSO Toolkit - Design System of the Digitaal Stelsel Omgevingswet (DSO)

(Digitaal Stelsel Omgevingswet, translated, stands for Digital System for the Environment and Planning Act of the Netherlands)

The DSO Toolkit consists of documentation and a style guide. In addition, two implementations are provided: CSS and Web Components. The Web Components for Angular and React get wrappers, see issue #915.

Getting started

Zie https://www.dso-toolkit.nl voor actuele documentatie.

NPM registry

npm install dso-toolkit --save-dev

Bundle CSS

Import or bundle dso-toolkit/dist/dso.css.

CDN

The toolkit and component library are distributed to dso-toolkit.nl. Use the table below to resolve the branch/channel to the base url:

branch	channel	url
master	stable	https://cdn.dso-toolkit.nl/master/
tags only	releases	https://cdn.dso-toolkit.nl/VERSION/

The same goes for the component library:

branch	channel	url
master	stable	https://www.dso-toolkit.nl/master/
tags only	releases	https://www.dso-toolkit.nl/VERSION/

<link rel="stylesheet" href="https://cdn.dso-toolkit.nl/dso-toolkit/[master|VERSION]/dist/dso.css" />

or minified:

<link rel="stylesheet" href="https://cdn.dso-toolkit.nl/dso-toolkit/[master|VERSION]/dist/dso.min.css" />

For Web Components:

<script type="module" src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.esm.js"></script>
<script nomodule src="https://cdn.dso-toolkit.nl/[master|VERSION]/core/dso-toolkit.js"></script>

The referenced scripts are very small: Only the actually used Web Components are lazy loaded. For more information: https://stenciljs.com/docs/distribution

Develop or mockups

To work on the DSO Toolkit using components and variants or create mockups of pages, forms or components you need Node 20 and Yarn. See CONTRIBUTING.md on how to contribute.

Either install Yarn with

npm install --global yarn

or use Yarn with npx:

npx yarn <<<my commands here>>>

git clone [email protected]:dso-toolkit/dso-toolkit.git
cd dso-toolkit
yarn install

Environments

Depending on the work being done, development can be done in several environments:

development

This environment is used to develop new components in Storybook. Storybook is built around stories and since this project has multiple Storybooks (one for each implementation).

The easiest way to start this environment is with one of the following commands:

yarn start
yarn start --react
yarn start --angular
yarn start --all

This will run the corresponding Storybook(s). Since these commands contain a colon (:), these commands can be run from anywhere in the project.

The following processes are started:

• default: CSS in watch mode, Stencil in watch mode, Storybook and Cypress
• --react: CSS in watch mode, Stencil in watch mode, Storybook for React components
• --angular: CSS in watch mode, Stencil in watch mode, Storybook for Angular components
• --all: CSS in watch mode, Stencil in watch mode, Storybook, and Storybook for React and Angular components

This will start Stencil on http://localhost:45333, Storybook on http://localhost:45000 and the Cypress GUI. Since Stencil and Storybook are running it's possible to develop the components, but keep in mind the tests run in a production environment: This means no Stencil development tools like HMR.

Requirements

Node 20. For development on the DSO Toolkit you also need Yarn.

Ports

Ports used during development:

• 43300 - Docusaurus
• 45333 - Stencil
• 45000 - Storybook for HTML/CSS + Web Components
• 45600 - Storybook for React components
• 46006 - Storybook for Angular Components

dso-toolkit's Issues

Typography

Text van Typografie onder "Overview" graag onder eigen kopje bij "Documentatie" plaatsen.

Text by Typografie graag uitbreiden met de specificaties voor.
H1, H2, H3, paragraaf en dergelijke.

/Original reporter: Michael

Definition list component

I would like to ad a definition in the Toolkit for presenting an list of metadata (name value pairs).
I also like to have a slightly lighter background than the 10% black to put these labels on. My suggestion is 95% grey (5% black)
For the name value pairs I would like to have distinction between the values and the names, in such way that emphasize is on the values.

Radiobuttons redesign

Radio buttons zijn herontworpen.

Kleuren en border:

Border: 2px solid #A8BCAE
Kleur selected: #39870C

/Original reporter: Michael

Component 'dso-select' should not be removed

Afgelopen dinsdag tijdens de demo door Thomas kwam ter sprake dat de dso-select mogelijk zou komen te vervallen nu er nieuwe checkboxes en radiobuttons zijn gespecificeerd. Dit is wat ons betreft niet wenselijk aangezien wij de dso-select markup in onze applicatie gebruiken. Weliswaar met custom styling zodat deze er uit zien zoals de checkboxes en radios zoals bij jullie bekend.

Wat ons betreft (dit ook met Michael besproken) zouden er dus niet alleen nieuwe radios en checkboxes moeten komen, maar zou ook de dso-select (single en multi) moeten worden bijgewerkt zodat we dit component als volgt kunnen blijven gebruiken:

Button redesign

Onder het kopje divers staat het onderdeel button. Deze moet uiteindelijk de volgende vormgeving krijgen.

Het is eigenlijk een samenvatting van de belangrijkste buttons. Maar ook bij elkaar geplaatst om de relaties tussen buttons te tonen.

Primair
Standaard

Font: H4 bold, #FFFFFF
Background: #E17000

Hover

Font: H4 bold, #FFFFFF
Background: #D45800

Disabled

Background: #f6d4b2

Secundair
Standaard

Font: H4, #39870C
Border: 2px, #39870C

Hover

Font: H4, #FFFFFF
Background: #39870C

Disabled

Font: H4, #AFCE9D
Border: 2px, #AFCE9D

Tertiair
Standaard

Font: H5, #39870C
Border: 2px, #39870C

Hover

Font: H5, #39870C
Background: #39870C

Disabled

Font: H5, #AFCE9D
Border: 2px, #AFCE9D

/Original reporter: Michael

Build and dev optimalizations

• dso.css in de toolkit mag geen example/demo css hebben
• dso.css in library mag dit wel hebben
• Tijdens dev mode (gulp) moet de dso.css ook de example/demo css hebben

De HTML reference files moeten opgemaakt worden met pretty (node package)

Accordion requires JQuery and bootstrap inclusion

These URI are required for the accordion to work,these dependencies should be automatically included:

• <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
• <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Checkboxes redesign

Herontwerp checkboxes

Kleuren / Border / Radius

Border: 2px, #A8BCAE, radius 6px
Kleur Vinkje: #39870C

/Original reporter: Michael

Alert design improvements

Volgende aanpassingen moeten worden gedaan betreffende de notificaties.

Succes-melding

Background Icoontje: #79B929

Background Groene Container: #E4F1D4

Text: #191919

Foutmelding

Background Icoontje: #CE3F51

Background Rode Container: #F5D8DC

Text: #191919

Waarschuwing

Background Icoontje: #DCD400

Background Gele Container: #F8F6CC

Text: #191919

Informatiemelding

Background Icoontje: #6CA4D9

Background Blauwe Container: #E1ECF7

Text: #191919

/Original reporter: Michael

Documentation revision

Documentatie loopt achter op de werkelijke situatie

Combinatie btn btn-primary met extern of download

Als een call-to-action button een externe link is, mag/moet je dan ook de class extern specificeren? Dus dan zou je class="btn btn-primary extern" krijgen. Het ziet er niet zo gek uit, maar is het de bedoeling? Dat wordt me uit de dso-toolkit site niet duidelijk.

Dezelfde vraag heb ik voor de combinatie van btn btn-primary met download.

Changed nav variant `tabs` styling

Graag extra variant bij Navs.
Zie screenshots en voorbeeld hieronder.
N.B. Afwijkend van screenshot: deze extra variant dient een witte achtergrond als basis te hebben, in plaats van grijs zoals in het voorbeeld.

Voorbeeld:
https://nuaxnu.axshare.com/#g=1&p=2_zoekresultaat__adres_&c=1

https://www.dso-toolkit.nl/unstable/components/detail/navs.html

/Original reporter: Michael Höhne

Gekozen is om niet het menu uit elkaar te halen, maar om de nav variant "Tabs" aan te passen naar nieuwe styling. Dit omdat het voorbeeld aangeeft dat de Tabs navigatie in de DSO Toolkit om deze styling vraagt.

/Original comment: Dion

Typeahead component

Bij typen wordt het gezochte woord in bold gezet:

Scope:

• Dit betreft enkel de markup.
• Dit wordt een uitbreiding op de {{input-group}}
• Een beschrijving van het gedrag
• Open en gesloten variant demo
• Highlighten van de matchende tekst
• CSS regressietesting opnemen als scenario

Zie ook:
https://nuaxnu.axshare.com/#g=1&p=2_zoekresultaat__adres_&c=1

/Original reporter: Michael Höhne

Nav Bar Collapse to more button on overflow

The current navbar looks strange when there is not enough room to show all tabs.
I would like to collapse the not fitting tabs to a button "meer..." showing a menu with these tabs.
sample: https://www.bootply.com/8UzYhpyAPh

Accordion redesign

De volgende aanpassingen moeten worden gedaan aan de Accordeon.

Veranderingen

Alle Titels worden een h4, dat volgens de nieuwe typografie regels 18px bold worden met de kleur #39870C

Het pijltje moet een grote krijgen van 32px en de kleur #39870C

Het Accordeon die de zogezegde Active state heeft moet de kleur #e17000 krijgen , Oranje uit het kleurenpalet. Dit geldt ook voor de border.

De border van de titels
border-bottom: 2px solid #C3DAB6;

Verder moet de pijltjes de kleuren krijgen die bij de Titels horen. Momenteel zijn ze allemaal zwart. Dus deze moeten #39870C (Grasgroen) zijn als ze zijn ingeklapt en #e170000 (oranje) als deze is opgeklapt

De margins en padding moeten voldoen aan de de afbeelding.
In de stijlgids is er een overlap tussen margins en paddings. Ik neem aan dat dat zo zal blijven?

/Original reporter: Michael

Footer redesign

De volgende aanpassingen moeten worden gedaan aan de footer om hem te laten lijken op de afbeelding.

Element <footer> volgende aanpassingen

background-color: #e5e5e5;
margin-top: 48px;
padding: 24px 16px;
border-top: 1px solid #BCBEBD;

De h2's worden een h3 volgens de nieuwe typografie standaard dus 20px of 1.25 em

Aanpassingen titels <h3>

border-bottom: 1px solid #BCBEBD;
font-size: 20px;
font-weight: 700;
margin-top: 0;
margin-bottom: 8px
padding-bottom: 8px;

Als laatste een aanpassing in het Ul element waar de links in staan

Aanpassingen footer <ul>

margin-bottom: 24px;

/Original reporter: Michael

Pagination redesign

Lange lijsten, zoals bijvoorbeeld een lijst met zoekresultaten, kunnen worden ingedeeld in pagina’s met paginering. Gebruik niet meer dan vijf stappen in de paginering, zodat deze ook op een mobiel scherm goed wordt getoond. Wanneer er meer dan vijf pagina’s zijn kan dit in de paginering worden weergeven met ellipsis.

Kleur:
Voor de groene onderden wordt de kleur #39870C gebruikt in overeenstemming met het de weergave van de secundaire knop.

/Original reporter: Michael

merge 1.1.1 upstream

Links naar Navigatie

Betreffende Links moeten er vier dingen gebeuren. Eerst moet er een kopje Links in de stijlgids komen onder Navigatie. Waar de styling van links staat. Dit mag onder het kopje navigatie.

Ten Tweede

De huidige links en externe links voldoen niet aan de wcag. De kleur is te donker waardoor het niet goed is te onderscheiden van de normale tekst. Deze moet dus aangepast worden.

Dit zijn de aanpassingen om te voldoen aan de wcag:

De volgende aanpassingen moeten gedaan worden op het gebied van links in standaard stukken tekst. Niet voor Headers en complete tekstblokken als links. (Zie de pagina actueel)

De huidige kleur (#23527c) voldoet niet aan een WCAG AA standaard dit zijn de huidige waarden.

Kleur: #23527c

Een 4.5 : 1 contrast tussen de non link text kleur en achtergrond = 21.0 : 1

Een 4.5 : 1 contrast tossen de link text kleur en de achtergrond = 8.17: 1

Een 3.1 : 1 contrast tussen de link text kleur en de omliggende non- link text kleur = 2.57 : 1

Om AA te halen wordt de kleur van links veranderd naar #39870c
En de kleur van de body text wordt veranderd #191919

De kleur #39870c voor Link tekst geeft de volgende resultaten

Een 4.5 : 1 contrast tussen de non link text kleur en achtergrond = 21.0 : 1

Een 4.5 : 1 contrast tossen de link text kleur en de achtergrond = 4.52: 1

Een 3.1 : 1 contrast tussen de link text kleur en de omliggende non- link text kleur = 3.8 : 1

Met deze kleur wordt er voldaan aan de WCAG contrast standaard, zonder dat er een underline hoeft worden toegevoegd. Het contrast moet namelijk hoog genoeg zijn

Ook wordt de hover kleur aangepast naar #676CB0

De underline blijft wel bij hover.

Ten derde is er een probleem met de weergave van het Icoontje aan de achterkant van externe links. De spatie is te groot.

Bij de paragraaf

wordt aan het einde een geforceerde spatie -> nbsp (no break space) gebruikt. Hierdoor is de afstand groter dan een normale spatie.

De afstand moet een normale spatie worden. Of dit gedaan moet worden middels een toegevoegd unicode symbool (thinspace heeft wel de juiste grote) of een padding maakt niet uit. Zolang het consistent is.

Verder moet dezelfde spatie ook tussen het symbool en de link-tekst in komen voor een gebalanceerd geheel.

Als laatste moet er ook bij hover de cursor in een handje veranderen.
Soms ontbreekt dit nog. Dit moet altijd aanwezig zijn bij een link.

Dus Cursor:pointer moet er altijd instaan

/Original reporter: Michael

Dropdown Button Redesign

Aanpassingen voor de dropdown button

padding boven/onder 8px;
padding links/recht 16px;

Radius compleet afgerond.

Font-size 20px en Bold

/Original reporter: Michael

Release version 1.1.0

De toolkit levert CSS componenten. De API van deze componenten is dus de markup: Bij incorrecte markup zal de CSS niet aanslaan.

Om bewust te blijven van dit raakvlak maakt de toolkit gebruik van automatische referentie tests. In de repository zitten voor elk component (+ variant) een referentie ingecheckt. Dit zijn HTML files. Als een component wordt aangepast (de Handlebars/Nunjucks file) is ook een bijgewerkte referentie nodig.

In de CI straat wordt dit ook gedaan: Alle componenten worden vergeleken met de referentiefiles. Bij een mismatch faalt de build. In de praktijk betekent dat een PR niet gemerged kan worden.

Als wijzigingen gewenst zijn betekent dat meestal een Major of Minor release. Wijzigingen worden bij het reviewen van het PR geaccordeerd en opgenomen in de master codebase.

Build tools: developer mode

Call to action component

Het klikmodel dat gebruikt is voor de usertests in December heeft een aantal veranderingen opgeleverd die in de stijlgids V1.2 moeten komen.
(Dit klikmodel bevat nog WCAG fouten een nieuwe is ontwikkeling, mock up afbeeldingen zijn er wel)



Een van de belangrijkste is overgaan naar het gebruik van een 8px grid. Dit betekent dat alle elementen hier binnen vallen om consistentie te creëren.

De call to action is een van deze elementen.

Primaire Button

De Kleuren

Normal State
Body-Kleur: #E17000
Tekst-Kleur: #FFFFFF (Blijft hetzelfde voor alle kleuren)

Hover State
Body-kleur: #D45800
Tekst-Kleur: #FFFFFF

Disabled State:
Body-Kleur: #f6d4b2
Tekst-Kleur: #FFFFFF


Voor de text in de button gaan we 18px bold gebruiken. Anders is het contrast te klein en voldoet het niet aan de WCAG.

/Original reporter: Michael

Documentation: Colors update

Voor het kopje Colors onder Documentation moeten er wat aanpassingen gedaan worden.
Er komt een secundaire kleurenpalet, extra tekst en ook worden er wat aanpassingen gedaan onder de al bestaande kleuren.

Ik stuur een afbeelding mee waar alles mooi en netjes onder elkaar staat. De tekst zet ik extra even hier onder dat maakt het handiger met kopiëren/plakken.

Gebruik
Als kleuren een semantische waarden hebben kunnen gebruikers functionaliteiten sneller identificeren en gebruiken. Hanteer de volgende regels per kleur.

Groen
Groen is de hoofdkleur voor de presentatie van het DSO.
• Titels
• Subtitels
• Menutext
• Secundaire knoppen
• Steunkleuren

Oranje
Oranje is bedoeld voor aandachtspunten en moet spaarzaam gebruikt worden.
• Accenten
• Indicatoren
• Call to actions
• Primaire knoppen

Zwart
#191919 / rgb(25,25,25,) voor body tekst

Secundaire kleurenpalet
De secundaire kleuren zijn ontwikkeld naast de communicatiekleuren en zijn ontstaan vanuit de basis- elementen Aarde - Water - Lucht - Vuur. Warme en koude kleuren die de communicatiekleuren aanvullen. Deze kleuren kun je gebruiken als de communicatie-kleuren niet toereikend zijn. Bijvoorbeeld in tabellen en grafieken waar meer kleurvariatie nodig is om duidelijk onderscheid te kunnen maken in verschillende waarden of legenda’s. Dus nooit als steunkleur voor accenten in de reguliere opmaak. Dan gebruik je uitsluitend het primaire kleurenpalet.
Let op: deze kleuren worden naast het primaire kleurenpalet gebruikt en zijn ondergeschikt.

Kleuren en codes:
Grasgroen
#39870C
rgb(57,135,12)

Grasgroen 80%
#609F3C
rgb(96,159,60)

Grasgroen 40%
#AFCF9D
rgb(175,207,157)

Grasgroen 10%
#EBF3E6
rgb(235,243,230)

Bosgroen
#275937
rgb(39,89,55)

Bosgroen 80%
#527A5E
rgb(82,122,94)

Bosgroen 40%
#A8BCAF
rgb(168,188,175)

Bosgroen 10%
#E9EEEB
rgb(233,238,235)

Lime
#79B929
rgb(121, 185, 41)

Oranje
#E17000
rgb(225,112,0)

Zwart
#000000
rgb(0,0,0)

Zwart 90%
#191919
rgb(25,25,25)

Zwart 60%
#666666
rgb(102,102,102)

Zwart 10%
#E8E8E8
rgb(232,232,232)

Geel
rgb (220 - 213 - 0)
#DCD400

Rood
rgb(206 - 63 - 81)
#CE3F51

Mintgroen
rgb (63 - 180 - 152)
#3FB498

Mauve
rgb (140 - 75 - 107)
#8B4A6A

Paars
rgb (104 - 108 - 176)
#676CB0

Donkerblauw
rgb (43 - 87 - 129)
#2B5780

Lichtblauw
rgb (108 - 165 - 218)
#6CA4D9

Bruin
rgb (100 - 80 - 74)
#644F49

/Original reporter: Michael

Accordion has a bigger click area

1. Wanneer op de pijl van een accordion geklikt wordt, dan klapt de accordion niet open.
   Graag open/dichtklappen ook bij klik op accordion.

zie
https://www.dso-toolkit.nl/unstable/components/detail/accordion.html

N.B. Graag hele rij inclusief pijl klikbaar maken.

/Original reporter: Michael Höhne

Favicon

Op dit moment is er nog geen favicon.

Deze moet worden toegevoegd en een eigen kopje krijgen in de stijlgids.

Dit wordt het favicon

package.json access-sniff update to 3.1.0

Pager redesign

Volgende aanpassingen moeten plaatsvinden

Border radius compleet rond. Dimensies staan in de afbeelding.

Standaard

Font: H4, #39870C
Border: 2px, #39870C

Hover

Font: H4, #FFFFFF
Background: #39870C

Disabled

Font: H4, #AFCE9D
Border: 2px, #AFCE9

/Original reporter: Michael

Re-release version 1.0.5

FontAwesome upgrade -> 5.0.6

Font Awesome heeft een flinke overhaul gemaakt vanuit versie 4.x.x naar versie 5.0.0 en de iconen zien er in deze versie een stuk mooier/strakker uit. Graag wil ik de DSO toolkit upgraden naar Font Awesome 5.0.0 zodat we gebruik kunnen maken van niet alleen mooiere iconen, maar ook de beschikking krijgen tot meer iconen/varianten.

/Original reporter: Dion

Button modifiers do not work properly on anchors

<a href="#" class="btn btn-[primary|default|link]">Dit is een link-knop</a>

Bovenstaande markup geeft een verkeerd beeld:

@MichielDHVD We gaan in ieder geval de verticale uitlijning fixen. Heb jij nog speciale wensen voor de :visited state?

Alert uses wrong icons

Het alert component (https://dso-toolkit.nl/unstable/components/detail/alert.html) gebruikt verkeerde iconen. Het lijkt er op alsof hier font-awesome iconen worden gebruikt, terwijl deze niet overeen komen met de in het ontwerp opgenomen (custom) iconen welke als het goed is als SVG's zijn aangeleverd.

Verwacht:

Opgeleverd:

Node 9 compatible package.json

Responsive hamburger menu styling

The first item in the hamburger menu looks sluggish, see below screenshots:

Fractal collator improvement

Een component kan verschillende varianten hebben. Deze varianten kunnen op 1 pagina worden getoond met collated: true. Hoe deze varianten worden samengevoegd bepaald de collator.

De collator is slimmer gemaakt. Zodra een variant de context properties __title of __description heeft, wordt er een box om het component heen gezet. In deze box kan dan toelichting worden gegeven. Deze toelichting staat dichter bij het component dan het "Notes" tabblad van Fractal.

In small viewport the hamburgermenu button active state forces button below search field

De menu balk is geïntegreerd in het ontwikkelaarsportaal maar werkt niet [netjes] op mobile devices.

• Op een laptop wordt de standaard menu layout netjes getoond en werkt naar behoren.
• Op een mobile device wordt de hamburger getoond, maar op de hamburger tikken/klikken laat de hamburger icon een stuk zakken.

Zie https://acc.omgevingswet.overheid.nl/ontwikkelaarsportaal/.

Aanpassing: Het tonen van de menu-items in reponsive is functionaliteit uit collapse.js van Bootstrap. Deze is niet meer ondersteund, de stijlgids wordt framework-agnostisch. Het tonen van menu-items in responsive viewports moet door de implementator opgelost worden en valt buiten scope van dit ticket en de stijlgids

/Original reporter: Marcel Dullaart

Searchbar redesign

Menu heeft het label 'ready', maar heeft toch nog wel wat aandacht nodig denk ik als ik dit zo zie:

Jumbotron component

Bijgaand een nieuwe opzet voor het jumbotron voor Homepagina:

Indeling 8 - 4 koloms voor tekstuele onderdelen.

Titel per blok heeft 12 koloms breedte

Doorlopende tekst is max 8 koloms breed, om leesbaarheid van multi-regel teksten te vergroten.

1 "Featured image" is per Jumbotron blok mogelijk. Deze afbeelding wordt 4 kolomsbreed naast de tekst geplaatst. Editors dienen zelf zorg te dragen voor een acceptabele hoogte van een afbeelding.

Actueel krijgt 6 - 6 koloms indeling voor Nieuws en Evenementen

Mogelijkheid tot steunkleur "lichtgroen" #EBF2E6 .

Editor kan zelf kiezen welke jumbotron blokken een steunkleur krijgen. Bij geen gebruik van steunkleur, dan wordt een wit kader met een dunne lijn boven en beneden het jumbotron gehanteerd.

Deze lijn bij de jumbtron ,zowel boven en onder, moet niet worden opgeteld door een bottom-border en top-border van twee verschillende elementen dat het eruitziet als een border van 2px . Kan dit in het systeem verwerkt worden dat het eruitziet zoals in deze afbeelding

Foto's die zijn toegevoegd laten het ontwerp zien in mogelijke configuraties.

/Original reporter: Michael

Bugfixes 1.0.6 upstream mergen

Asap font doesn't look sharp

Over de e-mail al eens aangegeven, nu op GitHub

Op mijn scherm lijnt het Asap font niet mooi uit op 16px:

Dit doet het ook op de font pagina van Google (https://fonts.google.com/specimen/Asap):

Pas vanaf 20px ziet het er enigszins strak uit. Michael heeft hier op zijn scherm geen last van:

@MichielDHVD Willen jullie hier iets mee? Ik weet niet waar mijn e-mail van 27 februari naar Michael uiteindelijk terecht is gekomen.

Edit: In #14 zijn de Asap Font files en font declaraties onder handen genomen:

• @font-face definities zijn rechtgetrokken
• De nieuwste Asap is van Google fonts gedownload
• Verschillende font types (SVG, EOT, TTF, Woff en woff2) ipv alleen TTF.

De vorige versie zag er wel mooi uit (https://www.dso-toolkit.nl/1.1.0/) maar was een oudere versie:

Gutter width is 15px instead of 16px

Gutter zou 16px breed moeten zijn volgens de specificaties. Dit staat ook netjes vermeld op: https://dso-toolkit.nl/unstable/docs/layout.html

Echter, ik zie dit nog niet verwerkt, in de voorbeelden wordt (nog?) de standaard Bootstrap 15px gutter gebruikt: https://dso-toolkit.nl/unstable/components/detail/layout.html

Accordion's arrow animates when opened or closed

Nu heeft de pijl 2 states, open en dicht (zoals bij het klikmodel). Graag tussen de open en dicht states animeren middels een rotatie van de pijl:

Gesloten state naar Open state:

• Pijl start wijzend naar rechts. Vervolgens draait de pijl een kwartslag rechtsom om de accordion te openen;

Open state naar Gesloten state:

• Pijl start wijzend naar beneden. Pijl draait een kwartslag linksom om de accordion te sluiten;

zie
https://www.dso-toolkit.nl/unstable/components/detail/accordion.html

/original reporter: Michael Höhne

Documentation: Layout

Er zal een extra onderdeel met kopje Layout onder Documentation moeten komen. Hier moet het volgende in komen te staan.

---

Layout

Horizontale layout


Om structuur en consistentie te creëren wordt voor de horizontale verdeling de 12 columns structuur uit bootstrap gebruikt. Onder het kopje grid staat de toepassing van deze 12-columns structuur

Verticale layout
Voor de verticale layout en hiërarchie wordt het 8px grid gebruikt. Het 8px grid betekent het volgende.
Gebruik increments van 8px om de grootte van en ruimte tussen de elementen te tonen op een pagina.
Dus Height, Width, Padding, Margin bestaan allemaal uit increments van 8.
8 > 16 > 24 > 32 > 40 > 48 > 56 > 64 > 72 > 80 etc.

Een voorbeeld van een button in het 8px grid.

De grootte van elementen met tekst erin, zoals buttons, wordt bepaalde door de grootte van de tekst. De paddings en margins zorgen voor de consistentie.

Softgrid
Deze individuele elementen worden vervolgens relatieve gepositioneerd in increments van 8px tegenover elkaar. 

Net zoals het verschil tussen h1, h2 ,h3 ,h4 ,h5 waar belangrijke titels groter zijn dan minder belangrijke titels, houd zo ook een groter verschil aan tussen elementen.

Voordelen
De meest populaire groottes van schermen zijn te delen door 8, op zijn minst op een axis vaak beiden. Wat scalibility verbetert.
Door 8px increments te gebruiken haal je 7 tot 8 spacing opties weg, wat het aantal keuzes reduceert en vervolgens sneller gecodeerd kan worden.

Consistentie, wanneer deze regels gevolgd worden voor elk element onstaat er automatisch een meer consistente User Interface

Een totaal pagina opgebouwd met 8px grid.

/Original reporter: Michael

Line-height change

De lineheight van de paragraaf is niet precies goed zoals deze hoort te zijn.

Op dit moment is deze line-height: 1.42857;

Deze moet 24px / 1.5 em worden.

/Original commenter: Michael

Full width row

Wrong font in Navs component

In https://dso-toolkit.nl/1.2.0-alpha.0/components/detail/navs.html it seems that the wrong font is used.
Font "Asap Bold" doesn't render like Asap font (is the font link correct?).
By using "Asap" the problem seems to be solved.

Formulieren: Tekstvelden en labels redesign

Voor alle formulieren met een vorm van een tekstveld moet het volgende aangepast worden.

CSS regression testing + ontmantelen van de WCAG checker

CSS regressie testing dmv. Percy (https://percy.io)

De ingebouwde WCAG checker heeft zichzelf niet bewezen. Voor nu ontmantelen we de wcag checker gaan we de toegankelijkheid via andere tools toetsen.

DSO Toolkit heeft een account bij Percy: https://percy.io/dso-toolkit/dso-toolkit. De resultaten zijn openbaar. Voor elke commit wordt er een visuele (pixelgebasseerde) vergelijking gemaakt met de referentiebuild (de stand van zaken zoals in master).

Een PR kan pas worden gemerged als de visuele wijzigingen zijn approved of als er geen wijzigingen zijn.

Typo in clean during reference:dom task

Hierdoor worden de niet-bestaande templates niet verwijderd

Modal component

In story DSOCOMLIB-116 was het er verzoek voor een losse story over het vraagteken en de pop-over die zal volgen op dit ontwerp

Deze Pop-over moet er als volgt uitzien. De Popover geldt niet alleen bij een hulpopmerking maar ook bij bijv. toevoegingen.

/Original commenter: Michael