@universal-tennis/ui-shared 0.1.66 → 0.1.68

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

@@ -1,67 +1,67 @@
-// Card types
-
-type SelectedOptions = {
-    optionOne: number;
-    optionTwo: number;
-}
-
-type Options = {
-    id: number;
-    label: string;
-}[];
-
-type OnChangeArgs = {
-  position: number;
-  id: string | null | undefined;
-}
-
-type PositionTeam = {
-  name: string;
-  points: number;
-  href?: string;
-  seed?: number;
-}
-
-export type DrawCardProps = {
-    options: Options;
-    selectedOptions: SelectedOptions;
-    dateLabel: string;
-    locationLabel: string;
-    isDisabled?: boolean;
-    isSelectActive?: boolean;
-    isPosition1Winner?: boolean;
-    isPosition2Winner?: boolean;
-    isScorelessMatch?: boolean;
-    isManaging?: boolean;
-    isFlexWidth?: boolean;
-    position1Team: PositionTeam;
-    position2Team: PositionTeam;
-    emptyLabel?: string;
-    onEditClick?: VoidFunction;
-    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;
-  }
-
-export interface ContactCardProps {
-    name: string;
-    phone: string;
-    email: string;
-    onMessageClick?: VoidFunction;
-  }
+// Card types
+
+type SelectedOptions = {
+    optionOne: number;
+    optionTwo: number;
+}
+
+type Options = {
+    id: number;
+    label: string;
+}[];
+
+type OnChangeArgs = {
+  position: number;
+  id: string | null | undefined;
+}
+
+type PositionTeam = {
+  name: string;
+  points: number;
+  href?: string;
+  seed?: number;
+}
+
+export type DrawCardProps = {
+    options: Options;
+    selectedOptions: SelectedOptions;
+    dateLabel: string;
+    locationLabel: string;
+    isDisabled?: boolean;
+    isSelectActive?: boolean;
+    isPosition1Winner?: boolean;
+    isPosition2Winner?: boolean;
+    isScorelessMatch?: boolean;
+    isManaging?: boolean;
+    isFlexWidth?: boolean;
+    position1Team: PositionTeam;
+    position2Team: PositionTeam;
+    emptyLabel?: string;
+    onEditClick?: VoidFunction;
+    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;
+  }
+
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+  }

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

@@ -1,77 +1,77 @@
-import React from 'react';
-
-import Box from '@mui/material/Box';
-import SquareAvatarWithName, { SquareAvatarWithNameProps } from './SquareAvatarWithName';
-
-// Default
-export default {
-  title: 'Molecules/SquareAvatarWithName',
-};
-
-// Templates
-function SquareAvatarWithNameTemplate(args: SquareAvatarWithNameProps) {
-  return <SquareAvatarWithName {...args} />;  
-}
-
-function SquareAvatarWithLongNameTemplate(args: SquareAvatarWithNameProps) {
-  return <Box width="200px"><SquareAvatarWithName {...args} /></Box>;  
-}
-
-// Stories
-export const Default = SquareAvatarWithNameTemplate.bind({});
-Default.args = {
-  name: "Team Dream",
-};
-
-export const WithCustomTypography = SquareAvatarWithNameTemplate.bind({});
-WithCustomTypography.args = {
-  name: "Team Dream",
-  avatarFontCategory: "secondary",
-  avatarFontSize: "small-book", 
-  fontCategory: "primary",
-  fontSize: "medium-book"
-};
-
-export const WithCustomAvatarSize = SquareAvatarWithNameTemplate.bind({});
-WithCustomAvatarSize.args = {
-  name: "Team Dream",
-  avatarWidth: '40px',
-  avatarHeight: '40px',
-  avatarFontCategory: "primary",
-  avatarFontSize: "small-book", 
-};
-
-export const WithAvatarOnly = SquareAvatarWithNameTemplate.bind({});
-WithAvatarOnly.args = {
-  avatarOnly: true,  
-  name: "Team Dream",
-};
-
-export const WithLink = SquareAvatarWithNameTemplate.bind({});
-WithLink.args = {
-  href: "https://www.reddit.com",
-  name: "Team Dream",
-};
-
-export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
-WithLowercaseName.args = {
-  name: "team dream",
-};
-
-export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
-WithLongName.args = {
-  name: "Team Dreamadeamadeamadeamadeam",
-};
-
-export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
-WithLongLinkName.args = {
-  name: "Team Dreamadeamadeamadeamadeam",
-  href: "https://www.reddit.com",
-  maxLinkWidth: "200px"
-};
-
-export const IsBye = SquareAvatarWithNameTemplate.bind({});
-IsBye.args = {
-  name: "Bye",
-  isBye: true,
-};
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import SquareAvatarWithName, { SquareAvatarWithNameProps } from './SquareAvatarWithName';
+
+// Default
+export default {
+  title: 'Molecules/SquareAvatarWithName',
+};
+
+// Templates
+function SquareAvatarWithNameTemplate(args: SquareAvatarWithNameProps) {
+  return <SquareAvatarWithName {...args} />;  
+}
+
+function SquareAvatarWithLongNameTemplate(args: SquareAvatarWithNameProps) {
+  return <Box width="200px"><SquareAvatarWithName {...args} /></Box>;  
+}
+
+// Stories
+export const Default = SquareAvatarWithNameTemplate.bind({});
+Default.args = {
+  name: "Team Dream",
+};
+
+export const WithCustomTypography = SquareAvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+  name: "Team Dream",
+  avatarFontCategory: "secondary",
+  avatarFontSize: "small-book", 
+  fontCategory: "primary",
+  fontSize: "medium-book"
+};
+
+export const WithCustomAvatarSize = SquareAvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+  name: "Team Dream",
+  avatarWidth: '40px',
+  avatarHeight: '40px',
+  avatarFontCategory: "primary",
+  avatarFontSize: "small-book", 
+};
+
+export const WithAvatarOnly = SquareAvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+  avatarOnly: true,  
+  name: "Team Dream",
+};
+
+export const WithLink = SquareAvatarWithNameTemplate.bind({});
+WithLink.args = {
+  href: "https://www.reddit.com",
+  name: "Team Dream",
+};
+
+export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+  name: "team dream",
+};
+
+export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongName.args = {
+  name: "Team Dreamadeamadeamadeamadeam",
+};
+
+export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongLinkName.args = {
+  name: "Team Dreamadeamadeamadeamadeam",
+  href: "https://www.reddit.com",
+  maxLinkWidth: "200px"
+};
+
+export const IsBye = SquareAvatarWithNameTemplate.bind({});
+IsBye.args = {
+  name: "Bye",
+  isBye: true,
+};

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

@@ -1,84 +1,84 @@
-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;
-    isBye: boolean;
-  }
-
-export default function SquareAvatarWithName({
-  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
-  avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', 
-  fontSize = 'medium-book', fontCategory = 'secondary', isBye = false, maxLinkWidth = "auto"
-}) {
-  const getAcronym = (str: string) => {
-    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
-    return acronym;
-  };
-
-  const SquareAvatarComponent = (
-      <Avatar 
-          sx={{ 
-            backgroundColor: isBye ? 'var(--grey)' : 'var(--black)', 
-            marginRight: '8px', 
-            width: `${avatarWidth}`, 
-            height: `${avatarHeight}` 
-          }} 
-          variant="rounded"
-      >
-          <Typography 
-              sx={{ textTransform: 'uppercase' }} 
-              size={avatarFontSize} 
-              category={avatarFontCategory}
-          >
-              {isBye ? '—' : getAcronym(name)}
-          </Typography>
-      </Avatar>
-  );
-
-  return (
-    avatarOnly ? (
-      SquareAvatarComponent
-    ) : (
-        <Box display="flex" alignItems="center">
-            {SquareAvatarComponent}
-            {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: isBye ? 'grey' : 'black' 
-                    }}
-                >
-                    {name}
-                </Typography>
-            )}
-        </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;
+    isBye: boolean;
+  }
+
+export default function SquareAvatarWithName({
+  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
+  avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', 
+  fontSize = 'medium-book', fontCategory = 'secondary', isBye = false, maxLinkWidth = "auto"
+}) {
+  const getAcronym = (str: string) => {
+    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
+    return acronym;
+  };
+
+  const SquareAvatarComponent = (
+      <Avatar 
+          sx={{ 
+            backgroundColor: isBye ? 'var(--grey)' : 'var(--black)', 
+            marginRight: '8px', 
+            width: `${avatarWidth}`, 
+            height: `${avatarHeight}` 
+          }} 
+          variant="rounded"
+      >
+          <Typography 
+              sx={{ textTransform: 'uppercase' }} 
+              size={avatarFontSize} 
+              category={avatarFontCategory}
+          >
+              {isBye ? '—' : getAcronym(name)}
+          </Typography>
+      </Avatar>
+  );
+
+  return (
+    avatarOnly ? (
+      SquareAvatarComponent
+    ) : (
+        <Box display="flex" alignItems="center">
+            {SquareAvatarComponent}
+            {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: isBye ? 'grey' : 'black' 
+                    }}
+                >
+                    {name}
+                </Typography>
+            )}
+        </Box>
+    )
+  );
+}

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;