@universal-tennis/ui-shared 0.1.98 → 0.2.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 (177) hide show
  1. package/.storybook/main.js +16 -16
  2. package/.storybook/typography.css +5 -26
  3. package/dist/App.d.ts +2 -2
  4. package/dist/App.js +12 -12
  5. package/dist/components.d.ts +43 -43
  6. package/dist/components.js +48 -48
  7. package/dist/index.d.ts +1 -1
  8. package/dist/index.js +12 -12
  9. package/dist/items.d.ts +2 -2
  10. package/dist/items.js +1 -1
  11. package/dist/stories/assets/css/typography.css +5 -26
  12. package/dist/stories/atoms/Button/Button.d.ts +10 -10
  13. package/dist/stories/atoms/Button/Button.js +95 -95
  14. package/dist/stories/atoms/Button/Button.js.map +1 -1
  15. package/dist/stories/atoms/Button/Button.stories.d.ts +17 -17
  16. package/dist/stories/atoms/Button/Button.stories.js +45 -45
  17. package/dist/stories/atoms/Icons/AddIcon.d.ts +3 -3
  18. package/dist/stories/atoms/Icons/AddIcon.js +8 -8
  19. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.d.ts +3 -3
  20. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.js +6 -6
  21. package/dist/stories/atoms/Icons/AvailabilityNoIcon.d.ts +3 -3
  22. package/dist/stories/atoms/Icons/AvailabilityNoIcon.js +6 -6
  23. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.d.ts +3 -3
  24. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.js +7 -7
  25. package/dist/stories/atoms/Icons/AvailabilityYesIcon.d.ts +3 -3
  26. package/dist/stories/atoms/Icons/AvailabilityYesIcon.js +6 -6
  27. package/dist/stories/atoms/Icons/BallInMotionIcon.d.ts +3 -3
  28. package/dist/stories/atoms/Icons/BallInMotionIcon.js +9 -9
  29. package/dist/stories/atoms/Icons/CalendarIcon.d.ts +3 -3
  30. package/dist/stories/atoms/Icons/CalendarIcon.js +6 -6
  31. package/dist/stories/atoms/Icons/ClockIcon.d.ts +3 -3
  32. package/dist/stories/atoms/Icons/ClockIcon.js +8 -8
  33. package/dist/stories/atoms/Icons/CloseIcon.d.ts +3 -3
  34. package/dist/stories/atoms/Icons/CloseIcon.js +6 -6
  35. package/dist/stories/atoms/Icons/DeleteIcon.d.ts +3 -3
  36. package/dist/stories/atoms/Icons/DeleteIcon.js +10 -10
  37. package/dist/stories/atoms/Icons/DoublePersonIcon.d.ts +3 -3
  38. package/dist/stories/atoms/Icons/DoublePersonIcon.js +13 -13
  39. package/dist/stories/atoms/Icons/EditIcon.d.ts +3 -3
  40. package/dist/stories/atoms/Icons/EditIcon.js +6 -6
  41. package/dist/stories/atoms/Icons/Icons.stories.d.ts +37 -37
  42. package/dist/stories/atoms/Icons/Icons.stories.js +303 -303
  43. package/dist/stories/atoms/Icons/LeftChevronIcon.d.ts +3 -3
  44. package/dist/stories/atoms/Icons/LeftChevronIcon.js +6 -6
  45. package/dist/stories/atoms/Icons/LineIcon.d.ts +3 -3
  46. package/dist/stories/atoms/Icons/LineIcon.js +6 -6
  47. package/dist/stories/atoms/Icons/LocationIcon.d.ts +3 -3
  48. package/dist/stories/atoms/Icons/LocationIcon.js +7 -7
  49. package/dist/stories/atoms/Icons/MessageIcon.d.ts +3 -3
  50. package/dist/stories/atoms/Icons/MessageIcon.js +6 -6
  51. package/dist/stories/atoms/Icons/PickleballBallIcon.d.ts +3 -3
  52. package/dist/stories/atoms/Icons/PickleballBallIcon.js +17 -17
  53. package/dist/stories/atoms/Icons/RightChevronIcon.d.ts +3 -3
  54. package/dist/stories/atoms/Icons/RightChevronIcon.js +6 -6
  55. package/dist/stories/atoms/Icons/SessionIcon.d.ts +3 -3
  56. package/dist/stories/atoms/Icons/SessionIcon.js +6 -6
  57. package/dist/stories/atoms/Icons/SinglePersonIcon.d.ts +3 -3
  58. package/dist/stories/atoms/Icons/SinglePersonIcon.js +9 -9
  59. package/dist/stories/atoms/Icons/SinglePersonV2Icon.d.ts +3 -3
  60. package/dist/stories/atoms/Icons/SinglePersonV2Icon.js +7 -7
  61. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.d.ts +3 -3
  62. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.js +10 -10
  63. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.d.ts +3 -3
  64. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.js +6 -6
  65. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.d.ts +3 -3
  66. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.js +10 -10
  67. package/dist/stories/atoms/Icons/SocialMediaXIcon.d.ts +3 -3
  68. package/dist/stories/atoms/Icons/SocialMediaXIcon.js +10 -10
  69. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.d.ts +3 -3
  70. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.js +6 -6
  71. package/dist/stories/atoms/Icons/SwapIcon.d.ts +3 -3
  72. package/dist/stories/atoms/Icons/SwapIcon.js +6 -6
  73. package/dist/stories/atoms/Icons/SwapNoBorderIcon.d.ts +3 -3
  74. package/dist/stories/atoms/Icons/SwapNoBorderIcon.js +9 -9
  75. package/dist/stories/atoms/Icons/TennisBallIcon.d.ts +3 -3
  76. package/dist/stories/atoms/Icons/TennisBallIcon.js +8 -8
  77. package/dist/stories/atoms/Icons/VerifiedIcon.d.ts +3 -3
  78. package/dist/stories/atoms/Icons/VerifiedIcon.js +7 -7
  79. package/dist/stories/atoms/Icons/VisibilityIcon.d.ts +3 -3
  80. package/dist/stories/atoms/Icons/VisibilityIcon.js +7 -7
  81. package/dist/stories/atoms/Icons/VisibilityOffIcon.d.ts +3 -3
  82. package/dist/stories/atoms/Icons/VisibilityOffIcon.js +8 -8
  83. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts +3 -3
  84. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js +31 -31
  85. package/dist/stories/atoms/Icons/sharedTypes.d.ts +11 -11
  86. package/dist/stories/atoms/Icons/sharedTypes.js +1 -1
  87. package/dist/stories/atoms/Typography/Typography.d.ts +49 -49
  88. package/dist/stories/atoms/Typography/Typography.js +143 -143
  89. package/dist/stories/atoms/Typography/Typography.js.map +1 -1
  90. package/dist/stories/atoms/Typography/Typography.stories.d.ts +37 -37
  91. package/dist/stories/atoms/Typography/Typography.stories.js +190 -190
  92. package/dist/stories/atoms/UTMap/UTMap.d.ts +7 -7
  93. package/dist/stories/atoms/UTMap/UTMap.js +8 -8
  94. package/dist/stories/atoms/UTMap/UTMap.stories.d.ts +9 -9
  95. package/dist/stories/atoms/UTMap/UTMap.stories.js +35 -35
  96. package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts +27 -27
  97. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js +20 -20
  98. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts +15 -15
  99. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js +72 -72
  100. package/dist/stories/molecules/Cards/Cards.stories.d.ts +7 -7
  101. package/dist/stories/molecules/Cards/Cards.stories.js +64 -64
  102. package/dist/stories/molecules/Cards/ContactCard.d.ts +3 -3
  103. package/dist/stories/molecules/Cards/ContactCard.js +38 -38
  104. package/dist/stories/molecules/Cards/DrawCard.d.ts +3 -3
  105. package/dist/stories/molecules/Cards/DrawCard.js +116 -116
  106. package/dist/stories/molecules/Cards/DrawCard.js.map +1 -1
  107. package/dist/stories/molecules/Cards/Modals.stories.d.ts +5 -5
  108. package/dist/stories/molecules/Cards/Modals.stories.js +72 -72
  109. package/dist/stories/molecules/Cards/TeamCard.d.ts +3 -3
  110. package/dist/stories/molecules/Cards/TeamCard.js +20 -20
  111. package/dist/stories/molecules/Cards/TeamDrawCard.d.ts +3 -3
  112. package/dist/stories/molecules/Cards/TeamDrawCard.js +78 -78
  113. package/dist/stories/molecules/Cards/shared.d.ts +1 -9
  114. package/dist/stories/molecules/Cards/shared.js +12 -12
  115. package/dist/stories/molecules/Cards/sharedTypes.d.ts +61 -61
  116. package/dist/stories/molecules/Cards/sharedTypes.js +2 -2
  117. package/dist/stories/molecules/FooterSection/FooterSection.d.ts +4 -4
  118. package/dist/stories/molecules/FooterSection/FooterSection.js +11 -11
  119. package/dist/stories/molecules/FooterSection/FooterSection.stories.d.ts +5 -5
  120. package/dist/stories/molecules/FooterSection/FooterSection.stories.js +20 -20
  121. package/dist/stories/molecules/FooterSection/sharedTypes.d.ts +5 -5
  122. package/dist/stories/molecules/FooterSection/sharedTypes.js +1 -1
  123. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.d.ts +13 -13
  124. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.js +27 -27
  125. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.d.ts +5 -5
  126. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.js +18 -18
  127. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +29 -29
  128. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +33 -33
  129. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +16 -16
  130. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +81 -81
  131. package/dist/stories/organisms/Footer/Footer.d.ts +4 -4
  132. package/dist/stories/organisms/Footer/Footer.js +97 -97
  133. package/dist/stories/organisms/Footer/Footer.stories.d.ts +5 -5
  134. package/dist/stories/organisms/Footer/Footer.stories.js +58 -58
  135. package/dist/stories/organisms/Footer/sharedTypes.d.ts +16 -16
  136. package/dist/stories/organisms/Footer/sharedTypes.js +1 -1
  137. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.d.ts +36 -36
  138. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js +49 -49
  139. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js.map +1 -1
  140. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.d.ts +9 -9
  141. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.js +196 -196
  142. package/dist/stories/organisms/Modals/FullPageModal.d.ts +4 -4
  143. package/dist/stories/organisms/Modals/FullPageModal.js +59 -59
  144. package/dist/stories/organisms/Modals/Modals.stories.d.ts +5 -5
  145. package/dist/stories/organisms/Modals/Modals.stories.js +73 -73
  146. package/dist/stories/organisms/Modals/sharedTypes.d.ts +14 -14
  147. package/dist/stories/organisms/Modals/sharedTypes.js +1 -1
  148. package/dist/stories/organisms/Tables/DrawCardTable.d.ts +3 -3
  149. package/dist/stories/organisms/Tables/DrawCardTable.js +56 -56
  150. package/dist/stories/organisms/Tables/SortableTable.d.ts +23 -23
  151. package/dist/stories/organisms/Tables/SortableTable.js +34 -34
  152. package/dist/stories/organisms/Tables/SortableTable.js.map +1 -1
  153. package/dist/stories/organisms/Tables/Tables.stories.d.ts +8 -8
  154. package/dist/stories/organisms/Tables/Tables.stories.js +90 -90
  155. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.d.ts +3 -3
  156. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.js +66 -66
  157. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.d.ts +3 -3
  158. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.js +43 -43
  159. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.d.ts +3 -3
  160. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.js +22 -22
  161. package/dist/stories/organisms/Tables/mockData.d.ts +71 -71
  162. package/dist/stories/organisms/Tables/mockData.js +99 -99
  163. package/dist/stories/organisms/Tables/sharedTypes.d.ts +15 -15
  164. package/dist/stories/organisms/Tables/sharedTypes.js +1 -1
  165. package/dist/stories/utils/constants.d.ts +19 -19
  166. package/dist/stories/utils/constants.js +23 -23
  167. package/dist/stories/utils/constants.js.map +1 -1
  168. package/dist/stories/utils/getArrayWithIds.d.ts +3 -3
  169. package/dist/stories/utils/getArrayWithIds.js +1 -1
  170. package/dist/stories/utils/useScreenSize.d.ts +4 -4
  171. package/dist/stories/utils/useScreenSize.js +27 -27
  172. package/dist/types/tableDataTypes.d.ts +38 -38
  173. package/dist/types/tableDataTypes.js +1 -1
  174. package/package.json +1 -1
  175. package/public/index.html +50 -45
  176. package/src/stories/Introduction.stories.mdx +179 -179
  177. package/src/stories/assets/css/typography.css +5 -26
@@ -1,91 +1,91 @@
1
- import React from 'react';
2
- import TeamDrawCard from '../../molecules/Cards/TeamDrawCard';
3
- import DrawCard from '../../molecules/Cards/DrawCard';
4
- import DrawCardTable from './DrawCardTable';
5
- import TeamDrawCardTable from './TeamDrawCardTable/TeamDrawCardTable';
6
- import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA } from './mockData';
7
- const onOrderPropertyChange = () => { };
8
- // Default
9
- export default {
10
- title: 'Organisms/Tables',
11
- };
12
- // Templates
13
- function DrawCardTableTemplate(args) {
14
- return React.createElement(DrawCardTable, Object.assign({}, args));
15
- }
16
- function TeamDrawCardTableTemplate(args) {
17
- return React.createElement(TeamDrawCardTable, Object.assign({}, args));
18
- }
19
- const headerRows = [
20
- { name: 'Round 1' },
21
- { name: 'Quarterfinal' },
22
- { name: 'SemiFinal' },
23
- ];
24
- const tableRows = [
25
- [
26
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
27
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
28
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
29
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
30
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
31
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
32
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
33
- React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
34
- ],
35
- [
36
- React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { onViewClick: () => { } })),
37
- React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
38
- React.createElement(DrawCard, Object.assign({ isScorelessMatch: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
39
- React.createElement(DrawCard, Object.assign({ isScorelessMatch: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
40
- ],
41
- [
42
- React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
43
- React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
44
- ],
45
- [
46
- React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
47
- ],
48
- ];
49
- const teamTableRows = [
50
- [
51
- React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
52
- React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
53
- React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
54
- React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
55
- ],
56
- [
57
- React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
58
- React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
59
- ],
60
- [
61
- React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
62
- ],
63
- ];
64
- // Stories
65
- export const DrawTable = DrawCardTableTemplate.bind({});
66
- DrawTable.args = {
67
- headerRows,
68
- tableRows,
69
- };
70
- export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
71
- TeamDrawTable.args = {
72
- headerRows,
73
- tableRows: teamTableRows,
74
- };
75
- export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
76
- MobileTeamDrawTable.args = {
77
- headerRows,
78
- tableRows: teamTableRows,
79
- isMobile: true
80
- };
81
- export const SortableTable = DrawCardTableTemplate.bind({});
82
- SortableTable.args = {
83
- headCells: MOCK_HEAD_CELLS,
84
- sortOrder: 'asc',
85
- sortByProperty: 'player',
86
- title: 'Player Table',
87
- tableData: MOCK_TABLE_DATA,
88
- rowComponent: mockRowComponent,
89
- onOrderPropertyChange,
90
- };
1
+ import React from 'react';
2
+ import TeamDrawCard from '../../molecules/Cards/TeamDrawCard';
3
+ import DrawCard from '../../molecules/Cards/DrawCard';
4
+ import DrawCardTable from './DrawCardTable';
5
+ import TeamDrawCardTable from './TeamDrawCardTable/TeamDrawCardTable';
6
+ import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA } from './mockData';
7
+ const onOrderPropertyChange = () => { };
8
+ // Default
9
+ export default {
10
+ title: 'Organisms/Tables',
11
+ };
12
+ // Templates
13
+ function DrawCardTableTemplate(args) {
14
+ return React.createElement(DrawCardTable, Object.assign({}, args));
15
+ }
16
+ function TeamDrawCardTableTemplate(args) {
17
+ return React.createElement(TeamDrawCardTable, Object.assign({}, args));
18
+ }
19
+ const headerRows = [
20
+ { name: 'Round 1' },
21
+ { name: 'Quarterfinal' },
22
+ { name: 'SemiFinal' },
23
+ ];
24
+ const tableRows = [
25
+ [
26
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
27
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
28
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
29
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
30
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
31
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
32
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { locationLabel: "hi" })),
33
+ React.createElement(DrawCard, Object.assign({ isSelectActive: true, isFlexWidth: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
34
+ ],
35
+ [
36
+ React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA, { onViewClick: () => { } })),
37
+ React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
38
+ React.createElement(DrawCard, Object.assign({ isScorelessMatch: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
39
+ React.createElement(DrawCard, Object.assign({ isScorelessMatch: true, emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
40
+ ],
41
+ [
42
+ React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
43
+ React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
44
+ ],
45
+ [
46
+ React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
47
+ ],
48
+ ];
49
+ const teamTableRows = [
50
+ [
51
+ React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
52
+ React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
53
+ React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
54
+ React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
55
+ ],
56
+ [
57
+ React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA, { showTeamMatchLink: true })),
58
+ React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
59
+ ],
60
+ [
61
+ React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
62
+ ],
63
+ ];
64
+ // Stories
65
+ export const DrawTable = DrawCardTableTemplate.bind({});
66
+ DrawTable.args = {
67
+ headerRows,
68
+ tableRows,
69
+ };
70
+ export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
71
+ TeamDrawTable.args = {
72
+ headerRows,
73
+ tableRows: teamTableRows,
74
+ };
75
+ export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
76
+ MobileTeamDrawTable.args = {
77
+ headerRows,
78
+ tableRows: teamTableRows,
79
+ isMobile: true
80
+ };
81
+ export const SortableTable = DrawCardTableTemplate.bind({});
82
+ SortableTable.args = {
83
+ headCells: MOCK_HEAD_CELLS,
84
+ sortOrder: 'asc',
85
+ sortByProperty: 'player',
86
+ title: 'Player Table',
87
+ tableData: MOCK_TABLE_DATA,
88
+ rowComponent: mockRowComponent,
89
+ onOrderPropertyChange,
90
+ };
91
91
  //# sourceMappingURL=Tables.stories.js.map
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- import { TableRowProps } from '../sharedTypes';
3
- export default function DesktopTableRows({ headerRows, totalColumns, tableRows }: Readonly<TableRowProps>): JSX.Element;
1
+ import React from "react";
2
+ import { TableRowProps } from '../sharedTypes';
3
+ export default function DesktopTableRows({ headerRows, totalColumns, tableRows }: Readonly<TableRowProps>): React.JSX.Element;
@@ -1,67 +1,67 @@
1
- import React from "react";
2
- import { styled } from "@mui/material/styles";
3
- import Grid from "@mui/material/Grid";
4
- import Box from "@mui/material/Box";
5
- import { getArrayWithIds } from '../../../utils/getArrayWithIds';
6
- import Typography from "../../../atoms/Typography/Typography";
7
- import { teamDrawCardSideMargin, standardSideMargin } from "../../../utils/constants";
8
- const StyledHeader = styled(Grid)({
9
- alignItems: "center",
10
- justifyContent: "center",
11
- display: "flex"
12
- });
13
- const gridCommonStyles = {
14
- content: "''",
15
- position: "absolute",
16
- backgroundColor: "var(--cool-grey-600)",
17
- };
18
- const horizontalLineCommonStyles = {
19
- height: "1px",
20
- top: "50%",
21
- };
22
- const StyledGrid = styled(Grid)({
23
- position: "relative",
24
- '&:first-of-type .team-draw-card': {
25
- marginLeft: 0,
26
- '&:before': {
27
- display: 'none'
28
- }
29
- },
30
- '&:last-child .team-draw-card': {
31
- marginRight: 0,
32
- '&:after': {
33
- display: 'none'
34
- }
35
- },
36
- "&:nth-last-of-type(-n+2) .team-draw-card": {
37
- "&:before": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `${teamDrawCardSideMargin}`, left: 0, transform: "translateX(-100%)" })
38
- },
39
- "&:nth-of-type(-n+2) .team-draw-card": {
40
- "&:after": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `calc(${standardSideMargin + 1}px)`, right: 0, transform: "translateX(100%)" })
41
- }
42
- });
43
- const GridSections = styled(Box)({
44
- display: "flex",
45
- alignItems: "center",
46
- position: 'relative',
47
- });
48
- export default function DesktopTableRows({ headerRows = [], totalColumns, tableRows = [] }) {
49
- const tableRowsArray = getArrayWithIds(tableRows);
50
- const formatTableRows = tableRowsArray === null || tableRowsArray === void 0 ? void 0 : tableRowsArray.map((row, index) => {
51
- if (index > 2)
52
- return; // Table can only support 3 columns
53
- const rowSectionsHeight = `${100 / tableRows[index].length}%`;
54
- const sectionAmount = tableRows[index].length;
55
- const isFirstRow = index === 0;
56
- const sectionArray = getArrayWithIds([...Array(sectionAmount)]);
57
- return (React.createElement(StyledGrid, { key: row.id, xs: totalColumns }, sectionArray === null || sectionArray === void 0 ? void 0 : sectionArray.map((section, idx) => (React.createElement(GridSections, { key: section.id, sx: {
58
- height: rowSectionsHeight,
59
- '&:before': Object.assign(Object.assign({ display: isFirstRow ? 'none' : 'block' }, gridCommonStyles), { height: `calc(50% + 1px)`, width: "1px", top: `calc(25% - 4px)` }),
60
- } }, row[idx])))));
61
- });
62
- return (React.createElement(React.Fragment, null,
63
- React.createElement(Grid, { container: true, sx: { height: "60px" } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
64
- React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
65
- React.createElement(Grid, { container: true }, formatTableRows)));
66
- }
1
+ import React from "react";
2
+ import { styled } from "@mui/material/styles";
3
+ import Grid from "@mui/material/Grid";
4
+ import Box from "@mui/material/Box";
5
+ import { getArrayWithIds } from '../../../utils/getArrayWithIds';
6
+ import Typography from "../../../atoms/Typography/Typography";
7
+ import { teamDrawCardSideMargin, standardSideMargin } from "../../../utils/constants";
8
+ const StyledHeader = styled(Grid)({
9
+ alignItems: "center",
10
+ justifyContent: "center",
11
+ display: "flex"
12
+ });
13
+ const gridCommonStyles = {
14
+ content: "''",
15
+ position: "absolute",
16
+ backgroundColor: "var(--cool-grey-600)",
17
+ };
18
+ const horizontalLineCommonStyles = {
19
+ height: "1px",
20
+ top: "50%",
21
+ };
22
+ const StyledGrid = styled(Grid)({
23
+ position: "relative",
24
+ '&:first-of-type .team-draw-card': {
25
+ marginLeft: 0,
26
+ '&:before': {
27
+ display: 'none'
28
+ }
29
+ },
30
+ '&:last-child .team-draw-card': {
31
+ marginRight: 0,
32
+ '&:after': {
33
+ display: 'none'
34
+ }
35
+ },
36
+ "&:nth-last-of-type(-n+2) .team-draw-card": {
37
+ "&:before": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `${teamDrawCardSideMargin}`, left: 0, transform: "translateX(-100%)" })
38
+ },
39
+ "&:nth-of-type(-n+2) .team-draw-card": {
40
+ "&:after": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `calc(${standardSideMargin + 1}px)`, right: 0, transform: "translateX(100%)" })
41
+ }
42
+ });
43
+ const GridSections = styled(Box)({
44
+ display: "flex",
45
+ alignItems: "center",
46
+ position: 'relative',
47
+ });
48
+ export default function DesktopTableRows({ headerRows = [], totalColumns, tableRows = [] }) {
49
+ const tableRowsArray = getArrayWithIds(tableRows);
50
+ const formatTableRows = tableRowsArray === null || tableRowsArray === void 0 ? void 0 : tableRowsArray.map((row, index) => {
51
+ if (index > 2)
52
+ return; // Table can only support 3 columns
53
+ const rowSectionsHeight = `${100 / tableRows[index].length}%`;
54
+ const sectionAmount = tableRows[index].length;
55
+ const isFirstRow = index === 0;
56
+ const sectionArray = getArrayWithIds([...Array(sectionAmount)]);
57
+ return (React.createElement(StyledGrid, { key: row.id, xs: totalColumns }, sectionArray === null || sectionArray === void 0 ? void 0 : sectionArray.map((section, idx) => (React.createElement(GridSections, { key: section.id, sx: {
58
+ height: rowSectionsHeight,
59
+ '&:before': Object.assign(Object.assign({ display: isFirstRow ? 'none' : 'block' }, gridCommonStyles), { height: `calc(50% + 1px)`, width: "1px", top: `calc(25% - 4px)` }),
60
+ } }, row[idx])))));
61
+ });
62
+ return (React.createElement(React.Fragment, null,
63
+ React.createElement(Grid, { container: true, sx: { height: "60px" } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
64
+ React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
65
+ React.createElement(Grid, { container: true }, formatTableRows)));
66
+ }
67
67
  //# sourceMappingURL=DesktopTableRows.js.map
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- import { TableRowProps } from '../sharedTypes';
3
- export default function MobileTableRows({ totalColumns, headerRows, tableRows }: Readonly<TableRowProps>): JSX.Element;
1
+ import React from "react";
2
+ import { TableRowProps } from '../sharedTypes';
3
+ export default function MobileTableRows({ totalColumns, headerRows, tableRows }: Readonly<TableRowProps>): React.JSX.Element;
@@ -1,44 +1,44 @@
1
- import React, { useState } from "react";
2
- import Box from "@mui/material/Box";
3
- import Button from "@mui/material/Button";
4
- import { styled } from "@mui/material/styles";
5
- import Grid from "@mui/material/Grid";
6
- import RightChevronIcon from '../../../atoms/Icons/RightChevronIcon';
7
- import LeftChevronIcon from '../../../atoms/Icons/LeftChevronIcon';
8
- import Typography from "../../../atoms/Typography/Typography";
9
- const StyledHeader = styled(Grid)({
10
- alignItems: "center",
11
- justifyContent: "center",
12
- display: "flex"
13
- });
14
- const GridSections = styled(Box)({
15
- display: "flex",
16
- alignItems: "center",
17
- position: 'relative',
18
- });
19
- export default function MobileTableRows({ totalColumns, headerRows = [], tableRows = [] }) {
20
- var _a;
21
- const [activeStep, setActiveStep] = useState(0);
22
- const handleNext = () => {
23
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
24
- };
25
- const handleBack = () => {
26
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
27
- };
28
- const disabledBackButton = activeStep === 0;
29
- const disabledForwardButton = tableRows && activeStep === tableRows.length - 1;
30
- return (React.createElement(Box, null,
31
- React.createElement(Grid, { container: true, justifyContent: "space-between", mb: 1 },
32
- React.createElement(Button, { color: "inherit", disabled: disabledBackButton, onClick: handleBack, sx: { mr: 1, alignSelf: "flex-start" } },
33
- React.createElement(LeftChevronIcon, { size: 16, color: disabledBackButton ? "transparent" : "var(--primary)" })),
34
- React.createElement(StyledHeader, { xs: totalColumns },
35
- React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, (_a = headerRows[activeStep]) === null || _a === void 0 ? void 0 : _a.name)),
36
- React.createElement(Button, { onClick: handleNext, disabled: disabledForwardButton },
37
- React.createElement(RightChevronIcon, { size: 16, color: disabledForwardButton ? "transparent" : "var(--primary)" }))),
38
- React.createElement(Grid, { flexDirection: "column", container: true },
39
- React.createElement(GridSections, { sx: {
40
- flexDirection: "column",
41
- gap: "10px",
42
- } }, tableRows[activeStep]))));
43
- }
1
+ import React, { useState } from "react";
2
+ import Box from "@mui/material/Box";
3
+ import Button from "@mui/material/Button";
4
+ import { styled } from "@mui/material/styles";
5
+ import Grid from "@mui/material/Grid";
6
+ import RightChevronIcon from '../../../atoms/Icons/RightChevronIcon';
7
+ import LeftChevronIcon from '../../../atoms/Icons/LeftChevronIcon';
8
+ import Typography from "../../../atoms/Typography/Typography";
9
+ const StyledHeader = styled(Grid)({
10
+ alignItems: "center",
11
+ justifyContent: "center",
12
+ display: "flex"
13
+ });
14
+ const GridSections = styled(Box)({
15
+ display: "flex",
16
+ alignItems: "center",
17
+ position: 'relative',
18
+ });
19
+ export default function MobileTableRows({ totalColumns, headerRows = [], tableRows = [] }) {
20
+ var _a;
21
+ const [activeStep, setActiveStep] = useState(0);
22
+ const handleNext = () => {
23
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
24
+ };
25
+ const handleBack = () => {
26
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
27
+ };
28
+ const disabledBackButton = activeStep === 0;
29
+ const disabledForwardButton = tableRows && activeStep === tableRows.length - 1;
30
+ return (React.createElement(Box, null,
31
+ React.createElement(Grid, { container: true, justifyContent: "space-between", mb: 1 },
32
+ React.createElement(Button, { color: "inherit", disabled: disabledBackButton, onClick: handleBack, sx: { mr: 1, alignSelf: "flex-start" } },
33
+ React.createElement(LeftChevronIcon, { size: 16, color: disabledBackButton ? "transparent" : "var(--primary)" })),
34
+ React.createElement(StyledHeader, { xs: totalColumns },
35
+ React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, (_a = headerRows[activeStep]) === null || _a === void 0 ? void 0 : _a.name)),
36
+ React.createElement(Button, { onClick: handleNext, disabled: disabledForwardButton },
37
+ React.createElement(RightChevronIcon, { size: 16, color: disabledForwardButton ? "transparent" : "var(--primary)" }))),
38
+ React.createElement(Grid, { flexDirection: "column", container: true },
39
+ React.createElement(GridSections, { sx: {
40
+ flexDirection: "column",
41
+ gap: "10px",
42
+ } }, tableRows[activeStep]))));
43
+ }
44
44
  //# sourceMappingURL=MobileTableRows.js.map
@@ -1,3 +1,3 @@
1
- /// <reference types="react" />
2
- import { DrawCardTableProps } from "../sharedTypes";
3
- export default function TeamDrawCardTable({ headerRows, tableRows, isMobile, ...props }: DrawCardTableProps): JSX.Element | null;
1
+ import React from "react";
2
+ import { DrawCardTableProps } from "../sharedTypes";
3
+ export default function TeamDrawCardTable({ headerRows, tableRows, isMobile, ...props }: DrawCardTableProps): React.JSX.Element | null;
@@ -1,23 +1,23 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React from "react";
13
- import Box from "@mui/material/Box";
14
- import DesktopTableRows from './DesktopTableRows';
15
- import MobileTableRows from './MobileTableRows';
16
- export default function TeamDrawCardTable(_a) {
17
- var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
18
- if (!headerRows || !tableRows)
19
- return null;
20
- const totalColumns = Math.floor(12 / headerRows.length);
21
- return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? (React.createElement(MobileTableRows, { totalColumns: totalColumns, tableRows: tableRows, headerRows: headerRows })) : (React.createElement(DesktopTableRows, { totalColumns: totalColumns, tableRows: tableRows, headerRows: headerRows }))));
22
- }
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React from "react";
13
+ import Box from "@mui/material/Box";
14
+ import DesktopTableRows from './DesktopTableRows';
15
+ import MobileTableRows from './MobileTableRows';
16
+ export default function TeamDrawCardTable(_a) {
17
+ var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
18
+ if (!headerRows || !tableRows)
19
+ return null;
20
+ const totalColumns = Math.floor(12 / headerRows.length);
21
+ return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? (React.createElement(MobileTableRows, { totalColumns: totalColumns, tableRows: tableRows, headerRows: headerRows })) : (React.createElement(DesktopTableRows, { totalColumns: totalColumns, tableRows: tableRows, headerRows: headerRows }))));
22
+ }
23
23
  //# sourceMappingURL=TeamDrawCardTable.js.map
@@ -1,71 +1,71 @@
1
- /// <reference types="react" />
2
- interface RowData {
3
- player: string;
4
- team: string;
5
- session: string;
6
- }
7
- interface RowProps {
8
- rowData: RowData;
9
- labelId: string;
10
- }
11
- type OnChangeArgs = {
12
- position: number;
13
- id: string | null | undefined;
14
- };
15
- export declare const mockRowComponent: ({ rowData, labelId }: RowProps) => JSX.Element;
16
- export declare const MOCK_HEAD_CELLS: {
17
- id: string;
18
- label: string;
19
- isSortingDisabled: boolean;
20
- }[];
21
- export declare const MOCK_TABLE_DATA: {
22
- id: number;
23
- player: string;
24
- team: string;
25
- session: string;
26
- }[];
27
- export declare const SAMPLE_CARD_DATA: {
28
- options: {
29
- id: number;
30
- label: string;
31
- }[];
32
- selectedOptions: {
33
- optionOne: number;
34
- optionTwo: number;
35
- };
36
- onChange: ({ position, id }: OnChangeArgs) => void;
37
- dateLabel: string;
38
- locationLabel: string;
39
- isPosition1Winner: boolean;
40
- isPosition2Winner: boolean;
41
- position1Team: {
42
- name: string;
43
- points: number;
44
- };
45
- position2Team: {
46
- name: string;
47
- points: number;
48
- };
49
- };
50
- export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
51
- dateLabel: string;
52
- timeLabel: string;
53
- locationLabel: string;
54
- isPosition1Winner: boolean;
55
- isPosition2Winner: boolean;
56
- position1Team: {
57
- name: string;
58
- points: number;
59
- href: string;
60
- seed: number;
61
- };
62
- position2Team: {
63
- name: string;
64
- points: number;
65
- href: string;
66
- seed: number;
67
- };
68
- teamMatchLink: string;
69
- showTeamMatchLink: boolean;
70
- };
71
- export {};
1
+ import React from 'react';
2
+ interface RowData {
3
+ player: string;
4
+ team: string;
5
+ session: string;
6
+ }
7
+ interface RowProps {
8
+ rowData: RowData;
9
+ labelId: string;
10
+ }
11
+ type OnChangeArgs = {
12
+ position: number;
13
+ id: string | null | undefined;
14
+ };
15
+ export declare const mockRowComponent: ({ rowData, labelId }: RowProps) => React.JSX.Element;
16
+ export declare const MOCK_HEAD_CELLS: {
17
+ id: string;
18
+ label: string;
19
+ isSortingDisabled: boolean;
20
+ }[];
21
+ export declare const MOCK_TABLE_DATA: {
22
+ id: number;
23
+ player: string;
24
+ team: string;
25
+ session: string;
26
+ }[];
27
+ export declare const SAMPLE_CARD_DATA: {
28
+ options: {
29
+ id: number;
30
+ label: string;
31
+ }[];
32
+ selectedOptions: {
33
+ optionOne: number;
34
+ optionTwo: number;
35
+ };
36
+ onChange: ({ position, id }: OnChangeArgs) => void;
37
+ dateLabel: string;
38
+ locationLabel: string;
39
+ isPosition1Winner: boolean;
40
+ isPosition2Winner: boolean;
41
+ position1Team: {
42
+ name: string;
43
+ points: number;
44
+ };
45
+ position2Team: {
46
+ name: string;
47
+ points: number;
48
+ };
49
+ };
50
+ export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
51
+ dateLabel: string;
52
+ timeLabel: string;
53
+ locationLabel: string;
54
+ isPosition1Winner: boolean;
55
+ isPosition2Winner: boolean;
56
+ position1Team: {
57
+ name: string;
58
+ points: number;
59
+ href: string;
60
+ seed: number;
61
+ };
62
+ position2Team: {
63
+ name: string;
64
+ points: number;
65
+ href: string;
66
+ seed: number;
67
+ };
68
+ teamMatchLink: string;
69
+ showTeamMatchLink: boolean;
70
+ };
71
+ export {};