@dhasdk/simple-ui 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/index.css +1 -0
  2. package/{src/index.ts → index.d.ts} +8 -15
  3. package/index.js +34 -0
  4. package/index.mjs +5473 -0
  5. package/lib/Accordion.d.ts +36 -0
  6. package/lib/AppointmentPicker.d.ts +21 -0
  7. package/lib/Badge.d.ts +11 -0
  8. package/lib/Breadcrumbs.d.ts +13 -0
  9. package/lib/Button.d.ts +15 -0
  10. package/lib/ButtonGroup.d.ts +8 -0
  11. package/lib/Card.d.ts +11 -0
  12. package/lib/CharacterCounter.d.ts +11 -0
  13. package/lib/CheckBox.d.ts +30 -0
  14. package/lib/DatePicker.d.ts +7 -0
  15. package/lib/Input.d.ts +16 -0
  16. package/lib/List.d.ts +22 -0
  17. package/lib/Modal.d.ts +18 -0
  18. package/lib/Pill.d.ts +13 -0
  19. package/lib/ProgressBar.d.ts +19 -0
  20. package/lib/RadioGroup.d.ts +16 -0
  21. package/lib/RadioIcon.d.ts +3 -0
  22. package/lib/Search.d.ts +26 -0
  23. package/lib/SearchContent.d.ts +6 -0
  24. package/lib/SectionHeader.d.ts +18 -0
  25. package/lib/Select.d.ts +19 -0
  26. package/lib/Shield.d.ts +12 -0
  27. package/lib/SideBarNav.d.ts +21 -0
  28. package/lib/Skeleton.d.ts +15 -0
  29. package/lib/SkipLink.d.ts +23 -0
  30. package/lib/Slider.d.ts +14 -0
  31. package/lib/Status.d.ts +10 -0
  32. package/lib/Tabs.d.ts +26 -0
  33. package/lib/Toggle.d.ts +11 -0
  34. package/lib/Tooltip.d.ts +14 -0
  35. package/package.json +1 -1
  36. package/.babelrc +0 -12
  37. package/.storybook/main.ts +0 -35
  38. package/.storybook/preview.ts +0 -4
  39. package/BAKpostcss.config.jsBAK +0 -15
  40. package/BAKtailwind.config.mjsBAK +0 -99
  41. package/coverage/storybook/coverage-storybook.json +0 -32411
  42. package/coverage/storybook/lcov-report/Accordion.tsx.html +0 -805
  43. package/coverage/storybook/lcov-report/Badge.tsx.html +0 -346
  44. package/coverage/storybook/lcov-report/Breadcrumbs.tsx.html +0 -742
  45. package/coverage/storybook/lcov-report/Button.tsx.html +0 -448
  46. package/coverage/storybook/lcov-report/ButtonGroup.tsx.html +0 -403
  47. package/coverage/storybook/lcov-report/Card.tsx.html +0 -292
  48. package/coverage/storybook/lcov-report/CharacterCounter.tsx.html +0 -253
  49. package/coverage/storybook/lcov-report/CheckBox.tsx.html +0 -1555
  50. package/coverage/storybook/lcov-report/DatePicker.tsx.html +0 -826
  51. package/coverage/storybook/lcov-report/Input.tsx.html +0 -1012
  52. package/coverage/storybook/lcov-report/List.tsx.html +0 -364
  53. package/coverage/storybook/lcov-report/Modal.tsx.html +0 -745
  54. package/coverage/storybook/lcov-report/Pill.tsx.html +0 -358
  55. package/coverage/storybook/lcov-report/Search.tsx.html +0 -997
  56. package/coverage/storybook/lcov-report/SearchContent.tsx.html +0 -235
  57. package/coverage/storybook/lcov-report/SectionHeader.tsx.html +0 -358
  58. package/coverage/storybook/lcov-report/Select.tsx.html +0 -1012
  59. package/coverage/storybook/lcov-report/Shield.tsx.html +0 -802
  60. package/coverage/storybook/lcov-report/SideBarNav.tsx.html +0 -490
  61. package/coverage/storybook/lcov-report/Skeleton.tsx.html +0 -394
  62. package/coverage/storybook/lcov-report/Slider.tsx.html +0 -385
  63. package/coverage/storybook/lcov-report/Status.tsx.html +0 -322
  64. package/coverage/storybook/lcov-report/Tabs.tsx.html +0 -610
  65. package/coverage/storybook/lcov-report/Toggle.tsx.html +0 -373
  66. package/coverage/storybook/lcov-report/Tooltip.tsx.html +0 -496
  67. package/coverage/storybook/lcov-report/base.css +0 -224
  68. package/coverage/storybook/lcov-report/block-navigation.js +0 -87
  69. package/coverage/storybook/lcov-report/favicon.png +0 -0
  70. package/coverage/storybook/lcov-report/index.html +0 -476
  71. package/coverage/storybook/lcov-report/prettify.css +0 -1
  72. package/coverage/storybook/lcov-report/prettify.js +0 -2
  73. package/coverage/storybook/lcov-report/sort-arrow-sprite.png +0 -0
  74. package/coverage/storybook/lcov-report/sorter.js +0 -196
  75. package/coverage/storybook/lcov.info +0 -2312
  76. package/dist/README.md +0 -1815
  77. package/eslint.config.mjs +0 -13
  78. package/project.json +0 -11
  79. package/src/assets/img/Frame.svg +0 -5
  80. package/src/assets/img/backArrowRight.svg +0 -10
  81. package/src/assets/img/bc-separator.png +0 -0
  82. package/src/assets/img/calendar.png +0 -0
  83. package/src/assets/img/calendar.svg +0 -4
  84. package/src/assets/img/check.svg +0 -5
  85. package/src/assets/img/check_box.svg +0 -10
  86. package/src/assets/img/check_box_empty.svg +0 -10
  87. package/src/assets/img/check_box_fill.svg +0 -10
  88. package/src/assets/img/check_box_fill_empty.svg +0 -10
  89. package/src/assets/img/chevron-down-white.svg +0 -2
  90. package/src/assets/img/chevron-down.svg +0 -2
  91. package/src/assets/img/chevron-left.svg +0 -1
  92. package/src/assets/img/chevron-right-light.svg +0 -4
  93. package/src/assets/img/chevron-right.svg +0 -3
  94. package/src/assets/img/chevron-up-white.svg +0 -1
  95. package/src/assets/img/chevron-up.svg +0 -1
  96. package/src/assets/img/clock.svg +0 -6
  97. package/src/assets/img/close.svg +0 -1
  98. package/src/assets/img/close2.svg +0 -6
  99. package/src/assets/img/closeModal.svg +0 -10
  100. package/src/assets/img/close_icon_dark.svg +0 -10
  101. package/src/assets/img/close_small.svg +0 -3
  102. package/src/assets/img/emergency_home.svg +0 -10
  103. package/src/assets/img/first-aid-kit.svg +0 -7
  104. package/src/assets/img/heartbeat.svg +0 -4
  105. package/src/assets/img/home-gray.svg +0 -3
  106. package/src/assets/img/home.svg +0 -3
  107. package/src/assets/img/hospital.jpg +0 -0
  108. package/src/assets/img/indeterminate_check_box.svg +0 -10
  109. package/src/assets/img/indeterminate_check_box_fill.svg +0 -10
  110. package/src/assets/img/info_24_ 1d4ed8.svg +0 -3
  111. package/src/assets/img/info_24_ 2c6441.svg +0 -3
  112. package/src/assets/img/marker_check_by_default.svg +0 -10
  113. package/src/assets/img/marker_check_by_default_fill.svg +0 -10
  114. package/src/assets/img/minus-accordion.svg +0 -5
  115. package/src/assets/img/minus.svg +0 -3
  116. package/src/assets/img/open.svg +0 -1
  117. package/src/assets/img/pill-white.svg +0 -7
  118. package/src/assets/img/pill.svg +0 -5
  119. package/src/assets/img/plus-accordion.svg +0 -5
  120. package/src/assets/img/plus.svg +0 -4
  121. package/src/assets/img/prescription.svg +0 -6
  122. package/src/assets/img/search.svg +0 -10
  123. package/src/assets/img/search_icon_light.svg +0 -10
  124. package/src/assets/img/separator.svg +0 -3
  125. package/src/assets/img/stethoscope-white.svg +0 -8
  126. package/src/assets/img/stethoscope.svg +0 -8
  127. package/src/assets/img/thumb_up.svg +0 -10
  128. package/src/assets/img/vector.svg +0 -3
  129. package/src/assets/img/warning-badge-disabled.svg +0 -11
  130. package/src/assets/img/warning-badge-green.svg +0 -11
  131. package/src/assets/img/warning-badge-red.svg +0 -11
  132. package/src/assets/img/warning-badge-yellow.svg +0 -11
  133. package/src/assets/img/warning.svg +0 -10
  134. package/src/global.d.ts +0 -13
  135. package/src/lib/Accordian--Accordian.stories.tsx +0 -312
  136. package/src/lib/Accordion.spec.tsx +0 -384
  137. package/src/lib/Accordion.tsx +0 -240
  138. package/src/lib/AppointmentPicker.spec.tsx +0 -138
  139. package/src/lib/AppointmentPicker.tsx +0 -97
  140. package/src/lib/Badge--Badge.stories.tsx +0 -60
  141. package/src/lib/Badge.spec.tsx +0 -70
  142. package/src/lib/Badge.tsx +0 -87
  143. package/src/lib/Breadcrumbs-Breadcrumbs.stories.tsx +0 -114
  144. package/src/lib/Breadcrumbs.spec.tsx +0 -218
  145. package/src/lib/Breadcrumbs.tsx +0 -219
  146. package/src/lib/Button--Button.stories.tsx +0 -220
  147. package/src/lib/Button.spec.tsx +0 -241
  148. package/src/lib/Button.tsx +0 -121
  149. package/src/lib/ButtonGroup--ButtonGroup.stories.tsx +0 -129
  150. package/src/lib/ButtonGroup.spec.tsx +0 -89
  151. package/src/lib/ButtonGroup.tsx +0 -107
  152. package/src/lib/Card--Card.stories.tsx +0 -113
  153. package/src/lib/Card.spec.tsx +0 -112
  154. package/src/lib/Card.tsx +0 -69
  155. package/src/lib/CharacterCounter--CharacterCounter.stories.tsx +0 -169
  156. package/src/lib/CharacterCounter.spec.tsx +0 -123
  157. package/src/lib/CharacterCounter.tsx +0 -56
  158. package/src/lib/CheckBox--CheckBox.stories.tsx +0 -107
  159. package/src/lib/CheckBox.spec.tsx +0 -412
  160. package/src/lib/CheckBox.tsx +0 -491
  161. package/src/lib/DatePicker--DatePicker.stories.tsx +0 -228
  162. package/src/lib/DatePicker.spec.tsx +0 -424
  163. package/src/lib/DatePicker.tsx +0 -247
  164. package/src/lib/Input--Input.stories.tsx +0 -449
  165. package/src/lib/Input.spec.tsx +0 -281
  166. package/src/lib/Input.tsx +0 -309
  167. package/src/lib/List--List.stories.tsx +0 -157
  168. package/src/lib/List.spec.tsx +0 -211
  169. package/src/lib/List.tsx +0 -93
  170. package/src/lib/Modal--Modal.stories.tsx +0 -454
  171. package/src/lib/Modal.spec.tsx +0 -202
  172. package/src/lib/Modal.tsx +0 -220
  173. package/src/lib/Pill--Pill.stories.tsx +0 -98
  174. package/src/lib/Pill.spec.tsx +0 -103
  175. package/src/lib/Pill.tsx +0 -91
  176. package/src/lib/ProgressBar.spec.tsx +0 -106
  177. package/src/lib/ProgressBar.tsx +0 -112
  178. package/src/lib/RadioGroup.spec.tsx +0 -84
  179. package/src/lib/RadioGroup.tsx +0 -74
  180. package/src/lib/RadioIcon.tsx +0 -13
  181. package/src/lib/Search--Search.stories.tsx +0 -67
  182. package/src/lib/Search.spec.tsx +0 -182
  183. package/src/lib/Search.tsx +0 -304
  184. package/src/lib/SearchContent.tsx +0 -51
  185. package/src/lib/SectionHeader--SectionHeader.stories.tsx +0 -98
  186. package/src/lib/SectionHeader.spec.tsx +0 -60
  187. package/src/lib/SectionHeader.tsx +0 -91
  188. package/src/lib/Select--Select.stories.tsx +0 -387
  189. package/src/lib/Select.spec.tsx +0 -493
  190. package/src/lib/Select.tsx +0 -311
  191. package/src/lib/Shield--Shield.stories.tsx +0 -196
  192. package/src/lib/Shield.spec.tsx +0 -275
  193. package/src/lib/Shield.tsx +0 -239
  194. package/src/lib/SideBarNav--SideBarNav.stories.tsx +0 -136
  195. package/src/lib/SideBarNav.spec.tsx +0 -178
  196. package/src/lib/SideBarNav.tsx +0 -135
  197. package/src/lib/Skeleton--Skeleton.stories.tsx +0 -77
  198. package/src/lib/Skeleton.module.css +0 -16
  199. package/src/lib/Skeleton.spec.tsx +0 -83
  200. package/src/lib/Skeleton.tsx +0 -103
  201. package/src/lib/SkipLink.spec.tsx +0 -76
  202. package/src/lib/SkipLink.tsx +0 -48
  203. package/src/lib/Slider--Slider.stories.tsx +0 -108
  204. package/src/lib/Slider.module.css +0 -109
  205. package/src/lib/Slider.spec.tsx +0 -67
  206. package/src/lib/Slider.tsx +0 -101
  207. package/src/lib/Status--Status.stories.tsx +0 -93
  208. package/src/lib/Status.spec.tsx +0 -118
  209. package/src/lib/Status.tsx +0 -79
  210. package/src/lib/Tabs--Tabs.stories.tsx +0 -294
  211. package/src/lib/Tabs.spec.tsx +0 -249
  212. package/src/lib/Tabs.tsx +0 -188
  213. package/src/lib/Tester.spec.tsx +0 -17
  214. package/src/lib/Toggle--Toggle.stories.tsx +0 -162
  215. package/src/lib/Toggle.spec.tsx +0 -122
  216. package/src/lib/Toggle.tsx +0 -96
  217. package/src/lib/Tooltip--Tooltip.stories.tsx +0 -315
  218. package/src/lib/Tooltip.spec.tsx +0 -307
  219. package/src/lib/Tooltip.tsx +0 -137
  220. package/src/lib/bak-simple-ui.stories.tsx-bak +0 -24
  221. package/src/styles.css +0 -190
  222. package/tsconfig.json +0 -25
  223. package/tsconfig.lib.json +0 -42
  224. package/tsconfig.spec.json +0 -29
  225. package/tsconfig.storybook.json +0 -36
  226. package/vite.config.mts +0 -87
  227. package/vitest.setup.ts +0 -12
package/coverage/storybook/lcov-report/Badge.tsx.html DELETED
@@ -1,346 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for Badge.tsx</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="prettify.css" />
9
- <link rel="stylesheet" href="base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="index.html">All files</a> Badge.tsx</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>6/6</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">83.33% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>5/6</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>1/1</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>6/6</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a>
86
- <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a>
88
- <a name='L23'></a><a href='#L23'>23</a>
89
- <a name='L24'></a><a href='#L24'>24</a>
90
- <a name='L25'></a><a href='#L25'>25</a>
91
- <a name='L26'></a><a href='#L26'>26</a>
92
- <a name='L27'></a><a href='#L27'>27</a>
93
- <a name='L28'></a><a href='#L28'>28</a>
94
- <a name='L29'></a><a href='#L29'>29</a>
95
- <a name='L30'></a><a href='#L30'>30</a>
96
- <a name='L31'></a><a href='#L31'>31</a>
97
- <a name='L32'></a><a href='#L32'>32</a>
98
- <a name='L33'></a><a href='#L33'>33</a>
99
- <a name='L34'></a><a href='#L34'>34</a>
100
- <a name='L35'></a><a href='#L35'>35</a>
101
- <a name='L36'></a><a href='#L36'>36</a>
102
- <a name='L37'></a><a href='#L37'>37</a>
103
- <a name='L38'></a><a href='#L38'>38</a>
104
- <a name='L39'></a><a href='#L39'>39</a>
105
- <a name='L40'></a><a href='#L40'>40</a>
106
- <a name='L41'></a><a href='#L41'>41</a>
107
- <a name='L42'></a><a href='#L42'>42</a>
108
- <a name='L43'></a><a href='#L43'>43</a>
109
- <a name='L44'></a><a href='#L44'>44</a>
110
- <a name='L45'></a><a href='#L45'>45</a>
111
- <a name='L46'></a><a href='#L46'>46</a>
112
- <a name='L47'></a><a href='#L47'>47</a>
113
- <a name='L48'></a><a href='#L48'>48</a>
114
- <a name='L49'></a><a href='#L49'>49</a>
115
- <a name='L50'></a><a href='#L50'>50</a>
116
- <a name='L51'></a><a href='#L51'>51</a>
117
- <a name='L52'></a><a href='#L52'>52</a>
118
- <a name='L53'></a><a href='#L53'>53</a>
119
- <a name='L54'></a><a href='#L54'>54</a>
120
- <a name='L55'></a><a href='#L55'>55</a>
121
- <a name='L56'></a><a href='#L56'>56</a>
122
- <a name='L57'></a><a href='#L57'>57</a>
123
- <a name='L58'></a><a href='#L58'>58</a>
124
- <a name='L59'></a><a href='#L59'>59</a>
125
- <a name='L60'></a><a href='#L60'>60</a>
126
- <a name='L61'></a><a href='#L61'>61</a>
127
- <a name='L62'></a><a href='#L62'>62</a>
128
- <a name='L63'></a><a href='#L63'>63</a>
129
- <a name='L64'></a><a href='#L64'>64</a>
130
- <a name='L65'></a><a href='#L65'>65</a>
131
- <a name='L66'></a><a href='#L66'>66</a>
132
- <a name='L67'></a><a href='#L67'>67</a>
133
- <a name='L68'></a><a href='#L68'>68</a>
134
- <a name='L69'></a><a href='#L69'>69</a>
135
- <a name='L70'></a><a href='#L70'>70</a>
136
- <a name='L71'></a><a href='#L71'>71</a>
137
- <a name='L72'></a><a href='#L72'>72</a>
138
- <a name='L73'></a><a href='#L73'>73</a>
139
- <a name='L74'></a><a href='#L74'>74</a>
140
- <a name='L75'></a><a href='#L75'>75</a>
141
- <a name='L76'></a><a href='#L76'>76</a>
142
- <a name='L77'></a><a href='#L77'>77</a>
143
- <a name='L78'></a><a href='#L78'>78</a>
144
- <a name='L79'></a><a href='#L79'>79</a>
145
- <a name='L80'></a><a href='#L80'>80</a>
146
- <a name='L81'></a><a href='#L81'>81</a>
147
- <a name='L82'></a><a href='#L82'>82</a>
148
- <a name='L83'></a><a href='#L83'>83</a>
149
- <a name='L84'></a><a href='#L84'>84</a>
150
- <a name='L85'></a><a href='#L85'>85</a>
151
- <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a>
153
- <a name='L88'></a><a href='#L88'>88</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
154
- <span class="cline-any cline-neutral">&nbsp;</span>
155
- <span class="cline-any cline-neutral">&nbsp;</span>
156
- <span class="cline-any cline-neutral">&nbsp;</span>
157
- <span class="cline-any cline-neutral">&nbsp;</span>
158
- <span class="cline-any cline-neutral">&nbsp;</span>
159
- <span class="cline-any cline-neutral">&nbsp;</span>
160
- <span class="cline-any cline-neutral">&nbsp;</span>
161
- <span class="cline-any cline-neutral">&nbsp;</span>
162
- <span class="cline-any cline-neutral">&nbsp;</span>
163
- <span class="cline-any cline-neutral">&nbsp;</span>
164
- <span class="cline-any cline-neutral">&nbsp;</span>
165
- <span class="cline-any cline-neutral">&nbsp;</span>
166
- <span class="cline-any cline-neutral">&nbsp;</span>
167
- <span class="cline-any cline-neutral">&nbsp;</span>
168
- <span class="cline-any cline-yes">5x</span>
169
- <span class="cline-any cline-neutral">&nbsp;</span>
170
- <span class="cline-any cline-neutral">&nbsp;</span>
171
- <span class="cline-any cline-neutral">&nbsp;</span>
172
- <span class="cline-any cline-neutral">&nbsp;</span>
173
- <span class="cline-any cline-neutral">&nbsp;</span>
174
- <span class="cline-any cline-neutral">&nbsp;</span>
175
- <span class="cline-any cline-neutral">&nbsp;</span>
176
- <span class="cline-any cline-neutral">&nbsp;</span>
177
- <span class="cline-any cline-neutral">&nbsp;</span>
178
- <span class="cline-any cline-neutral">&nbsp;</span>
179
- <span class="cline-any cline-neutral">&nbsp;</span>
180
- <span class="cline-any cline-neutral">&nbsp;</span>
181
- <span class="cline-any cline-neutral">&nbsp;</span>
182
- <span class="cline-any cline-neutral">&nbsp;</span>
183
- <span class="cline-any cline-neutral">&nbsp;</span>
184
- <span class="cline-any cline-neutral">&nbsp;</span>
185
- <span class="cline-any cline-neutral">&nbsp;</span>
186
- <span class="cline-any cline-neutral">&nbsp;</span>
187
- <span class="cline-any cline-neutral">&nbsp;</span>
188
- <span class="cline-any cline-neutral">&nbsp;</span>
189
- <span class="cline-any cline-neutral">&nbsp;</span>
190
- <span class="cline-any cline-neutral">&nbsp;</span>
191
- <span class="cline-any cline-neutral">&nbsp;</span>
192
- <span class="cline-any cline-neutral">&nbsp;</span>
193
- <span class="cline-any cline-neutral">&nbsp;</span>
194
- <span class="cline-any cline-neutral">&nbsp;</span>
195
- <span class="cline-any cline-neutral">&nbsp;</span>
196
- <span class="cline-any cline-neutral">&nbsp;</span>
197
- <span class="cline-any cline-neutral">&nbsp;</span>
198
- <span class="cline-any cline-neutral">&nbsp;</span>
199
- <span class="cline-any cline-neutral">&nbsp;</span>
200
- <span class="cline-any cline-neutral">&nbsp;</span>
201
- <span class="cline-any cline-neutral">&nbsp;</span>
202
- <span class="cline-any cline-neutral">&nbsp;</span>
203
- <span class="cline-any cline-yes">5x</span>
204
- <span class="cline-any cline-neutral">&nbsp;</span>
205
- <span class="cline-any cline-neutral">&nbsp;</span>
206
- <span class="cline-any cline-neutral">&nbsp;</span>
207
- <span class="cline-any cline-neutral">&nbsp;</span>
208
- <span class="cline-any cline-neutral">&nbsp;</span>
209
- <span class="cline-any cline-neutral">&nbsp;</span>
210
- <span class="cline-any cline-yes">5x</span>
211
- <span class="cline-any cline-neutral">&nbsp;</span>
212
- <span class="cline-any cline-neutral">&nbsp;</span>
213
- <span class="cline-any cline-neutral">&nbsp;</span>
214
- <span class="cline-any cline-neutral">&nbsp;</span>
215
- <span class="cline-any cline-yes">14x</span>
216
- <span class="cline-any cline-neutral">&nbsp;</span>
217
- <span class="cline-any cline-yes">14x</span>
218
- <span class="cline-any cline-neutral">&nbsp;</span>
219
- <span class="cline-any cline-neutral">&nbsp;</span>
220
- <span class="cline-any cline-neutral">&nbsp;</span>
221
- <span class="cline-any cline-neutral">&nbsp;</span>
222
- <span class="cline-any cline-neutral">&nbsp;</span>
223
- <span class="cline-any cline-neutral">&nbsp;</span>
224
- <span class="cline-any cline-neutral">&nbsp;</span>
225
- <span class="cline-any cline-neutral">&nbsp;</span>
226
- <span class="cline-any cline-neutral">&nbsp;</span>
227
- <span class="cline-any cline-neutral">&nbsp;</span>
228
- <span class="cline-any cline-neutral">&nbsp;</span>
229
- <span class="cline-any cline-neutral">&nbsp;</span>
230
- <span class="cline-any cline-neutral">&nbsp;</span>
231
- <span class="cline-any cline-neutral">&nbsp;</span>
232
- <span class="cline-any cline-neutral">&nbsp;</span>
233
- <span class="cline-any cline-neutral">&nbsp;</span>
234
- <span class="cline-any cline-neutral">&nbsp;</span>
235
- <span class="cline-any cline-neutral">&nbsp;</span>
236
- <span class="cline-any cline-neutral">&nbsp;</span>
237
- <span class="cline-any cline-neutral">&nbsp;</span>
238
- <span class="cline-any cline-neutral">&nbsp;</span>
239
- <span class="cline-any cline-yes">5x</span>
240
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { forwardRef, HTMLAttributes, ReactNode } from 'react';
241
- import { twMerge } from 'tailwind-merge';
242
- import warningSuccess from '../assets/img/warning-badge-green.svg';
243
- import warningDanger from '../assets/img/warning-badge-red.svg';
244
- import warningCaution from '../assets/img/warning-badge-yellow.svg';
245
- import warningDisabled from '../assets/img/warning-badge-disabled.svg';
246
- &nbsp;
247
- type VariantsType = {
248
- [key: string]: {
249
- className: string;
250
- classNameImage: string;
251
- classNameChildren: string;
252
- }
253
- };
254
- &nbsp;
255
- const badgeVariants: VariantsType = {
256
- success: {
257
- className: 'w-[79px] h-[26px] px-3 py-1 bg-[#d6f4d5] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#387740] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
258
- classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
259
- classNameChildren: "text-[#387740] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]",
260
- },
261
- caution: {
262
- className: 'w-[79px] h-[26px] px-3 py-1 bg-[#fff1be] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#966121] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
263
- classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
264
- classNameChildren: "text-[#966222] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]",
265
- },
266
- danger: {
267
- className: 'w-[79px] h-[26px] px-3 py-1 bg-[#f4c2c2] rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#a22b23] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
268
- classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
269
- classNameChildren: "text-[#A32C24] text-xs font-normal font-['Arial'] leading-[18px] md:text-base md:leading-normal lg:text-lg lg:leading-[27px]",
270
- },
271
- disabled: {
272
- className: 'w-[79px] h-[26px] px-3 py-1 rounded-[40px] outline outline-1 outline-offset-[-1px] outline-[#394150] inline-flex justify-center items-center gap-0 md:w-[113px] md:h-[36px] md:px-5 md:py-1.5 md:gap-0.5 lg:w-[133px] lg:h-[43px] lg:px-6 lg:py-2 lg:gap-0',
273
- classNameImage: 'relative size-2.5 mb-0.5 me-1.5 md:size-3.5 md:me-2 lg:size-4 lg:mb-0.5 lg:me-2.5 lg:ms-1',
274
- classNameChildren: "text-[#394150] text-xs font-normal font-['Arial'] leading-[18px] md:text-md md:leading-normal lg:text-lg lg:leading-[27px]",
275
- },
276
- };
277
- &nbsp;
278
- export interface BadgeProps extends HTMLAttributes&lt;HTMLDivElement&gt; {
279
- // variant?: keyof typeof badgeVariants;
280
- variant?: 'success' | 'caution' | 'danger' | 'disabled';
281
- className?: string;
282
- classNameImage?: string;
283
- classNameChildren?: string;
284
- icon?: ReactNode;
285
- iconAlt?: string;
286
- children: ReactNode;
287
- }
288
- &nbsp;
289
- // Map each variant to its default SVG asset
290
- const defaultIcons = {
291
- success: warningSuccess,
292
- caution: warningCaution,
293
- danger: warningDanger,
294
- disabled: warningDisabled,
295
- };
296
- &nbsp;
297
- export const Badge = forwardRef&lt;HTMLDivElement, BadgeProps&gt;(
298
- ({ variant = <span class="branch-0 cbranch-no" title="branch not covered" >'success', c</span>lassName = '', classNameImage = '',
299
- classNameChildren = '', icon, children, ...props }, ref) =&gt; {
300
- // Use the provided icon or default to the one for the variant.
301
- // Note: The imported SVGs are URLs so they can be passed as src.
302
- const iconToDisplay = defaultIcons[variant];
303
- &nbsp;
304
- return (
305
- &lt;div
306
- className={twMerge(badgeVariants[variant].className, className)}
307
- ref={ref}
308
- {...props}
309
- &gt;
310
- {/* Conditionally render based on icon type */}
311
- {icon ? (
312
- &lt;span className={twMerge(badgeVariants[variant].classNameImage, classNameImage)}&gt;{icon}&lt;/span&gt;
313
- ) : (
314
- &lt;img
315
- className={twMerge(badgeVariants[variant].classNameImage, classNameImage)}
316
- src={iconToDisplay as string}
317
- alt={'warning'}
318
- /&gt;
319
- )}
320
- &lt;div className={twMerge(badgeVariants[variant].classNameChildren, classNameChildren)}&gt;
321
- {children}
322
- &lt;/div&gt;
323
- &lt;/div&gt;
324
- );
325
- }
326
- );
327
- &nbsp;</pre></td></tr></table></pre>
328
-
329
- <div class='push'></div><!-- for sticky footer -->
330
- </div><!-- /wrapper -->
331
- <div class='footer quiet pad2 space-top1 center small'>
332
- Code coverage generated by
333
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
334
- at 2025-05-29T21:55:20.662Z
335
- </div>
336
- <script src="prettify.js"></script>
337
- <script>
338
- window.onload = function () {
339
- prettyPrint();
340
- };
341
- </script>
342
- <script src="sorter.js"></script>
343
- <script src="block-navigation.js"></script>
344
- </body>
345
- </html>
346
-