From a7e519f026270d6061571223d7c77ec4d358b409 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 28 Jan 2024 21:50:38 -0500
Subject: [PATCH] chore: Add docs and onClick to List/Item component

---
 app/components/List/Item.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/components/List/Item.tsx b/app/components/List/Item.tsx
index 081b252dc..d43240c6b 100644
--- a/app/components/List/Item.tsx
+++ b/app/components/List/Item.tsx
@@ -6,13 +6,23 @@ import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
+  /** An icon or image to display to the left of the list item */
   image?: React.ReactNode;
+  /** An internal location to navigate to on click, if provided the list item will have hover styles */
   to?: LocationDescriptor;
+  /** An optional click handler, if provided the list item will have hover styles */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Whether to match the location exactly */
   exact?: boolean;
+  /** The title of the list item */
   title: React.ReactNode;
+  /** The subtitle of the list item, displayed below the title */
   subtitle?: React.ReactNode;
+  /** Actions to display to the right of the list item */
   actions?: React.ReactNode;
+  /** Whether to display a border below the list item */
   border?: boolean;
+  /** Whether to display the list item in a compact style */
   small?: boolean;
 };
 
@@ -74,6 +84,7 @@ const ListItem = (
 const Wrapper = styled.a<{
   $small?: boolean;
   $border?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   to?: LocationDescriptor;
 }>`
   display: flex;
@@ -89,7 +100,13 @@ const Wrapper = styled.a<{
     border-bottom: 0;
   }
 
-  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
+  &:hover {
+    background: ${(props) =>
+      props.onClick ? props.theme.secondaryBackground : "inherit"};
+  }
+
+  cursor: ${(props) =>
+    props.to || props.onClick ? "var(--pointer)" : "default"};
 `;
 
 const Image = styled(Flex)`