Rijkshuisstijl Community Componenten

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.

Dit project maakt deel uit van een samenwerkingsverband om NL Design System-componenten te gebruiken voor projecten die moeten voldoen aan de Rijkshuisstijl. Organisaties van de centrale overheid van Nederland ( bijvoorbeeld: Belastingdienst, DUO, Logius, SVB) en degenen die door hen zijn ingehuurd voor het ontwikkelen van websites en apps, kunnen via dit project samenwerken.

Voordat je begint

Node

In dit project wordt Node.js versie 20.10 gebruikt. Dit project bevat een .nvmrc bestand en helpt je met het installeren van de juiste versie met behulp van nvm.

• Als je nvm nog niet hebt, installeer nvm.

Zodra je nvm hebt geïnstalleerd, run je het commando:

nvm use

Als je de juiste versie nog niet hebt, wordt gevraagd om deze te installeren door middel van nvm install. Als de juiste versie al is geïnstalleerd, of nadat hij is geïnstalleerd, wordt hij ingesteld als de huidige versie.

SCSS/SASS

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.

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.

'use client'; // Nodig in sommige projecten

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

<Button>Click Here!</Button>;

Sommige componenten gebruiken de 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

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.

import '@rijkshuisstijl-community/design-tokens/dist/index.css';

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

Licentie

Dit project bevat zowel eigen als vrije en open-source software die wordt gelicentieerd onder de European Union Public License (EUPL) v1.2.

Lees de NOTICE file voor informatie over eigen assets in deze repository.

Logo en stijlgids

Copyright geldt voor het Rijkshuisstijl-logo en merkidentiteit. Gebruik hiervan is strikt verboden, behalve voor het ontwikkelen van websites en apps voor de Nederlandse overheid.

Fonts

De lettertypen voor de Rijkshuisstijl zijn speciaal ontworpen voor de Nederlandse overheid en zijn niet open source. Gebruik tot toestemming, systeemlettertypen zoals Arial, Verdana of Times New Roman.

Open source varianten

Gebruik tijdens ontwikkeling placeholder varianten voor assets die een licentie vereisen, zoals logo’s, lettertypen en iconen.

Lettertypen

npm install -D @rijkshuisstijl-community/font

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

Logo

Je kunt het icoon met id nederland-map gebruiken.

Icons

TODO

Toestemming

Wanneer je een website voor de Nederlandse overheid ontwikkelt, kun je toestemming aanvragen door contact op te nemen met het Ministerie van Algemene Zaken.

Gedragscode

We beloven op een manier te handelen die bijdraagt aan een open, gastvrije, diverse, inclusieve en gezonde gemeenschap. Lees onze gedragscode als je dat nog niet hebt gedaan.

Ontwikkeling

Dit project is gebaseerd op de NL Design System-template en kan worden gebruikt door Rijksoverheidsorganisaties die het NL Design System willen gebruiken en willen samenwerken aan extra componenten, een gedeeld thema en storybook-sjablonen.

NodeJS and pnpm

We gebruiken NodeJS om onze JavaScript-pakketten te beheren. Controleer in je terminal met node -v of je NodeJS hebt geïnstalleerd. Installeer NodeJS anders via nodejs.org.

NodeJS bevat npm, maar we gebruiken pnpm voor stabiele pakketresolutie. Controleer of je pnpm hebt door pnpm -v te typen. Installeer het met npm install -g pnpm als dat niet zo is.

Handige commando's

Alle commando’s worden uitgevoerd vanuit de root van het project, in een terminal:

Command	Action
pnpm install	Installeert dependencies.
pnpm run storybook	Start de lokale ontwikkelserver op localhost:6006.
pnpm run build	Bouw je productie-site naar ./dist/.
pnpm run lint	Voert de lint-scripts uit om de code aan de projectstandaarden te voldoen.
pnpm run lint-fix	Voert lint-scripts uit en herstelt automatisch fouten mits die gevonden zijn.

Vanuitpackages/components-react krijg je een gedetailleerder overzicht van tests:

Command	Action
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.
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.
web-components-stencil	Hier kunnen webcomponenten worden toegevoegd voor componenten die nog niet als webcomponent bestaan.
web-components-react	Hier kunnen React-webcomponenten toegevoegd worden voor gebruiksgemak.

Proprietary

Branding, lettertypen en andere assets moeten vaak niet deel uitmaken van de EUPL-licentie. Door deze in de proprietary pakketten toe te voegen, worden ze juridisch uitgesloten op basis van de LICENSE en NOTICE-bestanden. Elke Rijksoverheidsorganisatie die met een NL Design System-thema werkt, kan hier hun thema als pakket toevoegen.

Wie werkt er aan dit project?

Dit project is een samenwerking tussen frontend-ontwikkelaars, ontwerpers en enthousiastelingen uit diverse velden binnen de IT-sector en overheidsorganisaties.

Links

• Bug gevonden of code bekijken? Bezoek onze GitHub repository.

• Benieuwd naar onze voortgang? Bekijk ons huidige werk op hetSprint Board.

• Blijf in contact met de community! Word lid van de Code for NL Slack en join het #nl-design-system kanaal om samen te werken met de community.