|
| 1 | +<!-- @license CC0-1.0 --> |
| 2 | + |
| 3 | +# Acceptatiecriteria voor het maken van de Text Input component |
| 4 | + |
| 5 | +## Varianten |
| 6 | + |
| 7 | +### Deze varianten worden ondersteund |
| 8 | + |
| 9 | +- Varianten die standaard in HTML beschikbaar zijn, worden in Typescript gedefinieerd door de attributen van het standaard HTMLElement te gebruiken. |
| 10 | +- Varianten die niet standaard in HTML beschikbaar zijn, worden als uitgebreiding toegevoegd. |
| 11 | +- Deze varianten worden gedocumenteerd op de website, in de README en in de standaard Storybook. |
| 12 | +- Deze varianten worden beschikbaar gemaakt in Figma. |
| 13 | + |
| 14 | +#### Type {#type} |
| 15 | + |
| 16 | +String (code) / Enum (design) |
| 17 | + |
| 18 | +- Text (default) |
| 19 | +- Email |
| 20 | +- Url |
| 21 | +- Tel |
| 22 | +- Search |
| 23 | +- Password |
| 24 | + |
| 25 | +#### Width |
| 26 | + |
| 27 | +Enum |
| 28 | + |
| 29 | +- xs |
| 30 | +- sm |
| 31 | +- md (default) |
| 32 | +- lg |
| 33 | +- xl |
| 34 | +- Full (100%) |
| 35 | + |
| 36 | +#### Value |
| 37 | + |
| 38 | +String (code) / Text - string (design) |
| 39 | + |
| 40 | +#### Show Placeholder |
| 41 | + |
| 42 | +Boolean |
| 43 | + |
| 44 | +- False (default) |
| 45 | +- True |
| 46 | + |
| 47 | +#### Placeholder |
| 48 | + |
| 49 | +String (code) / Text - string (design) |
| 50 | + |
| 51 | +#### State |
| 52 | + |
| 53 | +Enum |
| 54 | + |
| 55 | +- Default (default) |
| 56 | +- Hover |
| 57 | +- Focus-visible |
| 58 | + |
| 59 | +#### Disabled |
| 60 | + |
| 61 | +Boolean |
| 62 | + |
| 63 | +- False (default) |
| 64 | +- True |
| 65 | + |
| 66 | +#### Invalid |
| 67 | + |
| 68 | +Boolean |
| 69 | + |
| 70 | +- False (default) |
| 71 | +- True |
| 72 | + |
| 73 | +#### Read-only |
| 74 | + |
| 75 | +Boolean |
| 76 | + |
| 77 | +- False (default) |
| 78 | +- True |
| 79 | + |
| 80 | +#### Required |
| 81 | + |
| 82 | +Boolean |
| 83 | + |
| 84 | +- False (default) |
| 85 | +- True |
| 86 | + |
| 87 | +### Deze varianten worden niet ondersteund |
| 88 | + |
| 89 | +- Deze varianten, die standaard in HTML beschikbaar zijn, worden niet ondersteund. Ze worden uit het HTMLElement-type gehaald met Omit tijdens het definiëren van de properties in Typescript. |
| 90 | +- Deze varianten worden niet gedocumenteerd |
| 91 | +- Deze varianten worden niet beschikbaar gemaakt in Figma. |
| 92 | + |
| 93 | +#### Type {#not-supported-type} |
| 94 | + |
| 95 | +- Color |
| 96 | +- Range |
| 97 | +- Radio |
| 98 | +- Checkbox |
| 99 | +- File |
| 100 | +- Submit |
| 101 | +- Image |
| 102 | +- Reset |
| 103 | +- Button |
| 104 | + |
| 105 | +### Deze varianten worden ondersteund, maar raden we niet aan |
| 106 | + |
| 107 | +- Omdat deze varianten standaard in HTML beschikbaar zijn, worden ze ondersteund. Dit doen we door het HTMLElement-type te extenden in Typescript. |
| 108 | +- Deze varianten worden niet gedocumenteerd op de website, in de README en in de standaard Storybook. |
| 109 | +- Deze varianten worden wel meegenomen in de 'Test' Storybook. |
| 110 | +- Deze varianten worden beschikbaar gemaakt in Figma. |
| 111 | + |
| 112 | +#### Type {#not-suggested-type} |
| 113 | + |
| 114 | +- Hidden |
| 115 | +- :not([type]) |
| 116 | +- Date |
| 117 | +- Month |
| 118 | +- Week |
| 119 | +- Time |
| 120 | +- Datetime-local |
| 121 | +- Number |
0 commit comments