Move general form elemnts out in their own scopes

and use the design system components instead of replicating the html in
the webforms story

base.scss

@@ -23,6 +23,7 @@
 @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/textarea/textarea";
 @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";

src/stories/Blocks/webform/Webform.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { Dropdown } from "../../Library/dropdown/Dropdown";
 import { Button } from "../../Library/Buttons/button/Button";
+import Textarea from "../../Library/Forms/textarea/Textarea";
+import Input from "../../Library/Forms/input/Input";
+import Label from "../../Library/Forms/label/Label";
+import { Links } from "../../Library/links/Links";
 
 export interface WebformProps {
   title: string;
@@ -22,68 +26,24 @@ const Webform: React.FC<WebformProps> = ({
       <section className="paragraph">
         <div className="paragraphs__item paragraphs__item--webform webform__form">
           <form className="webform-submission-form">
-            <div className="dpl-input">
-              <label htmlFor="edit-name" className="input-label">
-                Your name
-              </label>
-              <input
-                type="text"
-                id="edit-name"
-                className="form-text required"
-              />
-            </div>
-            <div className="dpl-input">
-              <label htmlFor="edit-email" className="input-label">
-                Your email
-              </label>
-              <input
-                type="text"
-                id="edit-email"
-                className="form-email required"
-              />
-            </div>
-            <div className="dpl-input">
-              <label htmlFor="edit-category" className="input-label">
-                Category
-              </label>
-              <Dropdown
-                ariaLabel="select category"
-                arrowIcon="chevron"
-                innerClassNames={{
-                  select: "dropdown__select--grey",
-                  arrowWrapper: "dropdown__arrows--grey",
-                }}
-                list={[
-                  { title: "Option 1" },
-                  { title: "Option 2" },
-                  { title: "Option 3" },
-                ]}
-              />
-            </div>
-            <div className="dpl-input">
-              <label htmlFor="edit-subject" className="input-label">
-                Subject
-              </label>
-              <input
-                type="text"
-                id="edit-subject"
-                className="form-text required"
-              />
-            </div>
-            <div className="dpl-input">
-              <label htmlFor="edit-message" className="input-label">
-                Message
-              </label>
-              <div>
-                <textarea
-                  id="edit-message"
-                  name="message"
-                  rows={8}
-                  cols={60}
-                  className="form-textarea required"
-                />
-              </div>
-            </div>
+            <Input id="edit-name" type="text" label="Your name" />
+            <Input id="edit-email" type="text" label="Your email" />
+            <Dropdown
+              labelComponent={<Label id="edit-category">Category</Label>}
+              ariaLabel="select category"
+              arrowIcon="chevron"
+              innerClassNames={{
+                select: "dropdown__select--grey",
+                arrowWrapper: "dropdown__arrows--grey",
+              }}
+              list={[
+                { title: "Option 1" },
+                { title: "Option 2" },
+                { title: "Option 3" },
+              ]}
+            />
+            <Input id="edit-subject" type="text" label="Subject" />
+            <Textarea id="edit-message" name="message" label="Message" />
             <Button
               buttonType="none"
               label="Send message"
@@ -94,9 +54,12 @@ const Webform: React.FC<WebformProps> = ({
             <p className="webform__info-message">
               BEMÆRK!: Indsæt aldrig CPR-nummer eller følsomme oplysninger i
               formularen. Læs mere om{" "}
-              <a href="" target="_blank" className="text-links">
-                behandlingen af persondata i vores privatlivspolitik
-              </a>
+              <Links
+                href=""
+                target="_blank"
+                linkText="behandlingen af persondata i vores privatlivspolitik"
+                excludeLinkTagClass
+              />
             </p>
           </form>
         </div>

src/stories/Blocks/webform/webform.scss

@@ -28,11 +28,6 @@
     margin-bottom: $s-lg;
     max-width: 550px;
 
-    &:has(.form-textarea) {
-      max-width: $block-max-width__medium;
-    }
-  }
-
   &__form {
     margin: 0 $s-md 0 $s-md;
 
@@ -42,18 +37,6 @@
     }
   }
 
-  // Class from the webform Drupal module
-  & .form-textarea {
-    @include typography($typo__body-placeholder);
-    border: solid 1px $color__global-tertiary-1;
-    width: 100%;
-    padding: $s-md;
-    resize: none;
-    background-color: $color__global-primary;
-
-    @extend %default-focus-visible;
-  }
-
   &__info-message {
     @include typography($typo__links);
     color: $color__global-tertiary-2;

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

@@ -1,8 +1,10 @@
+import Label from "../label/Label";
+
 export type InputProps = {
   label: string;
   type: "text" | "password";
   id: string;
-  description: string;
+  description?: string;
   validation?: string;
 };
 
@@ -11,7 +13,7 @@ const Input = (props: InputProps) => {
   const invalid = validation ? "true" : "false";
   return (
     <div className="dpl-input">
-      <label htmlFor={id}>{label}</label>
+      <Label id={id}>{label}</Label>
       <input
         aria-invalid={invalid}
         aria-describedby={`description-${id}`}

src/stories/Library/Forms/label/Label.tsx

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from "react";
+
+export interface LabelProps {
+  id: string;
+  children: string;
+  className?: string;
+}
+
+const Label: FC<LabelProps> = ({ id, className, children }) => (
+  <label htmlFor={id} {...(className ? { className } : {})}>
+    {children}
+  </label>
+);
+
+export default Label;

src/stories/Library/Forms/textarea/Textarea.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import Textarea from "./Textarea";
+
+export default {
+  title: "Library / Forms / Textarea",
+  component: Textarea,
+  decorators: [withDesign],
+  argTypes: {
+    id: {
+      defaultValue: "id",
+    },
+    name: {
+      defaultValue: "name",
+    },
+    label: {
+      defaultValue: "Besked",
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66174",
+    },
+    layout: "padded",
+  },
+} as ComponentMeta<typeof Textarea>;
+
+const Template: ComponentStory<typeof Textarea> = (args) => (
+  <Textarea {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Library/Forms/textarea/Textarea.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import Label from "../label/Label";
+
+export interface TextareaProps {
+  id: string;
+  name: string;
+  label: string;
+  rows?: number;
+  cols?: number;
+}
+
+const Textarea: FC<TextareaProps> = ({
+  id,
+  name,
+  label,
+  rows = 8,
+  cols = 80,
+}) => {
+  return (
+    <div className="dpl-input">
+      <Label id={id}>{label}</Label>
+      <div>
+        <textarea id={id} name={name} rows={rows} cols={cols} />
+      </div>
+    </div>
+  );
+};
+
+export default Textarea;

src/stories/Library/Forms/textarea/textarea.scss

@@ -0,0 +1,16 @@
+.dpl-input {
+  &:has(.form-textarea) {
+    max-width: $block-max-width__medium;
+  }
+
+  & textarea {
+    @include typography($typo__body-placeholder);
+    border: solid 1px $color__global-tertiary-1;
+    width: 100%;
+    padding: $s-md;
+    resize: none;
+    background-color: $color__global-primary;
+
+    @extend %default-focus-visible;
+  }
+}

src/stories/Library/dropdown/Dropdown.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg";
 import { ReactComponent as TriangleIcon } from "../../../public/icons/basic/icon-triangle.svg";
+import Label from "../Forms/label/Label";
 
 export type DropdownItem = {
   title: string;
@@ -9,6 +10,7 @@ export type DropdownItem = {
 };
 
 export type DropdownProps = {
+  labelComponent?: ReturnType<typeof Label>;
   list: DropdownItem[];
   ariaLabel: string;
   arrowIcon: "triangles" | "chevron";
@@ -17,6 +19,7 @@ export type DropdownProps = {
 };
 
 export const Dropdown: React.FC<DropdownProps> = ({
+  labelComponent,
   arrowIcon,
   ariaLabel,
   list,
@@ -48,21 +51,24 @@ export const Dropdown: React.FC<DropdownProps> = ({
   };
 
   return (
-    <div className={classes.root}>
-      <select className={classes.select} aria-label={ariaLabel}>
-        {list.map(({ title, disabled }, index) => (
-          <option
-            key={index}
-            className={classes.option}
-            value={title}
-            disabled={disabled !== undefined ? disabled : false}
-          >
-            {title}
-          </option>
-        ))}
-      </select>
-      <div className={classes.arrowWrapper}>
-        <Icon />
+    <div className="dpl-input">
+      {labelComponent && labelComponent}
+      <div className={classes.root}>
+        <select className={classes.select} aria-label={ariaLabel}>
+          {list.map(({ title, disabled }, index) => (
+            <option
+              key={index}
+              className={classes.option}
+              value={title}
+              disabled={disabled !== undefined ? disabled : false}
+            >
+              {title}
+            </option>
+          ))}
+        </select>
+        <div className={classes.arrowWrapper}>
+          <Icon />
+        </div>
       </div>
     </div>
   );