Merge branch 'develop' into feature/menu-width-anonymous

Author: Sine Jespersen

src/stories/Blocks/header/header.scss

@@ -192,6 +192,9 @@
 .header__button {
   height: 56px;
   width: 56px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   @include breakpoint-s {
     height: 70px;

src/stories/Blocks/status-userprofile/status-userprofile.scss

@@ -14,6 +14,5 @@
     flex-basis: 50%;
     display: flex;
     flex-direction: column;
-    row-gap: 16px;
   }
 }

src/stories/Blocks/status-userprofile/statusUserprofile.tsx

@@ -35,7 +35,10 @@ export const StatusUserprofile = (props: StatusUserprofileProps) => {
             </div>
           ))
         ) : (
-          <ListEmpty text="Du har i øjeblikket 0 fysiske lån" />
+          <ListEmpty
+            className="mt-16"
+            text="Du har i øjeblikket 0 fysiske lån"
+          />
         )}
       </div>
       <div className="status-userprofile__column">
@@ -57,7 +60,10 @@ export const StatusUserprofile = (props: StatusUserprofileProps) => {
             </div>
           ))
         ) : (
-          <ListEmpty text="Du har i øjebilkket 0 reserveringer" />
+          <ListEmpty
+            className="mt-16"
+            text="Du har i øjebilkket 0 reserveringer"
+          />
         )}
       </div>
     </div>

src/stories/Library/Lists/list-empty/ListEmpty.tsx

@@ -3,11 +3,12 @@ import { Links, LinksProps } from "../../links/Links";
 interface ListEmptyProps {
   text: string;
   links?: LinksProps[];
+  className: string;
 }
 
-const ListEmpty = ({ text, links }: ListEmptyProps) => {
+const ListEmpty = ({ text, links, className }: ListEmptyProps) => {
   return (
-    <div className="dpl-list-empty">
+    <div className={`dpl-list-empty ${className}`}>
       {text}
       {links && (
         <div className="dpl-list-empty__links">

src/stories/Library/Lists/list-materials/ListMaterials.tsx

@@ -42,7 +42,7 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
             <div className="list-materials__content-status">
               <StatusLabel {...statusMaterialType} />
             </div>
-            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="list-materials__content__header mt-8">{title}</p>
             <p className="text-small-caption">
               {author} ({year})
             </p>
@@ -87,7 +87,7 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
             <div className="list-materials__content-status">
               <div className="status-label status-label--outline">Bog</div>
             </div>
-            <p className="text-header-h5 mt-8">{title}</p>
+            <p className="list-materials__content__header mt-8">{title}</p>
             <p className="text-small-caption">
               {author} ({year})
             </p>

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

@@ -26,6 +26,11 @@
   flex: 1;
 }
 
+.list-materials__content__header {
+  @extend %ellipsis-two-lines;
+  @extend %text-header-h5;
+}
+
 .list-materials--disabled {
   .checkbox {
     .checkbox__icon {

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

@@ -23,8 +23,9 @@ export const Item1 = Template.bind({});
 Item1.args = {
   cover: {
     type: "bog",
-    title: "Mennesket i naturen",
-    description: "Af Anton M. Berg (2020)",
+    title:
+      "Den utrolige historie om den kæmpestore pære (eller beretningen om, hvordan Jeronimus Bjergstrøm Severin Olsen blev genindsat i sit retmæssige embede som Solbys borgmester til glæde for alle byens indbyggere på nær én)",
+    description: "Af Jakob Martin Strid ",
     image: "images/book_cover_5.jpg",
     url: "",
     noteLabel: "Du pålægges et gebyr, når materialet afleveres",

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

@@ -44,7 +44,9 @@ export const ListReservationsAndLoans = (
             </div>
             <div className="list-reservation__about">
               <button className="list-reservation__header">
-                {cover.title}
+                <span className="list-reservation__header__text">
+                  {cover.title}
+                </span>
               </button>
               <p className="text-small-caption color-secondary-gray">
                 {cover.description}

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

@@ -118,6 +118,10 @@ $list-reservation-space-desktop: 24px;
   }
 }
 
+.list-reservation__header__text {
+  @extend %ellipsis-two-lines;
+}
+
 .list-reservation__status {
   height: 100%;
   display: grid;

src/stories/Library/Modals/modal-loan/ModalLoan.tsx

@@ -19,8 +19,9 @@ const listExpired: LoanMaterials = [
     list: [
       {
         year: "2001",
-        title: "Audrey Hepburn",
-        author: "Af Isabel Sánchez Vegara, Amaia Arrazola",
+        title:
+          "Den utrolige historie om den kæmpestore pære (eller beretningen om, hvordan Jeronimus Bjergstrøm Severin Olsen blev genindsat i sit retmæssige embede som Solbys borgmester til glæde for alle byens indbyggere på nær én)",
+        author: "Af Jakob Martin Strid",
         statusMessage: "The item cannot be renewed further",
         isChecked: true,
         disabled: true,