Update use of `Link`

* Convert `LinkBase` to `Link` and use styling API as needed
* Add `underline` prop to `Link` usages as the default value of that
  prop may change in future
* Move styling, where possible, off of `Link` onto another element

src/annotator/components/ContentInfoBanner.tsx

 import {
   Link,
-  LinkBase,
   CaretLeftIcon,
   CaretRightIcon,
 } from '@hypothesis/frontend-shared';
@@ -37,7 +36,12 @@ export default function ContentInfoBanner({ info }: ContentInfoBannerProps) {
     >
       <div data-testid="content-logo">
         {info.logo && (
-          <Link href={info.logo.link} target="_blank" data-testid="logo-link">
+          <Link
+            href={info.logo.link}
+            target="_blank"
+            data-testid="logo-link"
+            underline="none"
+          >
             <img
               alt={info.logo.title}
               src={info.logo.logo}
@@ -78,15 +82,16 @@ export default function ContentInfoBanner({ info }: ContentInfoBannerProps) {
         {info.links.previousItem && (
           <>
             <Link
-              classes="flex gap-x-1 items-center text-annotator-sm whitespace-nowrap"
               title="Open previous item"
               href={info.links.previousItem}
               underline="always"
               target="_blank"
               data-testid="content-previous-link"
             >
-              <CaretLeftIcon className="w-em h-em" />
-              <span>Previous</span>
+              <div className="flex gap-x-1 items-center text-annotator-sm whitespace-nowrap">
+                <CaretLeftIcon className="w-em h-em" />
+                <span>Previous</span>
+              </div>
             </Link>
             <div className="text-annotator-sm">|</div>
           </>
@@ -99,7 +104,7 @@ export default function ContentInfoBanner({ info }: ContentInfoBannerProps) {
             'min-w-0 whitespace-nowrap overflow-hidden text-ellipsis shrink font-medium'
           )}
         >
-          <LinkBase
+          <Link
             title={itemTitle}
             href={info.links.currentItem}
             data-testid="content-item-link"
@@ -107,7 +112,7 @@ export default function ContentInfoBanner({ info }: ContentInfoBannerProps) {
             unstyled
           >
             {itemTitle}
-          </LinkBase>
+          </Link>
         </div>
 
         {info.links.nextItem && (
@@ -115,14 +120,15 @@ export default function ContentInfoBanner({ info }: ContentInfoBannerProps) {
             <div className="text-annotator-sm">|</div>
             <Link
               title="Open next item"
-              classes="flex gap-x-1 items-center text-annotator-sm whitespace-nowrap"
               href={info.links.nextItem}
               underline="always"
               target="_blank"
               data-testid="content-next-link"
             >
-              <span>Next</span>
-              <CaretRightIcon className="w-em h-em" />
+              <div className="flex gap gap-x-1 items-center text-annotator-sm whitespace-nowrap">
+                <span>Next</span>
+                <CaretRightIcon className="w-em h-em" />
+              </div>
             </Link>
           </>
         )}

src/annotator/components/test/ContentInfoBanner-test.js

@@ -46,7 +46,7 @@ describe('ContentInfoBanner', () => {
   it('shows item title', () => {
     const wrapper = createComponent();
 
-    const link = wrapper.find('LinkBase[data-testid="content-item-link"]');
+    const link = wrapper.find('Link[data-testid="content-item-link"]');
     assert.equal(link.text(), 'Chapter 2: Some book chapter');
     assert.equal(link.prop('target'), '_blank');
   });
@@ -56,7 +56,7 @@ describe('ContentInfoBanner', () => {
 
     const wrapper = createComponent();
 
-    const link = wrapper.find('LinkBase[data-testid="content-item-link"]');
+    const link = wrapper.find('Link[data-testid="content-item-link"]');
     assert.equal(link.text(), 'Chapter 2');
   });
 
@@ -70,7 +70,7 @@ describe('ContentInfoBanner', () => {
       'Expansive Book'
     );
     assert.equal(
-      wrapper.find('LinkBase[data-testid="content-item-link"]').prop('title'),
+      wrapper.find('Link[data-testid="content-item-link"]').prop('title'),
       'Chapter 2: Some book chapter'
     );
   });

src/shared/components/BaseToastMessages.tsx

@@ -92,6 +92,7 @@ function ToastMessageItem({ message, onDismiss }: ToastMessageItemProps) {
                   event.stopPropagation() /* consume the event so that it does not dismiss the message */
               }
               target="_new"
+              underline="none"
             >
               More info
             </Link>

src/sidebar/components/Annotation/AnnotationDocumentInfo.tsx

@@ -23,7 +23,7 @@ export default function AnnotationDocumentInfo({
       <div className="text-color-text-light">
         on &quot;
         {link ? (
-          <Link href={link} target="_blank">
+          <Link href={link} target="_blank" underline="none">
             {title}
           </Link>
         ) : (

src/sidebar/components/Annotation/AnnotationLicense.tsx

@@ -7,16 +7,18 @@ export default function AnnotationLicense() {
   return (
     <div className="pt-2 border-t text-xs leading-none">
       <Link
-        classes="flex items-center"
-        color="text-light"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         target="_blank"
         title="View more information about the Creative Commons Public Domain dedication"
+        underline="none"
+        variant="text-light"
       >
-        <CcStdIcon className="w-[10px] h-[10px]" />
-        <CcZeroIcon className="w-[10px] h-[10px] ml-px" />
-        <div className="ml-1">
-          Annotations can be freely reused by anyone for any purpose.
+        <div className="flex items-center">
+          <CcStdIcon className="w-[10px] h-[10px]" />
+          <CcZeroIcon className="w-[10px] h-[10px] ml-px" />
+          <div className="ml-1">
+            Annotations can be freely reused by anyone for any purpose.
+          </div>
         </div>
       </Link>
     </div>

src/sidebar/components/Annotation/AnnotationShareInfo.tsx

-import { LinkBase, GlobeIcon, GroupsIcon } from '@hypothesis/frontend-shared';
+import { Link, GlobeIcon, GroupsIcon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import type { Group } from '../../../types/api';
@@ -23,23 +23,26 @@ function AnnotationShareInfo({ group, isPrivate }: AnnotationShareInfoProps) {
   return (
     <>
       {group && linkToGroup && (
-        <LinkBase
+        <Link
           // The light-text hover color is not a standard color for a Link, so
-          // LinkBase is used here
+          // a custom variant is used
           classes={classnames(
-            'flex items-baseline gap-x-1',
-            'text-color-text-light hover:text-color-text-light hover:underline'
+            'text-color-text-light hover:text-color-text-light'
           )}
           href={group.links.html}
           target="_blank"
+          underline="hover"
+          variant="custom"
         >
-          {group.type === 'open' ? (
-            <GlobeIcon className="w-2.5 h-2.5" />
-          ) : (
-            <GroupsIcon className="w-2.5 h-2.5" />
-          )}
-          <span>{group.name}</span>
-        </LinkBase>
+          <div className="flex items-baseline gap-x-1">
+            {group.type === 'open' ? (
+              <GlobeIcon className="w-2.5 h-2.5" />
+            ) : (
+              <GroupsIcon className="w-2.5 h-2.5" />
+            )}
+            <span>{group.name}</span>
+          </div>
+        </Link>
       )}
       {isPrivate && !linkToGroup && (
         <div className="text-color-text-light" data-testid="private-info">

src/sidebar/components/Annotation/AnnotationTimestamps.tsx

-import { LinkBase } from '@hypothesis/frontend-shared';
+import { Link } from '@hypothesis/frontend-shared';
 import { useEffect, useMemo, useState } from 'preact/hooks';
 
 import {
@@ -88,16 +88,18 @@ export default function AnnotationTimestamps({
         </span>
       )}
       {annotationURL ? (
-        <LinkBase
+        <Link
           // The light-text hover color is not a standard color for a Link, so
           // LinkBase is used here
-          classes="text-color-text-light hover:text-color-text-light hover:underline"
+          classes="text-color-text-light hover:text-color-text-light"
           target="_blank"
           title={created.absolute}
           href={annotationURL}
+          underline="hover"
+          variant="custom"
         >
           {created.relative}
-        </LinkBase>
+        </Link>
       ) : (
         <span
           className="color-text-color-light"

src/sidebar/components/Annotation/AnnotationUser.tsx

-import { LinkBase } from '@hypothesis/frontend-shared';
+import { Link } from '@hypothesis/frontend-shared';
 
 type AnnotationUserProps = {
   authorLink?: string;
@@ -14,9 +14,9 @@ function AnnotationUser({ authorLink, displayName }: AnnotationUserProps) {
 
   if (authorLink) {
     return (
-      <LinkBase href={authorLink} target="_blank">
+      <Link href={authorLink} target="_blank" underline="none" variant="custom">
         {user}
-      </LinkBase>
+      </Link>
     );
   }
 

src/sidebar/components/HelpPanel.tsx

@@ -51,7 +51,7 @@ function HelpPanelTab({ linkText, url }: HelpPanelTabProps) {
       // a flex container (centered on both axes)
       className="flex-1 flex items-center justify-center border-r last-of-type:border-r-0 text-md font-medium"
     >
-      <Link color="text-light" href={url} target="_blank">
+      <Link variant="text-light" href={url} target="_blank" underline="none">
         <div className="flex items-center gap-x-2">
           <span>{linkText}</span> <ExternalIcon className="w-3 h-3" />
         </div>

src/sidebar/components/LoggedOutMessage.tsx

-import {
-  Link,
-  LinkBase,
-  LinkButton,
-  LogoIcon,
-} from '@hypothesis/frontend-shared';
+import { Link, LinkButton, LogoIcon } from '@hypothesis/frontend-shared';
 
 import { useSidebarStore } from '../store';
 
@@ -25,7 +20,7 @@ function LoggedOutMessage({ onLogin }: LoggedOutMessageProps) {
         This is a public annotation created with Hypothesis. <br />
         To reply or make your own annotations on this document,{' '}
         <Link
-          color="text"
+          variant="text"
           href={store.getLink('signup')}
           target="_blank"
           underline="always"
@@ -39,14 +34,16 @@ function LoggedOutMessage({ onLogin }: LoggedOutMessageProps) {
         .
       </span>
       <div>
-        <LinkBase
+        <Link
           href="https://hypothes.is"
           aria-label="Hypothesis homepage"
           target="_blank"
           title="Hypothesis homepage"
+          underline="none"
+          variant="custom"
         >
           <LogoIcon className="w-16 h-16 text-grey-7" />
-        </LinkBase>
+        </Link>
       </div>
     </div>
   );

src/sidebar/components/MarkdownEditor.tsx

-import { ButtonBase, IconButton, LinkBase } from '@hypothesis/frontend-shared';
+import { ButtonBase, IconButton, Link } from '@hypothesis/frontend-shared';
 import {
   EditorLatexIcon,
   EditorQuoteIcon,
@@ -292,20 +292,25 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }: ToolbarProps) {
         title="Bulleted list"
       />
       <div className="grow flex justify-end">
-        <LinkBase
-          classes={classnames(
-            'flex justify-center items-center',
-            'text-grey-7 hover:!text-grey-7',
-            'touch:h-touch-minimum touch:w-touch-minimum',
-            'px-2 py-2.5'
-          )}
+        <Link
+          classes="text-grey-7 hover:!text-grey-7"
           href="https://web.hypothes.is/help/formatting-annotations-with-markdown/"
           target="_blank"
           title="Formatting help"
           aria-label="Formatting help"
+          underline="none"
+          variant="custom"
         >
-          <HelpIcon className="w-2.5 h-2.5" />
-        </LinkBase>
+          <div
+            className={classnames(
+              'flex justify-center items-center',
+              'touch:h-touch-minimum touch:w-touch-minimum',
+              'px-2 py-2.5 touch:p-0'
+            )}
+          >
+            <HelpIcon className="w-2.5 h-2.5" />
+          </div>
+        </Link>
 
         <ToolbarButton
           label={isPreviewing ? 'Write' : 'Preview'}

src/sidebar/components/ShareLinks.tsx

 import {
-  LinkBase,
+  Link,
   EmailIcon,
   SocialFacebookIcon,
   SocialTwitterIcon,
@@ -23,19 +23,21 @@ type ShareLinkProps = {
 function ShareLink({ label, icon: Icon, uri }: ShareLinkProps) {
   return (
     <li>
-      <LinkBase
+      <Link
         aria-label={label}
-        classes="text-grey-6 hover:text-color-text block"
+        classes="text-grey-6 hover:text-color-text"
         href={uri}
         title={label}
         target="_blank"
+        variant="custom"
+        underline="none"
       >
         <Icon
           // Make the icons sized to the current text size to allow for
           // differently-sized sharing icon links
           className="w-em h-em"
         />
-      </LinkBase>
+      </Link>
     </li>
   );
 }

src/sidebar/components/TagListItem.tsx

@@ -26,12 +26,13 @@ export default function TagListItem({
       <div className="grow px-1.5 py-1 touch:p-2">
         {href ? (
           <Link
-            color="text-light"
+            variant="text-light"
             href={href}
             lang=""
             target="_blank"
             aria-label={`Tag: ${tag}`}
             title={`View annotations with tag: ${tag}`}
+            underline="none"
           >
             {tag}
           </Link>