Merge pull request #458 from danskernesdigitalebibliotek/reservation-…

…page-stories-and-skeleton

Reservation page stories and skeleton

base.scss

@@ -22,8 +22,8 @@
 @import "./src/stories/Library/Forms/checkbox/checkbox";
 @import "./src/stories/Library/cover/cover";
 @import "./src/stories/Library/Forms/input/input";
-@import "./src/stories/Library/Forms/date-picker/date-picker.scss";
-@import "./src/stories/Library/date-calendar/date-calendar.scss";
+@import "./src/stories/Library/Forms/date-picker/date-picker";
+@import "./src/stories/Library/date-calendar/date-calendar";
 @import "./src/stories/Library/list-buttons/list-buttons";
 @import "./src/stories/Library/progress-bar/progress-bar";
 @import "./src/stories/Library/missing-story/missing-story";
@@ -128,6 +128,7 @@
 @import "./src/stories/Blocks/article/article";
 @import "./src/stories/Blocks/event-page/event-page";
 @import "./src/stories/Blocks/event-list-page/event-list-page";
+@import "./src/stories/Blocks/reservation-page/reservation-page-skeleton";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/reservation-page/ReservationListEmptyState.tsx

@@ -0,0 +1,13 @@
+export interface ReservationListEmptyStateProps {
+  text: string;
+  classsNames?: string;
+}
+
+const ReservationListEmptyState: React.FC<ReservationListEmptyStateProps> = ({
+  text,
+  classsNames,
+}) => {
+  return <div className={`dpl-list-empty mt-24 ${classsNames}`}>{text}</div>;
+};
+
+export default ReservationListEmptyState;

src/stories/Blocks/reservation-page/ReservationListItem.tsx

@@ -0,0 +1,82 @@
+import { Counter } from "../../Library/counter/Counter";
+import { ReactComponent as ArrowSmallRight } from "../../Library/Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg";
+
+export interface ReservationListItemProps {
+  amount: number;
+}
+
+const ReservationListItem: React.FC<ReservationListItemProps> = ({
+  amount,
+}) => {
+  const listItems = Array(amount).fill(0);
+  return (
+    <>
+      {listItems.map(() => (
+        <div className="list-reservation my-32 cursor-pointer arrow__hover--right-small">
+          <div className="list-reservation__material">
+            <div>
+              <div className="cover cover--size-small cover--aspect-small bg-identity-tint-120" />
+            </div>
+            <div className="list-reservation__information">
+              <div>
+                <div className="status-label status-label--outline">bog</div>
+              </div>
+              <div className="list-reservation__about">
+                <button
+                  type="button"
+                  className="list-reservation__header color-secondary-gray"
+                >
+                  <span
+                    id="48991963-title"
+                    className="list-reservation__header__text"
+                  >
+                    Operation Spøgelse
+                  </span>
+                </button>
+                <p
+                  data-cy="reservation-about-author"
+                  className="text-small-caption color-secondary-gray"
+                >
+                  Jørn Lier Horst (2020)
+                </p>
+                <p
+                  data-cy="reservation-about-series"
+                  className="text-small-caption color-secondary-gray"
+                >
+                  Detektivbureau Nr. 2
+                </p>
+              </div>
+              <div />
+            </div>
+          </div>
+          <div className="list-reservation__status">
+            <div className="list-reservation__counter color-secondary-gray">
+              <Counter
+                isReady
+                label="Ready"
+                percentage={100}
+                status="info"
+                value={20}
+              />
+            </div>
+            <div>
+              <div className="list-reservation__deadline">
+                <div
+                  data-cy="info-label"
+                  className="status-label status-label--info"
+                >
+                  Pick up before 02-02-2024
+                </div>
+                <p className="text-small-caption">Hovedbiblioteket</p>
+                <p className="text-small-caption">Reserveringshylde 74</p>
+              </div>
+            </div>
+            <ArrowSmallRight />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default ReservationListItem;

src/stories/Blocks/reservation-page/ReservationListItemSkeleton.tsx

@@ -0,0 +1,29 @@
+const ReservationListItemSkeleton = () => {
+  return (
+    <div className="list-reservation my-32">
+      <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 className="list-reservation__counter">
+          <div className="ssc-circle w-100" />
+        </div>
+        <div className="list-reservation__deadline">
+          <div className="ssc-head-line w-30 mb-4" />
+          <div className="ssc-line w-20 mb-4" />
+          <div className="ssc-line w-20 mb-4" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReservationListItemSkeleton;

src/stories/Blocks/reservation-page/ReservationPage.stories.tsx

@@ -0,0 +1,66 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import ReservationPage, { ReservationPageProps } from "./ReservationPage";
+
+export default {
+  title: "Blocks / Reservation / Reservation Page",
+  component: ReservationPage,
+  decorators: [withDesign],
+  argTypes: {
+    headline: {
+      name: "Headline",
+      defaultValue: "Your reservations",
+      control: { type: "text" },
+    },
+    readyForPickup: {
+      name: "Ready for pickup amount",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    physicalReservations: {
+      name: "Physical reservations amount",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    digitalReservations: {
+      name: "Digital reservations amount",
+      defaultValue: 2,
+      control: { type: "number" },
+    },
+    skeletonVersion: {
+      name: "Is skeleton version?",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=8513%3A85811&mode=design&t=nde0qiy8WvxnX8im-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof ReservationPage> = (
+  args: ReservationPageProps
+) => <ReservationPage {...args} />;
+
+export const Default = Template.bind({});
+export const NoReadyForPickup = Template.bind({});
+NoReadyForPickup.args = {
+  readyForPickup: 0,
+};
+export const NoPhysicalReservations = Template.bind({});
+NoPhysicalReservations.args = {
+  physicalReservations: 0,
+};
+export const NoReservationsAtAll = Template.bind({});
+NoReservationsAtAll.args = {
+  readyForPickup: 0,
+  physicalReservations: 0,
+  digitalReservations: 0,
+};
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  skeletonVersion: true,
+};

src/stories/Blocks/reservation-page/ReservationPage.tsx

@@ -0,0 +1,136 @@
+import ResultPager from "../../Library/card-list-page/ResultPager";
+import { PauseReservation } from "../../Library/pause-reservation/PauseReservation";
+import ReservationListEmptyState from "./ReservationListEmptyState";
+import ReservationListItem from "./ReservationListItem";
+import ReservationPageSkeleton from "./ReservationPageSkeleton";
+
+export interface ReservationPageProps {
+  headline: string;
+  readyForPickup: number;
+  physicalReservations: number;
+  digitalReservations: number;
+  skeletonVersion?: boolean;
+}
+
+const ReservationPage: React.FC<ReservationPageProps> = ({
+  headline,
+  readyForPickup,
+  physicalReservations,
+  digitalReservations,
+  skeletonVersion,
+}) => {
+  if (skeletonVersion) {
+    return <ReservationPageSkeleton />;
+  }
+
+  if (!readyForPickup && !physicalReservations && !digitalReservations) {
+    return (
+      <div className="reservation-list-page">
+        <h1 className="text-header-h1 m-32">{headline}</h1>
+        <ReservationListEmptyState
+          text="At the moment you have 0 reservations"
+          classsNames="mt-64"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="reservation-list-page">
+      <h1 className="text-header-h1 m-32">{headline}</h1>
+      <PauseReservation
+        isPausedtext="Reservations are paused"
+        pauseText="Pause your reservations"
+        classNames="m-32"
+      />
+
+      <div>
+        <div className="dpl-list-buttons m-32">
+          <h2
+            data-cy="reservation-list-header"
+            className="dpl-list-buttons__header"
+          >
+            Ready for pickup
+            <div className="dpl-list-buttons__power">{readyForPickup}</div>
+          </h2>
+        </div>
+        {!!readyForPickup && (
+          <div>
+            <ul className="list-reservation-container">
+              <li>
+                <ReservationListItem amount={readyForPickup} />
+              </li>
+            </ul>
+            <ResultPager
+              currentResults={readyForPickup}
+              totalResults={readyForPickup}
+            />
+          </div>
+        )}
+        {!readyForPickup && (
+          <ReservationListEmptyState text="At the moment you have 0 reservations ready for pickup" />
+        )}
+      </div>
+
+      <div>
+        <div className="dpl-list-buttons m-32">
+          <h2
+            data-cy="reservation-list-header"
+            className="dpl-list-buttons__header"
+          >
+            Physical reservations
+            <div className="dpl-list-buttons__power">
+              {physicalReservations}
+            </div>
+          </h2>
+        </div>
+        {!!physicalReservations && (
+          <div>
+            <ul className="list-reservation-container">
+              <li>
+                <ReservationListItem amount={physicalReservations} />
+              </li>
+            </ul>
+            <ResultPager
+              currentResults={physicalReservations}
+              totalResults={physicalReservations}
+            />
+          </div>
+        )}
+        {!physicalReservations && (
+          <ReservationListEmptyState text="At the moment you have 0 physical reservations" />
+        )}
+      </div>
+
+      <div>
+        <div className="dpl-list-buttons m-32">
+          <h2
+            data-cy="reservation-list-header"
+            className="dpl-list-buttons__header"
+          >
+            Digital reservations
+            <div className="dpl-list-buttons__power">{digitalReservations}</div>
+          </h2>
+        </div>
+        {!!digitalReservations && (
+          <div>
+            <ul className="list-reservation-container">
+              <li>
+                <ReservationListItem amount={digitalReservations} />
+              </li>
+            </ul>
+            <ResultPager
+              currentResults={digitalReservations}
+              totalResults={digitalReservations + 1}
+            />
+          </div>
+        )}
+        {!digitalReservations && (
+          <ReservationListEmptyState text="At the moment you have 0 digital reservations" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReservationPage;

src/stories/Blocks/reservation-page/ReservationPageSkeleton.tsx

@@ -0,0 +1,21 @@
+import ReservationListItemSkeleton from "./ReservationListItemSkeleton";
+
+const ReservationPageSkeleton: React.FC = () => {
+  return (
+    <section className="reservation-list-page ssc">
+      <div className="ssc-head-line w-60 mx-32 my-48" />
+      <div className="ssc-square w-90 ml-32 my-32" />
+      <div className="ssc-head-line w-10 mx-32 mt-48" />
+      <ReservationListItemSkeleton />
+      <ReservationListItemSkeleton />
+      <div className="ssc-head-line w-10 mx-32 mt-80" />
+      <ReservationListItemSkeleton />
+      <ReservationListItemSkeleton />
+      <div className="ssc-head-line w-10 mx-32 mt-80" />
+      <ReservationListItemSkeleton />
+      <ReservationListItemSkeleton />
+    </section>
+  );
+};
+
+export default ReservationPageSkeleton;

src/stories/Blocks/reservation-page/reservation-page-skeleton.scss

@@ -0,0 +1,23 @@
+// Since we are using the Skeleton Screen Css classes connected to the existing styling
+// we deliberately not follow the BEM naming convention here.
+.reservation-list-page.ssc {
+  .ssc-square {
+    height: 72px;
+
+    &.cover--size-small {
+      height: 137px;
+      width: 95px;
+    }
+  }
+  .ssc-circle {
+    height: 90px;
+  }
+
+  & .list-reservation__information {
+    min-width: 200px;
+
+    @include media-query__x-small("max-width") {
+      min-width: 100px;
+    }
+  }
+}