add input field (#46)

src/components/Input/Input.stories.tsx

@@ -0,0 +1,17 @@
+import { Input } from "./Input";
+
+export default { title: "Components/Input", component: Input };
+
+export const _Input = {
+  render: () => (
+    <>
+      <Input placeholder={"something"} />
+      <br />
+
+      <Input placeholder={"something"} error="that's an error" />
+      <br />
+
+      <Input placeholder={"something"} warning="that's a warning" />
+    </>
+  ),
+};

src/components/Input/Input.test.tsx

@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Input } from ".";
+
+describe("Components | Fields | Input", () => {
+  test("it should render", () => {
+    render(<Input />);
+
+    let input = screen.getByTestId("input-field");
+
+    expect(input).toBeInTheDocument();
+  });
+
+  test("it should set a new placeholder content", () => {
+    render(<Input placeholder={"something"} />);
+
+    let input = screen.getByPlaceholderText("something");
+
+    expect(input).toBeInTheDocument();
+  });
+
+  test("it should show an error message", () => {
+    render(<Input error={"euh"} />);
+
+    let message = screen.getByTestId("input-field-message");
+    let input = screen.getByTestId("input-field");
+
+    expect(message).toBeInTheDocument();
+    expect(message.getAttribute("class")).toContain("text-s-error");
+    expect(input.getAttribute("class")).toContain("border-s-error");
+  });
+
+  test("it should show an warning message", () => {
+    render(<Input warning={"warn"} />);
+
+    let message = screen.getByTestId("input-field-message");
+    let input = screen.getByTestId("input-field");
+
+    expect(message).toBeInTheDocument();
+    expect(message.getAttribute("class")).toContain("text-s-warning");
+    expect(input.getAttribute("class")).toContain("border-s-warning");
+  });
+
+  test("it should change border color on focusIn", () => {
+    render(<Input />);
+
+    let input = screen.getByTestId("input-field");
+
+    fireEvent.focus(input);
+
+    expect(input.getAttribute("class")).toContain("default-input");
+  });
+});

src/components/Input/Input.tsx

@@ -0,0 +1,58 @@
+import { useState, ComponentPropsWithoutRef } from "react";
+
+export interface InputProps extends ComponentPropsWithoutRef<"input"> {
+  placeholder?: string | undefined;
+  error?: string | undefined;
+  warning?: string | undefined;
+}
+
+export function Input(props: InputProps) {
+  const { error, warning, ...rest } = props;
+  const [field, setField] = useState("");
+
+  const errorClass = error ? "border-s-error" : "";
+  const warningClass = warning ? "border-s-warning" : "";
+  const messageClass = errorClass || warningClass;
+
+  function handleOnChange(e) {
+    setField(e.target.value);
+  }
+
+  return (
+    <div className="flex-row">
+      <div className="grid-cols-2">
+        <div className="inline h-12">
+          <input
+            data-testid="input-field"
+            className={`w-full default-input mb-1 ${messageClass}`}
+            type="text"
+            value={field}
+            onChange={handleOnChange}
+            {...rest}
+          />
+          <InputMessage error={error} warning={warning} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function InputMessage(props: InputProps) {
+  const { error, warning } = props;
+
+  const errorClass = error ? "mas-h3 text-s-error" : "";
+  const warningClass = warning ? "mas-h3 text-s-warning" : "";
+
+  const messageClass = errorClass || warningClass;
+  const hasMessage = error || warning;
+
+  if (hasMessage) {
+    return (
+      <div data-testid="input-field-message" className={messageClass}>
+        {error || warning}
+      </div>
+    );
+  } else {
+    return null;
+  }
+}

src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from "./Input";