From 935e5df9b84cd1c93462e1a2cf39438f7d6f4089 Mon Sep 17 00:00:00 2001
From: Liam Canetti <git@liamcanetti.co.uk>
Date: Sat, 28 Dec 2024 15:46:08 +0000
Subject: [PATCH 1/5] feat(tag): new  component

---
 src/components/tag-list/TagList.module.css |  5 ++
 src/components/tag-list/index.tsx          | 18 ++++++++
 src/components/tag/Tag.module.css          | 54 ++++++++++++++++++++++
 src/components/tag/index.tsx               | 41 ++++++++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 src/components/tag-list/TagList.module.css
 create mode 100644 src/components/tag-list/index.tsx
 create mode 100644 src/components/tag/Tag.module.css
 create mode 100644 src/components/tag/index.tsx

diff --git a/src/components/tag-list/TagList.module.css b/src/components/tag-list/TagList.module.css
new file mode 100644
index 00000000..0954ff22
--- /dev/null
+++ b/src/components/tag-list/TagList.module.css
@@ -0,0 +1,5 @@
+.tagList {
+  list-style: none;
+  display: flex;
+  gap: 6px;
+}
diff --git a/src/components/tag-list/index.tsx b/src/components/tag-list/index.tsx
new file mode 100644
index 00000000..af8847d5
--- /dev/null
+++ b/src/components/tag-list/index.tsx
@@ -0,0 +1,18 @@
+import Tag, { TagProps } from "../tag";
+import s from "./TagList.module.css";
+
+interface TagListProps {
+  tags: TagProps[];
+}
+
+export default function TagList({ tags }: TagListProps) {
+  return (
+    <ul className={s.tagList}>
+      {tags.map((tag, index) => (
+        <li>
+          <Tag key={`${tag.name}_${index}`} name={tag.name} color={tag.color} />
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/tag/Tag.module.css b/src/components/tag/Tag.module.css
new file mode 100644
index 00000000..ca378fe4
--- /dev/null
+++ b/src/components/tag/Tag.module.css
@@ -0,0 +1,54 @@
+.tag {
+  --color-to-use: var(--brand-color);
+
+  &.blue {
+    --color-to-use: var(--atom-one-blue)
+  }
+
+  &.green {
+    --color-to-use: var(--atom-one-green)
+  }
+
+  &.yellow {
+    --color-to-use: var(--atom-one-yellow)
+  }
+
+  &.purple {
+    --color-to-use: var(--atom-one-purple)
+  }
+
+  &.red {
+    --color-to-use: var(--atom-one-red)
+  }
+
+  &.orange {
+    --color-to-use: var(--atom-one-orange)
+  }
+
+  &.teal {
+    --color-to-use: var(--atom-one-teal)
+  }
+
+  &.gray {
+    --color-to-use: var(--atom-one-gray)
+  }
+
+  &.white {
+    --color-to-use: var(--atom-one-white)
+  }
+
+  position: relative;
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--form-border-radius);
+  box-shadow: var(--form-box-shadow);
+  background-color: color-mix(in srgb, var(--color-to-use) 50%, transparent);
+  color: var(--color-to-use);
+
+
+  & .text {
+    line-height: 0;
+    font-size: 12px;
+    color: var(--white)
+  }
+}
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
new file mode 100644
index 00000000..c2001749
--- /dev/null
+++ b/src/components/tag/index.tsx
@@ -0,0 +1,41 @@
+import classNames from "classnames";
+import { Span } from "../text";
+import s from "./Tag.module.css";
+
+type TagColor =
+  | "brand"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "red"
+  | "orange"
+  | "teal"
+  | "gray"
+  | "white";
+
+export interface TagProps {
+  name: string;
+  color?: TagColor;
+}
+
+export default function Tag({ name, color = "brand" }: TagProps) {
+  return (
+    <div
+      className={classNames(s.tag, {
+        [s.brand]: color === "brand",
+        [s.blue]: color === "blue",
+        [s.green]: color === "green",
+        [s.yellow]: color === "yellow",
+        [s.purple]: color === "purple",
+        [s.red]: color === "red",
+        [s.orange]: color === "orange",
+        [s.teal]: color === "teal",
+        [s.gray]: color === "gray",
+        [s.white]: color === "white",
+      })}
+    >
+      <Span className={s.text}>{name}</Span>
+    </div>
+  );
+}

From c3ccd82e7e521f71164627b41a03da2840abd77c Mon Sep 17 00:00:00 2001
From: Liam Canetti <git@liamcanetti.co.uk>
Date: Sat, 28 Dec 2024 15:51:44 +0000
Subject: [PATCH 2/5] fix: tag spacing

---
 src/components/tag/Tag.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/tag/Tag.module.css b/src/components/tag/Tag.module.css
index ca378fe4..61d8eb5f 100644
--- a/src/components/tag/Tag.module.css
+++ b/src/components/tag/Tag.module.css
@@ -38,7 +38,7 @@
   }
 
   position: relative;
-  padding: 8px;
+  padding: 2px 8px;
   border: 1px solid transparent;
   border-radius: var(--form-border-radius);
   box-shadow: var(--form-box-shadow);
@@ -47,7 +47,6 @@
 
 
   & .text {
-    line-height: 0;
     font-size: 12px;
     color: var(--white)
   }

From 48c2c856a30095d9ce385be7345b4ffc9e82fac9 Mon Sep 17 00:00:00 2001
From: Liam Canetti <git@liamcanetti.co.uk>
Date: Sat, 28 Dec 2024 16:02:51 +0000
Subject: [PATCH 3/5] chore(tag): rename variable

---
 src/components/tag/Tag.module.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/tag/Tag.module.css b/src/components/tag/Tag.module.css
index 61d8eb5f..ebbd553f 100644
--- a/src/components/tag/Tag.module.css
+++ b/src/components/tag/Tag.module.css
@@ -1,40 +1,40 @@
 .tag {
-  --color-to-use: var(--brand-color);
+  --tag-color: var(--brand-color);
 
   &.blue {
-    --color-to-use: var(--atom-one-blue)
+    --tag-color: var(--atom-one-blue)
   }
 
   &.green {
-    --color-to-use: var(--atom-one-green)
+    --tag-color: var(--atom-one-green)
   }
 
   &.yellow {
-    --color-to-use: var(--atom-one-yellow)
+    --tag-color: var(--atom-one-yellow)
   }
 
   &.purple {
-    --color-to-use: var(--atom-one-purple)
+    --tag-color: var(--atom-one-purple)
   }
 
   &.red {
-    --color-to-use: var(--atom-one-red)
+    --tag-color: var(--atom-one-red)
   }
 
   &.orange {
-    --color-to-use: var(--atom-one-orange)
+    --tag-color: var(--atom-one-orange)
   }
 
   &.teal {
-    --color-to-use: var(--atom-one-teal)
+    --tag-color: var(--atom-one-teal)
   }
 
   &.gray {
-    --color-to-use: var(--atom-one-gray)
+    --tag-color: var(--atom-one-gray)
   }
 
   &.white {
-    --color-to-use: var(--atom-one-white)
+    --tag-color: var(--atom-one-white)
   }
 
   position: relative;
@@ -42,8 +42,8 @@
   border: 1px solid transparent;
   border-radius: var(--form-border-radius);
   box-shadow: var(--form-box-shadow);
-  background-color: color-mix(in srgb, var(--color-to-use) 50%, transparent);
-  color: var(--color-to-use);
+  background-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
+  color: var(--tag-color);
 
 
   & .text {

From 6c8c055de48558e75dfb8338b461b156779ddde5 Mon Sep 17 00:00:00 2001
From: Liam Canetti <git@liamcanetti.co.uk>
Date: Sat, 28 Dec 2024 19:45:57 +0000
Subject: [PATCH 4/5] chore(tag-list): only the one component actually

---
 src/components/tag-list/TagList.module.css | 55 ++++++++++++++++++++++
 src/components/tag-list/index.tsx          | 47 ++++++++++++++++--
 src/components/tag/Tag.module.css          | 53 ---------------------
 src/components/tag/index.tsx               | 41 ----------------
 4 files changed, 97 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/tag/Tag.module.css
 delete mode 100644 src/components/tag/index.tsx

diff --git a/src/components/tag-list/TagList.module.css b/src/components/tag-list/TagList.module.css
index 0954ff22..49d492eb 100644
--- a/src/components/tag-list/TagList.module.css
+++ b/src/components/tag-list/TagList.module.css
@@ -2,4 +2,59 @@
   list-style: none;
   display: flex;
   gap: 6px;
+
+  .tag {
+    --tag-color: var(--brand-color);
+
+    &.blue {
+      --tag-color: var(--atom-one-blue)
+    }
+
+    &.green {
+      --tag-color: var(--atom-one-green)
+    }
+
+    &.yellow {
+      --tag-color: var(--atom-one-yellow)
+    }
+
+    &.purple {
+      --tag-color: var(--atom-one-purple)
+    }
+
+    &.red {
+      --tag-color: var(--atom-one-red)
+    }
+
+    &.orange {
+      --tag-color: var(--atom-one-orange)
+    }
+
+    &.teal {
+      --tag-color: var(--atom-one-teal)
+    }
+
+    &.gray {
+      --tag-color: var(--atom-one-gray)
+    }
+
+    &.white {
+      --tag-color: var(--atom-one-white)
+    }
+
+    position: relative;
+    padding: 0 8px 2px;
+    border: 1px solid transparent;
+    border-radius: var(--form-border-radius);
+    box-shadow: var(--form-box-shadow);
+    background-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
+    color: var(--tag-color);
+
+
+    & .text {
+      font-size: 12px;
+      color: var(--white)
+    }
+
+  }
 }
diff --git a/src/components/tag-list/index.tsx b/src/components/tag-list/index.tsx
index af8847d5..4c741d21 100644
--- a/src/components/tag-list/index.tsx
+++ b/src/components/tag-list/index.tsx
@@ -1,5 +1,23 @@
-import Tag, { TagProps } from "../tag";
+import classNames from "classnames";
 import s from "./TagList.module.css";
+import { Span } from "../text";
+
+type TagColor =
+  | "brand"
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "red"
+  | "orange"
+  | "teal"
+  | "gray"
+  | "white";
+
+interface TagProps {
+  name: string;
+  color?: TagColor;
+}
 
 interface TagListProps {
   tags: TagProps[];
@@ -8,11 +26,30 @@ interface TagListProps {
 export default function TagList({ tags }: TagListProps) {
   return (
     <ul className={s.tagList}>
-      {tags.map((tag, index) => (
-        <li>
-          <Tag key={`${tag.name}_${index}`} name={tag.name} color={tag.color} />
-        </li>
+      {tags.map(({ name, color }, index) => (
+        <Tag key={`${name}_${index}`} name={name} color={color} />
       ))}
     </ul>
   );
 }
+
+function Tag({ name, color }: TagProps) {
+  return (
+    <li
+      className={classNames(s.tag, {
+        [s.brand]: color === "brand",
+        [s.blue]: color === "blue",
+        [s.green]: color === "green",
+        [s.yellow]: color === "yellow",
+        [s.purple]: color === "purple",
+        [s.red]: color === "red",
+        [s.orange]: color === "orange",
+        [s.teal]: color === "teal",
+        [s.gray]: color === "gray",
+        [s.white]: color === "white",
+      })}
+    >
+      <Span className={s.text}>{name}</Span>
+    </li>
+  );
+}
diff --git a/src/components/tag/Tag.module.css b/src/components/tag/Tag.module.css
deleted file mode 100644
index ebbd553f..00000000
--- a/src/components/tag/Tag.module.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.tag {
-  --tag-color: var(--brand-color);
-
-  &.blue {
-    --tag-color: var(--atom-one-blue)
-  }
-
-  &.green {
-    --tag-color: var(--atom-one-green)
-  }
-
-  &.yellow {
-    --tag-color: var(--atom-one-yellow)
-  }
-
-  &.purple {
-    --tag-color: var(--atom-one-purple)
-  }
-
-  &.red {
-    --tag-color: var(--atom-one-red)
-  }
-
-  &.orange {
-    --tag-color: var(--atom-one-orange)
-  }
-
-  &.teal {
-    --tag-color: var(--atom-one-teal)
-  }
-
-  &.gray {
-    --tag-color: var(--atom-one-gray)
-  }
-
-  &.white {
-    --tag-color: var(--atom-one-white)
-  }
-
-  position: relative;
-  padding: 2px 8px;
-  border: 1px solid transparent;
-  border-radius: var(--form-border-radius);
-  box-shadow: var(--form-box-shadow);
-  background-color: color-mix(in srgb, var(--tag-color) 50%, transparent);
-  color: var(--tag-color);
-
-
-  & .text {
-    font-size: 12px;
-    color: var(--white)
-  }
-}
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
deleted file mode 100644
index c2001749..00000000
--- a/src/components/tag/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import classNames from "classnames";
-import { Span } from "../text";
-import s from "./Tag.module.css";
-
-type TagColor =
-  | "brand"
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "red"
-  | "orange"
-  | "teal"
-  | "gray"
-  | "white";
-
-export interface TagProps {
-  name: string;
-  color?: TagColor;
-}
-
-export default function Tag({ name, color = "brand" }: TagProps) {
-  return (
-    <div
-      className={classNames(s.tag, {
-        [s.brand]: color === "brand",
-        [s.blue]: color === "blue",
-        [s.green]: color === "green",
-        [s.yellow]: color === "yellow",
-        [s.purple]: color === "purple",
-        [s.red]: color === "red",
-        [s.orange]: color === "orange",
-        [s.teal]: color === "teal",
-        [s.gray]: color === "gray",
-        [s.white]: color === "white",
-      })}
-    >
-      <Span className={s.text}>{name}</Span>
-    </div>
-  );
-}

From 44904bacba6353e572f7949390a2a13ac7f26317 Mon Sep 17 00:00:00 2001
From: Brandon Romano <BrandonRRomano@gmail.com>
Date: Sat, 28 Dec 2024 14:06:03 -0800
Subject: [PATCH 5/5] Update tag css to require being nested

---
 src/components/tag-list/TagList.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tag-list/TagList.module.css b/src/components/tag-list/TagList.module.css
index 49d492eb..d60b1464 100644
--- a/src/components/tag-list/TagList.module.css
+++ b/src/components/tag-list/TagList.module.css
@@ -3,7 +3,7 @@
   display: flex;
   gap: 6px;
 
-  .tag {
+  & .tag {
     --tag-color: var(--brand-color);
 
     &.blue {