# p20-web-components

## Vite | React | TypeScript | SCSS | Lit Starter Template

![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)

## Getting started

- Developed components go into src/components/ directory
- Split component, component wrapper and styling code in individual files (see
  button component as a standard)
- Import finished component in App.tsx

Use the Vite commands for dev/build/serve

```
npm run dev

npm run build

npm run serve
```

## Included Components

## Included Components

- [x] Buttons
- [x] Radio Buttons
- [x] Links
- [x] Breadcrumbs
- [x] Text Input Field
- [x] Textbox
- [x] Accordion
- [x] Alert Banner
- [x] Button Group
- [x] Checkbox
- [x] Combo Box
- [x] Date Input Fields
- [x] Data Sources
- [x] Error Message Summary
- [x] ESH (Specific Component)
- [x] Filter Dropdown
- [x] Filter Pill Group
- [x] Headings
- [x] Icon
- [x] Number Input Field
- [x] Text Output
- [x] Process Indicator
- [x] Select
- [x] Tab Buttons
- [x] Toast
- [x] Toggle
- [x] Tree Select
- [x] Card
- [x] Modal
- [x] Tabs
- [x] Footer
- [x] Header
- [x] Tile
- [x] No Result
- [x] Sidenav
- [x] Table
