# Velcro

A CSS and web component library providing the design system for ARUP R&I.

## Using Velcro in a project

### Install

```bash
npm install @arup-ri/velcro
```

### CSS

Import the stylesheet once in your project's entry point:

```js
import '@arup-ri/velcro/dist/velcro.css';
```

Or via a `<link>` tag:

```html
<link rel="stylesheet" href="node_modules/@arup-ri/velcro/dist/velcro.css">
```

### Icons

Import the icon web component once to register `<velcro-icon>` globally:

```js
import '@arup-ri/velcro/icons';
```

Then use it anywhere in your HTML or templates:

```html
<velcro-icon name="check" size="20px" color="var(--green-100)"></velcro-icon>
```

See [ICONS.md](./ICONS.md) for the full list of available icons and attributes.

---

## Development

### Prerequisites

- Node.js 18+
- npm 9+

### Setup

```bash
npm install
```

### Run Storybook

```bash
npm run storybook
```

Opens at [http://localhost:6006](http://localhost:6006). Storybook runs a full build first so the CSS and icon assets are up to date before the dev server starts.

### Build

```bash
npm run build
```

Copies icons from `bootstrap-icons` into `dist/icons/` and compiles `css/index.css` into `dist/velcro.css`.

### Build Storybook (static)

```bash
npm run build-storybook
```

Outputs a static Storybook site to `storybook-static/`.

---

## Publishing

The package is published to npm under `@arup-ri/velcro`. Bump the version in `package.json` before publishing:

```bash
npm version patch   # or minor / major
npm publish
```

Only the `dist/` and `js/` directories are included in the published package.