[Beta] Show illustration credit on hover/tap (#5188)

* [beta] Show `AuthorCredit` on hover and focus

* Move attribution to top

* Styling and stuff

Co-authored-by: Dan Lebowitz <dan.lebo@me.com>

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
Co-authored-by: Dan Lebowitz <dan.lebo@me.com>

beta/src/components/MDX/MDXComponents.tsx

@@ -173,28 +173,40 @@ function Recipes(props: any) {
 }
 
 function AuthorCredit({
-  author,
-  authorLink,
+  author = 'Rachel Lee Nabors',
+  authorLink = 'http://rachelnabors.com/',
 }: {
   author: string;
   authorLink: string;
 }) {
   return (
-    <p className="text-center text-secondary dark:text-secondary-dark text-base mt-2">
-      <cite>
-        Illustrated by{' '}
-        {authorLink ? (
-          <a className="text-link dark:text-link-dark" href={authorLink}>
-            {author}
-          </a>
-        ) : (
-          author
-        )}
-      </cite>
-    </p>
+    <div className="sr-only group-hover:not-sr-only group-focus-within:not-sr-only hover:sr-only">
+      <p className="bg-card dark:bg-card-dark text-center text-sm text-secondary dark:text-secondary-dark leading-tight dark:text-secondary-dark p-2 rounded-lg absolute left-1/2 top-0 -translate-x-1/2 -translate-y-full group-hover:flex group-hover:opacity-100 after:content-[''] after:absolute after:left-1/2 after:top-[95%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-card after:dark:border-t-card-dark opacity-0 transition-opacity duration-300">
+        <cite>
+          Illustrated by{' '}
+          {authorLink ? (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className="text-link dark:text-link-dark"
+              href={authorLink}>
+              {author}
+            </a>
+          ) : (
+            author
+          )}
+        </cite>
+      </p>
+    </div>
   );
 }
 
+const IllustrationContext = React.createContext<{
+  isInBlock?: boolean;
+}>({
+  isInBlock: false,
+});
+
 function Illustration({
   caption,
   src,
@@ -208,8 +220,10 @@ function Illustration({
   author: string;
   authorLink: string;
 }) {
+  const {isInBlock} = React.useContext(IllustrationContext);
+
   return (
-    <div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+    <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
         <img
           src={src}
@@ -223,11 +237,13 @@ function Illustration({
           </figcaption>
         ) : null}
       </figure>
-      {author ? <AuthorCredit author={author} authorLink={authorLink} /> : null}
+      {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
     </div>
   );
 }
 
+const isInBlockTrue = {isInBlock: true};
+
 function IllustrationBlock({
   sequential,
   author,
@@ -255,20 +271,22 @@ function IllustrationBlock({
     </figure>
   ));
   return (
-    <div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
-      {sequential ? (
-        <ol className="mdx-illustration-block flex">
-          {images.map((x: any, i: number) => (
-            <li className="flex-1" key={i}>
-              {x}
-            </li>
-          ))}
-        </ol>
-      ) : (
-        <div className="mdx-illustration-block">{images}</div>
-      )}
-      {author ? <AuthorCredit author={author} authorLink={authorLink} /> : null}
-    </div>
+    <IllustrationContext.Provider value={isInBlockTrue}>
+      <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
+        {sequential ? (
+          <ol className="mdx-illustration-block flex">
+            {images.map((x: any, i: number) => (
+              <li className="flex-1" key={i}>
+                {x}
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <div className="mdx-illustration-block">{images}</div>
+        )}
+        <AuthorCredit author={author} authorLink={authorLink} />
+      </div>
+    </IllustrationContext.Provider>
   );
 }