fix: Use correct types

AppQuality · Apr 2, 2024 · bc2fcc4 · bc2fcc4
1 parent 3021678
commit bc2fcc4
Showing 1 changed file with 52 additions and 54 deletions.
diff --git a/src/stories/typography/Typography.tsx b/src/stories/typography/Typography.tsx
@@ -16,7 +16,7 @@ export interface TextProps extends TypographyProps {
 const generateResponsiveRule = (
   type: string,
   size: { desktop: string; mobile: string | boolean },
-  breakpoint: string
+  breakpoint: string,
 ) => {
   let rule = `${type}: ${size.desktop};`;
   if (size.mobile) {
@@ -28,70 +28,67 @@ const generateResponsiveRule = (
   return rule;
 };
 
-export const Title = styled.div<{
-  size: TitleProps["size"];
-  color?: TitleProps["color"];
-}>(({ theme, size, color, variant = false }: TitleProps) => {
-  const { palette, typography, grid, variants } = theme;
+export const Title = styled.div<TitleProps>(
+  ({ theme, size, color, variant = false }: TitleProps) => {
+    const { palette, typography, grid, variants } = theme;
 
-  const titleSizes = {
-    xs: { desktop: "14px", mobile: "16px" },
-    s: { desktop: "16px", mobile: false },
-    ms: { desktop: "20px", mobile: false },
-    mt: { desktop: "24px", mobile: false },
-    m: { desktop: "28px", mobile: false },
-    l: { desktop: "32px", mobile: false },
-    xl: { desktop: "40px", mobile: false },
-  };
-  const titleWeight = {
-    xs: {
-      desktop: typography.fontWeight.medium.toString(),
-      mobile: typography.fontWeight.bold.toString(),
-    },
-    s: { desktop: typography.fontWeight.bold.toString(), mobile: false },
-    ms: { desktop: typography.fontWeight.bold.toString(), mobile: false },
-    mt: { desktop: typography.fontWeight.normal.toString(), mobile: false },
-    m: { desktop: typography.fontWeight.medium.toString(), mobile: false },
-    l: { desktop: typography.fontWeight.medium.toString(), mobile: false },
-    xl: { desktop: typography.fontWeight.medium.toString(), mobile: false },
-  };
-  let fontSize = "font-size: 16px;";
-  let fontWeight = "font-weight: 500;";
+    const titleSizes = {
+      xs: { desktop: "14px", mobile: "16px" },
+      s: { desktop: "16px", mobile: false },
+      ms: { desktop: "20px", mobile: false },
+      mt: { desktop: "24px", mobile: false },
+      m: { desktop: "28px", mobile: false },
+      l: { desktop: "32px", mobile: false },
+      xl: { desktop: "40px", mobile: false },
+    };
+    const titleWeight = {
+      xs: {
+        desktop: typography.fontWeight.medium.toString(),
+        mobile: typography.fontWeight.bold.toString(),
+      },
+      s: { desktop: typography.fontWeight.bold.toString(), mobile: false },
+      ms: { desktop: typography.fontWeight.bold.toString(), mobile: false },
+      mt: { desktop: typography.fontWeight.normal.toString(), mobile: false },
+      m: { desktop: typography.fontWeight.medium.toString(), mobile: false },
+      l: { desktop: typography.fontWeight.medium.toString(), mobile: false },
+      xl: { desktop: typography.fontWeight.medium.toString(), mobile: false },
+    };
+    let fontSize = "font-size: 16px;";
+    let fontWeight = "font-weight: 500;";
 
-  if (Object.keys(titleSizes).includes(size)) {
-    fontSize = generateResponsiveRule(
-      "font-size",
-      titleSizes[size],
-      grid.breakpoints.lg
-    );
-  }
-  if (Object.keys(titleWeight).includes(size)) {
-    fontWeight = generateResponsiveRule(
-      "font-weight",
-      titleWeight[size],
-      grid.breakpoints.lg
-    );
-  }
+    if (Object.keys(titleSizes).includes(size)) {
+      fontSize = generateResponsiveRule(
+        "font-size",
+        titleSizes[size],
+        grid.breakpoints.lg,
+      );
+    }
+    if (Object.keys(titleWeight).includes(size)) {
+      fontWeight = generateResponsiveRule(
+        "font-weight",
+        titleWeight[size],
+        grid.breakpoints.lg,
+      );
+    }
 
-  const colors = variant ? variants : palette;
+    const colors = variant ? variants : palette;
 
-  return `
+    return `
   color: ${color ? colors[color] : colors.primary};
   font-family: ${typography.fontFamily.base};
   line-height: 1.5;
   ${fontSize}
   ${fontWeight}
 `;
-});
+  },
+);
 
-export const Text = styled.div<{
-  small?: TextProps["small"];
-  color?: TextProps["color"];
-}>(({ theme, small, color, variant = true }: TextProps) => {
-  const { palette, variants, typography } = theme;
-  const colors = variant ? variants : palette;
+export const Text = styled.div<TextProps>(
+  ({ theme, small, color, variant = true }: TextProps) => {
+    const { palette, variants, typography } = theme;
+    const colors = variant ? variants : palette;
 
-  return `
+    return `
   color: ${color ? colors[color] : colors.primary};
   font-family: ${typography.fontFamily.base};
   font-weight: ${
@@ -105,4 +102,5 @@ export const Text = styled.div<{
     padding-left: 1em;
   }
 `;
-});
+  },
+);