@universal-tennis/ui-shared 0.1.57 → 0.1.58

package/dist/components.d.ts

@@ -17,11 +17,14 @@ export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
 export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
 export { default as VisibilityIcon } from "./stories/atoms/Icons/VisibilityIcon";
 export { default as VisibilityOffIcon } from "./stories/atoms/Icons/VisibilityOffIcon";
+export { default as WinnerIndicatorIcon } from "./stories/atoms/Icons/WinnerIndicatorIcon";
 export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
 export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
 export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
 export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
 export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";
+export { default as TeamDrawCard } from "./stories/molecules/Cards/TeamDrawCard";
 export { default as DrawCardTable } from "./stories/organisms/Tables/DrawCardTable";
 export { default as FullPageModal } from "./stories/organisms/Modals/FullPageModal";
 export { default as SortableTable } from "./stories/organisms/Tables/SortableTable";
+export { default as TeamDrawCardTable } from "./stories/organisms/Tables/TeamDrawCardTable";

package/dist/components.js

@@ -20,14 +20,17 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
 export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
 export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
 export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
+export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
 export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
 // ORGANISMS 
 export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
 export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
 export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -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;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"}
+{"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;AACvF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAE3F,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;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEjF,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;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAC"}

package/dist/stories/atoms/Icons/Icons.stories.d.ts

@@ -18,3 +18,4 @@ export declare const Session: any;
 export declare const Swap: any;
 export declare const Visibility: any;
 export declare const VisibilityOff: any;
+export declare const WinnerIndicator: any;

package/dist/stories/atoms/Icons/Icons.stories.js

@@ -15,6 +15,7 @@ import SessionIcon from './SessionIcon';
 import SwapIcon from './SwapIcon';
 import VisibilityIcon from './VisibilityIcon';
 import VisibilityOffIcon from './VisibilityOffIcon';
+import WinnerIndicatorIcon from './WinnerIndicatorIcon';
 // Default
 export default {
     title: 'Atoms/Icons',
@@ -68,6 +69,9 @@ function VisibilityIconTemplate(args) {
 function VisibilityOffIconTemplate(args) {
     return React.createElement(VisibilityOffIcon, Object.assign({}, args));
 }
+function WinnerIndicatorIconTemplate(args) {
+    return React.createElement(WinnerIndicatorIcon, Object.assign({}, args));
+}
 // Stories
 export const Add = AddIconTemplate.bind({});
 Add.args = {
@@ -149,4 +153,8 @@ VisibilityOff.args = {
     size: 150,
     color: 'black'
 };
+export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
+WinnerIndicator.args = {
+    isBlack: true
+};
 //# sourceMappingURL=Icons.stories.js.map

package/dist/stories/atoms/Icons/Icons.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Icons/Icons.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WinnerIndicatorIconProps } from './sharedTypes';
+export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps): JSX.Element;

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+const arrowStyles = {
+    borderTop: '10px solid transparent',
+    borderBottom: '10px solid transparent',
+    borderLeft: '10px solid white',
+    height: 0,
+    width: 0
+};
+const rectangleStyles = {
+    background: 'white',
+    height: 20,
+    width: 3
+};
+const blackArrowStyles = {
+    borderTop: '8px solid transparent',
+    borderBottom: '8px solid transparent',
+    borderLeft: '8px solid black',
+    height: 0,
+    width: 0
+};
+const blackRectangleStyles = {
+    background: 'black',
+    height: 16,
+    width: 3
+};
+export default function WinnerIndicatorIcon({ sx, isBlack }) {
+    return (React.createElement(Box, { sx: sx, display: "flex" },
+        React.createElement(Box, { style: isBlack ? blackRectangleStyles : rectangleStyles }),
+        React.createElement(Box, { style: isBlack ? blackArrowStyles : arrowStyles })));
+}
+//# sourceMappingURL=WinnerIndicatorIcon.js.map

package/dist/stories/atoms/Icons/WinnerIndicatorIcon.js.map

@@ -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"}

package/dist/stories/atoms/Icons/sharedTypes.d.ts

@@ -1,4 +1,9 @@
+import { SxProps } from '@mui/material';
 export interface IconProps {
     size: number;
     color: string;
 }
+export interface WinnerIndicatorIconProps {
+    sx?: SxProps;
+    isBlack?: boolean;
+}

package/dist/stories/molecules/Cards/TeamDrawCard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TeamDrawCardProps } from "./sharedTypes";
+export default function TeamDrawCard({ dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team, ...props }: TeamDrawCardProps): JSX.Element;

package/dist/stories/molecules/Cards/TeamDrawCard.js

@@ -0,0 +1,96 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
+import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from 'stories/utils/constants';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
+const StyledCard = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px 24px',
+    width: '100%',
+    height: '100px',
+    backgroundColor: 'var(--white)',
+    border: '1px solid var(--cool-grey-600)',
+    marginLeft: `${teamDrawCardSideMargin}`,
+    marginRight: `${teamDrawCardSideMargin}`,
+    position: 'relative',
+    marginBottom: `${teamDrawCardBottomMargin}`
+});
+const BottomGrid = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: '8px',
+});
+export default function TeamDrawCard(_a) {
+    var { dateLabel, locationLabel, timeLabel, matchInfo, isPosition1Winner, isPosition2Winner, isScorelessMatch, position1Team, position2Team } = _a, props = __rest(_a, ["dateLabel", "locationLabel", "timeLabel", "matchInfo", "isPosition1Winner", "isPosition2Winner", "isScorelessMatch", "position1Team", "position2Team"]);
+    const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
+    const { SECONDARY } = CATEGORY_ENUM;
+    return (React.createElement(StyledCard, Object.assign({ className: "team-draw-card" }, props),
+        React.createElement(Box, { display: "flex", justifyContent: "space-between", mb: 0.5 },
+            isPosition1Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 20 } }),
+            React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
+                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) }),
+                React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
+                    "(", position1Team === null || position1Team === void 0 ? void 0 :
+                    position1Team.record,
+                    ")")),
+            React.createElement(Typography, { category: SECONDARY, size: isPosition1Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position1Team === null || position1Team === void 0 ? void 0 : position1Team.points)),
+        React.createElement(Box, { display: "flex", justifyContent: "space-between" },
+            isPosition2Winner && React.createElement(WinnerIndicatorIcon, { isBlack: true, sx: { position: "absolute", left: 0, top: 50 } }),
+            React.createElement(Box, { display: "flex", alignItems: "center", gap: 0.5 },
+                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) }),
+                React.createElement(Typography, { category: SECONDARY, size: XSmallBook, color: "var(--cool-grey-600)" },
+                    "(", position2Team === null || position2Team === void 0 ? void 0 :
+                    position2Team.record,
+                    ")")),
+            React.createElement(Typography, { category: SECONDARY, size: isPosition2Winner ? MediumMedium : MediumBook }, isScorelessMatch ? '-' : position2Team === null || position2Team === void 0 ? void 0 : position2Team.points)),
+        React.createElement(BottomGrid, null,
+            React.createElement(Box, null,
+                React.createElement(Box, { display: "flex" },
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, dateLabel),
+                    React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, timeLabel),
+                    React.createElement(Typography, { category: SECONDARY, size: XSmallBook, pl: 0.5, pr: 0.5 }, "\u2022"),
+                    React.createElement(Typography, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                        }, category: SECONDARY, size: XSmallBook }, matchInfo)),
+                React.createElement(Typography, { style: {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                    }, category: SECONDARY, size: XSmallBook }, locationLabel)))));
+}
+//# sourceMappingURL=TeamDrawCard.js.map

package/dist/stories/molecules/Cards/TeamDrawCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamDrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamDrawCard.tsx"],"names":[],"mappings":"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"}

package/dist/stories/molecules/Cards/shared.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
-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>> & {
+export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "ref" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "component" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/dist/stories/molecules/Cards/sharedTypes.d.ts

@@ -13,6 +13,8 @@ type OnChangeArgs = {
 type PositionTeam = {
     name: string;
     points: number;
+    href?: string;
+    record?: number;
 };
 export type DrawCardProps = {
     options: Options;
@@ -33,6 +35,17 @@ export type DrawCardProps = {
     onViewClick?: VoidFunction;
     onChange: ({ position, id }: OnChangeArgs) => void;
 };
+export type TeamDrawCardProps = {
+    dateLabel: string;
+    locationLabel: string;
+    timeLabel: string;
+    matchInfo?: string;
+    isPosition1Winner?: boolean;
+    isPosition2Winner?: boolean;
+    isScorelessMatch?: boolean;
+    position1Team: PositionTeam;
+    position2Team: PositionTeam;
+};
 export interface TeamCardProps {
     title: string;
     description: string;

package/dist/stories/organisms/Tables/Tables.stories.d.ts

@@ -3,4 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const DrawTable: any;
+export declare const TeamDrawTable: any;
+export declare const MobileTeamDrawTable: any;
 export declare const SortableTable: any;

package/dist/stories/organisms/Tables/Tables.stories.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
 import DrawCard from '../../molecules/Cards/DrawCard';
 import DrawCardTable from './DrawCardTable';
-import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA } from './mockData';
+import TeamDrawCardTable from './TeamDrawCardTable';
+import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA } from './mockData';
 const onOrderPropertyChange = () => { };
 // Default
 export default {
@@ -11,6 +13,9 @@ export default {
 function DrawCardTableTemplate(args) {
     return React.createElement(DrawCardTable, Object.assign({}, args));
 }
+function TeamDrawCardTableTemplate(args) {
+    return React.createElement(TeamDrawCardTable, Object.assign({}, args));
+}
 const headerRows = [
     { name: 'Round 1' },
     { name: 'Quarterfinal' },
@@ -41,12 +46,38 @@ const tableRows = [
         React.createElement(DrawCard, Object.assign({ emptyLabel: "Select a team" }, SAMPLE_CARD_DATA)),
     ],
 ];
+const teamTableRows = [
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({ isScorelessMatch: true }, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+    [
+        React.createElement(TeamDrawCard, Object.assign({}, SAMPLE_TEAM_PAGE_CARD_DATA)),
+    ],
+];
 // Stories
 export const DrawTable = DrawCardTableTemplate.bind({});
 DrawTable.args = {
     headerRows,
     tableRows,
 };
+export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
+TeamDrawTable.args = {
+    headerRows,
+    tableRows: teamTableRows,
+};
+export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
+MobileTeamDrawTable.args = {
+    headerRows,
+    tableRows: teamTableRows,
+    isMobile: true
+};
 export const SortableTable = DrawCardTableTemplate.bind({});
 SortableTable.args = {
     headCells: MOCK_HEAD_CELLS,

package/dist/stories/organisms/Tables/Tables.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/Tables/TeamDrawCardTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardTableProps } from "./sharedTypes";
+export default function TeamDrawCardTable({ headerRows, tableRows, isMobile, ...props }: DrawCardTableProps): JSX.Element | null;

package/dist/stories/organisms/Tables/TeamDrawCardTable.js

@@ -0,0 +1,126 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Grid from "@mui/material/Grid";
+import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
+import ArrowBackIosOutlinedIcon from "@mui/icons-material/ArrowBackIosOutlined";
+import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "stories/utils/constants";
+import Typography from "../../atoms/Typography/Typography";
+const StyledHeader = styled(Grid)({
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex"
+});
+const StyledGrid = styled(Grid)({
+    position: "relative",
+    "&:nth-of-type(1)": {
+        "&:after": {
+            content: "''",
+            position: "absolute",
+            right: 0,
+            backgroundColor: "var(--cool-grey-600)",
+            height: "25%",
+            width: "1px",
+            top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
+        }
+    },
+    "&:nth-of-type(2)": {
+        "&:before": {
+            content: "''",
+            position: "absolute",
+            left: 0,
+            backgroundColor: "var(--cool-grey-600)",
+            height: "25%",
+            width: "1px",
+            bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
+        },
+        "&:after": {
+            content: "''",
+            position: "absolute",
+            right: 0,
+            backgroundColor: "var(--cool-grey-600)",
+            height: "50%",
+            width: "1px",
+            top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
+        }
+    },
+    "&:nth-last-child(-n+2) .team-draw-card": {
+        "&:before": {
+            position: "absolute",
+            content: '""',
+            width: `${teamDrawCardSideMargin}`,
+            height: "1px",
+            left: 0,
+            top: "50%",
+            backgroundColor: "var(--cool-grey-600)",
+            transform: "translateX(-100%)"
+        }
+    },
+    "&:nth-of-type(-n+2) .team-draw-card": {
+        "&:after": {
+            position: "absolute",
+            content: '""',
+            width: `${teamDrawCardSideMargin}`,
+            height: "1px",
+            right: 0,
+            top: "50%",
+            backgroundColor: "var(--cool-grey-600)",
+            transform: "translateX(100%)"
+        }
+    }
+});
+const GridSections = styled(Box)({
+    display: "flex",
+    alignItems: "center"
+});
+const TableMobileSection = styled(Grid)({
+    flexDirection: "column"
+});
+export default function TeamDrawCardTable(_a) {
+    var { headerRows, tableRows, isMobile } = _a, props = __rest(_a, ["headerRows", "tableRows", "isMobile"]);
+    const [activeStep, setActiveStep] = React.useState(0);
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+    if (!headerRows || !tableRows)
+        return null;
+    const totalColumns = Math.floor(12 / headerRows.length);
+    const formatTableRows = tableRows.map((row, index) => {
+        if (index > 2)
+            return; // Table can only support 3 columns
+        const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+        const sectionAmount = tableRows[index].length;
+        return (React.createElement(StyledGrid, { key: index, xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { key: idx, sx: { height: rowSectionsHeight } }, row[idx])))));
+    });
+    const formatDesktopRows = (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, sx: { height: "60px" } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
+            React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
+        React.createElement(Grid, { container: true }, formatTableRows)));
+    const formatMobileRows = (React.createElement(Box, null,
+        React.createElement(Grid, { container: true, justifyContent: "space-between" },
+            React.createElement(Button, { color: "inherit", disabled: activeStep === 0, onClick: handleBack, sx: { mr: 1, alignSelf: "flex-start" } },
+                React.createElement(ArrowBackIosOutlinedIcon, null)),
+            React.createElement(StyledHeader, { xs: totalColumns },
+                React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, headerRows[activeStep].name)),
+            React.createElement(Button, { onClick: handleNext, disabled: activeStep === tableRows.length - 1 },
+                React.createElement(ArrowForwardIosOutlinedIcon, null))),
+        React.createElement(TableMobileSection, { container: true },
+            React.createElement(GridSections, { sx: { display: "flex", flexDirection: "column", gap: "10px" } }, tableRows[activeStep]))));
+    return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }), isMobile ? formatMobileRows : formatDesktopRows));
+}
+//# sourceMappingURL=TeamDrawCardTable.js.map

package/dist/stories/organisms/Tables/TeamDrawCardTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamDrawCardTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/TeamDrawCardTable.tsx"],"names":[],"mappings":"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"}

package/dist/stories/organisms/Tables/mockData.d.ts

@@ -47,4 +47,24 @@ export declare const SAMPLE_CARD_DATA: {
         points: number;
     };
 };
+export declare const SAMPLE_TEAM_PAGE_CARD_DATA: {
+    dateLabel: string;
+    timeLabel: string;
+    locationLabel: string;
+    matchInfo: string;
+    isPosition1Winner: boolean;
+    isPosition2Winner: boolean;
+    position1Team: {
+        name: string;
+        points: number;
+        href: string;
+        record: number;
+    };
+    position2Team: {
+        name: string;
+        points: number;
+        href: string;
+        record: number;
+    };
+};
 export {};

package/dist/stories/organisms/Tables/mockData.js

@@ -76,4 +76,24 @@ export const SAMPLE_CARD_DATA = {
         points: 4,
     }
 };
+export const SAMPLE_TEAM_PAGE_CARD_DATA = {
+    dateLabel: 'Dec 20',
+    timeLabel: '9:00pm',
+    locationLabel: 'Taube Tennis Center',
+    matchInfo: 'Round 1, Match 2',
+    isPosition1Winner: true,
+    isPosition2Winner: false,
+    position1Team: {
+        name: 'Apples',
+        points: 10,
+        href: 'https://www.reddit.com',
+        record: 2
+    },
+    position2Team: {
+        name: 'Pears',
+        points: 4,
+        href: 'https://www.reddit.com',
+        record: 2
+    }
+};
 //# sourceMappingURL=mockData.js.map

package/dist/stories/organisms/Tables/mockData.js.map

@@ -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"}
+{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"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"}

package/dist/stories/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const teamDrawCardSideMargin = "24px";
+export declare const teamDrawCardBottomMargin = "8px";

package/dist/stories/utils/constants.js

@@ -0,0 +1,3 @@
+export const teamDrawCardSideMargin = '24px';
+export const teamDrawCardBottomMargin = '8px';
+//# sourceMappingURL=constants.js.map

package/dist/stories/utils/constants.js.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",
@@ -8,7 +8,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "5.14.17",
+    "@mui/material": "5.5.3",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "libphonenumber-js": "^1.10.18",

package/src/components.jsx

@@ -22,6 +22,7 @@ export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
 export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
 export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
 export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
+export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
 
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
@@ -29,8 +30,10 @@ export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
 
 // ORGANISMS 
 export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
 export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
 export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable';

package/src/stories/atoms/Icons/Icons.stories.tsx

@@ -16,7 +16,8 @@ import SessionIcon from './SessionIcon';
 import SwapIcon from './SwapIcon';
 import VisibilityIcon from './VisibilityIcon';
 import VisibilityOffIcon from './VisibilityOffIcon';
-import { IconProps } from './sharedTypes';
+import WinnerIndicatorIcon from './WinnerIndicatorIcon';
+import { IconProps, WinnerIndicatorIconProps } from './sharedTypes';
 
 // Default
 export default {
@@ -88,6 +89,10 @@ function VisibilityOffIconTemplate(args: IconProps) {
   return <VisibilityOffIcon {...args} />;  
 }
 
+function WinnerIndicatorIconTemplate(args: WinnerIndicatorIconProps) {
+  return <WinnerIndicatorIcon {...args} />;  
+}
+
 // Stories
 export const Add = AddIconTemplate.bind({});
 Add.args = {
@@ -184,3 +189,8 @@ VisibilityOff.args = {
   size: 150,
   color: 'black'
 };
+
+export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
+WinnerIndicator.args = {
+  isBlack: true
+};

package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { WinnerIndicatorIconProps } from './sharedTypes';
+
+const arrowStyles = {
+  borderTop: '10px solid transparent',
+  borderBottom: '10px solid transparent',
+  borderLeft: '10px solid white',
+  height: 0,
+  width: 0
+};
+const rectangleStyles = {
+  background: 'white',
+  height: 20,
+  width: 3
+};
+
+const blackArrowStyles = {
+  borderTop: '8px solid transparent',
+  borderBottom: '8px solid transparent',
+  borderLeft: '8px solid black',
+  height: 0,
+  width: 0
+};
+
+const blackRectangleStyles = {
+  background: 'black',
+  height: 16,
+  width: 3
+};
+
+export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps) {
+  return (
+      <Box sx={sx} display="flex">
+          <Box style={isBlack ? blackRectangleStyles : rectangleStyles} />
+          <Box style={isBlack ? blackArrowStyles : arrowStyles} />
+      </Box>
+  );
+}

package/src/stories/atoms/Icons/sharedTypes.tsx

@@ -1,4 +1,10 @@
+import { SxProps } from '@mui/material';
+
 export interface IconProps {
     size: number;
     color: string;
   }
+export interface WinnerIndicatorIconProps {
+  sx?: SxProps;
+  isBlack?: boolean;
+}

package/src/stories/molecules/Cards/TeamDrawCard.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import WinnerIndicatorIcon from 'stories/atoms/Icons/WinnerIndicatorIcon';
+import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from 'stories/utils/constants';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import SquareAvatarWithName from '../SquareAvatarWithName/SquareAvatarWithName';
+import { TeamDrawCardProps } from "./sharedTypes";
+
+const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  height: '100px',
+  backgroundColor: 'var(--white)',
+  border: '1px solid var(--cool-grey-600)',
+  marginLeft: `${teamDrawCardSideMargin}`,
+  marginRight: `${teamDrawCardSideMargin}`,
+  position: 'relative',
+  marginBottom: `${teamDrawCardBottomMargin}`
+});
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '8px',
+});
+
+export default function TeamDrawCard({ 
+  dateLabel, locationLabel, timeLabel, matchInfo,
+  isPosition1Winner, isPosition2Winner,
+  isScorelessMatch, position1Team, position2Team, ...props
+}: TeamDrawCardProps) {
+  const { MediumMedium, MediumBook, XSmallBook } = SECONDARY_SIZES_ENUM;
+  const { SECONDARY } = CATEGORY_ENUM;
+
+  return (
+      <StyledCard className="team-draw-card" {...props}>
+          <Box display="flex" justifyContent="space-between" mb={0.5}>
+              {isPosition1Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 20 }} />}
+              <Box display="flex" alignItems="center" gap={0.5}>
+                  <SquareAvatarWithName 
+                      name={position1Team?.name} 
+                      fontSize={isPosition1Winner ? MediumMedium : MediumBook} 
+                      href={position1Team.href}
+                      isBye={!position1Team?.name}
+                  />
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      (
+                      {position1Team?.record}
+                      )
+                  </Typography>
+              </Box>
+              <Typography category={SECONDARY} size={isPosition1Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? '-' : position1Team?.points}
+              </Typography>
+          </Box>
+          <Box display="flex" justifyContent="space-between">
+              {isPosition2Winner && <WinnerIndicatorIcon isBlack sx={{ position: "absolute", left: 0, top: 50 }} />}
+              <Box display="flex" alignItems="center" gap={0.5}>
+                  <SquareAvatarWithName 
+                      name={position2Team?.name} 
+                      fontSize={isPosition2Winner ? MediumMedium : MediumBook} 
+                      href={position2Team.href}
+                      isBye={!position2Team?.name}
+                  />
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      (
+                      {position2Team?.record}
+                      )
+                  </Typography>
+              </Box>
+              <Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? '-' : position2Team?.points}
+              </Typography>
+          </Box>
+          <BottomGrid> 
+              <Box>
+                  <Box display="flex">
+                      <Typography 
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {dateLabel}
+                      </Typography>
+                      <Typography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                          pl={0.5}
+                          pr={0.5}
+                      >
+                          &bull;
+                      </Typography>
+                      <Typography
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {timeLabel}
+                      </Typography>
+                      <Typography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                          pl={0.5}
+                          pr={0.5}
+                      >
+                          &bull;
+                      </Typography>
+                      <Typography
+                          style={{
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 1,
+                          }}
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {matchInfo}
+                      </Typography>
+                  </Box>
+                  <Typography
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 1,
+                      }}
+                      category={SECONDARY}
+                      size={XSmallBook}
+                  >
+                      {locationLabel}
+                  </Typography>
+              </Box>
+          </BottomGrid>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/sharedTypes.ts

@@ -18,6 +18,8 @@ type OnChangeArgs = {
 type PositionTeam = {
   name: string;
   points: number;
+  href?: string;
+  record?: number;
 }
 
 export type DrawCardProps = {
@@ -40,6 +42,18 @@ export type DrawCardProps = {
     onChange: ({ position, id }: OnChangeArgs) => void;
   }
 
+export type TeamDrawCardProps = {
+    dateLabel: string;
+    locationLabel: string;
+    timeLabel: string;
+    matchInfo?: string;
+    isPosition1Winner?: boolean;
+    isPosition2Winner?: boolean;
+    isScorelessMatch?: boolean;
+    position1Team: PositionTeam;
+    position2Team: PositionTeam;
+  }
+
 export interface TeamCardProps {
     title: string; 
     description: string;

package/src/stories/organisms/Tables/Tables.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import TeamDrawCard from 'stories/molecules/Cards/TeamDrawCard';
 import DrawCard from '../../molecules/Cards/DrawCard';
 import DrawCardTable from './DrawCardTable';
+import TeamDrawCardTable from './TeamDrawCardTable';
 import { DrawCardTableProps } from './sharedTypes';
 import {
-  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA 
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA, SAMPLE_TEAM_PAGE_CARD_DATA
 } from './mockData';
 
 const onOrderPropertyChange = () => {};
@@ -18,6 +20,10 @@ function DrawCardTableTemplate(args: DrawCardTableProps) {
   return <DrawCardTable {...args} />;
 }
 
+function TeamDrawCardTableTemplate(args: DrawCardTableProps) {
+  return <TeamDrawCardTable {...args} />;
+}
+
 const headerRows = [
   { name: 'Round 1' },
   { name: 'Quarterfinal' },
@@ -50,6 +56,22 @@ const tableRows = [
   ],
 ];
 
+const teamTableRows = [
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard isScorelessMatch {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+  [      
+      <TeamDrawCard {...SAMPLE_TEAM_PAGE_CARD_DATA} />,
+  ],
+];
+
 // Stories
 export const DrawTable = DrawCardTableTemplate.bind({});
 DrawTable.args = {
@@ -57,6 +79,19 @@ DrawTable.args = {
   tableRows,
 };
 
+export const TeamDrawTable = TeamDrawCardTableTemplate.bind({});
+TeamDrawTable.args = {
+  headerRows,
+  tableRows: teamTableRows,
+};
+
+export const MobileTeamDrawTable = TeamDrawCardTableTemplate.bind({});
+MobileTeamDrawTable.args = {
+  headerRows,
+  tableRows: teamTableRows,
+  isMobile: true
+};
+
 export const SortableTable = DrawCardTableTemplate.bind({});
 SortableTable.args = {
   headCells: MOCK_HEAD_CELLS,

package/src/stories/organisms/Tables/TeamDrawCardTable.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import Grid from "@mui/material/Grid";
+import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
+import ArrowBackIosOutlinedIcon from "@mui/icons-material/ArrowBackIosOutlined";
+import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "stories/utils/constants";
+import Typography from "../../atoms/Typography/Typography";
+import { DrawCardTableProps } from "./sharedTypes";
+
+const StyledHeader = styled(Grid)({
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex"
+});
+
+const StyledGrid = styled(Grid)({
+  position: "relative",
+  "&:nth-of-type(1)": {
+    "&:after": {
+      content: "''",
+      position: "absolute",
+      right: 0,
+      backgroundColor: "var(--cool-grey-600)",
+      height: "25%",
+      width: "1px",
+      top: `calc(12.5% - ${teamDrawCardBottomMargin}/2)`
+    }
+  },
+  "&:nth-of-type(2)": {
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      left: 0,
+      backgroundColor: "var(--cool-grey-600)",
+      height: "25%",
+      width: "1px",
+      bottom: `calc(12.5% + ${teamDrawCardBottomMargin}/2)`
+    },
+    "&:after": {
+      content: "''",
+      position: "absolute",
+      right: 0,
+      backgroundColor: "var(--cool-grey-600)",
+      height: "50%",
+      width: "1px",
+      top: `calc(25% - ${teamDrawCardBottomMargin}/2)`
+    }
+  },
+  "&:nth-last-child(-n+2) .team-draw-card": {
+    "&:before": {
+      position: "absolute",
+      content: '""',
+      width: `${teamDrawCardSideMargin}`,
+      height: "1px",
+      left: 0,
+      top: "50%",
+      backgroundColor: "var(--cool-grey-600)",
+      transform: "translateX(-100%)"
+    }
+  },
+  "&:nth-of-type(-n+2) .team-draw-card": {
+    "&:after": {
+      position: "absolute",
+      content: '""',
+      width: `${teamDrawCardSideMargin}`,
+      height: "1px",
+      right: 0,
+      top: "50%",
+      backgroundColor: "var(--cool-grey-600)",
+      transform: "translateX(100%)"
+    }
+  }
+});
+
+const GridSections = styled(Box)({
+  display: "flex",
+  alignItems: "center"
+});
+
+const TableMobileSection = styled(Grid)({
+  flexDirection: "column"
+});
+
+export default function TeamDrawCardTable({
+  headerRows, tableRows, isMobile, ...props 
+}: DrawCardTableProps) {
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  if (!headerRows || !tableRows) return null;
+
+  const totalColumns = Math.floor(12 / headerRows.length);
+
+  const formatTableRows = tableRows.map((row, index) => {
+    if (index > 2) return; // Table can only support 3 columns
+    const rowSectionsHeight = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+
+    return (
+        <StyledGrid key={index} xs={totalColumns}>
+            {[...Array(sectionAmount)].map((section, idx) => (
+                <GridSections key={idx} sx={{ height: rowSectionsHeight }}>
+                    {row[idx]}
+                </GridSections>
+            ))}
+        </StyledGrid>
+    );
+  });
+
+  const formatDesktopRows = (
+      <>
+          <Grid container sx={{ height: "60px" }}>
+              {headerRows.map((row) => (
+                  <StyledHeader key={row.name} xs={totalColumns}>
+                      <Typography category="secondary" size="small-medium-cap">
+                          {row.name}
+                      </Typography>
+                  </StyledHeader>
+              ))}
+          </Grid>
+          <Grid container>{formatTableRows}</Grid>
+      </>
+  );
+
+  const formatMobileRows = (
+      <Box>
+          <Grid container justifyContent="space-between">
+              <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1, alignSelf: "flex-start" }}>
+                  <ArrowBackIosOutlinedIcon />
+              </Button>
+              <StyledHeader xs={totalColumns}>
+                  <Typography category="secondary" size="small-medium-cap">
+                      {headerRows[activeStep].name}
+                  </Typography>
+              </StyledHeader>
+              <Button onClick={handleNext} disabled={activeStep === tableRows.length - 1}>
+                  <ArrowForwardIosOutlinedIcon />
+              </Button>
+          </Grid>
+          <TableMobileSection container>
+              <GridSections sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>{tableRows[activeStep]}</GridSections>
+          </TableMobileSection>
+      </Box>
+  );
+
+  return (
+      <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+          {isMobile ? formatMobileRows : formatDesktopRows}
+      </Box>
+  );
+}

package/src/stories/organisms/Tables/mockData.tsx

@@ -107,3 +107,24 @@ export const SAMPLE_CARD_DATA = {
     points: 4,
   }
 };
+
+export const SAMPLE_TEAM_PAGE_CARD_DATA = {
+  dateLabel: 'Dec 20',
+  timeLabel: '9:00pm',
+  locationLabel: 'Taube Tennis Center',
+  matchInfo: 'Round 1, Match 2',
+  isPosition1Winner: true, 
+  isPosition2Winner: false,
+  position1Team: {
+    name: 'Apples',
+    points: 10,
+    href: 'https://www.reddit.com',
+    record: 2
+  },
+  position2Team: {
+    name: 'Pears',
+    points: 4,
+    href: 'https://www.reddit.com',
+    record: 2
+  }
+};

package/src/stories/utils/constants.ts

@@ -0,0 +1,2 @@
+export const teamDrawCardSideMargin = '24px';
+export const teamDrawCardBottomMargin = '8px';