From 1df3b825719e05725a7f891df119834ce7662b66 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 16 Feb 2023 14:42:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20a=20temporary=20TextIn?=
 =?UTF-8?q?put?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Even if we haven't started to work on a complete set of inputs
we need a generic Input to implement the "goto" feature on the
Pagination component. This component is not intended to be used
in by the librarie's dependent, so we mark it as "WIP" for the
moment.
---
 .../src/components/Forms/Input/index.scss     | 23 +++++++++++++++++++
 .../components/Forms/Input/index.stories.tsx  | 17 ++++++++++++++
 .../src/components/Forms/Input/index.tsx      | 11 +++++++++
 packages/react/src/index.scss                 |  1 +
 4 files changed, 52 insertions(+)
 create mode 100644 packages/react/src/components/Forms/Input/index.scss
 create mode 100644 packages/react/src/components/Forms/Input/index.stories.tsx
 create mode 100644 packages/react/src/components/Forms/Input/index.tsx

diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss
new file mode 100644
index 0000000..87355ad
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.scss
@@ -0,0 +1,23 @@
+.c__input {
+  height: 2rem;
+  padding: 0 14px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px var(--c--theme--colors--greyscale-300) solid;
+  transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  color: var(--c--theme--colors--greyscale-800);
+  font-size: var(--c--theme--font--sizes--m);
+
+  &:focus {
+    outline: 0;
+    border: 1px var(--c--theme--colors--greyscale-500) solid;
+  }
+
+  &--medium {
+    min-width: 150px;
+  }
+
+  &--nano {
+    min-width: 10px;
+  }
+}
\ No newline at end of file
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
new file mode 100644
index 0000000..14846cc
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Input } from "components/Forms/Input/index";
+
+export default {
+  title: "Components/Forms (WIP)/Input",
+  component: Input,
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => (
+  <Input {...args} aria-label="Input" />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  defaultValue: "Hello world",
+};
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
new file mode 100644
index 0000000..df84fc9
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -0,0 +1,11 @@
+import React, { InputHTMLAttributes } from "react";
+
+type Props = InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = ({ className, ...props }: Props) => {
+  const classes = ["c__input"];
+  if (className) {
+    classes.push(className);
+  }
+  return <input type="text" className={classes.join(" ")} {...props} />;
+};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 76dbdf1..0054f81 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -1,6 +1,7 @@
 @import "cunningham-tokens";
 @import '@openfun/cunningham-tokens/default-tokens';
 @import './components/Button';
+@import './components/Forms/Input';
 
 * {
   font-family: var(--c--theme--font--families--base);