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

…ma-14

Merge Release/brahma 14

base.scss

@@ -153,11 +153,12 @@
 @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/fee-list/fee-list-page-skeleton";
 @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";
 @import "./src/stories/Blocks/registration-page/registration-page";
+@import "./src/stories/Blocks/webform/webform";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/advanced-search/advanced-search.scss

@@ -19,6 +19,7 @@
 
   &__clauses {
     @include typography($typo__button);
+    color: $color__global-grey;
     display: flex;
     flex-direction: row;
     align-items: center;

src/stories/Blocks/favorites-list/FavoritesList.stories.tsx

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

src/stories/Blocks/favorites-list/FavoritesList.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { CardListItem } from "../../Library/card-list-item/CardListItem";
+import { CardListItemSkeleton } from "../../Library/card-list-item/CardListItemSkeleton";
+import ResultPager from "../../Library/card-list-page/ResultPager";
+import data from "../../Library/card-list-page/SearchResultPageData";
+
+export interface FavouritesListProps {
+  skeletonVersion?: boolean;
+  materialsCount: number;
+}
+
+const FavouritesList: React.FC<FavouritesListProps> = ({
+  skeletonVersion = false,
+  materialsCount,
+}) => {
+  const pageTitle = (
+    <h1 className="text-header-h2 mb-16 search-result-title">Favourites</h1>
+  );
+
+  const materialsCountLine = materialsCount > 0 && (
+    <p className="text-small-caption my-32">{materialsCount} materials</p>
+  );
+
+  const SkeletonList = () => (
+    <ul className="card-list-page__list my-32">
+      {[...Array(5)].slice(0, materialsCount).map(() => (
+        <li>
+          <CardListItemSkeleton />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const FavouritesListContent = () => (
+    <ul className="card-list-page__list my-32">
+      {data.searchResult.slice(0, materialsCount).map((item, i) => (
+        <li>
+          <CardListItem {...item} heartFill tintIndex={i} />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const EmptyList = () => (
+    <div className="dpl-list-empty mt-24">Your favorites list is empty</div>
+  );
+
+  let content;
+  if (skeletonVersion) {
+    content = <SkeletonList />;
+  } else if (materialsCount > 0) {
+    content = <FavouritesListContent />;
+  } else {
+    content = <EmptyList />;
+  }
+
+  return (
+    <div className="card-list-page">
+      {pageTitle}
+      {materialsCountLine}
+      {content}
+      {!skeletonVersion && (
+        <ResultPager
+          currentResults={materialsCount}
+          totalResults={materialsCount}
+          classNames="result-pager--margin-bottom"
+        />
+      )}
+    </div>
+  );
+};
+
+export default FavouritesList;

src/stories/Blocks/patron-page/ContactInfoSection.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Input from "../../Library/Forms/input/Input";
+import { Checkbox } from "../../Library/Forms/checkbox/Checkbox";
+
+const ContactInfoSection: React.FC = () => {
+  return (
+    <section data-cy="patron-page-contact-info">
+      <h2 className="text-header-h4 mt-64 mb-16">Contact information</h2>
+      <p className="text-body-small-regular mb-32">
+        Patron contact info body text
+      </p>
+      <Input label="Phone number" type="text" id="phone" description="" />
+      <Checkbox
+        label="Receive text messages about your loans, reservations, and so forth"
+        isChecked={false}
+        hiddenLabel={false}
+        classNames="checkbox mt-8 mb-16"
+      />
+      <Input label="E-mail" type="text" id="email" description="" />
+      <Checkbox
+        label="Receive emails about your loans, reservations, and so forth"
+        isChecked={false}
+        hiddenLabel={false}
+        classNames="checkbox mt-8 mb-16"
+      />
+    </section>
+  );
+};
+
+export default ContactInfoSection;

src/stories/Blocks/patron-page/PatronPage.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import PatronPage from "./PatronPage";
+
+export default {
+  title: "Blocks / Patron Page",
+  component: PatronPage,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?type=design&node-id=1239-66174&mode=design",
+    },
+    layout: "fullscreen",
+  },
+  argTypes: {
+    skeletonVersion: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+} as ComponentMeta<typeof PatronPage>;
+
+const Template: ComponentStory<typeof PatronPage> = (args) => {
+  return <PatronPage {...args} />;
+};
+
+export const Default = Template.bind({});
+
+export const SkeletonVersion = Template.bind({});
+SkeletonVersion.args = {
+  skeletonVersion: true,
+};

src/stories/Blocks/patron-page/PatronPage.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import PatronInfo from "../../Library/patron-info/PatronInfo";
+import Input from "../../Library/Forms/input/Input";
+import { StatusLoans } from "../status-loans/statusLoans";
+import { Dropdown } from "../../Library/dropdown/Dropdown";
+import { Links } from "../../Library/links/Links";
+import PatronPageSkeleton from "./PatronPageSkeleton";
+import ContactInfoSection from "./ContactInfoSection";
+
+export interface PatronPageProps {
+  skeletonVersion?: boolean;
+}
+
+const PatronPage: React.FC<PatronPageProps> = ({ skeletonVersion = false }) => {
+  if (skeletonVersion) return <PatronPageSkeleton />;
+
+  const statusBarsData = [
+    {
+      title: "Loans per month",
+      statusBars: [
+        { amount: 1, fullAmount: 4, title: "Ebooks", outOf: "out of" },
+        { amount: 2, fullAmount: 10, title: "Audiobooks", outOf: "out of" },
+      ],
+    },
+  ];
+
+  const branches = [
+    {
+      title: "Copenhagen",
+    },
+    {
+      title: "New York",
+    },
+    {
+      title: "The Moon",
+    },
+  ];
+
+  return (
+    <form className="dpl-patron-page">
+      <h1 className="text-header-h1 my-32">Patron profile page</h1>
+      <h2 className="text-header-h4 mt-32 mb-16">Basic details</h2>
+
+      {/* Patron info section */}
+      <PatronInfo
+        name="Professor Utonium"
+        nameLabel="Name"
+        address="The Utonium Residence, 107 Pokey Oaks South, Townsville, USA"
+        addressLabel="Address"
+      />
+
+      <div className="patron-page-info">
+        <ContactInfoSection />
+
+        {/* Digital loans section */}
+        <section className="dpl-status-loans">
+          <StatusLoans
+            statusBarsData={statusBarsData}
+            title="Digital loans (eReolen)"
+            link={{
+              link: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66855",
+              text: "Click here, to see titles always eligible to be loaned",
+            }}
+            bread="There is a number of materials without limitation to amounts of loans per month."
+            reservationsText="You can reserve 4 ebooks and 10 audiobooks"
+          />
+        </section>
+
+        {/* Pickup branch section */}
+        <section>
+          <h2 className="text-header-h4 mt-64 mb-16">Reservations</h2>
+          <p className="text-body-small-regular mb-8">
+            Change pickup body text
+          </p>
+          <label
+            htmlFor="branches-dropdown"
+            className="text-body-medium-medium mt-32 mb-8"
+          >
+            Choose pickup branch
+          </label>
+          <Dropdown
+            list={branches}
+            ariaLabel="branches"
+            arrowIcon="chevron"
+            classNames="dropdown__desktop"
+          />
+        </section>
+
+        {/* Pin code section */}
+        <section>
+          <h2 className="text-header-h4 mt-64 mb-16">Pincode</h2>
+          <p className="text-body-small-regular mb-8">
+            Change current pin by entering a new pin and saving
+          </p>
+          <div className="dpl-pincode-container">
+            <div className="patron__input patron__input--desktop">
+              <Input
+                label="New pin"
+                type="password"
+                id="pincode-input"
+                description=""
+              />
+            </div>
+            <div className="patron__input patron__input--desktop">
+              <Input
+                label="Confirm new pin"
+                type="password"
+                id="pincode-input-2"
+                description=""
+              />
+            </div>
+          </div>
+        </section>
+
+        <button
+          className="mt-48 btn-primary btn-filled btn-small"
+          type="submit"
+        >
+          Save
+        </button>
+
+        {/* Delete profile link */}
+        <div className="text-body-small-regular mt-32">
+          Do you wish to delete your library profile?{" "}
+          <Links
+            href="https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66855"
+            linkText="Delete your profile"
+            classNames="link-tag"
+          />
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default PatronPage;

src/stories/Blocks/patron-page/PatronPageSkeleton.tsx

@@ -0,0 +1,15 @@
+import PatronInfoSkeleton from "../../Library/patron-info/PatronInfoSkeleton";
+import ContactInfoSection from "./ContactInfoSection";
+
+const PatronPageSkeleton: React.FC = () => {
+  return (
+    <form className="dpl-patron-page">
+      <h1 className="text-header-h1 my-32">Patron profile page</h1>
+      <h2 className="text-header-h4 mt-32 mb-16">Basic details</h2>
+      <PatronInfoSkeleton />
+      <ContactInfoSection />
+    </form>
+  );
+};
+
+export default PatronPageSkeleton;

src/stories/Blocks/status-loans/statusLoans.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { StatusLoans as StatusLoansComp } from "./statusLoans";
 
 export default {
-  title: "Blocks / Userprofile / Status loans",
+  title: "Blocks / User Profile / Status loans",
   component: StatusLoansComp,
   parameters: {
     design: {
@@ -29,6 +29,9 @@ export default {
       defaultValue:
         "På mange digitale materialer, er der er begrænsning på, hvor mange du kan låne pr. måned. Der findes dog en række materialer uden begrænsning.",
     },
+    reservationsText: {
+      defaultValue: "You can reserve 3 ebooks and 3 audiobooks",
+    },
     link: {
       defaultValue: {
         text: "Se titler du altid kan låne",

src/stories/Blocks/status-loans/statusLoans.tsx

@@ -18,25 +18,35 @@ export type StatusLoansProps = {
   title: string;
   link: LinkProps;
   bread: string;
+  reservationsText: string;
 };
 
 export const StatusLoans = (props: StatusLoansProps) => {
-  const { statusBarsData, title: statusBarsTitle, link, bread } = props;
+  const {
+    statusBarsData,
+    title: statusBarsTitle,
+    link,
+    bread,
+    reservationsText,
+  } = props;
   const { link: url, text: linkText } = link;
 
   return (
     <>
-      <h1 className="text-header-h1 m-8">{statusBarsTitle}</h1>
-      <div className="m-8 text-body-small-regular">
+      <h2 className="text-header-h4 mt-64 mb-16">{statusBarsTitle}</h2>
+      <div className="text-body-small-regular mb-8">
         {`${bread} `}
         <a href={url} className="text-links">
           {linkText}
         </a>
       </div>
-      <div className="dpl-status-loans">
+      <div className="text-body-small-regular mt-8 mb-8">
+        {reservationsText}
+      </div>
+      <div className="dpl-status mt-32">
         {statusBarsData.map(({ statusBars, title }) => (
-          <div className="dpl-status-loans__container m-8">
-            <h2 className="text-header-h2">{title}</h2>
+          <div className="dpl-status-loans__container">
+            <h3 className="text-small-caption">{title}</h3>
             {statusBars.map(
               ({ title: statusBarTitle, amount, fullAmount, outOf }) => (
                 <ProgressBar