npm package: @stadigicomms/pattern-library
Description: University of St Andrews pattern library
Author: University of St Andrews Digital Communications team
Latest version: 1.0.11

# University of St Andrews - Pattern library

A pattern library of components to use on digital services for the University of St Andrews.

## How to use in your project

There are two ways to use the pattern library in your project.

1. Install via Node.js package manager (recommended)
2. Install using compiled files

### 1. Install via npm

This provides the most flexibility as you can choose to include only the components that you are using.

1. [Install Node.js](https://nodejs.org/en/).
If you have not already installed version 4.2.0 or later of Node.js, install the latest Long Term Support (LTS) version.
2. cd to the root of your project and check if you have a package.json file. If you do not have the file, create it by running: `npm init`.
3. [Install Dart Sass](https://www.npmjs.com/package/sass) - version 1.0.0 or higher.
4. Install the pattern library by running: `npm install @stadigicomms/pattern-library --save`.
This will save the `@stadigicomms/pattern-library` to your `node_modules` folder

You can then directly reference individual components. 

### 2. Install using compiled files.

You can also install the pattern library files via the CDN links, this includes all components.

## Run the pattern library locally

The pattern library uses [Fractal](https://fractal.build/), to display components and their variants, which simplifies development and testing.

### Install

To install your own local copy of the pattern library follow these steps:

1. Clone the [repo on GitLab](https://gitlab.st-andrews.ac.uk/digital-communications/sta-pattern-library).
2. Ensure you have node.js installed.
3. Run `npm install` in the directory you have saved the files. This will install all the dependencies for the project.

### Run tasks

The following tasks can then be run:

#### Build development files

These are the CSS, JavaScript files and static assets that Fractal references to present the various components.

Run:

```
npm run dev
```

This will clear the contents of the `/public` directory and then compile the updated files to this location.

#### Build production files

These are the optimised CSS, JavaScript files and static assets that should be included within a project.

Run:

```
npm run build
```

This will clear the contents of the `/build` directory and then compile the updated files to this location.

#### View the pattern library

This launches Fractal to let you browse the components at the specified local URL.

Run:

```
npm run browse
```

This will start a new instance of Fractal on a local URL which will be specified in the terminal. This task remains running in the background as any new changes to development files will then automatically be updated in Fractal.

#### Watch for new changes to development files

Run:

```
npm run watch
```

This will re-compile the CSS and JavaScript to the `/public` directory if any changes are made. This task remains running in the background and can be used in parallel with the Fractal task to automatically update development files.