# datdot-ui issue structure

### Component Issue list

1. <del>button</del>
2. dropdown
3. list
4. datepicker-single
5. day-selector-single
6. datepicker-range
7. day-selector-range
8. month-selector
9. toggle-button
10. checkbox
11. range-slider
12. icon
13. input-text
14. input-number
15. link
16. title
17. demo-maker
18. input
19. terminal
20. logs
21. filter
22. search-autocomplete
23. domlog
24. datdot-ui-template
25. tab
26. datdot-ui-highlight
27. web-component-demo
28. rollupjs-demo
29. search-input
30. inputs
31. my-custom-slider

---

### Issue - Design button

`@todo`
- [ ] Design button component for datdot-ui with the folowing props
- [ ] Simple button
- [ ] small, medium, large size variations
- [ ] icon button
- [ ] small, medium, large size variations
- [ ] leading icon button
- [ ] small, medium, large size variations
- [ ] trailing icon button
- [ ] small, medium, large size variations
- [ ] multiple leading icon button
- [ ] small, medium, large size variations
- [ ] multiple trailing icon button
- [ ] small, medium, large size variations
- [ ] Tab buttons
- [ ] with multiple text-alignment

---------------------------

### Issue - Dropdown

`@todo`
- [ ] Design selet-dropdown component with
- [ ] open with text
- [ ] open upwards
- [ ] open downwards

----

### Issue - List

`@todo`
- [ ] Design List component with
- [ ] Leading icon
- [ ] text
- [ ] with different alignment

----

### Issue - Datepicker-single
`@todo`
- [ ] Design date-picker-single component
- [ ] Calender ui containing
- [ ] toggle between months
- [ ] days
- [ ] dates
- [ ] Only able to pick is-on and after dates
- [ ] Only able to select 1 date

----

### Issue - Day-selector-single

`@todo`
- [ ] Design day-seletor-single component
- [ ] Calender ui containing
- [ ] toggle between months
- [ ] days
- [ ] dates
- [ ] Only able to pick is-on and after dates
- [ ] disable other dates
- [ ] Only able to select 1 date

----

### Issue - datepicker-range

`@todo`

- [ ] Design date-picker-range component with
- [ ] Calender-1 and Calender-2 ui containing
- [ ] toggle between months
- [ ] days
- [ ] dates
- [ ] Calender-1 only able to select months coming before Calender-2
- [ ] Calender-2 only able to select months coming before Calender-1
- [ ] Range selector
- [ ] Only able to pick is-on and after dates
- [ ] disable other dates
- [ ] Can select start and end date
- [ ] highlight all the dates coming in-between selected dates

----

### Issue - day-seletor-range

`@todo`
- [ ] Design day-seletor-range component
- [ ] Calender ui containing
- [ ] toggle between months
- [ ] days
- [ ] dates
- [ ] Only able to pick is-on and after dates
- [ ] disable other dates
- [ ] Only able to select 1 date
- [ ] Once selected, user cannot toggle between month

----

### Issue - month-seletor

`@todo`
- [ ] design month-selector component
- [ ] Calender header
- [ ] month-1
- [ ] leading and trailing chevron icons
- [ ] toggle between months onClick on icons
- [ ] month-2
- [ ] leading and trailing chevron icons
- [ ] toggle between months onClick on icons

----

### Issue - toggle-button (needs discussion)

`@todo`

----

### Issue - checkbox

`@todo`

- [ ] design checkbox component
- [ ] default state
- [ ] active state
- [ ] disable state

----

### Issue - range-slider

`@todo`

- [ ] design range-slider containing
- [ ] slider header
- [ ] title
- [ ] input field (updates onChange of slider val)
- [ ] max range
- [ ] slider
- [ ] default state
- [ ] active state
- [ ] track with dash pattern
- [ ] handle
- [ ] set and normal increament

----

### Issue - icon (needs discussion)

`@todo`

- [ ] design range-slider containing

### Issue - input-text (needs discussion)

`@todo`

- [ ] design input field component
- [ ] default status
- [ ] error state
- [ ] only accepts text

----

### Issue - input-number

`@todo`

- [ ] design input field component
- [ ] default status
- [ ] error state
- [ ] only accepts number

----

### Issue - link (needs discussion)

----

### Issue - title (needs discussion)

----

### Issue - demo-maker

`@todo`

- [ ] Design demo-maker component (an IDE)
- [ ] code editors
- [ ] code pen / code view

----

### Issue - Input (needs discussion)

----

### Issue - Terminal

`@todo`

- [ ] Design terminal component
- [ ] header
- [ ] containing grid of buttons
- [ ] body-content
- [ ] log
- [ ] tag
- [ ] text
- [ ] footer
- [ ] search/filter input
- [ ] apply filter btn
- [ ] collapsed btn
- [ ] total all messages number
- [ ] load more button

----

### Issue - Logs

`@todo`

- [ ] Design log component
- [ ] log contianer
- [ ] state
- [ ] default
- [ ] active
- [ ] header
- [ ] filename,
- [ ] event tag
- [ ] file dir
- [ ] log body content
- [ ] data
- [ ] ref
- [ ] footer
- [ ] code line

----

### Issue - filter (needs discussion)

----

### Issue - search-autocomplete

`@todo`

- [ ] Design search-autocomplete component
- [ ] input field
- [ ] trailing icon
- [ ] dropdown btn for filter
- [ ] filter select-option
- [ ] results container
- [ ] results
- [ ] category
- [ ] label
- [ ] text
- [ ] footer
- [ ] total feeds

----

### Issue - domlog (needs discussion)

----

### Issue - Tab

`@todo`

- [ ] Design tab component
- [ ] list of tabs
- [ ] default state
- [ ] active state

----

### Issue - datdot-ui-highlight (needs discussion)

----

### Issue - search-input (needs discussion)

----

### Issue - inputs (needs discussion)

----

### Issue - my-custom-slider (needs discussion)

----