<div id="top"></div>
<!--
*** Thanks for checking out the Best-README-Template. If you have a suggestion
*** that would make this better, please fork the repo and create a pull request
*** or simply open an issue with the tag "enhancement".
*** Don't forget to give the project a star!
*** Thanks again! Now go create something AMAZING! :D
-->

<!-- PROJECT SHIELDS -->
<!--
*** I'm using markdown "reference style" links for readability.
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
*** See the bottom of this document for the declaration of the reference variables
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
-->

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <a href="https://github.com/fstbraz/inclusive-web-components">
    <img src="img/thumb.png" alt="Logo" width="150" height="141">
  </a>

<h3 align="center">Inclusive web components</h3>

  <p align="center">
    <a href="https://github.com/fstbraz/inclusive-web-components"><strong>Explore the docs »</strong></a>
    <br />
    <br />
    <a href="https://github.com/fstbraz/inclusive-web-components">View Demo</a>
    ·
    <a href="https://github.com/fstbraz/inclusive-web-components/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
    ·
    <a href="https://github.com/fstbraz/inclusive-web-components/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>
  </p>
</div>

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#roadmap">Roadmap</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

<!-- ABOUT THE PROJECT -->

## About The Project

Web components library port of [Inclusive components](https://inclusive-components.design/)


### Built With

- [Lit](https://lit.dev/)
- [Typescript](https://www.typescriptlang.org/)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- GETTING STARTED -->

## Getting Started

This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

- node
- npm
  ```
  npm install npm@latest -g
  ```

### Installation

1. Clone the repo
   ```git clone https://github.com/fstbraz/inclusive-web-components.git```
   
2. Install NPM packages
   ```
   npm install
   ```
3. The remainig commands for buid and testing are listed at `package.json`

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- USAGE EXAMPLES -->

## Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources. (WIP)

_For more examples, please refer to the [Documentation](https://example.com)_

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- ROADMAP -->

## Roadmap

- [X] Initial Setup
- [X] First Component
- [ ] Unit Tests Setup
- [ ] Migrate the remaining components
- [ ] Storybook configuration
- [ ] Migrate to eslint
- [ ] Improvements

See the [open issues](https://github.com/fstbraz/inclusive-web-components/issues) for a full list of proposed features (and known issues).

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTRIBUTING -->

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- LICENSE -->

## License

Distributed under the MIT License. See `LICENSE` for more information.

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTACT -->

## Contact

Twitter - [@fstbraz](https://twitter.com/fstbraz)

Project Link: [https://github.com/fstbraz/inclusive-web-components](https://github.com/fstbraz/inclusive-web-components)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

[contributors-shield]: https://img.shields.io/github/contributors/fstbraz/inclusive-web-components.svg?style=for-the-badge
[contributors-url]: https://github.com/fstbraz/inclusive-web-components/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/fstbraz/inclusive-web-components.svg?style=for-the-badge
[forks-url]: https://github.com/fstbraz/inclusive-web-components/network/members
[stars-shield]: https://img.shields.io/github/stars/fstbraz/inclusive-web-components.svg?style=for-the-badge
[stars-url]: https://github.com/fstbraz/inclusive-web-components/stargazers
[issues-shield]: https://img.shields.io/github/issues/fstbraz/inclusive-web-components.svg?style=for-the-badge
[issues-url]: https://github.com/fstbraz/inclusive-web-components/issues
[license-shield]: https://img.shields.io/github/license/fstbraz/inclusive-web-components.svg?style=for-the-badge
[license-url]: https://github.com/fstbraz/inclusive-web-components/blob/master/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/fstbraz/
[product-screenshot]: img/thumb.png
