@universal-tennis/ui-shared 0.1.95 → 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 (324) 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 -31
  173. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js +49 -54
  174. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js.map +1 -1
  175. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.d.ts +9 -9
  176. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.js +196 -189
  177. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.js.map +1 -1
  178. package/dist/stories/organisms/Modals/FullPageModal.d.ts +4 -4
  179. package/dist/stories/organisms/Modals/FullPageModal.js +59 -59
  180. package/dist/stories/organisms/Modals/Modals.stories.d.ts +5 -5
  181. package/dist/stories/organisms/Modals/Modals.stories.js +73 -73
  182. package/dist/stories/organisms/Modals/sharedTypes.d.ts +14 -14
  183. package/dist/stories/organisms/Modals/sharedTypes.js +1 -1
  184. package/dist/stories/organisms/Tables/DrawCardTable.d.ts +3 -3
  185. package/dist/stories/organisms/Tables/DrawCardTable.js +58 -58
  186. package/dist/stories/organisms/Tables/SortableTable.d.ts +23 -23
  187. package/dist/stories/organisms/Tables/SortableTable.js +34 -34
  188. package/dist/stories/organisms/Tables/Tables.stories.d.ts +8 -8
  189. package/dist/stories/organisms/Tables/Tables.stories.js +90 -90
  190. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.d.ts +3 -3
  191. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.js +66 -66
  192. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.d.ts +3 -3
  193. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.js +43 -43
  194. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.d.ts +3 -3
  195. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.js +22 -22
  196. package/dist/stories/organisms/Tables/mockData.d.ts +71 -71
  197. package/dist/stories/organisms/Tables/mockData.js +99 -99
  198. package/dist/stories/organisms/Tables/sharedTypes.d.ts +15 -15
  199. package/dist/stories/organisms/Tables/sharedTypes.js +1 -1
  200. package/dist/stories/utils/constants.d.ts +19 -19
  201. package/dist/stories/utils/constants.js +23 -23
  202. package/dist/stories/utils/getArrayWithIds.d.ts +3 -3
  203. package/dist/stories/utils/getArrayWithIds.js +1 -1
  204. package/dist/stories/utils/useScreenSize.d.ts +4 -4
  205. package/dist/stories/utils/useScreenSize.js +27 -27
  206. package/dist/types/tableDataTypes.d.ts +38 -38
  207. package/dist/types/tableDataTypes.js +1 -1
  208. package/infrastructure/azure-pipelines.yml +112 -112
  209. package/package.json +99 -99
  210. package/src/App.js +25 -25
  211. package/src/components.jsx +52 -52
  212. package/src/custom.d.ts +13 -13
  213. package/src/index.js +17 -17
  214. package/src/items.jsx +1 -1
  215. package/src/stories/assets/css/variables.css +15 -15
  216. package/src/stories/assets/icon-chat-blue.svg +10 -10
  217. package/src/stories/assets/icons/icon-add.svg +7 -7
  218. package/src/stories/assets/icons/icon-availability-maybe.svg +3 -3
  219. package/src/stories/assets/icons/icon-availability-no.svg +3 -3
  220. package/src/stories/assets/icons/icon-availability-not-set.svg +8 -8
  221. package/src/stories/assets/icons/icon-availability-yes.svg +3 -3
  222. package/src/stories/assets/icons/icon-calendar.svg +4 -4
  223. package/src/stories/assets/icons/icon-clock.svg +7 -7
  224. package/src/stories/assets/icons/icon-close.svg +3 -3
  225. package/src/stories/assets/icons/icon-delete.svg +9 -9
  226. package/src/stories/assets/icons/icon-edit.svg +3 -3
  227. package/src/stories/assets/icons/icon-location.svg +6 -6
  228. package/src/stories/assets/icons/icon-message.svg +3 -3
  229. package/src/stories/assets/icons/icon-session.svg +3 -3
  230. package/src/stories/assets/icons/icon-social-media-facebook.svg +10 -10
  231. package/src/stories/assets/icons/icon-social-media-instagram.svg +3 -3
  232. package/src/stories/assets/icons/icon-social-media-tiktok.svg +10 -10
  233. package/src/stories/assets/icons/icon-social-media-x.svg +10 -10
  234. package/src/stories/assets/icons/icon-social-media-youtube.svg +3 -3
  235. package/src/stories/assets/icons/icon-swap.svg +3 -3
  236. package/src/stories/assets/icons/icon-visibility-off.svg +7 -7
  237. package/src/stories/assets/icons/icon-visibility.svg +6 -6
  238. package/src/stories/assets/utr-sports-logo.svg +9 -9
  239. package/src/stories/atoms/Button/Button.stories.tsx +63 -63
  240. package/src/stories/atoms/Button/Button.tsx +145 -145
  241. package/src/stories/atoms/Icons/AddIcon.tsx +13 -13
  242. package/src/stories/atoms/Icons/AvailabilityMaybeIcon.tsx +11 -11
  243. package/src/stories/atoms/Icons/AvailabilityNoIcon.tsx +11 -11
  244. package/src/stories/atoms/Icons/AvailabilityNotSetIcon.tsx +12 -12
  245. package/src/stories/atoms/Icons/AvailabilityYesIcon.tsx +11 -11
  246. package/src/stories/atoms/Icons/BallInMotionIcon.tsx +15 -15
  247. package/src/stories/atoms/Icons/CalendarIcon.tsx +11 -11
  248. package/src/stories/atoms/Icons/ClockIcon.tsx +14 -14
  249. package/src/stories/atoms/Icons/CloseIcon.tsx +11 -11
  250. package/src/stories/atoms/Icons/DeleteIcon.tsx +15 -15
  251. package/src/stories/atoms/Icons/DoublePersonIcon.tsx +20 -20
  252. package/src/stories/atoms/Icons/EditIcon.tsx +11 -11
  253. package/src/stories/atoms/Icons/Icons.stories.tsx +372 -372
  254. package/src/stories/atoms/Icons/LeftChevronIcon.tsx +13 -13
  255. package/src/stories/atoms/Icons/LineIcon.tsx +12 -12
  256. package/src/stories/atoms/Icons/LocationIcon.tsx +12 -12
  257. package/src/stories/atoms/Icons/MessageIcon.tsx +12 -12
  258. package/src/stories/atoms/Icons/PickleballBallIcon.tsx +22 -22
  259. package/src/stories/atoms/Icons/RightChevronIcon.tsx +11 -11
  260. package/src/stories/atoms/Icons/SessionIcon.tsx +16 -16
  261. package/src/stories/atoms/Icons/SinglePersonIcon.tsx +16 -16
  262. package/src/stories/atoms/Icons/SinglePersonV2Icon.tsx +13 -13
  263. package/src/stories/atoms/Icons/SocialMediaFacebookIcon.tsx +19 -19
  264. package/src/stories/atoms/Icons/SocialMediaInstagramIcon.tsx +11 -11
  265. package/src/stories/atoms/Icons/SocialMediaTikTokIcon.tsx +18 -18
  266. package/src/stories/atoms/Icons/SocialMediaXIcon.tsx +18 -18
  267. package/src/stories/atoms/Icons/SocialMediaYoutubeIcon.tsx +11 -11
  268. package/src/stories/atoms/Icons/SwapIcon.tsx +11 -11
  269. package/src/stories/atoms/Icons/SwapNoBorderIcon.tsx +14 -14
  270. package/src/stories/atoms/Icons/TennisBallIcon.tsx +13 -13
  271. package/src/stories/atoms/Icons/VerifiedIcon.tsx +13 -13
  272. package/src/stories/atoms/Icons/VisibilityIcon.tsx +12 -12
  273. package/src/stories/atoms/Icons/VisibilityOffIcon.tsx +13 -13
  274. package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx +39 -39
  275. package/src/stories/atoms/Icons/sharedTypes.tsx +12 -12
  276. package/src/stories/atoms/Typography/Typography.tsx +185 -185
  277. package/src/stories/atoms/UTMap/UTMap.stories.tsx +43 -43
  278. package/src/stories/atoms/UTMap/UTMap.tsx +25 -25
  279. package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx +86 -86
  280. package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx +68 -68
  281. package/src/stories/molecules/Cards/Cards.stories.tsx +76 -76
  282. package/src/stories/molecules/Cards/ContactCard.tsx +45 -45
  283. package/src/stories/molecules/Cards/DrawCard.tsx +211 -211
  284. package/src/stories/molecules/Cards/Modals.stories.tsx +137 -137
  285. package/src/stories/molecules/Cards/TeamCard.tsx +14 -14
  286. package/src/stories/molecules/Cards/TeamDrawCard.tsx +159 -159
  287. package/src/stories/molecules/Cards/sharedTypes.ts +69 -69
  288. package/src/stories/molecules/FooterSection/FooterSection.stories.tsx +25 -25
  289. package/src/stories/molecules/FooterSection/FooterSection.tsx +34 -34
  290. package/src/stories/molecules/FooterSection/sharedTypes.ts +6 -6
  291. package/src/stories/molecules/GlobalNavItem/GlobalNavItem.stories.tsx +22 -22
  292. package/src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx +51 -51
  293. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx +96 -96
  294. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx +112 -112
  295. package/src/stories/organisms/Footer/Footer.stories.tsx +63 -63
  296. package/src/stories/organisms/Footer/Footer.tsx +155 -165
  297. package/src/stories/organisms/Footer/sharedTypes.ts +17 -17
  298. package/src/stories/organisms/GlobalNavigation/GlobalNavigation.stories.tsx +210 -202
  299. package/src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx +120 -124
  300. package/src/stories/organisms/Modals/FullPageModal.tsx +93 -93
  301. package/src/stories/organisms/Modals/Modals.stories.tsx +138 -138
  302. package/src/stories/organisms/Modals/sharedTypes.ts +15 -15
  303. package/src/stories/organisms/Tables/DrawCardTable.tsx +92 -92
  304. package/src/stories/organisms/Tables/SortableTable.tsx +119 -119
  305. package/src/stories/organisms/Tables/Tables.stories.tsx +104 -104
  306. package/src/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.tsx +120 -120
  307. package/src/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.tsx +67 -67
  308. package/src/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.tsx +24 -24
  309. package/src/stories/organisms/Tables/mockData.tsx +131 -131
  310. package/src/stories/organisms/Tables/sharedTypes.ts +17 -17
  311. package/src/stories/utils/constants.ts +31 -31
  312. package/src/stories/utils/getArrayWithIds.ts +1 -1
  313. package/src/stories/utils/useScreenSize.ts +28 -28
  314. package/src/types/tableDataTypes.ts +42 -42
  315. package/tsconfig.json +23 -23
  316. package/dist/stories/atoms/Map/Map.d.ts +0 -7
  317. package/dist/stories/atoms/Map/Map.js +0 -9
  318. package/dist/stories/atoms/Map/Map.js.map +0 -1
  319. package/dist/stories/atoms/Map/Map.stories.d.ts +0 -9
  320. package/dist/stories/atoms/Map/Map.stories.js +0 -36
  321. package/dist/stories/atoms/Map/Map.stories.js.map +0 -1
  322. package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts +0 -3
  323. package/dist/stories/organisms/Tables/TeamDrawCardTable.js +0 -126
  324. 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;