@universal-tennis/ui-shared 0.1.96 → 0.1.98

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 (322) hide show
  1. package/.eslintignore +1 -1
  2. package/.eslintrc.js +73 -73
  3. package/.storybook/preview.js +17 -17
  4. package/.storybook/variables.css +16 -16
  5. package/README.md +129 -129
  6. package/dist/App.d.ts +2 -2
  7. package/dist/App.js +12 -12
  8. package/dist/components.d.ts +43 -43
  9. package/dist/components.js +48 -48
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.js +12 -12
  12. package/dist/items.d.ts +2 -2
  13. package/dist/items.js +1 -1
  14. package/dist/stories/Button.d.ts +27 -0
  15. package/dist/stories/Button.js +51 -0
  16. package/dist/stories/Button.js.map +1 -0
  17. package/dist/stories/Button.stories.d.ts +15 -0
  18. package/dist/stories/Button.stories.js +34 -0
  19. package/dist/stories/Button.stories.js.map +1 -0
  20. package/dist/stories/Header.d.ts +19 -0
  21. package/dist/stories/Header.js +31 -0
  22. package/dist/stories/Header.js.map +1 -0
  23. package/dist/stories/Header.stories.d.ts +11 -0
  24. package/dist/stories/Header.stories.js +20 -0
  25. package/dist/stories/Header.stories.js.map +1 -0
  26. package/dist/stories/Page.d.ts +1 -0
  27. package/dist/stories/Page.js +38 -0
  28. package/dist/stories/Page.js.map +1 -0
  29. package/dist/stories/Page.stories.d.ts +11 -0
  30. package/dist/stories/Page.stories.js +30 -0
  31. package/dist/stories/Page.stories.js.map +1 -0
  32. package/dist/stories/assets/comments.svg +1 -0
  33. package/dist/stories/assets/css/variables.css +15 -15
  34. package/dist/stories/assets/direction.svg +1 -0
  35. package/dist/stories/assets/icon-chat-blue.svg +10 -10
  36. package/dist/stories/assets/utr-sports-logo.svg +9 -9
  37. package/dist/stories/atoms/Button/Button.d.ts +10 -10
  38. package/dist/stories/atoms/Button/Button.js +95 -95
  39. package/dist/stories/atoms/Button/Button.stories.d.ts +17 -17
  40. package/dist/stories/atoms/Button/Button.stories.js +45 -45
  41. package/dist/stories/atoms/Button/index.d.ts +1 -0
  42. package/dist/stories/atoms/Button/index.js +2 -0
  43. package/dist/stories/atoms/Button/index.js.map +1 -0
  44. package/dist/stories/atoms/Button.d.ts +7 -0
  45. package/dist/stories/atoms/Button.js +20 -0
  46. package/dist/stories/atoms/Button.js.map +1 -0
  47. package/dist/stories/atoms/Button.stories.d.ts +13 -0
  48. package/dist/stories/atoms/Button.stories.js +22 -0
  49. package/dist/stories/atoms/Button.stories.js.map +1 -0
  50. package/dist/stories/atoms/Icons/AddIcon.d.ts +3 -3
  51. package/dist/stories/atoms/Icons/AddIcon.js +8 -8
  52. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.d.ts +3 -3
  53. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.js +6 -6
  54. package/dist/stories/atoms/Icons/AvailabilityNoIcon.d.ts +3 -3
  55. package/dist/stories/atoms/Icons/AvailabilityNoIcon.js +6 -6
  56. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.d.ts +3 -3
  57. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.js +7 -7
  58. package/dist/stories/atoms/Icons/AvailabilityYesIcon.d.ts +3 -3
  59. package/dist/stories/atoms/Icons/AvailabilityYesIcon.js +6 -6
  60. package/dist/stories/atoms/Icons/BallInMotionIcon.d.ts +3 -3
  61. package/dist/stories/atoms/Icons/BallInMotionIcon.js +9 -9
  62. package/dist/stories/atoms/Icons/CalendarIcon.d.ts +3 -3
  63. package/dist/stories/atoms/Icons/CalendarIcon.js +6 -6
  64. package/dist/stories/atoms/Icons/ClockIcon.d.ts +3 -3
  65. package/dist/stories/atoms/Icons/ClockIcon.js +8 -8
  66. package/dist/stories/atoms/Icons/CloseIcon.d.ts +3 -3
  67. package/dist/stories/atoms/Icons/CloseIcon.js +6 -6
  68. package/dist/stories/atoms/Icons/DeleteIcon.d.ts +3 -3
  69. package/dist/stories/atoms/Icons/DeleteIcon.js +10 -10
  70. package/dist/stories/atoms/Icons/DoublePersonIcon.d.ts +3 -3
  71. package/dist/stories/atoms/Icons/DoublePersonIcon.js +13 -13
  72. package/dist/stories/atoms/Icons/EditIcon.d.ts +3 -3
  73. package/dist/stories/atoms/Icons/EditIcon.js +6 -6
  74. package/dist/stories/atoms/Icons/Icons.stories.d.ts +37 -37
  75. package/dist/stories/atoms/Icons/Icons.stories.js +303 -303
  76. package/dist/stories/atoms/Icons/LeftChevronIcon.d.ts +3 -3
  77. package/dist/stories/atoms/Icons/LeftChevronIcon.js +6 -6
  78. package/dist/stories/atoms/Icons/LineIcon.d.ts +3 -3
  79. package/dist/stories/atoms/Icons/LineIcon.js +6 -6
  80. package/dist/stories/atoms/Icons/LocationIcon.d.ts +3 -3
  81. package/dist/stories/atoms/Icons/LocationIcon.js +7 -7
  82. package/dist/stories/atoms/Icons/MessageIcon.d.ts +3 -3
  83. package/dist/stories/atoms/Icons/MessageIcon.js +6 -6
  84. package/dist/stories/atoms/Icons/PickleballBallIcon.d.ts +3 -3
  85. package/dist/stories/atoms/Icons/PickleballBallIcon.js +17 -17
  86. package/dist/stories/atoms/Icons/RightChevronIcon.d.ts +3 -3
  87. package/dist/stories/atoms/Icons/RightChevronIcon.js +6 -6
  88. package/dist/stories/atoms/Icons/SessionIcon.d.ts +3 -3
  89. package/dist/stories/atoms/Icons/SessionIcon.js +6 -6
  90. package/dist/stories/atoms/Icons/SinglePersonIcon.d.ts +3 -3
  91. package/dist/stories/atoms/Icons/SinglePersonIcon.js +9 -9
  92. package/dist/stories/atoms/Icons/SinglePersonV2Icon.d.ts +3 -3
  93. package/dist/stories/atoms/Icons/SinglePersonV2Icon.js +7 -7
  94. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.d.ts +3 -3
  95. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.js +10 -10
  96. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.d.ts +3 -3
  97. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.js +6 -6
  98. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.d.ts +3 -3
  99. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.js +10 -10
  100. package/dist/stories/atoms/Icons/SocialMediaXIcon.d.ts +3 -3
  101. package/dist/stories/atoms/Icons/SocialMediaXIcon.js +10 -10
  102. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.d.ts +3 -3
  103. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.js +6 -6
  104. package/dist/stories/atoms/Icons/SwapIcon.d.ts +3 -3
  105. package/dist/stories/atoms/Icons/SwapIcon.js +6 -6
  106. package/dist/stories/atoms/Icons/SwapNoBorderIcon.d.ts +3 -3
  107. package/dist/stories/atoms/Icons/SwapNoBorderIcon.js +9 -9
  108. package/dist/stories/atoms/Icons/TennisBallIcon.d.ts +3 -3
  109. package/dist/stories/atoms/Icons/TennisBallIcon.js +8 -8
  110. package/dist/stories/atoms/Icons/VerifiedIcon.d.ts +3 -3
  111. package/dist/stories/atoms/Icons/VerifiedIcon.js +7 -7
  112. package/dist/stories/atoms/Icons/VisibilityIcon.d.ts +3 -3
  113. package/dist/stories/atoms/Icons/VisibilityIcon.js +7 -7
  114. package/dist/stories/atoms/Icons/VisibilityOffIcon.d.ts +3 -3
  115. package/dist/stories/atoms/Icons/VisibilityOffIcon.js +8 -8
  116. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts +3 -3
  117. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js +31 -31
  118. package/dist/stories/atoms/Icons/sharedTypes.d.ts +11 -11
  119. package/dist/stories/atoms/Icons/sharedTypes.js +1 -1
  120. package/dist/stories/atoms/Typography/Typography.d.ts +49 -49
  121. package/dist/stories/atoms/Typography/Typography.js +143 -143
  122. package/dist/stories/atoms/Typography/Typography.stories.d.ts +37 -37
  123. package/dist/stories/atoms/Typography/Typography.stories.js +190 -190
  124. package/dist/stories/atoms/Typography/index.d.ts +1 -0
  125. package/dist/stories/atoms/Typography/index.js +2 -0
  126. package/dist/stories/atoms/Typography/index.js.map +1 -0
  127. package/dist/stories/atoms/UTMap/UTMap.d.ts +7 -7
  128. package/dist/stories/atoms/UTMap/UTMap.js +8 -8
  129. package/dist/stories/atoms/UTMap/UTMap.stories.d.ts +9 -9
  130. package/dist/stories/atoms/UTMap/UTMap.stories.js +35 -35
  131. package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts +27 -27
  132. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js +20 -20
  133. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts +15 -15
  134. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js +72 -72
  135. package/dist/stories/molecules/Cards/Cards.stories.d.ts +7 -7
  136. package/dist/stories/molecules/Cards/Cards.stories.js +64 -64
  137. package/dist/stories/molecules/Cards/ContactCard.d.ts +3 -3
  138. package/dist/stories/molecules/Cards/ContactCard.js +38 -38
  139. package/dist/stories/molecules/Cards/DrawCard.d.ts +3 -3
  140. package/dist/stories/molecules/Cards/DrawCard.js +116 -116
  141. package/dist/stories/molecules/Cards/Modals.stories.d.ts +5 -5
  142. package/dist/stories/molecules/Cards/Modals.stories.js +72 -72
  143. package/dist/stories/molecules/Cards/TeamCard.d.ts +3 -3
  144. package/dist/stories/molecules/Cards/TeamCard.js +20 -20
  145. package/dist/stories/molecules/Cards/TeamDrawCard.d.ts +3 -3
  146. package/dist/stories/molecules/Cards/TeamDrawCard.js +78 -78
  147. package/dist/stories/molecules/Cards/shared.d.ts +9 -4
  148. package/dist/stories/molecules/Cards/shared.js +12 -12
  149. package/dist/stories/molecules/Cards/sharedTypes.d.ts +61 -61
  150. package/dist/stories/molecules/Cards/sharedTypes.js +2 -2
  151. package/dist/stories/molecules/FooterSection/FooterSection.d.ts +4 -4
  152. package/dist/stories/molecules/FooterSection/FooterSection.js +11 -11
  153. package/dist/stories/molecules/FooterSection/FooterSection.stories.d.ts +5 -5
  154. package/dist/stories/molecules/FooterSection/FooterSection.stories.js +20 -20
  155. package/dist/stories/molecules/FooterSection/sharedTypes.d.ts +5 -5
  156. package/dist/stories/molecules/FooterSection/sharedTypes.js +1 -1
  157. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.d.ts +13 -13
  158. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.js +27 -27
  159. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.d.ts +5 -5
  160. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.js +18 -18
  161. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +29 -29
  162. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +33 -33
  163. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +16 -16
  164. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +81 -81
  165. package/dist/stories/organisms/Footer/Footer.d.ts +4 -4
  166. package/dist/stories/organisms/Footer/Footer.js +97 -101
  167. package/dist/stories/organisms/Footer/Footer.js.map +1 -1
  168. package/dist/stories/organisms/Footer/Footer.stories.d.ts +5 -5
  169. package/dist/stories/organisms/Footer/Footer.stories.js +58 -58
  170. package/dist/stories/organisms/Footer/sharedTypes.d.ts +16 -16
  171. package/dist/stories/organisms/Footer/sharedTypes.js +1 -1
  172. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.d.ts +36 -36
  173. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js +49 -49
  174. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.d.ts +9 -9
  175. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.js +196 -196
  176. package/dist/stories/organisms/Modals/FullPageModal.d.ts +4 -4
  177. package/dist/stories/organisms/Modals/FullPageModal.js +59 -59
  178. package/dist/stories/organisms/Modals/Modals.stories.d.ts +5 -5
  179. package/dist/stories/organisms/Modals/Modals.stories.js +73 -73
  180. package/dist/stories/organisms/Modals/sharedTypes.d.ts +14 -14
  181. package/dist/stories/organisms/Modals/sharedTypes.js +1 -1
  182. package/dist/stories/organisms/Tables/DrawCardTable.d.ts +3 -3
  183. package/dist/stories/organisms/Tables/DrawCardTable.js +58 -58
  184. package/dist/stories/organisms/Tables/SortableTable.d.ts +23 -23
  185. package/dist/stories/organisms/Tables/SortableTable.js +34 -34
  186. package/dist/stories/organisms/Tables/Tables.stories.d.ts +8 -8
  187. package/dist/stories/organisms/Tables/Tables.stories.js +90 -90
  188. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.d.ts +3 -3
  189. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.js +66 -66
  190. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.d.ts +3 -3
  191. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.js +43 -43
  192. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.d.ts +3 -3
  193. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.js +22 -22
  194. package/dist/stories/organisms/Tables/mockData.d.ts +71 -71
  195. package/dist/stories/organisms/Tables/mockData.js +99 -99
  196. package/dist/stories/organisms/Tables/sharedTypes.d.ts +15 -15
  197. package/dist/stories/organisms/Tables/sharedTypes.js +1 -1
  198. package/dist/stories/utils/constants.d.ts +19 -19
  199. package/dist/stories/utils/constants.js +23 -23
  200. package/dist/stories/utils/getArrayWithIds.d.ts +3 -3
  201. package/dist/stories/utils/getArrayWithIds.js +1 -1
  202. package/dist/stories/utils/useScreenSize.d.ts +4 -4
  203. package/dist/stories/utils/useScreenSize.js +27 -27
  204. package/dist/types/tableDataTypes.d.ts +38 -38
  205. package/dist/types/tableDataTypes.js +1 -1
  206. package/infrastructure/azure-pipelines.yml +112 -112
  207. package/package.json +99 -99
  208. package/src/App.js +25 -25
  209. package/src/components.jsx +52 -52
  210. package/src/custom.d.ts +13 -13
  211. package/src/index.js +17 -17
  212. package/src/items.jsx +1 -1
  213. package/src/stories/assets/css/variables.css +15 -15
  214. package/src/stories/assets/icon-chat-blue.svg +10 -10
  215. package/src/stories/assets/icons/icon-add.svg +7 -7
  216. package/src/stories/assets/icons/icon-availability-maybe.svg +3 -3
  217. package/src/stories/assets/icons/icon-availability-no.svg +3 -3
  218. package/src/stories/assets/icons/icon-availability-not-set.svg +8 -8
  219. package/src/stories/assets/icons/icon-availability-yes.svg +3 -3
  220. package/src/stories/assets/icons/icon-calendar.svg +4 -4
  221. package/src/stories/assets/icons/icon-clock.svg +7 -7
  222. package/src/stories/assets/icons/icon-close.svg +3 -3
  223. package/src/stories/assets/icons/icon-delete.svg +9 -9
  224. package/src/stories/assets/icons/icon-edit.svg +3 -3
  225. package/src/stories/assets/icons/icon-location.svg +6 -6
  226. package/src/stories/assets/icons/icon-message.svg +3 -3
  227. package/src/stories/assets/icons/icon-session.svg +3 -3
  228. package/src/stories/assets/icons/icon-social-media-facebook.svg +10 -10
  229. package/src/stories/assets/icons/icon-social-media-instagram.svg +3 -3
  230. package/src/stories/assets/icons/icon-social-media-tiktok.svg +10 -10
  231. package/src/stories/assets/icons/icon-social-media-x.svg +10 -10
  232. package/src/stories/assets/icons/icon-social-media-youtube.svg +3 -3
  233. package/src/stories/assets/icons/icon-swap.svg +3 -3
  234. package/src/stories/assets/icons/icon-visibility-off.svg +7 -7
  235. package/src/stories/assets/icons/icon-visibility.svg +6 -6
  236. package/src/stories/assets/utr-sports-logo.svg +9 -9
  237. package/src/stories/atoms/Button/Button.stories.tsx +63 -63
  238. package/src/stories/atoms/Button/Button.tsx +145 -145
  239. package/src/stories/atoms/Icons/AddIcon.tsx +13 -13
  240. package/src/stories/atoms/Icons/AvailabilityMaybeIcon.tsx +11 -11
  241. package/src/stories/atoms/Icons/AvailabilityNoIcon.tsx +11 -11
  242. package/src/stories/atoms/Icons/AvailabilityNotSetIcon.tsx +12 -12
  243. package/src/stories/atoms/Icons/AvailabilityYesIcon.tsx +11 -11
  244. package/src/stories/atoms/Icons/BallInMotionIcon.tsx +15 -15
  245. package/src/stories/atoms/Icons/CalendarIcon.tsx +11 -11
  246. package/src/stories/atoms/Icons/ClockIcon.tsx +14 -14
  247. package/src/stories/atoms/Icons/CloseIcon.tsx +11 -11
  248. package/src/stories/atoms/Icons/DeleteIcon.tsx +15 -15
  249. package/src/stories/atoms/Icons/DoublePersonIcon.tsx +20 -20
  250. package/src/stories/atoms/Icons/EditIcon.tsx +11 -11
  251. package/src/stories/atoms/Icons/Icons.stories.tsx +372 -372
  252. package/src/stories/atoms/Icons/LeftChevronIcon.tsx +13 -13
  253. package/src/stories/atoms/Icons/LineIcon.tsx +12 -12
  254. package/src/stories/atoms/Icons/LocationIcon.tsx +12 -12
  255. package/src/stories/atoms/Icons/MessageIcon.tsx +12 -12
  256. package/src/stories/atoms/Icons/PickleballBallIcon.tsx +22 -22
  257. package/src/stories/atoms/Icons/RightChevronIcon.tsx +11 -11
  258. package/src/stories/atoms/Icons/SessionIcon.tsx +16 -16
  259. package/src/stories/atoms/Icons/SinglePersonIcon.tsx +16 -16
  260. package/src/stories/atoms/Icons/SinglePersonV2Icon.tsx +13 -13
  261. package/src/stories/atoms/Icons/SocialMediaFacebookIcon.tsx +19 -19
  262. package/src/stories/atoms/Icons/SocialMediaInstagramIcon.tsx +11 -11
  263. package/src/stories/atoms/Icons/SocialMediaTikTokIcon.tsx +18 -18
  264. package/src/stories/atoms/Icons/SocialMediaXIcon.tsx +18 -18
  265. package/src/stories/atoms/Icons/SocialMediaYoutubeIcon.tsx +11 -11
  266. package/src/stories/atoms/Icons/SwapIcon.tsx +11 -11
  267. package/src/stories/atoms/Icons/SwapNoBorderIcon.tsx +14 -14
  268. package/src/stories/atoms/Icons/TennisBallIcon.tsx +13 -13
  269. package/src/stories/atoms/Icons/VerifiedIcon.tsx +13 -13
  270. package/src/stories/atoms/Icons/VisibilityIcon.tsx +12 -12
  271. package/src/stories/atoms/Icons/VisibilityOffIcon.tsx +13 -13
  272. package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx +39 -39
  273. package/src/stories/atoms/Icons/sharedTypes.tsx +12 -12
  274. package/src/stories/atoms/Typography/Typography.tsx +185 -185
  275. package/src/stories/atoms/UTMap/UTMap.stories.tsx +43 -43
  276. package/src/stories/atoms/UTMap/UTMap.tsx +25 -25
  277. package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx +86 -86
  278. package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx +68 -68
  279. package/src/stories/molecules/Cards/Cards.stories.tsx +76 -76
  280. package/src/stories/molecules/Cards/ContactCard.tsx +45 -45
  281. package/src/stories/molecules/Cards/DrawCard.tsx +211 -211
  282. package/src/stories/molecules/Cards/Modals.stories.tsx +137 -137
  283. package/src/stories/molecules/Cards/TeamCard.tsx +14 -14
  284. package/src/stories/molecules/Cards/TeamDrawCard.tsx +159 -159
  285. package/src/stories/molecules/Cards/sharedTypes.ts +69 -69
  286. package/src/stories/molecules/FooterSection/FooterSection.stories.tsx +25 -25
  287. package/src/stories/molecules/FooterSection/FooterSection.tsx +34 -34
  288. package/src/stories/molecules/FooterSection/sharedTypes.ts +6 -6
  289. package/src/stories/molecules/GlobalNavItem/GlobalNavItem.stories.tsx +22 -22
  290. package/src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx +51 -51
  291. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx +96 -96
  292. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx +112 -112
  293. package/src/stories/organisms/Footer/Footer.stories.tsx +63 -63
  294. package/src/stories/organisms/Footer/Footer.tsx +155 -165
  295. package/src/stories/organisms/Footer/sharedTypes.ts +17 -17
  296. package/src/stories/organisms/GlobalNavigation/GlobalNavigation.stories.tsx +210 -210
  297. package/src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx +120 -120
  298. package/src/stories/organisms/Modals/FullPageModal.tsx +93 -93
  299. package/src/stories/organisms/Modals/Modals.stories.tsx +138 -138
  300. package/src/stories/organisms/Modals/sharedTypes.ts +15 -15
  301. package/src/stories/organisms/Tables/DrawCardTable.tsx +92 -92
  302. package/src/stories/organisms/Tables/SortableTable.tsx +119 -119
  303. package/src/stories/organisms/Tables/Tables.stories.tsx +104 -104
  304. package/src/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.tsx +120 -120
  305. package/src/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.tsx +67 -67
  306. package/src/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.tsx +24 -24
  307. package/src/stories/organisms/Tables/mockData.tsx +131 -131
  308. package/src/stories/organisms/Tables/sharedTypes.ts +17 -17
  309. package/src/stories/utils/constants.ts +31 -31
  310. package/src/stories/utils/getArrayWithIds.ts +1 -1
  311. package/src/stories/utils/useScreenSize.ts +28 -28
  312. package/src/types/tableDataTypes.ts +42 -42
  313. package/tsconfig.json +23 -23
  314. package/dist/stories/atoms/Map/Map.d.ts +0 -7
  315. package/dist/stories/atoms/Map/Map.js +0 -9
  316. package/dist/stories/atoms/Map/Map.js.map +0 -1
  317. package/dist/stories/atoms/Map/Map.stories.d.ts +0 -9
  318. package/dist/stories/atoms/Map/Map.stories.js +0 -36
  319. package/dist/stories/atoms/Map/Map.stories.js.map +0 -1
  320. package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts +0 -3
  321. package/dist/stories/organisms/Tables/TeamDrawCardTable.js +0 -126
  322. package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map +0 -1
@@ -1,191 +1,191 @@
1
- import React from 'react';
2
- import Typography from './Typography';
3
- export default {
4
- title: 'Atoms/Typography',
5
- component: Typography,
6
- };
7
- function Template(args) {
8
- return React.createElement(Typography, Object.assign({}, args));
9
- }
10
- export const Default = Template.bind({});
11
- Default.args = {
12
- children: 'Text',
13
- };
14
- export const Display = Template.bind({});
15
- Display.args = {
16
- category: "display",
17
- children: 'Text',
18
- };
19
- export const DisplayXXXLarge = Template.bind({});
20
- DisplayXXXLarge.args = {
21
- children: 'Text',
22
- category: "display",
23
- size: 'XXX-large'
24
- };
25
- export const DisplayXXLarge = Template.bind({});
26
- DisplayXXLarge.args = {
27
- children: 'Text',
28
- category: "display",
29
- size: 'XX-large'
30
- };
31
- export const DisplayXLarge = Template.bind({});
32
- DisplayXLarge.args = {
33
- children: 'Text',
34
- category: "display",
35
- size: 'X-large'
36
- };
37
- export const DisplayLarge = Template.bind({});
38
- DisplayLarge.args = {
39
- children: 'Text',
40
- category: "display",
41
- size: 'large'
42
- };
43
- export const DisplayLargelight = Template.bind({});
44
- DisplayLargelight.args = {
45
- children: 'Text',
46
- category: "display",
47
- size: 'large-light'
48
- };
49
- export const DisplayMediumBook = Template.bind({});
50
- DisplayMediumBook.args = {
51
- children: 'Text',
52
- category: "display",
53
- size: 'medium-book'
54
- };
55
- export const Primary = Template.bind({});
56
- Primary.args = {
57
- category: "primary",
58
- children: 'Text',
59
- };
60
- export const PrimaryLargeBold = Template.bind({});
61
- PrimaryLargeBold.args = {
62
- children: 'Text',
63
- category: "primary",
64
- size: 'large-bold'
65
- };
66
- export const PrimaryLargeBook = Template.bind({});
67
- PrimaryLargeBook.args = {
68
- children: 'Text',
69
- category: "primary",
70
- size: 'large-book'
71
- };
72
- export const PrimaryLargeLight = Template.bind({});
73
- PrimaryLargeLight.args = {
74
- children: 'Text',
75
- category: "primary",
76
- size: 'large-light'
77
- };
78
- export const PrimaryMediumSemiBold = Template.bind({});
79
- PrimaryMediumSemiBold.args = {
80
- children: 'Text',
81
- category: "primary",
82
- size: 'medium-semibold'
83
- };
84
- export const PrimaryMediumMedium = Template.bind({});
85
- PrimaryMediumMedium.args = {
86
- children: 'Text',
87
- category: "primary",
88
- size: 'medium-medium'
89
- };
90
- export const PrimaryMediumBook = Template.bind({});
91
- PrimaryMediumBook.args = {
92
- children: 'Text',
93
- category: "primary",
94
- size: 'medium-book'
95
- };
96
- export const PrimarySmallBook = Template.bind({});
97
- PrimarySmallBook.args = {
98
- children: 'Text',
99
- category: "primary",
100
- size: 'small-book'
101
- };
102
- export const PrimaryXSmallBook = Template.bind({});
103
- PrimaryXSmallBook.args = {
104
- children: 'Text',
105
- category: "primary",
106
- size: 'x-small-book'
107
- };
108
- export const Secondary = Template.bind({});
109
- Secondary.args = {
110
- category: "secondary",
111
- children: 'Text',
112
- };
113
- export const SecondaryLargeMedium = Template.bind({});
114
- SecondaryLargeMedium.args = {
115
- category: "secondary",
116
- children: 'Text',
117
- size: 'large-medium'
118
- };
119
- export const SecondaryLargeBook = Template.bind({});
120
- SecondaryLargeBook.args = {
121
- category: "secondary",
122
- children: 'Text',
123
- size: 'large-book'
124
- };
125
- export const SecondaryMediumMedium = Template.bind({});
126
- SecondaryMediumMedium.args = {
127
- category: "secondary",
128
- children: 'Text',
129
- size: 'medium-medium'
130
- };
131
- export const SecondaryMediumBook = Template.bind({});
132
- SecondaryMediumBook.args = {
133
- category: "secondary",
134
- children: 'Text',
135
- size: 'medium-book'
136
- };
137
- export const SecondarySmallMediumCap = Template.bind({});
138
- SecondarySmallMediumCap.args = {
139
- category: "secondary",
140
- children: 'Text',
141
- size: 'small-medium-cap'
142
- };
143
- export const SecondarySmallMedium = Template.bind({});
144
- SecondarySmallMedium.args = {
145
- category: "secondary",
146
- children: 'Text',
147
- size: 'small-medium'
148
- };
149
- export const SecondarySmallBook = Template.bind({});
150
- SecondarySmallBook.args = {
151
- category: "secondary",
152
- children: 'Text',
153
- size: 'small-book'
154
- };
155
- export const SecondaryXSmallMediumCap = Template.bind({});
156
- SecondaryXSmallMediumCap.args = {
157
- category: "secondary",
158
- children: 'Text',
159
- size: 'x-small-medium-cap'
160
- };
161
- export const SecondaryXSmallMedium = Template.bind({});
162
- SecondaryXSmallMedium.args = {
163
- category: "secondary",
164
- children: 'Text',
165
- size: 'x-small-medium'
166
- };
167
- export const SecondaryXSmallBookCap = Template.bind({});
168
- SecondaryXSmallBookCap.args = {
169
- category: "secondary",
170
- children: 'Text',
171
- size: 'x-small-book-cap'
172
- };
173
- export const SecondaryXSmallBook = Template.bind({});
174
- SecondaryXSmallBook.args = {
175
- category: "secondary",
176
- children: 'Text',
177
- size: 'x-small-book'
178
- };
179
- export const SecondaryXXSmallMediumCap = Template.bind({});
180
- SecondaryXXSmallMediumCap.args = {
181
- category: "secondary",
182
- children: 'Text',
183
- size: 'xx-small-medium-cap'
184
- };
185
- export const SecondaryXXSmallBook = Template.bind({});
186
- SecondaryXXSmallBook.args = {
187
- category: "secondary",
188
- children: 'Text',
189
- size: 'xx-small-book'
190
- };
1
+ import React from 'react';
2
+ import Typography from './Typography';
3
+ export default {
4
+ title: 'Atoms/Typography',
5
+ component: Typography,
6
+ };
7
+ function Template(args) {
8
+ return React.createElement(Typography, Object.assign({}, args));
9
+ }
10
+ export const Default = Template.bind({});
11
+ Default.args = {
12
+ children: 'Text',
13
+ };
14
+ export const Display = Template.bind({});
15
+ Display.args = {
16
+ category: "display",
17
+ children: 'Text',
18
+ };
19
+ export const DisplayXXXLarge = Template.bind({});
20
+ DisplayXXXLarge.args = {
21
+ children: 'Text',
22
+ category: "display",
23
+ size: 'XXX-large'
24
+ };
25
+ export const DisplayXXLarge = Template.bind({});
26
+ DisplayXXLarge.args = {
27
+ children: 'Text',
28
+ category: "display",
29
+ size: 'XX-large'
30
+ };
31
+ export const DisplayXLarge = Template.bind({});
32
+ DisplayXLarge.args = {
33
+ children: 'Text',
34
+ category: "display",
35
+ size: 'X-large'
36
+ };
37
+ export const DisplayLarge = Template.bind({});
38
+ DisplayLarge.args = {
39
+ children: 'Text',
40
+ category: "display",
41
+ size: 'large'
42
+ };
43
+ export const DisplayLargelight = Template.bind({});
44
+ DisplayLargelight.args = {
45
+ children: 'Text',
46
+ category: "display",
47
+ size: 'large-light'
48
+ };
49
+ export const DisplayMediumBook = Template.bind({});
50
+ DisplayMediumBook.args = {
51
+ children: 'Text',
52
+ category: "display",
53
+ size: 'medium-book'
54
+ };
55
+ export const Primary = Template.bind({});
56
+ Primary.args = {
57
+ category: "primary",
58
+ children: 'Text',
59
+ };
60
+ export const PrimaryLargeBold = Template.bind({});
61
+ PrimaryLargeBold.args = {
62
+ children: 'Text',
63
+ category: "primary",
64
+ size: 'large-bold'
65
+ };
66
+ export const PrimaryLargeBook = Template.bind({});
67
+ PrimaryLargeBook.args = {
68
+ children: 'Text',
69
+ category: "primary",
70
+ size: 'large-book'
71
+ };
72
+ export const PrimaryLargeLight = Template.bind({});
73
+ PrimaryLargeLight.args = {
74
+ children: 'Text',
75
+ category: "primary",
76
+ size: 'large-light'
77
+ };
78
+ export const PrimaryMediumSemiBold = Template.bind({});
79
+ PrimaryMediumSemiBold.args = {
80
+ children: 'Text',
81
+ category: "primary",
82
+ size: 'medium-semibold'
83
+ };
84
+ export const PrimaryMediumMedium = Template.bind({});
85
+ PrimaryMediumMedium.args = {
86
+ children: 'Text',
87
+ category: "primary",
88
+ size: 'medium-medium'
89
+ };
90
+ export const PrimaryMediumBook = Template.bind({});
91
+ PrimaryMediumBook.args = {
92
+ children: 'Text',
93
+ category: "primary",
94
+ size: 'medium-book'
95
+ };
96
+ export const PrimarySmallBook = Template.bind({});
97
+ PrimarySmallBook.args = {
98
+ children: 'Text',
99
+ category: "primary",
100
+ size: 'small-book'
101
+ };
102
+ export const PrimaryXSmallBook = Template.bind({});
103
+ PrimaryXSmallBook.args = {
104
+ children: 'Text',
105
+ category: "primary",
106
+ size: 'x-small-book'
107
+ };
108
+ export const Secondary = Template.bind({});
109
+ Secondary.args = {
110
+ category: "secondary",
111
+ children: 'Text',
112
+ };
113
+ export const SecondaryLargeMedium = Template.bind({});
114
+ SecondaryLargeMedium.args = {
115
+ category: "secondary",
116
+ children: 'Text',
117
+ size: 'large-medium'
118
+ };
119
+ export const SecondaryLargeBook = Template.bind({});
120
+ SecondaryLargeBook.args = {
121
+ category: "secondary",
122
+ children: 'Text',
123
+ size: 'large-book'
124
+ };
125
+ export const SecondaryMediumMedium = Template.bind({});
126
+ SecondaryMediumMedium.args = {
127
+ category: "secondary",
128
+ children: 'Text',
129
+ size: 'medium-medium'
130
+ };
131
+ export const SecondaryMediumBook = Template.bind({});
132
+ SecondaryMediumBook.args = {
133
+ category: "secondary",
134
+ children: 'Text',
135
+ size: 'medium-book'
136
+ };
137
+ export const SecondarySmallMediumCap = Template.bind({});
138
+ SecondarySmallMediumCap.args = {
139
+ category: "secondary",
140
+ children: 'Text',
141
+ size: 'small-medium-cap'
142
+ };
143
+ export const SecondarySmallMedium = Template.bind({});
144
+ SecondarySmallMedium.args = {
145
+ category: "secondary",
146
+ children: 'Text',
147
+ size: 'small-medium'
148
+ };
149
+ export const SecondarySmallBook = Template.bind({});
150
+ SecondarySmallBook.args = {
151
+ category: "secondary",
152
+ children: 'Text',
153
+ size: 'small-book'
154
+ };
155
+ export const SecondaryXSmallMediumCap = Template.bind({});
156
+ SecondaryXSmallMediumCap.args = {
157
+ category: "secondary",
158
+ children: 'Text',
159
+ size: 'x-small-medium-cap'
160
+ };
161
+ export const SecondaryXSmallMedium = Template.bind({});
162
+ SecondaryXSmallMedium.args = {
163
+ category: "secondary",
164
+ children: 'Text',
165
+ size: 'x-small-medium'
166
+ };
167
+ export const SecondaryXSmallBookCap = Template.bind({});
168
+ SecondaryXSmallBookCap.args = {
169
+ category: "secondary",
170
+ children: 'Text',
171
+ size: 'x-small-book-cap'
172
+ };
173
+ export const SecondaryXSmallBook = Template.bind({});
174
+ SecondaryXSmallBook.args = {
175
+ category: "secondary",
176
+ children: 'Text',
177
+ size: 'x-small-book'
178
+ };
179
+ export const SecondaryXXSmallMediumCap = Template.bind({});
180
+ SecondaryXXSmallMediumCap.args = {
181
+ category: "secondary",
182
+ children: 'Text',
183
+ size: 'xx-small-medium-cap'
184
+ };
185
+ export const SecondaryXXSmallBook = Template.bind({});
186
+ SecondaryXXSmallBook.args = {
187
+ category: "secondary",
188
+ children: 'Text',
189
+ size: 'xx-small-book'
190
+ };
191
191
  //# sourceMappingURL=Typography.stories.js.map
@@ -0,0 +1 @@
1
+ export { default as Typography } from './Typography';
@@ -0,0 +1,2 @@
1
+ export { default as Typography } from './Typography';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
2
- export interface MapProps {
3
- placeId: string;
4
- height: string | number;
5
- width: string | number;
6
- }
7
- export default function UTMap({ placeId, height, width }: MapProps): JSX.Element;
1
+ /// <reference types="react" />
2
+ export interface MapProps {
3
+ placeId: string;
4
+ height: string | number;
5
+ width: string | number;
6
+ }
7
+ export default function UTMap({ placeId, height, width }: MapProps): JSX.Element;
@@ -1,9 +1,9 @@
1
- import React from 'react';
2
- export default function UTMap({ placeId, height, width }) {
3
- const placeParam = placeId && `q=place_id:${placeId}`;
4
- const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
5
- const mapHeight = height || `216px`;
6
- const mapWidth = width || `100%`;
7
- return (React.createElement("iframe", { width: mapWidth, height: mapHeight, src: placeUrl, title: "Google Maps" }));
8
- }
1
+ import React from 'react';
2
+ export default function UTMap({ placeId, height, width }) {
3
+ const placeParam = placeId && `q=place_id:${placeId}`;
4
+ const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
5
+ const mapHeight = height || `216px`;
6
+ const mapWidth = width || `100%`;
7
+ return (React.createElement("iframe", { width: mapWidth, height: mapHeight, src: placeUrl, title: "Google Maps" }));
8
+ }
9
9
  //# sourceMappingURL=UTMap.js.map
@@ -1,9 +1,9 @@
1
- declare const _default: {
2
- title: string;
3
- };
4
- export default _default;
5
- export declare const Default: any;
6
- export declare const WithCustomStringHeight: any;
7
- export declare const WithCustomNumberHeight: any;
8
- export declare const WithCustomStringWidth: any;
9
- export declare const WithCustomNumberWidth: any;
1
+ declare const _default: {
2
+ title: string;
3
+ };
4
+ export default _default;
5
+ export declare const Default: any;
6
+ export declare const WithCustomStringHeight: any;
7
+ export declare const WithCustomNumberHeight: any;
8
+ export declare const WithCustomStringWidth: any;
9
+ export declare const WithCustomNumberWidth: any;
@@ -1,36 +1,36 @@
1
- import React from 'react';
2
- import UTMap from './UTMap';
3
- // Default
4
- export default {
5
- title: 'Atoms/Map',
6
- };
7
- // Templates
8
- function MapTemplate(args) {
9
- return React.createElement(UTMap, Object.assign({}, args));
10
- }
11
- // Stories
12
- export const Default = MapTemplate.bind({});
13
- Default.args = {
14
- placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
15
- };
16
- export const WithCustomStringHeight = MapTemplate.bind({});
17
- WithCustomStringHeight.args = {
18
- placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
19
- height: '320px'
20
- };
21
- export const WithCustomNumberHeight = MapTemplate.bind({});
22
- WithCustomNumberHeight.args = {
23
- placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
24
- height: 320
25
- };
26
- export const WithCustomStringWidth = MapTemplate.bind({});
27
- WithCustomStringWidth.args = {
28
- placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
29
- width: '620px'
30
- };
31
- export const WithCustomNumberWidth = MapTemplate.bind({});
32
- WithCustomNumberWidth.args = {
33
- placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
34
- width: 620
35
- };
1
+ import React from 'react';
2
+ import UTMap from './UTMap';
3
+ // Default
4
+ export default {
5
+ title: 'Atoms/Map',
6
+ };
7
+ // Templates
8
+ function MapTemplate(args) {
9
+ return React.createElement(UTMap, Object.assign({}, args));
10
+ }
11
+ // Stories
12
+ export const Default = MapTemplate.bind({});
13
+ Default.args = {
14
+ placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
15
+ };
16
+ export const WithCustomStringHeight = MapTemplate.bind({});
17
+ WithCustomStringHeight.args = {
18
+ placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
19
+ height: '320px'
20
+ };
21
+ export const WithCustomNumberHeight = MapTemplate.bind({});
22
+ WithCustomNumberHeight.args = {
23
+ placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
24
+ height: 320
25
+ };
26
+ export const WithCustomStringWidth = MapTemplate.bind({});
27
+ WithCustomStringWidth.args = {
28
+ placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
29
+ width: '620px'
30
+ };
31
+ export const WithCustomNumberWidth = MapTemplate.bind({});
32
+ WithCustomNumberWidth.args = {
33
+ placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
34
+ width: 620
35
+ };
36
36
  //# sourceMappingURL=UTMap.stories.js.map
@@ -1,27 +1,27 @@
1
- /// <reference types="react" />
2
- export interface AvatarWithNameProps {
3
- avatarOnly: boolean;
4
- avatarFontCategory: string;
5
- avatarFontSize: string;
6
- avatarWidth: string;
7
- avatarHeight: string;
8
- href: string;
9
- imgSrc: string;
10
- playerName: string;
11
- fontCategory: string;
12
- fontSize: string;
13
- maxCharacterLimit: number;
14
- }
15
- export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, maxCharacterLimit }: {
16
- avatarOnly?: boolean | undefined;
17
- imgSrc?: string | undefined;
18
- playerName?: string | undefined;
19
- avatarFontSize?: string | undefined;
20
- href?: string | undefined;
21
- avatarFontCategory?: string | undefined;
22
- avatarWidth?: string | undefined;
23
- avatarHeight?: string | undefined;
24
- fontSize?: string | undefined;
25
- fontCategory?: string | undefined;
26
- maxCharacterLimit?: number | undefined;
27
- }): JSX.Element;
1
+ /// <reference types="react" />
2
+ export interface AvatarWithNameProps {
3
+ avatarOnly: boolean;
4
+ avatarFontCategory: string;
5
+ avatarFontSize: string;
6
+ avatarWidth: string;
7
+ avatarHeight: string;
8
+ href: string;
9
+ imgSrc: string;
10
+ playerName: string;
11
+ fontCategory: string;
12
+ fontSize: string;
13
+ maxCharacterLimit: number;
14
+ }
15
+ export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, maxCharacterLimit }: {
16
+ avatarOnly?: boolean | undefined;
17
+ imgSrc?: string | undefined;
18
+ playerName?: string | undefined;
19
+ avatarFontSize?: string | undefined;
20
+ href?: string | undefined;
21
+ avatarFontCategory?: string | undefined;
22
+ avatarWidth?: string | undefined;
23
+ avatarHeight?: string | undefined;
24
+ fontSize?: string | undefined;
25
+ fontCategory?: string | undefined;
26
+ maxCharacterLimit?: number | undefined;
27
+ }): JSX.Element;
@@ -1,21 +1,21 @@
1
- import React from 'react';
2
- import Avatar from '@mui/material/Avatar';
3
- import Box from '@mui/material/Box';
4
- import Link from '@mui/material/Link';
5
- import Typography from '../../atoms/Typography/Typography';
6
- export default function AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', maxCharacterLimit = 24 }) {
7
- const getAcronym = (str) => {
8
- const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
9
- return acronym;
10
- };
11
- const getTruncatedName = (name, characterLimit) => (name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name);
12
- const AvatarComponent = (React.createElement(Avatar, { sx: {
13
- backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
14
- }, src: imgSrc },
15
- React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
16
- return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
17
- AvatarComponent,
18
- href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
19
- React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))));
20
- }
1
+ import React from 'react';
2
+ import Avatar from '@mui/material/Avatar';
3
+ import Box from '@mui/material/Box';
4
+ import Link from '@mui/material/Link';
5
+ import Typography from '../../atoms/Typography/Typography';
6
+ export default function AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', maxCharacterLimit = 24 }) {
7
+ const getAcronym = (str) => {
8
+ const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
9
+ return acronym;
10
+ };
11
+ const getTruncatedName = (name, characterLimit) => (name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name);
12
+ const AvatarComponent = (React.createElement(Avatar, { sx: {
13
+ backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
14
+ }, src: imgSrc },
15
+ React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
16
+ return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
17
+ AvatarComponent,
18
+ href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
19
+ React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))));
20
+ }
21
21
  //# sourceMappingURL=AvatarWithName.js.map
@@ -1,15 +1,15 @@
1
- declare const _default: {
2
- title: string;
3
- };
4
- export default _default;
5
- export declare const Default: any;
6
- export declare const WithImage: any;
7
- export declare const WithCustomTypography: any;
8
- export declare const WithCustomAvatarSize: any;
9
- export declare const WithAvatarOnly: any;
10
- export declare const WithNoImage: any;
11
- export declare const WithBrokenImage: any;
12
- export declare const WithLink: any;
13
- export declare const WithLowercaseName: any;
14
- export declare const WithLongName: any;
15
- export declare const WithCustomMaxCharacterLimit: any;
1
+ declare const _default: {
2
+ title: string;
3
+ };
4
+ export default _default;
5
+ export declare const Default: any;
6
+ export declare const WithImage: any;
7
+ export declare const WithCustomTypography: any;
8
+ export declare const WithCustomAvatarSize: any;
9
+ export declare const WithAvatarOnly: any;
10
+ export declare const WithNoImage: any;
11
+ export declare const WithBrokenImage: any;
12
+ export declare const WithLink: any;
13
+ export declare const WithLowercaseName: any;
14
+ export declare const WithLongName: any;
15
+ export declare const WithCustomMaxCharacterLimit: any;