# \<vaa-embed>

A web component by Altinget for embedding our Voting Advice Application (VAA) in your web page.

Only works for customers of the VAA.

## Installation

We recommend adding the component with a script tag like so:

```html
<script
  src="https://cdn.jsdelivr.net/npm/@altinget/vaa-embed@2/dist/bundles/vaa-embed.min.js"
  type="module"
></script>
```

But it's also possible to add the component to your project by importing it with NPM or Yarn

```bash
# NPM
npm i vaa-embed

# Yarn
yarn add vaa-embed
```

And then importing it in the html like so:

```html
<script type="module">
  import 'vaa-embed/vaa-embed.js';
</script>
```

## Usage

After installing and import the component you can invoke it anywhere on your page like so:

```html
<vaa-embed />
```

### Attributes

The component accepts the following attributes:

- `src`: The URL of the VAA to embed. Can be a subroute if you want to start on a specific page (like the ballot).

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash
npm run lint
```

To automatically fix linting and formatting errors, run

```bash
npm run format
```

## Testing with Web Test Runner

To execute a single test run:

```bash
npm run test
```

To run the tests in interactive watch mode run:

```bash
npm run test:watch
```

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash
npm run storybook
```

To build a production version of Storybook, run

```bash
npm run storybook:build
```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`