Merge pull request danskernesdigitalebibliotek#181 from itk-dev/feature/links-and-boxes

Feature/links and boxes

Author: sinejespersen

src/stories/Library/Arrows/arrows.scss

@@ -42,3 +42,30 @@
 .arrow__link {
   text-decoration: none;
 }
+
+/* BEM plugin does not support interpolation */
+/* stylelint-disable plugin/stylelint-bem-namics */
+@mixin arrow($className) {
+  // Hide arrow
+  .#{$className} > {
+    svg {
+      width: 35px;
+      visibility: hidden;
+      opacity: 0;
+      margin-right: 20px;
+    }
+  }
+  // Show arrow on hover
+  .#{$className} {
+    &:hover {
+      svg {
+        @include breakpoint-s {
+          visibility: visible;
+          opacity: 1;
+          align-self: center;
+          justify-self: end;
+        }
+      }
+    }
+  }
+}

src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { Counter, CounterProps } from "../../counter/Counter";
 import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel";
 import { Cover } from "../../cover/Cover";
+import { ReactComponent as ArrowSmallRight } from "../../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
 
 export type ListReservationsAndLoansProps = {
   cover: {
@@ -42,7 +43,9 @@ export const ListReservationsAndLoans = (
               <StatusLabel label="bog" status="outline" />
             </div>
             <div className="list-reservation__about">
-              <h3 className="text-header-h4">{cover.title}</h3>
+              <button className="list-reservation__header">
+                {cover.title}
+              </button>
               <p className="text-small-caption color-secondary-gray">
                 {cover.description}
               </p>
@@ -98,6 +101,7 @@ export const ListReservationsAndLoans = (
               <p className="text-body-medium-medium">Gebyr {fee},-</p>
             </div>
           ) : null}
+          <ArrowSmallRight />
         </div>
       </div>
     </div>

src/stories/Library/Lists/list-reservation/list-reservation.scss

@@ -20,6 +20,10 @@ $list-reservation-space-desktop: 24px;
     height: 184px;
     padding: $list-reservation-space-desktop;
   }
+
+  &:hover {
+    filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%));
+  }
 }
 
 .list-reservation__material {
@@ -86,6 +90,7 @@ $list-reservation-space-desktop: 24px;
 
 .list-reservation__about {
   padding-left: 0;
+  text-align: left;
 
   p {
     margin-top: 2px;
@@ -102,6 +107,17 @@ $list-reservation-space-desktop: 24px;
   }
 }
 
+.list-reservation__header {
+  @extend %text-header-h4;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
 .list-reservation__status {
   height: 100%;
   display: grid;
@@ -113,8 +129,11 @@ $list-reservation-space-desktop: 24px;
   }
 }
 
+@include arrow("list-reservation__status");
+
 .list-reservation__counter {
   display: none;
+  margin: $s-xs;
 
   @include breakpoint-s {
     width: 92px;

src/stories/Library/search-result-item/search-result-item.scss

@@ -17,25 +17,10 @@
   &:hover {
     filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%));
   }
-
-  // Hide arrow
-  > svg {
-    width: 35px;
-    visibility: hidden;
-    opacity: 0;
-    margin-right: 20px;
-  }
-  // Show arrow on hover
-  &:hover svg {
-    @include breakpoint-s {
-      visibility: visible;
-      opacity: 1;
-      align-self: center;
-      justify-self: end;
-    }
-  }
 }
 
+@include arrow("search-result-item");
+
 .search-result-item__cover {
   grid-row: span 2;