From 096b183900067f744677d6408dc0c5dba77c28dc Mon Sep 17 00:00:00 2001
From: Conrad Chan <conrad@box.com>
Date: Tue, 26 Mar 2019 15:16:43 -0700
Subject: [PATCH] Update: Add hover state to thumbnails (#965)

---
 src/lib/ThumbnailsSidebar.js      | 6 ++++--
 src/lib/viewers/doc/_docBase.scss | 9 +++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js
index 3fa959e79..db9cd905e 100644
--- a/src/lib/ThumbnailsSidebar.js
+++ b/src/lib/ThumbnailsSidebar.js
@@ -208,6 +208,7 @@ class ThumbnailsSidebar {
         thumbnailEl.className = CLASS_BOX_PREVIEW_THUMBNAIL;
         thumbnailEl.dataset.bpPageNum = pageNum;
         thumbnailEl.appendChild(this.createPageNumber(pageNum));
+
         const thumbnailNav = this.createThumbnailNav();
         thumbnailEl.appendChild(thumbnailNav);
 
@@ -233,6 +234,7 @@ class ThumbnailsSidebar {
     createThumbnailNav() {
         const thumbnailNav = document.createElement('a');
         thumbnailNav.className = CLASS_BOX_PREVIEW_THUMBNAIL_NAV;
+        thumbnailNav.tabIndex = '0';
         return thumbnailNav;
     }
 
@@ -240,7 +242,7 @@ class ThumbnailsSidebar {
      * Request the thumbnail image to be made
      *
      * @param {number} itemIndex - the item index in the overall list (0 indexed)
-     * @param {HTMLElement} thumbnailEl - the thumbnail button element
+     * @param {HTMLElement} thumbnailEl - the thumbnail element
      * @return {void}
      */
     requestThumbnailImage(itemIndex, thumbnailEl) {
@@ -248,7 +250,7 @@ class ThumbnailsSidebar {
             this.createThumbnailImage(itemIndex).then((imageEl) => {
                 // Promise will resolve with null if create image request was already in progress
                 if (imageEl) {
-                    // Appends to the lastChild which should be the thumbnail nav element
+                    // Appends to the thumbnail nav element
                     thumbnailEl.lastChild.appendChild(imageEl);
                     thumbnailEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IMAGE_LOADED);
                 }
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
index a3e48c6fb..1fc22ff5e 100644
--- a/src/lib/viewers/doc/_docBase.scss
+++ b/src/lib/viewers/doc/_docBase.scss
@@ -53,10 +53,19 @@ $thumbnail-sidebar-width: 226px;
         border-radius: $thumbnail-border-radius;
         cursor: pointer;
         flex: 1 0 154px;
+        outline: none;
         overflow: hidden;
         padding: 0;
     }
 
+    .bp-thumbnail:not(.bp-thumbnail-is-selected) {
+        .bp-thumbnail-nav:focus,
+        .bp-thumbnail-nav:hover {
+            border: 1px solid $seesee;
+            margin: 2px;
+        }
+    }
+
     .bp-thumbnail-image {
         background-position: center;
         background-repeat: no-repeat;