feat(home): show shelf arrows on hover

jwplayer · May 25, 2021 · f978d37 · f978d37
1 parent 8fab1dd
commit f978d37
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -16,6 +16,15 @@
   margin: 12px 56px;
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
+
+  &:hover {
+    .arrow {
+      opacity: 1;
+      &.disabled {
+        opacity: 0.3;
+      }
+    }
+  }
 }
 
 .title {
@@ -32,19 +41,21 @@
 
 .arrow {
   cursor: pointer;
-  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  opacity: 0;
+
   > svg {
     width: 30px;
     height: 30px;
   }
   &:hover {
     transform: scale(1.2);
   }
-}
-.arrowDisabled {
-  opacity: 0.3;
-  > svg {
-    width: 30px;
-    height: 30px;
+  &.disabled {
+    cursor: default;
+    &:hover {
+      transform: none;
+    }
   }
 }
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -64,7 +64,9 @@ const Shelf: React.FC<ShelfProps> = ({
         spacing={12}
         renderLeftControl={(handleClick) => (
           <div
-            className={didSlideBefore ? styles.arrow : styles.arrowDisabled}
+            className={classNames(styles.arrow, {
+              [styles.disabled]: !didSlideBefore,
+            })}
             role="button"
             tabIndex={didSlideBefore ? 0 : -1}
             aria-label="Slide left"
@@ -78,7 +80,7 @@ const Shelf: React.FC<ShelfProps> = ({
         )}
         renderRightControl={(handleClick) => (
           <div
-            className={styles.arrow}
+            className={classNames(styles.arrow)}
             role="button"
             tabIndex={0}
             aria-label="Slide right"