From d9ea2d7d8b442fae47b7926033b056f10d26228e Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Mon, 9 Dec 2024 14:31:58 +0100 Subject: [PATCH 1/6] Tussentijds opgeslagen --- .../help-wanted-stappenplan.mdx | 47 +++++++++++++++++-- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index 7b1ee2ea211..223e27a27e6 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -394,12 +394,51 @@ Doel: Hierdoor kan de component worden opgepakt door de community. Deze stap kan enkel worden uitgevoerd door het kernteam. -- Schematische afbeelding gemaakt in het ['Doc website - Afbeeldingen' Figma bestand](https://www.figma.com/file/0Y9Tbb373u6QGxGT6mqUnm/NLDS---Doc-website---Afbeeldingen?type=design&node-id=606-943&mode=design). -- Component progress geupdate zodat de laatste status van de component wordt meegenomen. - - [Pakketje](https://www.npmjs.com/package/@nl-design-system/component-progress) updaten met [action](https://github.com/nl-design-system/index/actions/workflows/continuous-deployment.yml). - - In de documentatie repository `pnpm install --save-dev @nl-design-system/component-progress@latest` +### Schematische afbeelding maken + +- Maak een schematische afbeelding in het ['Doc website - Afbeeldingen' Figma bestand](https://www.figma.com/file/0Y9Tbb373u6QGxGT6mqUnm/NLDS---Doc-website---Afbeeldingen?type=design&node-id=606-943&mode=design). +- Gebruik als naam voor het frame 'componenten_overzicht_{naam-van-component}. +- Exporteer de afbeelding als svg bestand. + +Doorloop de volgende stappen om de schematische afbeelding mee te laten kleuren met statussen van het Estafettemodel. + +Tip voor als je deze stap voor het eerst doorloopt. Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. + +1. Open VS code. +2. Ga binnen de [documentatie repository](https://github.com/nl-design-system/documentatie) naar de (folder 'svg')[https://github.com/nl-design-system/documentatie/tree/main/static/svg]. +3. Sleep het svg bestand in deze folder. +Stop de svg daar in door het bestand daar naartoe te slepen +Open een svg bestand +Kies View in de hoofd navigatie en open Command Pallete +Typ svg +Kies preview SVG +Verander alle fill kleuren en stroke kleuren naar design-tokens + fallback +#F9F6F3 wordt var(--component-illustration-background-color, white) +#E4EBED wordt var(--component-illustration-grid-color, #EEE) +#004152 wordt var(--component-illustration-color, Design voor theme validator #666) +white wordt var(--component-illustration-background-color, white) +Voeg een symbol toe zodat de code het svg dynamisch kan inladen inclusief design tokens. +Op regel 2 na de svg start tag: zet +Op de 1-na laatste regel voor zet +Nu zie je geen preview meer. Voeg dus ook toe. Nu ben je klaar! +Maak een branch feat/add-{component}-illustration +Maak een commit feat: add {component} illustration +Push naar GitHub +Maak en PR +Laat het reviewen +✨ Merge! + +### Documentatie pagina toevoegen + - Component toegevoegd aan de [documentatie repository](https://github.com/nl-design-system/documentatie/tree/main/docs/componenten) met behulp van [de component template](https://raw.githubusercontent.com/nl-design-system/documentatie/main/docs/componenten/_template.mdx). +### Component progress bijwerken + +- Publiceer een nieuwe versie van het `component-progress` package door op `Run Workflow` te klikken op [GitHub Actions van de Index repository](https://github.com/nl-design-system/index/actions/workflows/update-component-progress.yml). Kies hierbij voor de `main` branch. +- Wacht tot [component-progress op npm](https://www.npmjs.com/package/@nl-design-system/component-progress) is bijgewerkt. Dat zie je door naar `Last publish` te kijken. +- Update `@nl-design-system/component-progress` in de documentatie repository. Dat doe je door lokaal in een nieuwe branch `pnpm install @nl-design-system/component-progress@latest --save-dev -w` te draaien. Dit update de devDependency en de lockfile. +- Push je branch naar GitHub en maak er een pull request voor aan. + **🚩 Checkpoint**: nldesignsystem.nl ## Status bijgewerkt naar Help Wanted From 45fa238ec9b48bcb30bbd6ac3e3c69b26cf96637 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Tue, 10 Dec 2024 12:06:13 +0100 Subject: [PATCH 2/6] Tussentijds opslaan 2 --- .../help-wanted-stappenplan.mdx | 106 ++++++++++-------- 1 file changed, 59 insertions(+), 47 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index 223e27a27e6..889bd4c2893 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -26,10 +26,11 @@ Begin met het bepalen van een naam. Baseer de naam van de component indien mogelijk, op herkenbare termen uit webstandaarden. Liever termen uit HTML, CSS, SVG en WAI-ARIA dan uit 'UI frameworks' die op het moment populair zijn. We schrijven componenten over het algemeen als enkelvoud en met kapitalen. Bijvoorbeeld 'Accordion' of 'Text Input'. -Kijk voor inspiratie bij: +Kijk voor inspiratie bijvoorbeeld bij: - [Component gallery](https://component.gallery) - [UI guideline](https://www.uiguideline.com/components) +- [MDN web docs](https://developer.mozilla.org/en-US/docs/Web) - [NL Design System componenten](https://www.nldesignsystem.nl/componenten/) Zijn er meerdere namen voor de component? Kies de meest gangbare. De andere namen kun je later toevoegen aan de documentatie. @@ -81,11 +82,11 @@ We gebruiken [Github 'Discussions' van NL Design System](https://github.com/orgs {beschrijving-component} -## Ook bekend als (niet verplicht) +## Ook bekend als -{andere namen die je bent tegengekomen toen je de naam bepaalde} +{andere namen die je bent tegengekomen toen je de naam bepaalde, niet verplicht} -## Gerelateerde componenten (niet verplicht) +## Gerelateerde componenten {zie hieronder} @@ -119,7 +120,7 @@ We gebruiken 'Issues' in de [Github 'Backlog' repository van NL Design System](h {naam-component} -[Link naar GitHub Discussion]({link-naar-github-discussion}) +[Link naar GitHub Discussion]({link-github-discussion}) ``` Selecteer bij 'Labels' het label: Component. @@ -156,7 +157,7 @@ Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze i Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! -[Link naar bericht in Slack]({link-naar-Slack-bericht}) +[Link naar bericht in Slack]({link-slack-bericht}) --- ``` @@ -174,7 +175,7 @@ Hey community 👋 We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie? -Deel een link naar Figma, Storybook, Github of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. +Deel een link naar Figma, Storybook, Github of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! ``` @@ -250,14 +251,14 @@ Gebruik in Patternlab het linkadres van de `h2` of `h3` om naar een specifiek on Voeg per organisatie een losse comment toe aan de GitHub Discussion. Gebruik onderstaande tekst als basis. ```md -## {Naam-organisatie} +## {naam-organisatie} -- [Documentatie website]({link-naar-component-in-documentatie-website}) -- [Storybook]({link-naar-component-in-storybook}) -- [Figma]({link-naar-component-in-figma}) -- [Github]({link-naar-component-in-github}) +- [Documentatie website]({link-documentatie-website}) +- [Storybook]({link-storybook}) +- [Figma]({link-figma}) +- [Github]({link-github}) --- @@ -265,7 +266,7 @@ Voeg per organisatie een losse comment toe aan de GitHub Discussion. Gebruik ond **{Omgeving}** -{Naam variant} +{naam-variant} {Rationale variant} {Screenshot} @@ -350,10 +351,10 @@ Hiep hoi! Het is zover, de volgende component is helemaal klaar voor een Help Wanted stempel. -Naam: {naam-component} -Beschrijving: {beschrijving-component} +Naam: **{naam-component}** +Beschrijving: **{beschrijving-component}** -[GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}) +[GitHub Discussion voor de {naam-component} component]({link-github-discussion}) Er is nog 1 stap over, namelijk: verwachten we dat deze in de Hall of Fame zou kunnen komen? Laat het weten via een emoticon. @@ -368,11 +369,11 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. Iedereen mag wat vinden, maar de verschillende specialismes uit het kernteam moeten wat vinden. Dus post een linkje naar het 'Hiep hoi' bericht in het #nl-design-system-kernteam kanaal. Je kan `@here` gebruiken om iedereen even wakker te schudden. -Het kernteam bespreekt de component aan het eind van de eerstvolgende weekly. Eventueel benodigde acties worden ter plekke doorgevoerd of voor een volgende sprint vastgelegd. +Het kernteam bespreekt de component aan het eind van de eerstvolgende 'Weekly'. Eventueel benodigde acties worden ter plekke doorgevoerd of voor een volgende sprint vastgelegd. #### Akkoord? -Ga verder bij [Status naar Help Wanted](#status-naar-help-wanted). +Ga verder bij [Status naar Help Wanted](#status-bijgewerkt-naar-help-wanted). **🚩 Checkpoint**: Kernteam = 'Done' @@ -397,36 +398,47 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. ### Schematische afbeelding maken - Maak een schematische afbeelding in het ['Doc website - Afbeeldingen' Figma bestand](https://www.figma.com/file/0Y9Tbb373u6QGxGT6mqUnm/NLDS---Doc-website---Afbeeldingen?type=design&node-id=606-943&mode=design). -- Gebruik als naam voor het frame 'componenten_overzicht_{naam-van-component}. +- Gebruik als naam voor het frame 'componenten_overzicht_{naam-component}. - Exporteer de afbeelding als svg bestand. -Doorloop de volgende stappen om de schematische afbeelding mee te laten kleuren met statussen van het Estafettemodel. - -Tip voor als je deze stap voor het eerst doorloopt. Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. - -1. Open VS code. -2. Ga binnen de [documentatie repository](https://github.com/nl-design-system/documentatie) naar de (folder 'svg')[https://github.com/nl-design-system/documentatie/tree/main/static/svg]. -3. Sleep het svg bestand in deze folder. -Stop de svg daar in door het bestand daar naartoe te slepen -Open een svg bestand -Kies View in de hoofd navigatie en open Command Pallete -Typ svg -Kies preview SVG -Verander alle fill kleuren en stroke kleuren naar design-tokens + fallback -#F9F6F3 wordt var(--component-illustration-background-color, white) -#E4EBED wordt var(--component-illustration-grid-color, #EEE) -#004152 wordt var(--component-illustration-color, Design voor theme validator #666) -white wordt var(--component-illustration-background-color, white) -Voeg een symbol toe zodat de code het svg dynamisch kan inladen inclusief design tokens. -Op regel 2 na de svg start tag: zet -Op de 1-na laatste regel voor zet -Nu zie je geen preview meer. Voeg dus ook toe. Nu ben je klaar! -Maak een branch feat/add-{component}-illustration -Maak een commit feat: add {component} illustration -Push naar GitHub -Maak en PR -Laat het reviewen -✨ Merge! +Doorloop de volgende stappen om de schematische afbeelding mee te laten kleuren met de statussen van het Estafettemodel. + +**Tip!** +Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. + +1. Open de [documentatie repository](https://github.com/nl-design-system/documentatie) in Visual Studio Code. +2. Ga naar de [folder 'svg'](https://github.com/nl-design-system/documentatie/tree/main/static/svg). +3. Sleep het svg bestand in deze folder. De code van het svg bestand wordt direct zichtbaar. +4. Kies 'View' in de hoofd navigatie van Visual Studio Code en open 'Command Pallete...'. +5. Type 'svg' en kies voor 'Preview SVG'. +6. Verwissel alle kleurwaardes van de fills en strokes naar design tokens die zijn aangevuld met een fallback. + +**Tip!** +Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je binnen een bestand stukjes code selecteren die overeen komen met je huidige selectie. + +- `#F9F6F3` wordt `var(--component-illustration-background-color, white)`. +- `#E4EBED` wordt `var(--component-illustration-grid-color, #EEE)`. +- `#004152` wordt `var(--component-illustration-color, #666)`. +- `white` wordt `var(--component-illustration-background-color, white)`. + +7. Voeg de volgende extra code toe zodat het svg bestand dynamisch kan worden ingeladen inclusief design tokens. + +- Op de 2e regel, direct na de ``. +- Op de voorlaatste regel, vlak voor ``, plak je ``. +- Direct daaronder, ook weer vlak voor ``, plak je ``. + +8. Maak de PR aan gebruik hierbij de volgende opzet: + +**Commit Message** +``` +feat: add illustration for {naam-component} +``` +**Branch** +``` +feat/add-illustration-for-{naam-component} +``` + +9. Geef een developer uit het kernteam via Slack een seintje dat de PR klaar staat. ### Documentatie pagina toevoegen @@ -443,7 +455,7 @@ Laat het reviewen ## Status bijgewerkt naar Help Wanted -Doel: iedereen kan zien dat de component nu richting Candidate wil. +Doel: iedereen kan zien dat de component nu richting Community wil. Deze stap kan enkel worden uitgevoerd door het kernteam. From 7411e658a2c9c607688ee86e8d8400e2ba9f47f9 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Tue, 10 Dec 2024 15:40:34 +0100 Subject: [PATCH 3/6] Tussentijds opslaan 3 --- .../help-wanted-stappenplan.mdx | 162 ++++++++++-------- 1 file changed, 91 insertions(+), 71 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index 889bd4c2893..fa180b7d8cb 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -67,7 +67,7 @@ Om de community letterlijk een beeld te geven van de component voegen we een afb Doel: Een plek om input te verzamelen. -We gebruiken [Github 'Discussions' van NL Design System](https://github.com/orgs/nl-design-system/discussions) om input te verzamelen. +We gebruiken [GitHub 'Discussions' van NL Design System](https://github.com/orgs/nl-design-system/discussions) om input te verzamelen. - Start een [GitHub Discussion](https://github.com/orgs/nl-design-system/discussions/new?category=component-suggestions) voor de component. - Vul als titel in: `{naam-component}`. @@ -109,7 +109,7 @@ X, Y, of Z. Doel: Zichtbaarheid en overzicht creëren zodat componenten niet dubbel worden toevoegd. -We gebruiken 'Issues' in de [Github 'Backlog' repository van NL Design System](https://github.com/nl-design-system/backlog/issues) om onze backlog te beheren. +We gebruiken 'Issues' in de [GitHub 'Backlog' repository van NL Design System](https://github.com/nl-design-system/backlog/issues) om onze backlog te beheren. - Maak een ['Issue](https://github.com/nl-design-system/backlog/issues/new) voor de component. - Vul als titel in: `{naam-component}`. @@ -145,7 +145,7 @@ Om meer te leren over de component vragen we de community om hulp. Deze oproep d Vul de beschrijving van de GitHub Discussion aan met de onderstaande oproep. Plaats deze **boven** de informatie die daar al stond zoals Naam, Beschrijving, etc. - Voeg de afbeelding toe. -- Wijzig de 'alt text' die automatisch door Github wordt toegevoegd. Bijvoorbeeld: +- Wijzig de 'alt text' die automatisch door GitHub wordt toegevoegd. Bijvoorbeeld: - `verschillende vormen van een {naam-component} component` - `visuele weergave van een {naam-component} component` - Voeg onderstaande tekst toe, vul aan waar nodig en 'Update' de GitHub Discussion. @@ -153,7 +153,7 @@ Vul de beschrijving van de GitHub Discussion aan met de onderstaande oproep. Pla ```md We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie? -Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. +Deel hieronder een link naar Figma, Storybook, GitHub of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! @@ -175,7 +175,7 @@ Hey community 👋 We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie? -Deel een link naar Figma, Storybook, Github of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. +Deel een link naar Figma, Storybook, GitHub of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! ``` @@ -184,9 +184,9 @@ Vergeet niet de link naar het Slack bericht toe te voegen aan de oproep in de Gi ### Zelf op onderzoek uit -Niet elke organisatie zal op de oproep reageren. Ga daarom ook zelf op onderzoek uit. Duik in Figma, Storybook, Github en documentatie omgevingen voor een 'Screenshot-Safari 📸'. Maak screenshots van de component, varianten en states. Het gaat om bewijs verzamelen dat de component bestaat en in welke vorm, of vormen, deze wordt toegepast. +Niet elke organisatie zal op de oproep reageren. Ga daarom ook zelf op onderzoek uit. Duik in Figma, Storybook, GitHub en documentatie omgevingen voor een 'Screenshot-Safari 📸'. Maak screenshots van de component, varianten en states. Het gaat om bewijs verzamelen dat de component bestaat en in welke vorm, of vormen, deze wordt toegepast. -- Kom je de component niet tegen in Figma, Storybook, Github of documentatie omgevingen? Dan zou je ook de website van de organisatie kunnen bekijken. +- Kom je de component niet tegen in Figma, Storybook, GitHub of documentatie omgevingen? Dan zou je ook de website van de organisatie kunnen bekijken. - Kom je de component maar op 1 plek tegen? Documenteer het nut en noodzaak voor de component met een uitgebreide doelbeschrijving. Gebruikersonderzoek zou je hierbij goed kunnen helpen. Het kernteam houdt deze set van organisaties aan. Hiermee hebben we een mooie mix te pakken van gemeentes, leveranciers en overige overheidsorganisaties. Zelf kun je deze lijst ook gebruiken, maar gebruik gerust andere bronnen. @@ -195,20 +195,20 @@ Het kernteam houdt deze set van organisaties aan. Hiermee hebben we een mooie mi - [Storybook](https://amsterdam.github.io/design-system/?path=/docs/docs-intro--docs) - [Figma](https://www.figma.com/file/9IGm6IdPUYizBNGsUnueBd/Standaard-Design-Library---Desktop?type=design&node-id=1222%3A39437&t=nLmwomuRhjnfhbCa-1) -- [Github](https://github.com/amsterdam/design-system) ([CSS componenten](https://github.com/Amsterdam/design-system/tree/develop/packages/css/src/components)) +- [GitHub](https://github.com/amsterdam/design-system) ([CSS componenten](https://github.com/Amsterdam/design-system/tree/develop/packages/css/src/components)) #### Den Haag - [Storybook](https://nl-design-system.github.io/denhaag/?path=/story/den-haag-introduction--page) - [Figma - Huidig](https://www.figma.com/file/JpoY3waVoQGlLQzQXTL9nn/) - [Figma - WIP](https://www.figma.com/file/x4RkF6BIdrNZbh7D53NTzB/%F0%9F%92%A0-NLDS---Den-Haag---Bibliotheek?type=design&node-id=197%3A664&mode=design&t=F9Lon3x3TsDbzI9q-1) -- [Github](https://github.com/nl-design-system/denhaag) ([CSS componenten](https://github.com/nl-design-system/denhaag/tree/main/components)) +- [GitHub](https://github.com/nl-design-system/denhaag) ([CSS componenten](https://github.com/nl-design-system/denhaag/tree/main/components)) #### DSO - [Documentatie website](https://www.dso-toolkit.nl/) - Storybook bekijken via documentatie website. -- [Github](https://github.com/dso-toolkit/dso-toolkit) ([CSS componenten](https://github.com/dso-toolkit/dso-toolkit/tree/master/packages/dso-toolkit/src/components)) +- [GitHub](https://github.com/dso-toolkit/dso-toolkit) ([CSS componenten](https://github.com/dso-toolkit/dso-toolkit/tree/master/packages/dso-toolkit/src/components)) #### DUO @@ -230,21 +230,21 @@ Gebruik in Patternlab het linkadres van de `h2` of `h3` om naar een specifiek on - [Storybook](https://nl-design-system.github.io/rotterdam/?path=/docs/rotterdam-rotterdam-design-system--docs) - [Figma - Fundament](https://www.figma.com/design/RiVsTfcbmnKSU2BGqQBI9n/RODS-fundament?m=auto&node-id=37-1964&t=4HB7uIyaVunmBW6Z-1) - [Figma - Component](https://www.figma.com/design/iWuQsxelJzXVfCge87Og81/RODS-component?m=auto&node-id=0-1&t=uSL3DDt2TD2JBfoT-1) -- [Github](https://github.com/nl-design-system/rotterdam) ([CSS componenten](https://github.com/nl-design-system/rotterdam/tree/main/packages/components-css)) +- [GitHub](https://github.com/nl-design-system/rotterdam) ([CSS componenten](https://github.com/nl-design-system/rotterdam/tree/main/packages/components-css)) #### RVO - [Documentatie website](https://nl-design-system.github.io/rvo/docs/) - [Storybook](https://nl-design-system.github.io/rvo/?path=/docs/introductie--docs) - [Figma]() -- [Github](https://github.com/nl-design-system/rvo) ([CSS componenten](https://github.com/nl-design-system/rvo/tree/master/components)) +- [GitHub](https://github.com/nl-design-system/rvo) ([CSS componenten](https://github.com/nl-design-system/rvo/tree/master/components)) #### Utrecht - [Documentatie website](https://nl-design-system.github.io/utrecht/) - [Storybook](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/utrecht-readme--docs) - [Figma](https://www.figma.com/file/UXIHcIurAD8hyoBWx4hDBV/NLDS---Gemeente-Utrecht---Bibliotheek?type=design&node-id=197%3A664&mode=design&t=QPCkq0xOt8SFquC4-1) -- [Github](https://github.com/nl-design-system/utrecht) ([CSS componenten](https://github.com/nl-design-system/utrecht/tree/main/components)) +- [GitHub](https://github.com/nl-design-system/utrecht) ([CSS componenten](https://github.com/nl-design-system/utrecht/tree/main/components)) ### Bevindingen vastleggen @@ -258,7 +258,7 @@ Voeg per organisatie een losse comment toe aan de GitHub Discussion. Gebruik ond - [Documentatie website]({link-documentatie-website}) - [Storybook]({link-storybook}) - [Figma]({link-figma}) -- [Github]({link-github}) +- [GitHub]({link-github}) --- @@ -384,11 +384,38 @@ Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. ```md ❌ Het kernteam heeft besloten dat de naam en beschrijving van dit component duidelijk zijn, maar niet voldoende nuttig is voor meerdere organisaties. -Dit hoeft niet te betekenen dat {naam-component} nooit de Help Wanted status krijgt. De [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. +Dit hoeft niet te betekenen dat {naam-component} nooit de Help Wanted status krijgt. De [GitHub Discussion voor de {naam-component} component]({link-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. ``` **🚩 Checkpoint**: Kernteam = 'Declined' +## Status bijgewerkt naar Help Wanted + +Doel: iedereen kan zien dat de component nu richting Community wil. + +Deze stap kan enkel worden uitgevoerd door het kernteam. + +1. Voeg het 'Help Wanted' label toe aan de GitHub Discussion. +2. Voeg het 'Help Wanted' label toe aan het backlog issue. +3. Selecteer bij ‘Projects’ de volgende extra projecten: + +- Components - 2 - Community +- Components - 3 - Candidate +- Components - 4 - Hall of Fame + +4. Filter het [Community bord](https://github.com/orgs/nl-design-system/projects/29/views/1) op de component door op `{naam-component}` te zoeken. +5. Kopieer de url na het filteren. +6. Voeg onderstaande tekst toe als comment aan de GitHub Discussion. + +```md +## ✨ Dit component is nu Help Wanted ✨ + +Help je mee hem door de Community stappen te krijgen? +[{naam-component} op het Community bord]({url-community-bord}) +``` + +**🚩 Checkpoint**: Status + ## Vindbaar op de NL Design System website Doel: Hierdoor kan de component worden opgepakt door de community. @@ -401,82 +428,81 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. - Gebruik als naam voor het frame 'componenten_overzicht_{naam-component}. - Exporteer de afbeelding als svg bestand. +### Branch klaar zetten +- Open de [documentatie repository](https://github.com/nl-design-system/documentatie) in Visual Studio Code. +- Maak een nieuwe branch aan gebruik hiervoor de volgende naam: + +**Branch** +``` +feat/add-documentation-page-for-{naam-component} +``` + +### Schematische afbeelding bewerken en toevoegen + Doorloop de volgende stappen om de schematische afbeelding mee te laten kleuren met de statussen van het Estafettemodel. **Tip!** Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. -1. Open de [documentatie repository](https://github.com/nl-design-system/documentatie) in Visual Studio Code. -2. Ga naar de [folder 'svg'](https://github.com/nl-design-system/documentatie/tree/main/static/svg). -3. Sleep het svg bestand in deze folder. De code van het svg bestand wordt direct zichtbaar. -4. Kies 'View' in de hoofd navigatie van Visual Studio Code en open 'Command Pallete...'. -5. Type 'svg' en kies voor 'Preview SVG'. -6. Verwissel alle kleurwaardes van de fills en strokes naar design tokens die zijn aangevuld met een fallback. +- Ga naar de [folder 'static/svg'](https://github.com/nl-design-system/documentatie/tree/main/static/svg). +- Sleep het svg bestand in deze folder. De code van het svg bestand wordt zichtbaar. +- Kies 'View' in de hoofd navigatie van Visual Studio Code en open 'Command Pallete...'. +- Type 'svg' en kies voor 'Preview SVG'. De visuele weergave van het svg bestand wordt zichtbaar. +- Verwissel alle kleurwaardes van de fills en strokes naar design tokens die zijn aangevuld met een fallback. + - `#F9F6F3` wordt `var(--component-illustration-background-color, white)`. + - `#E4EBED` wordt `var(--component-illustration-grid-color, #EEE)`. + - `#004152` wordt `var(--component-illustration-color, #666)`. + - `white` wordt `var(--component-illustration-background-color, white)`. **Tip!** -Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je binnen een bestand stukjes code selecteren die overeen komen met je huidige selectie. - -- `#F9F6F3` wordt `var(--component-illustration-background-color, white)`. -- `#E4EBED` wordt `var(--component-illustration-grid-color, #EEE)`. -- `#004152` wordt `var(--component-illustration-color, #666)`. -- `white` wordt `var(--component-illustration-background-color, white)`. +Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je stukjes code selecteren die overeen komen met je huidige selectie. -7. Voeg de volgende extra code toe zodat het svg bestand dynamisch kan worden ingeladen inclusief design tokens. - -- Op de 2e regel, direct na de ``. -- Op de voorlaatste regel, vlak voor ``, plak je ``. -- Direct daaronder, ook weer vlak voor ``, plak je ``. - -8. Maak de PR aan gebruik hierbij de volgende opzet: +- Voeg de volgende stukjes code toe zodat het svg bestand dynamisch kan worden ingeladen. + - Op de 2e regel, direct na ``. + - Op de voorlaatste regel, vlak voor ``, plak je ``. + - Direct daaronder, ook weer vlak voor ``, plak je ``. +- Maak een commit en gebruik hierbij het volgende bericht: **Commit Message** ``` feat: add illustration for {naam-component} ``` -**Branch** -``` -feat/add-illustration-for-{naam-component} -``` - -9. Geef een developer uit het kernteam via Slack een seintje dat de PR klaar staat. ### Documentatie pagina toevoegen -- Component toegevoegd aan de [documentatie repository](https://github.com/nl-design-system/documentatie/tree/main/docs/componenten) met behulp van [de component template](https://raw.githubusercontent.com/nl-design-system/documentatie/main/docs/componenten/_template.mdx). +- Ga naar de [folder 'docs/componenten'](https://github.com/nl-design-system/documentatie/tree/main/docs/componenten). +- Voeg een nieuwe folder toe voor de component, gebruik hiervoor kebab-case als schrijfwijze. +- Voeg een nieuw bestand toe en noem deze 'index.mdx'. +- Vul het bestand op basis van [de component template](https://raw.githubusercontent.com/nl-design-system/documentatie/main/docs/componenten/_template.mdx). +- Maak een commit en gebruik hierbij het volgende bericht: + +**Commit Message** +``` +feat: add documentation page for {naam-component} +``` ### Component progress bijwerken - Publiceer een nieuwe versie van het `component-progress` package door op `Run Workflow` te klikken op [GitHub Actions van de Index repository](https://github.com/nl-design-system/index/actions/workflows/update-component-progress.yml). Kies hierbij voor de `main` branch. - Wacht tot [component-progress op npm](https://www.npmjs.com/package/@nl-design-system/component-progress) is bijgewerkt. Dat zie je door naar `Last publish` te kijken. -- Update `@nl-design-system/component-progress` in de documentatie repository. Dat doe je door lokaal in een nieuwe branch `pnpm install @nl-design-system/component-progress@latest --save-dev -w` te draaien. Dit update de devDependency en de lockfile. -- Push je branch naar GitHub en maak er een pull request voor aan. - -**🚩 Checkpoint**: nldesignsystem.nl - -## Status bijgewerkt naar Help Wanted +- Update `@nl-design-system/component-progress` in de documentatie repository. Dat doe je door lokaal in de branch `pnpm install @nl-design-system/component-progress@latest --save-dev -w` te draaien. Dit update de devDependency en de lockfile. +- Maak een commit en gebruik hierbij het volgende bericht: -Doel: iedereen kan zien dat de component nu richting Community wil. +**Commit Message** +``` +build: update component progress +``` -Deze stap kan enkel worden uitgevoerd door het kernteam. +### Branch pushen -1. Voeg het 'Help Wanted' label toe aan de GitHub Discussion. -2. Voeg het 'Help Wanted' label toe aan het backlog issue. -3. Selecteer bij ‘Projects’ de volgende extra projecten: +- Push je branch naar GitHub en maak een pull request (PR) aan. +- Geef een developer uit het kernteam via Slack een seintje dat de PR klaar staat. -- Components - 2 - Community -- Components - 3 - Candidate -- Components - 4 - Hall of Fame - -4. Filter het [Community bord](https://github.com/orgs/nl-design-system/projects/29/views/1) op de component door op `{naam-component}` te zoeken. -5. Kopieer de url na het filteren. -6. Voeg onderstaande tekst toe als comment aan de GitHub Discussion. +**🚩 Checkpoint**: nldesignsystem.nl -```md -## ✨ Dit component is nu Help Wanted ✨ +## 🏁 Finish -Help je mee hem door de Community stappen te krijgen? -[{naam-component} op het Community bord]({url-community-bord}) -``` +Zo wat een werk! Je hebt alle stappen genomen en zo alle checkpoints behaald die nodig zijn voor de ['Help Wanted' status](https://github.com/orgs/nl-design-system/projects/27/views/1) van het [Estafettemodel](https://www.nldesignsystem.nl/componenten/definition-of-done). De component gaat nu door voor de 'Community' status. Goed om dit ook mede te delen aan de rest van de community. Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. @@ -488,11 +514,5 @@ Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. Help je mee hem door de Community stappen te krijgen? [{naam-component} op het Community bord]({url-community-bord}) -De [GitHub Discussion voor de {naam-component} component]({link-naar-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. +De [GitHub Discussion voor de {naam-component} component]({link-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. ``` - -**🚩 Checkpoint**: Status - -## 🏁 Finish - -Zo wat een werk! Je hebt alle stappen genomen en zo alle checkpoints behaald die nodig zijn voor de ['Help Wanted' status](https://github.com/orgs/nl-design-system/projects/27/views/1) van het [Estafettemodel](https://www.nldesignsystem.nl/componenten/definition-of-done). De component gaat nu door voor de 'Community' status. From 92040d96fc97eb43a22222506f16e8e5ca443fbe Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Tue, 10 Dec 2024 16:10:08 +0100 Subject: [PATCH 4/6] Tussentijds opslaan 4 --- .../help-wanted-stappenplan.mdx | 65 +++++++++++++------ 1 file changed, 44 insertions(+), 21 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index fa180b7d8cb..4b1daeeeded 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -69,10 +69,13 @@ Doel: Een plek om input te verzamelen. We gebruiken [GitHub 'Discussions' van NL Design System](https://github.com/orgs/nl-design-system/discussions) om input te verzamelen. -- Start een [GitHub Discussion](https://github.com/orgs/nl-design-system/discussions/new?category=component-suggestions) voor de component. -- Vul als titel in: `{naam-component}`. -- Vul als beschrijving onderstaande template in en start de GitHub Discussion. +Start een [GitHub Discussion](https://github.com/orgs/nl-design-system/discussions/new?category=component-suggestions) voor de component. Gebruik hierbij de volgende opzet: +**Title** +``` +{naam-component} +``` +**Description** ```md ## Naam @@ -111,10 +114,14 @@ Doel: Zichtbaarheid en overzicht creëren zodat componenten niet dubbel worden t We gebruiken 'Issues' in de [GitHub 'Backlog' repository van NL Design System](https://github.com/nl-design-system/backlog/issues) om onze backlog te beheren. -- Maak een ['Issue](https://github.com/nl-design-system/backlog/issues/new) voor de component. -- Vul als titel in: `{naam-component}`. -- Vul als beschrijving onderstaande template in en maak het issue aan. +Maak een ['Issue](https://github.com/nl-design-system/backlog/issues/new) voor de component. Gebruik hierbij de volgende opzet: +**Title** +``` +{naam-component} +``` + +**Description** ```md ## Naam @@ -123,8 +130,11 @@ We gebruiken 'Issues' in de [GitHub 'Backlog' repository van NL Design System](h [Link naar GitHub Discussion]({link-github-discussion}) ``` -Selecteer bij 'Labels' het label: Component. -Selecteer bij 'Projects' het project: Components - 1 - Help Wanted. +- Selecteer bij 'Labels' het label: Component. +- Selecteer bij 'Projects' het project: Components - 1 - Help Wanted. + +**Tip!** +Het selecteren van labels en projects kan alleen door het kernteam worden gedaan. Vraag ons gerust even om hulp, kleine moeite. **🚩 Checkpoint**: Backlog @@ -395,17 +405,15 @@ Doel: iedereen kan zien dat de component nu richting Community wil. Deze stap kan enkel worden uitgevoerd door het kernteam. -1. Voeg het 'Help Wanted' label toe aan de GitHub Discussion. -2. Voeg het 'Help Wanted' label toe aan het backlog issue. -3. Selecteer bij ‘Projects’ de volgende extra projecten: - -- Components - 2 - Community -- Components - 3 - Candidate -- Components - 4 - Hall of Fame - -4. Filter het [Community bord](https://github.com/orgs/nl-design-system/projects/29/views/1) op de component door op `{naam-component}` te zoeken. -5. Kopieer de url na het filteren. -6. Voeg onderstaande tekst toe als comment aan de GitHub Discussion. +- Voeg het 'Help Wanted' label toe aan de GitHub Discussion. +- Voeg het 'Help Wanted' label toe aan het backlog issue. +- Selecteer bij ‘Projects’ de volgende extra projecten: + - Components - 2 - Community + - Components - 3 - Candidate + - Components - 4 - Hall of Fame +- Filter het [Community bord](https://github.com/orgs/nl-design-system/projects/29/views/1) op de component door op `{naam-component}` te zoeken. +- Kopieer de url na het filteren. +- Voeg onderstaande tekst toe als comment aan de GitHub Discussion. ```md ## ✨ Dit component is nu Help Wanted ✨ @@ -493,9 +501,24 @@ feat: add documentation page for {naam-component} build: update component progress ``` -### Branch pushen +### Branch publiceren + +- Publiceer je branch naar GitHub om een pull request (PR) aan te maken. +- Ga naar GitHub en gebruik de volgende opzet voor je PR: + +**Title** +``` +docs: add {naam-component} to documentation site +``` + +**Description** +``` +- add illustration for {naam-component}. +- add documentation page for {naam-component}. +- update component progress. +``` -- Push je branch naar GitHub en maak een pull request (PR) aan. +- Klik op 'Create Pull Request' - Geef een developer uit het kernteam via Slack een seintje dat de PR klaar staat. **🚩 Checkpoint**: nldesignsystem.nl From 90848c08511b4a8d362ec9b27b80daac3c7da5f8 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Wed, 11 Dec 2024 10:24:23 +0100 Subject: [PATCH 5/6] Apply suggestions from code review Fijne suggesties! Dank Roos Co-authored-by: Rozerin <84851545+Rozerinay@users.noreply.github.com> --- .../help-wanted-stappenplan.mdx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index 4b1daeeeded..0576f2cf8d8 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -434,11 +434,11 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. - Maak een schematische afbeelding in het ['Doc website - Afbeeldingen' Figma bestand](https://www.figma.com/file/0Y9Tbb373u6QGxGT6mqUnm/NLDS---Doc-website---Afbeeldingen?type=design&node-id=606-943&mode=design). - Gebruik als naam voor het frame 'componenten_overzicht_{naam-component}. -- Exporteer de afbeelding als svg bestand. +- Exporteer de afbeelding als SVG-bestand. ### Branch klaar zetten - Open de [documentatie repository](https://github.com/nl-design-system/documentatie) in Visual Studio Code. -- Maak een nieuwe branch aan gebruik hiervoor de volgende naam: +- Maak een nieuwe branch aan. Gebruik hiervoor de volgende naam: **Branch** ``` @@ -453,9 +453,9 @@ Doorloop de volgende stappen om de schematische afbeelding mee te laten kleuren Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. - Ga naar de [folder 'static/svg'](https://github.com/nl-design-system/documentatie/tree/main/static/svg). -- Sleep het svg bestand in deze folder. De code van het svg bestand wordt zichtbaar. -- Kies 'View' in de hoofd navigatie van Visual Studio Code en open 'Command Pallete...'. -- Type 'svg' en kies voor 'Preview SVG'. De visuele weergave van het svg bestand wordt zichtbaar. +- Sleep het SVG-bestand in deze folder. De code van het SVG-bestand wordt zichtbaar. +- Kies 'View' in de hoofdnavigatie van Visual Studio Code en open 'Command Palette...'. +- Typ 'svg' en kies voor 'Preview SVG'. De visuele weergave van het SVG-bestand wordt vervolgens zichtbaar. - Verwissel alle kleurwaardes van de fills en strokes naar design tokens die zijn aangevuld met een fallback. - `#F9F6F3` wordt `var(--component-illustration-background-color, white)`. - `#E4EBED` wordt `var(--component-illustration-grid-color, #EEE)`. @@ -463,9 +463,9 @@ Installeer in Visual Studio Code de extentie 'SVG' ontwikkeld door Jock. - `white` wordt `var(--component-illustration-background-color, white)`. **Tip!** -Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je stukjes code selecteren die overeen komen met je huidige selectie. +Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je stukjes code selecteren die overeenkomen met je huidige selectie. -- Voeg de volgende stukjes code toe zodat het svg bestand dynamisch kan worden ingeladen. +- Voeg de volgende stukjes code toe om het SVG-bestand dynamisch in te laden. - Op de 2e regel, direct na ``. - Op de voorlaatste regel, vlak voor ``, plak je ``. - Direct daaronder, ook weer vlak voor ``, plak je ``. @@ -479,9 +479,9 @@ feat: add illustration for {naam-component} ### Documentatie pagina toevoegen - Ga naar de [folder 'docs/componenten'](https://github.com/nl-design-system/documentatie/tree/main/docs/componenten). -- Voeg een nieuwe folder toe voor de component, gebruik hiervoor kebab-case als schrijfwijze. -- Voeg een nieuw bestand toe en noem deze 'index.mdx'. -- Vul het bestand op basis van [de component template](https://raw.githubusercontent.com/nl-design-system/documentatie/main/docs/componenten/_template.mdx). +- Voeg een nieuwe folder toe voor de component en gebruik hiervoor kebab-case als schrijfwijze. +- Maak een nieuw bestand aan en noem het 'index.mdx'. +- Vul het bestand in volgens [de component template](https://raw.githubusercontent.com/nl-design-system/documentatie/main/docs/componenten/_template.mdx). - Maak een commit en gebruik hierbij het volgende bericht: **Commit Message** @@ -491,8 +491,8 @@ feat: add documentation page for {naam-component} ### Component progress bijwerken -- Publiceer een nieuwe versie van het `component-progress` package door op `Run Workflow` te klikken op [GitHub Actions van de Index repository](https://github.com/nl-design-system/index/actions/workflows/update-component-progress.yml). Kies hierbij voor de `main` branch. -- Wacht tot [component-progress op npm](https://www.npmjs.com/package/@nl-design-system/component-progress) is bijgewerkt. Dat zie je door naar `Last publish` te kijken. +- Publiceer een nieuwe versie van het `component-progress` package door op `Run Workflow` te klikken in [GitHub Actions van de Index repository](https://github.com/nl-design-system/index/actions/workflows/update-component-progress.yml). Kies hierbij voor de `main` branch. +- Wacht tot [component-progress op npm](https://www.npmjs.com/package/@nl-design-system/component-progress) is bijgewerkt. Je kunt dit controleren door te kijken naar de datum bij `Last publish`. - Update `@nl-design-system/component-progress` in de documentatie repository. Dat doe je door lokaal in de branch `pnpm install @nl-design-system/component-progress@latest --save-dev -w` te draaien. Dit update de devDependency en de lockfile. - Maak een commit en gebruik hierbij het volgende bericht: @@ -518,14 +518,14 @@ docs: add {naam-component} to documentation site - update component progress. ``` -- Klik op 'Create Pull Request' +- Klik op 'Create Pull Request'. - Geef een developer uit het kernteam via Slack een seintje dat de PR klaar staat. **🚩 Checkpoint**: nldesignsystem.nl ## 🏁 Finish -Zo wat een werk! Je hebt alle stappen genomen en zo alle checkpoints behaald die nodig zijn voor de ['Help Wanted' status](https://github.com/orgs/nl-design-system/projects/27/views/1) van het [Estafettemodel](https://www.nldesignsystem.nl/componenten/definition-of-done). De component gaat nu door voor de 'Community' status. Goed om dit ook mede te delen aan de rest van de community. +Zo wat een werk! Je hebt alle stappen genomen en zo alle checkpoints behaald die nodig zijn voor de ['Help Wanted' status](https://github.com/orgs/nl-design-system/projects/27/views/1) van het [Estafettemodel](https://www.nldesignsystem.nl/componenten/definition-of-done). De component gaat nu door voor de 'Community' status. Het is goed om dit ook met de rest van de community te delen. Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. From d1718a97372a77b08d2bb67bbfc1a505c6469a90 Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Wed, 11 Dec 2024 15:21:45 +0100 Subject: [PATCH 6/6] docs: url in plaats van link --- .../help-wanted-stappenplan.mdx | 44 ++++++++++++------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx index 0576f2cf8d8..468682afb8c 100644 --- a/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx +++ b/docs/handboek/component-bijdragen/help-wanted-stappenplan.mdx @@ -72,10 +72,13 @@ We gebruiken [GitHub 'Discussions' van NL Design System](https://github.com/orgs Start een [GitHub Discussion](https://github.com/orgs/nl-design-system/discussions/new?category=component-suggestions) voor de component. Gebruik hierbij de volgende opzet: **Title** + ``` {naam-component} ``` + **Description** + ```md ## Naam @@ -117,17 +120,19 @@ We gebruiken 'Issues' in de [GitHub 'Backlog' repository van NL Design System](h Maak een ['Issue](https://github.com/nl-design-system/backlog/issues/new) voor de component. Gebruik hierbij de volgende opzet: **Title** + ``` {naam-component} ``` **Description** + ```md ## Naam {naam-component} -[Link naar GitHub Discussion]({link-github-discussion}) +[Link naar GitHub Discussion]({url-github-discussion}) ``` - Selecteer bij 'Labels' het label: Component. @@ -167,7 +172,7 @@ Deel hieronder een link naar Figma, Storybook, GitHub of screenshots. Met deze i Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! -[Link naar bericht in Slack]({link-slack-bericht}) +[Link naar bericht in Slack]({url-slack-bericht}) --- ``` @@ -185,7 +190,7 @@ Hey community 👋 We willen graag meer leren over de {naam-component} component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie? -Deel een link naar Figma, Storybook, GitHub of screenshots in de [GitHub Discussion voor de {naam-component} component]({link-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. +Deel een link naar Figma, Storybook, GitHub of screenshots in de [GitHub Discussion voor de {naam-component} component]({url-github-discussion}), of in een thread onder dit bericht. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library. Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag! ``` @@ -265,10 +270,10 @@ Voeg per organisatie een losse comment toe aan de GitHub Discussion. Gebruik ond -- [Documentatie website]({link-documentatie-website}) -- [Storybook]({link-storybook}) -- [Figma]({link-figma}) -- [GitHub]({link-github}) +- [Documentatie website]({url-documentatie-website}) +- [Storybook]({url-storybook}) +- [Figma]({url-figma}) +- [GitHub]({url-github}) --- @@ -336,13 +341,13 @@ Plaats verwijzingen naar onderzoek onderaan in de beschrijving van de GitHub Dis ```md ## Onderzoek -[Titel - Afzender](link) +[Titel - Afzender](url) Korte beschrijving -[Titel - Afzender](link) +[Titel - Afzender](url) Korte beschrijving -[Titel - Afzender (PDF, 124 kb](link) +[Titel - Afzender (PDF, 124 kb)](url) Korte beschrijving ``` @@ -364,7 +369,7 @@ Het is zover, de volgende component is helemaal klaar voor een Help Wanted stemp Naam: **{naam-component}** Beschrijving: **{beschrijving-component}** -[GitHub Discussion voor de {naam-component} component]({link-github-discussion}) +[GitHub Discussion voor de {naam-component} component]({url-github-discussion}) Er is nog 1 stap over, namelijk: verwachten we dat deze in de Hall of Fame zou kunnen komen? Laat het weten via een emoticon. @@ -377,7 +382,7 @@ Er is nog 1 stap over, namelijk: verwachten we dat deze in de Hall of Fame zou k Deze stap kan enkel worden uitgevoerd door het kernteam. -Iedereen mag wat vinden, maar de verschillende specialismes uit het kernteam moeten wat vinden. Dus post een linkje naar het 'Hiep hoi' bericht in het #nl-design-system-kernteam kanaal. Je kan `@here` gebruiken om iedereen even wakker te schudden. +Iedereen mag wat vinden, maar de verschillende specialismes uit het kernteam moeten wat vinden. Dus post een link naar het 'Hiep hoi' bericht in het #nl-design-system-kernteam kanaal. Je kan `@here` gebruiken om iedereen even wakker te schudden. Het kernteam bespreekt de component aan het eind van de eerstvolgende 'Weekly'. Eventueel benodigde acties worden ter plekke doorgevoerd of voor een volgende sprint vastgelegd. @@ -394,7 +399,7 @@ Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. ```md ❌ Het kernteam heeft besloten dat de naam en beschrijving van dit component duidelijk zijn, maar niet voldoende nuttig is voor meerdere organisaties. -Dit hoeft niet te betekenen dat {naam-component} nooit de Help Wanted status krijgt. De [GitHub Discussion voor de {naam-component} component]({link-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. +Dit hoeft niet te betekenen dat {naam-component} nooit de Help Wanted status krijgt. De [GitHub Discussion voor de {naam-component} component]({url-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. ``` **🚩 Checkpoint**: Kernteam = 'Declined' @@ -412,7 +417,7 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. - Components - 3 - Candidate - Components - 4 - Hall of Fame - Filter het [Community bord](https://github.com/orgs/nl-design-system/projects/29/views/1) op de component door op `{naam-component}` te zoeken. -- Kopieer de url na het filteren. +- Kopieer de URL na het filteren. - Voeg onderstaande tekst toe als comment aan de GitHub Discussion. ```md @@ -433,14 +438,16 @@ Deze stap kan enkel worden uitgevoerd door het kernteam. ### Schematische afbeelding maken - Maak een schematische afbeelding in het ['Doc website - Afbeeldingen' Figma bestand](https://www.figma.com/file/0Y9Tbb373u6QGxGT6mqUnm/NLDS---Doc-website---Afbeeldingen?type=design&node-id=606-943&mode=design). -- Gebruik als naam voor het frame 'componenten_overzicht_{naam-component}. +- Gebruik als naam voor het frame 'componenten*overzicht*{naam-component}. - Exporteer de afbeelding als SVG-bestand. ### Branch klaar zetten + - Open de [documentatie repository](https://github.com/nl-design-system/documentatie) in Visual Studio Code. - Maak een nieuwe branch aan. Gebruik hiervoor de volgende naam: **Branch** + ``` feat/add-documentation-page-for-{naam-component} ``` @@ -472,6 +479,7 @@ Met de toetscombinatie `Cmd+D` (of `Ctrl+D`) kun je stukjes code selecteren die - Maak een commit en gebruik hierbij het volgende bericht: **Commit Message** + ``` feat: add illustration for {naam-component} ``` @@ -485,6 +493,7 @@ feat: add illustration for {naam-component} - Maak een commit en gebruik hierbij het volgende bericht: **Commit Message** + ``` feat: add documentation page for {naam-component} ``` @@ -497,6 +506,7 @@ feat: add documentation page for {naam-component} - Maak een commit en gebruik hierbij het volgende bericht: **Commit Message** + ``` build: update component progress ``` @@ -507,11 +517,13 @@ build: update component progress - Ga naar GitHub en gebruik de volgende opzet voor je PR: **Title** + ``` docs: add {naam-component} to documentation site ``` **Description** + ``` - add illustration for {naam-component}. - add documentation page for {naam-component}. @@ -537,5 +549,5 @@ Plaats deze tekst in de 'thread' van het 'Hiep hoi' bericht, vul aan waar nodig. Help je mee hem door de Community stappen te krijgen? [{naam-component} op het Community bord]({url-community-bord}) -De [GitHub Discussion voor de {naam-component} component]({link-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. +De [GitHub Discussion voor de {naam-component} component]({url-github-discussion}) blijft beschikbaar voor het delen van voorbeelden, varianten en gebruikersonderzoek. ```