@rijkshuisstijl-community/web-components 1.1.1 → 1.1.3

package/README.md

@@ -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.

package/dist/index.d.ts

@@ -213,31 +213,3 @@ export declare class LinkWebComponent extends BaseWebComponent {
 export declare type LinkWebComponentAttributes = LinkProps;
 
 export { }
-
-
-declare global {
-    namespace JSX {
-        type WebComponentAttributes<T> = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & T;
-        interface IntrinsicElements {
-            'rhc-accordion': WebComponentAttributes<AccordionWebComponentAttributes>;
-            'rhc-action-group': WebComponentAttributes<ActionGroupWebComponentAttributes>;
-            'rhc-alert': WebComponentAttributes<AlertWebComponentAttributes>;
-            'rhc-article': WebComponentAttributes<ArticleWebComponentAttributes>;
-            'rhc-blockquote': WebComponentAttributes<BlockquoteWebComponentAttributes>;
-            'rhc-breadcrumb-nav': WebComponentAttributes<BreadcrumbNavWebComponentAttributes>;
-            'rhc-button': WebComponentAttributes<ButtonWebComponentAttributes>;
-            'rhc-card': WebComponentAttributes<CardWebComponentAttributes>;
-            'rhc-checkbox-group': WebComponentAttributes<CheckboxGroupWebComponentAttributes>;
-            'rhc-checkbox': WebComponentAttributes<CheckboxWebComponentAttributes>;
-            'rhc-form-checkbox-group': WebComponentAttributes<FormFieldCheckboxGroupAttributes>;
-            'rhc-form-checkbox': WebComponentAttributes<FormFieldCheckboxOptionAttributes>;
-            'rhc-form-radio': WebComponentAttributes<FormFieldRadioAttributes>;
-            'rhc-form-radio-group': WebComponentAttributes<FormFieldRadioGroupAttributes>;
-            'rhc-form-select': WebComponentAttributes<FormFieldSelectAttributes>;
-            'rhc-form-textinput': WebComponentAttributes<FormFieldTextInputAttributes>;
-            'rhc-form-textarea': WebComponentAttributes<FormFieldTextareaAttributes>;
-            'rhc-hero': WebComponentAttributes<HeroWebComponentAttributes>;
-            'rhc-icon': WebComponentAttributes<IconWebComponentAttributes>;
-        }
-    }
-}