RevDepRow: Make the whole row clickable

Author: Turbo87

app/components/rev-dep-row.hbs

@@ -1,6 +1,13 @@
-<div local-class="row" ...attributes>
+<div local-class="row {{if this.focused "focused"}}" ...attributes>
   <div>
-    <LinkTo @route="crate" @model={{@dependency.version.crateName}} data-test-crate-name>
+    <LinkTo
+      @route="crate"
+      @model={{@dependency.version.crateName}}
+      local-class="link"
+      data-test-crate-name
+      {{on "focusin" (fn this.setFocused true)}}
+      {{on "focusout" (fn this.setFocused false)}}
+    >
       {{@dependency.version.crateName}}
     </LinkTo>
     requires {{@dependency.req}}

app/components/rev-dep-row.js

@@ -0,0 +1,11 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class VersionRow extends Component {
+  @tracked focused = false;
+
+  @action setFocused(value) {
+    this.focused = value;
+  }
+}

app/components/rev-dep-row.module.css

@@ -1,4 +1,6 @@
 .row {
+    --hover-bg-color: hsl(217, 37%, 98%);
+    --crate-color: var(--grey700);
     --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
 
     display: flex;
@@ -12,11 +14,40 @@
     box-shadow: var(--shadow);
     transition: all 300ms;
 
+    &:hover, &.focused {
+        background-color: var(--hover-bg-color);
+        transition: all 0ms;
+    }
+
+    &.focused {
+        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
+    }
+
     @media only screen and (max-width: 550px) {
         display: block
     }
 }
 
+.link {
+    color: var(--crate-color);
+    font-weight: 500;
+    margin-right: 15px;
+    outline: none;
+
+    &:hover {
+        color: var(--crate-color);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
+
 .downloads {
     display: flex;
     align-items: center;
@@ -32,5 +63,5 @@
 }
 
 .rev-dep-downloads {
-    padding-left: 7px
+    padding-left: 7px;
 }