Update `AnnotationShareInfo` to use `Icon`, simpler styling

src/sidebar/components/Annotation/AnnotationShareInfo.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
+import { Icon, Link } from '@hypothesis/frontend-shared';
 
 import { useStoreProxy } from '../../store/use-store';
 import { isPrivate } from '../../helpers/permissions';
 
 /**
  * @typedef {import("../../../types/api").Annotation} Annotation
- * @typedef {import('../../../types/api').Group} Group
  */
 
 /**
@@ -30,25 +29,24 @@ function AnnotationShareInfo({ annotation }) {
   const annotationIsPrivate = isPrivate(annotation.permissions);
 
   return (
-    <div className="AnnotationShareInfo hyp-u-layout-row--align-baseline">
+    <div className="hyp-u-layout-row--align-baseline">
       {group && linkToGroup && (
-        <a
-          className="hyp-u-layout-row--align-baseline u-color-text--muted"
+        <Link
+          classes="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 p-link--muted p-link--hover-muted"
           href={group.links.html}
           target="_blank"
-          rel="noopener noreferrer"
         >
           {group.type === 'open' ? (
-            <SvgIcon className="AnnotationShareInfo__icon" name="public" />
+            <Icon classes="u-icon--xsmall" name="public" />
           ) : (
-            <SvgIcon className="AnnotationShareInfo__icon" name="groups" />
+            <Icon classes="u-icon--xsmall" name="groups" />
           )}
-          <span className="AnnotationShareInfo__group-info">{group.name}</span>
-        </a>
+          <span>{group.name}</span>
+        </Link>
       )}
       {annotationIsPrivate && !linkToGroup && (
         <span className="hyp-u-layout-row--align-baseline u-color-text--muted">
-          <span className="AnnotationShareInfo__private-info">Only me</span>
+          <span data-testid="private-info">Only me</span>
         </span>
       )}
     </div>

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

@@ -58,18 +58,18 @@ describe('AnnotationShareInfo', () => {
     it('should display a group icon for private and restricted groups', () => {
       const wrapper = createAnnotationShareInfo();
 
-      const groupIcon = wrapper.find('SvgIcon');
+      const groupIcon = wrapper.find('Icon[name="groups"]');
 
-      assert.equal(groupIcon.prop('name'), 'groups');
+      assert.isTrue(groupIcon.exists());
     });
 
     it('should display a public/world icon for open groups', () => {
       fakeGroup.type = 'open';
       const wrapper = createAnnotationShareInfo();
 
-      const groupIcon = wrapper.find('SvgIcon');
+      const groupIcon = wrapper.find('Icon[name="public"]');
 
-      assert.equal(groupIcon.prop('name'), 'public');
+      assert.isTrue(groupIcon.exists());
     });
 
     it('should not show a link to third-party groups', () => {
@@ -110,7 +110,7 @@ describe('AnnotationShareInfo', () => {
         fakeGetGroup.returns({ name: 'Some Name', links: {} });
         const wrapper = createAnnotationShareInfo();
 
-        const privacyText = wrapper.find('.AnnotationShareInfo__private-info');
+        const privacyText = wrapper.find('[data-testid="private-info"]');
 
         assert.isOk(privacyText.exists());
         assert.equal(privacyText.text(), 'Only me');

src/styles/sidebar/components/AnnotationShareInfo.scss

-@use '../../variables' as var;
-@use '../../mixins/layout';
-@use '../../mixins/utils';
-
-.AnnotationShareInfo {
-  &__icon {
-    @include utils.icon--xsmall;
-    // This margin is currently needed because the icon is within an `a` element
-    margin-right: 5px;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -23,7 +23,6 @@
 @use './components/AnnotationPublishControl';
 @use './components/AnnotationQuote';
 @use './components/AnnotationShareControl';
-@use './components/AnnotationShareInfo';
 @use './components/AutocompleteList';
 @use './components/Excerpt';
 @use './components/FilterSelect';