![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/interactive-style-elections

Component library for election pages.

## Quick Start

Installation:

```
$ yarn add @politico/interactive-style-elections
```

Import only what you need:
```javascript
import { Logo } from '@politico/interactive-style-elections';
```

Use it in your component:
```javascript
import React from 'react';

const MyComponent = () => (
  <Logo />
);

export default MyComponent;
```

## Headshots
Need to add a new headshot to the `Headshot` component?

Make sure you've added the candidate to the [democratic candidates loader](https://github.com/The-Politico/loader_elex2020-dem-candidates).

Create a `.png` file at `72ppi` and at least `600px` wide with an aspect ratio of `1:1.1`.

Name the file the same as the generated slug of the candidate. These slugs are generated by combining the first and last name of the candidate with dashes (`-`). If they have a nickname, combine their nickname and last name the same way.

Put this file in the [headshots](headshots) folder.

Run the command to process and upload your headshot:

```
$ yarn build-headshots
```

## Development

Clone Repo:
```
$ git clone https://github.com/The-Politico/politico-interactive-style-elections
```

Install dependencies:
```
$ yarn
```

Start development server:
```
$ yarn start
```

Build assets:
```
$ yarn build
```

Publish changes:
```
$ yarn publish
```