5398: add input

base.scss

@@ -22,6 +22,7 @@
 @import "./src/stories/Library/number/number";
 @import "./src/stories/Library/counter/counter";
 @import "./src/stories/Library/Forms/checkbox/checkbox";
+@import "./src/stories/Library/Forms/input/input";
 @import "./src/stories/Library/material/material";
 @import "./src/stories/Library/progress-bar/progress-bar";
 @import "./src/stories/missing-story/missing-story";

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+
+import { Input } from "./Input";
+
+export default {
+  title: "Library / Forms / Input",
+  component: Input,
+  decorators: [withDesign],
+  argTypes: {
+    label: {
+      defaultValue: "Navn",
+    },
+    type: {
+      defaultValue: "text",
+    },
+    id: {
+      defaultValue: "id",
+    },
+    description: { defaultValue: "Dit fulde navn" },
+    validation: { defaultValue: "Fejlbesked lorem ipsum dolor" },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/xouARmJCONbzbZhpD8XpcM/Brugerprofil?node-id=1239%3A66174",
+    },
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+

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

@@ -0,0 +1,34 @@
+export type InputProps = {
+  label: string;
+  type: "text" | "password";
+  id: string;
+  description: string;
+  validation: string;
+};
+
+export const Input = (props: InputProps) => {
+  const { label, type, id, description, validation } = props;
+
+  return (
+    <div className="dpl-input">
+      <label htmlFor={id}>{label}</label>
+      <input
+        aria-invalid={validation ? true : false}
+        aria-describedby={`description-${id}`}
+        aria-labelledBy={validation ? `validation-${id}` : ""}
+        id={id}
+        type={type}
+      />
+      {description && (
+        <div className="dpl-input__description" id={`description-${id}`}>
+          {description}
+        </div>
+      )}
+      {validation && (
+        <div id={`validation-${id}`} className="dpl-input__validation">
+          {validation}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+.dpl-input {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    @extend .text-body-medium-medium;
+    color: $c-text-secondary-gray;
+  }
+
+  input {
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid $c-global-tertiary-1;
+    height: 40px;
+
+    &:focus {
+      border-bottom-color: #000;
+      outline: none;
+    }
+  }
+
+  &__description {
+    color: $c-text-secondary-gray;
+    @extend .text-body-small-regular;
+    @extend .mt-8;
+  }
+
+  &__validation {
+    color: $c-signal-alert;
+    @extend .text-body-small-regular;
+    @extend .mt-8;
+  }
+}