From 61a8d285bf4525a5239276f7971719f226680994 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:11:28 -0500
Subject: [PATCH 1/3] feat: animated checkbox icons

---
 src/components/Checkbox/Checkbox.tsx     | 48 ++++++++----------------
 src/components/FieldLabel/FieldLabel.tsx |  2 +-
 src/icons/Type=Check.svg                 |  2 +-
 src/icons/Type=Minus.svg                 |  3 ++
 src/icons/index.ts                       |  1 +
 src/tailwind.css                         | 32 ++++++++++++++++
 6 files changed, 53 insertions(+), 35 deletions(-)
 create mode 100644 src/icons/Type=Minus.svg

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 5bb74cf..49330ac 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,6 @@
 import { Checkbox as HeadlessCheckbox } from "@headlessui/react";
 import { classNames } from "../../util/classes";
+import { InkIcon } from "../..";
 
 export interface CheckboxProps {
   checked: boolean;
@@ -20,47 +21,28 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       className={classNames(
         "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:cursor-pointer ink:rounded-xs ink:box-border",
         "ink:transition-colors ink:transition-default-animation",
-        "ink:border-2 ink:border-transparent ink:bg-background-container ink:shadow-xs",
+        "ink:bg-background-container ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover",
         "ink:data-indeterminate:bg-button-primary ink:data-indeterminate:hover:bg-button-primary-hover",
         "ink:flex ink:items-center"
       )}
     >
-      <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center">
-        {/** See if those SVGs should be icons in our standard icon library. */}
-        <svg
-          className="ink:size-1.5 ink:text-text-on-primary ink:group-data-indeterminate:opacity-0 ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.5905 0.748484C12.0362 1.07459 12.1332 1.70028 11.8071 2.14601L5.30384 11.0349C5.14317 11.2545 4.89996 11.3992 4.6303 11.4355C4.36064 11.4718 4.08781 11.3967 3.87476 11.2274L0.378025 8.44967C-0.0544173 8.10614 -0.126496 7.47709 0.217033 7.04465C0.560562 6.6122 1.18961 6.54013 1.62205 6.88365L4.30408 9.01423L10.193 0.965086C10.5191 0.519357 11.1448 0.422381 11.5905 0.748484Z"
-            fill="currentColor"
-          />
-        </svg>
+      <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center ink:box-border">
+        <InkIcon.Check
+          className={classNames(
+            "ink:size-3 ink:text-text-on-primary",
+            "ink:animate-svg-path ink:group-hover:not-in-data-indeterminate:animate-svg-path-start ink:in-data-checked:not-in-data-indeterminate:animate-svg-path-start"
+          )}
+        />
       </div>
 
-      <svg
-        className="ink:size-1.5 ink:text-text-on-primary ink:group-not-data-indeterminate:opacity-0 ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
-        width="12"
-        height="2"
-        viewBox="0 0 12 2"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1Z"
-          fill="currentColor"
-        />
-      </svg>
+      <InkIcon.Minus
+        className={classNames(
+          "ink:size-3 ink:text-text-on-primary",
+          "ink:animate-svg-path ink:in-data-indeterminate:animate-svg-path-start"
+        )}
+      />
     </HeadlessCheckbox>
   );
 };
diff --git a/src/components/FieldLabel/FieldLabel.tsx b/src/components/FieldLabel/FieldLabel.tsx
index 846dd5a..04ece4f 100644
--- a/src/components/FieldLabel/FieldLabel.tsx
+++ b/src/components/FieldLabel/FieldLabel.tsx
@@ -12,7 +12,7 @@ export const FieldLabel: React.FC<FieldLabelProps> = ({
   children,
 }) => {
   return (
-    <Field className="ink:flex ink:flex-col ink:font-default">
+    <Field className="ink:flex ink:flex-col ink:font-default ink:group">
       <div className="ink:flex ink:items-center ink:gap-1">
         {children}
         <Label className="ink:cursor-pointer ink:h-3 ink:flex ink:items-center ink:justify-center ink:text-body-2 ink:text-text-default">
diff --git a/src/icons/Type=Check.svg b/src/icons/Type=Check.svg
index c5d2da8..b102fe1 100644
--- a/src/icons/Type=Check.svg
+++ b/src/icons/Type=Check.svg
@@ -1,3 +1,3 @@
 <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.32812 16.1484L18.2109 6.72656L19.2891 7.75781L9.32812 18.3516L4.19531 12.9141L5.29688 11.8828L9.32812 16.1484Z" fill="currentColor"/>
+<path d="M4.736 12.389 9.362 17.179 18.761 7.295" stroke="currentColor" stroke-width="1.5" />
 </svg>
diff --git a/src/icons/Type=Minus.svg b/src/icons/Type=Minus.svg
new file mode 100644
index 0000000..af43dcb
--- /dev/null
+++ b/src/icons/Type=Minus.svg
@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 937d431..b4d6762 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -15,6 +15,7 @@ export { default as Error } from "./Type=Error.svg?react";
 export { default as Home } from "./Type=Home.svg?react";
 export { default as Loading } from "./Type=Loading.svg?react";
 export { default as Menu } from "./Type=Menu.svg?react";
+export { default as Minus } from "./Type=Minus.svg?react";
 export { default as Moon } from "./Type=Moon.svg?react";
 export { default as Profile } from "./Type=Profile.svg?react";
 export { default as Search } from "./Type=Search.svg?react";
diff --git a/src/tailwind.css b/src/tailwind.css
index 16eb429..f6c486c 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -54,6 +54,15 @@
     /** Required for Safari to have proper font weights */
     font-synthesis: none;
   }
+
+  @keyframes svg-path-dash {
+    from {
+      stroke-dashoffset: var(--svg-path-dash-offset);
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
 }
 
 @theme {
@@ -177,3 +186,26 @@
 @utility transition-default-animation {
   @apply ink:duration-200 ink:ease-in-out;
 }
+
+/**
+ * For this animation to work, the SVG path must have a stroke attribute.
+ * Set `animate-svg-path` on the Icon element, then apply `animate-svg-path-start` when you want the animation to play (e.g. on hover).
+ */
+@utility animate-svg-path {
+  --svg-path-dash-duration: 0.25s;
+  --svg-path-dash-offset: 24;
+  --svg-path-dash-delay: 0.2s;
+  --svg-path-dash-easing: ease-in-out;
+
+  > path[stroke] {
+    stroke-dasharray: var(--svg-path-dash-offset);
+    stroke-dashoffset: var(--svg-path-dash-offset);
+  }
+}
+
+@utility animate-svg-path-start {
+  > path[stroke] {
+    animation: svg-path-dash var(--svg-path-dash-duration)
+      var(--svg-path-dash-delay) var(--svg-path-dash-easing) forwards;
+  }
+}

From 18b591792480f6534f62dd5362c97075b67fc278 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:56:26 -0500
Subject: [PATCH 2/3] feat: update checkbox hover color

---
 src/components/Checkbox/Checkbox.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 49330ac..8dd1081 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -25,13 +25,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover",
         "ink:data-indeterminate:bg-button-primary ink:data-indeterminate:hover:bg-button-primary-hover",
-        "ink:flex ink:items-center"
+        "ink:flex ink:items-center",
+        "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary"
       )}
     >
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center ink:box-border">
         <InkIcon.Check
           className={classNames(
-            "ink:size-3 ink:text-text-on-primary",
+            "ink:size-3",
             "ink:animate-svg-path ink:group-hover:not-in-data-indeterminate:animate-svg-path-start ink:in-data-checked:not-in-data-indeterminate:animate-svg-path-start"
           )}
         />
@@ -39,7 +40,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
       <InkIcon.Minus
         className={classNames(
-          "ink:size-3 ink:text-text-on-primary",
+          "ink:size-3",
           "ink:animate-svg-path ink:in-data-indeterminate:animate-svg-path-start"
         )}
       />

From fd2449a3c952409302a6fdede8858d78cceea6c2 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Thu, 5 Dec 2024 09:30:39 -0500
Subject: [PATCH 3/3] feat: remove checkbox hover

---
 src/components/Checkbox/Checkbox.tsx | 6 +++---
 src/tailwind.css                     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 8dd1081..8886a41 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -23,8 +23,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         "ink:transition-colors ink:transition-default-animation",
         "ink:bg-background-container ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
-        "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover",
-        "ink:data-indeterminate:bg-button-primary ink:data-indeterminate:hover:bg-button-primary-hover",
+        "ink:data-checked:bg-button-primary",
+        "ink:data-indeterminate:bg-button-primary",
         "ink:flex ink:items-center",
         "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary"
       )}
@@ -33,7 +33,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         <InkIcon.Check
           className={classNames(
             "ink:size-3",
-            "ink:animate-svg-path ink:group-hover:not-in-data-indeterminate:animate-svg-path-start ink:in-data-checked:not-in-data-indeterminate:animate-svg-path-start"
+            "ink:animate-svg-path ink:in-data-checked:not-in-data-indeterminate:animate-svg-path-start"
           )}
         />
       </div>
diff --git a/src/tailwind.css b/src/tailwind.css
index f6c486c..7590fd9 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -194,7 +194,7 @@
 @utility animate-svg-path {
   --svg-path-dash-duration: 0.25s;
   --svg-path-dash-offset: 24;
-  --svg-path-dash-delay: 0.2s;
+  --svg-path-dash-delay: 0.1s;
   --svg-path-dash-easing: ease-in-out;
 
   > path[stroke] {