WIP Input

platform/ui/src/components/Input/Input.jsx

@@ -1,17 +1,43 @@
 import React from 'react';
 import Label from '../Label';
 
-const Input = ({ label, ...rest }) => {
+const Input = ({
-  return (
+  label,
-    <>
+  containerClassName = '',
-      <Label text="Label">
+  className = '',
-        <input
+  transparent = defaults.transparent,
-          className="transition duration-300 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+  ...rest
-          {...rest}
+}) => {
-        />
+  const getClasses = () => {
-      </Label>
+    const classes = [];
-    </>
+
+    classes.push(transparentClasses[transparent]);
+
+    return classes.join(' ');
+  };
+
+  const input = (
+    <input
+      className={`shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-gray-700 hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none ${getClasses()} ${className}`}
+      id="id"
+      {...rest}
+    />
   );
+
+  const renderElement = () => {
+    return label ? <Label text="Label">{input}</Label> : input;
+  };
+
+  return <div className={`flex ${containerClassName}`}>{renderElement()}</div>;
+};
+
+const defaults = {
+  transparent: false,
+};
+
+const transparentClasses = {
+  true: 'bg-transparent',
+  false: '',
 };
 
 export default Input;

platform/ui/src/components/Input/Input.mdx

@@ -19,12 +19,15 @@ import Input from './';
   {() => {
     const [inputValue, setInputValue] = React.useState('');
     return (
-      <Input
+      <div className="m-5 bg-black">
-        label="Label"
+        <Input
-        value={inputValue}
+          transparent
-        placeholder="Type something..."
+          containerClassName="mb-3"
-        onChange={e => setInputValue(e.target.value)}
+          label="Label"
-      />
+          placeholder="With Label"
+        />
+        <Input placeholder="Without label" />
+      </div>
     );
   }}
 </Playground>