@universal-tennis/ui-shared 0.1.86 → 0.1.88

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

@@ -1,185 +1,185 @@
-import React from 'react';
-import MuiTypography, { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import "../../assets/css/typography.css";
-
-interface TypographyProps extends MuiTypographyProps {
-  category?: string;
-  size?: string;
-  isCap?: boolean;
-  weight?: number;
-}
-
-const DISPLAY_SIZES = {
-  "XXX-large": '120px',
-  "XX-large": '100px',
-  "X-large": '75px',
-  large: '50px',
-  "large-light": '50px',
-  "medium-book": '36px',
-};
-
-const PRIMARY_SIZES = {
-  "large-bold": '34px',
-  "large-book": '34px',
-  "large-light": '34px',
-  "medium-semibold": '22px',
-  "medium-medium": '22px',
-  "medium-book": '22px',
-  "small-book": '16px',
-  "x-small-book": '12px',
-};
-
-const SECONDARY_SIZES = {
-  "large-medium": '20px',
-  "large-book": '20px',
-  "medium-medium": '16px',
-  "medium-book": '16px',
-  "small-medium-cap": '14px',
-  "small-medium": '14px',
-  "small-book": '14px',
-  "x-small-medium-cap": '12px',
-  "x-small-medium": '12px',
-  "x-small-book-cap": '12px',
-  "x-small-book": '12px',
-  "xx-small-medium-cap": '10px',
-  "xx-small-book": '10px',
-};
-
-const DisplayTypography: React.FC<TypographyProps> = styled(MuiTypography, {
-  shouldForwardProp: (prop: string) => prop !== 'isCap'
-})(({ size, weight }: TypographyProps) => ({
-  fontFamily: 'var(--display-font)',
-  fontSize: DISPLAY_SIZES[size as keyof typeof DISPLAY_SIZES],
-  fontWeight: weight
-}));
-
-const PrimaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
-  shouldForwardProp: (prop: string) => prop !== 'isCap'
-})(({ size, weight }: TypographyProps) => ({
-  fontFamily: 'var(--primary-font)',
-  fontSize: PRIMARY_SIZES[size as keyof typeof PRIMARY_SIZES],
-  fontWeight: weight
-}));
-
-const SecondaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
-  shouldForwardProp: (prop: string) => prop !== 'isCap'
-})(({ isCap, weight, size }: TypographyProps) => ({
-  fontFamily: 'var(--secondary-font)',
-  fontSize: SECONDARY_SIZES[size as keyof typeof SECONDARY_SIZES],
-  textTransform: isCap ? 'uppercase' : 'inherit',
-  fontWeight: weight
-}));
-
-export default function Typography({
-  children, category, size, ...props 
-}: TypographyProps) {
-  const isCap = size?.includes("cap");
-
-  let weight;
-  switch (true) {
-    case size?.includes("light"):
-      weight = 300;
-      break;
-    case size?.includes("book"):
-      weight = 400;
-      break;
-    case size?.includes("medium"):
-      weight = 500;
-      break;
-    case size?.includes("semibold"):
-      weight = 600;
-      break;
-    case size?.includes("bold"):
-      weight = 700;
-      break;
-    default:
-      weight = 500;
-      break;
-  }
-
-  switch (category) {
-    case 'primary':
-      return (
-          <PrimaryTypography
-              size={size}
-              {...props}
-          >
-              {children}
-          </PrimaryTypography>
-      );
-    case 'secondary':
-      return (
-          <SecondaryTypography
-              size={size}
-              isCap={isCap}
-              weight={weight}
-              {...props}
-          >
-              {children}
-          </SecondaryTypography>
-      );
-    case 'display':
-      return (
-          <DisplayTypography
-              size={size}
-              weight={weight}
-              {...props}
-          >
-              {children}
-          </DisplayTypography>
-      );
-    default: 
-      return (
-          <PrimaryTypography
-              size={size}
-              weight={weight}
-              {...props}
-          >
-              {children}
-          </PrimaryTypography>
-      );
-  }
-}
-
-export const DISPLAY_SIZES_ENUM = {
-  XXXLarge: "XXX-large",
-  XXLarge: "XX-large",
-  XLarge: "X-large",
-  Large: 'large',
-  LargeLight: "large-light",
-  MediumBook: "medium-book",
-};
-
-export const PRIMARY_SIZES_ENUM = {
-  LargeBold: "large-bold",
-  LargeBook: "large-book",
-  LargeLight: "large-light",
-  MediumSemibold: "medium-semibold",
-  MediumMedium: "medium-medium",
-  MediumBook: "medium-book",
-  SmallBook: "small-book",
-  XSmallBook: "x-small-book",
-};
-
-export const SECONDARY_SIZES_ENUM = {
-  LargeMedium: "large-medium",
-  LargeBook: "large-book",
-  MediumMedium: "medium-medium",
-  MediumBook: "medium-book",
-  SmallMediumCap: "small-medium-cap",
-  SmallMedium: "small-medium",
-  SmallBook: "small-book",
-  XSmallMediumCap: "x-small-medium-cap",
-  XSmallMedium: "x-small-medium",
-  XSmallBookCap: "x-small-book-cap",
-  XSmallBook: "x-small-book",
-  XXSmallMediumCap: "xx-small-medium-cap",
-  XXSmallBook: "xx-small-book",
-};
-
-export const CATEGORY_ENUM = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  DISPLAY: 'display'
-};
+import React from 'react';
+import MuiTypography, { TypographyProps as MuiTypographyProps } from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import "../../assets/css/typography.css";
+
+interface TypographyProps extends MuiTypographyProps {
+  category?: string;
+  size?: string;
+  isCap?: boolean;
+  weight?: number;
+}
+
+const DISPLAY_SIZES = {
+  "XXX-large": '120px',
+  "XX-large": '100px',
+  "X-large": '75px',
+  large: '50px',
+  "large-light": '50px',
+  "medium-book": '36px',
+};
+
+const PRIMARY_SIZES = {
+  "large-bold": '34px',
+  "large-book": '34px',
+  "large-light": '34px',
+  "medium-semibold": '22px',
+  "medium-medium": '22px',
+  "medium-book": '22px',
+  "small-book": '16px',
+  "x-small-book": '12px',
+};
+
+const SECONDARY_SIZES = {
+  "large-medium": '20px',
+  "large-book": '20px',
+  "medium-medium": '16px',
+  "medium-book": '16px',
+  "small-medium-cap": '14px',
+  "small-medium": '14px',
+  "small-book": '14px',
+  "x-small-medium-cap": '12px',
+  "x-small-medium": '12px',
+  "x-small-book-cap": '12px',
+  "x-small-book": '12px',
+  "xx-small-medium-cap": '10px',
+  "xx-small-book": '10px',
+};
+
+const DisplayTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ size, weight }: TypographyProps) => ({
+  fontFamily: 'var(--display-font)',
+  fontSize: DISPLAY_SIZES[size as keyof typeof DISPLAY_SIZES],
+  fontWeight: weight
+}));
+
+const PrimaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ size, weight }: TypographyProps) => ({
+  fontFamily: 'var(--primary-font)',
+  fontSize: PRIMARY_SIZES[size as keyof typeof PRIMARY_SIZES],
+  fontWeight: weight
+}));
+
+const SecondaryTypography: React.FC<TypographyProps> = styled(MuiTypography, {
+  shouldForwardProp: (prop: string) => prop !== 'isCap'
+})(({ isCap, weight, size }: TypographyProps) => ({
+  fontFamily: 'var(--secondary-font)',
+  fontSize: SECONDARY_SIZES[size as keyof typeof SECONDARY_SIZES],
+  textTransform: isCap ? 'uppercase' : 'inherit',
+  fontWeight: weight
+}));
+
+export default function Typography({
+  children, category, size, ...props 
+}: TypographyProps) {
+  const isCap = size?.includes("cap");
+
+  let weight;
+  switch (true) {
+    case size?.includes("light"):
+      weight = 300;
+      break;
+    case size?.includes("book"):
+      weight = 400;
+      break;
+    case size?.includes("medium"):
+      weight = 500;
+      break;
+    case size?.includes("semibold"):
+      weight = 600;
+      break;
+    case size?.includes("bold"):
+      weight = 700;
+      break;
+    default:
+      weight = 500;
+      break;
+  }
+
+  switch (category) {
+    case 'primary':
+      return (
+          <PrimaryTypography
+              size={size}
+              {...props}
+          >
+              {children}
+          </PrimaryTypography>
+      );
+    case 'secondary':
+      return (
+          <SecondaryTypography
+              size={size}
+              isCap={isCap}
+              weight={weight}
+              {...props}
+          >
+              {children}
+          </SecondaryTypography>
+      );
+    case 'display':
+      return (
+          <DisplayTypography
+              size={size}
+              weight={weight}
+              {...props}
+          >
+              {children}
+          </DisplayTypography>
+      );
+    default: 
+      return (
+          <PrimaryTypography
+              size={size}
+              weight={weight}
+              {...props}
+          >
+              {children}
+          </PrimaryTypography>
+      );
+  }
+}
+
+export const DISPLAY_SIZES_ENUM = {
+  XXXLarge: "XXX-large",
+  XXLarge: "XX-large",
+  XLarge: "X-large",
+  Large: 'large',
+  LargeLight: "large-light",
+  MediumBook: "medium-book",
+};
+
+export const PRIMARY_SIZES_ENUM = {
+  LargeBold: "large-bold",
+  LargeBook: "large-book",
+  LargeLight: "large-light",
+  MediumSemibold: "medium-semibold",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallBook: "small-book",
+  XSmallBook: "x-small-book",
+};
+
+export const SECONDARY_SIZES_ENUM = {
+  LargeMedium: "large-medium",
+  LargeBook: "large-book",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallMediumCap: "small-medium-cap",
+  SmallMedium: "small-medium",
+  SmallBook: "small-book",
+  XSmallMediumCap: "x-small-medium-cap",
+  XSmallMedium: "x-small-medium",
+  XSmallBookCap: "x-small-book-cap",
+  XSmallBook: "x-small-book",
+  XXSmallMediumCap: "xx-small-medium-cap",
+  XXSmallBook: "xx-small-book",
+};
+
+export const CATEGORY_ENUM = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DISPLAY: 'display'
+};

package/src/stories/atoms/UTMap/UTMap.stories.tsx

@@ -1,43 +1,43 @@
-import React from 'react';
-
-import UTMap, { MapProps } from './UTMap';
-
-// Default
-export default {
-  title: 'Atoms/Map',
-};
-
-// Templates
-function MapTemplate(args: MapProps) {
-  return <UTMap {...args} />;  
-}
-
-// Stories
-export const Default = MapTemplate.bind({});
-Default.args = {
-  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-};
-
-export const WithCustomStringHeight = MapTemplate.bind({});
-WithCustomStringHeight.args = {
-  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-  height: '320px'
-};
-
-export const WithCustomNumberHeight = MapTemplate.bind({});
-WithCustomNumberHeight.args = {
-  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-  height: 320
-};
-
-export const WithCustomStringWidth = MapTemplate.bind({});
-WithCustomStringWidth.args = {
-  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-  width: '620px'
-};
-
-export const WithCustomNumberWidth = MapTemplate.bind({});
-WithCustomNumberWidth.args = {
-  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
-  width: 620
-};
+import React from 'react';
+
+import UTMap, { MapProps } from './UTMap';
+
+// Default
+export default {
+  title: 'Atoms/Map',
+};
+
+// Templates
+function MapTemplate(args: MapProps) {
+  return <UTMap {...args} />;  
+}
+
+// Stories
+export const Default = MapTemplate.bind({});
+Default.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+};
+
+export const WithCustomStringHeight = MapTemplate.bind({});
+WithCustomStringHeight.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  height: '320px'
+};
+
+export const WithCustomNumberHeight = MapTemplate.bind({});
+WithCustomNumberHeight.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  height: 320
+};
+
+export const WithCustomStringWidth = MapTemplate.bind({});
+WithCustomStringWidth.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  width: '620px'
+};
+
+export const WithCustomNumberWidth = MapTemplate.bind({});
+WithCustomNumberWidth.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  width: 620
+};

package/src/stories/atoms/UTMap/UTMap.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-
-export interface MapProps {
-    placeId: string;
-    height: string | number;
-    width: string | number;
-  }
-
-export default function UTMap({
-  placeId, height, width
-}: MapProps) {
-  const placeParam = placeId && `q=place_id:${placeId}`;
-  const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
-  const mapHeight = height || `216px`;
-  const mapWidth = width || `100%`;
-
-  return (
-      <iframe
-          width={mapWidth}
-          height={mapHeight}
-          src={placeUrl}
-          title="Google Maps"
-      />
-  );
-}
+import React from 'react';
+
+export interface MapProps {
+    placeId: string;
+    height: string | number;
+    width: string | number;
+  }
+
+export default function UTMap({
+  placeId, height, width
+}: MapProps) {
+  const placeParam = placeId && `q=place_id:${placeId}`;
+  const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
+  const mapHeight = height || `216px`;
+  const mapWidth = width || `100%`;
+
+  return (
+      <iframe
+          width={mapWidth}
+          height={mapHeight}
+          src={placeUrl}
+          title="Google Maps"
+      />
+  );
+}