@universal-tennis/ui-shared 0.1.87 → 0.1.88

package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx

@@ -1,99 +1,111 @@
-import React from 'react';
-
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-
-import Typography from '../../atoms/Typography/Typography';
-
-export interface SquareAvatarWithNameProps {
-    avatarOnly?: boolean;
-    avatarFontCategory?: string;
-    avatarFontSize?: string;
-    avatarWidth?: string;
-    avatarHeight?: string;
-    href?: string,
-    maxLinkWidth?: string,
-    name: string;
-    fontCategory?: string;
-    fontSize?: string;
-    disabled?: boolean;
-    subtitle?: string;
-  }
-
-export default function SquareAvatarWithName({
-  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
-  avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', 
-  fontSize = 'medium-book', fontCategory = 'secondary', disabled = false, maxLinkWidth = "auto", subtitle = ''
-}) {
-  const getAcronym = (str: string) => {
-    const cleanStr = str?.replace(/[^a-zA-Z\s]/g, '').split(' '); // Remove non-letter and non-space characters
-    const acronym = cleanStr?.map((word) => word.charAt(0)).join('').substring(0, 3);
-    return acronym;
-  };
-
-  const SquareAvatarComponent = (
-      <Avatar 
-          sx={{ 
-            backgroundColor: disabled ? 'var(--grey)' : 'var(--black)', 
-            marginRight: '8px', 
-            width: `${avatarWidth}`, 
-            height: `${avatarHeight}` 
-          }} 
-          variant="rounded"
-      >
-          <Typography 
-              sx={{ textTransform: 'uppercase' }} 
-              size={avatarFontSize} 
-              category={avatarFontCategory}
-          >
-              {disabled ? '—' : getAcronym(name)}
-          </Typography>
-      </Avatar>
-  );
-
-  return (
-    avatarOnly ? (
-      SquareAvatarComponent
-    ) : (
-        <Box display="flex" alignItems="center">
-            {SquareAvatarComponent}
-            <Box>
-                {href ? (
-                    <Link href={href} sx={{ textDecoration: 'none' }}>
-                        <Typography
-                            category={fontCategory}
-                            size={fontSize}
-                            maxWidth={maxLinkWidth}
-                            sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
-                        >
-                            {name}
-                        </Typography>
-                    </Link>
-                ) : (
-                    <Typography
-                        category={fontCategory}
-                        size={fontSize}
-                        sx={{ 
-                          whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: disabled ? 'grey' : 'black' 
-                        }}
-                    >
-                        {name}
-                    </Typography>
-                )}
-                {subtitle && (
-                <Typography
-                    category="secondary"
-                    size="small-book"
-                    sx={{ 
-                      whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'black' 
-                    }}
-                >
-                    {subtitle}
-                </Typography>
-                )}
-            </Box>
-        </Box>
-    )
-  );
-}
+import React from 'react';
+
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+
+import Typography from '../../atoms/Typography/Typography';
+
+export interface SquareAvatarWithNameProps {
+    avatarOnly?: boolean;
+    avatarFontCategory?: string;
+    avatarFontSize?: string;
+    avatarWidth?: string;
+    avatarHeight?: string;
+    href?: string,
+    maxLinkWidth?: string,
+    name: string;
+    fontCategory?: string;
+    fontSize?: string;
+    disabled?: boolean;
+    subtitle?: string;
+  }
+
+export default function SquareAvatarWithName({
+  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
+  avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', 
+  fontSize = 'medium-book', fontCategory = 'secondary', disabled = false, maxLinkWidth = "auto", subtitle = ''
+}) {
+  const getAcronym = (str: string) => {
+    const cleanStr = str?.replace(/[^a-zA-Z\s]/g, '').split(' '); // Remove non-letter and non-space characters
+    const acronym = cleanStr?.map((word) => word.charAt(0)).join('').substring(0, 3);
+    return acronym;
+  };
+
+  const textOverflowStyles = {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 1
+  };
+
+  const SquareAvatarComponent = (
+      <Avatar 
+          sx={{ 
+            backgroundColor: disabled ? 'var(--grey)' : 'var(--black)', 
+            marginRight: '8px', 
+            width: `${avatarWidth}`, 
+            height: `${avatarHeight}` 
+          }} 
+          variant="rounded"
+      >
+          <Typography 
+              sx={{ textTransform: 'uppercase' }} 
+              size={avatarFontSize} 
+              category={avatarFontCategory}
+          >
+              {disabled ? '—' : getAcronym(name)}
+          </Typography>
+      </Avatar>
+  );
+
+  return (
+    avatarOnly ? (
+      SquareAvatarComponent
+    ) : (
+        <Box display="flex" alignItems="center">
+            {SquareAvatarComponent}
+            <Box>
+                {href ? (
+                    <Link href={href} sx={{ textDecoration: 'none' }}>
+                        <Typography
+                            category={fontCategory}
+                            size={fontSize}
+                            maxWidth={maxLinkWidth}
+                            sx={{
+                              ...textOverflowStyles
+                            }}
+                        >
+                            {name}
+                        </Typography>
+                    </Link>
+                ) : (
+                    <Typography
+                        category={fontCategory}
+                        size={fontSize}
+                        maxWidth={maxLinkWidth}
+                        sx={{ 
+                          ...textOverflowStyles,
+                          color: disabled ? 'grey' : 'black' 
+                        }}
+                    >
+                        {name}
+                    </Typography>
+                )}
+                {subtitle && (
+                <Typography
+                    category="secondary"
+                    size="small-book"
+                    sx={{ 
+                      ...textOverflowStyles, color: 'black' 
+                    }}
+                >
+                    {subtitle}
+                </Typography>
+                )}
+            </Box>
+        </Box>
+    )
+  );
+}

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

@@ -1,63 +1,63 @@
-import React from 'react';
-
-import Footer from './Footer';
-import { FooterProps } from './sharedTypes';
-
-// Default
-export default {
-  title: 'Organisms/Footer',
-};
-
-// Templates
-function FooterTemplate(args: FooterProps) {
-  return <Footer {...args} />;  
-}
-
-// Stories
-export const BottomFooter = FooterTemplate.bind({});
-BottomFooter.args = {
-  exploreItems: [
-    { href: '#', label: 'Countries' },
-    { href: '#', label: 'States' },
-    { href: '#', label: 'Cities' },
-  ],
-  eventItems: [
-    { href: '#', label: 'Color Ball' },
-    { href: '#', label: 'National Pathway' },
-    { href: '#', label: 'Camps' },
-    { href: '#', label: 'Team Leagues' },
-    { href: '#', label: 'Flex Leagues' },
-    { href: '#', label: 'Junior Circuits' },
-    { href: '#', label: 'College Pathways' },
-    { href: '#', label: 'College Circuits' },
-    { href: '#', label: 'Pro Tennis Tour' },
-    { href: '#', label: 'College Camps' },
-  ],
-  providerItems: [
-    { href: '#', label: 'Clubs' },
-    { href: '#', label: 'Academies' },
-    { href: '#', label: 'High Schools' },
-    { href: '#', label: 'Colleges' },
-    { href: '#', label: 'Get in Touch' },
-  ],
-  moreItems: [
-    { href: '#', label: 'Tennis' },
-    { href: '#', label: 'Pickleball' },
-    { href: '#', label: 'News' },
-    { href: '#', label: 'Shop' },
-    { href: '#', label: 'Press' },
-    { href: '#', label: 'Careers' },
-    { href: '#', label: 'About Us' },
-    { href: '#', label: 'Foundation' },
-  ],
-  supportItems: [
-    { href: '#', label: 'Help Center' },
-    { href: '#', label: 'Privacy Policy' },
-    { href: '#', label: 'Terms & Conditions' },
-    { href: '#', label: 'Guidelines' },
-    { href: '#', label: 'Verified Events' },
-    { href: '#', label: 'About UTR Rating' },
-    { href: '#', label: 'About UTR-P Rating' },
-    { href: '#', label: 'About Color Ball Rating' },
-  ],
-};
+import React from 'react';
+
+import Footer from './Footer';
+import { FooterProps } from './sharedTypes';
+
+// Default
+export default {
+  title: 'Organisms/Footer',
+};
+
+// Templates
+function FooterTemplate(args: FooterProps) {
+  return <Footer {...args} />;  
+}
+
+// Stories
+export const BottomFooter = FooterTemplate.bind({});
+BottomFooter.args = {
+  exploreItems: [
+    { href: '#', label: 'Countries' },
+    { href: '#', label: 'States' },
+    { href: '#', label: 'Cities' },
+  ],
+  eventItems: [
+    { href: '#', label: 'Color Ball' },
+    { href: '#', label: 'National Pathway' },
+    { href: '#', label: 'Camps' },
+    { href: '#', label: 'Team Leagues' },
+    { href: '#', label: 'Flex Leagues' },
+    { href: '#', label: 'Junior Circuits' },
+    { href: '#', label: 'College Pathways' },
+    { href: '#', label: 'College Circuits' },
+    { href: '#', label: 'Pro Tennis Tour' },
+    { href: '#', label: 'College Camps' },
+  ],
+  providerItems: [
+    { href: '#', label: 'Clubs' },
+    { href: '#', label: 'Academies' },
+    { href: '#', label: 'High Schools' },
+    { href: '#', label: 'Colleges' },
+    { href: '#', label: 'Get in Touch' },
+  ],
+  moreItems: [
+    { href: '#', label: 'Tennis' },
+    { href: '#', label: 'Pickleball' },
+    { href: '#', label: 'News' },
+    { href: '#', label: 'Shop' },
+    { href: '#', label: 'Press' },
+    { href: '#', label: 'Careers' },
+    { href: '#', label: 'About Us' },
+    { href: '#', label: 'Foundation' },
+  ],
+  supportItems: [
+    { href: '#', label: 'Help Center' },
+    { href: '#', label: 'Privacy Policy' },
+    { href: '#', label: 'Terms & Conditions' },
+    { href: '#', label: 'Guidelines' },
+    { href: '#', label: 'Verified Events' },
+    { href: '#', label: 'About UTR Rating' },
+    { href: '#', label: 'About UTR-P Rating' },
+    { href: '#', label: 'About Color Ball Rating' },
+  ],
+};

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

@@ -1,118 +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 { 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';
-
-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;
+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 { 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';
+
+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

@@ -1,14 +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;
-};
+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;
+};