@dktunited-techoff/techoff-suite-ui 1.7.10 → 1.8.0

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 (327) hide show
  1. package/package.json +1 -1
  2. package/src/components/{TsDropdown → TsDropdowns/TsDropdown}/TsDropdown.tsx +5 -5
  3. package/{lib/components → src/components/TsDropdowns}/TsDropdown/__stories__/TsDropdown.stories.mdx +1 -1
  4. package/{lib/components/TsDropdown/TsDropdown.css → src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.css} +24 -55
  5. package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.tsx +104 -0
  6. package/src/components/TsDropdowns/TsDropdownFilter/TsDropdownFilter.types.ts +8 -0
  7. package/{esm/components/TsDropdown → src/components/TsDropdowns/TsDropdownFilter}/__stories__/TsDropdown.stories.mdx +13 -29
  8. package/src/components/TsInput/TsInput/TsInput.css +19 -0
  9. package/src/components/TsInput/TsInput/TsInput.tsx +5 -2
  10. package/src/components/TsInput/TsInput/TsInput.types.tsx +1 -0
  11. package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
  12. package/src/index.ts +2 -1
  13. package/esm/assets/fonts/Montserrat-Medium.ttf +0 -0
  14. package/esm/assets/fonts/Roboto-Light.ttf +0 -0
  15. package/esm/components/TsButton/TsButton.css +0 -121
  16. package/esm/components/TsButton/TsButton.d.ts +0 -5
  17. package/esm/components/TsButton/TsButton.js +0 -17
  18. package/esm/components/TsButton/TsButton.js.map +0 -1
  19. package/esm/components/TsButton/TsButton.types.d.ts +0 -9
  20. package/esm/components/TsButton/TsButton.types.js +0 -2
  21. package/esm/components/TsButton/TsButton.types.js.map +0 -1
  22. package/esm/components/TsButton/__stories__/TsButton.stories.mdx +0 -84
  23. package/esm/components/TsCheckbox/TsCheckbox.css +0 -64
  24. package/esm/components/TsCheckbox/TsCheckbox.d.ts +0 -4
  25. package/esm/components/TsCheckbox/TsCheckbox.js +0 -17
  26. package/esm/components/TsCheckbox/TsCheckbox.js.map +0 -1
  27. package/esm/components/TsCheckbox/TsCheckbox.types.d.ts +0 -7
  28. package/esm/components/TsCheckbox/TsCheckbox.types.js +0 -2
  29. package/esm/components/TsCheckbox/TsCheckbox.types.js.map +0 -1
  30. package/esm/components/TsCheckbox/__stories__/TsCheckbox.stories.mdx +0 -56
  31. package/esm/components/TsDropdown/TsDropdown.d.ts +0 -4
  32. package/esm/components/TsDropdown/TsDropdown.js +0 -100
  33. package/esm/components/TsDropdown/TsDropdown.js.map +0 -1
  34. package/esm/components/TsDropdown/TsDropdown.types.d.ts +0 -17
  35. package/esm/components/TsDropdown/TsDropdown.types.js +0 -2
  36. package/esm/components/TsDropdown/TsDropdown.types.js.map +0 -1
  37. package/esm/components/TsDropdown/__stories__/fruits.d.ts +0 -4
  38. package/esm/components/TsDropdown/__stories__/fruits.js +0 -48
  39. package/esm/components/TsDropdown/__stories__/fruits.js.map +0 -1
  40. package/esm/components/TsIcon/TsIcon.css +0 -26
  41. package/esm/components/TsIcon/TsIcon.d.ts +0 -4
  42. package/esm/components/TsIcon/TsIcon.js +0 -12
  43. package/esm/components/TsIcon/TsIcon.js.map +0 -1
  44. package/esm/components/TsIcon/TsIcon.types.d.ts +0 -4
  45. package/esm/components/TsIcon/TsIcon.types.js +0 -2
  46. package/esm/components/TsIcon/TsIcon.types.js.map +0 -1
  47. package/esm/components/TsIcon/__stories__/TsIcon.stories.mdx +0 -89
  48. package/esm/components/TsIcon/icons/add-circle.svg +0 -1
  49. package/esm/components/TsIcon/icons/add.svg +0 -1
  50. package/esm/components/TsIcon/icons/alert-circle-filled.svg +0 -1
  51. package/esm/components/TsIcon/icons/alert-circle.svg +0 -1
  52. package/esm/components/TsIcon/icons/alert-triangle-filled.svg +0 -1
  53. package/esm/components/TsIcon/icons/alert-triangle.svg +0 -1
  54. package/esm/components/TsIcon/icons/arrow-diagonal-collapse.svg +0 -1
  55. package/esm/components/TsIcon/icons/arrow-diagonal-expand.svg +0 -1
  56. package/esm/components/TsIcon/icons/arrow-down.svg +0 -1
  57. package/esm/components/TsIcon/icons/arrow-go-back.svg +0 -1
  58. package/esm/components/TsIcon/icons/arrow-left-right.svg +0 -1
  59. package/esm/components/TsIcon/icons/arrow-left.svg +0 -1
  60. package/esm/components/TsIcon/icons/arrow-right.svg +0 -1
  61. package/esm/components/TsIcon/icons/arrow-up-down.svg +0 -1
  62. package/esm/components/TsIcon/icons/arrow-up.svg +0 -1
  63. package/esm/components/TsIcon/icons/award.svg +0 -1
  64. package/esm/components/TsIcon/icons/check-circle-filled.svg +0 -1
  65. package/esm/components/TsIcon/icons/check-circle-timer.svg +0 -7
  66. package/esm/components/TsIcon/icons/check-circle.svg +0 -1
  67. package/esm/components/TsIcon/icons/check-square-filled.svg +0 -1
  68. package/esm/components/TsIcon/icons/check-square.svg +0 -1
  69. package/esm/components/TsIcon/icons/check.svg +0 -1
  70. package/esm/components/TsIcon/icons/chevron-down.svg +0 -1
  71. package/esm/components/TsIcon/icons/chevron-left.svg +0 -1
  72. package/esm/components/TsIcon/icons/chevron-right.svg +0 -1
  73. package/esm/components/TsIcon/icons/chevron-up.svg +0 -1
  74. package/esm/components/TsIcon/icons/circle.svg +0 -1
  75. package/esm/components/TsIcon/icons/close-circle.svg +0 -1
  76. package/esm/components/TsIcon/icons/close.svg +0 -1
  77. package/esm/components/TsIcon/icons/currency-euro.svg +0 -1
  78. package/esm/components/TsIcon/icons/download.svg +0 -1
  79. package/esm/components/TsIcon/icons/edit.svg +0 -1
  80. package/esm/components/TsIcon/icons/external-link.svg +0 -1
  81. package/esm/components/TsIcon/icons/filter-off.svg +0 -1
  82. package/esm/components/TsIcon/icons/filter.svg +0 -1
  83. package/esm/components/TsIcon/icons/flashlight-off.svg +0 -1
  84. package/esm/components/TsIcon/icons/flashlight.svg +0 -1
  85. package/esm/components/TsIcon/icons/header-bikestudio.svg +0 -32
  86. package/esm/components/TsIcon/icons/header-nsc-helmet.svg +0 -32
  87. package/esm/components/TsIcon/icons/header-opticost.svg +0 -32
  88. package/esm/components/TsIcon/icons/header-repairability.svg +0 -32
  89. package/esm/components/TsIcon/icons/heart-filled.svg +0 -1
  90. package/esm/components/TsIcon/icons/heart.svg +0 -1
  91. package/esm/components/TsIcon/icons/history.svg +0 -1
  92. package/esm/components/TsIcon/icons/home.svg +0 -1
  93. package/esm/components/TsIcon/icons/index.d.ts +0 -3
  94. package/esm/components/TsIcon/icons/index.js +0 -61
  95. package/esm/components/TsIcon/icons/index.js.map +0 -1
  96. package/esm/components/TsIcon/icons/index.ts +0 -60
  97. package/esm/components/TsIcon/icons/link.svg +0 -1
  98. package/esm/components/TsIcon/icons/list-settings.svg +0 -1
  99. package/esm/components/TsIcon/icons/lock.svg +0 -1
  100. package/esm/components/TsIcon/icons/loop-right.svg +0 -1
  101. package/esm/components/TsIcon/icons/percent.svg +0 -1
  102. package/esm/components/TsIcon/icons/question-circle.svg +0 -1
  103. package/esm/components/TsIcon/icons/save.svg +0 -1
  104. package/esm/components/TsIcon/icons/search.svg +0 -1
  105. package/esm/components/TsIcon/icons/seedling-circle.svg +0 -12
  106. package/esm/components/TsIcon/icons/square.svg +0 -1
  107. package/esm/components/TsIcon/icons/timer.svg +0 -1
  108. package/esm/components/TsIcon/icons/tools.svg +0 -1
  109. package/esm/components/TsIcon/icons/user.svg +0 -1
  110. package/esm/components/TsInput/TsInput/TsInput.css +0 -73
  111. package/esm/components/TsInput/TsInput/TsInput.d.ts +0 -4
  112. package/esm/components/TsInput/TsInput/TsInput.js +0 -18
  113. package/esm/components/TsInput/TsInput/TsInput.js.map +0 -1
  114. package/esm/components/TsInput/TsInput/TsInput.tsx +0 -31
  115. package/esm/components/TsInput/TsInput/TsInput.types.d.ts +0 -7
  116. package/esm/components/TsInput/TsInput/TsInput.types.js +0 -2
  117. package/esm/components/TsInput/TsInput/TsInput.types.js.map +0 -1
  118. package/esm/components/TsInput/TsInput/TsInput.types.tsx +0 -8
  119. package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +0 -72
  120. package/esm/components/TsLoader/TsLoader.css +0 -42
  121. package/esm/components/TsLoader/TsLoader.d.ts +0 -4
  122. package/esm/components/TsLoader/TsLoader.js +0 -6
  123. package/esm/components/TsLoader/TsLoader.js.map +0 -1
  124. package/esm/components/TsLoader/TsLoader.types.d.ts +0 -3
  125. package/esm/components/TsLoader/TsLoader.types.js +0 -2
  126. package/esm/components/TsLoader/TsLoader.types.js.map +0 -1
  127. package/esm/components/TsLoader/__stories__/TsLoader.stories.mdx +0 -30
  128. package/esm/components/TsTabs/TsTabs.css +0 -69
  129. package/esm/components/TsTabs/TsTabs.d.ts +0 -4
  130. package/esm/components/TsTabs/TsTabs.js +0 -30
  131. package/esm/components/TsTabs/TsTabs.js.map +0 -1
  132. package/esm/components/TsTabs/TsTabs.types.d.ts +0 -14
  133. package/esm/components/TsTabs/TsTabs.types.js +0 -2
  134. package/esm/components/TsTabs/TsTabs.types.js.map +0 -1
  135. package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx +0 -50
  136. package/esm/hooks/use-click-outside.d.ts +0 -2
  137. package/esm/hooks/use-click-outside.js +0 -14
  138. package/esm/hooks/use-click-outside.js.map +0 -1
  139. package/esm/index.d.ts +0 -10
  140. package/esm/index.js +0 -11
  141. package/esm/index.js.map +0 -1
  142. package/esm/layouts/TsHeader/TsHeader.css +0 -186
  143. package/esm/layouts/TsHeader/TsHeader.d.ts +0 -4
  144. package/esm/layouts/TsHeader/TsHeader.js +0 -13
  145. package/esm/layouts/TsHeader/TsHeader.js.map +0 -1
  146. package/esm/layouts/TsHeader/TsHeader.types.d.ts +0 -23
  147. package/esm/layouts/TsHeader/TsHeader.types.js +0 -2
  148. package/esm/layouts/TsHeader/TsHeader.types.js.map +0 -1
  149. package/esm/layouts/TsHeader/TsHeaderProfile.d.ts +0 -5
  150. package/esm/layouts/TsHeader/TsHeaderProfile.js +0 -38
  151. package/esm/layouts/TsHeader/TsHeaderProfile.js.map +0 -1
  152. package/esm/layouts/TsHeader/TsHeaderSearch.d.ts +0 -3
  153. package/esm/layouts/TsHeader/TsHeaderSearch.js +0 -58
  154. package/esm/layouts/TsHeader/TsHeaderSearch.js.map +0 -1
  155. package/esm/layouts/TsHeader/__stories__/TsHeader.stories.mdx +0 -71
  156. package/esm/layouts/TsNavigation/TsNavigation.css +0 -72
  157. package/esm/layouts/TsNavigation/TsNavigation.d.ts +0 -7
  158. package/esm/layouts/TsNavigation/TsNavigation.js +0 -29
  159. package/esm/layouts/TsNavigation/TsNavigation.js.map +0 -1
  160. package/esm/layouts/TsNavigation/TsNavigation.types.d.ts +0 -10
  161. package/esm/layouts/TsNavigation/TsNavigation.types.js +0 -2
  162. package/esm/layouts/TsNavigation/TsNavigation.types.js.map +0 -1
  163. package/esm/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx +0 -51
  164. package/esm/utils/string.utils.d.ts +0 -1
  165. package/esm/utils/string.utils.js +0 -2
  166. package/esm/utils/string.utils.js.map +0 -1
  167. package/lib/assets/fonts/Montserrat-Medium.ttf +0 -0
  168. package/lib/assets/fonts/Roboto-Light.ttf +0 -0
  169. package/lib/components/TsButton/TsButton.css +0 -121
  170. package/lib/components/TsButton/TsButton.d.ts +0 -5
  171. package/lib/components/TsButton/TsButton.js +0 -21
  172. package/lib/components/TsButton/TsButton.js.map +0 -1
  173. package/lib/components/TsButton/TsButton.types.d.ts +0 -9
  174. package/lib/components/TsButton/TsButton.types.js +0 -3
  175. package/lib/components/TsButton/TsButton.types.js.map +0 -1
  176. package/lib/components/TsButton/__stories__/TsButton.stories.mdx +0 -84
  177. package/lib/components/TsCheckbox/TsCheckbox.css +0 -64
  178. package/lib/components/TsCheckbox/TsCheckbox.d.ts +0 -4
  179. package/lib/components/TsCheckbox/TsCheckbox.js +0 -21
  180. package/lib/components/TsCheckbox/TsCheckbox.js.map +0 -1
  181. package/lib/components/TsCheckbox/TsCheckbox.types.d.ts +0 -7
  182. package/lib/components/TsCheckbox/TsCheckbox.types.js +0 -3
  183. package/lib/components/TsCheckbox/TsCheckbox.types.js.map +0 -1
  184. package/lib/components/TsCheckbox/__stories__/TsCheckbox.stories.mdx +0 -56
  185. package/lib/components/TsDropdown/TsDropdown.d.ts +0 -4
  186. package/lib/components/TsDropdown/TsDropdown.js +0 -104
  187. package/lib/components/TsDropdown/TsDropdown.js.map +0 -1
  188. package/lib/components/TsDropdown/TsDropdown.types.d.ts +0 -17
  189. package/lib/components/TsDropdown/TsDropdown.types.js +0 -3
  190. package/lib/components/TsDropdown/TsDropdown.types.js.map +0 -1
  191. package/lib/components/TsDropdown/__stories__/fruits.d.ts +0 -4
  192. package/lib/components/TsDropdown/__stories__/fruits.js +0 -51
  193. package/lib/components/TsDropdown/__stories__/fruits.js.map +0 -1
  194. package/lib/components/TsIcon/TsIcon.css +0 -26
  195. package/lib/components/TsIcon/TsIcon.d.ts +0 -4
  196. package/lib/components/TsIcon/TsIcon.js +0 -16
  197. package/lib/components/TsIcon/TsIcon.js.map +0 -1
  198. package/lib/components/TsIcon/TsIcon.types.d.ts +0 -4
  199. package/lib/components/TsIcon/TsIcon.types.js +0 -3
  200. package/lib/components/TsIcon/TsIcon.types.js.map +0 -1
  201. package/lib/components/TsIcon/__stories__/TsIcon.stories.mdx +0 -89
  202. package/lib/components/TsIcon/icons/add-circle.svg +0 -1
  203. package/lib/components/TsIcon/icons/add.svg +0 -1
  204. package/lib/components/TsIcon/icons/alert-circle-filled.svg +0 -1
  205. package/lib/components/TsIcon/icons/alert-circle.svg +0 -1
  206. package/lib/components/TsIcon/icons/alert-triangle-filled.svg +0 -1
  207. package/lib/components/TsIcon/icons/alert-triangle.svg +0 -1
  208. package/lib/components/TsIcon/icons/arrow-diagonal-collapse.svg +0 -1
  209. package/lib/components/TsIcon/icons/arrow-diagonal-expand.svg +0 -1
  210. package/lib/components/TsIcon/icons/arrow-down.svg +0 -1
  211. package/lib/components/TsIcon/icons/arrow-go-back.svg +0 -1
  212. package/lib/components/TsIcon/icons/arrow-left-right.svg +0 -1
  213. package/lib/components/TsIcon/icons/arrow-left.svg +0 -1
  214. package/lib/components/TsIcon/icons/arrow-right.svg +0 -1
  215. package/lib/components/TsIcon/icons/arrow-up-down.svg +0 -1
  216. package/lib/components/TsIcon/icons/arrow-up.svg +0 -1
  217. package/lib/components/TsIcon/icons/award.svg +0 -1
  218. package/lib/components/TsIcon/icons/check-circle-filled.svg +0 -1
  219. package/lib/components/TsIcon/icons/check-circle-timer.svg +0 -7
  220. package/lib/components/TsIcon/icons/check-circle.svg +0 -1
  221. package/lib/components/TsIcon/icons/check-square-filled.svg +0 -1
  222. package/lib/components/TsIcon/icons/check-square.svg +0 -1
  223. package/lib/components/TsIcon/icons/check.svg +0 -1
  224. package/lib/components/TsIcon/icons/chevron-down.svg +0 -1
  225. package/lib/components/TsIcon/icons/chevron-left.svg +0 -1
  226. package/lib/components/TsIcon/icons/chevron-right.svg +0 -1
  227. package/lib/components/TsIcon/icons/chevron-up.svg +0 -1
  228. package/lib/components/TsIcon/icons/circle.svg +0 -1
  229. package/lib/components/TsIcon/icons/close-circle.svg +0 -1
  230. package/lib/components/TsIcon/icons/close.svg +0 -1
  231. package/lib/components/TsIcon/icons/currency-euro.svg +0 -1
  232. package/lib/components/TsIcon/icons/download.svg +0 -1
  233. package/lib/components/TsIcon/icons/edit.svg +0 -1
  234. package/lib/components/TsIcon/icons/external-link.svg +0 -1
  235. package/lib/components/TsIcon/icons/filter-off.svg +0 -1
  236. package/lib/components/TsIcon/icons/filter.svg +0 -1
  237. package/lib/components/TsIcon/icons/flashlight-off.svg +0 -1
  238. package/lib/components/TsIcon/icons/flashlight.svg +0 -1
  239. package/lib/components/TsIcon/icons/header-bikestudio.svg +0 -32
  240. package/lib/components/TsIcon/icons/header-nsc-helmet.svg +0 -32
  241. package/lib/components/TsIcon/icons/header-opticost.svg +0 -32
  242. package/lib/components/TsIcon/icons/header-repairability.svg +0 -32
  243. package/lib/components/TsIcon/icons/heart-filled.svg +0 -1
  244. package/lib/components/TsIcon/icons/heart.svg +0 -1
  245. package/lib/components/TsIcon/icons/history.svg +0 -1
  246. package/lib/components/TsIcon/icons/home.svg +0 -1
  247. package/lib/components/TsIcon/icons/index.d.ts +0 -3
  248. package/lib/components/TsIcon/icons/index.js +0 -64
  249. package/lib/components/TsIcon/icons/index.js.map +0 -1
  250. package/lib/components/TsIcon/icons/index.ts +0 -60
  251. package/lib/components/TsIcon/icons/link.svg +0 -1
  252. package/lib/components/TsIcon/icons/list-settings.svg +0 -1
  253. package/lib/components/TsIcon/icons/lock.svg +0 -1
  254. package/lib/components/TsIcon/icons/loop-right.svg +0 -1
  255. package/lib/components/TsIcon/icons/percent.svg +0 -1
  256. package/lib/components/TsIcon/icons/question-circle.svg +0 -1
  257. package/lib/components/TsIcon/icons/save.svg +0 -1
  258. package/lib/components/TsIcon/icons/search.svg +0 -1
  259. package/lib/components/TsIcon/icons/seedling-circle.svg +0 -12
  260. package/lib/components/TsIcon/icons/square.svg +0 -1
  261. package/lib/components/TsIcon/icons/timer.svg +0 -1
  262. package/lib/components/TsIcon/icons/tools.svg +0 -1
  263. package/lib/components/TsIcon/icons/user.svg +0 -1
  264. package/lib/components/TsInput/TsInput/TsInput.css +0 -73
  265. package/lib/components/TsInput/TsInput/TsInput.d.ts +0 -4
  266. package/lib/components/TsInput/TsInput/TsInput.js +0 -22
  267. package/lib/components/TsInput/TsInput/TsInput.js.map +0 -1
  268. package/lib/components/TsInput/TsInput/TsInput.tsx +0 -31
  269. package/lib/components/TsInput/TsInput/TsInput.types.d.ts +0 -7
  270. package/lib/components/TsInput/TsInput/TsInput.types.js +0 -3
  271. package/lib/components/TsInput/TsInput/TsInput.types.js.map +0 -1
  272. package/lib/components/TsInput/TsInput/TsInput.types.tsx +0 -8
  273. package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +0 -72
  274. package/lib/components/TsLoader/TsLoader.css +0 -42
  275. package/lib/components/TsLoader/TsLoader.d.ts +0 -4
  276. package/lib/components/TsLoader/TsLoader.js +0 -10
  277. package/lib/components/TsLoader/TsLoader.js.map +0 -1
  278. package/lib/components/TsLoader/TsLoader.types.d.ts +0 -3
  279. package/lib/components/TsLoader/TsLoader.types.js +0 -3
  280. package/lib/components/TsLoader/TsLoader.types.js.map +0 -1
  281. package/lib/components/TsLoader/__stories__/TsLoader.stories.mdx +0 -30
  282. package/lib/components/TsTabs/TsTabs.css +0 -69
  283. package/lib/components/TsTabs/TsTabs.d.ts +0 -4
  284. package/lib/components/TsTabs/TsTabs.js +0 -34
  285. package/lib/components/TsTabs/TsTabs.js.map +0 -1
  286. package/lib/components/TsTabs/TsTabs.types.d.ts +0 -14
  287. package/lib/components/TsTabs/TsTabs.types.js +0 -3
  288. package/lib/components/TsTabs/TsTabs.types.js.map +0 -1
  289. package/lib/components/TsTabs/__stories__/TsTabs.stories.mdx +0 -50
  290. package/lib/hooks/use-click-outside.d.ts +0 -2
  291. package/lib/hooks/use-click-outside.js +0 -18
  292. package/lib/hooks/use-click-outside.js.map +0 -1
  293. package/lib/index.d.ts +0 -10
  294. package/lib/index.js +0 -27
  295. package/lib/index.js.map +0 -1
  296. package/lib/layouts/TsHeader/TsHeader.css +0 -186
  297. package/lib/layouts/TsHeader/TsHeader.d.ts +0 -4
  298. package/lib/layouts/TsHeader/TsHeader.js +0 -17
  299. package/lib/layouts/TsHeader/TsHeader.js.map +0 -1
  300. package/lib/layouts/TsHeader/TsHeader.types.d.ts +0 -23
  301. package/lib/layouts/TsHeader/TsHeader.types.js +0 -3
  302. package/lib/layouts/TsHeader/TsHeader.types.js.map +0 -1
  303. package/lib/layouts/TsHeader/TsHeaderProfile.d.ts +0 -5
  304. package/lib/layouts/TsHeader/TsHeaderProfile.js +0 -43
  305. package/lib/layouts/TsHeader/TsHeaderProfile.js.map +0 -1
  306. package/lib/layouts/TsHeader/TsHeaderSearch.d.ts +0 -3
  307. package/lib/layouts/TsHeader/TsHeaderSearch.js +0 -62
  308. package/lib/layouts/TsHeader/TsHeaderSearch.js.map +0 -1
  309. package/lib/layouts/TsHeader/__stories__/TsHeader.stories.mdx +0 -71
  310. package/lib/layouts/TsNavigation/TsNavigation.css +0 -72
  311. package/lib/layouts/TsNavigation/TsNavigation.d.ts +0 -7
  312. package/lib/layouts/TsNavigation/TsNavigation.js +0 -35
  313. package/lib/layouts/TsNavigation/TsNavigation.js.map +0 -1
  314. package/lib/layouts/TsNavigation/TsNavigation.types.d.ts +0 -10
  315. package/lib/layouts/TsNavigation/TsNavigation.types.js +0 -3
  316. package/lib/layouts/TsNavigation/TsNavigation.types.js.map +0 -1
  317. package/lib/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx +0 -51
  318. package/lib/utils/string.utils.d.ts +0 -1
  319. package/lib/utils/string.utils.js +0 -6
  320. package/lib/utils/string.utils.js.map +0 -1
  321. package/src/components/TsDropdown/TsDropdown.css +0 -114
  322. package/src/components/TsDropdown/__stories__/TsDropdown.stories.mdx +0 -85
  323. package/src/components/TsDropdown/__stories__/fruits.ts +0 -47
  324. /package/{esm/components → src/components/TsDropdowns}/TsDropdown/TsDropdown.css +0 -0
  325. /package/src/components/{TsDropdown → TsDropdowns/TsDropdown}/TsDropdown.types.ts +0 -0
  326. /package/{esm/components → src/components/TsDropdowns}/TsDropdown/__stories__/fruits.ts +0 -0
  327. /package/{lib/components/TsDropdown → src/components/TsDropdowns/TsDropdownFilter}/__stories__/fruits.ts +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,2DAAwD;AACxD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA4B,EAAE,EAAE;IACrF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,cAAc;QAClE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B;QACN,6BAAK,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAO;QAChE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEK,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAE,GAAG;QACnD,6BAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC7F,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,oBAAC,eAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,eAAM,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC9D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,eAAe,mBA4B1B"}
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import { TsHeaderSearchProps } from './TsHeader.types';
3
- export declare const TsHeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }: TsHeaderSearchProps) => React.JSX.Element;
@@ -1,62 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TsHeaderSearch = void 0;
4
- const React = require("react");
5
- const react_1 = require("react");
6
- // import { Input } from '../../components/Inputs/Input/Input';
7
- const TsLoader_1 = require("../../components/TsLoader/TsLoader");
8
- const use_click_outside_1 = require("../../hooks/use-click-outside");
9
- const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
10
- const [searchValue] = (0, react_1.useState)('');
11
- const [items, setItems] = (0, react_1.useState)([]);
12
- const [isLoading, setIsLoading] = (0, react_1.useState)(false);
13
- const [showItems, setShowItems] = (0, react_1.useState)(false);
14
- const ref = (0, use_click_outside_1.useClickOutside)(() => setShowItems(false));
15
- // #######
16
- // Helpers
17
- const getBeforeMatch = (item) => {
18
- const label = getItemLabel(item);
19
- const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
20
- return label.substring(0, matchStartIndex);
21
- };
22
- const getMatch = (item) => {
23
- const label = getItemLabel(item);
24
- const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
25
- const matchEndIndex = matchStartIndex + searchValue.length;
26
- return label.substring(matchStartIndex, matchEndIndex);
27
- };
28
- const getAfterMatch = (item) => {
29
- const label = getItemLabel(item);
30
- const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
31
- const matchEndIndex = matchStartIndex + searchValue.length;
32
- return label.substring(matchEndIndex);
33
- };
34
- // ########
35
- // Watchers
36
- (0, react_1.useEffect)(() => {
37
- if (searchValue === '') {
38
- setShowItems(false);
39
- setItems([]);
40
- setIsLoading(false);
41
- }
42
- else {
43
- setShowItems(true);
44
- setIsLoading(true);
45
- loadItems(searchValue)
46
- .then(setItems)
47
- .finally(() => setIsLoading(false));
48
- }
49
- }, [searchValue]);
50
- // #########
51
- // Rendering
52
- return (React.createElement("div", { className: "ts-header-search", ref: ref }, showItems && searchValue !== '' && (React.createElement("div", { className: "ts-header-search-items-container" },
53
- isLoading && (React.createElement("div", { className: "ts-header-search-loading" },
54
- React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
55
- !isLoading && items.length === 0 && React.createElement("div", { className: "ts-header-search-no-items" }, noDataLabel),
56
- !isLoading && items.length > 0 && (React.createElement("div", { className: "ts-header-search-items" }, items.map(item => (React.createElement("div", { className: "ts-header-search-item", onClick: () => onChange(getItemValue(item)) },
57
- getBeforeMatch(item),
58
- React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(item)),
59
- getAfterMatch(item))))))))));
60
- };
61
- exports.TsHeaderSearch = TsHeaderSearch;
62
- //# sourceMappingURL=TsHeaderSearch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TsHeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderSearch.tsx"],"names":[],"mappings":"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"}
@@ -1,71 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsHeader } from '../TsHeader';
4
- import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
5
- import { TsHeaderSearch } from '../TsHeaderSearch';
6
- import { TsButton } from '../../../components/TsButton/TsButton';
7
-
8
- <Meta title="Layouts/Header" />
9
-
10
- export const headerArgTypes = {
11
- appName: {
12
- control: 'select',
13
- options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
14
- description: 'Icon of the button.',
15
- },
16
- };
17
-
18
- export const loadItems = () => {
19
- return Promise.resolve([
20
- { id: 1, label: 'Item 1' },
21
- { id: 2, label: 'Item 2' },
22
- { id: 3, label: 'Item 3' },
23
- { id: 4, label: 'Item 4' },
24
- { id: 5, label: 'Item 5' },
25
- { id: 6, label: 'Item 6' },
26
- { id: 7, label: 'Item 7' },
27
- { id: 8, label: 'Item 8' },
28
- { id: 9, label: 'Item 9' },
29
- ]);
30
- };
31
-
32
- # Header
33
-
34
- The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
35
-
36
- ## Overview
37
-
38
- <Canvas>
39
- <Story
40
- name="Overview"
41
- args={{
42
- actions: (
43
- <>
44
- <TsButton icon="add" size="lg" variant="shadow" rounded />
45
- <TsHeaderProfile firstname="John" lastname="Doe">
46
- <TsHeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
47
- <TsHeaderProfileItem icon="award" label="Trainings" link="" />
48
- </TsHeaderProfile>
49
- </>
50
- ),
51
- appName: 'repairability',
52
- search: (
53
- <TsHeaderSearch
54
- getItemLabel={item => item.label}
55
- getItemValue={item => item.id}
56
- loadItems={loadItems}
57
- noDataLabel="No item found."
58
- placeholder="Search something in the application"
59
- onChange={() => {}}
60
- />
61
- ),
62
- }}
63
- argTypes={headerArgTypes}
64
- >
65
- {args => <TsHeader {...args} />}
66
- </Story>
67
- </Canvas>
68
-
69
- ## Props
70
-
71
- <ArgsTable story="Overview" of={TsHeader} />
@@ -1,72 +0,0 @@
1
- .ts-navigation {
2
- display: flex;
3
- align-items: center;
4
- height: 32px;
5
- padding: 0 24px;
6
- }
7
-
8
- /* ############ */
9
- /* BREADCRUMB */
10
- .ts-breadcrumb {
11
- display: flex;
12
- align-items: center;
13
- padding-right: 20px;
14
- }
15
- .ts-breadcrumb-container {
16
- display: flex;
17
- align-items: center;
18
- }
19
- .ts-breadcrumb-item {
20
- display: flex;
21
- align-items: center;
22
- height: 32px;
23
- padding: 0 10px;
24
- border-radius: 9999px;
25
- color: #3643ba;
26
- }
27
- .ts-breadcrumb-item--highlight {
28
- padding: 0 20px;
29
- box-shadow: 0px 6px 6px 0px #00537d1a;
30
- background: linear-gradient(270deg, #3643ba 0%, rgba(54, 67, 186, 0.6) 100%);
31
- color: #ffffff;
32
- }
33
- .ts-breadcrumb-item--link:hover {
34
- background: #ebecf7;
35
- cursor: pointer;
36
- }
37
- .ts-breadcrumb-item--icon {
38
- padding-right: 8px;
39
- }
40
-
41
- /* ######### */
42
- /* DIVIDER */
43
- .ts-navigation-divider {
44
- flex: 1;
45
- height: 2px;
46
- background: #ebecf7;
47
- }
48
- .ts-breadcrumb-chevron {
49
- padding: 0 2px;
50
- color: #3643ba;
51
- }
52
-
53
- /* ######### */
54
- /* ACTIONS */
55
- .ts-navigation-actions {
56
- /* flex items-center [&>*]:ml-4 */
57
- display: flex;
58
- align-items: center;
59
- }
60
- .ts-navigation-actions > * {
61
- margin-left: 16px;
62
- }
63
-
64
- /* ######### */
65
- /* GLOBALS */
66
- * {
67
- font-size: 14px;
68
- outline: none;
69
- box-sizing: border-box;
70
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
71
- 'Helvetica Neue', sans-serif;
72
- }
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import { PropsWithChildren } from 'react';
3
- import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
4
- import './TsNavigation.css';
5
- export declare const TsNavigationBreadcrumbDivider: () => React.JSX.Element;
6
- export declare const TsNavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => React.JSX.Element;
7
- export declare const TsNavigation: ({ actions, breadcrumbs }: TsNavigationProps) => React.JSX.Element;
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TsNavigation = exports.TsNavigationBreadcrumbItem = exports.TsNavigationBreadcrumbDivider = void 0;
4
- const React = require("react");
5
- const TsIcon_1 = require("../../components/TsIcon/TsIcon");
6
- require("./TsNavigation.css");
7
- const TsNavigationBreadcrumbDivider = () => {
8
- // #########
9
- // Rendering
10
- return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
11
- React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" })));
12
- };
13
- exports.TsNavigationBreadcrumbDivider = TsNavigationBreadcrumbDivider;
14
- const TsNavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
15
- // #########
16
- // Rendering
17
- return (React.createElement("div", { className: `
18
- ts-breadcrumb-item
19
- ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
20
- `, onClick: onClick },
21
- icon && (React.createElement("div", { className: "ts-breadcrumb-item--icon" },
22
- React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))),
23
- children));
24
- };
25
- exports.TsNavigationBreadcrumbItem = TsNavigationBreadcrumbItem;
26
- const TsNavigation = ({ actions, breadcrumbs }) => {
27
- // #########
28
- // Rendering
29
- return (React.createElement("div", { className: "ts-navigation" },
30
- React.createElement("div", { className: "ts-breadcrumb" }, breadcrumbs),
31
- React.createElement("div", { className: "ts-navigation-divider" }),
32
- React.createElement("div", { className: "ts-navigation-actions" }, actions)));
33
- };
34
- exports.TsNavigation = TsNavigation;
35
- //# sourceMappingURL=TsNavigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AAExD,8BAA4B;AAErB,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC;AAEK,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC4C,EAAE,EAAE;IACvD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;OAChG,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,0BAA0B;YACvC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,0BAA0B,8BAyBrC;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAqB,EAAE,EAAE;IAC1E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,6BAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO;QAClD,6BAAK,SAAS,EAAC,uBAAuB,GAAG;QACzC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}
@@ -1,10 +0,0 @@
1
- import { ReactElement } from 'react';
2
- export type TsNavigationProps = {
3
- actions?: ReactElement;
4
- breadcrumbs: ReactElement;
5
- };
6
- export type TsNavigationBreadcrumbItemProps = {
7
- icon?: string;
8
- highlight?: boolean;
9
- onClick?: () => void;
10
- };
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=TsNavigation.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TsNavigation.types.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.types.ts"],"names":[],"mappings":""}
@@ -1,51 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsNavigation, TsNavigationBreadcrumbItem, TsNavigationBreadcrumbDivider } from '../TsNavigation';
4
- import { TsButton } from '../../../components/TsButton/TsButton';
5
- import { icons } from '../../../components/TsIcon/icons';
6
-
7
- <Meta title="Layouts/Navigation" />
8
-
9
- # Navigation
10
-
11
- Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
12
-
13
- ## Overview
14
-
15
- <Canvas>
16
- <Story
17
- name="Overview"
18
- args={{
19
- actions: (
20
- <>
21
- <TsButton icon="check" onClick={() => {}}>
22
- Action 1
23
- </TsButton>
24
- <TsButton icon="add" onClick={() => {}}>
25
- Action 2
26
- </TsButton>
27
- </>
28
- ),
29
- breadcrumbs: (
30
- <>
31
- <TsNavigationBreadcrumbItem icon="home" onClick={() => {}}>
32
- Home
33
- </TsNavigationBreadcrumbItem>
34
- <TsNavigationBreadcrumbDivider />
35
- <TsNavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</TsNavigationBreadcrumbItem>
36
- <TsNavigationBreadcrumbDivider />
37
- <TsNavigationBreadcrumbItem highlight>Menu Item 2</TsNavigationBreadcrumbItem>
38
- </>
39
- )
40
- }}
41
-
42
- >
43
-
44
- {args => <TsNavigation {...args} />}
45
-
46
- </Story>
47
- </Canvas>
48
-
49
- ## Props
50
-
51
- <ArgsTable story="Overview" of={TsNavigation} />
@@ -1 +0,0 @@
1
- export declare const capitalize: (str: string) => string;
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.capitalize = void 0;
4
- const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
5
- exports.capitalize = capitalize;
6
- //# sourceMappingURL=string.utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAAvF,QAAA,UAAU,cAA6E"}
@@ -1,114 +0,0 @@
1
- .ts-dropdown-container {
2
- position: relative;
3
- width: 100%;
4
- }
5
- .ts-dropdown-input {
6
- display: flex;
7
- align-items: center;
8
- width: 100%;
9
- height: 32px;
10
- padding-left: 10px;
11
- border: 1px solid #949494;
12
- cursor: pointer;
13
- }
14
- .ts-dropdown-input--disabled {
15
- background: #fafafa;
16
- cursor: not-allowed;
17
- }
18
- .ts-dropdown-input--placeholder {
19
- flex: 1;
20
- color: #7a7a7a;
21
- font-weight: 400;
22
- overflow: hidden;
23
- text-overflow: ellipsis;
24
- white-space: nowrap;
25
- }
26
- .ts-dropdown-input--value {
27
- flex: 1;
28
- font-weight: 600;
29
- overflow: hidden;
30
- text-overflow: ellipsis;
31
- white-space: nowrap;
32
- }
33
- .ts-dropdown-input--chevron {
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- width: 32px;
38
- height: 32px;
39
- }
40
- .ts-dropdown-input.ts-dropdown-container--error {
41
- border: 1px solid #e3262f;
42
- }
43
- .ts-dropdown-error {
44
- display: flex;
45
- margin-top: 4px;
46
- color: #e3262f;
47
- }
48
- .ts-dropdown-error--icon {
49
- margin-right: 4px;
50
- }
51
- .ts-dropdown-error--label {
52
- font-size: 12px;
53
- font-weight: 500;
54
- }
55
- /* ####### */
56
- /* LABEL */
57
- .ts-dropdown-label {
58
- padding-bottom: 6px;
59
- }
60
- /* ###### */
61
- /* MENU */
62
- .ts-dropdown-menu-container {
63
- position: absolute;
64
- top: 60px;
65
- display: flex;
66
- flex-direction: column;
67
- width: 100%;
68
- min-width: 220px;
69
- max-height: 250px;
70
- padding: 12px;
71
- box-shadow: 0px 8px 9px 0px #1010101a;
72
- background: #ffffff;
73
- overflow: hidden;
74
- z-index: 10;
75
- }
76
- .ts-dropdown-search {
77
- padding-bottom: 12px;
78
- margin-bottom: 12px;
79
- border-bottom: 1px solid #d9dde1;
80
- }
81
- .ts-dropdown-menu {
82
- overflow: auto;
83
- }
84
- .ts-dropdown-menu-loader {
85
- display: flex;
86
- justify-content: center;
87
- }
88
- .ts-dropdown-menu-error-text {
89
- display: flex;
90
- justify-content: center;
91
- color: #7a7a7a;
92
- font-style: italic;
93
- }
94
- .ts-dropdown-menu-item {
95
- display: flex;
96
- align-items: center;
97
- height: 36px;
98
- padding: 0 12px;
99
- cursor: pointer;
100
- }
101
- .ts-dropdown-menu-item:hover {
102
- background: #e1e3f5;
103
- color: #3643ba;
104
- }
105
-
106
- /* ######### */
107
- /* GLOBALS */
108
- * {
109
- font-size: 14px;
110
- outline: none;
111
- box-sizing: border-box;
112
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
113
- 'Helvetica Neue', sans-serif;
114
- }
@@ -1,85 +0,0 @@
1
- import React from 'react';
2
- import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
3
- import { TsDropdown } from '../TsDropdown';
4
- import { fruits } from './fruits';
5
-
6
- <Meta title="Components/Dropdown" />
7
-
8
- export const dropdownArgTypes = {
9
- error: {
10
- control: 'text',
11
- description: 'Error of the dropdown.',
12
- },
13
- label: {
14
- control: 'text',
15
- description: 'Label of the dropdown.',
16
- },
17
- placeholder: {
18
- control: 'text',
19
- description: 'Placeholder of the dropdown.',
20
- },
21
- searchPlaceholder: {
22
- control: 'text',
23
- description: 'Placeholder of the option search (only for searchable dropdowns).',
24
- },
25
- searchable: {
26
- control: 'boolean',
27
- description: 'Enable search on dropdown items.',
28
- table: { defaultValue: { summary: 'false' } },
29
- },
30
- disabled: {
31
- control: 'boolean',
32
- description: 'Enable state of the dropdown.',
33
- table: { defaultValue: { summary: 'false' } },
34
- },
35
- getOptionLabel: {
36
- control: 'function',
37
- description: 'The handler called to get the option label',
38
- },
39
- getOptionValue: {
40
- control: 'function',
41
- description: 'The handler called to get the option value.',
42
- },
43
- loadOptions: {
44
- control: 'function',
45
- description: 'The handler called to fetch all options in async (not available on playground).',
46
- },
47
- onChange: {
48
- control: 'function',
49
- description: 'The handler called when clicking on the dropdown option.',
50
- },
51
- };
52
-
53
- # Dropdown
54
-
55
- Dropdowns show a list of options that can be used to select, filter or sort content.
56
-
57
- ## Overview
58
-
59
- <Canvas>
60
- <Story
61
- name="Overview"
62
- args={{
63
- error: '',
64
- label: 'Label',
65
- options: fruits,
66
- searchPlaceholder: '',
67
- placeholder: 'Select an item',
68
- disabled: false,
69
- searchable: false,
70
- getOptionLabel: function ol(fruit) {
71
- return fruit.name;
72
- },
73
- getOptionValue: function ov(fruit) {
74
- return fruit.id;
75
- },
76
- }}
77
- argTypes={dropdownArgTypes}
78
- >
79
- {args => <TsDropdown {...args}>{args.children}</TsDropdown>}
80
- </Story>
81
- </Canvas>
82
-
83
- ## Props
84
-
85
- <ArgsTable story="Overview" of={TsDropdown} />
@@ -1,47 +0,0 @@
1
- export const fruits = [
2
- { name: 'Persimmon', id: 52 },
3
- { name: 'Strawberry', id: 3 },
4
- { name: 'Banana', id: 1 },
5
- { name: 'Tomato', id: 5 },
6
- { name: 'Pear', id: 4 },
7
- { name: 'Durian', id: 60 },
8
- { name: 'Blackberry', id: 64 },
9
- { name: 'Lingonberry', id: 65 },
10
- { name: 'Kiwi', id: 66 },
11
- { name: 'Lychee', id: 67 },
12
- { name: 'Pineapple', id: 10 },
13
- { name: 'Fig', id: 68 },
14
- { name: 'Gooseberry', id: 69 },
15
- { name: 'Passionfruit', id: 70 },
16
- { name: 'Plum', id: 71 },
17
- { name: 'Orange', id: 2 },
18
- { name: 'GreenApple', id: 72 },
19
- { name: 'Raspberry', id: 23 },
20
- { name: 'Watermelon', id: 25 },
21
- { name: 'Lemon', id: 26 },
22
- { name: 'Mango', id: 27 },
23
- { name: 'Blueberry', id: 33 },
24
- { name: 'Apple', id: 6 },
25
- { name: 'Guava', id: 37 },
26
- { name: 'Apricot', id: 35 },
27
- { name: 'Papaya', id: 42 },
28
- { name: 'Melon', id: 41 },
29
- { name: 'Tangerine', id: 77 },
30
- { name: 'Pitahaya', id: 78 },
31
- { name: 'Lime', id: 44 },
32
- { name: 'Pomegranate', id: 79 },
33
- { name: 'Dragonfruit', id: 80 },
34
- { name: 'Grape', id: 81 },
35
- { name: 'Morus', id: 82 },
36
- { name: 'Feijoa', id: 76 },
37
- { name: 'Avocado', id: 84 },
38
- { name: 'Kiwifruit', id: 85 },
39
- { name: 'Cranberry', id: 87 },
40
- { name: 'Cherry', id: 9 },
41
- { name: 'Peach', id: 86 },
42
- { name: 'Jackfruit', id: 94 },
43
- { name: 'Horned Melon', id: 95 },
44
- { name: 'Hazelnut', id: 96 },
45
- { name: 'Pomelo', id: 98 },
46
- { name: 'Mangosteen', id: 99 },
47
- ];