@universal-tennis/ui-shared 0.1.96 → 0.2.0

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

@@ -1,165 +1,155 @@
-import React from 'react';
-import { styled } from "@mui/material/styles";
-
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Link from '@mui/material/Link';
-
-import { FooterProps } from './sharedTypes';
-import { SocialMediaIds } from '../../utils/constants';
-import FooterSection from '../../molecules/FooterSection/FooterSection';
-import SocialMediaInstagramIcon from '../../atoms/Icons/SocialMediaInstagramIcon';
-import SocialMediaTikTokIcon from '../../atoms/Icons/SocialMediaTikTokIcon';
-import SocialMediaXIcon from '../../atoms/Icons/SocialMediaXIcon';
-import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
-import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
-import Typography from '../../atoms/Typography/Typography';
-import utrLogo from '../../assets/utr-sports-logo.svg';
-import googlePlayLogo from '../../../../public/google-play-icon.png';
-import appStoreBadge from '../../../../public/app-store-badge.png';
-
-function Footer({
-  exploreItems,
-  providerItems,
-  moreItems,
-  supportItems,
-  onSocialMediaClick,
-  sx
-}: FooterProps) {
-  const {
-    X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE
-  } = SocialMediaIds;
-
-  const googlePlayLink = "https://play.google.com/store/apps/details?id=com.ut.utr";
-  const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
-
-  const handleOnSocialMediaClick = (id: number) => {
-    onSocialMediaClick(id);
-  };
-
-  const StyledNavigationContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexWrap: 'wrap',
-    [theme.breakpoints.up('md')]: {
-      flexWrap: 'no-wrap',
-    }
-  }));
-
-  const StyledContentContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    padding: "32px",
-    [theme.breakpoints.up('md')]: {
-      flexDirection: "row",
-      padding: "32px 64px",
-    }
-  }));
-
-  const StyledNavigation = styled(Box)(({ theme }) => ({
-    flex: "50%",
-    marginBottom: "32px",
-    [theme.breakpoints.up('lg')]: {
-      flex: "auto",
-      marginRight: "75px",
-      marginBottom: 0,
-      '&:last-child': {
-        marginRight: 0,
-      },
-    }
-  }));
-
-  const StyledLogoContainer = styled(Box)(({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    margin: "0 auto",
-    [theme.breakpoints.up('lg')]: {
-      margin: 0
-    }
-  }));
-  
-  const StyledBorder = styled(Box)(({ theme }) => ({
-    borderBottom: ".5px solid var(--darkest-grey)",
-    margin: "32px 0px",
-    [theme.breakpoints.up('md')]: {
-      display: "none"
-    }
-  }));
-
-  return (
-      <Box sx={{ backgroundColor: 'var(--black)', ...sx }}>
-          <StyledContentContainer>
-              <StyledLogoContainer>
-                  <img
-                      alt="UTR Sports logo"
-                      width="205"
-                      height="51"
-                      src={utrLogo}
-                  />
-                  <Box display="flex" my={2} justifyContent="space-between" width="100%">
-                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(X)}>
-                          <SocialMediaXIcon size={27} color="var(--white)" />
-                      </IconButton>
-                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
-                          <SocialMediaFacebookIcon size={27} color="var(--white)" />
-                      </IconButton>
-                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
-                          <SocialMediaInstagramIcon size={27} color="var(--white)" />
-                      </IconButton>
-                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
-                          <SocialMediaTikTokIcon size={27} color="var(--white)" />
-                      </IconButton>
-                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
-                          <SocialMediaYoutubeIcon size={27} color="var(--white)" />
-                      </IconButton>
-                  </Box>
-                  <Box display="flex" justifyContent="space-between" width="100%">
-                      <Link href={googlePlayLink} target="_blank" rel="noopener">
-                          <img
-                              alt="Google play logo"
-                              width="96"
-                              height="28"
-                              src={googlePlayLogo}
-                          />
-                      </Link>
-                      <Link href={appStoreLink} target="_blank" rel="noopener">
-                          <img
-                              alt="App store badge"
-                              width="84"
-                              height="28"
-                              src={appStoreBadge}
-                          />
-                      </Link>
-                  </Box>                  
-              </StyledLogoContainer>
-              <StyledBorder />
-              <StyledNavigationContainer>
-                  <StyledNavigation>
-                      <FooterSection title="Explore" items={exploreItems} />
-                  </StyledNavigation>
-                  <StyledNavigation>
-                      <FooterSection title="Providers" items={providerItems} />
-                  </StyledNavigation>
-                  <StyledNavigation>
-                      <FooterSection title="More" items={moreItems} />
-                  </StyledNavigation>
-                  <StyledNavigation>
-                      <FooterSection title="Support" items={supportItems} />
-                  </StyledNavigation>
-              </StyledNavigationContainer>
-          </StyledContentContainer>
-          <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;
+import React from 'react';
+import { styled } from "@mui/material/styles";
+
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+
+import { FooterProps } from './sharedTypes';
+import { SocialMediaIds } from '../../utils/constants';
+import FooterSection from '../../molecules/FooterSection/FooterSection';
+import SocialMediaInstagramIcon from '../../atoms/Icons/SocialMediaInstagramIcon';
+import SocialMediaTikTokIcon from '../../atoms/Icons/SocialMediaTikTokIcon';
+import SocialMediaXIcon from '../../atoms/Icons/SocialMediaXIcon';
+import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
+import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
+import Typography from '../../atoms/Typography/Typography';
+import utrLogo from '../../assets/utr-sports-logo.svg';
+import appStoreBadge from '../../../../public/app-store-badge.png';
+
+function Footer({
+  exploreItems,
+  providerItems,
+  moreItems,
+  supportItems,
+  onSocialMediaClick,
+  sx
+}: FooterProps) {
+  const {
+    X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE
+  } = SocialMediaIds;
+
+  const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
+
+  const handleOnSocialMediaClick = (id: number) => {
+    onSocialMediaClick(id);
+  };
+
+  const StyledNavigationContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    [theme.breakpoints.up('md')]: {
+      flexWrap: 'no-wrap',
+    }
+  }));
+
+  const StyledContentContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    padding: "32px",
+    [theme.breakpoints.up('md')]: {
+      flexDirection: "row",
+      padding: "32px 64px",
+    }
+  }));
+
+  const StyledNavigation = styled(Box)(({ theme }) => ({
+    flex: "50%",
+    marginBottom: "32px",
+    [theme.breakpoints.up('lg')]: {
+      flex: "auto",
+      marginRight: "75px",
+      marginBottom: 0,
+      '&:last-child': {
+        marginRight: 0,
+      },
+    }
+  }));
+
+  const StyledLogoContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    margin: "0 auto",
+    [theme.breakpoints.up('lg')]: {
+      margin: 0
+    }
+  }));
+  
+  const StyledBorder = styled(Box)(({ theme }) => ({
+    borderBottom: ".5px solid var(--darkest-grey)",
+    margin: "32px 0px",
+    [theme.breakpoints.up('md')]: {
+      display: "none"
+    }
+  }));
+
+  return (
+      <Box sx={{ backgroundColor: 'var(--black)', ...sx }}>
+          <StyledContentContainer>
+              <StyledLogoContainer>
+                  <img
+                      alt="UTR Sports logo"
+                      width="205"
+                      height="51"
+                      src={utrLogo}
+                  />
+                  <Box display="flex" my={2} justifyContent="space-between" width="100%">
+                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(X)}>
+                          <SocialMediaXIcon size={27} color="var(--white)" />
+                      </IconButton>
+                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
+                          <SocialMediaFacebookIcon size={27} color="var(--white)" />
+                      </IconButton>
+                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
+                          <SocialMediaInstagramIcon size={27} color="var(--white)" />
+                      </IconButton>
+                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
+                          <SocialMediaTikTokIcon size={27} color="var(--white)" />
+                      </IconButton>
+                      <IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
+                          <SocialMediaYoutubeIcon size={27} color="var(--white)" />
+                      </IconButton>
+                  </Box>
+                  <Box display="flex" justifyContent="center" width="100%">
+                      <Link href={appStoreLink} target="_blank" rel="noopener">
+                          <img
+                              alt="App store badge"
+                              width="84"
+                              height="28"
+                              src={appStoreBadge}
+                          />
+                      </Link>
+                  </Box>                  
+              </StyledLogoContainer>
+              <StyledBorder />
+              <StyledNavigationContainer>
+                  <StyledNavigation>
+                      <FooterSection title="Explore" items={exploreItems} />
+                  </StyledNavigation>
+                  <StyledNavigation>
+                      <FooterSection title="Providers" items={providerItems} />
+                  </StyledNavigation>
+                  <StyledNavigation>
+                      <FooterSection title="More" items={moreItems} />
+                  </StyledNavigation>
+                  <StyledNavigation>
+                      <FooterSection title="Support" items={supportItems} />
+                  </StyledNavigation>
+              </StyledNavigationContainer>
+          </StyledContentContainer>
+          <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 2025, UTR SPORTS`}
+              </Typography>
+          </Box>
+      </Box>
+  );
+}
+export default Footer;

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

@@ -1,17 +1,17 @@
-import { SxProps, Theme } from '@mui/system';
-
-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;
-    sx?: SxProps<Theme>;
-};
+import { SxProps, Theme } from '@mui/system';
+
+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;
+    sx?: SxProps<Theme>;
+};