From 3f9f872aa0c07fadaf60abd751da7ad75cba5696 Mon Sep 17 00:00:00 2001
From: ser888gio <nica.sergiu@seznam.cz>
Date: Tue, 10 Sep 2024 10:38:32 +0200
Subject: [PATCH 1/2] Created an Icon component as described in task #20

---
 packages/design-system/src/icon.tsx | 50 +++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/design-system/src/icon.tsx

diff --git a/packages/design-system/src/icon.tsx b/packages/design-system/src/icon.tsx
new file mode 100644
index 00000000..4210f212
--- /dev/null
+++ b/packages/design-system/src/icon.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import cn from "classnames";
+import { cva } from "class-variance-authority";
+
+const iconVariants = cva("",{
+  variants: {
+    size: {
+      "small": "w-var(--spacing-small) h-var(--spacing-small);",
+      "medium": "w-var(--spacing-medium) h-var(--spacing-medium);",
+      "large": "w-var(--spacing-large) h-var(--spacing-large);",
+      "extra-large": "w-var(--spacing-extra-large) h-var(--spacing-extra-large);",
+      "extra-huge": "w-var(--spacing-extra-huge) h-var(--spacing-extra-huge);",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export interface IconProps {
+  icon: string;
+  color?: string;
+  size?: "small" | "medium" | "large" | "extra-large" | "extra-huge";
+  title?: string;
+}
+
+const Icon: React.FC<IconProps> = ({
+  icon,
+  color,
+  size,
+  title,
+}) => {
+  const classes= cn(iconVariants({ size }), "icon");
+
+  return (
+    <div className={classes}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-hidden={!title}
+        viewBox="0 0 24 24"
+      >
+        {title && <title>{title}</title>}
+        <path d={icon} fill={color} />
+      </svg>
+    </div>
+  );
+};
+
+export default Icon;

From 22a2ebc13873ef6f7d368be60c43c094cab65d80 Mon Sep 17 00:00:00 2001
From: ser888gio <nica.sergiu@seznam.cz>
Date: Wed, 11 Sep 2024 13:54:19 +0200
Subject: [PATCH 2/2] Fixed the Lint problems

---
 package-lock.json                   | 24 ++++++++
 package.json                        |  5 +-
 packages/design-system/src/icon.tsx | 96 ++++++++++++++---------------
 3 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7f944548..7860d0a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
         "apps/*",
         "packages/*"
       ],
+      "dependencies": {
+        "class-variance-authority": "^0.7.0"
+      },
       "devDependencies": {
         "@repo/eslint-config": "*",
         "@repo/typescript-config": "*",
@@ -7976,6 +7979,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
diff --git a/package.json b/package.json
index 33ae0162..e679d441 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.0"
+  }
 }
diff --git a/packages/design-system/src/icon.tsx b/packages/design-system/src/icon.tsx
index 4210f212..5f821cf1 100644
--- a/packages/design-system/src/icon.tsx
+++ b/packages/design-system/src/icon.tsx
@@ -1,50 +1,46 @@
-import React from "react";
-import cn from "classnames";
-import { cva } from "class-variance-authority";
-
-const iconVariants = cva("",{
-  variants: {
-    size: {
-      "small": "w-var(--spacing-small) h-var(--spacing-small);",
-      "medium": "w-var(--spacing-medium) h-var(--spacing-medium);",
-      "large": "w-var(--spacing-large) h-var(--spacing-large);",
-      "extra-large": "w-var(--spacing-extra-large) h-var(--spacing-extra-large);",
-      "extra-huge": "w-var(--spacing-extra-huge) h-var(--spacing-extra-huge);",
-    },
-  },
-  defaultVariants: {
-    size: "medium",
-  },
-});
-
-export interface IconProps {
-  icon: string;
-  color?: string;
-  size?: "small" | "medium" | "large" | "extra-large" | "extra-huge";
-  title?: string;
-}
-
-const Icon: React.FC<IconProps> = ({
-  icon,
-  color,
-  size,
-  title,
-}) => {
-  const classes= cn(iconVariants({ size }), "icon");
-
-  return (
-    <div className={classes}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        role="img"
-        aria-hidden={!title}
-        viewBox="0 0 24 24"
-      >
-        {title && <title>{title}</title>}
-        <path d={icon} fill={color} />
-      </svg>
-    </div>
-  );
-};
-
-export default Icon;
+import React from "react";
+import cn from "classnames";
+import { cva } from "class-variance-authority";
+
+const iconVariants = cva("", {
+  variants: {
+    size: {
+      small: "w-var(--spacing-small) h-var(--spacing-small);",
+      medium: "w-var(--spacing-medium) h-var(--spacing-medium);",
+      large: "w-var(--spacing-large) h-var(--spacing-large);",
+      "extra-large":
+        "w-var(--spacing-extra-large) h-var(--spacing-extra-large);",
+      "extra-huge": "w-var(--spacing-extra-huge) h-var(--spacing-extra-huge);",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+export interface IconProps {
+  icon: string;
+  color?: string;
+  size?: "small" | "medium" | "large" | "extra-large" | "extra-huge";
+  title?: string;
+}
+
+const Icon: React.FC<IconProps> = ({ icon, color, size, title }) => {
+  const classes = cn(iconVariants({ size }), "icon");
+
+  return (
+    <div className={classes}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-hidden={!title}
+        viewBox="0 0 24 24"
+      >
+        {title && <title>{title}</title>}
+        <path d={icon} fill={color} />
+      </svg>
+    </div>
+  );
+};
+
+export default Icon;