@universal-tennis/ui-shared 0.2.0 → 0.2.1

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 (173) hide show
  1. package/dist/App.d.ts +2 -2
  2. package/dist/App.js +12 -12
  3. package/dist/components.d.ts +43 -43
  4. package/dist/components.js +48 -48
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +12 -12
  7. package/dist/items.d.ts +2 -2
  8. package/dist/items.js +1 -1
  9. package/dist/stories/atoms/Button/Button.d.ts +10 -10
  10. package/dist/stories/atoms/Button/Button.js +95 -95
  11. package/dist/stories/atoms/Button/Button.js.map +1 -1
  12. package/dist/stories/atoms/Button/Button.stories.d.ts +17 -17
  13. package/dist/stories/atoms/Button/Button.stories.js +45 -45
  14. package/dist/stories/atoms/Icons/AddIcon.d.ts +3 -3
  15. package/dist/stories/atoms/Icons/AddIcon.js +8 -8
  16. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.d.ts +3 -3
  17. package/dist/stories/atoms/Icons/AvailabilityMaybeIcon.js +6 -6
  18. package/dist/stories/atoms/Icons/AvailabilityNoIcon.d.ts +3 -3
  19. package/dist/stories/atoms/Icons/AvailabilityNoIcon.js +6 -6
  20. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.d.ts +3 -3
  21. package/dist/stories/atoms/Icons/AvailabilityNotSetIcon.js +7 -7
  22. package/dist/stories/atoms/Icons/AvailabilityYesIcon.d.ts +3 -3
  23. package/dist/stories/atoms/Icons/AvailabilityYesIcon.js +6 -6
  24. package/dist/stories/atoms/Icons/BallInMotionIcon.d.ts +3 -3
  25. package/dist/stories/atoms/Icons/BallInMotionIcon.js +9 -9
  26. package/dist/stories/atoms/Icons/CalendarIcon.d.ts +3 -3
  27. package/dist/stories/atoms/Icons/CalendarIcon.js +6 -6
  28. package/dist/stories/atoms/Icons/ClockIcon.d.ts +3 -3
  29. package/dist/stories/atoms/Icons/ClockIcon.js +8 -8
  30. package/dist/stories/atoms/Icons/CloseIcon.d.ts +3 -3
  31. package/dist/stories/atoms/Icons/CloseIcon.js +6 -6
  32. package/dist/stories/atoms/Icons/DeleteIcon.d.ts +3 -3
  33. package/dist/stories/atoms/Icons/DeleteIcon.js +10 -10
  34. package/dist/stories/atoms/Icons/DoublePersonIcon.d.ts +3 -3
  35. package/dist/stories/atoms/Icons/DoublePersonIcon.js +13 -13
  36. package/dist/stories/atoms/Icons/EditIcon.d.ts +3 -3
  37. package/dist/stories/atoms/Icons/EditIcon.js +6 -6
  38. package/dist/stories/atoms/Icons/Icons.stories.d.ts +37 -37
  39. package/dist/stories/atoms/Icons/Icons.stories.js +303 -303
  40. package/dist/stories/atoms/Icons/LeftChevronIcon.d.ts +3 -3
  41. package/dist/stories/atoms/Icons/LeftChevronIcon.js +6 -6
  42. package/dist/stories/atoms/Icons/LineIcon.d.ts +3 -3
  43. package/dist/stories/atoms/Icons/LineIcon.js +6 -6
  44. package/dist/stories/atoms/Icons/LocationIcon.d.ts +3 -3
  45. package/dist/stories/atoms/Icons/LocationIcon.js +7 -7
  46. package/dist/stories/atoms/Icons/MessageIcon.d.ts +3 -3
  47. package/dist/stories/atoms/Icons/MessageIcon.js +6 -6
  48. package/dist/stories/atoms/Icons/PickleballBallIcon.d.ts +3 -3
  49. package/dist/stories/atoms/Icons/PickleballBallIcon.js +17 -17
  50. package/dist/stories/atoms/Icons/RightChevronIcon.d.ts +3 -3
  51. package/dist/stories/atoms/Icons/RightChevronIcon.js +6 -6
  52. package/dist/stories/atoms/Icons/SessionIcon.d.ts +3 -3
  53. package/dist/stories/atoms/Icons/SessionIcon.js +6 -6
  54. package/dist/stories/atoms/Icons/SinglePersonIcon.d.ts +3 -3
  55. package/dist/stories/atoms/Icons/SinglePersonIcon.js +9 -9
  56. package/dist/stories/atoms/Icons/SinglePersonV2Icon.d.ts +3 -3
  57. package/dist/stories/atoms/Icons/SinglePersonV2Icon.js +7 -7
  58. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.d.ts +3 -3
  59. package/dist/stories/atoms/Icons/SocialMediaFacebookIcon.js +10 -10
  60. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.d.ts +3 -3
  61. package/dist/stories/atoms/Icons/SocialMediaInstagramIcon.js +6 -6
  62. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.d.ts +3 -3
  63. package/dist/stories/atoms/Icons/SocialMediaTikTokIcon.js +10 -10
  64. package/dist/stories/atoms/Icons/SocialMediaXIcon.d.ts +3 -3
  65. package/dist/stories/atoms/Icons/SocialMediaXIcon.js +10 -10
  66. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.d.ts +3 -3
  67. package/dist/stories/atoms/Icons/SocialMediaYoutubeIcon.js +6 -6
  68. package/dist/stories/atoms/Icons/SwapIcon.d.ts +3 -3
  69. package/dist/stories/atoms/Icons/SwapIcon.js +6 -6
  70. package/dist/stories/atoms/Icons/SwapNoBorderIcon.d.ts +3 -3
  71. package/dist/stories/atoms/Icons/SwapNoBorderIcon.js +9 -9
  72. package/dist/stories/atoms/Icons/TennisBallIcon.d.ts +3 -3
  73. package/dist/stories/atoms/Icons/TennisBallIcon.js +8 -8
  74. package/dist/stories/atoms/Icons/VerifiedIcon.d.ts +3 -3
  75. package/dist/stories/atoms/Icons/VerifiedIcon.js +7 -7
  76. package/dist/stories/atoms/Icons/VisibilityIcon.d.ts +3 -3
  77. package/dist/stories/atoms/Icons/VisibilityIcon.js +7 -7
  78. package/dist/stories/atoms/Icons/VisibilityOffIcon.d.ts +3 -3
  79. package/dist/stories/atoms/Icons/VisibilityOffIcon.js +8 -8
  80. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts +3 -3
  81. package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js +31 -31
  82. package/dist/stories/atoms/Icons/sharedTypes.d.ts +11 -11
  83. package/dist/stories/atoms/Icons/sharedTypes.js +1 -1
  84. package/dist/stories/atoms/Typography/Typography.d.ts +49 -49
  85. package/dist/stories/atoms/Typography/Typography.js +143 -143
  86. package/dist/stories/atoms/Typography/Typography.js.map +1 -1
  87. package/dist/stories/atoms/Typography/Typography.stories.d.ts +37 -37
  88. package/dist/stories/atoms/Typography/Typography.stories.js +190 -190
  89. package/dist/stories/atoms/UTMap/UTMap.d.ts +7 -7
  90. package/dist/stories/atoms/UTMap/UTMap.js +8 -8
  91. package/dist/stories/atoms/UTMap/UTMap.stories.d.ts +9 -9
  92. package/dist/stories/atoms/UTMap/UTMap.stories.js +35 -35
  93. package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts +27 -27
  94. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js +20 -20
  95. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts +15 -15
  96. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js +72 -72
  97. package/dist/stories/molecules/Cards/Cards.stories.d.ts +7 -7
  98. package/dist/stories/molecules/Cards/Cards.stories.js +64 -64
  99. package/dist/stories/molecules/Cards/ContactCard.d.ts +3 -3
  100. package/dist/stories/molecules/Cards/ContactCard.js +38 -38
  101. package/dist/stories/molecules/Cards/DrawCard.d.ts +3 -3
  102. package/dist/stories/molecules/Cards/DrawCard.js +116 -116
  103. package/dist/stories/molecules/Cards/DrawCard.js.map +1 -1
  104. package/dist/stories/molecules/Cards/Modals.stories.d.ts +5 -5
  105. package/dist/stories/molecules/Cards/Modals.stories.js +72 -72
  106. package/dist/stories/molecules/Cards/TeamCard.d.ts +3 -3
  107. package/dist/stories/molecules/Cards/TeamCard.js +20 -20
  108. package/dist/stories/molecules/Cards/TeamDrawCard.d.ts +3 -3
  109. package/dist/stories/molecules/Cards/TeamDrawCard.js +78 -78
  110. package/dist/stories/molecules/Cards/shared.d.ts +4 -1
  111. package/dist/stories/molecules/Cards/shared.js +12 -12
  112. package/dist/stories/molecules/Cards/sharedTypes.d.ts +61 -61
  113. package/dist/stories/molecules/Cards/sharedTypes.js +2 -2
  114. package/dist/stories/molecules/FooterSection/FooterSection.d.ts +4 -4
  115. package/dist/stories/molecules/FooterSection/FooterSection.js +11 -11
  116. package/dist/stories/molecules/FooterSection/FooterSection.stories.d.ts +5 -5
  117. package/dist/stories/molecules/FooterSection/FooterSection.stories.js +20 -20
  118. package/dist/stories/molecules/FooterSection/sharedTypes.d.ts +5 -5
  119. package/dist/stories/molecules/FooterSection/sharedTypes.js +1 -1
  120. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.d.ts +13 -13
  121. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.js +27 -27
  122. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.d.ts +5 -5
  123. package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.stories.js +18 -18
  124. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +29 -29
  125. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +33 -33
  126. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +16 -16
  127. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +81 -81
  128. package/dist/stories/organisms/Footer/Footer.d.ts +4 -4
  129. package/dist/stories/organisms/Footer/Footer.js +101 -97
  130. package/dist/stories/organisms/Footer/Footer.js.map +1 -1
  131. package/dist/stories/organisms/Footer/Footer.stories.d.ts +5 -5
  132. package/dist/stories/organisms/Footer/Footer.stories.js +58 -58
  133. package/dist/stories/organisms/Footer/sharedTypes.d.ts +16 -16
  134. package/dist/stories/organisms/Footer/sharedTypes.js +1 -1
  135. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.d.ts +36 -36
  136. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js +49 -49
  137. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js.map +1 -1
  138. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.d.ts +9 -9
  139. package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.stories.js +196 -196
  140. package/dist/stories/organisms/Modals/FullPageModal.d.ts +4 -4
  141. package/dist/stories/organisms/Modals/FullPageModal.js +59 -59
  142. package/dist/stories/organisms/Modals/Modals.stories.d.ts +5 -5
  143. package/dist/stories/organisms/Modals/Modals.stories.js +73 -73
  144. package/dist/stories/organisms/Modals/sharedTypes.d.ts +14 -14
  145. package/dist/stories/organisms/Modals/sharedTypes.js +1 -1
  146. package/dist/stories/organisms/Tables/DrawCardTable.d.ts +3 -3
  147. package/dist/stories/organisms/Tables/DrawCardTable.js +56 -56
  148. package/dist/stories/organisms/Tables/SortableTable.d.ts +23 -23
  149. package/dist/stories/organisms/Tables/SortableTable.js +34 -34
  150. package/dist/stories/organisms/Tables/SortableTable.js.map +1 -1
  151. package/dist/stories/organisms/Tables/Tables.stories.d.ts +8 -8
  152. package/dist/stories/organisms/Tables/Tables.stories.js +90 -90
  153. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.d.ts +3 -3
  154. package/dist/stories/organisms/Tables/TeamDrawCardTable/DesktopTableRows.js +66 -66
  155. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.d.ts +3 -3
  156. package/dist/stories/organisms/Tables/TeamDrawCardTable/MobileTableRows.js +43 -43
  157. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.d.ts +3 -3
  158. package/dist/stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable.js +22 -22
  159. package/dist/stories/organisms/Tables/mockData.d.ts +71 -71
  160. package/dist/stories/organisms/Tables/mockData.js +99 -99
  161. package/dist/stories/organisms/Tables/sharedTypes.d.ts +15 -15
  162. package/dist/stories/organisms/Tables/sharedTypes.js +1 -1
  163. package/dist/stories/utils/constants.d.ts +19 -19
  164. package/dist/stories/utils/constants.js +23 -23
  165. package/dist/stories/utils/constants.js.map +1 -1
  166. package/dist/stories/utils/getArrayWithIds.d.ts +3 -3
  167. package/dist/stories/utils/getArrayWithIds.js +1 -1
  168. package/dist/stories/utils/useScreenSize.d.ts +4 -4
  169. package/dist/stories/utils/useScreenSize.js +27 -27
  170. package/dist/types/tableDataTypes.d.ts +38 -38
  171. package/dist/types/tableDataTypes.js +1 -1
  172. package/package.json +1 -1
  173. package/src/stories/organisms/Footer/Footer.tsx +6 -2
@@ -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
- import React from "react";
2
- import { TableRowProps } from '../sharedTypes';
3
- export default function DesktopTableRows({ headerRows, totalColumns, tableRows }: Readonly<TableRowProps>): React.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
- import React from "react";
2
- import { TableRowProps } from '../sharedTypes';
3
- export default function MobileTableRows({ totalColumns, headerRows, tableRows }: Readonly<TableRowProps>): React.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
- import React from "react";
2
- import { DrawCardTableProps } from "../sharedTypes";
3
- export default function TeamDrawCardTable({ headerRows, tableRows, isMobile, ...props }: DrawCardTableProps): React.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
- 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 {};
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 {};