@universal-tennis/ui-shared 0.0.22 → 0.0.24

package/src/stories/atoms/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React, {ReactElement} from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
+import {colors} from '../../theme/colors';
 
 type ButtonProps = {
   children: string | ReactElement;
@@ -28,37 +29,37 @@ const StyledButton = styled(MuiButton)({
 });
 
 const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
-  backgroundColor: 'var(--black)',
-  color: 'var(--white)',
+  backgroundColor: colors.black,
+  color: colors.white,
   width: props.isExpanded ? '100%' : 'inherit',
   
   '&:hover': {
-    backgroundColor: 'var(--darkest-grey)',
-    borderColor: 'var(--darkest-grey)',
+    backgroundColor: colors.darkestGrey,
+    borderColor: colors.darkestGrey,
   },
   '&:disabled': {
-    backgroundColor: 'var(--lightest-grey)',
-    borderColor: 'var(--lightest-grey)',
+    backgroundColor: colors.lightGrey,
+    borderColor: colors.lightGrey,
   },
 }));
 
 const SecondaryButton = styled(StyledButton)({
-  borderColor: 'var(--black)',
+  borderColor: colors.black,
   backgroundColor: 'transparent',
-  color: 'var(--black)',
+  color: colors.black,
 
   '&:hover': {
-    borderColor: 'var(--darkest-grey)',
+    borderColor: colors.darkestGrey,
   },
   '&:disabled': {
-    borderColor: 'var(--disabled)'
+    borderColor: colors.disabled
   },
 });
 
 const LinkButton = styled(MuiButton)({
   borderColor: 'transparent',
   backgroundColor: 'transparent',
-  color: 'var(--primary)',
+  color: colors.primary,
   textTransform: 'inherit',
   justifyContent: 'left',
   padding: 0,
@@ -68,7 +69,7 @@ const LinkButton = styled(MuiButton)({
   },
 
   '&:disabled': {
-    borderColor: 'var(--disabled)'
+    borderColor: colors.disabled
   },
 });
 

package/src/stories/atoms/Typography/Typography.tsx

@@ -1,7 +1,6 @@
 import React, {ReactElement} from 'react';
 import MuiTypography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import "../../assets/css/typography.scss";
 
 type TypographyProps = {
   children: string | ReactElement;
@@ -53,19 +52,19 @@ const SECONDARY_SIZES = {
 };
 
 const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--display-font)',
+  fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
   fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
   fontWeight: props.weight
 }));
 
 const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--primary-font)',
+  fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
   fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
   fontWeight: props.weight
 }));
 
 const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--secondary-font)',
+  fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
   fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
   textTransform: props.isCap ? 'uppercase' : 'inherit',
   fontWeight: props.weight

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -13,11 +13,11 @@ type ContactCardProps = {
   name: string;
   phone: string;
   email: string;
-  handleOnMessageClick?: VoidFunction;
+  onMessageClick?: VoidFunction;
 }
 
 export default function ContactCard({
-  name, phone, email, handleOnMessageClick, ...props 
+  name, phone, email, onMessageClick, ...props 
 }: ContactCardProps) {
   const firstName = name.split(" ")[0];
   const parsedNumber = parsePhoneNumber(phone || '');
@@ -40,7 +40,7 @@ export default function ContactCard({
             <Typography category="secondary" size="x-small-book">{email}</Typography>
         </Link>
         )}
-        <Button onClick={handleOnMessageClick} category="link" style={{marginTop: '8px'}}>
+        <Button onClick={onMessageClick} category="link" style={{marginTop: '8px'}}>
           <>
             <img src={ChatIcon} alt="message" style={{width: '20px'}} />
             <Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">

package/src/stories/molecules/Cards/shared.tsx

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { colors } from 'stories/theme/colors';
 
 export const StyledCard = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '4px',
   padding: '16px',
-  border: '1px solid var(--cool-grey-300)',
+  border: `1px solid ${colors.coolGrey300}`,
   
   '&:hover': {
     cursor: 'pointer'

package/src/stories/theme/colors.ts

@@ -0,0 +1,10 @@
+export const colors = {
+  primary: '#008ded',
+  secondary: '#e0004f',
+  disabled: '#bac6d6',
+  black: '#000',
+  white: '#fff',
+  lightGrey: '#d7e0ea',
+  darkestGrey: '#3b4859',
+  coolGrey300: '#DDE3EB'
+};

package/.storybook/variables.scss

@@ -1,12 +0,0 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --darkest-grey: #3b4859;
-
-    /* colors */
-    --cool-grey-300: #DDE3EB;
-}

package/src/stories/assets/css/variables.scss

@@ -1,12 +0,0 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --darkest-grey: #3b4859;
-
-    /* colors */
-    --cool-grey-300: #DDE3EB;
-}