Merge pull request #2138 from hypothesis/annotator-svg-icons

Use SVG icons in annotator toolbar

src/annotator/components/toolbar.js

@@ -2,6 +2,8 @@ import classnames from 'classnames';
 import propTypes from 'prop-types';
 import { createElement } from 'preact';
 
+import SvgIcon from '../../shared/components/svg-icon';
+
 function ToolbarButton({
   buttonRef,
   extraClasses,
@@ -19,15 +21,15 @@ function ToolbarButton({
 
   return (
     <button
-      // This currently uses the icon font. This needs to be converted to
-      // `SvgIcon`.
-      className={classnames('annotator-frame-button', extraClasses, icon)}
+      className={classnames('annotator-frame-button', extraClasses)}
       aria-label={label}
       aria-pressed={selected}
       onClick={handleClick}
       ref={buttonRef}
       title={label}
-    />
+    >
+      <SvgIcon name={icon} />
+    </button>
   );
 }
 
@@ -61,7 +63,7 @@ export default function Toolbar({
         <ToolbarButton
           extraClasses="annotator-frame-button--sidebar_close"
           label="Close annotation sidebar"
-          icon="h-icon-close"
+          icon="cancel"
           onClick={closeSidebar}
         />
       )}
@@ -74,14 +76,14 @@ export default function Toolbar({
               ? 'Hide annotation sidebar'
               : 'Show annotation sidebar'
           }
-          icon={isSidebarOpen ? 'h-icon-chevron-right' : 'h-icon-chevron-left'}
+          icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
           onClick={toggleSidebar}
         />
       )}
       {!useMinimalControls && (
         <ToolbarButton
           label="Show highlights"
-          icon={showHighlights ? 'h-icon-visibility' : 'h-icon-visibility-off'}
+          icon={showHighlights ? 'show' : 'hide'}
           selected={showHighlights}
           onClick={toggleHighlights}
         />
@@ -91,9 +93,7 @@ export default function Toolbar({
           label={
             newAnnotationType === 'note' ? 'New page note' : 'New annotation'
           }
-          icon={
-            newAnnotationType === 'note' ? 'h-icon-note' : 'h-icon-annotate'
-          }
+          icon={newAnnotationType === 'note' ? 'note' : 'annotate'}
           onClick={createAnnotation}
         />
       )}

src/annotator/icons.js

+/**
+ * Set of icons used by the annotator part of the application via the `SvgIcon`
+ * component.
+ */
+export default {
+  annotate: require('../images/icons/annotate.svg'),
+  cancel: require('../images/icons/cancel.svg'),
+  'caret-left': require('../images/icons/caret-left.svg'),
+  'caret-right': require('../images/icons/caret-right.svg'),
+  hide: require('../images/icons/hide.svg'),
+  highlight: require('../images/icons/highlight.svg'),
+  note: require('../images/icons/note.svg'),
+  show: require('../images/icons/show.svg'),
+};

src/annotator/index.js

@@ -12,10 +12,8 @@ if (process.env.NODE_ENV !== 'production') {
 
 // Load icons.
 import { registerIcons } from '../shared/components/svg-icon';
-registerIcons({
-  annotate: require('../images/icons/annotate.svg'),
-  highlight: require('../images/icons/highlight.svg'),
-});
+import iconSet from './icons';
+registerIcons(iconSet);
 
 import configFrom from './config/index';
 import Guest from './guest';

src/images/icons/caret-left.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 12L6 8l4-4"></path></g></svg>

src/images/icons/caret-right.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
-        <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--caret-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4l4 4-4 4"></path></g></svg>

src/images/icons/collapsed.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
+        <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
+    </g>
+</svg>

src/images/icons/hide.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.73 12.973A9.89 9.89 0 0 1 8 13c-3.866 0-7-2.239-7-5 0-.753.233-1.467.65-2.107m5.62-2.866A9.89 9.89 0 0 1 8 3c3.866 0 7 2.239 7 5 0 .753-.233 1.467-.65 2.107M1 1l14 14L1 1z"></path></g></svg>

src/images/icons/note.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 15h6l8-6V1H1v14zm6-1V9h7"></path></g></svg>

src/images/icons/show.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 13c3.866 0 7-2.239 7-5s-3.134-5-7-5-7 2.239-7 5 3.134 5 7 5zm0-4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path></g></svg>

src/sidebar/components/thread.js

@@ -31,7 +31,7 @@ function Thread({ showDocumentInfo = false, thread, threadsService }) {
   // Render a control to expand/collapse the current thread if this thread has
   // a parent (i.e. is a reply thread)
   const showThreadToggle = !!thread.parent;
-  const toggleIcon = thread.collapsed ? 'caret-right' : 'expand-menu';
+  const toggleIcon = thread.collapsed ? 'collapsed' : 'expand-menu';
   const toggleTitle = thread.collapsed ? 'Expand replies' : 'Collapse replies';
 
   // If rendering child threads, only render those that have at least one

src/sidebar/icons.js

 /**
- * Set of icons used by the sidebar application for use with the `SvgIcon`
+ * Set of icons used by the sidebar application via the `SvgIcon`
  * component.
  */
 export default {
@@ -12,6 +12,7 @@ export default {
   'cc-std': require('../images/icons/cc-std.svg'),
   'cc-zero': require('../images/icons/cc-zero.svg'),
   'collapse-menu': require('../images/icons/collapse-menu.svg'),
+  collapsed: require('../images/icons/collapsed.svg'),
   copy: require('../images/icons/copy.svg'),
   cursor: require('../images/icons/cursor.svg'),
   edit: require('../images/icons/edit.svg'),

src/sidebar/test/bootstrap.js

@@ -16,6 +16,10 @@ configure({ adapter: new Adapter() });
 // Make all the icons that are available for use with `SvgIcon` in the actual
 // app available in the tests. This enables validation of icon names passed to
 // `SvgIcon`.
-import iconSet from '../icons';
+import sidebarIcons from '../icons';
+import annotatorIcons from '../../annotator/icons';
 import { registerIcons } from '../../shared/components/svg-icon';
-registerIcons(iconSet);
+registerIcons({
+  ...sidebarIcons,
+  ...annotatorIcons,
+});

src/styles/annotator/annotator.scss

@@ -103,12 +103,11 @@ $sidebar-collapse-transition-time: 150ms;
     background: var.$white;
     border: solid 1px var.$grey-3;
     border-radius: 4px;
-    color: var.$grey-semi;
+    color: var.$grey-5;
     text-decoration: none;
     height: 30px;
     width: 30px;
     padding: 0;
-    font-size: 16px;
     margin-bottom: 5px;
 
     &:active {
@@ -117,7 +116,7 @@ $sidebar-collapse-transition-time: 150ms;
 
     &:focus,
     &:hover {
-      color: var.$text-color;
+      color: var.$grey-7;
     }
   }
 
@@ -129,6 +128,7 @@ $sidebar-collapse-transition-time: 150ms;
     width: 36px;
     margin-bottom: 10px;
     height: var.$top-bar-height;
+    color: var.$grey-semi;
   }
 
   .annotator-frame-button--sidebar_close {

src/styles/mixins/buttons.scss

@@ -25,7 +25,7 @@
 
   &:hover {
     transition: 0.2s ease-out;
-    color: var.$grey-6;
+    color: var.$grey-7;
   }
 
   &.is-active {

src/styles/sidebar/components/menu.scss

@@ -19,6 +19,10 @@
   display: block;
   height: 100%;
   align-items: center;
+  &:hover {
+    transition: 0.2s ease-out;
+    color: var.$grey-7;
+  }
 }
 
 .menu__toggle-wrapper {

src/styles/sidebar/components/top-bar.scss

@@ -21,10 +21,10 @@
   &__icon-button,
   &__menu-icon {
     &.is-active {
-      color: var.$grey-6;
+      color: var.$grey-7;
 
       &:hover {
-        color: var.$grey-6;
+        color: var.$grey-7;
       }
     }
   }