👩‍💻 Simplifications to the code-copy button (#171)

jupyter-book · Jul 7, 2023 · 476a715 · 476a715
1 parent b201090
commit 476a715
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/.changeset/clever-carrots-fix.md b/.changeset/clever-carrots-fix.md
@@ -0,0 +1,6 @@
+---
+'myst-to-react': patch
+'myst-demo': patch
+---
+
+Improvements to simplified code-copy button
diff --git a/packages/myst-demo/src/index.tsx b/packages/myst-demo/src/index.tsx
@@ -282,15 +282,13 @@ export function MySTRenderer({
       )}
     >
       {column && (
-        <div className="flex flex-row items-stretch h-full px-2 border col-span-2 dark:border-slate-600">
+        <div className="flex flex-row items-stretch h-full col-span-2 px-2 border dark:border-slate-600">
           <div className="flex-grow"></div>
           {demoMenu}
         </div>
       )}
       <div className={classnames('myst relative', { 'overflow-auto': column })}>
-        <div className="absolute right-0 p-1">
-          <CopyIcon text={text} />
-        </div>
+        <CopyIcon text={text} className="absolute right-0 p-1" />
         <label>
           <span className="sr-only">Edit the MyST Markdown text</span>
           <textarea

diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx
@@ -88,11 +88,7 @@ export function CodeBlock(props: Props) {
       >
         {value}
       </SyntaxHighlighter>
-      {showCopy && (
-        <div className="absolute hidden top-1 right-1 group-hover:block">
-          <CopyIcon text={value} />
-        </div>
-      )}
+      {showCopy && <CopyIcon text={value} className="absolute top-1 right-1" />}
     </div>
   );
 }

diff --git a/packages/myst-to-react/src/components/CopyIcon.tsx b/packages/myst-to-react/src/components/CopyIcon.tsx
@@ -3,7 +3,7 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { useState } from 'react';
 import classNames from 'classnames';
 
-export function CopyIcon({ text }: { text: string }) {
+export function CopyIcon({ text, className }: { text: string; className?: string }) {
   const [copied, setCopied] = useState(false);
   const onClick = () => {
     if (copied) return;
@@ -16,12 +16,13 @@ export function CopyIcon({ text }: { text: string }) {
     <button
       title={copied ? 'Copied!!' : 'Copy to Clipboard'}
       className={classNames(
-        'inline-flex items-center opacity-60 hover:opacity-100 active:opacity-40 cursor-pointer ml-2',
+        'inline-flex items-center opacity-0 group-hover:opacity-100 hover:opacity-100 focus:opacity-100 active:opacity-100 cursor-pointer ml-2',
         'transition-color duration-200 ease-in-out',
         {
-          'text-blue-500 border-blue-500': !copied,
-          'text-green-500 border-green-500 ': copied,
+          'text-blue-400 hover:text-blue-500': !copied,
+          'text-green-500 hover:text-green-500': copied,
         },
+        className,
       )}
       onClick={onClick}
       aria-pressed={copied ? 'true' : 'false'}

diff --git a/packages/myst-to-react/src/heading.tsx b/packages/myst-to-react/src/heading.tsx
@@ -38,7 +38,7 @@ export function HashLink({
   return (
     <a
       className={classNames('select-none no-underline text-inherit hover:text-inherit', className, {
-        'transition-opacity opacity-0 group-hover:opacity-70': hover,
+        'transition-opacity opacity-0 focus:opacity-100 group-hover:opacity-70': hover,
         'hover:underline': !hover,
       })}
       onClick={scroll}