✨(react) add a temporary TextInput

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.

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;
+  }
+}

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",
+};

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} />;
+};

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);