Formatted some code to pass the Lint test.

kalkulacka-one · Sep 11, 2024 · 84c5fce · 84c5fce
1 parent 6936642
commit 84c5fce
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 114 deletions.
diff --git a/apps/design-system/stories/badge.stories.tsx b/apps/design-system/stories/badge.stories.tsx
@@ -5,11 +5,12 @@ export default {
   title: "Components/Badge",
   component: Badge,
   argTypes: {
-    color: { 
-      control: {type: "select", options: ["neutral", "secondary"] } },
+    color: {
+      control: { type: "select", options: ["neutral", "secondary"] },
+    },
     icon: { control: "boolean" },
     size: {
-      control: { type: "select", options: ["with_icon", "no_icon",] },
+      control: { type: "select", options: ["with_icon", "no_icon"] },
     },
   },
   tags: ["autodocs"],

diff --git a/packages/design-system/config/color.ts b/packages/design-system/config/color.ts
@@ -7,90 +7,90 @@ const color: Pick<Config, "theme"> = {
         red: {
           100: "#BB0000",
         },
-        star:{
+        star: {
           0: "#F2B807",
         },
         neutral: {
-          "fg": '#565252',
-          "fg-hover": '#ADA6A6',
-          "fg-active": '#000000',
-          "fg-muted": '#ADA6A6',
-          "fg-strong": '#1D1C1C',
-          "fg-inverse": '#FFFFFF',
-          "fg-disabled": '#DAD8D7',
-          "container": '#FFFFFF',
-          "bg": '#F8F7F7',
-          "bg-strong-hover": '#565252',
-          "bg-strong-active": '#1D1C1C',
-          "bg-disabled": '#DAD8D7',
-          "border": '#DAD8D7',
-          "border-hover": '#ADA6A6',
-          "border-active": '#1D1C1C',
-          "border-muted": '#F8F7F7',
-          "border-strong": '#565252',
-          "border-disabled": '#DAD8D7',
-          "bg-backdrop-hover": '#33DAD8D7',
-          '7010': '#1ADAD8D7',
-          "bg-backdrop-active": '#99DAD8D7',
-          "overlay": '#0DFFFFFF',
-          "page": '#FFFFFF',
-      },
-      primary: {
-          "fg": '#0070F4',
-          "fg-hover": '#0A3EAF',
-          "fg-strong": '#091233',
-          "bg": '#EAF7FF',
-          "bg-strong": '#0070F4',
-          "bg-strong-hover": '#0A3EAF',
-          "bg-strong-active": '#091233',
-          "border": '#63B9FF',
-          "border-strong": '#0070F4',
-          "border-strong-hover": '#0A3EAF',
-      },
-      secondary: {
-          "fg": '#D04646',
-          "fg-hover": '#821414',
-          "bg": '#FFF4F5',
-          "fg-strong": '#821414',
-          "bg-strong": '#D04646',
-          "bg-strong-hover": '#821414',
-          "border": '#F68585',
-          "border-strong": '#D04646',
-          "border-strong-hover": '#821414',
-      },
-          palette: {
-            neutral: {
-              0: '#000000',
-              10: '#1D1C1C',
-              30: '#565252',
-              50: '#ADA6A6',
-              70: '#DAD8D7',
-              7020: '#33DAD8D7',
-              7060: '#99DAD8D7',
-              90: '#F8F7F7',
-              100: '#FFFFFF',
-              10080: '#CCFFFFFF',
-            },
-            primary: {
-              0: '#091233',
-              10: '#091233',
-              30: '#0A3EAF',
-              50: '#0070F4',
-              70: '#63B9FF',
-              90: '#EAF7FF',
-            },
-            secondary: {
-              0: '#2E0A0A',
-              10: '#2E0A0A',
-              30: '#821414',
-              50: '#D04646',
-              70: '#F68585',
-              90: '#FFF4F5',
-            },
+          fg: "#565252",
+          "fg-hover": "#ADA6A6",
+          "fg-active": "#000000",
+          "fg-muted": "#ADA6A6",
+          "fg-strong": "#1D1C1C",
+          "fg-inverse": "#FFFFFF",
+          "fg-disabled": "#DAD8D7",
+          container: "#FFFFFF",
+          bg: "#F8F7F7",
+          "bg-strong-hover": "#565252",
+          "bg-strong-active": "#1D1C1C",
+          "bg-disabled": "#DAD8D7",
+          border: "#DAD8D7",
+          "border-hover": "#ADA6A6",
+          "border-active": "#1D1C1C",
+          "border-muted": "#F8F7F7",
+          "border-strong": "#565252",
+          "border-disabled": "#DAD8D7",
+          "bg-backdrop-hover": "#33DAD8D7",
+          "7010": "#1ADAD8D7",
+          "bg-backdrop-active": "#99DAD8D7",
+          overlay: "#0DFFFFFF",
+          page: "#FFFFFF",
+        },
+        primary: {
+          fg: "#0070F4",
+          "fg-hover": "#0A3EAF",
+          "fg-strong": "#091233",
+          bg: "#EAF7FF",
+          "bg-strong": "#0070F4",
+          "bg-strong-hover": "#0A3EAF",
+          "bg-strong-active": "#091233",
+          border: "#63B9FF",
+          "border-strong": "#0070F4",
+          "border-strong-hover": "#0A3EAF",
+        },
+        secondary: {
+          fg: "#D04646",
+          "fg-hover": "#821414",
+          bg: "#FFF4F5",
+          "fg-strong": "#821414",
+          "bg-strong": "#D04646",
+          "bg-strong-hover": "#821414",
+          border: "#F68585",
+          "border-strong": "#D04646",
+          "border-strong-hover": "#821414",
+        },
+        palette: {
+          neutral: {
+            0: "#000000",
+            10: "#1D1C1C",
+            30: "#565252",
+            50: "#ADA6A6",
+            70: "#DAD8D7",
+            7020: "#33DAD8D7",
+            7060: "#99DAD8D7",
+            90: "#F8F7F7",
+            100: "#FFFFFF",
+            10080: "#CCFFFFFF",
+          },
+          primary: {
+            0: "#091233",
+            10: "#091233",
+            30: "#0A3EAF",
+            50: "#0070F4",
+            70: "#63B9FF",
+            90: "#EAF7FF",
+          },
+          secondary: {
+            0: "#2E0A0A",
+            10: "#2E0A0A",
+            30: "#821414",
+            50: "#D04646",
+            70: "#F68585",
+            90: "#FFF4F5",
+          },
         },
       },
     },
-  }
+  },
 };
 
-export default color;
+export default color;
diff --git a/packages/design-system/src/badge.tsx b/packages/design-system/src/badge.tsx
@@ -3,37 +3,29 @@ import BadgeStarIcon from "./Badge/BadgeStarIcon";
 import { cva } from "class-variance-authority";
 
 export interface BadgeProps {
-  icon?: boolean,
-  color?: "neutral" | "secondary",
-  size?: "with_icon" | "no_icon",
-  children?: React.ReactNode,
+  icon?: boolean;
+  color?: "neutral" | "secondary";
+  size?: "with_icon" | "no_icon";
+  children?: React.ReactNode;
 }
 
-
-const badge = cva(["k1-flex k1-flex-row k1-justify-center k1-items-center rounded-[0.375rem] px-[0.5rem] py-[0.25rem] k1-gap-1 m-0 font-bold uppercase relative"], {
-  variants: {
+const badge = cva(
+  [
+    "k1-flex k1-flex-row k1-justify-center k1-items-center rounded-[0.375rem] px-[0.5rem] py-[0.25rem] k1-gap-1 m-0 font-bold uppercase relative",
+  ],
+  {
+    variants: {
       color: {
-          neutral: [
-              "k1-text-[#565252]",
-              "bg-[#FFF4F5]"
-          ],
-          secondary: [
-              "k1-text-[#821414]",
-               "bg-[#F8F7F7]"
-          ]     
-          },
+        neutral: ["k1-text-[#565252]", "bg-[#FFF4F5]"],
+        secondary: ["k1-text-[#821414]", "bg-[#F8F7F7]"],
+      },
       size: {
-          with_icon: [
-              "k1-w-[4.5rem]",
-              "k1-h-[1.625rem]"
-          ],
-          no_icon: [
-              "k1-w-[3.125rem]", 
-              "k1-h-[1.5rem]"
-          ]
-      }
+        with_icon: ["k1-w-[4.5rem]", "k1-h-[1.625rem]"],
+        no_icon: ["k1-w-[3.125rem]", "k1-h-[1.5rem]"],
+      },
+    },
   },
-})
+);
 
 const Badge: React.FC<BadgeProps> = ({
   icon = false,
@@ -45,15 +37,19 @@ const Badge: React.FC<BadgeProps> = ({
   const neutralVariant = color === "neutral";
 
   return (
-    <div className={badge({ color: neutralVariant ? 'neutral' : 'secondary', size: showIcon ? 'with_icon' : 'no_icon' })}
-    >    
-        {showIcon && (
+    <div
+      className={badge({
+        color: neutralVariant ? "neutral" : "secondary",
+        size: showIcon ? "with_icon" : "no_icon",
+      })}
+    >
+      {showIcon && (
         <div className="k1-inline-block k1-items-center">
           <BadgeStarIcon />
         </div>
       )}
       <div
-        className={`flex text-[0.625rem] font-bold leading-[1.125rem] k1-border-hidden k1-outline-none w-[2.125rem] h-[1.125rem] k1-items-center k1-justify-center k1-inline-block`}   
+        className={`flex text-[0.625rem] font-bold leading-[1.125rem] k1-border-hidden k1-outline-none w-[2.125rem] h-[1.125rem] k1-items-center k1-justify-center k1-inline-block`}
       >
         {children}
       </div>

diff --git a/packages/design-system/src/label.tsx b/packages/design-system/src/label.tsx
@@ -3,7 +3,6 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { forwardRef } from "react";
 import cn from "classnames";
 
-
 //need to add font Inter and create custom label text
 const labelVariants = cva(
   "k1-pl-1 k1-pr-1 k1-flex k1-flex-row k1-justify-space-between k1-items-start k1-absolute k1-left-[0.75rem] k1-top-[-0.5rem] k1-bg-neutral-fg-hover k1-bg-white k1-uppercase k1-font-bold k1-tracking-[0.04] k1-text-[0.625rem]",
@@ -22,4 +21,4 @@ const Label = forwardRef<
 ));
 Label.displayName = LabelPrimitive.Label.displayName;
 
-export { Label };
+export { Label };