DEICH-5795: DEICH-5796: deichman.no: made modal wider, added number of...

DEICH-5795: DEICH-5796: deichman.no: made modal wider, added number of publications text and fixed a minor bug

deichman.no/components/ReservationsContainer/ReservationContainer.js

-import React, { Fragment } from "react";
-import PropTypes from "prop-types";
+import { Modal } from "@digibib/deichman-ui";
 import autoBind from "auto-bind";
-import { connect } from "react-redux";
 import FocusTrap from "focus-trap-react";
 import Router from "next/router";
-
-import {
-  reservePublication,
-  remoteReservePublication,
-  resetReservationError
-} from "../../store/reservation";
+import PropTypes from "prop-types";
+import React, { Fragment } from "react";
+import { connect } from "react-redux";
 import {
   fetchKohaBranches,
   kohaBranchesForDropdownSelector
 } from "../../store/libraries";
-
-import ReservationForm from "../ReservationForm";
+import {
+  remoteReservePublication,
+  reservePublication,
+  resetReservationError
+} from "../../store/reservation";
+import ModalPortal from "../ModalPortal/ModalPortal";
 import RemoteReservationForm from "../RemoteReservationForm";
-
-import { Modal } from "@digibib/deichman-ui";
-import "./styles.css";
+import ReservationForm from "../ReservationForm";
 import ReservationSelector from "./ReservationSelector";
-import ModalPortal from "../ModalPortal/ModalPortal";
+import "./styles.css";
 
 /**
  * Responsible for reserving items from the catalog
@@ -188,6 +185,7 @@ class ReservationContainer extends React.Component {
       limitedToBranches.length > 0
         ? branches.filter(branch => limitedToBranches.includes(branch.value))
         : branches;
+
     return (
       <ModalPortal>
         <div className="reservation-wrapper">
@@ -201,7 +199,7 @@ class ReservationContainer extends React.Component {
               name="Reserver"
               visible={this.state.show}
               onClose={this.handleCloseModal(false)}
-              sizeW="40rem"
+              width="wide"
               showClose
             >
               <div

deichman.no/components/ReservationsContainer/ReservationSelector.js

@@ -18,6 +18,7 @@ export default function ReservationSelector({
   const onFavourite = recordId => dispatch(toggleFavourites({ recordId }));
   const userCategory = useSelector(state => state.auth.userData.category);
   const kohaUrl = useSelector(state => state.application.externalUrls.koha);
+  const numPublications = publications?.length > 0 ? publications.length : "";
 
   const reservablePublications = publications.filter(
     pub => !notReservableReason(pub, copies)
@@ -39,7 +40,7 @@ export default function ReservationSelector({
   };
   return (
     <Block top={4}>
-      <h2>Velg en utgave</h2>
+      <h2>Velg en utgave {`(${numPublications})`}</h2>
       <PublicationList
         publications={reservablePublications}
         copies={copies}

deichman.no/components/ReservationsContainer/styles.css

 .reservation-wrapper {
   .modal__inner {
     @media (--medium) {
-      max-height: 50vh;
+      max-height: 60vh;
     }
   }
 }

deichman.no/components/ReservePublicationWidget/styles.css

@@ -32,7 +32,7 @@
     flex-grow: 0;
   }
 
-  .reserve-work-widget--availability {
+  .reserve-work-widget__availability {
     margin-top: var(--spacing-4);
   }