@pareto-engineering/design-system 0.0.1-alpha.67 → 0.0.1-alpha.70

package/src/__snapshots__/Storyshots.test.js.snap

@@ -1153,6 +1153,57 @@ exports[`Storyshots a/TeamInfo Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Timestamp Base 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  1634256000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Date Format 1`] = `
+<p
+  className="base timestamp"
+>
+  2021-10-15 at 00:00
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Distance Format 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  3 days ago
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Prefix 1`] = `
+<p
+  className="base timestamp"
+  onClick={[Function]}
+>
+  <strong>
+    Updated :
+  </strong>
+   
+  1634256000000
+</p>
+`;
+
+exports[`Storyshots a/Timestamp Relative Format 1`] = `
+Array [
+  "Click to see relative format. Relative format has not been enabled by default because of chromatic snapshots.",
+  <p
+    className="base timestamp"
+    onClick={[Function]}
+  >
+    2021-10-10T00:00:00.000+00:00
+  </p>,
+]
+`;
+
 exports[`Storyshots b/Button Base 1`] = `
 <button
   className="base button x-main1"
@@ -4219,213 +4270,176 @@ exports[`Storyshots c/Shortener Base 1`] = `
 </span>
 `;
 
-exports[`Storyshots f/common/Description Base 1`] = `
-<div
-  className="base description x-metadata"
->
-  Sample Description
-</div>
-`;
-
-exports[`Storyshots f/common/Label Base 1`] = `
-<label
-  className="base label"
->
-  Sample Label
-</label>
-`;
-
-exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
+exports[`Storyshots f/FormInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="y-background b-y"
+    className="base text-input form-input"
   >
-    <div
-      className="base checkbox-input"
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="firstName"
     >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to customer"
-          />
-          <span>
-            Business to customer
-          </span>
-        </label>
-      </div>
-    </div>
+      What's your first name ?
+    </label>
+    <input
+      className="input input-border"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base text-input form-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="lastName"
+    >
+      What's your last name ?
+    </label>
+    <input
+      className="input input-border"
+      disabled={false}
+      id="lastName"
+      name="lastName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+    />
+  </div>
+  <div
+    className="base text-area-input form-input x-background y-main1"
+  >
+    <label
+      className="base label c-y v50 mb-v x-main1"
+      htmlFor="description"
+    >
+      Describe yourself in a few sentences
+    </label>
+    <textarea
+      className="textarea v50 pv-v input-border"
+      disabled={false}
+      name="description"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+    />
+     
+  </div>
+  <div
+    className="base choices-input form-input x-background y-main1"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main1"
+    >
+      What are your favourite colors ?
+    </p>
     <div
-      className="base checkbox-input"
+      className="choices"
     >
       <div
-        className="not-selected input-content uc v1 pv-v"
+        className="base choice"
       >
+        <input
+          disabled={false}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
         <label
-          className="base label"
-          htmlFor="businessTypes"
+          htmlFor="undefined-red"
         >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to business"
-          />
-          <span>
-            Business to business
-          </span>
+          Color Red
         </label>
       </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
       <div
-        className="not-selected input-content uc v1 pv-v"
+        className="base choice"
       >
+        <input
+          disabled={false}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
         <label
-          className="base label"
-          htmlFor="businessTypes"
+          htmlFor="undefined-blue"
         >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="E-commerce"
-          />
-          <span>
-            E-commerce
-          </span>
+          Color Blue
         </label>
       </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
       <div
-        className="not-selected input-content uc v1 pv-v"
+        className="base choice"
       >
+        <input
+          disabled={false}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
         <label
-          className="base label"
-          htmlFor="businessTypes"
+          htmlFor="undefined-green"
         >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Marketplace"
-          />
-          <span>
-            Marketplace
-          </span>
+          Color Green
         </label>
       </div>
     </div>
-    <div
-      className="debugger"
-    >
-      <button
-        className="base button x-main1"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
   </div>
-</form>
-`;
-
-exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
   <div
-    className="base choices-input x-background y-main1"
-    id="colors"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
+    className="base select-input form-input"
   >
-    <div
-      className="base choice"
+    <label
+      className="base label input-label x-main1"
+      htmlFor="food"
     >
-      <input
-        id="colors-red"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value="red"
-      />
-      <label
-        htmlFor="colors-red"
-      >
-        Color Red
-      </label>
-    </div>
-    <div
-      className="base choice"
+      What do you want for dinner ?
+    </label>
+    <select
+      className="input v25 pv-v"
+      disabled={false}
+      id="food"
+      name="food"
+      onBlur={[Function]}
+      onChange={[Function]}
     >
-      <input
-        id="colors-blue"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value="blue"
-      />
-      <label
-        htmlFor="colors-blue"
+      <option
+        value="italian"
       >
-        Color Blue
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-green"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value="green"
-      />
-      <label
-        htmlFor="colors-green"
+        A nice pizza
+      </option>
+      <option
+        value="turkish"
       >
-        Color Green
-      </label>
-    </div>
+        A delicious kebab
+      </option>
+      <option
+        value="french"
+      >
+        A three course delicate french meal
+      </option>
+    </select>
   </div>
   <div
     className="debugger"
@@ -4441,72 +4455,720 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
+exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background y-main1"
-    id="colors"
-    style={
-      Object {
-        "--grid-columns-desktop": 3,
-        "--grid-columns-mobile": 2,
-      }
-    }
+    className="base text-input form-input"
   >
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input input-border"
+      disabled={true}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base text-input form-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="lastName"
+    >
+      What's your last name ?
+    </label>
+    <input
+      className="input input-border"
+      disabled={true}
+      id="lastName"
+      name="lastName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+    />
+  </div>
+  <div
+    className="base text-area-input form-input x-background y-main1"
+  >
+    <label
+      className="base label c-y v50 mb-v x-main1"
+      htmlFor="description"
+    >
+      Describe yourself in a few sentences
+    </label>
+    <textarea
+      className="textarea v50 pv-v input-border"
+      disabled={true}
+      name="description"
+      onBlur={[Function]}
+      onChange={[Function]}
+      rows={3}
+    />
+     
+  </div>
+  <div
+    className="base choices-input form-input x-background y-main1"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main1"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={true}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="undefined-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={true}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="undefined-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={true}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base select-input form-input"
+  >
+    <label
+      className="base label input-label x-main1"
+      htmlFor="food"
+    >
+      What do you want for dinner ?
+    </label>
+    <select
+      className="input v25 pv-v"
+      disabled={true}
+      id="food"
+      name="food"
+      onBlur={[Function]}
+      onChange={[Function]}
+    >
+      <option
+        value="italian"
+      >
+        A nice pizza
+      </option>
+      <option
+        value="turkish"
+      >
+        A delicious kebab
+      </option>
+      <option
+        value="french"
+      >
+        A three course delicate french meal
+      </option>
+    </select>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="extended"
+    >
+      Extended type input
+    </label>
+    <input
+      className="input input-border"
+      disabled={false}
+      id="extended"
+      name="extended"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/common/Description Base 1`] = `
+<div
+  className="base description x-metadata"
+>
+  Sample Description
+</div>
+`;
+
+exports[`Storyshots f/common/Label Base 1`] = `
+<label
+  className="base label x-main1"
+>
+  Sample Label
+</label>
+`;
+
+exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background b-y"
+  >
+    <div
+      className="base checkbox-input"
+    >
+      <div
+        className="not-selected input-content uc v1 pv-v"
+      >
+        <label
+          className="base label x-main1"
+          htmlFor="businessTypes"
+        >
+          <input
+            className="input"
+            id="businessTypes"
+            name="businessTypes"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="checkbox"
+            value="Business to customer"
+          />
+          <span>
+            Business to customer
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      className="base checkbox-input"
+    >
+      <div
+        className="not-selected input-content uc v1 pv-v"
+      >
+        <label
+          className="base label x-main1"
+          htmlFor="businessTypes"
+        >
+          <input
+            className="input"
+            id="businessTypes"
+            name="businessTypes"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="checkbox"
+            value="Business to business"
+          />
+          <span>
+            Business to business
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      className="base checkbox-input"
+    >
+      <div
+        className="not-selected input-content uc v1 pv-v"
+      >
+        <label
+          className="base label x-main1"
+          htmlFor="businessTypes"
+        >
+          <input
+            className="input"
+            id="businessTypes"
+            name="businessTypes"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="checkbox"
+            value="E-commerce"
+          />
+          <span>
+            E-commerce
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      className="base checkbox-input"
+    >
+      <div
+        className="not-selected input-content uc v1 pv-v"
+      >
+        <label
+          className="base label x-main1"
+          htmlFor="businessTypes"
+        >
+          <input
+            className="input"
+            id="businessTypes"
+            name="businessTypes"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="checkbox"
+            value="Marketplace"
+          />
+          <span>
+            Marketplace
+          </span>
+        </label>
+      </div>
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main1"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background y-main1"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="colors-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="colors-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="colors-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background y-main1"
+    id="shapes"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main1"
+    >
+      Geometric Shapes
+    </p>
     <div
-      className="base choice"
+      className="choices"
     >
-      <input
-        id="colors-red"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="red"
-      />
-      <label
-        htmlFor="colors-red"
+      <div
+        className="base choice"
       >
-        Color Red
-      </label>
+        <input
+          disabled={false}
+          id="shapes-triangle"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="triangle"
+        />
+        <label
+          htmlFor="shapes-triangle"
+        >
+          Triangle
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="shapes-square"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="square"
+        />
+        <label
+          htmlFor="shapes-square"
+        >
+          Square
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="shapes-rectangle"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="rectangle"
+        />
+        <label
+          htmlFor="shapes-rectangle"
+        >
+          Rectangle
+        </label>
+      </div>
     </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background y-main1"
+    id="shapes"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main1"
+    >
+      Geometric Shapes
+    </p>
     <div
-      className="base choice"
+      className="choices"
     >
-      <input
-        id="colors-blue"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="blue"
-      />
-      <label
-        htmlFor="colors-blue"
+      <div
+        className="base choice"
       >
-        Color Blue
-      </label>
+        <input
+          disabled={true}
+          id="shapes-triangle"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="triangle"
+        />
+        <label
+          htmlFor="shapes-triangle"
+        >
+          Triangle
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={true}
+          id="shapes-square"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="square"
+        />
+        <label
+          htmlFor="shapes-square"
+        >
+          Square
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={true}
+          id="shapes-rectangle"
+          name="shape"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="rectangle"
+        />
+        <label
+          htmlFor="shapes-rectangle"
+        >
+          Rectangle
+        </label>
+      </div>
     </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input multiple x-background y-main1"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
     <div
-      className="base choice"
+      className="choices"
     >
-      <input
-        id="colors-green"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="green"
-      />
-      <label
-        htmlFor="colors-green"
+      <div
+        className="base choice"
       >
-        Color Green
-      </label>
+        <input
+          disabled={false}
+          id="colors-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="colors-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="colors-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="colors-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="colors-green"
+        >
+          Color Green
+        </label>
+      </div>
     </div>
   </div>
   <div
@@ -4540,140 +5202,152 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     }
   >
     <div
-      className="base choice"
+      className="choices"
     >
-      <input
-        id="colors-red"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="red"
-      />
-      <label
-        htmlFor="colors-red"
+      <div
+        className="base choice"
       >
-        Color Red
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-blue"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="blue"
-      />
-      <label
-        htmlFor="colors-blue"
+        <input
+          disabled={false}
+          id="colors-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="colors-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Blue
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-green"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="green"
-      />
-      <label
-        htmlFor="colors-green"
+        <input
+          disabled={false}
+          id="colors-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="colors-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Green
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-yellow"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="yellow"
-      />
-      <label
-        htmlFor="colors-yellow"
+        <input
+          disabled={false}
+          id="colors-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="colors-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Yellow
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-oarnge"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="oarnge"
-      />
-      <label
-        htmlFor="colors-oarnge"
+        <input
+          disabled={false}
+          id="colors-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="yellow"
+        />
+        <label
+          htmlFor="colors-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Orange
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-violet"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="violet"
-      />
-      <label
-        htmlFor="colors-violet"
+        <input
+          disabled={false}
+          id="colors-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="oarnge"
+        />
+        <label
+          htmlFor="colors-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Violet
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-brown"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="brown"
-      />
-      <label
-        htmlFor="colors-brown"
+        <input
+          disabled={false}
+          id="colors-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="colors-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Brown
-      </label>
-    </div>
-    <div
-      className="base choice"
-    >
-      <input
-        id="colors-black"
-        name="color"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="checkbox"
-        value="black"
-      />
-      <label
-        htmlFor="colors-black"
+        <input
+          disabled={false}
+          id="colors-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="colors-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        Color Black
-      </label>
+        <input
+          disabled={false}
+          id="colors-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="colors-black"
+        >
+          Color Black
+        </label>
+      </div>
     </div>
   </div>
   <div
@@ -4703,7 +5377,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label"
+        className="base label x-main1"
         htmlFor="companySize"
       >
         <input
@@ -4730,7 +5404,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label"
+        className="base label x-main1"
         htmlFor="companySize"
       >
         <input
@@ -4757,7 +5431,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label"
+        className="base label x-main1"
         htmlFor="companySize"
       >
         <input
@@ -4784,7 +5458,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label"
+        className="base label x-main1"
         htmlFor="companySize"
       >
         <input
@@ -5585,13 +6259,69 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label"
+      className="base label input-label x-main1"
+      htmlFor="workType"
+    >
+      Work Type
+    </label>
+    <select
+      className="input v25 pv-v"
+      disabled={false}
+      id="workType"
+      name="workType"
+      onBlur={[Function]}
+      onChange={[Function]}
+      value="Work"
+    >
+      <option
+        value="Work"
+      >
+        Work
+      </option>
+      <option
+        value="Managing"
+      >
+        Managing
+      </option>
+      <option
+        value="Training"
+      >
+        Training
+      </option>
+    </select>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <label
+      className="base label input-label x-main1"
       htmlFor="workType"
     >
       Work Type
     </label>
     <select
       className="input v25 pv-v"
+      disabled={true}
       id="workType"
       name="workType"
       onBlur={[Function]}
@@ -5613,6 +6343,16 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       >
         Training
       </option>
+      <option
+        value="20th Aug 2020 to 19th Sept, 2020"
+      >
+        20th Aug 2020 to 19th Sept, 2020
+      </option>
+      <option
+        value="20th Sept 2020 to 19th Oct, 2020"
+      >
+        20th Sept 2020 to 19th Oct, 2020
+      </option>
     </select>
   </div>
   <div
@@ -5639,13 +6379,14 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label"
+      className="base label input-label x-main1"
       htmlFor="workType"
     >
       Work Type
     </label>
     <select
       className="input v25 pv-v"
+      disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
@@ -5688,13 +6429,14 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label"
+      className="base label input-label x-main1"
       htmlFor="workType"
     >
       Work Type
     </label>
     <select
       className="input v25 pv-v"
+      disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
@@ -5742,7 +6484,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TaskRecommendation Base 1`] = `
+exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -5757,7 +6499,7 @@ exports[`Storyshots f/fields/TaskRecommendation Base 1`] = `
     }
   >
     <div
-      className="base task-recommendation x-main2"
+      className="base task-recommendation-input x-main2"
     >
       <div
         className="task-content b-on-x"
@@ -5766,7 +6508,7 @@ exports[`Storyshots f/fields/TaskRecommendation Base 1`] = `
           className="v1 p-v task"
         >
           <label
-            className="base label uc mb-v c-x"
+            className="base label uc mb-v c-x x-main1"
             htmlFor="taskRecommendations"
           >
             Find potential business customers
@@ -5797,7 +6539,80 @@ exports[`Storyshots f/fields/TaskRecommendation Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextArea Base 1`] = `
+exports[`Storyshots f/fields/TextInput Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main1"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input input-border"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value=""
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background b-y u2 pb-u"
+  >
+    <div
+      className="base text-input"
+    >
+      <label
+        className="base label input-label v50 mb-v x-main1"
+        htmlFor="firstName"
+      >
+        What's your first name ?
+      </label>
+      <input
+        className="input input-border"
+        disabled={true}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -5807,16 +6622,17 @@ exports[`Storyshots f/fields/TextArea Base 1`] = `
     className="y-background b-y"
   >
     <div
-      className="base text-area x-background y-main1"
+      className="base text-area-input x-background y-main1"
     >
       <label
-        className="base label c-y v50 mb-v"
+        className="base label c-y v50 mb-v x-main1"
         htmlFor="feedBack"
       >
         What can we improve on?
       </label>
       <textarea
         className="textarea v50 pv-v input-border"
+        disabled={false}
         name="feedBack"
         onBlur={[Function]}
         onChange={[Function]}
@@ -5840,41 +6656,46 @@ exports[`Storyshots f/fields/TextArea Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Base 1`] = `
+exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base text-input"
+    className="y-background b-y"
   >
-    <label
-      className="base label input-label v50 mb-v"
-      htmlFor="firstName"
+    <div
+      className="base text-area-input x-background y-main1"
     >
-      What's your first name ?
-    </label>
-    <input
-      className="input input-border"
-      id="firstName"
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      type="text"
-      value=""
-    />
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main1"
-      onClick={[Function]}
-      type="button"
+      <label
+        className="base label c-y v50 mb-v x-main1"
+        htmlFor="feedBack"
+      >
+        What can we improve on?
+      </label>
+      <textarea
+        className="textarea v50 pv-v input-border"
+        disabled={true}
+        name="feedBack"
+        onBlur={[Function]}
+        onChange={[Function]}
+        rows={3}
+        value=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
     >
-      Open FormDebugger
-    </button>
+      <button
+        className="base button x-main1"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
   </div>
 </form>
 `;