feat: Add initial overview of available icons (#836)

storybook/storybook-docs/config/preview.tsx

@@ -1,5 +1,6 @@
 import '@amsterdam/design-system-tokens/dist/root.css'
 import '@amsterdam/design-system-assets/font/index.css'
+import '@amsterdam/design-system-css/dist/index.css'
 import '../../storybook-overrides.css'
 
 export const parameters = {
@@ -12,7 +13,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Docs', ['Intro']],
+      order: ['Docs', ['Intro', 'Assets', 'Designrichtlijnen']],
     },
   },
   viewMode: 'docs',

storybook/storybook-docs/src/components/AmsterdamIconGallery.tsx

@@ -0,0 +1,17 @@
+import { Icon } from '@amsterdam/design-system-react'
+import * as Icons from '@amsterdam/design-system-react-icons'
+import { IconGallery, IconItem } from '@storybook/blocks'
+
+export const AmsterdamIconGallery = () => {
+  const icons = Object.keys(Icons) as Array<keyof typeof Icons>
+
+  return (
+    <IconGallery>
+      {icons.map((key) => (
+        <IconItem key={key} name={key.substring(0, key.length - 4)}>
+          <Icon svg={Icons[key]} />
+        </IconItem>
+      ))}
+    </IconGallery>
+  )
+}

storybook/storybook-docs/src/font.stories.mdx

@@ -0,0 +1,48 @@
+import { Meta, Typeset } from "@storybook/blocks";
+
+<Meta title="Docs/Assets/Lettertype" />
+
+# Lettertype
+
+We gebruiken het lettertype Amsterdam Sans.
+
+Dat is een letterfamilie met een helder, open tekstbeeld dat goed bij de Andreaskruisen past.
+Het lettertype is zowel offline als online goed leesbaar.
+Daarom zetten we het voor alle communicatiemiddelen in.
+
+In deze zin zie je hoe alle letters en cijfers eruit zien:
+
+<Typeset
+  fontFamily="Amsterdam Sans, Arial, sans-serif"
+  fontSizes={[24]}
+  fontWeight={400}
+  sampleText="Jouw typograaf biedt mij zulke exquise schreven 012345689"
+/>
+
+## Installeren
+
+Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies.
+Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet.
+
+Je kunt het lettertype ook zelf hosten en opnemen in je applicatie.
+Vraag het dan aan via het formulier hieronder.
+
+Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat.
+In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is:
+
+```css
+.class {
+  font-family: "Amsterdam Sans", Arial, sans-serif;
+}
+```
+
+## Aanvragen
+
+Het lettertype is uitdrukkelijk niet vrij beschikbaar.
+Amsterdam Sans is uitsluitend te gebruiken door medewerkers van de gemeente Amsterdam en amsterdam&partners, en door leveranciers werkend voor deze organisaties.
+
+Vraag de lettertypebestanden aan via het formulier [Amsterdam Sans aanvragen](https://formulier.amsterdam.nl/thema/huisstijl/amsterdam-sans-aanvragen).
+
+## Meer informatie
+
+Verdere informatie over het lettertype vind je op de pagina [Typografie op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/typografie/).

storybook/storybook-docs/src/icon-gallery.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/blocks";
+import { AmsterdamIconGallery } from "./components/AmsterdamIconGallery";
+
+<Meta title="Docs/Assets/Iconen" />
+
+# Iconen
+
+Een overzicht van alle beschikbare iconen.
+
+<AmsterdamIconGallery />
+
+## Gerelateerde componenten
+
+- [Icon](?path=/docs/react_media-icon--docs)

storybook/storybook-docs/src/typography.stories.mdx

@@ -4,23 +4,6 @@ import { Meta, Typeset } from "@storybook/blocks";
 
 # Typografie
 
-## Lettertype
-
-We gebruiken het lettertype Amsterdam Sans.
-
-Dat is een letterfamilie met een helder, open tekstbeeld dat goed bij de Andreaskruisen past.
-Het lettertype is zowel offline als online goed leesbaar.
-Daarom zetten we het voor alle communicatiemiddelen in.
-
-In deze zin zie je hoe alle letters en cijfers eruit zien:
-
-<Typeset
-  fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[24]}
-  fontWeight={400}
-  sampleText="Jouw typograaf biedt mij zulke exquise schreven 012345689"
-/>
-
 ## Tekstgrootte
 
 ### Zeven tekstniveau’s
@@ -235,31 +218,3 @@ Een manier om dat te doen is met de volgende _css snippet_, waarin `hyphens` en
 ```
 
 Voor verdere informatie: [Wrapping and breaking text op MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text)
-
-## Het lettertype installeren
-
-Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies.
-Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet.
-
-Je kunt het lettertype ook zelf hosten en opnemen in je applicatie.
-Vraag het dan aan via het formulier hieronder.
-
-Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat.
-In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is:
-
-```css
-.class {
-  font-family: "Amsterdam Sans", Arial, sans-serif;
-}
-```
-
-### Licentie en aanvraag
-
-Het lettertype is uitdrukkelijk niet vrij beschikbaar.
-Amsterdam Sans is uitsluitend te gebruiken door medewerkers van de gemeente Amsterdam en amsterdam&partners, en door leveranciers werkend voor deze organisaties.
-
-Vraag de lettertypebestanden aan via het formulier [Amsterdam Sans aanvragen](https://formulier.amsterdam.nl/thema/huisstijl/amsterdam-sans-aanvragen).
-
-## Meer informatie
-
-- Alle informatie over het lettertype vind je op de pagina [Typografie op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/typografie/).