@rijkshuisstijl-community/components-angular 1.2.0 → 2.0.0

package/README.md

@@ -11,55 +11,89 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) pr
 
 ## Aan de slag met Angular-componenten
 
-Om de Angular-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+Om de Angular-componenten van de Rijkshuisstijl Community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+
+De Angular-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).
+
+> [!NOTE]  
+> Let erop dat je zowel `@rijkshuisstijl-community/design-tokens/dist/index.css` als `@rijkshuisstijl-community/components-css/dist/index.css` importeert in je globale `styles.css` of `styles.scss` **en** dat je componenten gebruikt binnen een element met de `rhc-theme` class. Anders zie je de componenten zonder styling.
 
 ```bash
-npm install --save-dev @rijkshuisstijl-community/components-angular
+npm install --save-dev @rijkshuisstijl-community/components-angular @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
 ```
 
-Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
+Dit installeert de Angular-componenten, de design tokens en de styling. Om deze te gebruiken, importeer je de CSS-bestanden in je globale stylesheet en de Angular modules in je app.
+
+```css
+@import '@rijkshuisstijl-community/design-tokens/dist/index.css';
+@import '@rijkshuisstijl-community/components-css/dist/index.css';
+```
 
 ```ts
+import { Component } from '@angular/core';
 import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
 
 @Component({
   selector: 'app-root',
   imports: [ButtonComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  template: `
+    <main class="rhc-theme">
+      <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
+    </main>
+  `,
 })
-export class AppComponent {
-  title = 'angular-test';
+export class App {
+  protected title = 'angular-readme';
 }
 ```
 
 ### Thema toepassen
 
-De Angular-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 het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
+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).
 
-```bash
-npm install --save-dev @rijkshuisstijl-community/design-tokens
-npm install --save-dev @rijkshuisstijl-community/components-css
-```
+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 het Rijkshuisstijl-thema met de `rhc-theme` class.
+
+#### Thema wijzigen
 
-Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
+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.
+Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
+
+```css
+@import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css';
+@import '@rijkshuisstijl-community/components-css/dist/index.css';
+```
 
 ```ts
 import { Component } from '@angular/core';
 import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
-import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
-import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
 
 @Component({
   selector: 'app-root',
   imports: [ButtonComponent],
   template: `
-    <main class="main" class="rhc-theme">
+    <main class="uitvoerend-groen">
       <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
     </main>
   `,
 })
-export class AppComponent {}
+export class App {
+  protected title = 'angular-readme';
+}
 ```
 
 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.
+
+## Development
+
+Om de storybook lokaal te runnen, gebruik je:
+
+```bash
+pnpm --filter @rijkshuisstijl-community/storybook-angular storybook
+```
+
+om de storybook te verversen, moet je eerst de storybook server interrumperen en dan het volgende commando draaien:
+
+```bash
+pnpm --filter @rijkshuisstijl-community/components-angular build
+```

package/dist/README.md

@@ -11,55 +11,89 @@ Deze package is onderdeel van het [Rijkshuisstijl Community](../../README.md) pr
 
 ## Aan de slag met Angular-componenten
 
-Om de Angular-componenten van de Rijkshuisstijl-community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+Om de Angular-componenten van de Rijkshuisstijl Community te gebruiken, installeer je het [components-angular npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-angular).
+
+De Angular-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).
+
+> [!NOTE]  
+> Let erop dat je zowel `@rijkshuisstijl-community/design-tokens/dist/index.css` als `@rijkshuisstijl-community/components-css/dist/index.css` importeert in je globale `styles.css` of `styles.scss` **en** dat je componenten gebruikt binnen een element met de `rhc-theme` class. Anders zie je de componenten zonder styling.
 
 ```bash
-npm install --save-dev @rijkshuisstijl-community/components-angular
+npm install --save-dev @rijkshuisstijl-community/components-angular @rijkshuisstijl-community/components-css @rijkshuisstijl-community/design-tokens
 ```
 
-Dit installeert de Angular-componenten. Om deze componenten te gebruiken, kun je ze importeren in jouw app.
+Dit installeert de Angular-componenten, de design tokens en de styling. Om deze te gebruiken, importeer je de CSS-bestanden in je globale stylesheet en de Angular modules in je app.
+
+```css
+@import '@rijkshuisstijl-community/design-tokens/dist/index.css';
+@import '@rijkshuisstijl-community/components-css/dist/index.css';
+```
 
 ```ts
+import { Component } from '@angular/core';
 import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
 
 @Component({
   selector: 'app-root',
   imports: [ButtonComponent],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  template: `
+    <main class="rhc-theme">
+      <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
+    </main>
+  `,
 })
-export class AppComponent {
-  title = 'angular-test';
+export class App {
+  protected title = 'angular-readme';
 }
 ```
 
 ### Thema toepassen
 
-De Angular-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 het [components-css npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/components-css).
+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).
 
-```bash
-npm install --save-dev @rijkshuisstijl-community/design-tokens
-npm install --save-dev @rijkshuisstijl-community/components-css
-```
+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 het Rijkshuisstijl-thema met de `rhc-theme` class.
+
+#### Thema wijzigen
 
-Deze pakketten bevat de CSS-variabelen van het design systeem en de CSS-classes die de componenten aan de variabelen koppelen. Importeer het `index.css`-bestand uit de `dist` mappen van de pakketten, en omring het deel van je applicatie waar je het thema wilt toepassen met het Rijkshuisstijl-thema: `rhc-theme`.
+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.
+Zie het volgende voorbeeld om het uitvoerend-groen thema toe te passen:
+
+```css
+@import '@rijkshuisstijl-community/design-tokens/dist/uitvoerend-groen/index.css';
+@import '@rijkshuisstijl-community/components-css/dist/index.css';
+```
 
 ```ts
 import { Component } from '@angular/core';
 import { ButtonComponent } from '@rijkshuisstijl-community/components-angular';
-import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // design tokens importeren
-import '@rijkshuisstijl-community/components-css/dist/index.css'; // css importeren
 
 @Component({
   selector: 'app-root',
   imports: [ButtonComponent],
   template: `
-    <main class="main" class="rhc-theme">
+    <main class="uitvoerend-groen">
       <button rhc-button [appearance]="'primary-action'" [disabled]="false">hello world</button>
     </main>
   `,
 })
-export class AppComponent {}
+export class App {
+  protected title = 'angular-readme';
+}
 ```
 
 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.
+
+## Development
+
+Om de storybook lokaal te runnen, gebruik je:
+
+```bash
+pnpm --filter @rijkshuisstijl-community/storybook-angular storybook
+```
+
+om de storybook te verversen, moet je eerst de storybook server interrumperen en dan het volgende commando draaien:
+
+```bash
+pnpm --filter @rijkshuisstijl-community/components-angular build
+```