loon-bulma-react 2022.3.10 → 2022.3.13

package/README.md

@@ -1,13 +1,28 @@
 # loon-bulma-react
 
+> ## Aanpassingen
+>
+> - Steps Component toegevoegd
+> - TimeLine Component toegevoegd
+> - Checkbox aangepast: heeft nu een `size`, `color`, en een `styling`-prop gekregen
+> - RadioButtons aangepast: heeft nu een `size`, `color`, en een `styling`-prop gekregen
+> - Form-component kan ook RadioButtons aan.
+> - README: hooks-gedeelte aangevuld
+> - `styles`-prop aangemaakt in aantal layout-componenten. Dan kan je direct styles zetten, mocht dat nodig zijn.
+>   - Container
+>   - Section
+>   - Box
+>   - Content
+>   - Columns
+>   - Column
+
 ## [Bulma](https://bulma.io/) & [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
 - [Installatie](#installatie)
 - [Gebruik](#gebruik)
 - [Notifier](#notifier)
-  - [Gebruik](#notifier-gebruik)
-  - [Instinkers](#notifier-let-op)
 - [Componenten](#components)
+
   - [Layout](#layout)
     - [AspectRatio](#layout-aspectratio)
     - [Box](#layout-box)
@@ -21,9 +36,11 @@
   - [Button & ButtonGroup](#component-button)
   - [Calendar](#components-calendar)
     - [MonthView](#components-calendar-monthview)
+    - [WeekView](#components-calendar-weekview)
   - [DataTable](#component-datatable)
   - [Footer](#component-footer)
   - [Icons (FontAwesome)](#component-icons)
+  - [Indicator](#component-indicator)
   - [Kbd & Kbds](#component-kbd) (KeyBoarD)
   - [Link & LinkButon](#component-linkbutton)
   - [Menu](#component-menu-2)
@@ -32,7 +49,9 @@
   - [ProgressBars](#component-progressbar)
   - [TabBar](#component-tabbar) (Nieuw, ipv Tabs)
   - [SimpleTable](#component-simpletable) (Voorheen Table)
+  - [Steps](#component-steps) (NIEUW)
   - [Tag & Tags](#component-tags)
+  - [TimeLine](#component-timeline)
   - [Titles & Subtitles](#component-titles)
   - [ToggleBar](#component-toggles)
   - [Form & Inputs](#form)
@@ -50,6 +69,7 @@
       - FileInput
       - BasicInput
     - [CheckBox](#form-checkbox)
+    - [RadioButtons](#form-radio)
     - [Ranges](#form-ranges)
       - Range
       - MultiRange
@@ -59,6 +79,12 @@
     - [Validatie](#form-validatie)
     - [Form](#form-form)
     - [Form-builder](#form-component)
+
+- [Hooks](#hooks)
+  - [useClipboard](#hooks-use-clipboard)
+  - [useDebouncedValue](#hooks-use-debounced-value)
+  - [useHotkeys](#hooks-use-hotkeys)
+  - [useToggle & useBoolToggle](#hooks-use-toggle)
 - [Publiceren](#publiceren)
 
 ## Installatie <a id="installatie"></a>
@@ -68,8 +94,7 @@
 Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` hoef je niet toe te voegen, dat is de default.
 
 ```bash
-npm install --save loon-bulma-react
-npm install --save bulma
+npm install --save bulma loon-bulma-react
 ```
 
 ### Voor een versie die hoort bij een bepaald jaar (Bijvoorbeeld in Loon-2021).
@@ -87,7 +112,7 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 {
   "devDependencies": {
     // ...
-    "loon-bulma-react": "y2021"
+    "loon-bulma-react": "y2022"
     // ...
   }
 }
@@ -105,7 +130,7 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 
 ## Gebruik <a id="gebruik"></a>
 
-in `index.tsx`
+in `index.tsx` importeer je de styles. Je kan ze ook allemaal apart importeren, maar begin dan met de `variables.scss`, die zijn overal nodig.
 
 ```tsx
 import 'loon-bulma-react/styles/_all.scss';
@@ -135,9 +160,7 @@ function MyComponent(props) {
 
 De notifier is een ContextProvider om vanuit de gehele app notificaties te kunnen tonen. Deze verschijnen aan de rechterkant. Er is een keuze om ze vanaf boven OF onder te tonen. Met behulp van de hook `useNotifier` kunnen notificaties toegevoegd worden.
 
-### Gebruik <a id="notifier-gebruik"></a>
-
-##### 1: wrap de componenten die de notifier mogen gebruiken tussen de provider-tags
+1: wrap de componenten die de notifier mogen gebruiken tussen de provider-tags
 
 ```tsx
 // App.tsx
@@ -152,25 +175,29 @@ import { NotifierProvider } from  'loon-react-bulma';
 </div>
 ```
 
-##### 2: gebruik de `useNotifier()`-hook in child-components
+2: gebruik de `useNotifier()`-hook in een **child-component**
 
 ```tsx
 // MyComponent.tsx
 import { useNotifier } from 'loon-react-bulma';
-// ...
-const { notify } = useNotifier();
-const addNotification = () => {
-  notify({
-    type: 'i',
-    content: 'Dit is een notification',
-    onClick: () => console.log('notification clicked!'),
-    dismissAfter: 2500, // dismiss na 2500 ms
-  });
-};
-// ...
-<div>
-  <Button.Primary onClick={() => addNotification()}>Notify!</Button.Primary>
-</div>;
+
+function MyComponent(): JSX.Element {
+  const { notify } = useNotifier();
+  const addNotification = () => {
+    notify({
+      type: 'i',
+      content: 'Dit is een notification',
+      onClick: () => console.log('notification clicked!'),
+      dismissAfter: 2500, // dismiss na 2500 ms
+    });
+  };
+  // ...
+  return (
+    <div>
+      <Button.Primary onClick={() => addNotification()}>Notify!</Button.Primary>
+    </div>
+  );
+}
 ```
 
 Een notificatie heeft de volgende properties nodig:
@@ -181,13 +208,13 @@ Een notificatie heeft de volgende properties nodig:
 - `dismissAfter`: na hoeveel tijd moet de notificatie automatisch verborgen/gesloten worden. Default is 5000ms, gebruik 0 voor een notificatie die **niet** zelf gesloten mag worden.
 - `id`: _(optioneel)_ id van een notificatie, een random int als niet ingevuld.
 
-#### `useNotifier()`
+##### `useNotifier()`
 
 De `useNotifier()`-hook is een custom hook voor het gebruik van de notifier. Deze bevat de functions om dingen met de notifier te doen:
 
-- _notify(n: NotificationItemProps)_: maak een notificatie
-- _remove(nId: number)_: verwijder een notificatie met een `id`.
-- _clear()_: verwijder ALLE notificaties
+- `notify(n: NotificationItemProps)`: maak een notificatie
+- `remove(nId: number)`: verwijder een notificatie met een `id`.
+- `clear()`: verwijder ALLE notificaties
 
 Alleen de functions importeren die je nodig hebt is genoeg
 
@@ -196,17 +223,17 @@ import { useNotifier } from 'loon-react-bulma';
 const { notify, remove, clear } = useNotifier();
 ```
 
-> ### Let op! <a id="notifier-let-op"></a>
+> **Let op!** <a id="notifier-let-op"></a>
 >
 > De `useNotifier()`-hook werkt alleen in componenten die children zijn van de _NotifierProvider_, dus als je de _NotifierProvider_ in `App.tsx` importeert en neerzet, kan je de hook daar **niet** gebruiken.
 
 ## Componenten <a id="components"></a>
 
-#### Layout <a id="layout"></a>
+### Layout <a id="layout"></a>
 
 Er zijn een aantal componenten die vooral van invloed zijn op de layout van een pagina.
 
-### AspectRatio <a id="layout-aspectratio"></a>
+#### AspectRatio <a id="layout-aspectratio"></a>
 
 Een AspectRatio is vooral om te zorgen dat bijvoorbeeld `<iframe>` en andere elementen met een aanpasbare width aan een bepaald formaat voldoen.
 
@@ -225,7 +252,7 @@ Een AspectRatio is vooral om te zorgen dat bijvoorbeeld `<iframe>` en andere ele
 </div>
 ```
 
-### Box <a id="layout-box"></a>
+#### Box <a id="layout-box"></a>
 
 Een Box is een witte container om om andere elementen heen te gebruiken, bijvoorbeeld forms. Ze hebben een beetje padding en een box-shadow. De header, body en footer van een [Modal](#component-modal) zitten in een Box element.
 
@@ -238,7 +265,7 @@ Als je liever geen component gebruikt, maar een `<div>` de class `bulma-box` gee
 </div>
 ```
 
-### Columns <a id="layout-columns"></a>
+#### Columns <a id="layout-columns"></a>
 
 Columns worden gebruikt voor het verdelen van een (deel van het) scherm in kolommen. Columns kunnen ook genest worden. Bij children die niet van het type `<Column.XXX>` zijn, staat er een warning in de console. Deze children worden vervolgens door een `<Column>` gewrapped. Elke **Column** moet direct in een **Columns** element zitten om te werken. Voor de kolommen zijn er verschillende maten:
 
@@ -278,7 +305,7 @@ Als maar **één** van de kolommen een size-modifier heeft (bijvoorbeeld `<Colum
 </div>
 ```
 
-### Container <a id="layout-container"></a>
+#### Container <a id="layout-container"></a>
 
 Een container om content horizontaal te centreren op grotere viewports. De container wordt actief van verschillende breakpoints.
 
@@ -290,7 +317,7 @@ Een container om content horizontaal te centreren op grotere viewports. De conta
 | Container.FullHD | max-width      | max-width        | max-width           | 1344px          |
 | Container.Max\*  | max-width      | max-width        | max-width           | max-width       |
 
-###### (\*) = links & rechts blijft er 32px ruimte als margin over.
+> (\*) = links & rechts blijft er 32px ruimte als margin over.
 
 ```tsx
 <div>
@@ -301,7 +328,7 @@ Een container om content horizontaal te centreren op grotere viewports. De conta
 </div>
 ```
 
-### Content <a id="layout-content"></a>
+#### Content <a id="layout-content"></a>
 
 Content is voor content, waar alleen HTML-tags beschikbaar zijn. Content kan een hoop html-aan:
 `<p>, <ul, <ol>, <dl>, <h1>...<h6>, <blockquote>, <em>, <strong>, <table>, <tr>, <th>, <td>, <sub>, <sup>`
@@ -332,7 +359,7 @@ Deze markers zijn beschikbaar:
 <!-- i, ii, iii-->
 ```
 
-### Hero <a id="layout-hero"></a>
+#### Hero <a id="layout-hero"></a>
 
 Een Hero bevat een aantal buttons aan de bovenkant van de pagina, een titel en een subtitel en navigatie-tabs aan de onderkant van de pagina. Een hero is ook te krijgen in verschillende kleuren. Daar is de `heroColorFor` prop voor.
 Een hero bevat optionele items aan de bovenkant (`Head`) of de onderkant (`Foot`).
@@ -389,7 +416,7 @@ De navigatie kan op 2 manieren worden gemaakt:
 </Hero.Foot>
 ```
 
-### Image <a id="layout-image"></a>
+#### Image <a id="layout-image"></a>
 
 Een afbeelding met een vastgestelde aspect-ratio. Een ratio 'square' kan een grootte hebbeen, de andere ratio's nemen de gehele breedte van de parent in.
 
@@ -401,7 +428,7 @@ Een afbeelding met een vastgestelde aspect-ratio. Een ratio 'square' kan een gro
 </div>
 ```
 
-### Section <a id="layout-section"></a>
+#### Section <a id="layout-section"></a>
 
 Een section is een simpele container om een pagina in stukken te verdelen.
 
@@ -412,7 +439,7 @@ Een section is een simpele container om een pagina in stukken te verdelen.
 </div>
 ```
 
-### ScrollArea <a id="layout-scrollarea"></a>
+#### ScrollArea <a id="layout-scrollarea"></a>
 
 Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-eigenschappen. De elementen worden in een rij of kolom getoont, met optionele wrapping. De overflow is dus scrollbaar, met een optionele 'gap'. De content kan ook aligned worden.
 
@@ -420,7 +447,7 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 - `wrap`: mag de content wrappen? Scrollen is dan niet meer mogelijk, tenzij er een max-height is opgegeven.
 - `align`: aligning van de content
 
-#### Horizontaal:
+##### Horizontaal:
 
 ```tsx
 <ScrollArea.Horizontal gap={{ row: '1em', col: 16 }} wrap={true} alignment="c">
@@ -433,7 +460,7 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 </ScrollArea.Horizontal>
 ```
 
-#### Verticaal:
+##### Verticaal:
 
 ```tsx
 <ScrollArea.Vertical maxHeight={600}>
@@ -446,7 +473,7 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 </ScrollArea.Vertical>
 ```
 
-### Button & ButtonGroup <a id="component-button"></a>
+#### Button & ButtonGroup <a id="component-button"></a>
 
 Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_
 
@@ -467,13 +494,6 @@ De Light, Outlined, LightOutlined en Inverted versies van deze buttons zijn te m
 - LightOutlined: `"light-outlined"` | `"lo"`
 - default: `"default"` | `undefined`
 
-> ### deprecated
->
-> Met de optionele prop `icon` kan er op buttons een [Font Awesome icon](https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free) gezet worden. Dat kan door
->
-> - de class-string op te geven, dus `'fas fa-horse-head'`.
-> - door het object dat mbv React-FontAwsome wordt gemaakt als waarde door te geven.
-
 De `ButtonGroup`-component kan gebruikt worden om buttons te grouperen en de grootte voor buttons in te stellen.
 
 ```tsx
@@ -495,7 +515,7 @@ import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton
 </ButtonGroup>;
 ```
 
-### Calendar <a id="components-calendar"></a>
+#### Calendar <a id="components-calendar"></a>
 
 De Calendar Component toont events in een grid-view. Er zijn 2 verschillende soorten events:
 
@@ -517,7 +537,7 @@ export type BaseEventProps = {
 };
 ```
 
-Op dit moment is er alleen nog een `MonthView`-component.
+Op dit moment zijn er een `MonthView`-component en een `WeekView`-component.
 
 De opties voor het instellen van de calendar zijn:
 
@@ -550,9 +570,7 @@ export type CalendarOptions<T> = {
 };
 ```
 
-##### MonthView <a id="components-calendar-monthview"></a>
-
-Deze component toont een maand + de rest van de weken die maar deels in een maand zitten. De maand wordt getoond in een grid-view.
+De properties zijn bijna allemaal hetzelfde.
 
 - `events`: een array met events.
 - `viewDate`: de datum waarop de maand wordt getoond.
@@ -561,9 +579,13 @@ Deze component toont een maand + de rest van de weken die maar deels in een maan
 - `onDayClick()`: callback die wordt aangeroepen als er op een dag-datum wordt geklikt.
 - `onShowMore()`: function die een JSX.Element opleveret voor hoveren & rechtsklikken op een event.
 
+##### MonthView <a id="components-calendar-monthview"></a>
+
+Deze component toont een maand + de rest van de weken die maar deels in een maand zitten. De maand wordt getoond in een grid-view.
+
 ```tsx
 <>
-  <Calendar.MonthView
+  <Calendar.Month
     events={events}
     viewDate={viewDate}
     options={options}
@@ -574,11 +596,32 @@ Deze component toont een maand + de rest van de weken die maar deels in een maan
 </>
 ```
 
-### DataTable <a id="component-datatable"></a>
+##### WeekView <A id="components-calendar-weekview"></a>
+
+Deze component toont een week. In plaats van een cel per dag werkt deze met cellen per uur per dag.
+
+```tsx
+<>
+  <Calendar.Week
+    events={events}
+    options={{
+      locale: 'de-DE',
+      dayName: 'long',
+      visibleDays: visibleDayNums,
+      monthName: 'long',
+    }}
+    viewDate={viewDate}
+    onEventClick={(evt, clck) => console.log(evt, clck)}
+    onDayClick={(evt, clck) => console.log(evt, clck)}
+  />
+</>
+```
+
+#### DataTable <a id="component-datatable"></a>
 
 Een DataTable is een tabel met een maximaal aantal rijen waarin je kan zoeken en sorteren. Voor een gewone, saaie, normale tabel kan je de [Table](#component-table) gebruiken. Voor re-renderen van de tabel moet de `data`-prop wel state zijn, anders werkt het rerenderen niet. Hetzelfde geld voor de `columns`-prop.
 
-#### Sorteren
+##### Sorteren
 
 Het sorteren is aangepast. Om een column sorteerbaar te maken, moet je een van de onderstaande 4 waarden opgeven:
 
@@ -586,11 +629,10 @@ Het sorteren is aangepast. Om een column sorteerbaar te maken, moet je een van d
 - true: deze kolom is sorteerbaar.
 - `'function'`: sorteer deze kolom met deze `function`.
 
-##### <em>LET OP
-
-Als deze kolom JSX-Elementen bevat, _MOET_ er een sort-function worden opgegeven om wel te kunnen sorteren.</em>
+> **LET OP**
+> Als deze kolom JSX-Elementen bevat, _MOET_ er een sort-function worden opgegeven om wel te kunnen sorteren.</em>
 
-#### Search
+##### Search
 
 Er is een ingebouwde zoekfunctie die _alle_ kolommen doorzoekt voor gefilterede items. Het is ook mogelijk om een _eigen_ zoek-function toe te voegen. Als die is gedefinieerd wordt de default zoek-methode _niet_ gebruikt. Door op de props van de `<DataTable />` de prop `onSearch` aan te vullen met een function, gebruik je je eigen zoekfunctie. De Zoekfunctie ziet er zo uit:
 
@@ -606,16 +648,16 @@ const mySearch = (s: string, users: IUser[]): IUser[] => {
 - _@param_ items: de items waarin gezocht / gefilterd moet worden
 - _@returns_: de gefilterde items
 
-#### Custom classes
+##### Custom classes
 
 Om eigen classes toe te voegen aan rows en aan columns zijn er methodes:
 
 - op de DataTable props zit de `rowClasses` function voor classes op de `<tr>`.
 - op de DataTableColum props zit de `columnClasses` function voor classes op de `<td>`.
   De gebruikte classes kunnen in een globale css file of in een lokaal geïmporteerde file staan (zoals hieronder).
-  > #### LET OP!
-  >
-  > in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
+
+> **LET OP!**
+> in combinatie met `isStriped: {true}` werkt het zetten van `background-color` ALLEEN in combinatie met `!important`. Anders wordt de achtergrondkleur weer overschreven door Bulma.
 
 ```css
 /** datatable.styles.css */
@@ -696,7 +738,7 @@ export function DataTableTab() {
 }
 ```
 
-### Footer <a id="component-footer"></a>
+#### Footer <a id="component-footer"></a>
 
 Een footer staat meestal onderaan de pagina. Er zit een container in die default centered tekst bevat. Deze tekst kan ook links of rechts aligned worden.
 
@@ -710,7 +752,7 @@ Een footer staat meestal onderaan de pagina. Er zit een container in die default
 </div>
 ```
 
-### Icons (Font Awesome) <a id="component-icons"></a>
+#### Icons (Font Awesome) <a id="component-icons"></a>
 
 Icons kunnen gebruikt worden als content op buttons of voor andere dingen. Icons gebruiken de font-awesome icons. Als `icon`-prop kan er een string (font-awesome-icon class) of een react element (FontAwesomeIcon) worden meegegeven.
 
@@ -746,7 +788,34 @@ Daar kan wel meer worden opgegeven. Voor de IconText component wordt ook de kleu
 </p>
 ```
 
-### Kbd & Kbds (Keyboard Key, Keyboard Key group) <a id="component-kbd"></a>
+#### Indicator <a id="component-indicator"></a>
+
+Een `<Indicator>`-component kan gebruikt worden om een badge te tonen op een ander element. De indicator heeft een optionele kleur (default = 'l', 'link') en een optionele positie (default = 'tr', 'top-right'). De posities zijn:
+
+- `tr`: top-right (default)
+- `tl`: top-left
+- `br`: bottom-right
+- `bl`: bottom-left
+- `tc`: top-center
+- `bc`: bottom-center
+- `rc`: right-center
+- `lc`: left-center
+
+Een `<Indicator>` heeft ook een optionele tooltip en een optioneel `label` om binnen de badge een tekst te plaatsen.
+
+```tsx
+<>
+<Indicator color="d" label="100" position="tr" tooltip="100 nieuwe e-mails">
+  <Button.Primary>
+    <Icon icon={faMail}>
+    Email
+  </Button.Primary>
+</Indicator>
+</>
+
+```
+
+#### Kbd & Kbds (Keyboard Key, Keyboard Key group) <a id="component-kbd"></a>
 
 Een `<Kbd>` is de weergave van een Keyboard Key. Dus toon bijvoorbeeld een 'S' als een S op een toetsenbord. Bijvoorbeeld voor het weergeven van hotkeys.
 
@@ -762,7 +831,7 @@ De `<Kbds>`-component gebruikt je om emerdere keyboard-keys bij elkaar te zetten
 </>
 ```
 
-### Link & LinkButton <a id="component-linkbutton"></a>
+#### Link & LinkButton <a id="component-linkbutton"></a>
 
 Link en LinkButton zijn bedoelt om links (`<a>`) en buttons (`<button>`) er, bijvoorbeeld in een tekst, hetzelfde er uit te laten zien. Een Link bevat een url, target etc. die je ook in de `<a>`-tag aantreft, de LinkButton bevat een `onClick()`-methode. Ze zien er wel hetzelfde uit.
 
@@ -775,7 +844,7 @@ Link en LinkButton zijn bedoelt om links (`<a>`) en buttons (`<button>`) er, bij
 </div>
 ```
 
-### Menu (Nieuw) <a id="component-menu-2"></a>
+#### Menu <a id="component-menu-2"></a>
 
 Een menu is een verticale lijst van 'blokjes' met een optioneel label, en een array van items. Deze items kunnen ook weer een lijst van sub-items bevatten.
 De `<Menu />`-tag heeft een `onMenuItemClicked(item: string) => void` function voor als het geselecteerde menu-item wijzigt. Met de prop `initialItem` kan een van de items als default geselecteerd worden.
@@ -819,9 +888,10 @@ Andere elementen worden **niet** gerendered.
 </div>
 ```
 
-### Messages & Notifications <a id="component-messages"></a>
+#### Messages & Notifications <a id="component-messages"></a>
 
-Een message of een notifcatie bevatten een tekst. Messages hebben ook een optionele titel. Er zjn 4 soorten: _Warning_, _Info_, _Success_, _Danger_.
+Een message of een notifcatie bevatten een tekst. Messages hebben ook een optionele titel. Er zjn 6 soorten: _Warning_, _Info_, _Success_, _Danger_, _Link_ & _Primary_. Dus eentje voor elke kleur.
+Messages zijn er ook in 4 maten: `s`, `m`, `l`, `xl`. Die is in te stellen via de `size` property. Default is het `m`, medium.
 
 ```tsx
 <div>
@@ -830,7 +900,7 @@ Een message of een notifcatie bevatten een tekst. Messages hebben ook een option
 </div>
 ```
 
-Een notificatie bevat ook een tekst, maar heeft ook een dimsiss-button. Deze methode is verplicht om toe te voegen.
+Een notificatie bevat ook een tekst, maar heeft ook een dimsiss-button. Deze methode is verplicht om toe te voegen. Voor notificaties is er **geen** `size` of `title` property.
 
 ```tsx
 <div>
@@ -844,7 +914,7 @@ Een notificatie bevat ook een tekst, maar heeft ook een dimsiss-button. Deze met
 </div>
 ```
 
-### Modal <a id="component-modal"></a>
+#### Modal <a id="component-modal"></a>
 
 Een modal is een pop-up window die de achtergrond donker maakt en content weergeeft in een witte 'box'. Een optionele header of footer scrolled niet mee als de body van de modal zo lang is dat er gescrolled moet worden. Met een state-boolean kan het openen & sluiten van de modal geregeld worden.
 
@@ -910,30 +980,33 @@ Een modal heeft ook verschillende sizes. Met de `size`-prop kan deze ingesteld w
   - `'50%'`
   - `'60em'`
 
-### ProgressBar <a id="component-progressbar"></a>
+#### ProgressBar <a id="component-progressbar"></a>
 
 Een progressbar doet precies wat je verwacht.
 
-- 4 maten (small (s), medium (m), large (l) en extralarge (xl)).
-- 4 kleuren (danger (d), succes (s), link (l) en primary (p)). Default = primary
+- 4 maten (small (`s`), medium (`m)`, large (`l`) en extralarge (`xl`)). Default = `m`, medium
+- 6 kleuren (danger (`d`), succes (`s`), warning (`w`), link (`l`), info (`i`) en primary (`p`)). Default = info (`i`)
 - de max value is instelbaar, default = 100.
 
 ```tsx
 <div>
-  <ProgressBar value={50} size="l" color="primary" />
+  <ProgressBar value={50} />
   <ProgressBar color="success" size="m" />
   <ProgressBar max={200} color="d" />
   <ProgressBar value={50} color="l" size="s" />
 </div>
 ```
 
-### TabBar <A id="component-tabbar"></a>
+#### TabBar <A id="component-tabbar"></a>
 
 De TabBar component komt in de plaats van de Tabs component. Deze gaat iets anders om met Tab items dan de oude Tabs-component.
 
 Als er andere items dan die van het type `<TabBarItem>` worden gebruikt, volgt een waarschuwing in de console.
 Een TabBarItem kan vervolgens **alleen** strings of `<Icon>`-componenten bevatten. Deze worden gebruikt o de tab weer te geven.
 
+- `initialTab`: als je alleen de start-tab wil instellen en het daarna niet meer uitmaakt.
+- `activeTab`: voor als je een start-tab wil instellen, maar deze ook wil kunnen wijzigen.
+
 ```tsx
 const [tab, setTab] = useState<string | number>(100);
 // ...
@@ -964,11 +1037,7 @@ const [tab, setTab] = useState<string | number>(100);
 </div>;
 ```
 
-### Table <a id="component-table"></a>
-
-Table nieuwe stijl. TODO: documentatie & implementatie
-
-### SimpleTable <a id="component-simpletable"></a>, voorheen Table
+#### SimpleTable <a id="component-simpletable"></a>, voorheen Table
 
 Een SimpleTable is een gewone tabel, dus geen zoekfunctie of sortering zoals de [DataTable](#component-datatable). Het instellen gaat wel hetzelfde. Enige verschil is dat deze niet fullwidth hoeft te zijn.
 Als de inhoud van een Table kan wijzigen, moet deze data met 'state' worden gebruikt. Anders wordt de inhoud van de tabel niet geüpdate.
@@ -997,7 +1066,51 @@ return (
 );
 ```
 
-### Tag & Tags <a id="component-tags"></a>
+#### Steps <a id="component-steps"></a>
+
+De `<Steps>`-component is bedoeld voor het weergeven van een stappenplan. De `<Steps.Item>`-component wordt gebruikt om de stappen te maken.
+
+##### `<Steps>` heeft de volgende props
+
+- `className`: extra classes voor de steps-container
+- `children`: de `<Steps.Item>` componenten. (REQUIRED)
+- `size`: grootte van de steps (defualt = `m`)
+- `activeStep`: actieve stap;
+- `onChangeStep(step: number) => void`: callback voor het wijzigen van de stap
+- `freeStepChoice`: welke stappen zijn selecteerbaar (default = `disabled`)
+  - `disabled`: alleen linker- en rechter-buurman mogen geselecteerd worden
+  - `allowed`: alle stappen zijn vrij te kiezen
+  - `up`: alleen de stappen rechts zijn vrij te kiezen, links alleen de directe buur
+  - `down`: alleen de stappen links zijn vrij te kiezen, recht alleen de directe buur
+
+##### `<Steps.Item>` heeft de volgende props
+
+- `status`: een status van de stap (default = 'pending')
+  - `pending`: stap nog niet gedaan
+  - `error`: een fout in deze stap
+  - `completed`: deze stap is gedaan
+  - `active`: de actieve stap
+- `title`: een titel voor deze stap
+- `description`: een langere beschrijving van deze stap
+- `marker`: een icoon, nummer of letter voor deze stap
+
+```tsx
+<>
+  <Steps onChangeStep={(stepNr: number) => console.log(stepNr)} freeStepChoice="disabled">
+    <Steps.Item title="Step 1" marker={1} />
+    <Steps.Item title="" marker={<Icon icon={faFlask} />} />
+    <Steps.Item title="Step 2" details="dit zijn de details voor deze stap" />
+    <Steps.Item title="" marker={<Icon icon={faBomb} />} status="error" />
+    <Steps.Item
+      title="Step 3"
+      marker={(status) => (status == 'pending' ? <Icon icon={faFlag} /> : <Icon icon={faFire} />)}
+    />
+    <Steps.Item title="Step 4" marker="A" />
+  </Steps>
+</>
+```
+
+#### Tag & Tags <a id="component-tags"></a>
 
 Een `<Tag>` is een klein inline elementje om overal te kunnen stoppen. Tags kunnen een optionele sluit-knop bevatten
 De `<Tags>` component kan gebruikt worden om meerdere tags te groeperen. Dan kunnen ze samengeplakt worden, de grootte van alle tags of de alignment kan dan ingesteld worden. Als er een ander element dan een `<Tag>` gebruikt wordt in de `<Tags>`-component, wordt daarover gewaarschuwd in de console.
@@ -1037,7 +1150,61 @@ Om twee tags als 1 tag te laten zien, kan je de `merged` prop op de `<Tags>`-com
 </Tags>
 ```
 
-### Titles & Subtitles <a id="component-titles"></a>
+#### Timeline <a id="component-timeline"></a>
+
+De `<TimeLine>`-component kan gebruikt worden om een verticale tijdlijn te maken. Een TimeLine bevat 2 verschillende items: **points** of **items**.
+
+`<TimeLine>` component heeft de volgende props:
+
+- `alignment`: positie: `l`, `r`, of `c`. (default = `l`). Met `c` verschijnen de items afwisselend links of rechts van de lijn.
+- `className`: extra classes voor op de timeline-container
+- `children`: de content van de timeline, dus `<TimeLine.Point>`'s en `<TimeLine.Item>`'s
+
+##### `<TimeLine.Point>` component
+
+De `<TimeLine.Point>`-component is een punt met een titel op de tijdlijn die goed zichtbaar moet zijn, bijvoorbeeld een jaarovergang. Of een ander soort titel
+
+- `children`: Content van dit punt
+- `color`: kleur van dit punt (default = `light`, grijs)
+- `size`: de grotte van het punt (default = `s`, small)
+- `tooltip`: een tooltip voor het punt.
+
+##### `<TimeLine.Item>` component
+
+De `<TimeLine.Item>`-component geeft een item op de tijdlijn aan. Een item heeft een heading (of titel) en een markeerpunt op de lijn. Dit markeerpunt kan worden aangepast, anders is het een grijze cirkel. De content van het item bevindt zich in de children van deze component.
+
+- `heading`: de titel van het item (bijvoorbeeld een datum)
+- `children`: de content van het item. Dit kan gewoon HTML zijn.
+- `marker`: een object om een icoon of een kleur mee door te geven. Deze prop bevat 2 props:
+  - `icon`: een icon (string of Font Awesome Icon Prop) voor de markeerstip
+  - `color`: de kleur van de markeerstip (default = undefined, een grijze cirkel)
+
+```tsx
+<>
+  <TimeLine>
+    <TimeLine.Point>Start</TimeLine.Point>
+    <TimeLine.Point color="l">2019</TimeLine.Point>
+    <TimeLine.Item heading="Maart 2019">Oh boi oh boi oh boi oh boi</TimeLine.Item>
+    <TimeLine.Item marker={{ color: 's' }} heading="November 2019">
+      Oompa Loompa Dooba die dee.
+    </TimeLine.Item>
+
+    <TimeLine.Point size="m">2020</TimeLine.Point>
+    <TimeLine.Item marker={{ icon: faFlask, color: 's' }} heading="August 2020">
+      Whoop sie doop sie dooooooop
+    </TimeLine.Item>
+    <TimeLine.Item marker={{ icon: 'fas fa-', color: 's' }} heading="December 2020">
+      <p>Bibbity Boppity Boo</p>
+    </TimeLine.Item>
+
+    <TimeLine.Point color="d" size="l">
+      End
+    </TimeLine.Point>
+  </TimeLine>
+</>
+```
+
+#### Titles & Subtitles <a id="component-titles"></a>
 
 Een verzameling van h1...h6 tags. Er zijn drie verschillende componenten om [Bulma Titles](https://bulma.io/documentation/elements/title/) te gebruiken.
 
@@ -1068,9 +1235,9 @@ Allemaal hebben ze 2 waarden die isntelbaar zijn voor Sizes: _headingSize_ en _b
 </div>
 ```
 
-## ToggleBar <a id="component-toggles"></a>
+#### ToggleBar <a id="component-toggles"></a>
 
-De ToggleBar component toont een ritje aan elkaar vastgemaakte knoppen. . De ToggleBar kan alleen maar `<ToggleBar.Item>` of `<ToggleBar.OnOffItem>` bevatten. Bij andere items wordt een warning geprint in de console en deze andere items worden **niet** gerendered.
+De ToggleBar component toont een ritje aan elkaar vastgemaakte knoppen. De ToggleBar kan alleen maar `<ToggleBar.Item>` of `<ToggleBar.OnOffItem>` bevatten. Bij andere items wordt een warning geprint in de console en deze andere items worden **niet** gerendered.
 
 De ToggleBar heeft de volgende props:
 
@@ -1083,7 +1250,7 @@ De ToggleBar heeft de volgende props:
 - `onColor`: ColorProp voor de 'on'-status (default 's' (success, groen))
 - `offColor`: ColorProp voor de 'off'-status (default 'd' (danger, rood))
 
-#### Common props Toggle Items
+##### Common props Toggle Items
 
 Er zijn een paar props op de `Item` en de `OnOffItem` hetzelfde.
 
@@ -1091,7 +1258,7 @@ Er zijn een paar props op de `Item` en de `OnOffItem` hetzelfde.
 - `tooltip`: tooltip voor een toggle-item
 - `disabled`: disable een toggle-item`
 
-### ToggleItem
+##### ToggleItem
 
 ToggleItems zijn meerdere knopjes op de bar, waarvan er maar 1 de status 'on' heeft. De andere buttons hebben dan de 'off'-state.
 
@@ -1107,7 +1274,7 @@ De `onToggle()`-callback wordt aangeroepen als de getogglede knop wordt verander
 </div>
 ```
 
-### OnOffToggleItem
+##### OnOffToggleItem
 
 OnOffToggleItems zijn knopjes die apart on/off te toggelen zijn. Elke knop heeft een eigen onToggle-function die aangeroepen wordt als op de knop wordt gedrukt.
 
@@ -1157,24 +1324,25 @@ Ze hebben 2 props meer dan de ToggleItems:
 </div>
 ```
 
-## Form & inputs <a id="form"></a>
+### Form & inputs <a id="form"></a>
 
 De library bevat componenten om als losse inputs, selects, ranges of checkboxes te gebruiken of om een form helemaal samen te stellen. Elke input heeft een validatie-object met wat standaard validatie-opties, een optionele methode om een waarde te evalueren (`onValidate()`). De `name` en `id` attributen zijn verplicht. Als voor een input geen `label` is opgegeven, wordt de `name` daarvoor gebruikt.
 
 - [Input Types](#form-input)
-  - _TextInput_: invoeren van tekst, urls, etc.
-  - _PasswordInput_: invoeren van een wachtwoord, met puntjes ipv karakters
-  - _EmailInput_: invoeren van een emailadres
-  - _NumberInput_: invoeren van een nummer (alleen numerieke karakters)
-  - _ColorInput_: invoeren van een kleur (in hex-formaat, altijd # + 6 hex-values)
-  - _HiddenInput_: niet-bewerkbare onzichtbare input die WEL belangrijk is.
-  - _DateInput_: invoeren van een datum
-  - _TimeInput_: invoeren van een tijd
-  - _DateTimeInput_: invoeren van een datum & een tijd als combi
-  - _TextAreaInput_: invoer van een tekst
-  - _FileInput_: invoer van een file
-  - _BasicInput_: zelf in te stellen input
+  - `<TextInput>`: invoeren van tekst, urls, etc.
+  - `<PasswordInput>`: invoeren van een wachtwoord, met puntjes ipv karakters
+  - `<EmailInput>`: invoeren van een emailadres
+  - `<NumberInput>`: invoeren van een nummer (alleen numerieke karakters)
+  - `<ColorInput>`: invoeren van een kleur (in hex-formaat, altijd # + 6 hex-values)
+  - `<HiddenInput>`: niet-bewerkbare onzichtbare input die WEL belangrijk is.
+  - `<DateInput>`: invoeren van een datum
+  - `<TimeInput>`: invoeren van een tijd
+  - `<DateTimeInput>`: invoeren van een datum & een tijd als combi
+  - `<TextAreaInput>`: invoer van een tekst
+  - `<FileInput>`: invoer van een file
+  - `<BasicInput>`: zelf in te stellen input
 - [Checkbox](#form-checkbox)
+- [RadioButtons](#form-radio)
 - [Ranges](#form-ranges)
   - _Range_: een getal selecteren
   - _MultiRange_: 2 getallen selecteren (een range)
@@ -1183,7 +1351,7 @@ De library bevat componenten om als losse inputs, selects, ranges of checkboxes
 - [Form](#form-form)
 - [Form-builder](#form-component)
 
-### Input Types<a id="form-input"></a>
+#### Input Types<a id="form-input"></a>
 
 Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zijn een aantal props die op alle inputs voorkomen:
 
@@ -1213,27 +1381,8 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 - `direction`: orientatie van de input (horizontaal of vertical, default = 'horizontal')
 - `size`: de grootte van een input
 
-- Tekst:
-  - **TextInput:** invoeren van tekst, urls, etc.
-  - **EmailInput:** invoeren van een emailadres. Valideert het emailadres met een regex (overschrijfbaar mbv validatie-object).
-  - **PasswordInput:** invoeren van een wachtwoord.
-  - **TextAreaInput:** een textarea, werkt in tegenstelling tot de `<textarea></textarea>`-tag _niet_ met children. De waarde kan gezet worden met de `value`-attribuut.
-- Getallen:
-  - **NumberInput:** invoer van een nummer
-  - **Range:** invoer van een nummer, maar dan met een [range](#form-ranges)
-  - **MultiRange:** invoer van twee nummers, met behulp van een [range](#form-ranges)
-- Datum / Tijd
-  - **DateInput:** invoer van ene datum. De value kan als `string` of `Date` worden opgegeven
-  - **TimeInput:** invoer van een tijdstip. De value kan als `string` of `Date` worden opgegeven
-  - **DateTimeInput:** invoer-combi voor een datum & tijd. De value kan als `string` of `Date` worden opgegeven
-- Overig
-  - **BasicInput** een input om helemaal zelf te kunnen instellen
-  - **ColorInput** een invoer voor een kleur. Altijd een hex-waarde, de echte selectie is afhankelijk van de browser
-  - **HiddenInput** een invoer die wel belangrijk is, maar niet gezien en niet bewerkt mag worden. Heeft vanzelfsprekend geen styling
-  - **FileInput** invoer van een (of meer) files
-
 ```tsx
-<div>
+<>
   <BasicInput name="something" type="text">
   <TextInput type="text" name="TextInput" id="textinput" validatie={{required: true}}/>
   <EmailInput name="EmailInput" id="emailinput" validatie={{required: true}}/>
@@ -1251,12 +1400,21 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 
   <HiddenInput name="HiddenInput" value="bazinga!" id="hiddenInput" required={true}/>
 
-</div>
+</>
 ```
 
-### CheckBox <a id="form-checkbox"></a>
+#### CheckBox <a id="form-checkbox"></a>
+
+Een checkbox is een checkbox en werkt als een checkbox. De styling is een beetje aangepast van de standaard checkbox.
+Er zijn nu sizes (`s`, `m` (default), `l` en `xl`) en colors (`l` (default), `w`, `d`, `s`, `i`, `p`).
+Deze zijn in te stellen met de `size` en de `color` prop.
 
-> Wat anders is aan deze input, is dat de `size`-prop geen effect heeft. Er is maar 1 grootte.
+Ook is er een `styling`-prop. Met deze kan je wat styling aanpassen
+
+- `noborder`: de randen van de checkbox zijn onzichtbaar
+- `colored`: de checkbox zelf heeft de achtergrondkleur uit de `color`-prop
+- `blocky`: de checkbox EN het label hebben dezelfde achtergrondkleur
+- `rounded`: afgeronde hoeken in plaats van vierkante hoeken op de checkbox.
 
 ```tsx
 <div>
@@ -1264,9 +1422,74 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 </div>
 ```
 
-### Ranges <a id="form-ranges"></a>
+#### RadioButtons <a id="form-radio"></a>
+
+Radiobuttons kan je maken met de `<RadioGroup>`-component. De `<RadioGroup>` zelf is een container voor de `<RadioGroup.Item>`-buttons omeen radio-button-group te maken.
+
+Een `<RadioGroup.Item>` component heeft de volgende props:
+
+- `value`: de waarde van de radiobutton. Als er geen children zijn, wordt de value getoond als tekst.
+- `title?`: tooltip
+- `children?`: een string of JSX-element die werkt als label van de radio
+- `disabled?`: is dit item disabled of niet?
+- `id?`: een id voor de radio-input
+
+Er zijn nu sizes (`s`, `m` (default), `l` en `xl`) en colors (`l` (default), `w`, `d`, `s`, `i`, `p`).
+Deze zijn in te stellen met de `size` en de `color` prop.
+
+Ook is er een `styling`-prop. Met deze kan je wat styling aanpassen
+
+- `noborder`: de randen van de checkbox zijn onzichtbaar
+- `colored`: de checkbox zelf heeft de achtergrondkleur uit de `color`-prop
+- `blocky`: de checkbox EN het label hebben dezelfde achtergrondkleur
+- `rounded`: afgeronde hoeken in plaats van vierkante hoeken op de checkbox.
+
+> **Raar:**
+> de waarde `rounded` voor de `styling`-prop slaat nergens op. Maar ze maken gebruik van dezelfde Type als die van checkboxes, daarom zit hij er wel.
+
+```tsx
+<>
+  <RadioGroup name="radio-1" onValueChanged={(v) => console.log('woohoo!', v)}>
+    <RadioGroup.Item value="Ein">Ein</RadioGroup.Item>
+    <RadioGroup.Item value="Zwei" styling="noborder">
+      Zwei
+    </RadioGroup.Item>
+    <RadioGroup.Item value="Polizei" color="l" size="xl">
+      <span>Polizei!</span>
+    </RadioGroup.Item>
+    <RadioGroup.Item value="Drei">Drei</RadioGroup.Item>
+    <RadioGroup.Item value="4">Vier</RadioGroup.Item>
+    <RadioGroup.Item disabled value="Offizier">
+      Offizier!
+    </RadioGroup.Item>
+  </RadioGroup>
+</>
+```
+
+RadioButtons kunnen ook alleenstaand gebruikt worden. Deze component heet `<Radio>`. Deze component heeft dezelfde props als de `<RadioGroup.Item>`-component en nog drie extra.
+
+- `setter: (val: string) => void`: function om de waarde te setten, met `React.useState()`
+- `selectedItem?`: het geselecteerde Radio-item
+- `name`: in plaats van de groep, moet je zelf de name van de radio-input opgeven
+
+```tsx
+const [radio, setRadio] = React.useState('Sieben');
+
+<>
+  <Radio selectedItem={radio} value="Fünf" name="radio-2" setter={setRadio} color="d"/>
+  <Radio selectedItem={radio} value="Sechs" name="radio-2" setter={setRadio} disabled size="xl"/>
+  <Radio selectedItem={radio} value="Alte Hex" name="radio-2" setter={setRadio} styling="noborder"/>
+  <Radio selectedItem={radio} value="Sieben" name="radio-2" setter={setRadio} />
+  <Radio selectedItem={radio} value="Acht" name="radio-2" setter={setRadio} />
+  <Radio selectedItem={radio} value="Gute Nacht" name="radio-2" setter={setRadio}>
+    Good Night!
+  </Radio>
+<>
+```
+
+#### Ranges <a id="form-ranges"></a>
 
-Een Range of MultiRange is een component om op een andere manier een nummer te selecteren. In plaats van invullen, selecteer je deze op een schaal. Er zijn 2 soorten ranges: **Range** en **MultiRange**. Een Range werkt hetzelfde als een `<input type="number">`, het resultaat is ook een number. Een MultiRange werkt iets anders: het resultaat is een `number[]`, bestaand uit 2 getallen. Deze getallen staan altijd in dezelfde volgorde, dus als je twee begin-waardes opgeeft, komen die er in dezelfde volgorde uit. _Dus niet gesorteerd van klein naar groot_.
+Een `<Range>` of `<MultiRange>` is een component om op een andere manier een nummer te selecteren. In plaats van invullen, selecteer je deze op een schaal. Er zijn 2 soorten ranges: **Range** en **MultiRange**. Een Range werkt hetzelfde als een `<input type="number">`, het resultaat is ook een number. Een MultiRange werkt iets anders: het resultaat is een `number[]`, bestaand uit 2 getallen. Deze getallen staan altijd in dezelfde volgorde, dus als je twee begin-waardes opgeeft, komen die er in dezelfde volgorde uit. _Dus niet gesorteerd van klein naar groot_.
 
 Als er in het validatie geen minimale of maximale waarde te vinden is, worden standaard `0` en `100` gebruikt.
 
@@ -1277,7 +1500,7 @@ Als er in het validatie geen minimale of maximale waarde te vinden is, worden st
 </div>
 ```
 
-### Select <a id="form-select"></a>
+#### Select <a id="form-select"></a>
 
 Een select is een lijstje met opties waaruit je er een kan selecteren. De opties van een select kunnen uit 3 types bestaan:
 
@@ -1286,8 +1509,6 @@ Een select is een lijstje met opties waaruit je er een kan selecteren. De opties
 - **SelectOptionGroupType[]:** een gegroupeerde option array voor `<optgroup>` tags. Kan daardoor ook disablen.
   Om meerdere values te selecteren in een select, kan je een [MultiSelect](#form-multiselect) gebruiken.
 
-##### een select met string[]
-
 ```tsx
 <div>
 {/* Een select met string-options, deze options zijn de value EN de tekst */}
@@ -1323,7 +1544,7 @@ Een select is een lijstje met opties waaruit je er een kan selecteren. De opties
 </div>
 ```
 
-### Multi Select <a id="form-multiselect"> </a>
+#### Multi Select <a id="form-multiselect"> </a>
 
 Een Multiselect werkt bijna hetzelfde als een select. Dezelfde type options worden ondersteund, alleen is het mogelijk om er meerdere te selecteren met `ctrl-click`, `cmd-click` of `shift-click`.
 
@@ -1390,11 +1611,11 @@ Een Multiselect werkt bijna hetzelfde als een select. Dezelfde type options word
 </div>
 ```
 
-### Validatie <a id="form-validatie"></a>
+#### Validatie <a id="form-validatie"></a>
 
 Elke input, range, select of checkbox heeft een optioneel validatie-object. Daarop zitten een aantal, ook optionele, properties en een methode. Die worden gebruikt om wat regels en validatie toe te voegen aan die input. Als een value van een input niet voldoet aan de validatie-regels, wordt deze rood omlijnt.
 
-##### Validatie-Type
+###### Validatie-Type
 
 ```ts
 export type FormValidatie = {
@@ -1417,7 +1638,7 @@ export type FormValidatie = {
 - `pattern`: voor tekst-inputs: voldoet de waarde aan deze regex. In EmailInput overschrijft deze de default e-mail-validatie regex.
 - `onValidate()`: een eigen validatie-methode (als gewenst). Wordt aangeroepen als het veld wordt gevalideerd. De methode met een lege string als _geldig_ of een foutmelding als _ongeldig_ returnen.
 
-### Form <a id="form-form"></a>
+#### Form <a id="form-form"></a>
 
 De `<Form>`-component is een wrapper voor een gewone `<form>`-tag. Hij bevat (als het goed is) alle normale attributen die ook bij een gewone `<form>`-tag te vinden zijn. Deze component maakt het mogelijk om voor alle inputs in het form de `direction`- en de `size`-attributen in te stellen. Hij exporteert de inputs nogmaals in de vorm `<Form.XXX>` (zie onder).
 
@@ -1435,6 +1656,7 @@ De `<Form>`-component is een wrapper voor een gewone `<form>`-tag. Hij bevat (al
 - `<Form.Select>`: een input met type `select`, zelfde als `<Select>`.
 - `<Form.MultiSelect>`: een input met type `select`, zelfde als `<MultiSelect>`.
 - `<Form.Checkbox>`: een input met type `checkbox`, zelfde als `<Checkbox>`.
+- `<Form.RadioGroup>`: een input met type `radio`, zelfde als `<RadioGroup>`.
 - `<Form.Date>`: een input met type `date`, zelfde als `<DateInput>`.
 - `<Form.Time>`: een input met type `time`, zelfde als `<TimeInput>`.
 - `<Form.DateTime>`: een input met type `datetime-local`, zelfde als `<DateTimeInput>`.
@@ -1443,12 +1665,10 @@ De `<Form>`-component is een wrapper voor een gewone `<form>`-tag. Hij bevat (al
 
 ##### Andere componenten binnen `<Form>`
 
-- `<Form.Line>` Een wrapper voor meerdere inputs, om deze op een lijn te kunnen zetten (achter elkaar). Dan moet je \__wel_ zelf de direction instellen als die afwijkt van de normale form-direction.
+- `<Form.Line>` Een wrapper voor meerdere inputs, om deze op een lijn te kunnen zetten (achter elkaar). Dan moet je _wel_ zelf de direction instellen als die afwijkt van de normale form-direction.
 - `Form.Space`: een container voor vrije ruimte. Hier kan je helemaal losgaan met eigen componenten. Deze container houdt zich wel aan de form-direction voor de positie.
 - `<Form.Buttons`: een container voor de buttons. Werkt hetzelfde als `<ButtonGroup>`. Voor bijvoorbeeld de submit-button voor een form.
 
-##### Voorbeeld
-
 ```tsx
 <>
   <Form direction={direction} size={size}>
@@ -1476,7 +1696,7 @@ De `<Form>`-component is een wrapper voor een gewone `<form>`-tag. Hij bevat (al
 </>
 ```
 
-### Form-Builder <a id="form-component"></a>
+#### Form-Builder <a id="form-component"></a>
 
 Een **Form** is ook beschikbaar als component. Om te werken heeft die nodig:
 
@@ -1510,7 +1730,7 @@ Het resultaat van deze form komt via de `onSubmit()` methode naar buiten. Als de
 </div>
 ```
 
-##### Resultaat van `method="post"` en `method="get"`
+###### Resultaat van `method="post"` en `method="get"`
 
 ```ts
 // post
@@ -1525,6 +1745,168 @@ Het resultaat van deze form komt via de `onSubmit()` methode naar buiten. Als de
 ('Token=Bazinga%21&Naam=Brad+Wurst&Email=brad%40wurst.com&Wachtwoord=123123&Leeftijd=31');
 ```
 
+## Hooks <a id="hooks"></a>
+
+- [Hooks](#hooks)
+  - [useClipboard](#hooks-use-clipboard)
+  - [useDebouncedValue](#hooks-use-debounced-value)
+  - [useHotkeys](#hooks-use-hotkeys)
+  - [useToggle & useBoolToggle](#hooks-use-toggle)
+- [Publiceren](#publiceren)
+
+Er zijn een paar hooks in deze library. Geen idee of deze hooks nuttig zijn, maar je kan ze gebruiken.
+
+#### useClipboard <a id="hooks-use-clipboard"></a>
+
+De `useClibboard()`-hook kan je gebruiken om een waarde te kopiëren om die vervolgens ergens te kunnen plakken. Het object van deze hook heeft 4 properties:
+
+- `copy`: een function om een waarde te kopiëren naar het clipboard
+- `copied`: een boolean die `true` is als een waarde minder dan de timeout (default 2000ms) geleden gekopieerd is
+- `reset`: een function om de timout te 'clearen' en `copied` te resetten
+- `error`: bevat een `Error` object als er iets is fout gegaan
+
+```tsx
+function UseClipboardExample(props: {}) {
+  const clipboard = useClipboard({timeout: 500});
+
+  const handleClick = () => {
+    clipboard.copy('Hello World!');
+    if(clipboard.error) console.error('error on copying', clipboard.error);
+
+    clipboard.reset();
+  }
+
+  return <Button onClick={handleClick}>
+    {clipboard.copied ? 'Paste it somewhere' ? 'Copy something'}
+  </Button>
+
+}
+```
+
+#### useDebouncedValue <a id="hooks-use-debounced-value"></a>
+
+De `useDebouncedValue()`-hook kan je gebruiken om een waarde vertraagd aan te passen. Dat kan handig zijn bij zware operaties gebaseed op states. Bijvoorbeeld het verzenden van een zoek-request of het opzoeken van een item in een lange lijst.
+
+De parameters zijn:
+
+- `value`: de bronwaarde die vertraagd bijgewerkt moet worden.
+- `options`: opties voor de hook. Op dit moment zijn dat deze defaults:
+
+```ts
+options: useDebounceHookOptions = {
+  leading: true,
+  delay: 500,
+};
+```
+
+Deze hook geeft een tuple (net zoals bij `React.useState()`) met 2 objecten terug:
+
+- `debounced`, type `T` de waarde voor NA het debouncen
+- `cancel`, type `() => void` de functie om de debouncen te stoppen. De waarde van `debounced` wordt dan niet geupdate.
+
+> De `useDebounce()`-hook kan optioneel een type meekrijgen voor de waarde van `debounced`. Dit is optioneel
+
+```tsx
+function UseDebouncedValueDemo() {
+  const [value, setValue] = useState('');
+  const [debounced, cancel] = useDebouncedValue<string>(value, { delay: 2000 });
+
+  return (
+    <>
+      <Input
+        label="debounce value"
+        name="debouncevalue"
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      />
+      <Button onClick={cancel} size="lg" style={{ marginLeft: 15 }}>
+        Cancel
+      </Button>
+
+      <p>Value: {value}</p>
+      <p>Debounced value: {debounced}</p>
+    </>
+  );
+}
+```
+
+#### useHotkeys <a id="hooks-use-hotkeys"></a>
+
+De `useHotkeys()`-hook luistert naar toetsen-combinaties op het `document`-element. De hook zelf werkt **alleen** op dat element. Voor andere elementen moet je de `getHotkeyHandler()` gebruiken, die samen met de `useHotkeys()`-hook wordt geëxporteerd.
+
+`useHotkeys()` heeft 1 parameters. Deze bestaat uit een array van toets-combinaties en handler-tuples (zie `HotkeyItem`). Deze tuples bestaan uit 2 delen:
+
+- `hotkey`: hotkey-string, als `ctrl+E`, `shift+alt+L`, `mod+S`
+- `handler` functie die aangeroepen moet worden als de keys zijn gebruikt.
+
+> **Formats voor de hotkeys**
+>
+> - `mod+S`: op macOS Cmd+S, op Windows Ctrl+S
+> - `ctrl+shift+X`: meerdere modifiers
+> - `ctrl + shift + X + Y`: spaties zijn toegestaan
+> - `ArrowLeft`: speciale toetsen volgens Key values van keyboard events (<a href="https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values" target="_blank">MDN</a>)
+
+##### hotkeys op een ander element
+
+Als een toetsen-combi bij een specifiek element hoort, dan moet je zelf de event-listener maken. Daarvoor is de `getHotkeyHandler()`-function. Deze werkt precies hetzelfde als de hook, maar is geen echte hook.
+
+```tsx
+function HotkeysExample() {
+  // useHotkeys alleen op het document-element
+  useHotkeys([
+    ['mod+J', () => console.log('Toggle color scheme')],
+    ['ctrl+K', () => console.log('Trigger search')],
+    ['alt+mod+shift+X', () => console.log('Rick roll')],
+  ]);
+
+  // met getHotkeyHandler kunnen hotkeys op een specifiek element gezet worden
+  return (
+    <TextInput
+      placeholder="Your message"
+      label="Press ⌘+Enter or Ctrl+Enter when input has focus to send message"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onKeyDown={getHotkeyHandler([
+        ['mod+Enter', () => console.log('submit')],
+        ['mod+S', () => console.log('save')],
+      ])}
+    />
+  );
+}
+```
+
+#### useToggle & useBoolToggle <a id="hooks-use-toggle"></a>
+
+De `useToggle()`- en `useBoolToggle()`-hooks kunnen gebruikt worden voor het togglen tussen twee waarden. De `useBoolToggle()`-hook is een voorgekauwde versie van de `useToggle()`-hook met een boolean als bronwaarde. Aan de `useToggle()` kan een type worden meegegeven.
+
+de parameters voor de `useToggle()`-hook zijn:
+
+- `initialState`: type `T`: de beginwaarde van de toggle
+- `options`: type `[T, T]`: de waarden waartussen getoggled wordt.
+
+Bij de `useBoolToggle()`-hook is er maar 1 _optionele_ parameter:`initialValue`. Deze is default `false`.
+
+Van beide hooks wordt een tuple (net als `React.useState()`) returned met 2 objecten:
+
+- `state`: de huidige status van de toggle
+- `toggle()`: een functie om te togglen.
+
+bij de `toggle()` function is het mogelijk om een bepaalde status te forceren, door de waarde als parameter mee te geven.
+
+```tsx
+function ToggleDemo() {
+  const [isVisible, toggleVisible] = useBoolToggle(); // start op isVisible = false
+  const [color, toggleColor] = useToggle('red', ['red', 'blue']); // start op color = red, toggle tussen red & blue
+  const [dier, toggleDier] = useToggle<Dier>(krokodil, [krokodil, alligator]]); // toggle met Type
+
+  return <>
+    <Button.Primary onClick={() => toggleVsible()}>Visible</Button.Primary>
+    <Button.Primary onClick={() => toggleColor()}>Color</Button.Primary>
+    <Button.Primary onClick={() => toggleDier()}>Dier</Button.Primary>
+  </>
+}
+```
+
 ## Publiceren <a id="publiceren"></a>
 
 Onder `scripts` in de `package.json` file staan `release` scripts klaar. Dit script publiceerd een nieuwe versie naar de npm-registry voor de tag `yXXXX` die hoort bij het jaar waar de geselecteerde git-branch bijhoort. Dus bijvoorbeeld voor 2020