Ontwikkelfase voor Candidate componenten
De Ontwikkelfase start wanneer de Voorbereidingsfase is afgerond. Dan zijn alle acceptatiecriteria en benodigde testcases bepaald.
In de Ontwikkelfase wordt de component in CSS, React en Figma beschikbaar gemaakt en wordt documentatie geschreven waarmee de community de component kan gebruiken.
Bekijk de illustratie voor de Ontwikkelfase op een losse pagina
De stappen en substappen in de Ontwikkelfase kunnen soms parallel worden opgepakt, maar hebben hierin wel relatie tot elkaar. Bovenstaande visualisatie laat de volgende stappen zien:
-
React Component
- Gemaakt door de developer.
- Gereviewed door de Design System Lead & Product Manager.
-
CSS Component
- Gemaakt door de developer.
- Gereviewed door de Design System Lead & Product Manager.
-
Figma Component
- Gemaakt door de designer.
- Gereviewed door de Design System Lead & Product Manager.
- Voorbeeld-thema ingesteld door relations.
-
Documentatie
- Geschreven door de toegankelijkheidsspecialist, developer, designer.
- Gereviewed door de Design System Lead & Product Manager.
React component
Doel
De Candidate component is aantoonbaar te gebruiken in tenminste 1 veelgebruikt frontend framework, kan makkelijk gedocumenteerd worden in Storybook en werkt goed op onze eigen websites.
Uitkomst
De React component is ontwikkeld, maakt gebruik van de CSS component en wordt gebruikt in de Storybook en testbestanden.
CSS component
Doel
De Candidate component kan makkelijk beschikbaar worden gemaakt in elk framework naar keuze en heeft hierbij dezelfde gedeelde stylesheet. Bij componenten met een native equivalent is er een HTML variant te gebruiken, zodat deze ook kan worden gebruik voor output uit CMSen en APIs waar geen classnames kunnen worden toegepast op de HTML.
Uitkomst
- De CSS is herbruikbaar opgezet zodat deze als 1 bron van waarheid gebruikt kan worden tussen verschillende framework implementaties, in situaties waar geen controle is over de HTML of in de shadow dom van een web component.
- De component heeft mogelijkheden om alle variaties en states te testen in visuele regressietests
SCSS component
Doel
Developers kunnen de CSS-implementatie gebruiken voor eigen CSS selectors.
De CSS-implementatie kan gebruikt worden in de Shadow DOM van een Web Component.
De CSS-implementatie kan gebruikt worden op de :host element van een Web Component.
De CSS-implementatie kan gebruikt worden in code waar geen API prefixes van anderen gebruikt moeten worden.
De CSS-implementatie kan gebruikt worden voor HTML elementen zonder class names.
Uitkomst
De component is beschikbaar in mixins die goed kunnen worden ingezet in systemen waar geen controle is over de HTML, maar wel een losse stylesheet kan worden ingeladen.
Figma component
Doel
De Candidate component kan makkelijk worden gebruikt voor prototypes en designs in Figma zodat er genoeg feedback wordt gegeven door designers om er uiteindelijk een Hall of Fame component van te maken.
Uitkomst
- De component is beschikbaar in Figma en heeft dezelfde API's en states zoals deze in code zijn vastgelegd zodat hij goed overdraagbaar is naar development.
- De component is ingesteld in het Start-thema met gebruik van basis-tokens.
Voorbeeld-thema
Doel
De Candidate component is goed in te zetten voor prototyping zonder eerst een eigen huisstijl in te stellen.
Uitkomst
De component is beschikbaar in de Voorbeeld-bibliotheek in Figma en is goed in te zetten voor prototyping. Er is een voorbeeld-huisstijl die gebruikt kan worden in de documentatie van de component.
Documentatie
Doel
De Candidate component en varianten zijn makkelijk te gebruiken voor developers en designers.
Doordat de component veel gebruikt wordt krijgt het kernteam voldoende feedback om de component te selecteren voor de Hall of Fame stappen.
Uitkomst
De component documentatie van de beschikbare varianten en API's is beschikbaar in een herbruikbaar Markdown-bestand, op npm en in Storybook voor developers en in Figma voor designers.
Rond de Ontwikkelfase af
Doel
De component is consistent in alle onderdelen van de implementatie: code, Figma en documentatie.
Uitkomst
De Testfase kan starten en parallel uitgevoerd worden. De Candidate component wordt pas getest wanneer alle onderdelen klaar staan.