@universal-tennis/ui-shared 0.1.96 → 0.1.98

package/src/stories/atoms/Icons/VisibilityIcon.tsx

@@ -1,12 +1,12 @@
-/* eslint-disable max-len */
-import React from 'react';
-import { IconProps } from './sharedTypes';
-
-export default function VisibilityIcon({ size, color }: IconProps) {
-  return (  
-      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
-          <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />
-          <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
-      </svg>
-  );
-}
+/* eslint-disable max-len */
+import React from 'react';
+import { IconProps } from './sharedTypes';
+
+export default function VisibilityIcon({ size, color }: IconProps) {
+  return (  
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
+          <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />
+          <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
+      </svg>
+  );
+}

package/src/stories/atoms/Icons/VisibilityOffIcon.tsx

@@ -1,13 +1,13 @@
-/* eslint-disable max-len */
-import React from 'react';
-import { IconProps } from './sharedTypes';
-
-export default function VisibilityOffIcon({ size, color }: IconProps) {
-  return (  
-      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
-          <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
-          <path fillRule="evenodd" clipRule="evenodd" d="M0.646522 15.6464C0.45126 15.4511 0.45126 15.1346 0.646522 14.9393L14.7887 0.797158C14.9839 0.601896 15.3005 0.601896 15.4958 0.797158C15.691 0.99242 15.691 1.309 15.4958 1.50426L1.35363 15.6464C1.15837 15.8417 0.841784 15.8417 0.646522 15.6464Z" />
-          <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />
-      </svg>
-  );
-}
+/* eslint-disable max-len */
+import React from 'react';
+import { IconProps } from './sharedTypes';
+
+export default function VisibilityOffIcon({ size, color }: IconProps) {
+  return (  
+      <svg width={size} height={size} viewBox="0 0 16 16" fill={color} xmlns="http://www.w3.org/2000/svg">
+          <path fillRule="evenodd" clipRule="evenodd" d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM8 11C9.65685 11 11 9.65685 11 8C11 6.34315 9.65685 5 8 5C6.34315 5 5 6.34315 5 8C5 9.65685 6.34315 11 8 11Z" />
+          <path fillRule="evenodd" clipRule="evenodd" d="M0.646522 15.6464C0.45126 15.4511 0.45126 15.1346 0.646522 14.9393L14.7887 0.797158C14.9839 0.601896 15.3005 0.601896 15.4958 0.797158C15.691 0.99242 15.691 1.309 15.4958 1.50426L1.35363 15.6464C1.15837 15.8417 0.841784 15.8417 0.646522 15.6464Z" />
+          <path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 8 3.58172 14 8 14C12.4183 14 16 8 16 8C16 8 12.4183 2 8 2C3.58172 2 0 8 0 8ZM1.19246 8C1.26436 8.10528 1.34719 8.22394 1.44034 8.35336C1.82566 8.88878 2.38093 9.59917 3.06268 10.3055C4.47204 11.7658 6.22099 13 8 13C9.77901 13 11.528 11.7658 12.9373 10.3055C13.6191 9.59917 14.1743 8.88878 14.5597 8.35336C14.6528 8.22394 14.7356 8.10528 14.8075 8C14.7356 7.89472 14.6528 7.77606 14.5597 7.64664C14.1743 7.11122 13.6191 6.40083 12.9373 5.69446C11.528 4.2342 9.77901 3 8 3C6.22099 3 4.47204 4.2342 3.06268 5.69446C2.38093 6.40083 1.82566 7.11122 1.44034 7.64664C1.34719 7.77606 1.26436 7.89472 1.19246 8Z" />
+      </svg>
+  );
+}

package/src/stories/atoms/Icons/WinnerIndicatorIcon.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import { WinnerIndicatorIconProps } from './sharedTypes';
-
-const arrowStyles = {
-  borderTop: '10px solid transparent',
-  borderBottom: '10px solid transparent',
-  borderLeft: '10px solid white',
-  height: 0,
-  width: 0
-};
-const rectangleStyles = {
-  background: 'white',
-  height: 20,
-  width: 3
-};
-
-const blackArrowStyles = {
-  borderTop: '8px solid transparent',
-  borderBottom: '8px solid transparent',
-  borderLeft: '8px solid black',
-  height: 0,
-  width: 0
-};
-
-const blackRectangleStyles = {
-  background: 'black',
-  height: 16,
-  width: 3
-};
-
-export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps) {
-  return (
-      <Box sx={sx} display="flex">
-          <Box style={isBlack ? blackRectangleStyles : rectangleStyles} />
-          <Box style={isBlack ? blackArrowStyles : arrowStyles} />
-      </Box>
-  );
-}
+import React from 'react';
+import Box from '@mui/material/Box';
+import { WinnerIndicatorIconProps } from './sharedTypes';
+
+const arrowStyles = {
+  borderTop: '10px solid transparent',
+  borderBottom: '10px solid transparent',
+  borderLeft: '10px solid white',
+  height: 0,
+  width: 0
+};
+const rectangleStyles = {
+  background: 'white',
+  height: 20,
+  width: 3
+};
+
+const blackArrowStyles = {
+  borderTop: '8px solid transparent',
+  borderBottom: '8px solid transparent',
+  borderLeft: '8px solid black',
+  height: 0,
+  width: 0
+};
+
+const blackRectangleStyles = {
+  background: 'black',
+  height: 16,
+  width: 3
+};
+
+export default function WinnerIndicatorIcon({ sx, isBlack }: WinnerIndicatorIconProps) {
+  return (
+      <Box sx={sx} display="flex">
+          <Box style={isBlack ? blackRectangleStyles : rectangleStyles} />
+          <Box style={isBlack ? blackArrowStyles : arrowStyles} />
+      </Box>
+  );
+}

package/src/stories/atoms/Icons/sharedTypes.tsx

@@ -1,12 +1,12 @@
-import { SxProps } from '@mui/material';
-
-export interface IconProps {
-    size?: number;
-    color?: string;
-    width?: number;
-    height?: number;
-  }
-export interface WinnerIndicatorIconProps {
-  sx?: SxProps;
-  isBlack?: boolean;
-}
+import { SxProps } from '@mui/material';
+
+export interface IconProps {
+    size?: number;
+    color?: string;
+    width?: number;
+    height?: number;
+  }
+export interface WinnerIndicatorIconProps {
+  sx?: SxProps;
+  isBlack?: boolean;
+}

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"
+      />
+  );
+}