@rijkshuisstijl-community/web-components 1.1.6 → 1.2.1

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.
Files changed (4) hide show
  1. package/README.md +64 -22
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.mjs +6561 -3830
  4. package/package.json +11 -10
package/README.md CHANGED
@@ -11,44 +11,86 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](https://github.com/
11
11
 
12
12
  ## Aan de slag met Web Components
13
13
 
14
- 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).
14
+ Om de componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [web-components npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/web-components).
15
15
 
16
- ```bash
17
- npm install --save-dev @rijkshuisstijl-community/web-components
18
- ```
19
-
20
- Dit installeert de Web Components. Om deze componenten te gebruiken, importeer je ze in je project en plaats je ze in de HTML.
16
+ De 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) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
21
17
 
22
- Importeer de Web Components in je project:
18
+ > [!NOTE]
19
+ > Let erop dat je beide de `@rijkshuisstijl-community/design-tokens/dist/index.css` importeert **en** de component een child is van een element waar de `rhc-theme` op is toegepast. Anders zie je de component zonder styling.
23
20
 
24
- ```js
25
- import '@rijkshuisstijl-community/web-components';
21
+ ```bash
22
+ npm install --save-dev @rijkshuisstijl-community/web-components @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
26
23
  ```
27
24
 
25
+ Dit installeert de componenten, de design tokens en de styling. Om deze te gebruiken, importeer je ze in jouw app,
28
26
  Vervolgens kun je de componenten in je HTML gebruiken:
29
27
 
30
28
  ```html
31
- <rhc-button>Click Here!</rhc-button>
29
+ <!DOCTYPE html>
30
+ <html lang="en">
31
+ <head>
32
+ <title>RHC web-components</title>
33
+ <!-- componenten importeren -->
34
+ <script type="module">
35
+ import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';
36
+
37
+ // NB: let op dat je hier elk te gebruiken component definieert
38
+ customElements.define('rhc-button', ButtonWebComponent);
39
+ </script>
40
+ <!-- design tokens importeren -->
41
+ <link
42
+ rel="stylesheet"
43
+ href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
44
+ />
45
+ <!-- css importeren -->
46
+ <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
47
+ </head>
48
+ <body>
49
+ <!--geef alle thema tokens mee aan child components voor styling-->
50
+ <div class="rhc-theme">
51
+ <rhc-button>Click Here!</rhc-button>
52
+ </div>
53
+ </body>
54
+ </html>
32
55
  ```
33
56
 
34
57
  ### Thema toepassen
35
58
 
36
- 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).
37
-
38
- ```bash
39
- npm install --save-dev @rijkshuisstijl-community/design-tokens
40
- ```
59
+ Voor de themas maken we gebruik van de volgende 2 packages: [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens) en [component-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
41
60
 
42
61
  Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het
43
- pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met de Rijkshuisstijl-thema: `rhc-theme`.
62
+ pakket, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema met de `rhc-theme` class.
44
63
 
45
- ```html
46
- <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/design-tokens/dist/index.css" />
47
- <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
64
+ #### Thema wijzigen
48
65
 
49
- <div class="rhc-theme">
50
- <rhc-button>Click Here!</rhc-button>
51
- </div>
66
+ Om een ander thema toe te passen moet je het importeren van `import '@rijkshuisstijl-community/design-tokens/dist/{thema}/index.css';` en de class aanpassen naar het desbetreffende thema.
67
+ Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
68
+
69
+ ```html
70
+ <!DOCTYPE html>
71
+ <html lang="en">
72
+ <head>
73
+ <title>RHC web-components</title>
74
+ <!-- componenten importeren -->
75
+ <script type="module">
76
+ import { ButtonWebComponent } from '@rijkshuisstijl-community/web-components';
77
+ customElements.define('rhc-button', ButtonWebComponent);
78
+ </script>
79
+ <!-- design tokens importeren -->
80
+ <link
81
+ rel="stylesheet"
82
+ href="node_modules/@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css"
83
+ />
84
+ <!-- css importeren -->
85
+ <link rel="stylesheet" href="node_modules/@rijkshuisstijl-community/components-css/dist/index.css" />
86
+ </head>
87
+ <body>
88
+ <!--geef alle thema tokens mee aan child components voor styling-->
89
+ <div class="uitvoerend-groen">
90
+ <rhc-button>Click Here!</rhc-button>
91
+ </div>
92
+ </body>
93
+ </html>
52
94
  ```
53
95
 
54
96
  Bekijk de [packages/font/README.md](https://github.com/nl-design-system/rijkshuisstijl-community/blob/main/packages/font/README.md) voor de meerdere manieren om de lettertypen te installeren voor jouw project.
package/dist/index.d.ts CHANGED
@@ -7,7 +7,7 @@ import { BreadcrumbNavLinkProps } from '@rijkshuisstijl-community/components-rea
7
7
  import { BreadcrumbNavProps } from '@rijkshuisstijl-community/components-react';
8
8
  import { BreadcrumbNavSeparatorProps } from '@rijkshuisstijl-community/components-react';
9
9
  import { ButtonProps } from '@rijkshuisstijl-community/components-react';
10
- import { CardProps } from '@rijkshuisstijl-community/components-react';
10
+ import { CardAsLinkProps } from '@rijkshuisstijl-community/components-react';
11
11
  import { CheckboxGroupProps } from '@rijkshuisstijl-community/components-react';
12
12
  import { CheckboxProps } from '@rijkshuisstijl-community/components-react';
13
13
  import { FormFieldCheckboxGroupProps } from '@rijkshuisstijl-community/components-react';
@@ -105,7 +105,7 @@ export declare class ButtonWebComponent extends BaseWebComponent {
105
105
 
106
106
  export declare type ButtonWebComponentAttributes = ButtonProps;
107
107
 
108
- export declare class CardWebComponent extends BaseWebComponent {
108
+ export declare class CardAsLinkWebComponent extends BaseWebComponent {
109
109
  static readonly tagName: string;
110
110
  constructor();
111
111
  Button({ appearance, disabled, text, ...restProps }: {
@@ -114,7 +114,7 @@ export declare class CardWebComponent extends BaseWebComponent {
114
114
  render(): void;
115
115
  }
116
116
 
117
- export declare type CardWebComponentAttributes = CardProps;
117
+ export declare type CardAsLinkWebComponentAttributes = CardAsLinkProps;
118
118
 
119
119
  export declare class CheckboxGroupWebComponent extends BaseWebComponent {
120
120
  static readonly tagName: string;