Documentatie Button in Storybook

[AlineNap]

Omschrijving

Als gebruiker wil ik de documentatie van de button component op de juiste plek kunnen raadplegen: designers via Figma en developers in Storybook. Daarom willen we de huidige Utrecht-documentatie in Storybook vervangen door de documentatie uit Figma. Dit moet op zo’n manier worden geïmplementeerd dat andere organisaties deze documentatie deels of geheel kunnen overnemen, zodat we dit terug kunnen leveren aan de NLDS community.

Een mogelijke oplossing is het gebruik van een JSON-bestand, waardoor we dezelfde documentatie zowel in Storybook als in Figma kunnen tonen en updaten. NLDS doet ook al zoiets om documentatie over te kunnen nemen, kunnen inspiratie opdoen uit hun oplossing.

In Storybook mag de documentatie uitgebreider zijn dan in Figma, door extra informatie over de technische implementatie, zoals props, voorbeelden van codegebruik en edge cases.

Definition of Ready (DoR)

• Feedback van Kim is verwerkt in de documentatie.
• De smalle button is toegevoegd aan de documentatie in Figma.

Acceptatiecriteria

• De documentatie uit Figma is zichtbaar in Storybook.
• De documentatie uit Utrecht is vervangen door de LUX-documentatie.
• De documentatie is geplaatst bij zowel de Webcomponent en React component.
• Er is een manier geïmplementeerd om de documentatie eenvoudig over te nemen door andere organisaties (bijvoorbeeld via een JSON-bestand).
• Optioneel: Onderzoek of we dezelfde documentatie in zowel Storybook als Figma kunnen tonen via een gedeelde bron.

Referentie

• Figma-documentatie: LUX UI-kit - Button