@universal-tennis/ui-shared 0.1.56 → 0.1.57
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/components.d.ts +0 -3
- package/dist/components.js +0 -3
- package/dist/components.js.map +1 -1
- package/dist/stories/atoms/Icons/Icons.stories.d.ts +0 -1
- package/dist/stories/atoms/Icons/Icons.stories.js +0 -8
- package/dist/stories/atoms/Icons/Icons.stories.js.map +1 -1
- package/dist/stories/atoms/Icons/sharedTypes.d.ts +0 -5
- package/dist/stories/molecules/Cards/shared.d.ts +2 -7
- package/dist/stories/molecules/Cards/sharedTypes.d.ts +0 -13
- package/dist/stories/organisms/Tables/Tables.stories.d.ts +0 -2
- package/dist/stories/organisms/Tables/Tables.stories.js +1 -32
- package/dist/stories/organisms/Tables/Tables.stories.js.map +1 -1
- package/dist/stories/organisms/Tables/mockData.d.ts +0 -20
- package/dist/stories/organisms/Tables/mockData.js +0 -20
- package/dist/stories/organisms/Tables/mockData.js.map +1 -1
- package/package.json +2 -2
- package/src/components.jsx +0 -3
- package/src/stories/atoms/Icons/Icons.stories.tsx +1 -11
- package/src/stories/atoms/Icons/sharedTypes.tsx +0 -6
- package/src/stories/molecules/Cards/sharedTypes.ts +0 -14
- package/src/stories/organisms/Tables/Tables.stories.tsx +1 -36
- package/src/stories/organisms/Tables/mockData.tsx +0 -21
- package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts +0 -3
- package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js +0 -32
- package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js.map +0 -1
- package/dist/stories/molecules/Cards/TeamDrawCard.d.ts +0 -3
- package/dist/stories/molecules/Cards/TeamDrawCard.js +0 -94
- package/dist/stories/molecules/Cards/TeamDrawCard.js.map +0 -1
- package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts +0 -3
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js +0 -95
- package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map +0 -1
- package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx +0 -39
- package/src/stories/molecules/Cards/TeamDrawCard.tsx +0 -154
- package/src/stories/organisms/Tables/TeamDrawCardTable.tsx +0 -137
package/dist/components.d.ts
CHANGED
|
@@ -17,14 +17,11 @@ export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
|
|
|
17
17
|
export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
|
|
18
18
|
export { default as VisibilityIcon } from "./stories/atoms/Icons/VisibilityIcon";
|
|
19
19
|
export { default as VisibilityOffIcon } from "./stories/atoms/Icons/VisibilityOffIcon";
|
|
20
|
-
export { default as WinnerIndicatorIcon } from "./stories/atoms/Icons/WinnerIndicatorIcon";
|
|
21
20
|
export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
|
|
22
21
|
export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
|
|
23
22
|
export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
|
|
24
23
|
export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
|
|
25
24
|
export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";
|
|
26
|
-
export { default as TeamDrawCard } from "./stories/molecules/Cards/TeamDrawCard";
|
|
27
25
|
export { default as DrawCardTable } from "./stories/organisms/Tables/DrawCardTable";
|
|
28
26
|
export { default as FullPageModal } from "./stories/organisms/Modals/FullPageModal";
|
|
29
27
|
export { default as SortableTable } from "./stories/organisms/Tables/SortableTable";
|
|
30
|
-
export { default as TeamDrawCardTable } from "./stories/organisms/Tables/TeamDrawCardTable";
|
package/dist/components.js
CHANGED
|
@@ -20,17 +20,14 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
|
|
|
20
20
|
export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
|
|
21
21
|
export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
|
|
22
22
|
export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
|
|
23
|
-
export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
|
|
24
23
|
// MOLECULES
|
|
25
24
|
export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
|
|
26
25
|
export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
|
|
27
26
|
export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
|
|
28
27
|
export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
|
|
29
28
|
export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
|
|
30
|
-
export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
|
|
31
29
|
// ORGANISMS
|
|
32
30
|
export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
|
|
33
31
|
export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
|
|
34
32
|
export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
|
|
35
|
-
export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';
|
|
36
33
|
//# sourceMappingURL=components.js.map
|
package/dist/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAEvF,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC"}
|
|
@@ -15,7 +15,6 @@ import SessionIcon from './SessionIcon';
|
|
|
15
15
|
import SwapIcon from './SwapIcon';
|
|
16
16
|
import VisibilityIcon from './VisibilityIcon';
|
|
17
17
|
import VisibilityOffIcon from './VisibilityOffIcon';
|
|
18
|
-
import WinnerIndicatorIcon from './WinnerIndicatorIcon';
|
|
19
18
|
// Default
|
|
20
19
|
export default {
|
|
21
20
|
title: 'Atoms/Icons',
|
|
@@ -69,9 +68,6 @@ function VisibilityIconTemplate(args) {
|
|
|
69
68
|
function VisibilityOffIconTemplate(args) {
|
|
70
69
|
return React.createElement(VisibilityOffIcon, Object.assign({}, args));
|
|
71
70
|
}
|
|
72
|
-
function WinnerIndicatorIconTemplate(args) {
|
|
73
|
-
return React.createElement(WinnerIndicatorIcon, Object.assign({}, args));
|
|
74
|
-
}
|
|
75
71
|
// Stories
|
|
76
72
|
export const Add = AddIconTemplate.bind({});
|
|
77
73
|
Add.args = {
|
|
@@ -153,8 +149,4 @@ VisibilityOff.args = {
|
|
|
153
149
|
size: 150,
|
|
154
150
|
color: 'black'
|
|
155
151
|
};
|
|
156
|
-
export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
|
|
157
|
-
WinnerIndicator.args = {
|
|
158
|
-
isBlack: true
|
|
159
|
-
};
|
|
160
152
|
//# sourceMappingURL=Icons.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").
|
|
3
|
-
children?: import("react").ReactNode;
|
|
4
|
-
component?: import("react").ElementType<any> | undefined;
|
|
5
|
-
ref?: import("react").Ref<unknown> | undefined;
|
|
6
|
-
sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
|
|
7
|
-
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
2
|
+
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
8
3
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
-
},
|
|
4
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -13,8 +13,6 @@ type OnChangeArgs = {
|
|
|
13
13
|
type PositionTeam = {
|
|
14
14
|
name: string;
|
|
15
15
|
points: number;
|
|
16
|
-
href?: string;
|
|
17
|
-
record?: number;
|
|
18
16
|
};
|
|
19
17
|
export type DrawCardProps = {
|
|
20
18
|
options: Options;
|
|
@@ -35,17 +33,6 @@ export type DrawCardProps = {
|
|
|
35
33
|
onViewClick?: VoidFunction;
|
|
36
34
|
onChange: ({ position, id }: OnChangeArgs) => void;
|
|
37
35
|
};
|
|
38
|
-
export type TeamDrawCardProps = {
|
|
39
|
-
dateLabel: string;
|
|
40
|
-
locationLabel: string;
|
|
41
|
-
timeLabel: string;
|
|
42
|
-
matchInfo?: string;
|
|
43
|
-
isPosition1Winner?: boolean;
|
|
44
|
-
isPosition2Winner?: boolean;
|
|
45
|
-
isScorelessMatch?: boolean;
|
|
46
|
-
position1Team: PositionTeam;
|
|
47
|
-
position2Team: PositionTeam;
|
|
48
|
-
};
|
|
49
36
|
export interface TeamCardProps {
|
|
50
37
|
title: string;
|
|
51
38
|
description: string;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
|
|
3
2
|
import DrawCard from '../../molecules/Cards/DrawCard';
|
|
4
3
|
import DrawCardTable from './DrawCardTable';
|
|
5
|
-
import
|
|
6
|
-
import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA } from './mockData';
|
|
4
|
+
import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA } from './mockData';
|
|
7
5
|
const onOrderPropertyChange = () => { };
|
|
8
6
|
// Default
|
|
9
7
|
export default {
|
|
@@ -13,9 +11,6 @@ export default {
|
|
|
13
11
|
function DrawCardTableTemplate(args) {
|
|
14
12
|
return React.createElement(DrawCardTable, Object.assign({}, args));
|
|
15
13
|
}
|
|
16
|
-
function TeamDrawCardTableTemplate(args) {
|
|
17
|
-
return React.createElement(TeamDrawCardTable, Object.assign({}, args));
|
|
18
|
-
}
|
|
19
14
|
const headerRows = [
|
|
20
15
|
{ name: 'Round 1' },
|
|
21
16
|
{ name: 'Quarterfinal' },
|
|
@@ -46,38 +41,12 @@ const tableRows = [
|
|
|
46
41
|
React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
|
|
47
42
|
],
|
|
48
43
|
];
|
|
49
|
-
const teamTableRows = [
|
|
50
|
-
[
|
|
51
|
-
React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
|
|
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)),
|
|
55
|
-
],
|
|
56
|
-
[
|
|
57
|
-
React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
|
|
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
44
|
// Stories
|
|
65
45
|
export const DrawTable = DrawCardTableTemplate.bind({});
|
|
66
46
|
DrawTable.args = {
|
|
67
47
|
headerRows,
|
|
68
48
|
tableRows,
|
|
69
49
|
};
|
|
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
50
|
export const SortableTable = DrawCardTableTemplate.bind({});
|
|
82
51
|
SortableTable.args = {
|
|
83
52
|
headCells: MOCK_HEAD_CELLS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EACrE,MAAM,YAAY,CAAC;AAEpB,MAAM,qBAAqB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAEvC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,YAAY;AACZ,SAAS,qBAAqB,CAAC,IAAwB;IACrD,OAAO,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,IAAI,EAAE,SAAS,EAAE;IACnB,EAAE,IAAI,EAAE,cAAc,EAAE;IACxB,EAAE,IAAI,EAAE,WAAW,EAAE;CACtB,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACI,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QACxF,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,IAAE,aAAa,EAAC,IAAI,IAAG;QAC3G,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QACxF,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,IAAE,aAAa,EAAC,IAAI,IAAG;QAC3G,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QACxF,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QACxF,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,IAAE,aAAa,EAAC,IAAI,IAAG;QAC3G,oBAAC,QAAQ,kBAAC,cAAc,QAAC,WAAW,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;KAC3F;IACD;QACI,oBAAC,QAAQ,kBAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,IAAE,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC,IAAI;QACpF,oBAAC,QAAQ,kBAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QAC7D,oBAAC,QAAQ,kBAAC,gBAAgB,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QAC9E,oBAAC,QAAQ,kBAAC,gBAAgB,QAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;KACjF;IACD;QACI,oBAAC,QAAQ,kBAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;QAC7D,oBAAC,QAAQ,kBAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;KAChE;IACD;QACI,oBAAC,QAAQ,kBAAC,UAAU,EAAC,eAAe,IAAK,gBAAgB,EAAI;KAChE;CACF,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,SAAS,CAAC,IAAI,GAAG;IACf,UAAU;IACV,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,aAAa,CAAC,IAAI,GAAG;IACnB,SAAS,EAAE,eAAe;IAC1B,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,eAAe;IAC1B,YAAY,EAAE,gBAAgB;IAC9B,qBAAqB;CACtB,CAAC"}
|
|
@@ -47,24 +47,4 @@ export declare const SAMPLE_CARD_DATA: {
|
|
|
47
47
|
points: number;
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
|
-
export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
|
|
51
|
-
dateLabel: string;
|
|
52
|
-
timeLabel: string;
|
|
53
|
-
locationLabel: string;
|
|
54
|
-
matchInfo: string;
|
|
55
|
-
isPosition1Winner: boolean;
|
|
56
|
-
isPosition2Winner: boolean;
|
|
57
|
-
position1Team: {
|
|
58
|
-
name: string;
|
|
59
|
-
points: number;
|
|
60
|
-
href: string;
|
|
61
|
-
record: number;
|
|
62
|
-
};
|
|
63
|
-
position2Team: {
|
|
64
|
-
name: string;
|
|
65
|
-
points: number;
|
|
66
|
-
href: string;
|
|
67
|
-
record: number;
|
|
68
|
-
};
|
|
69
|
-
};
|
|
70
50
|
export {};
|
|
@@ -76,24 +76,4 @@ export const SAMPLE_CARD_DATA = {
|
|
|
76
76
|
points: 4,
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
-
export const SAMPLE_TEAM_PAGE_CARD_DATA = {
|
|
80
|
-
dateLabel: 'Dec 20',
|
|
81
|
-
timeLabel: '9:00pm',
|
|
82
|
-
locationLabel: 'Taube Tennis Center',
|
|
83
|
-
matchInfo: 'Round 1, Match 2',
|
|
84
|
-
isPosition1Winner: true,
|
|
85
|
-
isPosition2Winner: false,
|
|
86
|
-
position1Team: {
|
|
87
|
-
name: 'Apples',
|
|
88
|
-
points: 10,
|
|
89
|
-
href: 'https://www.reddit.com',
|
|
90
|
-
record: 2
|
|
91
|
-
},
|
|
92
|
-
position2Team: {
|
|
93
|
-
name: 'Pears',
|
|
94
|
-
points: 4,
|
|
95
|
-
href: 'https://www.reddit.com',
|
|
96
|
-
record: 2
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
79
|
//# 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
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-tennis/ui-shared",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.57",
|
|
4
4
|
"main": "dist/items.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://universaltennis.com",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"@emotion/react": "^11.10.5",
|
|
9
9
|
"@emotion/styled": "^11.10.5",
|
|
10
10
|
"@mui/icons-material": "^5.11.0",
|
|
11
|
-
"@mui/material": "5.
|
|
11
|
+
"@mui/material": "5.14.17",
|
|
12
12
|
"copyfiles": "^2.4.1",
|
|
13
13
|
"cross-env": "^7.0.3",
|
|
14
14
|
"libphonenumber-js": "^1.10.18",
|
package/src/components.jsx
CHANGED
|
@@ -22,7 +22,6 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
|
|
|
22
22
|
export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
|
|
23
23
|
export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
|
|
24
24
|
export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
|
|
25
|
-
export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
|
|
26
25
|
|
|
27
26
|
// MOLECULES
|
|
28
27
|
export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
|
|
@@ -30,10 +29,8 @@ export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
|
|
|
30
29
|
export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
|
|
31
30
|
export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
|
|
32
31
|
export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
|
|
33
|
-
export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
|
|
34
32
|
|
|
35
33
|
// ORGANISMS
|
|
36
34
|
export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
|
|
37
35
|
export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
|
|
38
36
|
export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
|
|
39
|
-
export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';
|
|
@@ -16,8 +16,7 @@ import SessionIcon from './SessionIcon';
|
|
|
16
16
|
import SwapIcon from './SwapIcon';
|
|
17
17
|
import VisibilityIcon from './VisibilityIcon';
|
|
18
18
|
import VisibilityOffIcon from './VisibilityOffIcon';
|
|
19
|
-
import
|
|
20
|
-
import { IconProps, WinnerIndicatorIconProps } from './sharedTypes';
|
|
19
|
+
import { IconProps } from './sharedTypes';
|
|
21
20
|
|
|
22
21
|
// Default
|
|
23
22
|
export default {
|
|
@@ -89,10 +88,6 @@ function VisibilityOffIconTemplate(args: IconProps) {
|
|
|
89
88
|
return <VisibilityOffIcon {...args} />;
|
|
90
89
|
}
|
|
91
90
|
|
|
92
|
-
function WinnerIndicatorIconTemplate(args: WinnerIndicatorIconProps) {
|
|
93
|
-
return <WinnerIndicatorIcon {...args} />;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
91
|
// Stories
|
|
97
92
|
export const Add = AddIconTemplate.bind({});
|
|
98
93
|
Add.args = {
|
|
@@ -189,8 +184,3 @@ VisibilityOff.args = {
|
|
|
189
184
|
size: 150,
|
|
190
185
|
color: 'black'
|
|
191
186
|
};
|
|
192
|
-
|
|
193
|
-
export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
|
|
194
|
-
WinnerIndicator.args = {
|
|
195
|
-
isBlack: true
|
|
196
|
-
};
|
|
@@ -18,8 +18,6 @@ type OnChangeArgs = {
|
|
|
18
18
|
type PositionTeam = {
|
|
19
19
|
name: string;
|
|
20
20
|
points: number;
|
|
21
|
-
href?: string;
|
|
22
|
-
record?: number;
|
|
23
21
|
}
|
|
24
22
|
|
|
25
23
|
export type DrawCardProps = {
|
|
@@ -42,18 +40,6 @@ export type DrawCardProps = {
|
|
|
42
40
|
onChange: ({ position, id }: OnChangeArgs) => void;
|
|
43
41
|
}
|
|
44
42
|
|
|
45
|
-
export type TeamDrawCardProps = {
|
|
46
|
-
dateLabel: string;
|
|
47
|
-
locationLabel: string;
|
|
48
|
-
timeLabel: string;
|
|
49
|
-
matchInfo?: string;
|
|
50
|
-
isPosition1Winner?: boolean;
|
|
51
|
-
isPosition2Winner?: boolean;
|
|
52
|
-
isScorelessMatch?: boolean;
|
|
53
|
-
position1Team: PositionTeam;
|
|
54
|
-
position2Team: PositionTeam;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
43
|
export interface TeamCardProps {
|
|
58
44
|
title: string;
|
|
59
45
|
description: string;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
|
|
3
2
|
import DrawCard from '../../molecules/Cards/DrawCard';
|
|
4
3
|
import DrawCardTable from './DrawCardTable';
|
|
5
|
-
import TeamDrawCardTable from './TeamDrawCardTable';
|
|
6
4
|
import { DrawCardTableProps } from './sharedTypes';
|
|
7
5
|
import {
|
|
8
|
-
MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA
|
|
6
|
+
MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA
|
|
9
7
|
} from './mockData';
|
|
10
8
|
|
|
11
9
|
const onOrderPropertyChange = () => {};
|
|
@@ -20,10 +18,6 @@ function DrawCardTableTemplate(args: DrawCardTableProps) {
|
|
|
20
18
|
return <DrawCardTable {...args} />;
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
function TeamDrawCardTableTemplate(args: DrawCardTableProps) {
|
|
24
|
-
return <TeamDrawCardTable {...args} />;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
21
|
const headerRows = [
|
|
28
22
|
{ name: 'Round 1' },
|
|
29
23
|
{ name: 'Quarterfinal' },
|
|
@@ -56,22 +50,6 @@ const tableRows = [
|
|
|
56
50
|
],
|
|
57
51
|
];
|
|
58
52
|
|
|
59
|
-
const teamTableRows = [
|
|
60
|
-
[
|
|
61
|
-
<TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
62
|
-
<TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
63
|
-
<TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
64
|
-
<TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
65
|
-
],
|
|
66
|
-
[
|
|
67
|
-
<TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
68
|
-
<TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
69
|
-
],
|
|
70
|
-
[
|
|
71
|
-
<TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
|
|
72
|
-
],
|
|
73
|
-
];
|
|
74
|
-
|
|
75
53
|
// Stories
|
|
76
54
|
export const DrawTable = DrawCardTableTemplate.bind({});
|
|
77
55
|
DrawTable.args = {
|
|
@@ -79,19 +57,6 @@ DrawTable.args = {
|
|
|
79
57
|
tableRows,
|
|
80
58
|
};
|
|
81
59
|
|
|
82
|
-
export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
|
|
83
|
-
TeamDrawTable.args = {
|
|
84
|
-
headerRows,
|
|
85
|
-
tableRows: teamTableRows,
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
|
|
89
|
-
MobileTeamDrawTable.args = {
|
|
90
|
-
headerRows,
|
|
91
|
-
tableRows: teamTableRows,
|
|
92
|
-
isMobile: true
|
|
93
|
-
};
|
|
94
|
-
|
|
95
60
|
export const SortableTable = DrawCardTableTemplate.bind({});
|
|
96
61
|
SortableTable.args = {
|
|
97
62
|
headCells: MOCK_HEAD_CELLS,
|
|
@@ -107,24 +107,3 @@ export const SAMPLE_CARD_DATA = {
|
|
|
107
107
|
points: 4,
|
|
108
108
|
}
|
|
109
109
|
};
|
|
110
|
-
|
|
111
|
-
export const SAMPLE_TEAM_PAGE_CARD_DATA = {
|
|
112
|
-
dateLabel: 'Dec 20',
|
|
113
|
-
timeLabel: '9:00pm',
|
|
114
|
-
locationLabel: 'Taube Tennis Center',
|
|
115
|
-
matchInfo: 'Round 1, Match 2',
|
|
116
|
-
isPosition1Winner: true,
|
|
117
|
-
isPosition2Winner: false,
|
|
118
|
-
position1Team: {
|
|
119
|
-
name: 'Apples',
|
|
120
|
-
points: 10,
|
|
121
|
-
href: 'https://www.reddit.com',
|
|
122
|
-
record: 2
|
|
123
|
-
},
|
|
124
|
-
position2Team: {
|
|
125
|
-
name: 'Pears',
|
|
126
|
-
points: 4,
|
|
127
|
-
href: 'https://www.reddit.com',
|
|
128
|
-
record: 2
|
|
129
|
-
}
|
|
130
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Box from '@mui/material/Box';
|
|
3
|
-
const arrowStyles = {
|
|
4
|
-
borderTop: '10px solid transparent',
|
|
5
|
-
borderBottom: '10px solid transparent',
|
|
6
|
-
borderLeft: '10px solid white',
|
|
7
|
-
height: 0,
|
|
8
|
-
width: 0
|
|
9
|
-
};
|
|
10
|
-
const rectangleStyles = {
|
|
11
|
-
background: 'white',
|
|
12
|
-
height: 20,
|
|
13
|
-
width: 3
|
|
14
|
-
};
|
|
15
|
-
const blackArrowStyles = {
|
|
16
|
-
borderTop: '8px solid transparent',
|
|
17
|
-
borderBottom: '8px solid transparent',
|
|
18
|
-
borderLeft: '8px solid black',
|
|
19
|
-
height: 0,
|
|
20
|
-
width: 0
|
|
21
|
-
};
|
|
22
|
-
const blackRectangleStyles = {
|
|
23
|
-
background: 'black',
|
|
24
|
-
height: 16,
|
|
25
|
-
width: 3
|
|
26
|
-
};
|
|
27
|
-
export default function WinnerIndicatorIcon({ sx, isBlack }) {
|
|
28
|
-
return (React.createElement(Box, { sx: sx, display: "flex" },
|
|
29
|
-
React.createElement(Box, { style: isBlack ? blackRectangleStyles : rectangleStyles }),
|
|
30
|
-
React.createElement(Box, { style: isBlack ? blackArrowStyles : arrowStyles })));
|
|
31
|
-
}
|
|
32
|
-
//# sourceMappingURL=WinnerIndicatorIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WinnerIndicatorIcon.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/WinnerIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAGpC,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,wBAAwB;IACnC,YAAY,EAAE,wBAAwB;IACtC,UAAU,EAAE,kBAAkB;IAC9B,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AACF,MAAM,eAAe,GAAG;IACtB,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,SAAS,EAAE,uBAAuB;IAClC,YAAY,EAAE,uBAAuB;IACrC,UAAU,EAAE,iBAAiB;IAC7B,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,oBAAoB,GAAG;IAC3B,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,EAAE,EAAE,OAAO,EAA4B;IACnF,OAAO,CACH,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM;QACvB,oBAAC,GAAG,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,eAAe,GAAI;QAChE,oBAAC,GAAG,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,GAAI,CACtD,CACT,CAAC;AACJ,CAAC"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TeamDrawCardProps } from "./sharedTypes";
|
|
3
|
-
export default function TeamDrawCard({ dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team, ...props }: TeamDrawCardProps): JSX.Element;
|
|
@@ -1,94 +0,0 @@
|
|
|
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 { styled } from '@mui/material/styles';
|
|
15
|
-
import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
|
|
16
|
-
import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
|
|
17
|
-
import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
|
|
18
|
-
const StyledCard = styled(Box)({
|
|
19
|
-
display: 'flex',
|
|
20
|
-
flexDirection: 'column',
|
|
21
|
-
borderRadius: '4px',
|
|
22
|
-
padding: '16px 24px',
|
|
23
|
-
width: '100%',
|
|
24
|
-
height: '100px',
|
|
25
|
-
backgroundColor: 'var(--white)',
|
|
26
|
-
border: '1px solid var(--cool-grey-600)',
|
|
27
|
-
marginLeft: '25px',
|
|
28
|
-
marginRight: '25px',
|
|
29
|
-
position: 'relative'
|
|
30
|
-
});
|
|
31
|
-
const BottomGrid = styled(Box)({
|
|
32
|
-
display: 'flex',
|
|
33
|
-
alignItems: 'center',
|
|
34
|
-
justifyContent: 'space-between',
|
|
35
|
-
paddingTop: '8px',
|
|
36
|
-
});
|
|
37
|
-
export default function TeamDrawCard(_a) {
|
|
38
|
-
var { dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team } = _a, props = __rest(_a, ["dateLabel", "locationLabel", "timeLabel", "matchInfo", "isPosition1Winner", "isPosition2Winner", "isScorelessMatch", "position1Team", "position2Team"]);
|
|
39
|
-
const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
|
|
40
|
-
const { SECONDARY } = CATEGORY_ENUM;
|
|
41
|
-
return (React.createElement(StyledCard, Object.assign({ className: "team-draw-card" }, props),
|
|
42
|
-
React.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 0.5 },
|
|
43
|
-
isPosition1Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 20 } }),
|
|
44
|
-
React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
|
|
45
|
-
React.createElement(SquareAvatarWithName, { name: position1Team === null || position1Team === void 0 ? void 0 : position1Team.name, fontSize: isPosition1Winner ? MediumMedium : MediumBook, href: position1Team.href, isBye: !(position1Team === null || position1Team === void 0 ? void 0 : position1Team.name) }),
|
|
46
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
|
|
47
|
-
"(", position1Team === null || position1Team === void 0 ? void 0 :
|
|
48
|
-
position1Team.record,
|
|
49
|
-
")")),
|
|
50
|
-
React.createElement(Typography, { category: SECONDARY, size: isPosition1Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
|
|
51
|
-
React.createElement(Box, { display: "flex", justifyContent: "space-between" },
|
|
52
|
-
isPosition2Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 50 } }),
|
|
53
|
-
React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
|
|
54
|
-
React.createElement(SquareAvatarWithName, { name: position2Team === null || position2Team === void 0 ? void 0 : position2Team.name, fontSize: isPosition2Winner ? MediumMedium : MediumBook, href: position2Team.href, isBye: !(position2Team === null || position2Team === void 0 ? void 0 : position2Team.name) }),
|
|
55
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
|
|
56
|
-
"(", position2Team === null || position2Team === void 0 ? void 0 :
|
|
57
|
-
position2Team.record,
|
|
58
|
-
")")),
|
|
59
|
-
React.createElement(Typography, { category: SECONDARY, size: isPosition2Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)),
|
|
60
|
-
React.createElement(BottomGrid, null,
|
|
61
|
-
React.createElement(Box, null,
|
|
62
|
-
React.createElement(Box, { display: "flex" },
|
|
63
|
-
React.createElement(Typography, { style: {
|
|
64
|
-
overflow: 'hidden',
|
|
65
|
-
textOverflow: 'ellipsis',
|
|
66
|
-
display: '-webkit-box',
|
|
67
|
-
WebkitBoxOrient: 'vertical',
|
|
68
|
-
WebkitLineClamp: 1,
|
|
69
|
-
}, category: SECONDARY, size: XSmallBook }, dateLabel),
|
|
70
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
|
|
71
|
-
React.createElement(Typography, { style: {
|
|
72
|
-
overflow: 'hidden',
|
|
73
|
-
textOverflow: 'ellipsis',
|
|
74
|
-
display: '-webkit-box',
|
|
75
|
-
WebkitBoxOrient: 'vertical',
|
|
76
|
-
WebkitLineClamp: 1,
|
|
77
|
-
}, category: SECONDARY, size: XSmallBook }, timeLabel),
|
|
78
|
-
React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
|
|
79
|
-
React.createElement(Typography, { style: {
|
|
80
|
-
overflow: 'hidden',
|
|
81
|
-
textOverflow: 'ellipsis',
|
|
82
|
-
display: '-webkit-box',
|
|
83
|
-
WebkitBoxOrient: 'vertical',
|
|
84
|
-
WebkitLineClamp: 1,
|
|
85
|
-
}, category: SECONDARY, size: XSmallBook }, matchInfo)),
|
|
86
|
-
React.createElement(Typography, { style: {
|
|
87
|
-
overflow: 'hidden',
|
|
88
|
-
textOverflow: 'ellipsis',
|
|
89
|
-
display: '-webkit-box',
|
|
90
|
-
WebkitBoxOrient: 'vertical',
|
|
91
|
-
WebkitLineClamp: 1,
|
|
92
|
-
}, category: SECONDARY, size: XSmallBook }, locationLabel)))));
|
|
93
|
-
}
|
|
94
|
-
//# sourceMappingURL=TeamDrawCard.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,95 +0,0 @@
|
|
|
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 Button from '@mui/material/Button';
|
|
15
|
-
import { styled } from '@mui/material/styles';
|
|
16
|
-
import Grid from '@mui/material/Grid';
|
|
17
|
-
import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
|
|
18
|
-
import ArrowBackIosOutlinedIcon from '@mui/icons-material/ArrowBackIosOutlined';
|
|
19
|
-
import Typography from '../../atoms/Typography/Typography';
|
|
20
|
-
const StyledHeader = styled(Grid)({
|
|
21
|
-
alignItems: 'center',
|
|
22
|
-
justifyContent: 'center',
|
|
23
|
-
display: 'flex',
|
|
24
|
-
});
|
|
25
|
-
const StyledGrid = styled(Grid)({
|
|
26
|
-
'&:nth-last-child(-n+2) .team-draw-card': {
|
|
27
|
-
'&:before': {
|
|
28
|
-
position: 'absolute',
|
|
29
|
-
content: '""',
|
|
30
|
-
width: '25px',
|
|
31
|
-
height: '1px',
|
|
32
|
-
left: 0,
|
|
33
|
-
top: '50%',
|
|
34
|
-
backgroundColor: 'var(--cool-grey-600)',
|
|
35
|
-
transform: 'translateX(-100%)',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
'&:nth-child(-n+2) .team-draw-card': {
|
|
39
|
-
'&:after': {
|
|
40
|
-
position: 'absolute',
|
|
41
|
-
content: '""',
|
|
42
|
-
width: '25px',
|
|
43
|
-
height: '1px',
|
|
44
|
-
right: 0,
|
|
45
|
-
top: '50%',
|
|
46
|
-
backgroundColor: 'var(--cool-grey-600)',
|
|
47
|
-
transform: 'translateX(100%)',
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
});
|
|
51
|
-
const GridSections = styled(Box)({
|
|
52
|
-
display: 'flex',
|
|
53
|
-
alignItems: 'center',
|
|
54
|
-
paddingTop: '8px',
|
|
55
|
-
paddingBottom: '8px',
|
|
56
|
-
});
|
|
57
|
-
const TableMobileSection = styled(Grid) `
|
|
58
|
-
flex-direction: column;
|
|
59
|
-
`;
|
|
60
|
-
export default function TeamDrawCardTable(_a) {
|
|
61
|
-
var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
|
|
62
|
-
const [activeStep, setActiveStep] = React.useState(0);
|
|
63
|
-
const handleNext = () => {
|
|
64
|
-
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
|
65
|
-
};
|
|
66
|
-
const handleBack = () => {
|
|
67
|
-
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
68
|
-
};
|
|
69
|
-
if (!headerRows || !tableRows)
|
|
70
|
-
return null;
|
|
71
|
-
const totalColumns = Math.floor(12 / headerRows.length);
|
|
72
|
-
const formatTableRows = tableRows.map((row, index) => {
|
|
73
|
-
if (index > 2)
|
|
74
|
-
return; // Table can only support 3 columns
|
|
75
|
-
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
76
|
-
const sectionAmount = tableRows[index].length;
|
|
77
|
-
return (React.createElement(StyledGrid, { key: index, xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { key: idx, sx: { height: rowSectionsHeight } }, row[idx])))));
|
|
78
|
-
});
|
|
79
|
-
const formatDesktopRows = (React.createElement(React.Fragment, null,
|
|
80
|
-
React.createElement(Grid, { container: true, sx: { height: '60px' } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
|
|
81
|
-
React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
|
|
82
|
-
React.createElement(Grid, { container: true }, formatTableRows)));
|
|
83
|
-
const formatMobileRows = (React.createElement(Box, null,
|
|
84
|
-
React.createElement(Grid, { container: true, justifyContent: "space-between" },
|
|
85
|
-
React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1, alignSelf: 'flex-start' } },
|
|
86
|
-
React.createElement(ArrowBackIosOutlinedIcon, null)),
|
|
87
|
-
React.createElement(StyledHeader, { xs: totalColumns },
|
|
88
|
-
React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, headerRows[activeStep].name)),
|
|
89
|
-
React.createElement(Button, { onClick: handleNext, disabled: activeStep === tableRows.length - 1 },
|
|
90
|
-
React.createElement(ArrowForwardIosOutlinedIcon, null))),
|
|
91
|
-
React.createElement(TableMobileSection, { container: true },
|
|
92
|
-
React.createElement(GridSections, { sx: { display: 'flex', flexDirection: 'column', gap: '10px' } }, tableRows[activeStep]))));
|
|
93
|
-
return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? formatMobileRows : formatDesktopRows));
|
|
94
|
-
}
|
|
95
|
-
//# sourceMappingURL=TeamDrawCardTable.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Box from '@mui/material/Box';
|
|
3
|
-
import { WinnerIndicatorIconProps } from './sharedTypes';
|
|
4
|
-
|
|
5
|
-
const arrowStyles = {
|
|
6
|
-
borderTop: '10px solid transparent',
|
|
7
|
-
borderBottom: '10px solid transparent',
|
|
8
|
-
borderLeft: '10px solid white',
|
|
9
|
-
height: 0,
|
|
10
|
-
width: 0
|
|
11
|
-
};
|
|
12
|
-
const rectangleStyles = {
|
|
13
|
-
background: 'white',
|
|
14
|
-
height: 20,
|
|
15
|
-
width: 3
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const blackArrowStyles = {
|
|
19
|
-
borderTop: '8px solid transparent',
|
|
20
|
-
borderBottom: '8px solid transparent',
|
|
21
|
-
borderLeft: '8px solid black',
|
|
22
|
-
height: 0,
|
|
23
|
-
width: 0
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const blackRectangleStyles = {
|
|
27
|
-
background: 'black',
|
|
28
|
-
height: 16,
|
|
29
|
-
width: 3
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps) {
|
|
33
|
-
return (
|
|
34
|
-
<Box sx={sx} display="flex">
|
|
35
|
-
<Box style={isBlack ? blackRectangleStyles : rectangleStyles} />
|
|
36
|
-
<Box style={isBlack ? blackArrowStyles : arrowStyles} />
|
|
37
|
-
</Box>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Box from '@mui/material/Box';
|
|
3
|
-
import { styled } from '@mui/material/styles';
|
|
4
|
-
import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
|
|
5
|
-
import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
|
|
6
|
-
import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
|
|
7
|
-
import { TeamDrawCardProps } from "./sharedTypes";
|
|
8
|
-
|
|
9
|
-
const StyledCard = styled(Box)({
|
|
10
|
-
display: 'flex',
|
|
11
|
-
flexDirection: 'column',
|
|
12
|
-
borderRadius: '4px',
|
|
13
|
-
padding: '16px 24px',
|
|
14
|
-
width: '100%',
|
|
15
|
-
height: '100px',
|
|
16
|
-
backgroundColor: 'var(--white)',
|
|
17
|
-
border: '1px solid var(--cool-grey-600)',
|
|
18
|
-
marginLeft: '25px',
|
|
19
|
-
marginRight: '25px',
|
|
20
|
-
position: 'relative'
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
const BottomGrid = styled(Box)({
|
|
24
|
-
display: 'flex',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
justifyContent: 'space-between',
|
|
27
|
-
paddingTop: '8px',
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
export default function TeamDrawCard({
|
|
31
|
-
dateLabel, locationLabel, timeLabel, matchInfo,
|
|
32
|
-
isPosition1Winner, isPosition2Winner,
|
|
33
|
-
isScorelessMatch, position1Team, position2Team, ...props
|
|
34
|
-
}: TeamDrawCardProps) {
|
|
35
|
-
const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
|
|
36
|
-
const { SECONDARY } = CATEGORY_ENUM;
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<StyledCard className="team-draw-card" {...props}>
|
|
40
|
-
<Box display="flex" justifyContent="space-between" mb={0.5}>
|
|
41
|
-
{isPosition1Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 20 }} />}
|
|
42
|
-
<Box display="flex" alignItems="center" gap={0.5}>
|
|
43
|
-
<SquareAvatarWithName
|
|
44
|
-
name={position1Team?.name}
|
|
45
|
-
fontSize={isPosition1Winner ? MediumMedium : MediumBook}
|
|
46
|
-
href={position1Team.href}
|
|
47
|
-
isBye={!position1Team?.name}
|
|
48
|
-
/>
|
|
49
|
-
<Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
|
|
50
|
-
(
|
|
51
|
-
{position1Team?.record}
|
|
52
|
-
)
|
|
53
|
-
</Typography>
|
|
54
|
-
</Box>
|
|
55
|
-
<Typography category={SECONDARY} size={isPosition1Winner ? MediumMedium : MediumBook}>
|
|
56
|
-
{isScorelessMatch ? '-' : position1Team?.points}
|
|
57
|
-
</Typography>
|
|
58
|
-
</Box>
|
|
59
|
-
<Box display="flex" justifyContent="space-between">
|
|
60
|
-
{isPosition2Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 50 }} />}
|
|
61
|
-
<Box display="flex" alignItems="center" gap={0.5}>
|
|
62
|
-
<SquareAvatarWithName
|
|
63
|
-
name={position2Team?.name}
|
|
64
|
-
fontSize={isPosition2Winner ? MediumMedium : MediumBook}
|
|
65
|
-
href={position2Team.href}
|
|
66
|
-
isBye={!position2Team?.name}
|
|
67
|
-
/>
|
|
68
|
-
<Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
|
|
69
|
-
(
|
|
70
|
-
{position2Team?.record}
|
|
71
|
-
)
|
|
72
|
-
</Typography>
|
|
73
|
-
</Box>
|
|
74
|
-
<Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
|
|
75
|
-
{isScorelessMatch ? '-' : position2Team?.points}
|
|
76
|
-
</Typography>
|
|
77
|
-
</Box>
|
|
78
|
-
<BottomGrid>
|
|
79
|
-
<Box>
|
|
80
|
-
<Box display="flex">
|
|
81
|
-
<Typography
|
|
82
|
-
style={{
|
|
83
|
-
overflow: 'hidden',
|
|
84
|
-
textOverflow: 'ellipsis',
|
|
85
|
-
display: '-webkit-box',
|
|
86
|
-
WebkitBoxOrient: 'vertical',
|
|
87
|
-
WebkitLineClamp: 1,
|
|
88
|
-
}}
|
|
89
|
-
category={SECONDARY}
|
|
90
|
-
size={XSmallBook}
|
|
91
|
-
>
|
|
92
|
-
{dateLabel}
|
|
93
|
-
</Typography>
|
|
94
|
-
<Typography
|
|
95
|
-
category={SECONDARY}
|
|
96
|
-
size={XSmallBook}
|
|
97
|
-
pl={0.5}
|
|
98
|
-
pr={0.5}
|
|
99
|
-
>
|
|
100
|
-
•
|
|
101
|
-
</Typography>
|
|
102
|
-
<Typography
|
|
103
|
-
style={{
|
|
104
|
-
overflow: 'hidden',
|
|
105
|
-
textOverflow: 'ellipsis',
|
|
106
|
-
display: '-webkit-box',
|
|
107
|
-
WebkitBoxOrient: 'vertical',
|
|
108
|
-
WebkitLineClamp: 1,
|
|
109
|
-
}}
|
|
110
|
-
category={SECONDARY}
|
|
111
|
-
size={XSmallBook}
|
|
112
|
-
>
|
|
113
|
-
{timeLabel}
|
|
114
|
-
</Typography>
|
|
115
|
-
<Typography
|
|
116
|
-
category={SECONDARY}
|
|
117
|
-
size={XSmallBook}
|
|
118
|
-
pl={0.5}
|
|
119
|
-
pr={0.5}
|
|
120
|
-
>
|
|
121
|
-
•
|
|
122
|
-
</Typography>
|
|
123
|
-
<Typography
|
|
124
|
-
style={{
|
|
125
|
-
overflow: 'hidden',
|
|
126
|
-
textOverflow: 'ellipsis',
|
|
127
|
-
display: '-webkit-box',
|
|
128
|
-
WebkitBoxOrient: 'vertical',
|
|
129
|
-
WebkitLineClamp: 1,
|
|
130
|
-
}}
|
|
131
|
-
category={SECONDARY}
|
|
132
|
-
size={XSmallBook}
|
|
133
|
-
>
|
|
134
|
-
{matchInfo}
|
|
135
|
-
</Typography>
|
|
136
|
-
</Box>
|
|
137
|
-
<Typography
|
|
138
|
-
style={{
|
|
139
|
-
overflow: 'hidden',
|
|
140
|
-
textOverflow: 'ellipsis',
|
|
141
|
-
display: '-webkit-box',
|
|
142
|
-
WebkitBoxOrient: 'vertical',
|
|
143
|
-
WebkitLineClamp: 1,
|
|
144
|
-
}}
|
|
145
|
-
category={SECONDARY}
|
|
146
|
-
size={XSmallBook}
|
|
147
|
-
>
|
|
148
|
-
{locationLabel}
|
|
149
|
-
</Typography>
|
|
150
|
-
</Box>
|
|
151
|
-
</BottomGrid>
|
|
152
|
-
</StyledCard>
|
|
153
|
-
);
|
|
154
|
-
}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import React 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 ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutlined';
|
|
7
|
-
import ArrowBackIosOutlinedIcon from '@mui/icons-material/ArrowBackIosOutlined';
|
|
8
|
-
import Typography from '../../atoms/Typography/Typography';
|
|
9
|
-
import { DrawCardTableProps } from './sharedTypes';
|
|
10
|
-
|
|
11
|
-
const StyledHeader = styled(Grid)({
|
|
12
|
-
alignItems: 'center',
|
|
13
|
-
justifyContent: 'center',
|
|
14
|
-
display: 'flex',
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
const StyledGrid = styled(Grid)({
|
|
18
|
-
'&:nth-last-child(-n+2) .team-draw-card': {
|
|
19
|
-
'&:before': {
|
|
20
|
-
position: 'absolute',
|
|
21
|
-
content: '""',
|
|
22
|
-
width: '25px',
|
|
23
|
-
height: '1px',
|
|
24
|
-
left: 0,
|
|
25
|
-
top: '50%',
|
|
26
|
-
backgroundColor: 'var(--cool-grey-600)',
|
|
27
|
-
transform: 'translateX(-100%)',
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
'&:nth-child(-n+2) .team-draw-card': {
|
|
31
|
-
'&:after': {
|
|
32
|
-
position: 'absolute',
|
|
33
|
-
content: '""',
|
|
34
|
-
width: '25px',
|
|
35
|
-
height: '1px',
|
|
36
|
-
right: 0,
|
|
37
|
-
top: '50%',
|
|
38
|
-
backgroundColor: 'var(--cool-grey-600)',
|
|
39
|
-
transform: 'translateX(100%)',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
const GridSections = styled(Box)({
|
|
45
|
-
display: 'flex',
|
|
46
|
-
alignItems: 'center',
|
|
47
|
-
paddingTop: '8px',
|
|
48
|
-
paddingBottom: '8px',
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
const TableMobileSection = styled(Grid)`
|
|
52
|
-
flex-direction: column;
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
export default function TeamDrawCardTable({
|
|
56
|
-
headerRows,
|
|
57
|
-
tableRows,
|
|
58
|
-
isMobile,
|
|
59
|
-
...props
|
|
60
|
-
}: DrawCardTableProps) {
|
|
61
|
-
const [activeStep, setActiveStep] = React.useState(0);
|
|
62
|
-
|
|
63
|
-
const handleNext = () => {
|
|
64
|
-
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const handleBack = () => {
|
|
68
|
-
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
if (!headerRows || !tableRows) return null;
|
|
72
|
-
|
|
73
|
-
const totalColumns = Math.floor(12 / headerRows.length);
|
|
74
|
-
|
|
75
|
-
const formatTableRows = tableRows.map((row, index) => {
|
|
76
|
-
if (index > 2) return; // Table can only support 3 columns
|
|
77
|
-
const rowSectionsHeight = `${100 / tableRows[index].length}%`;
|
|
78
|
-
const sectionAmount = tableRows[index].length;
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<StyledGrid key={index} xs={totalColumns}>
|
|
82
|
-
{[...Array(sectionAmount)].map((section, idx) => (
|
|
83
|
-
<GridSections key={idx} sx={{ height: rowSectionsHeight }}>
|
|
84
|
-
{row[idx]}
|
|
85
|
-
</GridSections>
|
|
86
|
-
))}
|
|
87
|
-
</StyledGrid>
|
|
88
|
-
);
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
const formatDesktopRows = (
|
|
92
|
-
<>
|
|
93
|
-
<Grid container sx={{ height: '60px' }}>
|
|
94
|
-
{headerRows.map((row) => (
|
|
95
|
-
<StyledHeader key={row.name} xs={totalColumns}>
|
|
96
|
-
<Typography category="secondary" size="small-medium-cap">{row.name}</Typography>
|
|
97
|
-
</StyledHeader>
|
|
98
|
-
))}
|
|
99
|
-
</Grid>
|
|
100
|
-
<Grid container>
|
|
101
|
-
{formatTableRows}
|
|
102
|
-
</Grid>
|
|
103
|
-
</>
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
const formatMobileRows = (
|
|
107
|
-
<Box>
|
|
108
|
-
<Grid container justifyContent="space-between">
|
|
109
|
-
<Button
|
|
110
|
-
color="inherit"
|
|
111
|
-
disabled={activeStep === 0}
|
|
112
|
-
onClick={handleBack}
|
|
113
|
-
sx={{ mr: 1, alignSelf: 'flex-start' }}
|
|
114
|
-
>
|
|
115
|
-
<ArrowBackIosOutlinedIcon />
|
|
116
|
-
</Button>
|
|
117
|
-
<StyledHeader xs={totalColumns}>
|
|
118
|
-
<Typography category="secondary" size="small-medium-cap">{headerRows[activeStep].name}</Typography>
|
|
119
|
-
</StyledHeader>
|
|
120
|
-
<Button onClick={handleNext} disabled={activeStep === tableRows.length - 1}>
|
|
121
|
-
<ArrowForwardIosOutlinedIcon />
|
|
122
|
-
</Button>
|
|
123
|
-
</Grid>
|
|
124
|
-
<TableMobileSection container>
|
|
125
|
-
<GridSections sx={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
|
126
|
-
{tableRows[activeStep]}
|
|
127
|
-
</GridSections>
|
|
128
|
-
</TableMobileSection>
|
|
129
|
-
</Box>
|
|
130
|
-
);
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
|
|
134
|
-
{isMobile ? formatMobileRows : formatDesktopRows}
|
|
135
|
-
</Box>
|
|
136
|
-
);
|
|
137
|
-
}
|