Skip to content

Commit f117f5d

Browse files
eslookCharlotte Gieltjes
eslook
and
Charlotte Gieltjes
authored
docs: create script for generating default stories (#1036)
Ontstaan bij aanmaken van packages en stories voor #989 Issue voor aangemaakt: #1037. Credits aan Peter voor het originele create-package.sh. --------- Co-authored-by: Charlotte Gieltjes <charlotte.gieltjes@rebels.io>
1 parent a89009e commit f117f5d

22 files changed

+816
-102
lines changed

‎.github/ISSUE_TEMPLATE/304-🛠️-documentatie.md‎

Lines changed: 150 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,53 +22,69 @@ type: Task
2222

2323
Zorg dat de `README.md` genoeg informatie bevat voor developers om aan de slag te gaan. Omdat deze op npmjs.org wordt gepubliceerd maken we deze documentatie in het engels beschikbaar.
2424

25-
Je kunt hiervoor dit volgende template gebruiken
25+
In de stap "Voorbereidingsfase - Keywords en aliassen - Maak de packages beschikbaar voor de nieuwe Candidate component" is de basis component docs gegenereerd. Hier moet je de volgende dingen aan uitbreiden.
2626

27-
````md
28-
<!-- @license CC0-1.0 -->
27+
#### 1. Breid de code snippets uit in Usage
2928

30-
# {component} React
29+
In "Usage", breid de code snippets uit met voorbeelden. Je kunt hiervoor dit volgende template aanhouden:
3130

32-
{translation of the component description we use on the website}
31+
````md
32+
...
3333

34-
## Installation
34+
## Usage
3535

36-
Using npm
36+
If you want the React component with styles
3737

38-
```shell
39-
npm install @nl-design-system-candidate/{component}-react
38+
```jsx
39+
import { {component} } from '@nl-design-system-candidate/{component}-react/css';
40+
41+
{Code used in Default Story};
4042
```
4143

42-
Using pnpm
44+
If you just want the React component and import the styles separately
45+
46+
```jsx
47+
import { {component} } from '@nl-design-system-candidate/{component}-react';
4348

44-
```shell
45-
pnpm add @nl-design-system-candidate/{component}-react
49+
{React used in Default Story};
4650
```
4751

48-
Using yarn
52+
...
53+
````
4954

50-
```shell
51-
yarn add @nl-design-system-candidate/{component}-react
52-
```
55+
Voorbeeld:
56+
57+
````md
58+
...
5359

5460
## Usage
5561

5662
If you want the React component with styles
5763

5864
```jsx
59-
import { {component} } from '@nl-design-system-candidate/{component}-react/css';
65+
import { Button } from '@nl-design-system-candidate/button-react/css';
6066

61-
{Code used in Default Story};
67+
<Button>Click here!</Button>;
6268
```
6369

6470
If you just want the React component and import the styles separately
6571

6672
```jsx
67-
import { {component} } from '@nl-design-system-candidate/{component}-react';
73+
import { Button } from '@nl-design-system-candidate/button-react';
6874

69-
{React used in Default Story};
75+
<Button>Click here!</Button>;
7076
```
7177

78+
...
79+
````
80+
81+
#### 2. Voeg Variants toe na Usage
82+
83+
Na "Usage", voeg het kopje "Variants" toe. Je kunt hiervoor dit volgende template gebruiken:
84+
85+
````md
86+
...
87+
7288
## Variants
7389

7490
### VariantX
@@ -79,27 +95,132 @@ import { {component} } from '@nl-design-system-candidate/{component}-react';
7995
{React used in VariantX Story}
8096
```
8197

82-
## Design Tokens
98+
...
99+
````
100+
101+
Voorbeeld:
102+
103+
````md
104+
...
83105

84-
All NL Design System components are white label. Use {component} design tokens to ensure it matches your brand styles. [https://nldesignsystem.nl/handboek/huisstijl/design-tokens/](https://nldesignsystem.nl/handboek/huisstijl/design-tokens/).
106+
## Variants
107+
108+
### Primary Button
85109

86-
The tokens used for {component} can be found in the tokens documentation [@nl-design-system-candidate/{component}-tokens](https://www.npmjs.com/package/@nl-design-system-candidate/{component}-tokens).
110+
Button that indicates a primary action. It is the most logical choice in a flow. Use primary buttons sparingly. Too many primary buttons on the screen can be confusing for the user. Optionally, a hint can be provided.
111+
112+
```jsx
113+
<Button label="Primary Button" purpose="primary" />
114+
```
87115

88-
## Other implementations
116+
#### Primary Button with hint="positive"
89117

90-
Want to use the {component} with other frameworks or vanilla JavaScript? The React component is based on
91-
[@nl-design-system-candidate/{component}-css](https://www.npmjs.com/package/@nl-design-system-candidate/{component}-css).
118+
Indicates a positive or successful outcome. For example, an action to create something.
92119

93-
## Figma, Storybook and more
120+
```jsx
121+
<Button hint="positive" label="Send form" purpose="primary" />
122+
```
94123

95-
Read more about the {component} in Dutch and find links to other resources like Figma and Storybook on [https://nldesignsystem.nl/{component}](https://nldesignsystem.nl/{component}).
124+
...
96125
````
97126

98127
### Documenteer de CSS component voor developers
99128

100129
Zorg dat de `README.md` genoeg informatie bevat voor developers om aan de slag te gaan. Omdat deze op npmjs.org wordt gepubliceerd maken we deze documentatie in het engels beschikbaar.
101130

102-
<!-- TODO: breid deze documentatie uit wanneer deze stap opnieuw word uitgevoerd -->
131+
In de stap "Voorbereidingsfase - Keywords en aliassen - Maak de packages beschikbaar voor de nieuwe Candidate component" is de basis component docs gegenereerd. Hier moet je de volgende dingen aan uitbreiden:
132+
133+
```md
134+
...
135+
136+
## Beschikbare classes
137+
138+
| naam | beschrijving |
139+
| ---- | ------------ |
140+
| | |
141+
142+
## Beschikbare attributen
143+
144+
...
145+
```
146+
147+
Voorbeeld:
148+
149+
````md
150+
...
151+
152+
## Beschikbare classes
153+
154+
| naam | beschrijving |
155+
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
156+
| `.nl-button` | De hoofd class, te gebruiken op een `<button>` element |
157+
| `.nl-button--primary` | Maakt van de button [een primary button](https://nl-design-system.github.io/candidate/?path=/docs/button--documentatie#primary-button-1) |
158+
| `.nl-button--secondarty` | Maakt van de button [een secondary button](https://nl-design-system.github.io/candidate/?path=/docs/button--documentatie#secondary-button-1) |
159+
| `.nl-button--subtle` | Maakt van de button [een subtle button](https://nl-design-system.github.io/candidate/?path=/docs/button--documentatie#subtle-button-1) |
160+
| `.nl-button--positive` | Indicatie van een positief of bevestigend resultaat |
161+
| `.nl-button--negative` | Indicatie van een negatief resultaat |
162+
| `.nl-button__icon-start` | Een child element (`<span>`) met een voor aan het begin icoon |
163+
| `.nl-button__icon-end` | Een child element (`<span>`) met een voor aan het eind icoon |
164+
165+
## Beschikbare attributen
166+
167+
De NL Button accepteert alle attributen die een native HTML button ook accepteert.
168+
Zie de [Button MDN pagina](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes)
169+
voor een volledig overzicht.
170+
171+
Er zijn een aantal attributen die extra aandacht vragen:
172+
173+
### Een toggle button met `aria-pressed`
174+
175+
Gebruik `aria-pressed="true"` om aan te geven dat de toggle button ingedrukt is.
176+
177+
### Een disabled button via `aria-disabled`
178+
179+
Hoewel er een native `disabled` attribute bestaat, is het af te raden om deze
180+
te gebruiken. Een button met een `disabled` attribute is niet meer focusbaar
181+
met een toetsenbord of screenreader. Ook niet als er `tabindex="0"` op gezet
182+
wordt.
183+
184+
`aria-disabled="true"` is daarom de aangeraden methode om een button disabled te
185+
maken. De developer heeft vervolgens de mogelijkheid om een passende melding te
186+
tonen wanneer de button ingedrukt wordt.
187+
188+
## Een icoon voor of achter het label
189+
190+
Er kan een icoon voor of achter het label geplaatst worden door een `<span>`
191+
element met de class `nl-button__icon-start` voor of `nl-button__icon-end`
192+
achter het label te plaatsen.
193+
194+
```html
195+
<!-- Een icon voor het label -->
196+
<button class="nl-button">
197+
<span class="nl-button__icon-start">❤️</span>
198+
Vind ik leuk!
199+
</button>
200+
```
201+
202+
```html
203+
<!-- Een icon achter het label -->
204+
<button class="nl-button">
205+
Vind ik leuk!
206+
<span class="nl-button__icon-end">❤️</span>
207+
</button>
208+
```
209+
210+
### Geformatteerde content in het label in combinatie met een icoon
211+
212+
Als het label formatting bevat, moet het label gewrapped worden in een `<span>`
213+
element. Gebeurd dit niet, dan komt er extra ruimte rond de elementen in het label.
214+
215+
```html
216+
<button class="nl-button">
217+
<span class="nl-button__icon-start">❤️</span>
218+
<span>Vind <em>ik</em> leuk!</span>
219+
</button>
220+
```
221+
222+
...
223+
````
103224

104225
### Documenteer de component op de website
105226

0 commit comments

Comments
 (0)