# Design system

This Design System provides a framework to display pages and components with an easy to use navigation, statuses per page / component and an option to view the source code and implementatation instructions for every component.

This library is best used in combination with [TREX](https://www.npmjs.com/package/@tresinternet/trex).

## Installation

Install the Design System as a dev dependency:

```bash
npm install -D @tresinternet/design-system
```

Copy the `public/library.json`-file to the root of your project and make the necessary changes.

## Templates

The Design System uses two main templates: _page_ and _component_.

### Page

The page template is used to display the template-pages and complete pages. The HTML can be altered as needed.
This template uses the following variables:

`page`
> The HTML of the page content

### Component

The component template is used to display a single component. Multiple components can be used on a single page, for example to show different variations.
A component is shown with multiple tabs:

- Output
- Source code
- Instructions (optional)
- Javascript code (optional)

This template uses the following variables:

`component`
> The HTML of the component

`description` (optional)
> The description of the component. Is shown above the component

`instructions` (optional)
> Instructions for usage of the component. Use markdown to style the instructions

`scripting` (optional)
> Code of Javascript used or referenced

## Statuses

Each page can have one of the following statuses:

- (none)
- `wip`: Work in progress
- `review`: In review
- `error`: Review not OK / contains errors
- `ready`: OK / Ready
- `custom`: Not a base component, but custom made
- `deprecated`: Deprecated legacy component

Of these statuses only `custom`, `error` and `deprecated` are used and visible in the frontend.

## Hiding sections

In principle all Tokens, Atoms, Organisms, ..., ... except Pages and Templates etc are hidden from the user.
You can set a section to public if you want a client to be able to see it in user mode. Do this by adding
`"public": true` to the corresponding section in the `library.json`.

## Admin mode

In the bottom left corner, besides the Modified date, there is a little lock, press it to enable Admin mode and you are able to see all sections.

---

## Configuration example

An example configuration file can be found in `public/library.json`.
