loon-bulma-react 2022.2.4 → 2022.3.2

package/README.md

@@ -1,6 +1,6 @@
 # loon-bulma-react
 
-[Bulma](https://bulma.io/) & [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
+## [Bulma](https://bulma.io/) & [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
 - [Installatie](#installatie)
 - [Gebruik](#gebruik)
@@ -25,14 +25,15 @@
   - [Footer](#component-footer)
   - [Icons (FontAwesome)](#component-icons)
   - [Link & LinkButon](#component-linkbutton)
-  - [Menu](#component-menu)
+  - [Menu](#component-menu-2)
   - [Messages & Notificaties](#component-messages)
   - [Modal](#component-modal)
   - [ProgressBars](#component-progressbar)
-  - [Table](#component-table)
-  - [Tabs](#component-tabs)
-  - [Tag](#component-tags)
+  - [TabBar](#component-tabbar) (Nieuw, ipv Tabs)
+  - [SimpleTable](#component-simpletable) (Voorheen Table)
+  - [Tag & Tags](#component-tags)
   - [Titles & Subtitles](#component-titles)
+  - [ToggleBar](#component-toggles)
   - [Form & Inputs](#form)
     - [Input Types](#form-input)
       - TextInput
@@ -69,7 +70,7 @@ npm install --save bulma
 
 ### Voor een versie die hoort bij een bepaald jaar (Bijvoorbeeld in Loon-2021).
 
-Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. Dat is omdat alleen een jaartal geen geldige tag is.
+Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.
 
 ```bash
 npm install --save loon-bulma-react@y2021
@@ -122,6 +123,10 @@ function MyComponent(props) {
 }
 ```
 
+> ### Bulma-dingetje
+>
+> Er is een ding in Bulma dat hier anders gaat dan in Bulma. Voor de `SizeProp`maken wij gebruik van s, m, l en xl. In Bulma bestaan deze sizes deels, maar heten ze small, normal / default, medium en large. Daarom komt het voor dat een size='xl' als class een 'large' krijgt en een size='l' als class 'medium'.
+
 ## Notifier <a id="notifier"></a>
 
 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.
@@ -231,32 +236,41 @@ Als je liever geen component gebruikt, maar een `<div>` de class `bulma-box` gee
 
 ### 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. Elke **Column** moet direct in een **Columns** element zitten om te werken. Voor de kolommen zijn er verschillende maten:
+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:
 
 - Default:
   - alle kolommen zijn even groot OF
-  - met _isNarrow:true_ deze kolom neemt zo min mogelijk ruimte in, de rest vult de overige ruimte op.
+  - met de prop `_isNarrow: true_` deze kolom neemt zo min mogelijk ruimte in, de rest vult de overige ruimte op.
 - Verdelen in stukken
-  - van 2 (Half),
-  - van 3 (Thirds),
-  - van 4 (Quarters),
-  - van 5 (Fifths)
-  - van 12 (Is1, Is2, ..., Is12)
+  - volledige breedte (Full) `<Column.Full>`
+  - van 2 (Half), `<Column.Half>`
+  - van 3 (Thirds), `<Column.Thirds.One>`
+  - van 4 (Quarters),`<Column.Quarters.Two>`
+  - van 5 (Fifths) `<Column.Fifths.Three>`
+  - van 12 (Twelves) `<Column.Twelves.One>`, `<Column.Twelves.Seven>`
+
+Als maar **één** van de kolommen een size-modifier heeft (bijvoorbeeld `<Column.Twelves.Seven>`) en andere kolommen zijn gewone `<Column>` elementen, dan nemen deze kolommen de overige ruimte in **nadat** de `is-7` kolom zijn ruimte heeft ingenomen.
 
 ```tsx
 <div>
-<Columns>
-  <Column.Default isNarrow={true}>
-    Menu or something
-  </Column.Default>
-  <Column.Default>
-    <Columns>
-      <Column.OneQuarter>Column  1/4</Column.OneQuarter>
-      <Column.Half>Column 1/2</Column.Half>
-      <Column.OneQuarter>Column 1/4</Column.OneQuarter>
-    </Columns>
-  </Column.Default>
-</Coumns>
+  <Columns>
+    <Column isNarrow>Menu or something</Column>
+    <Column>
+      <Columns>
+        <Column.Quarters.One>Column 1/4</Column.Quarters.One>
+        <Column.Half>Column 1/2</Column.Half>
+        <Column.Quarters.One>Column 1/4</Column.Quarters.One>
+      </Columns>
+    </Column.Default>
+  </Columns>
+
+  <Columns>
+    <Column.Twelves.Seven>Takes up 7/12th of width </Column.Twelves.Seven>
+    {/* These columns take 5/12th of the available rest-space */}
+    <Column></Column>
+    <Column></Column>
+  </Columns>
+
 </div>
 ```
 
@@ -317,53 +331,58 @@ Deze markers zijn beschikbaar:
 ### 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 een optionele array van top-items:
+Een hero bevat optionele items aan de bovenkant (`Head`) of de onderkant (`Foot`).
 
-```ts
-const headItems = [
-  {
-    txt: 'Bulma',
-    action: (e: any) => console.log('Bulma', e),
-    tooltip: 'Bulma website',
-  },
-  {
-    txt: 'React',
-    action: (e: any) => console.log('React', e),
-    tooltip: 'React website',
-  },
-  {
-    txt: 'NodeJS',
-    action: (e: any) => console.log('NodeJS', e),
-    tooltip: 'NodeJS website',
-  },
-];
+- `Head`: `<Hero.Head>`
+  - `<Hero.Head.Button>`: een Button aan de bovenkant van de hero
+  - `<Hero.Head.Link>`: een Link aan de bovenkant van de hero
+- `Foot`: `<Hero.Foot>`
+  - `<Hero.Foot.NavList>`: Navigation item list (`<ul>`)
+  - `<Hero.Foot.NavItem>` Navigation items (`<li classname={isActive ...>}><a href="...">LINK</a></li>)
+
+```tsx
+<Hero heroColorFor="werknemer" size="s">
+  <Hero.Head>
+    <Hero.Head.Button onClick={() => clear()}>Clear</Hero.Head.Button>
+    <Hero.Head.Link to="https://www.bulma.io">Bulma</Hero.Head.Link>
+    <Hero.Head.Link to="https://www.reactjs.org">ReactJS</Hero.Head.Link>
+  </Hero.Head>
+
+  <Hero.Body>
+    <Title>Hero with a title</Title>
+    <Subtitle>And also a TitleWithSubtitleProps</Subtitle>
+  </Hero.Body>
+
+  <Hero.Foot>
+    <Hero.Foot.NavList>
+      <Hero.Foot.NavItem to="/" active>
+        Home
+      </Hero.Foot.NavItem>
+      <Hero.Foot.NavItem to="https://www.bulma.com">Bulma.io</Hero.Foot.NavItem>
+      <Hero.Foot.NavItem to="https://www.remix.run">Remix.run</Hero.Foot.NavItem>
+    </Hero.Foot.NavList>
+  </Hero.Foot>
+</Hero>
 ```
 
-Voor de navigatie-tabs kunnen 2 dingen worden opgegeven: een JSX.Element dat begint met een unordered-list-tag of een array van **HeroNavigationItem**.
+De navigatie kan op 2 manieren worden gemaakt:
 
 ```tsx
-const navItems = [
-  { txt:'Home', target:'/', active: true },
-  { txt:'About', target:'http://www.duckduckgo.com', active: false },
-  { txt:'Extras', target:'http://www.troos.nl', active: false },
-  { txt:'Settings', target:'http://www.kanikeenkortebroekaan.nl', active: false }
-]
+<Hero.Foot>
+  <Hero.Foot.NavList>
+    <Hero.Foot.NavItem to="/" active> Home </Hero.Foot.NavItem>
+    <Hero.Foot.NavItem to="/About">About</Hero.Foot.NavItem>
+    <Hero.Foot.NavItem to="/Extras">Extras</Hero.Foot.NavItem>
+  </Hero.Foot.NavList>
+</Hero.Foot>
 // of
-const navItems = (
+<Hero.Foot>
   <ul>
-    <li className="is-active"><a href="#">Home</a>
-    <li><a href="#">About</a>
-    <li><a href="#">Extras</a>
+    <li className="is-active"><a href="/">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Extras</a></li>s
   </ul>
-);
-```
-
-De hero wordt dan zo gebruikt:
-
-```tsx
-<div>
-  <Hero title="Hero title" subtitle="Hero subtitle" headItems={headitems} navItems={navItems} />
-</div>
+</Hero.Foot>
 ```
 
 ### Image <a id="layout-image"></a>
@@ -427,19 +446,29 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 
 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_
 
-- **Bttn**: een default button (met instelbare `color`-props)
-- **Button**: default bulma button style
-- **LightButton**: light bulma button style
-- **LightOutlinedButton** light & outlined combi button style.
-- **InvertedButton**: inverted bulma button style
-- **OutlinedButton**: outlined bulma button style
+- _**Bttn**: een default button (met instelbare `color`-props) -> bestaat niett meer_
+- **Button**: Voorheen `Bttn`
+  - `<Button.Primary>` Een button in de primary kleur
+  - `<Button.Success>` Een button in de success kleur
+  - `<Button.Danger>` Een button in de danger kleur
+  - `<Button.Warning>` Een button in de warning kleur
+  - `<Button.Info>` Een button in de info kleur
+  - `<Button.Link>` Een button in de link kleur
 
-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 Light, Outlined, LightOutlined en Inverted versies van deze buttons zijn te maken door de `styling`-prop een van deze waardes te geven:
 
-- 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.
+- Light: `"light"` | `"l"`
+- Inverted: `"inverted"` | `"i"`
+- Outlined: `"outlined"` | `"o"`
+- LightOutlined: `"light-outlined"` | `"lo"`
+- default: `"default"` | `undefined`
 
-Door geen tekst toe te voegen aan de children-prop in de Button, kan een button met alleen een icon worden gemaakt.
+> ### 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.
 
@@ -447,16 +476,18 @@ De `ButtonGroup`-component kan gebruikt worden om buttons te grouperen en de gro
 import { ButtonGroup, Bttn, Button, LightButton, InvertedButton, OutlinedButton } from 'loon-bulma-react';
 
 <ButtonGroup>
-  <Bttn>click me</Bttn>
-  <Bttn color="p">click me</Bttn>
-  <Bttn color="s">click me</Bttn>
+  <Button>click me</Button>
+  <Button color="p">click me</Button>
+  <Button color="s">click me</Button>
 
-  <Button.Primary>click me</Button.Primary>
+  <Button.Primary rounded>click me</Button.Primary>
   <Button.Warning>click me</Button.Warning>
-  <LightButton.Success>click me</LightButton.Success>
-  <LightOutlinedButton.Link>click me</LightOutlinedButton.Link>
-  <OutlinedButton.Info>click me</OutlinedButton.Info>
-  <InvertedButton.Danger>click me</InvertedButton.Danger>
+  <Button.Success>click me</Button.Success>
+  <Button.Link styling="inverted">click me</Button.Link>
+  <Button.Info styling="i">click me</Button.Info>
+  <Button.Danger styling="light">click me</Button.Danger>
+  <button>click me</buton> <!-- renders normally-->
+  <span>click me</span> <!-- Does not render and warns in console-->
 </ButtonGroup>;
 ```
 
@@ -677,34 +708,37 @@ Een footer staat meestal onderaan de pagina. Er zit een container in die default
 
 ### 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.
+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.
 
 ##### Voorbeeld voor op een [Button](#component-button)
 
-Op een button wordt automatisch alles aangepast aan het font en de button zelf. Geef daar dan **GEEN** andere properties op.Een tekst kan het beste in een `<span>` worden geplaatst, dan lijnt het netter uit.
+Op een button wordt automatisch alles aangepast aan het font en de button zelf.
 
 ```tsx
 <div>
   <Button.Primary>
-    <Icon faIcon={faHome}>
-    <span>Terug naar Home</span>
+    <Icon icon={faHome}>
+    Terug naar Home
   </Button.Primary>
+  <LightButton.Danger>
+    <icon faIcon="fas fa-trash">
+  </LightButton.Danger>
 </div>
 ```
 
 ##### Voorbeeld zonder een button, maar bijvoorbeeld in een tekst.
 
-Daar kan wel meer worden opgegeven
+Daar kan wel meer worden opgegeven. Voor de IconText component wordt ook de kleur van de tekst aangepast.
 
 ```tsx
 <p>
-  <Icon faIcon={faHome} animate="spin" ></Icon>
-  <Icon faIcon={faHome} animate="pulse" size="m"></Icon>
-  <Icon faIcon={faHome} rotation={90} size="l" color="warning"></Icon>
-  <Icon faIcon={faHome} flip="vertical" size="xl" color="danger"></Icon>
+  <Icon icon={faHome} animate="spin" ></Icon>
+  <Icon icon={faHome} animate="pulse" size="m"></Icon>
+  <Icon icon={faHome} rotation={90} size="l" color="warning"></Icon>
+  <Icon icon={faHome} flip="vertical" size="xl" color="danger"></Icon>
 </p>
 <p className="my-3">
-  Dit is een  <IconText faIcon={faHome} color="info">huisje</IconText>. Wat leuk!
+  Dit is een  <IconText icon={faHome} color="info">huisje</IconText>. Wat leuk!
 </p>
 ```
 
@@ -721,89 +755,48 @@ Link en LinkButton zijn bedoelt om links (`<a>`) en buttons (`<button>`) er, bij
 </div>
 ```
 
-### Menu <a id="component-menu"></a>
+### Menu (Nieuw) <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 `onMenuItemChanged(id: nuymber|string)` function voor als het geselecteerde menu wijzigt.
+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.
 
-De menu-items hebben een optioneel id, net als de sub-menu-items. Als er geen ID is opgegeven, maakt het menu zelf id's aan op basis van de globale menu-index. Dit is dan ook het nummer dat doorgegeven wordt met `onMenuItemChanged(id: nuymber|string)`.
+Het Menu kan worden opgebouwd uit 3 andere componenten:
 
-##### Deze ID's zijn gegenereerd door de component
+- `<Menu.Item>`: een menu-item met een label en een optioneel sub-menu. Met de (optionele) prop `name` kan een item een naam gegeven worden. Deze naam wordt dan gebruikt als item-identifier. Anders wordt de string-content van de component-children gebruikt.
+- `<Menu.ExpandableItem>`: een menu-item met een label en een of meer `<Menu.Item>` children. Met de `startExpandend` prop kan een item als default uitgeklapt worden.
+- `<Menu.ItemGroup>`: een menu-item met een label en een of meer `<Menu.Item>` of `<Menu.ExpandableItem>` children.
 
-```tsx
-<Menu
-  onMenuItemChanged={(id: string | number) => console.log(`menu item ${id} selected`)}
-  blocks={[
-    {
-      label: 'General',
-      items: [
-        { itemTxt: 'Dashboard' }, // id 0
-        { itemTxt: 'Customers' }, // id 1
-      ],
-    },
-    {
-      label: 'Administration',
-      items: [
-        { itemTxt: 'Team Settings' }, // id 2
-        {
-          itemTxt: 'Manage Your Team',
-          itemList: [
-            // id 3
-            { txt: 'Members' }, // id 4
-            { txt: 'Add a member' }, // id 5
-          ],
-        },
-        { itemTxt: 'Invitations' }, // id 6
-      ],
-    },
-    {
-      label: 'Transactions',
-      items: [
-        { itemTxt: 'Payments' }, // id 7
-        { itemTxt: 'Transfers' }, // id 8
-      ],
-    },
-  ]}
-/>
-```
-
-##### ID's kan je ook zelf opgeven
+Andere elementen worden **niet** gerendered.
 
 ```tsx
-<Menu
-  onMenuItemChanged={(id: string | number) => console.log(`menu item ${id} selected`)}
-  blocks={[
-    {
-      label: 'General',
-      items: [
-        { itemTxt: 'Dashboard', id: 1 },
-        { itemTxt: 'Customers', id: 2 },
-      ],
-    },
-    {
-      label: 'Administration',
-      items: [
-        { itemTxt: 'Team Settings', id: '3' },
-        {
-          itemTxt: 'Manage Your Team',
-          id: '4',
-          itemList: [
-            { txt: 'Members', id: '4a' },
-            { txt: 'Add a member', id: '4b' },
-          ],
-        },
-        { itemTxt: 'Invitations', id: 5 },
-      ],
-    },
-    {
-      label: 'Transactions',
-      items: [
-        { itemTxt: 'Payments', id: 6 },
-        { itemTxt: 'Transfers', id: 7 },
-      ],
-    },
-  ]}
-/>
+<div>
+  <Menu onMenuItemClicked={(item: string) => console.log(item)} initialItem="Data">
+    <Menu.Item>Grover</Menu.Item>
+    <Menu.Item>Oscar</Menu.Item>
+    <Menu.ExpandableItem label="Sesamstraat" startExpanded={true}>
+      <MenuItem>Ieniemienie</MenuItem>
+      <MenuItem>Pino</MenuItem>
+      <MenuItem>Tommy</MenuItem>
+    </Menu.ExpandableItem>
+
+    <Menu.ItemGroup label="Stuff...">
+      <Menu.Item> <!-- Menu item can contain icons -->
+        <Icon icon={faDuck} />
+        Scrooge McDuck
+      </Menu.Item>
+      <Menu.ExpandableItem label="Disney">
+        <Menu.Item>Donald Duck</Menu.Item>
+        <Menu.Item>Mickey Mouse</Menu.Item>
+        <Menu.Item>Boris Boef</Menu.Item>
+      </Menu.ExpandableItem>
+      <Menu.ExpandableItem label="Looney Tunes" startExpanded={true}>
+        <Menu.Item>Bugs Bunny</Menu.Item>
+        <Menu.Item>Daffy Duck</Menu.Item>
+        <Menu.Item>Porky Pig</Menu.Item>
+      </Menu.ExpandableItem>
+    </Menu.ItemGroup>
+  </Menu>
+</div>
 ```
 
 ### Messages & Notifications <a id="component-messages"></a>
@@ -833,33 +826,75 @@ Een notificatie bevat ook een tekst, maar heeft ook een dimsiss-button. Deze met
 
 ### Modal <a id="component-modal"></a>
 
-Een modal is een po-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 scrollbaar gemaakt moet worden. Met een state-boolean kan het openen & sluiten van de modal geregeld worden.
+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.
 
 ```tsx
 const [isModalOpen, setModalOpen] = useState(true);
 return (
 { isModalOpen ?
-  <Modal
-    onDismiss={() => setModalOpen(false)}
-    header={
+  <Modal onDismiss={() => setModalOpen(false)} size='xl'>
+    <Modal.Head>
       {/* Hier komt de content voor de modal-header (bovenaan). */}
       <TitleWithSubtitle titleTxt="WAT?!? users" subtitleTxt="Users van de app"/>
-    }
-    footer={
+    </Modal.Head>
+    <Modal.Body>
+      {/* Hier komt de modal content. */}
+      </Modal.Body>
+      <Modal.Foot>
       {/* Hier komt de content voor de modal-footer (onderaan). */}
       <Button.Link>close</Button.Link>
-    }>
-      {/* Hier komt de modal content. */}
+      </Modal.Foot>
     </Modal>
   : null
 });
 ```
 
+De `<Modal.Head>` en de `<Modal.Foot>` zijn optioneel. Als je die niet wil gebruiken, kan je de `<Modal.Body>` tag ook weglaten. De content van de Modal wordt dan automatisch gewrapped in een `<Modal.Body>` tag:
+
+```tsx
+<Modal>
+  <Section>
+    <span></span>
+  </Section>
+</Modal>;
+
+/*is hetzelfde als */
+
+<Modal>
+  <Modal.Body>
+    <Section>
+      <span></span>
+    </Section>
+  </Modal.Body>
+</Modal>;
+
+/* Wrap meerdere items in een <></> */
+<Modal>
+  <>
+    <Section> section 1</Section>
+    <Section> section 2</Section>
+    <Section> section 3</Section>
+  </>
+</Modal>;
+```
+
+Een modal heeft ook verschillende sizes. Met de `size`-prop kan deze ingesteld worden. De default waarde is `'m'`, wat overeen komt met `800px`.
+
+- SizeProp:
+  - `s`: 600px
+  - `m`: 800px (default),
+  - `l`: 1000px
+  - `xl`: 1200px
+- string:
+  - `'834px'`
+  - `'50%'`
+  - `'60em'`
+
 ### ProgressBar <a id="component-progressbar"></a>
 
 Een progressbar doet precies wat je verwacht.
 
-- 3 maten (small (s), medium (m) en large (l)). Default = medium (m)
+- 4 maten (small (s), medium (m), large (l) en extralarge (xl)).
 - 4 kleuren (danger (d), succes (s), link (l) en primary (p)). Default = primary
 - de max value is instelbaar, default = 100.
 
@@ -872,10 +907,52 @@ Een progressbar doet precies wat je verwacht.
 </div>
 ```
 
+### 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.
+
+```tsx
+const [tab, setTab] = useState<string | number>(100);
+// ...
+<div>
+  <TabBar onTabChange={(tabId: number | string) => setTab(tabId)} initialTab={tab}>
+    <TabBar.Item tabId={100} tooltip="Toon de datatables. yeeehaa!">
+      <Icon icon="fas fa-horsehead" />
+      DataTables
+    </TabBar.Item>
+    <TabBar.Item tabId={200}>Notifications & Messages</TabBar.Item>
+    <TabBar.Item tabId="Titles">Titles, Forms, Buttons, Tags</TabBar.Item>
+    <TabBar.Item tabId="300">
+      Aspect Ratio's
+      <Icon icon={faAdjust} />
+    </TabBar.Item>
+    <TabBar.Item tabId="MonthView">
+      <Icon icon={faCalendar} />
+    </TabBar.Item>
+  </TabBar>
+
+  <div className="tab-content">
+    {tab === 100 && <DataTableTab />}
+    {tab === 200 && <NotificationTab />}
+    {tab === 'Titles' && <TitlesFormsButtonsTab />}
+    {tab === '300' && <AspectRatioTab />}
+    {tab === 'MonthView' && <CalendarTab />}
+  </div>
+</div>;
+```
+
 ### Table <a id="component-table"></a>
 
-Een Table 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.
+Table nieuwe stijl. TODO: documentatie & implementatie
+
+### 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.
+In plaats van deze SimpleTable kan je ook de [Table](#component-table) gebruiken.
 
 ```tsx
 const [data, setData] = useState(tableData);
@@ -900,36 +977,10 @@ return (
 );
 ```
 
-### Tabs <a id="component-tabs"></a>
-
-Tabs doen precies wat ze zeggen:
-
-```tsx
-export default function App() {
-  const [activePage, setActiveTab] = useState(0);
-  return (
-    <>
-      <Tabs
-        items={['DataTables', 'Notifications & Messsages', 'Titles, Forms & Buttons', 'Images & Aspect Ratios']}
-        activeTab={activePage}
-        onTabChange={(i: number) => setActiveTab(i)}
-      />
-
-      <div className="tab-content">
-        {activePage === 0 ? <DataTableTab /> : null}
-        {activePage === 1 ? <NotificationTab /> : null}
-        {activePage === 2 ? <TitlesFormsButtonsTab /> : null}
-        {activePage === 3 ? <AspectRatioTab /> : null}
-      </div>
-    </>
-  );
-}
-```
-
 ### 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.
+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.
 
 ```tsx
 <Tags alignment="l" size="s">
@@ -942,9 +993,14 @@ De `<Tags>` component kan gebruikt worden om meerdere tags te groeperen. Dan kun
   <Tag color="light">light</Tag>
   <Tag color="dark">dark</Tag>
 </Tags>
+
+// warns if you use a tag that is not a `<Tag>`
+<Tags>
+  <span>Fakey!</span>
+</Tags>
 ```
 
-Met de `onDismiss`-function van de `<Tag>` kan je een sluit-button op een tag toevoegen. Dan moet er **wel** een function opgegevens zijn om iets mee te doen
+Met de `onDismiss`-function van de `<Tag>` kan je een sluit-button op een tag toevoegen. Dan **moet** er een function opgegevens zijn om iets mee te doen
 
 ```tsx
 <Tag color="dark" onDismiss={(e) => handleTagDismiss(e)}>
@@ -992,6 +1048,95 @@ Allemaal hebben ze 2 waarden die isntelbaar zijn voor Sizes: _headingSize_ en _b
 </div>
 ```
 
+## 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 heeft de volgende props:
+
+- `initialValue`: de geselecteerde ToggleItem-identifier (NIET VOOR `<ToggleBar.OnOffItem>`)
+- `children`: de ToggleItems of OnOffToggleItems die in de ToggleBar zitten
+- `onToggle`: callback voor veranderen van geselecteerde ToggleItem
+- `rounded`: round de hoeken af (default `false`)
+- `light`: maak de ToggleBar light-colored (default `true`)
+- `outlined`: maak de ToggleBar outlined (default `false`)
+- `onColor`: ColorProp voor de 'on'-status (default 's' (success, groen))
+- `offColor`: ColorProp voor de 'off'-status (default 'd' (danger, rood))
+
+#### Common props Toggle Items
+
+Er zijn een paar props op de `Item` en de `OnOffItem` hetzelfde.
+
+- `identifier`: kan gebruikt worden om een van de items een betere, herkenbare naam te geven als het item meer content bevat dan alleen een string.
+- `tooltip`: tooltip voor een toggle-item
+- `disabled`: disable een toggle-item`
+
+### ToggleItem
+
+ToggleItems zijn meerdere knopjes op de bar, waarvan er maar 1 de status 'on' heeft. De andere buttons hebben dan de 'off'-state.
+
+De `onToggle()`-callback wordt aangeroepen als de getogglede knop wordt verandert.
+
+```tsx
+<div>
+  <ToggleBar onToggle={(item: string) => {}} rounded={true} light={true} initialValue="Toggle C">
+    <ToggleBar.Item identifier="A">Toggle A</ToggleBar.Item>  <!-- console: 'A' -->
+    <ToggleBar.Item>Toggle B</ToggleBar.Item> <!-- console: 'Toggle B' -->
+    <ToggleBar.Item>Toggle C</ToggleBar.Item> <!-- console: 'Toggle C' -->
+  </ToggleBar>
+</div>
+```
+
+### 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.
+
+De OnOffToggleItems maken **geen** gebruik van de `onToggle`-callback van de ToggleBar. Dat moet door het item _zelf_ worden geregeld.
+Ze hebben 2 props meer dan de ToggleItems:
+
+- `toggled`: de initiële status van het item
+- `onToggle: (on: boolean, item: string) => void`: de callback die aangeroepen wordt als er wordt getoggeld.
+
+```tsx
+<div>
+  <ToggleBar rounded={true} outlined={true}>
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}
+      identifier="1">
+      Maandag
+    </ToggleBar.OnOffItem><!--console: '1' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}
+      identifier="2">
+      Dinsdag
+    </ToggleBar.OnOffItem><!--console: '2' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}
+      identifier="3">
+      Woensdag
+    </ToggleBar.OnOffItem><!--console: '3' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}
+      identifier="4">
+      Donderdag
+    </ToggleBar.OnOffItem><!--console: '4' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}
+      identifier="5">
+      Vrijdag
+    </ToggleBar.OnOffItem><!--console: '5' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}>
+      Zaterdag
+    </ToggleBar.OnOffItem><!--console: 'Za' -->
+    <ToggleBar.OnOffItem
+      onToggle={(on: boolean, item: string) => console.log(item)}>
+      Zondag
+    </ToggleBar.OnOffItem><!--console: 'Zo' -->
+  </ToggleBar>
+</div>
+```
+
 ## 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.