@universal-tennis/ui-shared 0.1.96 → 0.2.0

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

@@ -1,69 +1,69 @@
-// 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;
-    teamMatchLink?: string;
-    showTeamMatchLink?: boolean;
-  }
-
-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;
+    teamMatchLink?: string;
+    showTeamMatchLink?: boolean;
+  }
+
+export interface TeamCardProps {
+    title: string; 
+    description: string;
+  }
+
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+  }

package/src/stories/molecules/FooterSection/FooterSection.stories.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-
-import FooterSection from './FooterSection';
-import { FooterSectionProps } from './sharedTypes';
-
-// Default
-export default {
-  title: 'Molecules/FooterSection',
-};
-
-// Templates
-function FooterSectionTemplate(args: FooterSectionProps) {
-  return <FooterSection {...args} />;  
-}
-
-// Stories
-export const Section = FooterSectionTemplate.bind({});
-Section.args = {
-  items: [
-    { href: '#', label: 'Countries' },
-    { href: '#', label: 'States' },
-    { href: '#', label: 'Cities' },
-  ],
-  title: "Explore",
-};
+import React from 'react';
+
+import FooterSection from './FooterSection';
+import { FooterSectionProps } from './sharedTypes';
+
+// Default
+export default {
+  title: 'Molecules/FooterSection',
+};
+
+// Templates
+function FooterSectionTemplate(args: FooterSectionProps) {
+  return <FooterSection {...args} />;  
+}
+
+// Stories
+export const Section = FooterSectionTemplate.bind({});
+Section.args = {
+  items: [
+    { href: '#', label: 'Countries' },
+    { href: '#', label: 'States' },
+    { href: '#', label: 'Cities' },
+  ],
+  title: "Explore",
+};

package/src/stories/molecules/FooterSection/FooterSection.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-
-import { FooterSectionProps } from './sharedTypes';
-import Typography from '../../atoms/Typography/Typography';
-
-function FooterSection({ items, title }: FooterSectionProps) {
-  return (
-      <Box>
-          <Typography mb={2} isCap category="secondary" size="medium-medium" sx={{ color: "var(--teal)" }}>{title}</Typography>
-          {items?.map((item) => (
-              <Link
-                  key={item.label}
-                  sx={{ "&:hover": { color: "var(--white)" } }}
-                  underline="hover"
-                  color="palette.common.white"
-                  href={item.href}
-              >
-                  <Typography
-                      mb={1}
-                      category="secondary"
-                      size="small-book"
-                      sx={{ color: "var(--white)", opacity: 0.75 }}
-                  >
-                      {item.label}
-                  </Typography>
-              </Link>
-          ))}
-      </Box>
-  );
-}
-export default FooterSection;
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+
+import { FooterSectionProps } from './sharedTypes';
+import Typography from '../../atoms/Typography/Typography';
+
+function FooterSection({ items, title }: FooterSectionProps) {
+  return (
+      <Box>
+          <Typography mb={2} isCap category="secondary" size="medium-medium" sx={{ color: "var(--teal)" }}>{title}</Typography>
+          {items?.map((item) => (
+              <Link
+                  key={item.label}
+                  sx={{ "&:hover": { color: "var(--white)" } }}
+                  underline="hover"
+                  color="palette.common.white"
+                  href={item.href}
+              >
+                  <Typography
+                      mb={1}
+                      category="secondary"
+                      size="small-book"
+                      sx={{ color: "var(--white)", opacity: 0.75 }}
+                  >
+                      {item.label}
+                  </Typography>
+              </Link>
+          ))}
+      </Box>
+  );
+}
+export default FooterSection;

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

@@ -1,6 +1,6 @@
-import { LinkItem } from "stories/organisms/Footer/sharedTypes";
-
-export type FooterSectionProps = {
-    items: [LinkItem];
-    title: string;
-}
+import { LinkItem } from "stories/organisms/Footer/sharedTypes";
+
+export type FooterSectionProps = {
+    items: [LinkItem];
+    title: string;
+}

package/src/stories/molecules/GlobalNavItem/GlobalNavItem.stories.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-
-import GlobalNavItem, { GlobalNavItemProps } from './GlobalNavItem';
-
-// Default
-export default {
-  title: 'Molecules/GlobalNavItem',
-};
-
-// Templates
-function GlobalNavItemTemplate(args: Readonly<GlobalNavItemProps>) {
-  return <GlobalNavItem {...args} />;  
-}
-
-// Stories
-export const Item = GlobalNavItemTemplate.bind({});
-Item.args = {
-  item: {
-    label: 'Flex Leagues',
-  },
-  onClick: () => { console.log("you clicked me!"); }
-};
+import React from 'react';
+
+import GlobalNavItem, { GlobalNavItemProps } from './GlobalNavItem';
+
+// Default
+export default {
+  title: 'Molecules/GlobalNavItem',
+};
+
+// Templates
+function GlobalNavItemTemplate(args: Readonly<GlobalNavItemProps>) {
+  return <GlobalNavItem {...args} />;  
+}
+
+// Stories
+export const Item = GlobalNavItemTemplate.bind({});
+Item.args = {
+  item: {
+    label: 'Flex Leagues',
+  },
+  onClick: () => { console.log("you clicked me!"); }
+};

package/src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import { getClickAttrs } from '../../utils/constants';
-import { RightChevron } from '../../atoms/Icons/Icons.stories';
-import Typography from '../../atoms/Typography/Typography';
-
-export interface GlobalNavItemProps {
-    item: {
-      label: string;
-      filterType: string;
-      sportType: string;
-      isLeagues?: boolean;
-      data?: object;
-    }
-    onClick: (item: object) => void;
-  }
-
-function GlobalNavItem({ 
-  item, onClick
-}: Readonly<GlobalNavItemProps>) {
-  const handleOnClick = (item: object) => { 
-    onClick(item);
-  };
-
-  return (
-      <Button
-          onClick={() => handleOnClick(item)}
-          {...getClickAttrs({
-            category: 'Global Search Category',
-            context: item?.label,
-            location: 'Global search CTA',
-          })}
-          sx={{ 
-            textTransform: 'none',
-            color: 'var(--black)',
-            padding: 0,
-            borderBottom: '.5px solid var(--cool-grey-500)',
-            borderRadius: 0,
-            '&:hover': { backgroundColor: 'transparent' }
-          }}
-      >
-          <Box display="flex" alignItems="center" height="32px" width="100%" minWidth="194px" justifyContent="space-between">
-              <Typography weight={325} category="secondary" size="small-medium" color="var(--black)">{item?.label}</Typography>
-              <RightChevron size={12} color="var(--black)" />
-          </Box>
-      </Button>
-  );
-}
-export default GlobalNavItem;
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { getClickAttrs } from '../../utils/constants';
+import { RightChevron } from '../../atoms/Icons/Icons.stories';
+import Typography from '../../atoms/Typography/Typography';
+
+export interface GlobalNavItemProps {
+    item: {
+      label: string;
+      filterType: string;
+      sportType: string;
+      isLeagues?: boolean;
+      data?: object;
+    }
+    onClick: (item: object) => void;
+  }
+
+function GlobalNavItem({ 
+  item, onClick
+}: Readonly<GlobalNavItemProps>) {
+  const handleOnClick = (item: object) => { 
+    onClick(item);
+  };
+
+  return (
+      <Button
+          onClick={() => handleOnClick(item)}
+          {...getClickAttrs({
+            category: 'Global Search Category',
+            context: item?.label,
+            location: 'Global search CTA',
+          })}
+          sx={{ 
+            textTransform: 'none',
+            color: 'var(--black)',
+            padding: 0,
+            borderBottom: '.5px solid var(--cool-grey-500)',
+            borderRadius: 0,
+            '&:hover': { backgroundColor: 'transparent' }
+          }}
+      >
+          <Box display="flex" alignItems="center" height="32px" width="100%" minWidth="194px" justifyContent="space-between">
+              <Typography weight={325} category="secondary" size="small-medium" color="var(--black)">{item?.label}</Typography>
+              <RightChevron size={12} color="var(--black)" />
+          </Box>
+      </Button>
+  );
+}
+export default GlobalNavItem;

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

@@ -1,96 +1,96 @@
-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 WithSubtitle = SquareAvatarWithNameTemplate.bind({});
-WithSubtitle.args = {
-  avatarWidth: '40px',
-  avatarHeight: '40px',
-  avatarFontSize: "medium-medium", 
-  name: "Team Dream",
-  subtitle: '3 players'
-};
-
-export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
-WithLowercaseName.args = {
-  name: "team dream",
-};
-
-export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
-WithLongName.args = {
-  name: "Team Dreamadeamadeamadeamadeam",
-};
-
-export const WithMultipleNames = SquareAvatarWithNameTemplate.bind({});
-WithMultipleNames.args = {
-  name: "Team Dream Nightmare And Everything In Between",
-};
-
-export const WithMultipleNamesAndCharTypes = SquareAvatarWithNameTemplate.bind({});
-WithMultipleNamesAndCharTypes.args = {
-  name: "Team - Dream * Nightmare And Everything In Between",
-};
-
-export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
-WithLongLinkName.args = {
-  name: "Team Dreamadeamadeamadeamadeam",
-  href: "https://www.reddit.com",
-  maxLinkWidth: "200px"
-};
-
-export const Disabled = SquareAvatarWithNameTemplate.bind({});
-Disabled.args = {
-  name: "Bye",
-  disabled: 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 WithSubtitle = SquareAvatarWithNameTemplate.bind({});
+WithSubtitle.args = {
+  avatarWidth: '40px',
+  avatarHeight: '40px',
+  avatarFontSize: "medium-medium", 
+  name: "Team Dream",
+  subtitle: '3 players'
+};
+
+export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+  name: "team dream",
+};
+
+export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongName.args = {
+  name: "Team Dreamadeamadeamadeamadeam",
+};
+
+export const WithMultipleNames = SquareAvatarWithNameTemplate.bind({});
+WithMultipleNames.args = {
+  name: "Team Dream Nightmare And Everything In Between",
+};
+
+export const WithMultipleNamesAndCharTypes = SquareAvatarWithNameTemplate.bind({});
+WithMultipleNamesAndCharTypes.args = {
+  name: "Team - Dream * Nightmare And Everything In Between",
+};
+
+export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongLinkName.args = {
+  name: "Team Dreamadeamadeamadeamadeam",
+  href: "https://www.reddit.com",
+  maxLinkWidth: "200px"
+};
+
+export const Disabled = SquareAvatarWithNameTemplate.bind({});
+Disabled.args = {
+  name: "Bye",
+  disabled: true,
+};