# \<lit-modal>

![npm](https://img.shields.io/badge/npm-v0.2.0-blue.svg)
![coverage](https://img.shields.io/badge/coverage-95%25-green.svg)
[![install size](https://packagephobia.now.sh/badge?p=@borjag90dev/lit-modal)](https://packagephobia.now.sh/result?p=@borjag90dev/lit-modal)
[![npm downloads](https://img.shields.io/npm/dm/@borjag90dev/lit-modal.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@borjag90dev/lit-modal)
![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)
 

![Project](https://img.shields.io/badge/Project-Work-red.svg)
<a href="https://github.com/BorjaG90/lit-modal" alt="Github Repository Link">
<img alt="github repo" src="https://img.shields.io/badge/github-black?logo=github"/>
</a>
<a href="https://lit.dev/docs/" alt="Documentation Link">
  <img alt="Documentation Link" src="https://img.shields.io/badge/Lit-272f93?logo=lit"/>
</a>


This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

A simple modal web component

## Installation
```bash
npm i @borjag90dev/lit-modal
```

## Usage
```html
<script type="module">
  import '@borjag90dev/lit-modal.js';
</script>

<lit-modal></lit-modal>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
npm run lint
```

You can lint with ESLint and Prettier individually as well
```bash
npm run lint:eslint
```
```bash
npm run lint:prettier
```

To automatically fix many linting errors, run
```bash
npm run format
```

You can format using ESLint and Prettier individually as well
```bash
npm run format:eslint
```
```bash
npm run format:prettier
```

## Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
```bash
npm run test
```

To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), 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`

## Built with

### Technologies
<a href="https://www.javascript.com/"><img src="https://raw.githubusercontent.com/BorjaG90/media/master/img/logos/javascript.jpeg" width=50 alt="JavaScript"></a>
<a href="https://lit.dev/docs/"><img src="https://raw.githubusercontent.com/BorjaG90/media/master/img/logos/litElement.png" width=50 alt="Litelement"></a>
<a href="https://open-wc.org/docs/"><img src="https://raw.githubusercontent.com/BorjaG90/media/master/img/logos/open-wc.png" width=50 alt="Open-WC"></a>

### Platforms
<a href="https://code.visualstudio.com/"><img src="https://raw.githubusercontent.com/BorjaG90/media/master/img/logos/vscode.png" width=50 alt="VSCode"></a>

## Authors

- **Borja Gete**

<a href="mailto:borjag90dev@gmail.com" alt="Borja Gete mail"><img src="https://img.shields.io/badge/borjag90dev@gmail.com-DDDDDD?style=for-the-badge&logo=gmail" title="Go To mail" alt="Borja Gete mail"/></a>
<a href="https://github.com/BorjaG90" alt="Borja Gete Github"><img src="https://img.shields.io/badge/BorjaG90-black?style=for-the-badge&logo=github" title="Go To Github Profile" alt="Borja Gete Github"/></a>
<a href="https://linkedin.com/in/borjag90" alt="Borja Gete LinkedIn"><img src="https://img.shields.io/badge/BorjaG90-blue?style=for-the-badge&logo=linkedin" title="Go To LinkedIn Profile" alt="Borja Gete LinkedIn"/></a>