Update annotation leaf components for shared components, patterns

Part of https://github.com/hypothesis/frontend-shared/issues/232

src/sidebar/components/Annotation/AnnotationDocumentInfo.js

-/** @typedef {import("../../../types/api").Annotation} Annotation */
+import { Link } from '@hypothesis/frontend-shared';
 
 /**
  * @typedef AnnotationDocumentInfoProps
@@ -19,9 +19,9 @@ export default function AnnotationDocumentInfo({ domain, link, title }) {
       <div className="u-color-text--muted">
         on &quot;
         {link ? (
-          <a href={link} target="_blank" rel="noopener noreferrer">
+          <Link href={link} target="_blank">
             {title}
-          </a>
+          </Link>
         ) : (
           <span>{title}</span>
         )}

src/sidebar/components/Annotation/AnnotationLicense.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
+import { Icon, Link } from '@hypothesis/frontend-shared';
 
 /**
  * Render information about CC licensing
  */
 export default function AnnotationLicense() {
   return (
-    <div className="AnnotationLicense">
-      <a
-        className="hyp-u-layout-row u-color-text--muted"
+    <div className="hyp-u-padding--top hyp-u-border--top u-font--small u-line-height">
+      <Link
+        classes="hyp-u-layout-row--align-center p-link--muted"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
-        title="View more information about the Creative Commons Public Domain dedication"
         target="_blank"
-        rel="noopener noreferrer"
+        title="View more information about the Creative Commons Public Domain dedication"
       >
-        <div className="AnnotationLicense__icons">
-          <SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" />
-          <SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" />
-        </div>
+        <Icon name="cc-std" classes="u-icon--xsmall" />
+        <Icon name="cc-zero" classes="hyp-u-margin--left--1 u-icon--xsmall" />
+        <div className="hyp-u-margin--left--2">
           Annotations can be freely reused by anyone for any purpose.
-      </a>
+        </div>
+      </Link>
     </div>
   );
 }

src/sidebar/components/Annotation/AnnotationTimestamps.js

+import { Link } from '@hypothesis/frontend-shared';
 import { useEffect, useMemo, useState } from 'preact/hooks';
 
 import {
@@ -6,10 +7,6 @@ import {
   formatDate,
 } from '../../util/time';
 
-/**
- * @typedef {import("../../../types/api").Annotation} Annotation
- */
-
 /**
  * @typedef AnnotationTimestampsProps
  * @prop {string} annotationCreated
@@ -81,28 +78,29 @@ export default function AnnotationTimestamps({
       : 'edited';
 
   return (
-    <div className="AnnotationTimestamps">
+    <div>
       {withEditedTimestamp && (
         <span
-          className="AnnotationTimestamps__timestamp AnnotationTimestamps__edited"
+          className="u-color-text--muted u-font--small u-font--italic"
+          data-testid="timestamp-edited"
           title={updated.absolute}
         >
           ({editedString}){' '}
         </span>
       )}
       {annotationUrl ? (
-        <a
-          className="AnnotationTimestamps__timestamp AnnotationTimestamps__timestamp--linked"
+        <Link
+          classes="p-link--muted p-link--hover-muted"
           target="_blank"
-          rel="noopener noreferrer"
           title={created.absolute}
           href={annotationUrl}
         >
           {created.relative}
-        </a>
+        </Link>
       ) : (
         <span
-          className="AnnotationTimestamps__timestamp AnnotationTimestamps__created"
+          className="u-color-text--muted"
+          data-testid="timestamp-created"
           title={created.absolute}
         >
           {created.relative}

src/sidebar/components/Annotation/AnnotationUser.js

-/**
- * @typedef {import("../../../types/api").Annotation} Annotation
- */
+import { Link } from '@hypothesis/frontend-shared';
 
 /**
  * @typedef AnnotationUserProps
@@ -10,31 +8,22 @@
 
 /**
  * Display information about an annotation's user. Link to the user's
- * activity if it is a first-party user or `settings.usernameUrl` is present.
+ * activity if `authorLink` is present.
  *
  * @param {AnnotationUserProps} props
  */
 function AnnotationUser({ authorLink, displayName }) {
+  const user = <h3 className="u-color-text u-font--bold">{displayName}</h3>;
+
   if (authorLink) {
     return (
-      <div className="AnnotationUser">
-        <a
-          className="AnnotationUser__link"
-          href={authorLink}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h3 className="AnnotationUser__user-name">{displayName}</h3>
-        </a>
-      </div>
+      <Link href={authorLink} target="_blank">
+        {user}
+      </Link>
     );
   }
 
-  return (
-    <div className="AnnotationUser">
-      <h3 className="AnnotationUser__user-name">{displayName}</h3>
-    </div>
-  );
+  return <div>{user}</div>;
 }
 
 export default AnnotationUser;

src/sidebar/components/Annotation/test/AnnotationTimestamps-test.js

@@ -51,8 +51,8 @@ describe('AnnotationTimestamps', () => {
   it('renders an unlinked created timestamp if annotation does not have a link', () => {
     const wrapper = createComponent({ annotationUrl: '' });
 
-    const link = wrapper.find('a');
-    const span = wrapper.find('span.AnnotationTimestamps__created');
+    const link = wrapper.find('Link');
+    const span = wrapper.find('span[data-testid="timestamp-created"]');
     assert.isFalse(link.exists());
     assert.isTrue(span.exists());
     assert.equal(span.text(), 'fuzzy string');
@@ -63,7 +63,7 @@ describe('AnnotationTimestamps', () => {
 
     const wrapper = createComponent({ withEditedTimestamp: true });
 
-    const editedTimestamp = wrapper.find('.AnnotationTimestamps__edited');
+    const editedTimestamp = wrapper.find('[data-testid="timestamp-edited"]');
     assert.isTrue(editedTimestamp.exists());
     assert.include(editedTimestamp.text(), '(edited another fuzzy string)');
   });
@@ -73,7 +73,7 @@ describe('AnnotationTimestamps', () => {
 
     const wrapper = createComponent({ withEditedTimestamp: true });
 
-    const editedTimestamp = wrapper.find('.AnnotationTimestamps__edited');
+    const editedTimestamp = wrapper.find('[data-testid="timestamp-edited"]');
     assert.isTrue(editedTimestamp.exists());
     assert.include(editedTimestamp.text(), '(edited)');
   });

src/styles/sidebar/components/AnnotationLicense.scss

-@use '../../variables' as var;
-@use '../../mixins/layout';
-@use '../../mixins/utils';
-
-.AnnotationLicense {
-  @include utils.font--small;
-  @include utils.border--top;
-  // Space between border and text content
-  padding-top: var.$layout-space--xsmall;
-
-  // Container with two icons (representing CC licenses)
-  // with a very small amount of spacing between them
-  &__icons {
-    @include layout.row;
-    @include layout.horizontal-rhythm(1px);
-    // Add space before text
-    margin-right: var.$layout-space--xxsmall;
-  }
-}

src/styles/sidebar/components/AnnotationTimestamps.scss

-@use '../../variables' as var;
-@use '../../mixins/utils';
-
-.AnnotationTimestamps {
-  &__timestamp {
-    color: var.$color-text--light;
-
-    &--linked {
-      &:hover {
-        color: var.$color-text--light;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__edited {
-    @include utils.font--small;
-    color: var.$color-text--light;
-    font-style: italic;
-  }
-}

src/styles/sidebar/components/AnnotationUser.scss

-@use '../../variables' as var;
-
-.AnnotationUser {
-  &__user-name {
-    color: var.$color-text;
-    font-weight: bold;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -13,18 +13,18 @@
 // Custom button styling for the application
 @use './buttons';
 
+// Local patterns
+@use '../patterns';
+
 // Components
 // ----------
 @use './components/Annotation';
 @use './components/AnnotationBody';
 @use './components/AnnotationHeader';
-@use './components/AnnotationLicense';
 @use './components/AnnotationPublishControl';
 @use './components/AnnotationQuote';
 @use './components/AnnotationShareControl';
 @use './components/AnnotationShareInfo';
-@use './components/AnnotationTimestamps';
-@use './components/AnnotationUser';
 @use './components/AutocompleteList';
 @use './components/Excerpt';
 @use './components/FilterSelect';