@universal-tennis/ui-shared 0.1.86 → 0.1.88

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

@@ -1,137 +1,137 @@
-import React from 'react';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import Checkbox from '@mui/material/Checkbox';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from 'stories/atoms/Typography/Typography';
-import Button from 'stories/atoms/Button/Button';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import Pagination from '@mui/material/Pagination';
-import FullPageModal from '../../organisms/Modals/FullPageModal';
-import SortableTable from '../../organisms/Tables/SortableTable';
-import {
-  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
-} from '../../organisms/Tables/mockData';
-
-import { FullPageModalType } from '../../organisms/Modals/sharedTypes';
-
-// Fake data for rendering sections
-const conferences = [{ id: 1, name: 'philly' }, { id: 2, name: 'NJ' }, { id: 3, name: 'PA' }];
-const sessions = [{ sessionId: 1, sessionName: 'philly' }, { sessionId: 2, sessionName: 'NJ' }, { sessionId: 3, sessionName: 'PA' }];
-const selectedSessionIds = [1];
-const teamsToAdd = [{ id: 1, name: 'test', sessionName: 'test' }];
-const selectedTeamIds = [1];
-
-const InputSelections = [
-    <FormControl sx={{ width: 300, mr: 3 }}>
-        <InputLabel id="conference-select">Select Conference</InputLabel>
-        <Select
-            value={1}
-            label="Select Conference"
-            labelId="conference-select"
-        >
-            {conferences?.map((option) => (
-                <MenuItem key={option.id} value={option.id}>
-                    {option.name}
-                </MenuItem>
-            ))}
-        </Select>
-    </FormControl>,
-    <FormControl sx={{ width: 300 }}>
-        <InputLabel id="session-select">test</InputLabel>
-        <Select
-            value={selectedSessionIds}
-            label="sample"
-            multiple
-            labelId="session-select"
-        >
-            {sessions?.map((option) => (
-                <MenuItem key={option.sessionId} value={option.sessionId}>
-                    <Checkbox checked={selectedSessionIds?.indexOf(option.sessionId) > -1} />
-                    <Typography>{option.sessionName}</Typography>
-                </MenuItem>
-            ))}
-            <Box mt={1} boxShadow="0px -3px 3px #00000024" display="flex" justifyContent="center" pt={1} px={1}>
-                <Button category="primary-extended">
-                    Apply
-                </Button>
-            </Box>
-        </Select>
-    </FormControl>
-];
-
-const MainComponent = (
-    <Grid container>
-        <Grid item borderRight={1} lg={10}>
-            <Box p={6}>
-                <Box display="flex" alignItems="center">
-                    {InputSelections?.map((select) => (
-                      select
-                    ))}
-                </Box>
-            </Box>
-            <Box p={6}>
-                <SortableTable
-                    headCells={MOCK_HEAD_CELLS}
-                    sortOrder="asc"
-                    sortByProperty="player"
-                    title="Player Table"
-                    tableData={MOCK_TABLE_DATA}
-        // @ts-ignore
-                    rowComponent={mockRowComponent}
-                />
-                <Pagination variant="text" color="primary" page={1} count={10} />
-            </Box>
-        </Grid>
-    
-        <Grid item lg={2}>
-            <Box p={6}>
-                <Typography variant="h5">{`${teamsToAdd.length} selected teams`}</Typography>
-                <Typography>{`This session allows a max of ${1} teams`}</Typography>
-                {teamsToAdd.map((team) => (
-                    <Paper key={team.id} sx={{ my: 1 }}>
-                        <Box p={2} display="flex">
-                            <Checkbox
-                                color="primary"
-                                checked={selectedTeamIds.indexOf(team.id) !== -1}
-                            />
-                            <Box ml={1}>
-                                <Typography>{team.name}</Typography>
-                                <Typography>{team.sessionName}</Typography>
-                            </Box>
-                        </Box>
-                    </Paper>
-                ))}
-            </Box>
-        </Grid>
-    </Grid>
-);
-
-// Default
-export default {
-  title: 'Organisms/Modals',
-};
-
-// Templates
-function FullPageModalTemplate(args: FullPageModalType) {
-  return (
-      <FullPageModal {...args}>
-          {MainComponent}
-      </FullPageModal>
-  );
-}
-
-// Stories
-export const FullPage = FullPageModalTemplate.bind({});
-FullPage.args = {
-  isOpen: true,
-  onClose: () => {},
-  pageTitle: 'Sample Page',
-  bottomCTAText: 'Add here!',
-  handleBottomCTAClick: () => {},
-  isBottomCTAdisabled: false,
-  // PagePopupModal,
-};
+import React from 'react';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Checkbox from '@mui/material/Checkbox';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from 'stories/atoms/Typography/Typography';
+import Button from 'stories/atoms/Button/Button';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Pagination from '@mui/material/Pagination';
+import FullPageModal from '../../organisms/Modals/FullPageModal';
+import SortableTable from '../../organisms/Tables/SortableTable';
+import {
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
+} from '../../organisms/Tables/mockData';
+
+import { FullPageModalType } from '../../organisms/Modals/sharedTypes';
+
+// Fake data for rendering sections
+const conferences = [{ id: 1, name: 'philly' }, { id: 2, name: 'NJ' }, { id: 3, name: 'PA' }];
+const sessions = [{ sessionId: 1, sessionName: 'philly' }, { sessionId: 2, sessionName: 'NJ' }, { sessionId: 3, sessionName: 'PA' }];
+const selectedSessionIds = [1];
+const teamsToAdd = [{ id: 1, name: 'test', sessionName: 'test' }];
+const selectedTeamIds = [1];
+
+const InputSelections = [
+    <FormControl sx={{ width: 300, mr: 3 }}>
+        <InputLabel id="conference-select">Select Conference</InputLabel>
+        <Select
+            value={1}
+            label="Select Conference"
+            labelId="conference-select"
+        >
+            {conferences?.map((option) => (
+                <MenuItem key={option.id} value={option.id}>
+                    {option.name}
+                </MenuItem>
+            ))}
+        </Select>
+    </FormControl>,
+    <FormControl sx={{ width: 300 }}>
+        <InputLabel id="session-select">test</InputLabel>
+        <Select
+            value={selectedSessionIds}
+            label="sample"
+            multiple
+            labelId="session-select"
+        >
+            {sessions?.map((option) => (
+                <MenuItem key={option.sessionId} value={option.sessionId}>
+                    <Checkbox checked={selectedSessionIds?.indexOf(option.sessionId) > -1} />
+                    <Typography>{option.sessionName}</Typography>
+                </MenuItem>
+            ))}
+            <Box mt={1} boxShadow="0px -3px 3px #00000024" display="flex" justifyContent="center" pt={1} px={1}>
+                <Button category="primary-extended">
+                    Apply
+                </Button>
+            </Box>
+        </Select>
+    </FormControl>
+];
+
+const MainComponent = (
+    <Grid container>
+        <Grid item borderRight={1} lg={10}>
+            <Box p={6}>
+                <Box display="flex" alignItems="center">
+                    {InputSelections?.map((select) => (
+                      select
+                    ))}
+                </Box>
+            </Box>
+            <Box p={6}>
+                <SortableTable
+                    headCells={MOCK_HEAD_CELLS}
+                    sortOrder="asc"
+                    sortByProperty="player"
+                    title="Player Table"
+                    tableData={MOCK_TABLE_DATA}
+        // @ts-ignore
+                    rowComponent={mockRowComponent}
+                />
+                <Pagination variant="text" color="primary" page={1} count={10} />
+            </Box>
+        </Grid>
+    
+        <Grid item lg={2}>
+            <Box p={6}>
+                <Typography variant="h5">{`${teamsToAdd.length} selected teams`}</Typography>
+                <Typography>{`This session allows a max of ${1} teams`}</Typography>
+                {teamsToAdd.map((team) => (
+                    <Paper key={team.id} sx={{ my: 1 }}>
+                        <Box p={2} display="flex">
+                            <Checkbox
+                                color="primary"
+                                checked={selectedTeamIds.indexOf(team.id) !== -1}
+                            />
+                            <Box ml={1}>
+                                <Typography>{team.name}</Typography>
+                                <Typography>{team.sessionName}</Typography>
+                            </Box>
+                        </Box>
+                    </Paper>
+                ))}
+            </Box>
+        </Grid>
+    </Grid>
+);
+
+// Default
+export default {
+  title: 'Organisms/Modals',
+};
+
+// Templates
+function FullPageModalTemplate(args: FullPageModalType) {
+  return (
+      <FullPageModal {...args}>
+          {MainComponent}
+      </FullPageModal>
+  );
+}
+
+// Stories
+export const FullPage = FullPageModalTemplate.bind({});
+FullPage.args = {
+  isOpen: true,
+  onClose: () => {},
+  pageTitle: 'Sample Page',
+  bottomCTAText: 'Add here!',
+  handleBottomCTAClick: () => {},
+  isBottomCTAdisabled: false,
+  // PagePopupModal,
+};

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

@@ -1,14 +1,14 @@
-import React from 'react';
-
-import Typography from '../../atoms/Typography/Typography';
-import { StyledCard } from './shared';
-import { TeamCardProps } from './sharedTypes';
-
-export default function TeamCard({ title, description, ...props }: TeamCardProps) {
-  return (
-      <StyledCard {...props}>
-          <Typography category="secondary" size="medium-medium">{title}</Typography>
-          <Typography category="secondary" size="x-small-book">{description}</Typography>
-      </StyledCard>
-  );
-}
+import React from 'react';
+
+import Typography from '../../atoms/Typography/Typography';
+import { StyledCard } from './shared';
+import { TeamCardProps } from './sharedTypes';
+
+export default function TeamCard({ title, description, ...props }: TeamCardProps) {
+  return (
+      <StyledCard {...props}>
+          <Typography category="secondary" size="medium-medium">{title}</Typography>
+          <Typography category="secondary" size="x-small-book">{description}</Typography>
+      </StyledCard>
+  );
+}

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

@@ -1,158 +1,159 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
-
-import Link from '@mui/material/Link';
-
-import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "../../utils/constants";
-import WinnerIndicatorIcon from "../../atoms/Icons/WinnerIndicatorIcon";
-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%",
-  backgroundColor: "var(--white)",
-  border: "1px solid var(--cool-grey-600)",
-  marginLeft: `${teamDrawCardSideMargin}`,
-  marginRight: `${teamDrawCardSideMargin}`,
-  position: "relative",
-  marginBottom: `${teamDrawCardBottomMargin}`,
-  boxSizing: "border-box"
-});
-
-const BottomGrid = styled(Box)({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  paddingTop: "8px"
-});
-
-const StyledTypography = styled(Typography)({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  display: "-webkit-box",
-  WebkitBoxOrient: "vertical",
-  WebkitLineClamp: 1
-});
-
-export default function TeamDrawCard({
-  dateLabel,
-  locationLabel,
-  timeLabel,
-  matchInfo,
-  isPosition1Winner,
-  isPosition2Winner,
-  isScorelessMatch,
-  position1Team,
-  position2Team,
-  teamMatchLink,
-  ...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}
-                      disabled={!position1Team?.href}
-                  />
-                  {!!position1Team?.seed && (
-                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
-                      {`(${position1Team?.seed})`}
-                  </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}
-                      disabled={!position2Team?.href}
-                  />
-                  {!!position2Team?.seed && (
-                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
-                      {`(${position2Team?.seed})`}
-                  </Typography>
-                  )}
-              </Box>
-              <Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
-                  {isScorelessMatch ? "-" : position2Team?.points}
-              </Typography>
-          </Box>
-          <BottomGrid>
-              <Box>
-                  {!!teamMatchLink && (
-                  <Link href={teamMatchLink} sx={{ textDecoration: 'none' }}>
-                      <Typography
-                          category={SECONDARY}
-                          size={XSmallBook}
-                      >
-                          Team Match
-                      </Typography>
-                  </Link>
-                  )}
-                  <Box display="flex">
-                      {dateLabel && (
-                      <StyledTypography
-                          category={SECONDARY}
-                          size={XSmallBook}
-                      >
-                          {dateLabel}
-                      </StyledTypography>
-                      )}
-                      {timeLabel && (
-                      <>
-                          <Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
-                              &bull;
-                          </Typography>
-                          <StyledTypography
-                              category={SECONDARY}
-                              size={XSmallBook}
-                          >
-                              {timeLabel}
-                          </StyledTypography>
-                      </>
-                      )}
-                      {matchInfo 
-                      && (
-                      <>
-                          <Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
-                              &bull;
-                          </Typography>
-                          <StyledTypography
-                              category={SECONDARY}
-                              size={XSmallBook}
-                          >
-                              {matchInfo}
-                          </StyledTypography>
-                      </>
-                      )}
-                  </Box>
-                  <StyledTypography
-                      category={SECONDARY}
-                      size={XSmallBook}
-                  >
-                      {locationLabel}
-                  </StyledTypography>
-              </Box>
-          </BottomGrid>
-      </StyledCard>
-  );
-}
+import React from "react";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+import Link from '@mui/material/Link';
+
+import { teamDrawCardSideMargin, teamDrawCardBottomMargin } from "../../utils/constants";
+import WinnerIndicatorIcon from "../../atoms/Icons/WinnerIndicatorIcon";
+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: "145px",
+  backgroundColor: "var(--white)",
+  border: "1px solid var(--cool-grey-600)",
+  marginLeft: `${teamDrawCardSideMargin}`,
+  marginRight: `${teamDrawCardSideMargin}`,
+  position: "relative",
+  marginBottom: `${teamDrawCardBottomMargin}`,
+  boxSizing: "border-box"
+});
+
+const BottomGrid = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingTop: "8px"
+});
+
+const StyledTypography = styled(Typography)({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 1
+});
+
+export default function TeamDrawCard({
+  dateLabel,
+  locationLabel,
+  timeLabel,
+  matchInfo,
+  isPosition1Winner,
+  isPosition2Winner,
+  isScorelessMatch,
+  position1Team,
+  position2Team,
+  teamMatchLink,
+  showTeamMatchLink,
+  ...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} gap={1}>
+              {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}
+                      disabled={!position1Team?.href}
+                  />
+                  {!!position1Team?.seed && (
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      {`(${position1Team?.seed})`}
+                  </Typography>
+                  )}
+              </Box>
+              <Typography category={SECONDARY} size={isPosition1Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? "-" : position1Team?.points}
+              </Typography>
+          </Box>
+          <Box display="flex" justifyContent="space-between" gap={1}>
+              {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}
+                      disabled={!position2Team?.href}
+                  />
+                  {!!position2Team?.seed && (
+                  <Typography category={SECONDARY} size={XSmallBook} color="var(--cool-grey-600)">
+                      {`(${position2Team?.seed})`}
+                  </Typography>
+                  )}
+              </Box>
+              <Typography category={SECONDARY} size={isPosition2Winner ? MediumMedium : MediumBook}>
+                  {isScorelessMatch ? "-" : position2Team?.points}
+              </Typography>
+          </Box>
+          <BottomGrid>
+              <Box>
+                  {!!teamMatchLink && showTeamMatchLink && (
+                  <Link href={teamMatchLink} sx={{ textDecoration: 'none' }}>
+                      <Typography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          Team Match
+                      </Typography>
+                  </Link>
+                  )}
+                  <Box display="flex">
+                      {dateLabel && (
+                      <StyledTypography
+                          category={SECONDARY}
+                          size={XSmallBook}
+                      >
+                          {dateLabel}
+                      </StyledTypography>
+                      )}
+                      {timeLabel && (
+                      <>
+                          <Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
+                              &bull;
+                          </Typography>
+                          <StyledTypography
+                              category={SECONDARY}
+                              size={XSmallBook}
+                          >
+                              {timeLabel}
+                          </StyledTypography>
+                      </>
+                      )}
+                      {matchInfo && (
+                      <>
+                          <Typography category={SECONDARY} size={XSmallBook} pl={0.5} pr={0.5}>
+                              &bull;
+                          </Typography>
+                          <StyledTypography
+                              category={SECONDARY}
+                              size={XSmallBook}
+                          >
+                              {matchInfo}
+                          </StyledTypography>
+                      </>
+                      )}
+                  </Box>
+                  <StyledTypography
+                      category={SECONDARY}
+                      size={XSmallBook}
+                  >
+                      {locationLabel}
+                  </StyledTypography>
+              </Box>
+          </BottomGrid>
+      </StyledCard>
+  );
+}