feat: Input accepts type as prop (#38)

Author: Amin Mahboubi

src/components/Input.mdx

@@ -35,3 +35,17 @@ Text input element
   `}
   />
 </Playground>
+
+
+## Custom Input type
+
+<Playground>
+  <MML
+    source={`
+    <mml>
+      <input name="answer" value="hidden value used in form" type="hidden"></input>
+      <button name="action" value="confirm">Confirm</button>
+    </mml>
+  `}
+  />
+</Playground>

src/components/Input.tsx

@@ -7,14 +7,16 @@ export type InputProps = {
   label?: string;
   /** Initial value of the input */
   value?: string;
+  /** The input type */
+  type?: string;
   /** The placeholder of the input field */
   placeholder?: string;
 };
 
 /**
  * Text input element. Usually you'll want to rely on regular messages
  */
-export const Input: FC<InputProps> = ({ name, label, value = '', placeholder = '' }) => {
+export const Input: FC<InputProps> = ({ name, label, value = '', type = 'text', placeholder = '' }) => {
   const [state, setState] = useState(value);
   const id = `mml-${name}`;
 
@@ -30,6 +32,7 @@ export const Input: FC<InputProps> = ({ name, label, value = '', placeholder = '
         className="mml-input"
         name={name}
         value={state}
+        type={type}
         placeholder={placeholder}
         onChange={(event) => setState(event.target.value)}
       />

src/parser/__snapshots__/examples.test.tsx.snap

@@ -6591,6 +6591,23 @@ Object {
           "toJSON": [Function],
           "type": "text",
         },
+        Object {
+          "attributes": Object {
+            "name": "secret",
+            "type": "hidden",
+            "value": "secret",
+          },
+          "children": Array [],
+          "name": "input",
+          "toJSON": [Function],
+          "type": "element",
+        },
+        Object {
+          "text": "
+        ",
+          "toJSON": [Function],
+          "type": "text",
+        },
         Object {
           "attributes": Object {
             "name": "send",
@@ -6677,6 +6694,27 @@ Tree {
         "type": "element",
       },
     },
+    MMLTag {
+      "attributes": Object {
+        "name": "secret",
+        "type": "hidden",
+        "value": "secret",
+      },
+      "children": Array [],
+      "key": "tag-input-position-2",
+      "name": "input",
+      "node": Object {
+        "attributes": Object {
+          "name": "secret",
+          "type": "hidden",
+          "value": "secret",
+        },
+        "children": Array [],
+        "name": "input",
+        "toJSON": [Function],
+        "type": "element",
+      },
+    },
     MMLTag {
       "attributes": Object {
         "name": "send",
@@ -6695,7 +6733,7 @@ Tree {
           },
         },
       ],
-      "key": "tag-button-position-2",
+      "key": "tag-button-position-3",
       "name": "button",
       "node": Object {
         "attributes": Object {
@@ -6776,6 +6814,23 @@ Tree {
         "toJSON": [Function],
         "type": "text",
       },
+      Object {
+        "attributes": Object {
+          "name": "secret",
+          "type": "hidden",
+          "value": "secret",
+        },
+        "children": Array [],
+        "name": "input",
+        "toJSON": [Function],
+        "type": "element",
+      },
+      Object {
+        "text": "
+        ",
+        "toJSON": [Function],
+        "type": "text",
+      },
       Object {
         "attributes": Object {
           "name": "send",
@@ -6811,6 +6866,11 @@ Tree {
       name="email"
       type="text"
     />,
+    <Input
+      name="secret"
+      type="hidden"
+      value="secret"
+    />,
     <Button
       name="send"
       text="Submit"
@@ -6830,6 +6890,11 @@ Array [
     name="email"
     type="text"
   />,
+  <Input
+    name="secret"
+    type="hidden"
+    value="secret"
+  />,
   <Button
     name="send"
     text="Submit"
@@ -6857,8 +6922,18 @@ Array [
     name="email"
     onChange={[Function]}
     placeholder=""
+    type="text"
     value=""
   />,
+  <input
+    className="mml-input"
+    id="mml-secret"
+    name="secret"
+    onChange={[Function]}
+    placeholder=""
+    type="hidden"
+    value="secret"
+  />,
   <button
     className="mml-btn  mml-btn--text mml-btn--grounded"
     name="send"

src/parser/__snapshots__/parser.test.tsx.snap

@@ -954,6 +954,7 @@ exports[`simple input 4`] = `
   name="name"
   onChange={[Function]}
   placeholder=""
+  type="text"
   value="John"
 />
 `;

src/parser/examples.test.tsx

@@ -92,6 +92,7 @@ const examples = [
       <mml>
         <md>Happy to setup your new credit card application, what's your **yearly** family income?</md>
         <input type="text" name="email" />
+        <input type="hidden" name="secret" value="secret" />
         <button name="send" value="submit">Submit</button>
       </mml>`,
   },