@ndwnu/design-system 0.0.1-beta.1 → 1.0.0

package/README.md

@@ -1,137 +1,4 @@
-# NDW design
+# NDW design system
 
-This library is meant as a central place for all NDW or NDW related components and features. Its components are built in Angular and can be used in Angular projects accordingly.
-
-Use the relevant library in your project, so you can contribute to the NDW look and feel while maintaining a uniformity across all NDW projects.
-
----
-
-_Table of Contents_
-
-1. [Structure](#structure)
-2. [Usage](#usage)
-3. [Setup environment](#setup-environment)
-    1. [Publishing](#publishing)
-    2. [Troubleshooting](#troubleshooting)
-4. [Contribution](#contribution)
-    1. [Components](#components)
-
----
-
-## Structure [](#structure)
-
-This NDW library is part of the NDW design repository.
-The repository contains libraries for the following NDW divisions;
-
-- NDW
-- NTM
-- NWB and NWB+
-
-Next to that it holds common libraries for components and core features, which can be used locally in this repository by other libraries.
-
-## Usage [](#usage)
-
-_WIP_
-
-In your Angular project you can install the required libraries as dependencies just the same as you would install a regualr NPM package.
-
-_Example_<br>
-You set up a project with the NDW brand and want to include the NDW design library for shared components and styling.
-
-In a terminal you can install the following package in the root of your project;
-
-- `npm install -d @noway/ndw`
-
-After installing first add the styles file to your `angular.json`;
-
-```json
-"projects": {
-  "[project-name]": {
-    // [...]
-    "architect": {
-      "build": {
-        // [...]
-        "options": {
-          "styles": [
-            "node_modules/@noway/ndw/core/styles/styles.scss",
-          ]
-        }
-      }
-    }
-  }
-}
-```
-
-Adding this line will incorporate the NWB styling in your project.
-
-Next you can import the component(s) you need in your module or standalone component of choice;
-
-```ts
-import { ButtonComponent } from '@noway/ndw/components';
-```
-
-After this you can use the shared component and all its features.
-
-## Setup environment [](#setup-environment)
-
-### Publishing [](#publishing)
-
-Publishing is done via Azure Artifacts, for this project the artifact used is _ndw-shared-npm_.
-
-For publishing you need to add credentials to your local user .npmrc file.
-Follow the steps for this as provided in the Azure environment for ndw-shared-npm;<br>
-https://dev.azure.com/ndwnu/Frontend%20Guild/_artifacts/feed/ndw-shared-npm/connect
-
----
-
-When generating a Personal Access Token, be sure to select "Full access" under "Scopes".
-
-### Troubleshooting [](#troubleshooting)
-
-**Q. _vsts-npm-auth_ is not working, how can I resolve this?**<br>
-**A.** The _vsts-npm-auth_ plugin is only working for Windows, if you are using another OS click on "Other" under "Project setup".
-
-If you are using Windows you should install the plugin globally first through NPM with the following command;<br>
-`npm install -g vsts-npm-auth`
-
-## Contribution [](#contribution)
-
-_WIP_
-
-### Components [](#components)
-
-#### When is it reusable?
-
-- Used more then once in different parts of a project,
-- Used across different projects
-- Generic and possible to be reused in the future
-
-#### When is it a component?
-
-- It uses functionality on top of HTML en CSS
-  - If it only uses HTML/CSS it should be considered to use an attribute or directive instead
-- Its functionality is extending the functionality of a base HTML element
-- It is certain a default HTML element is not providing the functionality needed
-
-##### Example 1
-
-- _Requirement_: Button with styling and event handling
-- _Check: Similar component already existing?_<br>
-  **Yes**, the default HTML Button element
-- _Check: New component needed?_<br>
-  **No**, the existing HTML Button element holds all functionality already and can be extended via an attribute which provides its own styling. In this way all functionality of the existing button can be utilized while visually displaying a custom button. No need to reinvent the wheel.
-
-##### Example 2
-
-- _Requirement_: Card with styling and features for header, content and footer
-- _Check: Similar component already existing?_<br>
-  **No**<br>
-- _Check: Does it have features or functionalities next to HTML and CSS?_<br>
-  **Yes**, you can change the background color via input.
-- _Check: New component needed?_<br>
-  **Yes**, there is no similar component and extra functionality is required.
-
-#### How should it be structured?
-
-- Project primary text or content via `ng-content`
-- Use `Input()`s for additional text and features
+Ga van start om de package te gebruiken binnen jouw applicatie. De documentatie is te vinden op:
+[design.ndw.nu/hulp/start-als-developer/](https://design.ndw.nu/hulp/start-als-developer/)