docs: split Image README into multiple markdown files

nl-design-system · Oct 12, 2024 · a3c4250 · a3c4250
1 parent 52ecf17
commit a3c4250
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/components/img/README.md b/components/img/README.md
@@ -2,20 +2,4 @@
 
 # Image
 
-## HTML
-
-- Gebruik het `alt` attribuut voor een beschrijvende tekst.
-- Gebruik niet het `title` attribuut voor `img`. De afbeelding moet goed zichtbaar zijn, maar sommige browsers maken een tooltip met voor de tekst in het `title` attribuut. Een tooltip kan bijvoorbeeld een afbeelding van een [QR-code](https://en.wikipedia.org/wiki/QR_code) onbruikbaar maken doordat de QR-code niet meer herkend wordt.
-
-## Bibliografie
-
-- [Using the HTML title attribute — Steve Faulkner](https://www.tpgi.com/using-the-html-title-attribute-updated/)
-
-## Relevante WCAG eisen
-
-- [WCAG eis 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content): afbeeldingen moeten een tekst als alternatief hebben, bijvoorbeeld via het `alt`-attribuut
-- [WCAG eis 1.4.5](https://www.w3.org/TR/WCAG21/#images-of-text)
-- [WCAG eis 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced)
-- [WCAG eis 1.4.9](https://www.w3.org/TR/WCAG21/#images-of-text-no-exception)
-- [WCAG eis 1.4.11](https://www.w3.org/TR/WCAG21/#non-text-contrast)
-- [WCAG eis 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): de taal van de `alt` tag moet instelbaar zijn
+Toont een afbeelding.
diff --git a/components/img/docs/references.nl.md b/components/img/docs/references.nl.md
@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Bibliografie
+
+- [Using the HTML title attribute — Steve Faulkner](https://www.tpgi.com/using-the-html-title-attribute-updated/)
diff --git a/components/img/docs/technology-html.nl.md b/components/img/docs/technology-html.nl.md
@@ -0,0 +1,6 @@
+<!-- @license CC0-1.0 -->
+
+# HTML
+
+- Gebruik het `alt` attribuut voor een beschrijvende tekst.
+- Gebruik niet het `title` attribuut voor `img`. De afbeelding moet goed zichtbaar zijn, maar sommige browsers maken een tooltip met voor de tekst in het `title` attribuut. Een tooltip kan bijvoorbeeld een afbeelding van een [QR-code](https://en.wikipedia.org/wiki/QR_code) onbruikbaar maken doordat de QR-code niet meer herkend wordt.
diff --git a/components/img/docs/wcag.nl.md b/components/img/docs/wcag.nl.md
@@ -0,0 +1,10 @@
+<!-- @license CC0-1.0 -->
+
+# Relevante WCAG eisen
+
+- [WCAG eis 1.1.1](https://www.w3.org/TR/WCAG21/#non-text-content): afbeeldingen moeten een tekst als alternatief hebben, bijvoorbeeld via het `alt`-attribuut
+- [WCAG eis 1.4.5](https://www.w3.org/TR/WCAG21/#images-of-text)
+- [WCAG eis 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced)
+- [WCAG eis 1.4.9](https://www.w3.org/TR/WCAG21/#images-of-text-no-exception)
+- [WCAG eis 1.4.11](https://www.w3.org/TR/WCAG21/#non-text-contrast)
+- [WCAG eis 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): de taal van de `alt` tag moet instelbaar zijn
diff --git a/packages/storybook-css/src/Image.stories.tsx b/packages/storybook-css/src/Image.stories.tsx
@@ -4,7 +4,11 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Image } from '@utrecht/component-library-react';
 import tokens from '@utrecht/design-tokens/dist/index.json';
 import readme from '@utrecht/img-css/README.md?raw';
+import referencesDocs from '@utrecht/img-css/docs/references.nl.md?raw';
+import htmlDocs from '@utrecht/img-css/docs/technology-html.nl.md?raw';
+import wcagDocs from '@utrecht/img-css/docs/wcag.nl.md?raw';
 import tokensDefinition from '@utrecht/img-css/src/tokens.json';
+import { mergeMarkdown } from '@utrecht/storybook-helpers/src/markdown';
 import { designTokenStory } from './design-token-story';
 
 const meta = {
@@ -72,7 +76,7 @@ const meta = {
     tokensDefinition,
     docs: {
       description: {
-        component: readme,
+        component: mergeMarkdown([readme, htmlDocs, referencesDocs, wcagDocs]),
       },
     },
   },