Merge pull request #616 from danskernesdigitalebibliotek/redesign-use…

…r-creation-form

User registration form v2

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/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/dropdown/Dropdown.tsx

@@ -16,6 +16,7 @@ export type DropdownElementProps = {
   arrowIcon: "triangles" | "chevron";
   classNames?: string;
   innerClassNames?: { select?: string; option?: string; arrowWrapper?: string };
+  footnote?: string;
 };
 
 const DropdownElement: React.FC<DropdownElementProps> = ({
@@ -25,6 +26,7 @@ const DropdownElement: React.FC<DropdownElementProps> = ({
   list,
   classNames,
   innerClassNames,
+  footnote,
 }) => {
   const Icon = () => {
     if (arrowIcon === "triangles") {
@@ -70,6 +72,7 @@ const DropdownElement: React.FC<DropdownElementProps> = ({
           <Icon />
         </div>
       </div>
+      {footnote && <div className="dropdown__footnote">{footnote}</div>}
     </>
   );
 };
@@ -82,6 +85,7 @@ export type DropdownProps = {
   classNames?: string;
   innerClassNames?: { select?: string; option?: string; arrowWrapper?: string };
   hideInputWrapper?: boolean;
+  footnote?: string;
 };
 
 export const Dropdown: React.FC<DropdownProps> = ({
@@ -92,6 +96,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   classNames,
   innerClassNames,
   hideInputWrapper = false,
+  footnote,
 }) => {
   if (hideInputWrapper) {
     return (
@@ -102,6 +107,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         list={list}
         classNames={classNames}
         innerClassNames={innerClassNames}
+        footnote={footnote}
       />
     );
   }
@@ -115,6 +121,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
         list={list}
         classNames={classNames}
         innerClassNames={innerClassNames}
+        footnote={footnote}
       />
     </div>
   );

src/stories/Library/dropdown/dropdown.scss

@@ -96,3 +96,8 @@ $_dropdown-icon-size: 50px;
 .dropdown__arrows--inline {
   height: 100%;
 }
+
+.dropdown__footnote {
+  @include typography($typo__small-caption);
+  margin: $s-sm 0 $s-3xl 0;
+}

src/stories/Library/patron-info/patron-info.scss

@@ -40,6 +40,7 @@
   display: flex;
   flex-direction: column;
   @include typography($typo__body-medium);
+  margin-bottom: $s-xl;
 
   label {
     @include typography($typo__body-medium);
@@ -76,6 +77,7 @@
   }
 
   input[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 }