From d436396c87676da7c2949d139d807c15eaf6c641 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Mon, 7 Oct 2019 13:28:46 -0400
Subject: [PATCH] feat(resources): add popover to contributors

---
 src/components/ResourceHeader/index.tsx  | 17 ++++++++--
 src/components/ResourceHeader/styles.tsx | 40 ++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/components/ResourceHeader/index.tsx b/src/components/ResourceHeader/index.tsx
index 4b41c18..bf7e280 100644
--- a/src/components/ResourceHeader/index.tsx
+++ b/src/components/ResourceHeader/index.tsx
@@ -8,7 +8,11 @@ import * as SC from "./styles"
 interface IResourceHeaderProps {
   relativePath: string
   title: string
-  authors: string[]
+  authors: Array<{
+    avatar: string
+    hash: string
+    name: string
+  }>
   createdAt: string
   timeToRead: number
   recommendedReading: string[]
@@ -66,8 +70,15 @@ export const ResourceHeader: FC<IResourceHeaderProps> = ({
 
       <SC.Top>
         <SC.Meta>
-          <StackedAvatars authors={authors} /> {authors.length} contributor
-          {authors.length > 1 && "s"}
+          <StackedAvatars authors={authors} />
+          <SC.PopoverToggler>
+            {authors.length} contributor{authors.length > 1 && "s"}
+            <SC.Popover>
+              {authors
+                .map(author => `${author.name}#${author.hash}`)
+                .join(", ")}
+            </SC.Popover>
+          </SC.PopoverToggler>
         </SC.Meta>
         <SC.Meta>{dateToHuman}</SC.Meta>
         <SC.Meta>
diff --git a/src/components/ResourceHeader/styles.tsx b/src/components/ResourceHeader/styles.tsx
index b9ed884..95a2374 100644
--- a/src/components/ResourceHeader/styles.tsx
+++ b/src/components/ResourceHeader/styles.tsx
@@ -93,3 +93,43 @@ export const ExtraLinkExternal = styled.a`
 export const ExtraLinkText = styled.div`
   text-decoration: underline;
 `
+
+export const Popover = styled.div`
+  display: none;
+  position: absolute;
+  top: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  background: ${props =>
+    props.theme.name === "dark"
+      ? lighten(0.1, props.theme.main.background)
+      : darken(0.1, props.theme.main.background)};
+
+  &::before {
+    position: absolute;
+    left: 16px;
+    bottom: 100%;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 3.5px 4px 3.5px;
+    border-color: transparent transparent
+      ${props =>
+        props.theme.name === "dark"
+          ? lighten(0.1, props.theme.main.background)
+          : darken(0.1, props.theme.main.background)}
+      transparent;
+  }
+`
+
+export const PopoverToggler = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  &:hover ${Popover} {
+    display: block;
+  }
+`