Merge pull request #573 from danskernesdigitalebibliotek/release/brah…

…ma-13

Merge release/brahma-13 into develop

base.scss

@@ -148,6 +148,7 @@
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
 @import "./src/stories/Blocks/event-page/event-page";
+@import "./src/stories/Blocks/fee-list/fee-list-page-skeleton.scss";
 @import "./src/stories/Blocks/content-list-page/content-list-page";
 @import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 @import "./src/stories/Blocks/loan-page/loan-page-skeleton";

src/stories/Blocks/fee-list/FeeListHeader.tsx

@@ -0,0 +1,7 @@
+const FeeListHeader = () => (
+  <h1 data-cy="fee-list-headline" className="text-header-h1 my-32">
+    Gebyrer &amp; erstatninger
+  </h1>
+);
+
+export default FeeListHeader;

src/stories/Blocks/fee-list/FeeListItemSkeleton.tsx

@@ -0,0 +1,34 @@
+const FeeListItemSkeleton = () => {
+  return (
+    <button
+      type="button"
+      className="list-reservation my-32"
+      aria-label="Fee card"
+    >
+      <div className="list-reservation__material">
+        <div>
+          <div className="ssc-square cover--size-small" />
+        </div>
+        <div className="list-reservation__information">
+          <div className="ssc-head-line w-30 mb-24" />
+          <div className="ssc-head-line w-100 mb-4" />
+          <div className="ssc-line w-70 mb-4" />
+          <div className="ssc-line w-60 mb-4" />
+        </div>
+      </div>
+      <div className="list-reservation__status">
+        <div>
+          <div className="list-reservation__deadline">
+            <div className="ssc-head-line w-30" />
+            <div className="ssc-line w-80 mb-4" />
+          </div>
+        </div>
+        <div className="list-reservation__fee flex justify-end">
+          <div className="ssc-head-line w-30" />
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default FeeListItemSkeleton;

src/stories/Blocks/fee-list/FeeListPage.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import FeeListPage from "./FeeListPage";
+
+export default {
+  title: "Blocks / Fee List",
+  component: FeeListPage,
+} as ComponentMeta<typeof FeeListPage>;
+
+const Template: ComponentStory<typeof FeeListPage> = (args) => {
+  return <FeeListPage {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  skeletonVersion: true,
+};

src/stories/Blocks/fee-list/FeeListPage.tsx

@@ -0,0 +1,20 @@
+import FeeListHeader from "./FeeListHeader";
+import PaymentInformation from "./PaymentInformation";
+import FeeList from "./FeeList";
+import FeeListSkeleton from "./FeeListSkeleton";
+
+export interface FeeListPageProps {
+  skeletonVersion?: boolean;
+}
+
+const FeeListPage: React.FC<FeeListPageProps> = ({ skeletonVersion }) => {
+  return (
+    <div className="fee-list-page" data-cy="fee-list-page">
+      <FeeListHeader />
+      <PaymentInformation />
+      {skeletonVersion ? <FeeListSkeleton /> : <FeeList />}
+    </div>
+  );
+};
+
+export default FeeListPage;

src/stories/Blocks/fee-list/FeeListSkeleton.tsx

@@ -0,0 +1,18 @@
+import FeeListItemSkeleton from "./FeeListItemSkeleton";
+
+const FeeListSkeleton: React.FC = () => {
+  return (
+    <section className="ssc fee-list">
+      <h2 className="dpl-list-buttons__header" aria-label="Fee payment info">
+        <div className="ssc-head-line w-20 mt-10" />
+      </h2>
+      <FeeListItemSkeleton />
+      <FeeListItemSkeleton />
+      <div className="ssc-head-line w-20 mt-48" />
+      <FeeListItemSkeleton />
+      <FeeListItemSkeleton />
+    </section>
+  );
+};
+
+export default FeeListSkeleton;

src/stories/Blocks/fee-list/PaymentInformation.tsx

@@ -0,0 +1,36 @@
+const PaymentInformation = () => (
+  <div>
+    <div data-cy="fee-list-body">
+      <div className="fee-list-body__text">
+        Overdue fees and replacement costs that were created before 27/10/2020
+        can still be paid on this page.
+      </div>
+      <div className="fee-list-body__payment-info-link">
+        <a
+          href="https://unsplash.com/photos/NEJcmvLFcws"
+          rel="noreferrer"
+          className="link-tag"
+        >
+          See our fees and replacement costs
+        </a>
+      </div>
+    </div>
+    <div className="fee-list-body__payment-button">
+      <a
+        data-cy="fee-payment-button"
+        href="https://google.com/"
+        rel="noreferrer"
+        className="btn-primary btn-outline btn-small arrow__hover--right-small hide-linkstyle"
+      >
+        Go to payment page
+        <img
+          className="btn-icon"
+          src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 2.25C20.9182 2.25 21.6712 2.95711 21.7442 3.85647L21.75 4V20C21.75 20.9182 21.0429 21.6712 20.1435 21.7442L20 21.75H9C8.08183 21.75 7.32881 21.0429 7.2558 20.1435L7.25 20V16C7.25 15.5858 7.58579 15.25 8 15.25C8.3797 15.25 8.69349 15.5322 8.74315 15.8982L8.75 16V20C8.75 20.1183 8.83223 20.2175 8.94268 20.2434L9 20.25H20C20.1183 20.25 20.2175 20.1678 20.2434 20.0573L20.25 20V4C20.25 3.88165 20.1678 3.78251 20.0573 3.7566L20 3.75H9C8.88165 3.75 8.78251 3.83223 8.7566 3.94268L8.75 4V8C8.75 8.41421 8.41421 8.75 8 8.75C7.6203 8.75 7.30651 8.46785 7.25685 8.10177L7.25 8V4C7.25 3.08183 7.95711 2.32881 8.85647 2.2558L9 2.25H20ZM13.4535 8.57412L13.5303 8.64124L16.3588 11.4697C16.6272 11.7382 16.6496 12.1596 16.4259 12.4535L16.3588 12.5303L13.5303 15.3588C13.2374 15.6517 12.7626 15.6517 12.4697 15.3588C12.2012 15.0903 12.1788 14.6689 12.4025 14.3749L12.4697 14.2981L14.017 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.6203 2.53215 11.3065 2.89823 11.2568L3 11.25H14.017L12.4697 9.7019C12.2012 9.43342 12.1788 9.01202 12.4025 8.71805L12.4697 8.64124C12.7382 8.37276 13.1596 8.35038 13.4535 8.57412Z' fill='black'/%3e %3c/svg%3e"
+          alt=""
+        />
+      </a>
+    </div>
+  </div>
+);
+
+export default PaymentInformation;

src/stories/Blocks/fee-list/fee-list-page-skeleton.scss

@@ -0,0 +1,21 @@
+// Since we are using the Skeleton Screen Css classes connected to the existing styling
+// we deliberately not follow the BEM naming convention here.
+.fee-list-page {
+  .ssc-square {
+    &.cover--size-small {
+      height: 104px;
+      width: 70px;
+
+      @include media-query__small {
+        height: 137px;
+        width: 95px;
+      }
+    }
+  }
+
+  .list-reservation__deadline {
+    .ssc-head-line {
+      min-width: 100px;
+    }
+  }
+}

src/stories/Library/Modals/modal-loan/modal-loan.scss

@@ -2,6 +2,22 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+
+  &__title {
+    padding-right: $s-xl;
+  }
+
+  @include media-query__small {
+    &__title {
+      padding-right: $s-4xl;
+    }
+  }
+
+  @include media-query__medium {
+    &__title {
+      padding-right: initial;
+    }
+  }
 }
 
 .modal-loan__container {

src/stories/Library/Modals/modal.scss

@@ -85,7 +85,7 @@
   &.modal-btn-close--offset {
     @include media-query__small {
       top: $s-5xl;
-      right: $s-5xl;
+      right: calc($s-5xl + 17px);
     }
   }
 

src/stories/Library/date-calendar/date-calendar.scss

@@ -82,6 +82,8 @@ $selected-date-background: rgb(0, 105, 255);
     }
   }
   & .flatpickr-days {
+    user-select: none;
+
     & .flatpickr-day {
       display: flex;
       align-items: center;