@universal-tennis/ui-shared 0.1.60 → 0.1.62
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.
- package/dist/stories/molecules/Cards/TeamDrawCard.js +16 -37
- package/dist/stories/molecules/Cards/TeamDrawCard.js.map +1 -1
- package/dist/stories/molecules/Cards/sharedTypes.d.ts +1 -1
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js +22 -54
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map +1 -1
- package/dist/stories/organisms/Tables/mockData.d.ts +2 -3
- package/dist/stories/organisms/Tables/mockData.js +2 -3
- package/dist/stories/organisms/Tables/mockData.js.map +1 -1
- package/dist/stories/utils/constants.d.ts +1 -0
- package/dist/stories/utils/constants.js +1 -0
- package/dist/stories/utils/constants.js.map +1 -1
- package/package.json +1 -1
- package/src/stories/molecules/Cards/TeamDrawCard.tsx +30 -49
- package/src/stories/molecules/Cards/sharedTypes.ts +1 -1
- package/src/stories/organisms/Tables/TeamDrawCardTable.tsx +38 -47
- package/src/stories/organisms/Tables/mockData.tsx +2 -3
- package/src/stories/utils/constants.ts +1 -0
|
@@ -36,6 +36,13 @@ const BottomGrid = styled(Box)({
|
|
|
36
36
|
justifyContent: "space-between",
|
|
37
37
|
paddingTop: "8px"
|
|
38
38
|
});
|
|
39
|
+
const StyledTypography = styled(Typography)({
|
|
40
|
+
overflow: "hidden",
|
|
41
|
+
textOverflow: "ellipsis",
|
|
42
|
+
display: "-webkit-box",
|
|
43
|
+
WebkitBoxOrient: "vertical",
|
|
44
|
+
WebkitLineClamp: 1
|
|
45
|
+
});
|
|
39
46
|
export default function TeamDrawCard(_a) {
|
|
40
47
|
var { dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team } = _a, props = __rest(_a, ["dateLabel", "locationLabel", "timeLabel", "matchInfo", "isPosition1Winner", "isPosition2Winner", "isScorelessMatch", "position1Team", "position2Team"]);
|
|
41
48
|
const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
|
|
@@ -45,52 +52,24 @@ export default function TeamDrawCard(_a) {
|
|
|
45
52
|
isPosition1Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 20 } }),
|
|
46
53
|
React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
|
|
47
54
|
React.createElement(SquareAvatarWithName, { name: position1Team === null || position1Team === void 0 ? void 0 : position1Team.name, fontSize: isPosition1Winner ? MediumMedium : MediumBook, href: position1Team === null || position1Team === void 0 ? void 0 : position1Team.href, isBye: !(position1Team === null || position1Team === void 0 ? void 0 : position1Team.name) }),
|
|
48
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
|
|
49
|
-
"(", position1Team === null || position1Team === void 0 ? void 0 :
|
|
50
|
-
position1Team.record,
|
|
51
|
-
")")),
|
|
55
|
+
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" }, `(${position1Team === null || position1Team === void 0 ? void 0 : position1Team.seed})`)),
|
|
52
56
|
React.createElement(Typography, { category: SECONDARY, size: isPosition1Winner ? MediumMedium : MediumBook }, isScorelessMatch ? "-" : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
|
|
53
57
|
React.createElement(Box, { display: "flex", justifyContent: "space-between" },
|
|
54
58
|
isPosition2Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 50 } }),
|
|
55
59
|
React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
|
|
56
60
|
React.createElement(SquareAvatarWithName, { name: position2Team === null || position2Team === void 0 ? void 0 : position2Team.name, fontSize: isPosition2Winner ? MediumMedium : MediumBook, href: position2Team === null || position2Team === void 0 ? void 0 : position2Team.href, isBye: !(position2Team === null || position2Team === void 0 ? void 0 : position2Team.name) }),
|
|
57
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
|
|
58
|
-
"(", position2Team === null || position2Team === void 0 ? void 0 :
|
|
59
|
-
position2Team.record,
|
|
60
|
-
")")),
|
|
61
|
+
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" }, `(${position2Team === null || position2Team === void 0 ? void 0 : position2Team.seed})`)),
|
|
61
62
|
React.createElement(Typography, { category: SECONDARY, size: isPosition2Winner ? MediumMedium : MediumBook }, isScorelessMatch ? "-" : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)),
|
|
62
63
|
React.createElement(BottomGrid, null,
|
|
63
64
|
React.createElement(Box, null,
|
|
64
65
|
React.createElement(Box, { display: "flex" },
|
|
65
|
-
React.createElement(
|
|
66
|
-
overflow: "hidden",
|
|
67
|
-
textOverflow: "ellipsis",
|
|
68
|
-
display: "-webkit-box",
|
|
69
|
-
WebkitBoxOrient: "vertical",
|
|
70
|
-
WebkitLineClamp: 1
|
|
71
|
-
}, category: SECONDARY, size: XSmallBook }, dateLabel),
|
|
72
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
|
|
73
|
-
React.createElement(Typography, { style: {
|
|
74
|
-
overflow: "hidden",
|
|
75
|
-
textOverflow: "ellipsis",
|
|
76
|
-
display: "-webkit-box",
|
|
77
|
-
WebkitBoxOrient: "vertical",
|
|
78
|
-
WebkitLineClamp: 1
|
|
79
|
-
}, category: SECONDARY, size: XSmallBook }, timeLabel),
|
|
66
|
+
React.createElement(StyledTypography, { category: SECONDARY, size: XSmallBook }, dateLabel),
|
|
80
67
|
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
|
|
81
|
-
React.createElement(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}, category: SECONDARY, size: XSmallBook }, matchInfo)),
|
|
88
|
-
React.createElement(Typography, { style: {
|
|
89
|
-
overflow: "hidden",
|
|
90
|
-
textOverflow: "ellipsis",
|
|
91
|
-
display: "-webkit-box",
|
|
92
|
-
WebkitBoxOrient: "vertical",
|
|
93
|
-
WebkitLineClamp: 1
|
|
94
|
-
}, category: SECONDARY, size: XSmallBook }, locationLabel)))));
|
|
68
|
+
React.createElement(StyledTypography, { category: SECONDARY, size: XSmallBook }, timeLabel),
|
|
69
|
+
matchInfo
|
|
70
|
+
&& (React.createElement(React.Fragment, null,
|
|
71
|
+
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
|
|
72
|
+
React.createElement(StyledTypography, { category: SECONDARY, size: XSmallBook }, matchInfo)))),
|
|
73
|
+
React.createElement(StyledTypography, { category: SECONDARY, size: XSmallBook }, locationLabel)))));
|
|
95
74
|
}
|
|
96
75
|
//# sourceMappingURL=TeamDrawCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,UAAU,EAAE,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACpG,OAAO,oBAAoB,MAAM,8CAA8C,CAAC;AAGhF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,OAAO;IACf,eAAe,EAAE,cAAc;IAC/B,MAAM,EAAE,gCAAgC;IACxC,UAAU,EAAE,GAAG,sBAAsB,EAAE;IACvC,WAAW,EAAE,GAAG,sBAAsB,EAAE;IACxC,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,GAAG,wBAAwB,EAAE;CAC5C,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,eAAe;IAC/B,UAAU,EAAE,KAAK;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAWjB;QAXiB,EACnC,SAAS,EACT,aAAa,EACb,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,aAAa,OAEK,EADf,KAAK,cAV2B,wJAWpC,CADS;IAER,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,oBAAoB,CAAC;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;IAEpC,OAAO,CACH,oBAAC,UAAU,kBAAC,SAAS,EAAC,gBAAgB,IAAK,KAAK;QAC5C,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,GAAG;YACrD,iBAAiB,IAAI,oBAAC,mBAAmB,IAAC,OAAO,QAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAI;YACrG,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG;gBAC5C,oBAAC,oBAAoB,IACjB,IAAI,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EACzB,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACvD,IAAI,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EACzB,KAAK,EAAE,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,CAAA,GAC7B;gBACF,oBAAC,UAAU,IAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,sBAAsB
|
|
1
|
+
{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,74 +16,36 @@ import { styled } from "@mui/material/styles";
|
|
|
16
16
|
import Grid from "@mui/material/Grid";
|
|
17
17
|
import LeftChevronIcon from 'stories/atoms/Icons/LeftChevronIcon';
|
|
18
18
|
import RightChevronIcon from 'stories/atoms/Icons/RightChevronIcon';
|
|
19
|
-
import { teamDrawCardSideMargin,
|
|
19
|
+
import { teamDrawCardSideMargin, standardSideMargin } from "stories/utils/constants";
|
|
20
20
|
import Typography from "../../atoms/Typography/Typography";
|
|
21
21
|
const StyledHeader = styled(Grid)({
|
|
22
22
|
alignItems: "center",
|
|
23
23
|
justifyContent: "center",
|
|
24
24
|
display: "flex"
|
|
25
25
|
});
|
|
26
|
+
const gridCommonStyles = {
|
|
27
|
+
content: "''",
|
|
28
|
+
position: "absolute",
|
|
29
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
30
|
+
};
|
|
31
|
+
const horizontalLineCommonStyles = {
|
|
32
|
+
height: "1px",
|
|
33
|
+
top: "50%",
|
|
34
|
+
};
|
|
26
35
|
const StyledGrid = styled(Grid)({
|
|
27
36
|
position: "relative",
|
|
28
|
-
"&:nth-of-type(1)": {
|
|
29
|
-
"&:after": {
|
|
30
|
-
content: "''",
|
|
31
|
-
position: "absolute",
|
|
32
|
-
right: 0,
|
|
33
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
34
|
-
height: "25%",
|
|
35
|
-
width: "1px",
|
|
36
|
-
top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"&:nth-of-type(2)": {
|
|
40
|
-
"&:before": {
|
|
41
|
-
content: "''",
|
|
42
|
-
position: "absolute",
|
|
43
|
-
left: 0,
|
|
44
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
45
|
-
height: "25%",
|
|
46
|
-
width: "1px",
|
|
47
|
-
bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
|
|
48
|
-
},
|
|
49
|
-
"&:after": {
|
|
50
|
-
content: "''",
|
|
51
|
-
position: "absolute",
|
|
52
|
-
right: 0,
|
|
53
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
54
|
-
height: "50%",
|
|
55
|
-
width: "1px",
|
|
56
|
-
top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
37
|
"&:nth-last-child(-n+2) .team-draw-card": {
|
|
60
|
-
"&:before": {
|
|
61
|
-
position: "absolute",
|
|
62
|
-
content: '""',
|
|
63
|
-
width: `${teamDrawCardSideMargin}`,
|
|
64
|
-
height: "1px",
|
|
65
|
-
left: 0,
|
|
66
|
-
top: "50%",
|
|
67
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
68
|
-
transform: "translateX(-100%)"
|
|
69
|
-
}
|
|
38
|
+
"&:before": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `${teamDrawCardSideMargin}`, left: 0, transform: "translateX(-100%)" })
|
|
70
39
|
},
|
|
71
40
|
"&:nth-of-type(-n+2) .team-draw-card": {
|
|
72
|
-
"&:after": {
|
|
73
|
-
position: "absolute",
|
|
74
|
-
content: '""',
|
|
75
|
-
width: `${teamDrawCardSideMargin}`,
|
|
76
|
-
height: "1px",
|
|
77
|
-
right: 0,
|
|
78
|
-
top: "50%",
|
|
79
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
80
|
-
transform: "translateX(100%)"
|
|
81
|
-
}
|
|
41
|
+
"&:after": Object.assign(Object.assign(Object.assign({}, gridCommonStyles), horizontalLineCommonStyles), { width: `calc(${standardSideMargin + 1}px)`, right: 0, transform: "translateX(100%)" })
|
|
82
42
|
}
|
|
83
43
|
});
|
|
84
44
|
const GridSections = styled(Box)({
|
|
85
45
|
display: "flex",
|
|
86
|
-
alignItems: "center"
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
position: 'relative',
|
|
48
|
+
"&:before": Object.assign(Object.assign({}, gridCommonStyles), { height: `calc(50% + 1px)`, width: "1px", top: `calc(25% - 4px)` })
|
|
87
49
|
});
|
|
88
50
|
const TableMobileSection = styled(Grid)({
|
|
89
51
|
flexDirection: "column"
|
|
@@ -105,7 +67,13 @@ export default function TeamDrawCardTable(_a) {
|
|
|
105
67
|
return; // Table can only support 3 columns
|
|
106
68
|
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
107
69
|
const sectionAmount = tableRows[index].length;
|
|
108
|
-
|
|
70
|
+
const isFirstRow = index === 0;
|
|
71
|
+
return (React.createElement(StyledGrid, { key: index, xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { key: idx, sx: {
|
|
72
|
+
height: rowSectionsHeight,
|
|
73
|
+
'&:before': {
|
|
74
|
+
display: isFirstRow ? 'none' : 'block',
|
|
75
|
+
},
|
|
76
|
+
} }, row[idx])))));
|
|
109
77
|
});
|
|
110
78
|
const disabledBackButton = activeStep === 0;
|
|
111
79
|
const disabledForwardButton = activeStep === tableRows.length - 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,IAAI,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -51,20 +51,19 @@ export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
|
|
|
51
51
|
dateLabel: string;
|
|
52
52
|
timeLabel: string;
|
|
53
53
|
locationLabel: string;
|
|
54
|
-
matchInfo: string;
|
|
55
54
|
isPosition1Winner: boolean;
|
|
56
55
|
isPosition2Winner: boolean;
|
|
57
56
|
position1Team: {
|
|
58
57
|
name: string;
|
|
59
58
|
points: number;
|
|
60
59
|
href: string;
|
|
61
|
-
|
|
60
|
+
seed: number;
|
|
62
61
|
};
|
|
63
62
|
position2Team: {
|
|
64
63
|
name: string;
|
|
65
64
|
points: number;
|
|
66
65
|
href: string;
|
|
67
|
-
|
|
66
|
+
seed: number;
|
|
68
67
|
};
|
|
69
68
|
};
|
|
70
69
|
export {};
|
|
@@ -80,20 +80,19 @@ export const SAMPLE_TEAM_PAGE_CARD_DATA = {
|
|
|
80
80
|
dateLabel: 'Dec 20',
|
|
81
81
|
timeLabel: '9:00pm',
|
|
82
82
|
locationLabel: 'Taube Tennis Center',
|
|
83
|
-
matchInfo: 'Round 1, Match 2',
|
|
84
83
|
isPosition1Winner: true,
|
|
85
84
|
isPosition2Winner: false,
|
|
86
85
|
position1Team: {
|
|
87
86
|
name: 'Apples',
|
|
88
87
|
points: 10,
|
|
89
88
|
href: 'https://www.reddit.com',
|
|
90
|
-
|
|
89
|
+
seed: 1
|
|
91
90
|
},
|
|
92
91
|
position2Team: {
|
|
93
92
|
name: 'Pears',
|
|
94
93
|
points: 4,
|
|
95
94
|
href: 'https://www.reddit.com',
|
|
96
|
-
|
|
95
|
+
seed: 2
|
|
97
96
|
}
|
|
98
97
|
};
|
|
99
98
|
//# sourceMappingURL=mockData.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkBhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAY,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1C,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,SAAS,IACN,SAAS,EAAC,IAAI,EACd,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,QAAQ;YAEhB,oBAAC,UAAU,QAAE,MAAM,CAAc,CACzB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,IAAI,CAAc,CACvB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,OAAO,CAAc,CAC1B,CACL,CAEd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE;IAC3D,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE;CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,kBAAkB;KAC5B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB;KAC7B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,eAAe;QACvB,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,EAAE,EAAE,GAAE,CAAC;IAChD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,GAAG;IAClB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,KAAK;IACxB,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE;KACX;IACD,aAAa,EAAE;QACb,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,QAAQ;IACnB,aAAa,EAAE,qBAAqB;IACpC,
|
|
1
|
+
{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAkBhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAY,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1C,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,SAAS,IACN,SAAS,EAAC,IAAI,EACd,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,QAAQ;YAEhB,oBAAC,UAAU,QAAE,MAAM,CAAc,CACzB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,IAAI,CAAc,CACvB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,OAAO,CAAc,CAC1B,CACL,CAEd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE;IAC3D,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE;CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,kBAAkB;KAC5B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB;KAC7B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,eAAe;QACvB,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAgB,EAAE,EAAE,GAAE,CAAC;IAChD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,GAAG;IAClB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,KAAK;IACxB,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE;KACX;IACD,aAAa,EAAE;QACb,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,QAAQ;IACnB,aAAa,EAAE,qBAAqB;IACpC,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,KAAK;IACxB,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,CAAC;KACR;IACD,aAAa,EAAE;QACb,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,CAAC;KACR;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/stories/utils/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC;AAC7C,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC"}
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/stories/utils/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AACrC,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -29,6 +29,14 @@ const BottomGrid = styled(Box)({
|
|
|
29
29
|
paddingTop: "8px"
|
|
30
30
|
});
|
|
31
31
|
|
|
32
|
+
const StyledTypography = styled(Typography)({
|
|
33
|
+
overflow: "hidden",
|
|
34
|
+
textOverflow: "ellipsis",
|
|
35
|
+
display: "-webkit-box",
|
|
36
|
+
WebkitBoxOrient: "vertical",
|
|
37
|
+
WebkitLineClamp: 1
|
|
38
|
+
});
|
|
39
|
+
|
|
32
40
|
export default function TeamDrawCard({
|
|
33
41
|
dateLabel,
|
|
34
42
|
locationLabel,
|
|
@@ -56,9 +64,7 @@ export default function TeamDrawCard({
|
|
|
56
64
|
isBye={!position1Team?.name}
|
|
57
65
|
/>
|
|
58
66
|
<Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
|
|
59
|
-
(
|
|
60
|
-
{position1Team?.record}
|
|
61
|
-
)
|
|
67
|
+
{`(${position1Team?.seed})`}
|
|
62
68
|
</Typography>
|
|
63
69
|
</Box>
|
|
64
70
|
<Typography category={SECONDARY} size={isPosition1Winner ? MediumMedium : MediumBook}>
|
|
@@ -75,9 +81,7 @@ export default function TeamDrawCard({
|
|
|
75
81
|
isBye={!position2Team?.name}
|
|
76
82
|
/>
|
|
77
83
|
<Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
|
|
78
|
-
(
|
|
79
|
-
{position2Team?.record}
|
|
80
|
-
)
|
|
84
|
+
{`(${position2Team?.seed})`}
|
|
81
85
|
</Typography>
|
|
82
86
|
</Box>
|
|
83
87
|
<Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
|
|
@@ -87,65 +91,42 @@ export default function TeamDrawCard({
|
|
|
87
91
|
<BottomGrid>
|
|
88
92
|
<Box>
|
|
89
93
|
<Box display="flex">
|
|
90
|
-
<
|
|
91
|
-
style={{
|
|
92
|
-
overflow: "hidden",
|
|
93
|
-
textOverflow: "ellipsis",
|
|
94
|
-
display: "-webkit-box",
|
|
95
|
-
WebkitBoxOrient: "vertical",
|
|
96
|
-
WebkitLineClamp: 1
|
|
97
|
-
}}
|
|
94
|
+
<StyledTypography
|
|
98
95
|
category={SECONDARY}
|
|
99
96
|
size={XSmallBook}
|
|
100
97
|
>
|
|
101
98
|
{dateLabel}
|
|
102
|
-
</
|
|
99
|
+
</StyledTypography>
|
|
103
100
|
<Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
|
|
104
101
|
•
|
|
105
102
|
</Typography>
|
|
106
|
-
<
|
|
107
|
-
style={{
|
|
108
|
-
overflow: "hidden",
|
|
109
|
-
textOverflow: "ellipsis",
|
|
110
|
-
display: "-webkit-box",
|
|
111
|
-
WebkitBoxOrient: "vertical",
|
|
112
|
-
WebkitLineClamp: 1
|
|
113
|
-
}}
|
|
103
|
+
<StyledTypography
|
|
114
104
|
category={SECONDARY}
|
|
115
105
|
size={XSmallBook}
|
|
116
106
|
>
|
|
117
107
|
{timeLabel}
|
|
118
|
-
</
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
{matchInfo}
|
|
134
|
-
</Typography>
|
|
108
|
+
</StyledTypography>
|
|
109
|
+
{matchInfo
|
|
110
|
+
&& (
|
|
111
|
+
<>
|
|
112
|
+
<Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
|
|
113
|
+
•
|
|
114
|
+
</Typography>
|
|
115
|
+
<StyledTypography
|
|
116
|
+
category={SECONDARY}
|
|
117
|
+
size={XSmallBook}
|
|
118
|
+
>
|
|
119
|
+
{matchInfo}
|
|
120
|
+
</StyledTypography>
|
|
121
|
+
</>
|
|
122
|
+
)}
|
|
135
123
|
</Box>
|
|
136
|
-
<
|
|
137
|
-
style={{
|
|
138
|
-
overflow: "hidden",
|
|
139
|
-
textOverflow: "ellipsis",
|
|
140
|
-
display: "-webkit-box",
|
|
141
|
-
WebkitBoxOrient: "vertical",
|
|
142
|
-
WebkitLineClamp: 1
|
|
143
|
-
}}
|
|
124
|
+
<StyledTypography
|
|
144
125
|
category={SECONDARY}
|
|
145
126
|
size={XSmallBook}
|
|
146
127
|
>
|
|
147
128
|
{locationLabel}
|
|
148
|
-
</
|
|
129
|
+
</StyledTypography>
|
|
149
130
|
</Box>
|
|
150
131
|
</BottomGrid>
|
|
151
132
|
</StyledCard>
|
|
@@ -3,11 +3,10 @@ import Box from "@mui/material/Box";
|
|
|
3
3
|
import Button from "@mui/material/Button";
|
|
4
4
|
import { styled } from "@mui/material/styles";
|
|
5
5
|
import Grid from "@mui/material/Grid";
|
|
6
|
-
|
|
7
|
-
import ArrowBackIosOutlinedIcon from "@mui/icons-material/ArrowBackIosOutlined";
|
|
6
|
+
|
|
8
7
|
import LeftChevronIcon from 'stories/atoms/Icons/LeftChevronIcon';
|
|
9
8
|
import RightChevronIcon from 'stories/atoms/Icons/RightChevronIcon';
|
|
10
|
-
import { teamDrawCardSideMargin,
|
|
9
|
+
import { teamDrawCardSideMargin, standardSideMargin } from "stories/utils/constants";
|
|
11
10
|
import Typography from "../../atoms/Typography/Typography";
|
|
12
11
|
import { DrawCardTableProps } from "./sharedTypes";
|
|
13
12
|
|
|
@@ -17,60 +16,35 @@ const StyledHeader = styled(Grid)({
|
|
|
17
16
|
display: "flex"
|
|
18
17
|
});
|
|
19
18
|
|
|
19
|
+
const gridCommonStyles = {
|
|
20
|
+
content: "''",
|
|
21
|
+
position: "absolute",
|
|
22
|
+
backgroundColor: "var(--cool-grey-600)",
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const horizontalLineCommonStyles = {
|
|
26
|
+
height: "1px",
|
|
27
|
+
top: "50%",
|
|
28
|
+
};
|
|
29
|
+
|
|
20
30
|
const StyledGrid = styled(Grid)({
|
|
21
31
|
position: "relative",
|
|
22
|
-
|
|
23
|
-
"&:after": {
|
|
24
|
-
content: "''",
|
|
25
|
-
position: "absolute",
|
|
26
|
-
right: 0,
|
|
27
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
28
|
-
height: "25%",
|
|
29
|
-
width: "1px",
|
|
30
|
-
top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
"&:nth-of-type(2)": {
|
|
34
|
-
"&:before": {
|
|
35
|
-
content: "''",
|
|
36
|
-
position: "absolute",
|
|
37
|
-
left: 0,
|
|
38
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
39
|
-
height: "25%",
|
|
40
|
-
width: "1px",
|
|
41
|
-
bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
|
|
42
|
-
},
|
|
43
|
-
"&:after": {
|
|
44
|
-
content: "''",
|
|
45
|
-
position: "absolute",
|
|
46
|
-
right: 0,
|
|
47
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
48
|
-
height: "50%",
|
|
49
|
-
width: "1px",
|
|
50
|
-
top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
|
|
51
|
-
}
|
|
52
|
-
},
|
|
32
|
+
|
|
53
33
|
"&:nth-last-child(-n+2) .team-draw-card": {
|
|
54
34
|
"&:before": {
|
|
55
|
-
|
|
56
|
-
|
|
35
|
+
...gridCommonStyles,
|
|
36
|
+
...horizontalLineCommonStyles,
|
|
57
37
|
width: `${teamDrawCardSideMargin}`,
|
|
58
|
-
height: "1px",
|
|
59
38
|
left: 0,
|
|
60
|
-
top: "50%",
|
|
61
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
62
39
|
transform: "translateX(-100%)"
|
|
63
40
|
}
|
|
64
41
|
},
|
|
65
42
|
"&:nth-of-type(-n+2) .team-draw-card": {
|
|
66
43
|
"&:after": {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
width:
|
|
70
|
-
height: "1px",
|
|
44
|
+
...gridCommonStyles,
|
|
45
|
+
...horizontalLineCommonStyles,
|
|
46
|
+
width: `calc(${standardSideMargin + 1}px)`,
|
|
71
47
|
right: 0,
|
|
72
|
-
top: "50%",
|
|
73
|
-
backgroundColor: "var(--cool-grey-600)",
|
|
74
48
|
transform: "translateX(100%)"
|
|
75
49
|
}
|
|
76
50
|
}
|
|
@@ -78,7 +52,15 @@ const StyledGrid = styled(Grid)({
|
|
|
78
52
|
|
|
79
53
|
const GridSections = styled(Box)({
|
|
80
54
|
display: "flex",
|
|
81
|
-
alignItems: "center"
|
|
55
|
+
alignItems: "center",
|
|
56
|
+
position: 'relative',
|
|
57
|
+
|
|
58
|
+
"&:before": {
|
|
59
|
+
...gridCommonStyles,
|
|
60
|
+
height: `calc(50% + 1px)`,
|
|
61
|
+
width: "1px",
|
|
62
|
+
top: `calc(25% - 4px)`
|
|
63
|
+
}
|
|
82
64
|
});
|
|
83
65
|
|
|
84
66
|
const TableMobileSection = styled(Grid)({
|
|
@@ -106,11 +88,20 @@ export default function TeamDrawCardTable({
|
|
|
106
88
|
if (index > 2) return; // Table can only support 3 columns
|
|
107
89
|
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
108
90
|
const sectionAmount = tableRows[index].length;
|
|
91
|
+
const isFirstRow = index === 0;
|
|
109
92
|
|
|
110
93
|
return (
|
|
111
94
|
<StyledGrid key={index} xs={totalColumns}>
|
|
112
95
|
{[...Array(sectionAmount)].map((section, idx) => (
|
|
113
|
-
<GridSections
|
|
96
|
+
<GridSections
|
|
97
|
+
key={idx}
|
|
98
|
+
sx={{
|
|
99
|
+
height: rowSectionsHeight,
|
|
100
|
+
'&:before': {
|
|
101
|
+
display: isFirstRow ? 'none' : 'block',
|
|
102
|
+
},
|
|
103
|
+
}}
|
|
104
|
+
>
|
|
114
105
|
{row[idx]}
|
|
115
106
|
</GridSections>
|
|
116
107
|
))}
|
|
@@ -112,19 +112,18 @@ export const SAMPLE_TEAM_PAGE_CARD_DATA = {
|
|
|
112
112
|
dateLabel: 'Dec 20',
|
|
113
113
|
timeLabel: '9:00pm',
|
|
114
114
|
locationLabel: 'Taube Tennis Center',
|
|
115
|
-
matchInfo: 'Round 1, Match 2',
|
|
116
115
|
isPosition1Winner: true,
|
|
117
116
|
isPosition2Winner: false,
|
|
118
117
|
position1Team: {
|
|
119
118
|
name: 'Apples',
|
|
120
119
|
points: 10,
|
|
121
120
|
href: 'https://www.reddit.com',
|
|
122
|
-
|
|
121
|
+
seed: 1
|
|
123
122
|
},
|
|
124
123
|
position2Team: {
|
|
125
124
|
name: 'Pears',
|
|
126
125
|
points: 4,
|
|
127
126
|
href: 'https://www.reddit.com',
|
|
128
|
-
|
|
127
|
+
seed: 2
|
|
129
128
|
}
|
|
130
129
|
};
|