@universal-tennis/ui-shared 0.1.82 → 0.1.85

package/src/stories/organisms/Footer/Footer.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+import FooterSection from 'stories/molecules/FooterSection/FooterSection';
+import SocialMediaFacebookIcon from 'stories/atoms/Icons/SocialMediaFacebookIcon';
+import SocialMediaInstagramIcon from 'stories/atoms/Icons/SocialMediaInstagramIcon';
+import SocialMediaTikTokIcon from 'stories/atoms/Icons/SocialMediaTikTokIcon';
+import SocialMediaXIcon from 'stories/atoms/Icons/SocialMediaXIcon';
+import SocialMediaYoutubeIcon from 'stories/atoms/Icons/SocialMediaYoutubeIcon';
+import { SocialMediaIds } from 'stories/utils/constants';
+import Typography from '../../atoms/Typography/Typography';
+import { FooterProps } from './sharedTypes';
+import utrLogo from '../../assets/utr-sports-logo.svg';
+
+function Footer({
+  exploreItems,
+  eventItems,
+  providerItems,
+  moreItems,
+  supportItems,
+  onSocialMediaClick,
+}: FooterProps) {
+  const matches = useMediaQuery('(min-width:600px)');
+  const {
+    X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE
+  } = SocialMediaIds;
+
+  const handleOnSocialMediaClick = (id: number) => {
+    onSocialMediaClick(id);
+  };
+
+  return (
+      <Box sx={{ backgroundColor: 'var(--black)' }}>
+          <Grid p={1.5} container justifyContent="space-evenly" display={matches ? 'row' : 'column'}>
+              <Grid item xs={12} lg={2}>
+                  <Box mb={2} display="flex" alignItems="center" flexDirection="column">
+                      <img
+                          alt="UTR Sports logo"
+                          width="205"
+                          height="51"
+                          src={utrLogo}
+                      />
+                      <Box display="flex" mt={1}>
+                          <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(X)}>
+                              <SocialMediaXIcon size={27} color="var(--white)" />
+                          </IconButton>
+                          <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
+                              <SocialMediaFacebookIcon size={27} color="var(--white)" />
+                          </IconButton>
+                          <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
+                              <SocialMediaInstagramIcon size={27} color="var(--white)" />
+                          </IconButton>
+                          <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
+                              <SocialMediaTikTokIcon size={27} color="var(--white)" />
+                          </IconButton>
+                          <IconButton sx={{ p: 0.5 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
+                              <SocialMediaYoutubeIcon size={27} color="var(--white)" />
+                          </IconButton>
+                      </Box>
+                  </Box>
+              </Grid>
+              {matches ? (
+                  <Grid container item lg={10} justifyContent="space-evenly">
+                      <Grid item>
+                          <FooterSection title="Explore" items={exploreItems} />
+                      </Grid>
+                      <Grid item>
+                          <FooterSection title="Events" items={eventItems} />
+                      </Grid>
+                      <Grid item>
+                          <FooterSection title="Providers" items={providerItems} />
+                      </Grid>
+                      <Grid item>
+                          <FooterSection title="More" items={moreItems} />
+                      </Grid>
+                      <Grid item>
+                          <FooterSection title="Support" items={supportItems} />
+                      </Grid>
+                  </Grid>
+              ) : (
+                  <Grid container display="column" justifyContent="space-evenly">
+                      <Grid item>
+                          <Box mb={2}>
+                              <FooterSection title="Explore" items={exploreItems} />
+                          </Box>
+                          <Box mb={3.3}>
+                              <FooterSection title="Providers" items={providerItems} />
+                          </Box>
+                          <FooterSection title="Support" items={supportItems} />
+                      </Grid>
+                      <Grid item>
+                          <Box mb={2}>
+                              <FooterSection title="Events" items={eventItems} />
+                          </Box>
+                          <FooterSection title="More" items={moreItems} />
+                      </Grid>
+                  </Grid>
+              )}
+          </Grid>
+          <Box display="absolute" sx={{ bottom: 24, borderTop: 1, borderColor: "var(--white)" }}>
+              <Typography 
+                  p={0.5}
+                  category="secondary"
+                  size="x-small-book-cap"
+                  color="var(--white)"
+                  align="center"
+              >
+                  {`\u00A9 2024, UTR SPORTS`}
+              </Typography>
+          </Box>
+      </Box>
+  );
+}
+export default Footer;

package/src/stories/organisms/Footer/sharedTypes.ts

@@ -0,0 +1,14 @@
+export interface LinkItem {
+  href: string;
+  label: string;
+}
+export type FooterProps = {
+    sectionTitleColor: string;
+    listItemColor: string;
+    exploreItems: [LinkItem];
+    eventItems:[LinkItem];
+    providerItems:[LinkItem];
+    moreItems:[LinkItem];
+    supportItems:[LinkItem];
+    onSocialMediaClick(id: number): VoidFunction;
+};

package/src/stories/organisms/Modals/FullPageModal.tsx

@@ -1,93 +1,93 @@
-import React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import CloseIcon from '@mui/icons-material/Close';
-import Container from '@mui/material/Container';
-import Dialog from '@mui/material/Dialog';
-import IconButton from '@mui/material/IconButton';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
-import Button from '../../atoms/Button/Button';
-import { FullPageModalType } from './sharedTypes';
-
-function FullPageModal({
-  isOpen,
-  onClose,
-  pageTitle,
-  bottomCTAText,
-  secondaryBottomCTAText,
-  onBottomCTAClick,
-  onSecondaryBottomCTAClick,
-  isBottomCTAdisabled,
-  isSecondaryBottomCTAdisabled,
-  PagePopupModal,
-  children,
-  ...props
-}: FullPageModalType) {
-  const handleOnClose = () => {
-    onClose();
-  };
-
-  return (
-      <Box position="relative" {...props}>
-          <Dialog
-              PaperProps={{
-                style: {
-                  backgroundColor: 'var(--cool-grey-150)',
-                  boxShadow: 'none',
-                  overflow: 'hidden'
-                },
-              }}
-              fullScreen
-              open={isOpen}
-              onClose={handleOnClose}
-          >
-              <AppBar sx={{ position: 'relative', backgroundColor: 'var(--white)' }}>
-                  <Toolbar>
-                      <Container maxWidth={false}>
-                          <Box display="flex" justifyContent="space-between" alignItems="center">
-                              <Typography variant="h6">{pageTitle}</Typography>
-                              <IconButton edge="start" onClick={handleOnClose} aria-label="close">
-                                  <CloseIcon />
-                              </IconButton>
-                          </Box>
-                      </Container>
-                  </Toolbar>
-              </AppBar>
-              <Grid sx={{ minHeight: "100vh", paddingBottom: '136px' }} container>
-                  {children}
-                  {bottomCTAText && !!onBottomCTAClick && (    
-                  <Box
-                      sx={{
-                        position: "fixed",
-                        width: "100%", 
-                        backgroundColor: 'black',
-                        zIndex: 2,
-                        display: 'flex',
-                        justifyContent: 'flex-end'
-                      }}
-                      p={2}
-                      bottom={0}
-                  >
-                      {!!onSecondaryBottomCTAClick && secondaryBottomCTAText && (
-                      <Box sx={{ marginRight: '16px' }}>
-                          <Button onClick={onSecondaryBottomCTAClick} disabled={isSecondaryBottomCTAdisabled} category="secondary-flipped">
-                              {secondaryBottomCTAText}
-                          </Button>
-                      </Box>
-                      )}
-                      <Box>
-                          <Button onClick={onBottomCTAClick} disabled={isBottomCTAdisabled} category="secondary-flipped">
-                              {bottomCTAText}
-                          </Button>
-                      </Box>
-                  </Box>
-                  )}
-              </Grid>
-              {PagePopupModal}
-          </Dialog>
-      </Box>
-  );
-}
-export default FullPageModal;
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CloseIcon from '@mui/icons-material/Close';
+import Container from '@mui/material/Container';
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Button from '../../atoms/Button/Button';
+import { FullPageModalType } from './sharedTypes';
+
+function FullPageModal({
+  isOpen,
+  onClose,
+  pageTitle,
+  bottomCTAText,
+  secondaryBottomCTAText,
+  onBottomCTAClick,
+  onSecondaryBottomCTAClick,
+  isBottomCTAdisabled,
+  isSecondaryBottomCTAdisabled,
+  PagePopupModal,
+  children,
+  ...props
+}: FullPageModalType) {
+  const handleOnClose = () => {
+    onClose();
+  };
+
+  return (
+      <Box position="relative" {...props}>
+          <Dialog
+              PaperProps={{
+                style: {
+                  backgroundColor: 'var(--cool-grey-150)',
+                  boxShadow: 'none',
+                  overflow: 'hidden'
+                },
+              }}
+              fullScreen
+              open={isOpen}
+              onClose={handleOnClose}
+          >
+              <AppBar sx={{ position: 'relative', backgroundColor: 'var(--white)' }}>
+                  <Toolbar>
+                      <Container maxWidth={false}>
+                          <Box display="flex" justifyContent="space-between" alignItems="center">
+                              <Typography variant="h6">{pageTitle}</Typography>
+                              <IconButton edge="start" onClick={handleOnClose} aria-label="close">
+                                  <CloseIcon />
+                              </IconButton>
+                          </Box>
+                      </Container>
+                  </Toolbar>
+              </AppBar>
+              <Grid sx={{ minHeight: "100vh", paddingBottom: '136px' }} container>
+                  {children}
+                  {bottomCTAText && !!onBottomCTAClick && (    
+                  <Box
+                      sx={{
+                        position: "fixed",
+                        width: "100%", 
+                        backgroundColor: 'black',
+                        zIndex: 2,
+                        display: 'flex',
+                        justifyContent: 'flex-end'
+                      }}
+                      p={2}
+                      bottom={0}
+                  >
+                      {!!onSecondaryBottomCTAClick && secondaryBottomCTAText && (
+                      <Box sx={{ marginRight: '16px' }}>
+                          <Button onClick={onSecondaryBottomCTAClick} disabled={isSecondaryBottomCTAdisabled} category="secondary-flipped">
+                              {secondaryBottomCTAText}
+                          </Button>
+                      </Box>
+                      )}
+                      <Box>
+                          <Button onClick={onBottomCTAClick} disabled={isBottomCTAdisabled} category="secondary-flipped">
+                              {bottomCTAText}
+                          </Button>
+                      </Box>
+                  </Box>
+                  )}
+              </Grid>
+              {PagePopupModal}
+          </Dialog>
+      </Box>
+  );
+}
+export default FullPageModal;

package/src/stories/organisms/Modals/Modals.stories.tsx

@@ -1,138 +1,138 @@
-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 "./FullPageModal";
-import SortableTable from "../Tables/SortableTable";
-import {
-  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
-} from "../Tables/mockData";
-
-import { FullPageModalType } from "./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 && 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!',
-  onBottomCTAClick: () => {},
-  onSecondaryBottomCTAClick: () => {},
-  secondaryBottomCTAText: 'skip',
-  isBottomCTAdisabled: false,
-};
+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 "./FullPageModal";
+import SortableTable from "../Tables/SortableTable";
+import {
+  MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA 
+} from "../Tables/mockData";
+
+import { FullPageModalType } from "./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 && 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!',
+  onBottomCTAClick: () => {},
+  onSecondaryBottomCTAClick: () => {},
+  secondaryBottomCTAText: 'skip',
+  isBottomCTAdisabled: false,
+};

package/src/stories/organisms/Modals/sharedTypes.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
-
-export type FullPageModalType = {
-    isOpen: boolean;
-    onClose: VoidFunction;
-    pageTitle: string;
-    children?:ReactNode;
-    bottomCTAText?: string;
-    secondaryBottomCTAText?: string;
-    onBottomCTAClick?: VoidFunction;
-    onSecondaryBottomCTAClick?: VoidFunction;
-    isSecondaryBottomCTAdisabled?: boolean;
-    isBottomCTAdisabled?: boolean;
-    PagePopupModal?: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export type FullPageModalType = {
+    isOpen: boolean;
+    onClose: VoidFunction;
+    pageTitle: string;
+    children?:ReactNode;
+    bottomCTAText?: string;
+    secondaryBottomCTAText?: string;
+    onBottomCTAClick?: VoidFunction;
+    onSecondaryBottomCTAClick?: VoidFunction;
+    isSecondaryBottomCTAdisabled?: boolean;
+    isBottomCTAdisabled?: boolean;
+    PagePopupModal?: ReactNode;
+}