Merge pull request #1987 from hypothesis/adder-svg-icons

Use SVG icons for adder toolbar

src/annotator/components/adder-toolbar.js

@@ -3,18 +3,20 @@ import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
 import { useShortcut } from '../../shared/shortcut';
+import SvgIcon from '../../shared/components/svg-icon';
 
 function ToolbarButton({ icon, label, onClick, shortcut }) {
   useShortcut(shortcut, onClick);
 
-  const title = shortcut ? `${label} (${shortcut})` : null;
+  const title = shortcut ? `${label} (${shortcut})` : label;
 
   return (
     <button
-      className={classnames('annotator-adder-actions__button', icon)}
+      className="annotator-adder-actions__button"
       onClick={onClick}
       title={title}
     >
+      <SvgIcon name={icon} />
       <span className="annotator-adder-actions__label">{label}</span>
     </button>
   );
@@ -58,13 +60,13 @@ export default function AdderToolbar({ arrowDirection, isVisible, onCommand }) {
     >
       <hypothesis-adder-actions className="annotator-adder-actions">
         <ToolbarButton
-          icon="h-icon-annotate"
+          icon="annotate"
           onClick={e => handleCommand(e, 'annotate')}
           label="Annotate"
           shortcut={annotateShortcut}
         />
         <ToolbarButton
-          icon="h-icon-highlight"
+          icon="highlight"
           onClick={e => handleCommand(e, 'highlight')}
           label="Highlight"
           shortcut={highlightShortcut}

src/annotator/index.js

@@ -10,6 +10,13 @@ if (process.env.NODE_ENV !== 'production') {
   require('preact/debug');
 }
 
+// Load icons.
+import { registerIcons } from '../shared/components/svg-icon';
+registerIcons({
+  annotate: require('../images/icons/annotate.svg'),
+  highlight: require('../images/icons/highlight.svg'),
+});
+
 import configFrom from './config/index';
 import Guest from './guest';
 import PdfSidebar from './pdf-sidebar';

src/annotator/test/adder-test.js

@@ -86,7 +86,7 @@ describe('Adder', () => {
   describe('button handling', () => {
     it('calls onHighlight callback when Highlight button is clicked', () => {
       const highlightBtn = getContent(adderCtrl).querySelector(
-        'button.h-icon-highlight'
+        'button[title^="Highlight"]'
       );
       highlightBtn.dispatchEvent(new Event('click'));
       assert.called(adderCallbacks.onHighlight);
@@ -94,7 +94,7 @@ describe('Adder', () => {
 
     it('calls onAnnotate callback when Annotate button is clicked', () => {
       const annotateBtn = getContent(adderCtrl).querySelector(
-        'button.h-icon-annotate'
+        'button[title^="Annotate"]'
       );
       annotateBtn.dispatchEvent(new Event('click'));
       assert.called(adderCallbacks.onAnnotate);
@@ -102,7 +102,7 @@ describe('Adder', () => {
 
     it("calls onAnnotate callback when Annotate button's label is clicked", () => {
       const annotateLabel = getContent(adderCtrl).querySelector(
-        'button.h-icon-annotate > span'
+        'button[title^="Annotate"] > span'
       );
       annotateLabel.dispatchEvent(new Event('click', { bubbles: true }));
       assert.called(adderCallbacks.onAnnotate);

src/sidebar/components/annotation-header.js

@@ -8,7 +8,7 @@ import AnnotationDocumentInfo from './annotation-document-info';
 import AnnotationShareInfo from './annotation-share-info';
 import AnnotationUser from './annotation-user';
 import Button from './button';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 import Timestamp from './timestamp';
 
 /**

src/sidebar/components/annotation-license.js

 import { createElement } from 'preact';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * Render information about CC licensing

src/sidebar/components/annotation-share-control.js

@@ -9,7 +9,7 @@ import { withServices } from '../util/service-context';
 import Button from './button';
 import useElementShouldClose from './hooks/use-element-should-close';
 import ShareLinks from './share-links';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * "Popup"-style component for sharing a single annotation.

src/sidebar/components/annotation-share-info.js

@@ -4,7 +4,7 @@ import propTypes from 'prop-types';
 import useStore from '../store/use-store';
 import { isPrivate } from '../util/permissions';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * Render information about what group an annotation is in and

src/sidebar/components/button.js

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * A button, one of three base types depending on provided props:

src/sidebar/components/help-panel.js

@@ -8,7 +8,7 @@ import { withServices } from '../util/service-context';
 import VersionData from '../util/version-data';
 
 import SidebarPanel from './sidebar-panel';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 import Tutorial from './tutorial';
 import VersionInfo from './version-info';
 

src/sidebar/components/logged-out-message.js

@@ -4,7 +4,7 @@ import propTypes from 'prop-types';
 import { withServices } from '../util/service-context';
 
 import Button from './button';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * Render a call-to-action to log in or sign up. This message is intended to be

src/sidebar/components/markdown-editor.js

@@ -11,7 +11,7 @@ import {
 } from '../markdown-commands';
 
 import MarkdownView from './markdown-view';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 // Mapping of toolbar command name to key for Ctrl+<key> keyboard shortcuts.
 // The shortcuts are taken from Stack Overflow's editor.

src/sidebar/components/menu-item.js

@@ -5,7 +5,7 @@ import propTypes from 'prop-types';
 import { onActivate } from '../util/on-activate';
 
 import Slider from './slider';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * An item in a dropdown menu.

src/sidebar/components/menu.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import propTypes from 'prop-types';
 
 import useElementShouldClose from './hooks/use-element-should-close';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 // The triangular indicator below the menu toggle button that visually links it
 // to the menu content.

src/sidebar/components/selection-tabs.js

@@ -8,7 +8,7 @@ import uiConstants from '../ui-constants';
 import { withServices } from '../util/service-context';
 
 import NewNoteBtn from './new-note-btn';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  *  Display name of the tab and annotation count.

src/sidebar/components/share-annotations-panel.js

@@ -9,7 +9,7 @@ import { withServices } from '../util/service-context';
 import Button from './button';
 import ShareLinks from './share-links';
 import SidebarPanel from './sidebar-panel';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * A panel for sharing the current group's annotations.

src/sidebar/components/share-links.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 
 import { withServices } from '../util/service-context';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * A single sharing link as a list item

src/sidebar/components/sidebar-content-error.js

@@ -4,7 +4,7 @@ import propTypes from 'prop-types';
 import useStore from '../store/use-store';
 
 import Button from './button';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * An error message to display in the sidebar.

src/sidebar/components/sidebar-panel.js

@@ -7,7 +7,7 @@ import useStore from '../store/use-store';
 
 import Button from './button';
 import Slider from './slider';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * Base component for a sidebar panel.

src/sidebar/components/tag-editor.js

@@ -5,7 +5,7 @@ import propTypes from 'prop-types';
 import { withServices } from '../util/service-context';
 
 import AutocompleteList from './autocomplete-list';
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 import useElementShouldClose from './hooks/use-element-should-close';
 
 // Global counter used to create a unique id for each instance of a TagEditor

src/sidebar/components/test/menu-test.js

@@ -5,6 +5,7 @@ import { act } from 'preact/test-utils';
 import Menu from '../menu';
 import { $imports } from '../menu';
 
+import mockImportedComponents from '../../../test-util/mock-imported-components';
 import { checkAccessibility } from '../../../test-util/accessibility';
 
 describe('Menu', () => {
@@ -32,10 +33,7 @@ describe('Menu', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
 
-    $imports.$mock({
-      // eslint-disable-next-line react/display-name
-      './svg-icon': () => <span>Fake SVG icon</span>,
-    });
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {

src/sidebar/components/toast-messages.js

@@ -5,7 +5,7 @@ import propTypes from 'prop-types';
 import useStore from '../store/use-store';
 import { withServices } from '../util/service-context';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * An individual toast message—a brief and transient success or error message.

src/sidebar/components/tutorial.js

@@ -4,7 +4,7 @@ import propTypes from 'prop-types';
 import isThirdPartyService from '../util/is-third-party-service';
 import { withServices } from '../util/service-context';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from '../../shared/components/svg-icon';
 
 /**
  * Subcomponent: an "instruction" within the tutorial step that includes an

src/sidebar/index.js

@@ -108,7 +108,7 @@ function autosave(autosaveService) {
 }
 
 // Register icons used by the sidebar app (and maybe other assets in future).
-import { registerIcons } from './components/svg-icon';
+import { registerIcons } from '../shared/components/svg-icon';
 import iconSet from './icons';
 registerIcons(iconSet);
 
@@ -124,7 +124,7 @@ import SearchStatusBar from './components/search-status-bar';
 import SelectionTabs from './components/selection-tabs';
 import ShareAnnotationsPanel from './components/share-annotations-panel';
 import SidebarContentError from './components/sidebar-content-error';
-import SvgIcon from './components/svg-icon';
+import SvgIcon from '../shared/components/svg-icon';
 import Thread from './components/thread';
 import ToastMessages from './components/toast-messages';
 import TopBar from './components/top-bar';

src/sidebar/test/bootstrap.js

@@ -16,5 +16,5 @@ configure({ adapter: new Adapter() });
 // app available in the tests. This enables validation of icon names passed to
 // `SvgIcon`.
 import iconSet from '../icons';
-import { registerIcons } from '../components/svg-icon';
+import { registerIcons } from '../../shared/components/svg-icon';
 registerIcons(iconSet);

src/styles/annotator/adder.scss

@@ -134,8 +134,10 @@ $adder-transition-duration: 80ms;
 }
 
 .annotator-adder-actions__label {
+  margin-bottom: 2px;
+  margin-top: 4px;
+
   font-size: 11px;
-  margin: 2px 0px;
   font-family: sans-serif;
   color: var.$grey-mid !important;
   transition: color $adder-transition-duration;