Adjust usage of new shared icon

Author: acelaya

package.json

@@ -14,7 +14,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.16.7",
     "@hypothesis/frontend-build": "^3.0.0",
-    "@hypothesis/frontend-shared": "^8.16.0",
+    "@hypothesis/frontend-shared": "^9.0.0",
     "@hypothesis/frontend-testing": "^1.3.1",
     "@npmcli/arborist": "^9.0.0",
     "@octokit/rest": "^21.0.0",

src/sidebar/components/Annotation/AnnotationHeader.tsx

@@ -1,7 +1,7 @@
 import {
   LinkButton,
   HighlightIcon,
-  LockIcon,
+  LockFilledIcon,
 } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
 
@@ -115,7 +115,7 @@ function AnnotationHeader({
     <header>
       <div className="flex gap-x-1 items-center flex-wrap-reverse">
         {isPrivate(annotation.permissions) && !isEditing && (
-          <LockIcon
+          <LockFilledIcon
             className="w-[12px] h-[12px]"
             title="This annotation is visible only to you"
           />

src/sidebar/components/Annotation/AnnotationPublishControl.tsx

@@ -3,7 +3,7 @@ import {
   CancelIcon,
   GlobeIcon,
   GroupsIcon,
-  LockIcon,
+  LockFilledIcon,
   MenuExpandIcon,
 } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
@@ -116,7 +116,7 @@ function AnnotationPublishControl({
               onClick={() => onSetPrivate(false)}
             />
             <MenuItem
-              icon={LockIcon}
+              icon={LockFilledIcon}
               label="Only Me"
               isSelected={isPrivate}
               onClick={() => onSetPrivate(true)}

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

@@ -104,15 +104,15 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader();
 
-      assert.isTrue(wrapper.find('LockIcon').exists());
+      assert.isTrue(wrapper.find('LockFilledIcon').exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is being edited', () => {
       fakeIsPrivate.returns(true);
 
       const wrapper = createAnnotationHeader({ isEditing: true });
 
-      assert.isFalse(wrapper.find('LockIcon').exists());
+      assert.isFalse(wrapper.find('LockFilledIcon').exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is not private', () => {

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

@@ -1,4 +1,8 @@
-import { GlobeIcon, GroupsIcon, LockIcon } from '@hypothesis/frontend-shared';
+import {
+  GlobeIcon,
+  GroupsIcon,
+  LockFilledIcon,
+} from '@hypothesis/frontend-shared';
 import {
   checkAccessibility,
   mockImportedComponents,
@@ -175,7 +179,7 @@ describe('AnnotationPublishControl', () => {
         const wrapper = createAnnotationPublishControl();
         const privateMenuItem = wrapper.find('MenuItem').at(1);
 
-        assert.equal(privateMenuItem.prop('icon'), LockIcon);
+        assert.equal(privateMenuItem.prop('icon'), LockFilledIcon);
       });
 
       it('should have an "Only me" label', () => {

src/sidebar/components/GroupList/GroupListItem.tsx

@@ -2,10 +2,10 @@ import {
   confirm,
   CopyIcon,
   ExternalIcon,
-  GlobeAltIcon,
-  GlobeAltLockIcon,
+  GlobeIcon,
+  GlobeLockIcon,
   LeaveIcon,
-  LockIcon,
+  LockFilledIcon,
 } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
@@ -32,9 +32,9 @@ function GroupIcon({ type }: { type: GroupType }) {
       title={title}
       data-testid="group-icon"
     >
-      {type === 'open' && <GlobeAltIcon />}
-      {type === 'restricted' && <GlobeAltLockIcon />}
-      {type === 'private' && <LockIcon />}
+      {type === 'open' && <GlobeIcon />}
+      {type === 'restricted' && <GlobeLockIcon />}
+      {type === 'private' && <LockFilledIcon />}
     </div>
   );
 }

src/sidebar/components/GroupList/test/GroupListItem-test.js

@@ -381,17 +381,17 @@ describe('GroupListItem', () => {
   [
     {
       type: 'private',
-      expectedIcon: 'LockIcon',
+      expectedIcon: 'LockFilledIcon',
       expectedTitle: 'Private group',
     },
     {
       type: 'restricted',
-      expectedIcon: 'GlobeAltLockIcon',
+      expectedIcon: 'GlobeLockIcon',
       expectedTitle: 'Restricted group',
     },
     {
       type: 'open',
-      expectedIcon: 'GlobeAltIcon',
+      expectedIcon: 'GlobeIcon',
       expectedTitle: 'Public group',
     },
   ].forEach(({ type, expectedIcon, expectedTitle }) => {

src/sidebar/components/ShareDialog/ShareAnnotations.tsx

@@ -3,7 +3,7 @@ import {
   Input,
   InputGroup,
   IconButton,
-  LockIcon,
+  LockFilledIcon,
 } from '@hypothesis/frontend-shared';
 import { useCallback } from 'preact/hooks';
 
@@ -94,7 +94,7 @@ function ShareAnnotations({ toastMessenger }: ShareAnnotationsProps) {
             )}{' '}
             <span>
               Private (
-              <LockIcon className="inline w-[14px] h-[14px] -mt-0.5" />{' '}
+              <LockFilledIcon className="inline w-[14px] h-[14px] -mt-0.5" />{' '}
               <em>Only Me</em>) annotations are only visible to you.
             </span>
           </p>

yarn.lock

@@ -2282,15 +2282,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hypothesis/frontend-shared@npm:^8.16.0":
-  version: 8.16.1
-  resolution: "@hypothesis/frontend-shared@npm:8.16.1"
+"@hypothesis/frontend-shared@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@hypothesis/frontend-shared@npm:9.0.0"
   dependencies:
     highlight.js: ^11.6.0
     wouter-preact: ^3.0.0
   peerDependencies:
     preact: ^10.25.1
-  checksum: 9c1037d4e8f10ad8423e244a75d1f5c1000433b0f519fc87c43dff51cf570d6dc702838dc188cd63c5a3f7a821e0d95ef2114eb2788fded2d30813a915228628
+  checksum: 203f8562d9d0dd5fc6e26cd2e56d0264ea3129ed8e54673d13a15646f501221139f12c9a092b82e15a0c60f476821937617a7db9c9e5715b03aeebe082b0f986
   languageName: node
   linkType: hard
 
@@ -8787,7 +8787,7 @@ __metadata:
     "@babel/preset-react": ^7.0.0
     "@babel/preset-typescript": ^7.16.7
     "@hypothesis/frontend-build": ^3.0.0
-    "@hypothesis/frontend-shared": ^8.16.0
+    "@hypothesis/frontend-shared": ^9.0.0
     "@hypothesis/frontend-testing": ^1.3.1
     "@npmcli/arborist": ^9.0.0
     "@octokit/rest": ^21.0.0