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

…ma-16

Init release/brahma-16

base.scss

@@ -165,6 +165,7 @@
 @import "./src/stories/Blocks/registration-page/registration-page";
 @import "./src/stories/Blocks/registration-form-page/registration-form-page";
 @import "./src/stories/Blocks/form/form";
+@import "./src/stories/Blocks/create-patron/create-patron";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/create-patron/CreatePatron.stories.tsx

@@ -0,0 +1,28 @@
+import { ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import CreatePatron, { CreatePatronProps } from "./CreatePatron";
+
+export default {
+  title: "Blocks / Create Patron",
+  component: CreatePatron,
+  decorators: [withDesign],
+  argTypes: {
+    headline: {
+      name: "Title",
+      defaultValue: "Register as patron",
+      control: { type: "text" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=14631%3A36424&mode=design&t=kNDJGSba8OVIdnRx-1",
+    },
+  },
+};
+
+const Template: ComponentStory<typeof CreatePatron> = (
+  args: CreatePatronProps
+) => <CreatePatron {...args} />;
+
+export const Default = Template.bind({});

src/stories/Blocks/create-patron/CreatePatron.tsx

@@ -0,0 +1,58 @@
+import { Button } from "../../Library/Buttons/button/Button";
+import DoubleInputRow from "../../Library/Forms/input/DoubleInputRow";
+import { Dropdown } from "../../Library/dropdown/Dropdown";
+import { Links } from "../../Library/links/Links";
+
+export interface CreatePatronProps {
+  headline: string;
+}
+
+const CreatePatron: React.FC<CreatePatronProps> = ({ headline }) => {
+  return (
+    <div className="create-patron-page">
+      <h1 className="create-patron-page__title">{headline}</h1>
+      <form>
+        <section className="create-patron-page__row">
+          <DoubleInputRow leftLabel="Phone number*" rightLabel="Email*" />
+        </section>
+        <section className="create-patron-page__row">
+          <DoubleInputRow
+            leftLabel="New pin*"
+            rightLabel="Confirm new pin*"
+            descriptionLeft="Exactly 4 digits"
+            descriptionRight="Exactly 4 digits"
+            validationRight="Pin doesn't match"
+          />
+        </section>
+        <Dropdown
+          ariaLabel="Choose pickup branch"
+          arrowIcon="chevron"
+          list={[
+            { title: "Nothing selected" },
+            { title: "Option 1" },
+            { title: "Option 2" },
+          ]}
+          classNames="dropdown--grey-borders"
+          labelComponent={
+            <label className="text-body-medium-medium mb-8">
+              Choose pickup branch*
+            </label>
+          }
+          footnote="Choose preferred library for pickup of your future reservations."
+        />
+        <div className="create-patron-page__buttons">
+          <Button
+            buttonType="none"
+            label="Create profile"
+            size="small"
+            variant="filled"
+            classNames="mr-16"
+          />
+          <Links href="#" linkText="Cancel" classNames="mt-8" />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePatron;

src/stories/Blocks/create-patron/create-patron.scss

@@ -0,0 +1,29 @@
+.create-patron-page {
+  background: $color__global-primary;
+  padding: $s-2xl $s-sm $s-6xl $s-sm;
+
+  @include media-query__small {
+    margin: auto;
+    max-width: 550px;
+    padding: $s-5xl 0 $s-2xl 0;
+  }
+
+  &__title {
+    @include typography($typo__h1);
+    margin-bottom: $s-2xl;
+
+    @include media-query__small {
+      margin-bottom: $s-5xl;
+    }
+  }
+
+  &__row {
+    @include media-query__small {
+      margin-bottom: $s-3xl;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+  }
+}

src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss

@@ -4,7 +4,6 @@
   margin: 0 $s-lg $s-md $s-lg;
   padding-top: 30px;
   display: grid;
-  cursor: pointer;
 
   @include media-query__small {
     min-height: 184px;
@@ -13,10 +12,6 @@
     column-gap: $s-lg;
   }
 
-  &:hover {
-    filter: drop-shadow(0 $s-xs 20px rgba(72, 72, 72, 0.1));
-  }
-
   &__cover {
     display: none;
 

src/stories/Library/Forms/input/DoubleInputRow.tsx

@@ -0,0 +1,42 @@
+import Input from "./Input";
+
+export type DoubleInputRowProps = {
+  leftLabel: string;
+  rightLabel: string;
+  descriptionLeft?: string;
+  descriptionRight?: string;
+  validationLeft?: string;
+  validationRight?: string;
+};
+
+const DoubleInputRow: React.FC<DoubleInputRowProps> = ({
+  leftLabel,
+  rightLabel,
+  descriptionLeft,
+  descriptionRight,
+  validationLeft,
+  validationRight,
+}) => {
+  return (
+    <div className="dpl-input__flex">
+      <Input
+        id={leftLabel}
+        label={leftLabel}
+        description={descriptionLeft}
+        validation={validationLeft}
+        type="text"
+        classNames="dpl-input dpl-input--double mr-16"
+      />
+      <Input
+        id={rightLabel}
+        label={rightLabel}
+        description={descriptionRight}
+        validation={validationRight}
+        type="text"
+        classNames="dpl-input dpl-input--double"
+      />
+    </div>
+  );
+};
+
+export default DoubleInputRow;

src/stories/Library/Forms/input/Input.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Label from "../label/Label";
 
 export type InputProps = {
@@ -6,13 +7,18 @@ export type InputProps = {
   id: string;
   description?: string;
   validation?: string;
+  classNames?: string;
 };
 
 const Input = (props: InputProps) => {
-  const { label, type, id, description, validation } = props;
+  const { label, type, id, description, validation, classNames } = props;
   const invalid = validation ? "true" : "false";
   return (
-    <div className="dpl-input">
+    <div
+      className={clsx("dpl-input", classNames, [
+        { "dpl-input--invalid": !!validation },
+      ])}
+    >
       <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}

src/stories/Library/Forms/input/input.scss

@@ -1,6 +1,7 @@
 .dpl-input {
   display: flex;
   flex-direction: column;
+  @include typography($typo__body-medium);
 
   label {
     @include typography($typo__body-medium);
@@ -19,6 +20,30 @@
     }
   }
 
+  &__flex {
+    display: flex;
+    flex-direction: column;
+
+    @include media-query__small {
+      flex-direction: row;
+    }
+  }
+
+  &.dpl-input--invalid {
+    input {
+      background-color: $color__global-secondary;
+    }
+  }
+
+  &.dpl-input--double {
+    width: 100%;
+    margin-bottom: $s-xl;
+
+    @include media-query__small {
+      margin-bottom: 0px;
+    }
+  }
+
   &__description {
     color: $color__text-secondary-gray;
     @include typography($typo__body-small);
@@ -40,6 +65,7 @@
 
   /* Firefox */
   input[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 }

src/stories/Library/Lists/list-description/ListDescription.tsx

@@ -5,7 +5,7 @@ import { generateId } from "../../horizontal-term-line/HorizontalTermLine";
 export type ListData = {
   [k: string]: {
     value: string[];
-    type: "standard" | "link";
+    type: "standard" | "link" | "list";
     layout?: "default" | "column";
   };
 };
@@ -27,12 +27,27 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({
                 layout === "column" && "list-description__value--column"
               )}
             >
-              {value.map((val) => (
-                <Fragment key={val}>
-                  {type === "standard" && <span>{val}</span>}
-                  {type === "link" && <span className="link-tag">{val}</span>}
-                </Fragment>
-              ))}
+              {type === "standard" &&
+                value.map((val) => (
+                  <Fragment key={val}>
+                    <span>{val}</span>
+                  </Fragment>
+                ))}
+
+              {type === "link" &&
+                value.map((val) => (
+                  <Fragment key={val}>
+                    <span className="link-tag">{val}</span>
+                  </Fragment>
+                ))}
+
+              {type === "list" && (
+                <ul className="list-description__value--list">
+                  {value.map((val) => (
+                    <li key={val}>{val}</li>
+                  ))}
+                </ul>
+              )}
             </dd>
           </div>
         );

src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx

@@ -15,6 +15,20 @@ const fakeData: ListData = {
     type: "standard",
     layout: "column",
   },
+  Indhold: {
+    value: [
+      "Something to Do",
+      "Lie to Me",
+      "People Are People",
+      "It Doesn't Matter",
+      "Stories of Old",
+      "Somebody",
+      "Master and Servant",
+      "If You Want",
+      "Blasphemous Rumours",
+    ],
+    type: "list",
+  },
 };
 
 export default fakeData;

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

@@ -27,6 +27,11 @@ dl.list-description {
     flex-direction: column;
   }
 
+  .list-description__value--list {
+    list-style: initial;
+    padding-left: $s-md;
+  }
+
   .link-tag {
     @include typography($typo__small-caption);
 

src/stories/Library/disclosure/disclosure.scss

@@ -32,6 +32,10 @@
       padding-left: $s-xl;
     }
 
+    &::-webkit-details-marker {
+      display: none;
+    }
+
     &.disclosure__headline--no-padding {
       padding-left: $s-xl;
       @include media-query__small {