From 7baa48c35664a703f7be2ff6fd73778e20415668 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Wed, 24 Jun 2020 21:12:02 -0700
Subject: [PATCH] add item info links

---
 src/app/Item.js | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/app/Item.js b/src/app/Item.js
index 2c42c0b..d8984a4 100644
--- a/src/app/Item.js
+++ b/src/app/Item.js
@@ -40,15 +40,24 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
         </ItemName>
       </Box>
       <Box flexGrow="1" />
-      {isInOutfit && (
-        <Box>
-          <RemoveItemButton
+      <Box>
+        <ItemActionButton
+          icon="info"
+          label="More info"
+          href={`http://impress.openneo.net/items/${
+            item.id
+          }-${item.name.replace(/ /g, "-")}`}
+        />
+        {isInOutfit && (
+          <ItemActionButton
+            icon="delete"
+            label="Remove"
             onClick={() =>
               dispatchToOutfit({ type: "removeItem", itemId: item.id })
             }
           />
-        </Box>
-      )}
+        )}
+      </Box>
     </ItemContainer>
   );
 }
@@ -179,25 +188,24 @@ function ItemName({ children, ...props }) {
 }
 
 /**
- * RemoveItemButton lets the user remove the item from the outfit altogether.
- *
- * This removes it from their "closet", which is even more severe than
- * unwearing it: it disappears from your item list entirely, until you find it
- * again via search!
+ * ItemActionButton is one of a list of actions a user can take for this item.
  */
-function RemoveItemButton({ onClick }) {
+function ItemActionButton({ icon, label, href, onClick }) {
   const theme = useTheme();
 
   return (
-    <Tooltip label="Remove" placement="top">
+    <Tooltip label={label} placement="top">
       <IconButton
-        icon="delete"
-        aria-label="Remove from outfit"
+        as={href ? "a" : "button"}
+        icon={icon}
+        aria-label={label}
         variant="ghost"
         color="gray.400"
+        href={href}
+        target={href ? "_blank" : null}
         onClick={(e) => {
-          onClick();
-          e.preventDefault();
+          if (onClick) onClick();
+          e.stopPropagation();
         }}
         className={css`
           opacity: 0;