Skip to content

Commit

Permalink
feat(readme): split and append implementation to packages readmes (#1308
Browse files Browse the repository at this point in the history 
) (#1363)

Zoals beschreven in #1308 willen we components-twig documenteren. In
plaats van een lange README te maken met alle framework(less)
implementaties, hebben we de implementatie informatie verplaatst naar de
README van de package. Dit zorgt er ook voor dat de package op npm
netjes informatie bevat. Zie ticket voor alle informatie.

Graag ontvang ik feedback van het team op:
- Wat vind je van deze opzet? Voegt het waarde toe, of juist niet? Zou
je het anders doen?
- Is de informatie correct? Voor React heb ik het enkel aangevuld. Voor
Twig, CSS en Web Components heb ik het geschreven.

Closes #1308

---------

Co-authored-by: Charlotte Gieltjes <[email protected]>
  • Loading branch information
@eslook
eslook and Charlotte Gieltjes authored Mar 4, 2025
1 parent af500d6 commit b9a4945
Show file tree
Hide file tree
Showing 11 changed files with 236 additions and 65 deletions.
5 changes: 5 additions & 0 deletions .changeset/package-readme-css.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rijkshuisstijl-community/components-css': patch
---

Added implementation documentation to package README.
5 changes: 5 additions & 0 deletions .changeset/package-readme-font.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rijkshuisstijl-community/font': patch
---

Moved implementation documentation from repository README to package README.
5 changes: 5 additions & 0 deletions .changeset/package-readme-react.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rijkshuisstijl-community/components-react': patch
---

Moved implementation documentation from repository README to package README.
5 changes: 5 additions & 0 deletions .changeset/package-readme-twig.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rijkshuisstijl-community/components-twig': patch
---

Added implementation documentation to package README.
5 changes: 5 additions & 0 deletions .changeset/package-readme-wc.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rijkshuisstijl-community/web-components': patch
---

Added implementation documentation to package README.
79 changes: 14 additions & 65 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

# Rijkshuisstijl Community Componenten

**Direct aan de slag met [CSS](packages/components-css/README.md) | [React](packages/components-react/README.md) | [Web Components](packages/web-components/README.md) | [Twig](packages/components-twig/README.md)**

---

_Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._

**Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
Expand Down Expand Up @@ -35,56 +39,17 @@ juiste versie al is geïnstalleerd, of nadat hij is geïnstalleerd, wordt hij in

De componenten gebruiken scss, zorg dat jouw project scss-bestanden kan verwerken.

## Aan de slag zonder framework

Binnenkort komen er componenten die te gebruiken zijn zonder een framework.

## Aan de slag met React-componenten

Om de React-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het pakket dat beschikbaar in
de [npm Registry](https://www.npmjs.com/package/@rijkshuisstijl-community/components-react).

```npm
npm install --save-dev @rijkshuisstijl-community/components-react
```

Dit installeert de React-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.

```tsx
'use client'; // Nodig in sommige projecten

import { Button } from '@rijkshuisstijl-community/components-react';

<Button>Click Here!</Button>;
```

Sommige componenten gebruiken de [useRef](https://react.dev/reference/react/useRef) hook, die alleen werkt in Client
Componenten. Voeg `"use client"` toe bovenaan het bestand om dit op te lossen.

### Thema toepassen

De React-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je
het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens)

```npm
npm install --save-dev @rijkshuisstijl-community/design-tokens
```

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.
## Aan de slag

```tsx
import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
De componenten van de Rijkshuisstijl Community zijn te gebruiken met en zonder framework. Bekijk de README van elke package voor informatie over implementatie.

function App() {
return (
<div className="rhc-theme">
<Button>Click Here!</Button>
</div>
);
}
```
| Package | Purpose |
| :-------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`components-css`](packages/components-css/README.md) | Hier kunnen CSS-componenten toegevoegd worden die nog niet bestaan in de NL Design System-community. |
| [`components-react`](packages/components-react/README.md) | Optioneel voor het toevoegen van een React-wrapper aan een CSS-component als die nog niet bestaat. |
| [`web-components`](packages/web-components/README.md) | Optioneel voor het toevoegen van een Web Component wrapper aan een CSS-component als die nog niet bestaat. |
| [`components-twig`](packages/components-twig/README.md) | Optioneel voor het toevoegen van een Twig-wrapper aan een CSS-component als die nog niet bestaat. |
| [`font`](packages/font/README.md) | Dit npm pakketje met fonts kun je gebruiken als alternatief op de officiële Rijkshuisstijl fonts, voor situaties waar je geen toestemming hebt om de officiële fonts te gebruiken. |

## Licentie

Expand All @@ -111,13 +76,7 @@ iconen.

**_Lettertypen_**

```npm
npm install -D @rijkshuisstijl-community/font
```

```tsx
import '@rijkshuisstijl-community/font/src/index.mjs';
```
Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.

**_Logo_**

Expand Down Expand Up @@ -170,16 +129,6 @@ Vanuit`packages/components-react` krijg je een gedetailleerder overzicht van tes
| :-------------- | :-------------------------- |
| `pnpm run test` | Voert alle test suites uit. |

### Packages

| Package | Purpose |
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| `components-css` | Hier kunnen CSS-componenten toegevoegd worden die nog niet bestaan in de NL Design System-community. |
| `components-react` | Optioneel voor het toevoegen van een React-wrapper aan een CSS-component als die nog niet bestaat. |
| `components-twig` | Optioneel voor het toevoegen van een Twig-wrapper aan een CSS-component als die nog niet bestaat. |
| `design-tokens` | Hier worden de rijkshuisstijl-thema’s beheerd, voor gebruik met NL Design System zonder thema. Opmerking deze zouden naar proprietary moeten gaan. |
| `storybook` | Extra componenten en pagina-sjablonen kunnen worden toegevoegd als story voor documentatie en visuele regressietesten. |

### Proprietary

Branding, lettertypen en andere assets moeten vaak niet deel uitmaken van de EUPL-licentie. Door deze in de
Expand Down
38 changes: 38 additions & 0 deletions packages/components-css/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!-- @license CC0-1.0 -->

# Rijkshuisstijl Community Componenten - CSS

_Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._

**Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
centrale overheid van Nederland.**

Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.

## Aan de slag met CSS-componenten

Om de CSS-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).

```bash
npm install --save-dev @rijkshuisstijl-community/components-css
```

Dit installeert de CSS-componenten. Om deze componenten te gebruiken, moet je het thema toepassen in de volgende stap.

### Thema toepassen

Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens).

```bash
npm install --save-dev @rijkshuisstijl-community/design-tokens
```

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.

```scss
@import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
@import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
```

Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
57 changes: 57 additions & 0 deletions packages/components-react/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!-- @license CC0-1.0 -->

# Rijkshuisstijl Community Componenten - React

_Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._

**Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
centrale overheid van Nederland.**

Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.

## Aan de slag met React-componenten

Om de React-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-react npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-react).

```bash
npm install --save-dev @rijkshuisstijl-community/components-react
```

Dit installeert de React-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.

```tsx
'use client'; // Nodig in sommige projecten

import { Button } from '@rijkshuisstijl-community/components-react';

<Button>Click Here!</Button>;
```

Sommige componenten gebruiken de [useRef](https://react.dev/reference/react/useRef) hook, die alleen werkt in Client
Componenten. Voeg `"use client"` toe bovenaan het bestand om dit op te lossen.

### Thema toepassen

De React-componenten hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens).

```bash
npm install --save-dev @rijkshuisstijl-community/design-tokens
```

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.

```tsx
import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren

function App() {
return (
<div className="rhc-theme">
<Button>Click Here!</Button>
</div>
);
}
```

Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
42 changes: 42 additions & 0 deletions packages/components-twig/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!-- @license CC0-1.0 -->

# Rijkshuisstijl Community Componenten - Twig

_Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._

**Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
centrale overheid van Nederland.**

Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.

## Aan de slag met Twig-componenten

Om de Twig-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-twig npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-twig).

```bash
npm install --save-dev @rijkshuisstijl-community/components-twig
```

Om deze componenten te gebruiken, kun je ze importeren in jouw omgeving met behulp van de `@rhc` namespace.

```twig
{% "@rhc/OrderedListItem.twig %}
```

### Thema toepassen

Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens).

```bash
npm install --save-dev @rijkshuisstijl-community/design-tokens
```

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.

```scss
@import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
@import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
```

Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
6 changes: 6 additions & 0 deletions packages/font/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ Gebruik in JavaScript frameworks zoals React en Angular de volgende code:
import '@rijkshuisstijl-community/font/src/index.mjs';
```

Gebruik in SCSS de volgende code:

```scss
@import '@rijkshuisstijl-community/font/src/index.scss';
```

## Op zoek naar de officiële lettertypes?

De officiële lettertypes kun je downloaden via [rijkshuisstijl.nl](https://www.rijkshuisstijl.nl/publiek/modules/product/DigitalStyleGuide/default/index.aspx?ItemId=6745), als je voldoende rechten hebt. Bijvoorbeeld als je bij de Rijksoverheid werkt en je ingelogd bent via Citrix.
Expand Down
54 changes: 54 additions & 0 deletions packages/web-components/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!-- @license CC0-1.0 -->

# Rijkshuisstijl Community Componenten - Web Components

_Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._

**Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
centrale overheid van Nederland.**

Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.

## Aan de slag met Web Components

Om de Web Components van de Rijkshuisstijl-community te gebruiken, installeer je het [web-components npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/web-components).

```bash
npm install --save-dev @rijkshuisstijl-community/web-components
```

Dit installeert de Web Components. Om deze componenten te gebruiken, importeer je ze in je project en plaats je ze in de HTML.

Importeer de Web Components in je project:

```js
import '@rijkshuisstijl-community/web-components';
```

Vervolgens kun je de componenten in je HTML gebruiken:

```html
<rhc-button>Click Here!</rhc-button>
```

### Thema toepassen

De Web Components hebben geen eigen styling. Om de Rijkshuisstijl aan je project toe te voegen, installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens).

```bash
npm install --save-dev @rijkshuisstijl-community/design-tokens
```

Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.

```html
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
<link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />

<div class="rhc-theme">
<rhc-button>Click Here!</rhc-button>
</div>
```

Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.

0 comments on commit b9a4945

Please sign in to comment.