@rijkshuisstijl-community/components-twig 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,42 @@
1
+ <!-- @license CC0-1.0 -->
2
+
3
+ # Rijkshuisstijl Community Componenten - Twig
4
+
5
+ _Dit project wordt **niet** gesteund door het Ministerie van Algemene Zaken._
6
+
7
+ **Het toepassen van design-elementen uit dit project is strikt verboden voor organisaties die geen deel uitmaken van de
8
+ centrale overheid van Nederland.**
9
+
10
+ Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) project.
11
+
12
+ ## Aan de slag met Twig-componenten
13
+
14
+ 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).
15
+
16
+ ```bash
17
+ npm install --save-dev @rijkshuisstijl-community/components-twig
18
+ ```
19
+
20
+ Om deze componenten te gebruiken, kun je ze importeren in jouw omgeving met behulp van de `@rhc` namespace.
21
+
22
+ ```twig
23
+ {% "@rhc/OrderedListItem.twig %}
24
+ ```
25
+
26
+ ### Thema toepassen
27
+
28
+ 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).
29
+
30
+ ```bash
31
+ npm install --save-dev @rijkshuisstijl-community/design-tokens
32
+ ```
33
+
34
+ Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
35
+ pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.
36
+
37
+ ```scss
38
+ @import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
39
+ @import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
40
+ ```
41
+
42
+ Bekijk de [packages/font/README.md](packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
@@ -0,0 +1,5 @@
1
+ {%- set classes = [
2
+ 'nl-paragraph',
3
+ purpose and purpose == 'lead' ? 'nl-paragraph--lead' : ''
4
+ ] -%}
5
+ <p{{ attributes.addClass(classes) }}>{{ children }}</p>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rijkshuisstijl-community/components-twig",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "author": "Community for NL Design System",
5
5
  "description": "Twig component library for the Rijkshuisstijl Community repository, based on the NL Design System architecture",
6
6
  "license": "EUPL-1.2",
@@ -23,7 +23,7 @@
23
23
  ],
24
24
  "sideEffects": false,
25
25
  "dependencies": {
26
- "@rijkshuisstijl-community/components-css": "1.0.1"
26
+ "@rijkshuisstijl-community/components-css": "1.0.2"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@nl-design-system/tsconfig": "1.0.1",
@@ -33,7 +33,7 @@
33
33
  "npm-run-all": "4.1.5",
34
34
  "rimraf": "6.0.1",
35
35
  "twig": "1.17.1",
36
- "typescript": "5.7.3"
36
+ "typescript": "5.8.2"
37
37
  },
38
38
  "scripts": {
39
39
  "prebuild": "npm run clean && mkdir dist",