@pareto-engineering/design-system 2.0.0-alpha.14 → 2.0.0-alpha.18

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

@@ -8632,7 +8632,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8689,7 +8689,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8728,7 +8728,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8767,7 +8767,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
             >
               <span />
               <button
-                className="base button x-main1 next x-main1"
+                className="base button x-main2 next x-main1 modifierCompact"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
@@ -8886,7 +8886,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8941,7 +8941,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -8980,7 +8980,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -9019,7 +9019,7 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
           >
             <span />
             <button
-              className="base button x-main1 next x-main1"
+              className="base button x-main2 next x-main1 modifierCompact"
               disabled={false}
               onClick={[Function]}
               type="button"
@@ -9130,7 +9130,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9150,7 +9150,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9166,10 +9166,10 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9185,7 +9185,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -9194,7 +9194,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9261,7 +9261,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9273,18 +9273,22 @@ exports[`Storyshots f/FormInput Base 1`] = `
       name="food"
       onBlur={[Function]}
       onChange={[Function]}
+      value=""
     >
       <option
+        disabled={false}
         value="italian"
       >
         A nice pizza
       </option>
       <option
+        disabled={false}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
+        disabled={false}
         value="french"
       >
         A three course delicate french meal
@@ -9295,7 +9299,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9315,7 +9319,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -9335,7 +9339,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -9351,10 +9355,10 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1 y-main1"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -9370,7 +9374,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
      
   </div>
   <div
-    className="base choices-input form-input x-background2 y-main1"
+    className="base choices-input form-input x-background2 y-main2"
     style={
       Object {
         "--grid-columns-desktop": 3,
@@ -9379,7 +9383,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -9446,7 +9450,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -9458,18 +9462,22 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       name="food"
       onBlur={[Function]}
       onChange={[Function]}
+      value=""
     >
       <option
+        disabled={false}
         value="italian"
       >
         A nice pizza
       </option>
       <option
+        disabled={false}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
+        disabled={false}
         value="french"
       >
         A three course delicate french meal
@@ -9480,7 +9488,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9500,7 +9508,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main1"
+      className="base label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -9519,7 +9527,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9539,7 +9547,7 @@ exports[`Storyshots f/common/Description Base 1`] = `
 
 exports[`Storyshots f/common/Label Base 1`] = `
 <label
-  className="base label x-main1"
+  className="base label x-main2"
 >
   Sample Label
 </label>
@@ -9561,7 +9569,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9586,7 +9594,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9611,7 +9619,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9636,7 +9644,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
         className="not-selected input-content uc v1 pv-v"
       >
         <label
-          className="base label x-main1"
+          className="base label x-main2"
           htmlFor="businessTypes"
         >
           <input
@@ -9658,7 +9666,7 @@ exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -9676,7 +9684,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -9748,7 +9756,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9765,7 +9773,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9775,7 +9783,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9842,7 +9850,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9859,7 +9867,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input x-background2 y-main1"
+    className="base choices-input x-background2 y-main2"
     id="shapes"
     style={
       Object {
@@ -9869,7 +9877,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main1"
+      className="base label x-main2"
     >
       Geometric Shapes
     </p>
@@ -9936,7 +9944,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -9953,7 +9961,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -10025,7 +10033,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10042,7 +10050,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base choices-input multiple x-background2 y-main1"
+    className="base choices-input multiple x-background2 y-main2"
     id="colors"
     style={
       Object {
@@ -10204,7 +10212,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10227,7 +10235,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10254,7 +10262,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10281,7 +10289,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10308,7 +10316,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
       className="not-selected uc v1 pv-v"
     >
       <label
-        className="base label x-main1"
+        className="base label x-main2"
         htmlFor="companySize"
       >
         <input
@@ -10332,7 +10340,7 @@ exports[`Storyshots f/fields/RadioInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10471,7 +10479,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -10785,7 +10793,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11089,7 +11097,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11109,7 +11117,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11124,16 +11132,19 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       value="Work"
     >
       <option
+        disabled={false}
         value="Work"
       >
         Work
       </option>
       <option
+        disabled={false}
         value="Managing"
       >
         Managing
       </option>
       <option
+        disabled={false}
         value="Training"
       >
         Training
@@ -11144,7 +11155,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11164,7 +11175,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11179,26 +11190,31 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
       value="Work"
     >
       <option
+        disabled={false}
         value="Work"
       >
         Work
       </option>
       <option
+        disabled={false}
         value="Managing"
       >
         Managing
       </option>
       <option
+        disabled={false}
         value="Training"
       >
         Training
       </option>
       <option
+        disabled={false}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
+        disabled={false}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11209,7 +11225,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11229,7 +11245,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11244,11 +11260,13 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
       value="Work"
     >
       <option
+        disabled={false}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
+        disabled={false}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11259,7 +11277,65 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <label
+      className="base label input-label x-main2"
+      htmlFor="activity"
+    >
+      Activity Type
+    </label>
+    <select
+      className="input v25 pv-v"
+      disabled={false}
+      id="activity"
+      name="activity"
+      onBlur={[Function]}
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        disabled={true}
+        value=""
+      >
+        Select activity type
+      </option>
+      <option
+        disabled={false}
+        value="review"
+      >
+        Review
+      </option>
+      <option
+        disabled={false}
+        value="Approve"
+      >
+        Approve
+      </option>
+    </select>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11279,7 +11355,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input"
   >
     <label
-      className="base label input-label x-main1"
+      className="base label input-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -11294,26 +11370,31 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
       value="Work"
     >
       <option
+        disabled={false}
         value="Work"
       >
         Work
       </option>
       <option
+        disabled={false}
         value="Managing"
       >
         Managing
       </option>
       <option
+        disabled={false}
         value="Training"
       >
         Training
       </option>
       <option
+        disabled={false}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
+        disabled={false}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11324,7 +11405,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="debugger"
   >
     <button
-      className="base button x-main1"
+      className="base button x-main2"
       onClick={[Function]}
       type="button"
     >
@@ -11349,7 +11430,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
     }
   >
     <div
-      className="base task-recommendation-input x-main1"
+      className="base task-recommendation-input x-main2"
     >
       <div
         className="task-content b-on-x"
@@ -11358,7 +11439,7 @@ exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
           className="v1 p-v task"
         >
           <label
-            className="base label uc mb-v  x-main1"
+            className="base label uc mb-v  x-main2"
             htmlFor="taskRecommendations"
           >
             Find potential business customers
@@ -11402,7 +11483,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11422,7 +11503,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11446,7 +11527,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -11466,7 +11547,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -11486,7 +11567,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11510,7 +11591,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
       className="base text-input"
     >
       <label
-        className="base label input-label v50 mb-v x-main1"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -11530,6 +11611,40 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y u2 pb-u"
+  >
+    <div
+      className="base text-input"
+    >
+      <label
+        className="base label v50 mb-v x-main2"
+        htmlFor="firstName"
+      >
+        What's your first name ?
+      </label>
+      <input
+        className="input input-border"
+        disabled={false}
+        id="firstName"
+        name="firstName"
+        onBlur={[Function]}
+        onChange={[Function]}
+        placeholder="First Name"
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 <form
   action="#"
@@ -11540,18 +11655,18 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
-        htmlFor="feedBack"
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
       >
         What can we improve on?
       </label>
       <textarea
         className="textarea v50 pv-v input-border"
         disabled={false}
-        name="feedBack"
+        name="feedback"
         onBlur={[Function]}
         onChange={[Function]}
         rows={3}
@@ -11563,7 +11678,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >
@@ -11574,7 +11689,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
+exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -11584,20 +11699,110 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
     className="y-background1 b-dark-y"
   >
     <div
-      className="base text-area-input x-background1 y-main1"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main1"
-        htmlFor="feedBack"
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
       >
         What can we improve on?
       </label>
       <textarea
         className="textarea v50 pv-v input-border"
         disabled={true}
-        name="feedBack"
+        name="feedback"
+        onBlur={[Function]}
+        onChange={[Function]}
+        rows={3}
+        value=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y"
+  >
+    <div
+      className="base text-area-input x-background1"
+    >
+      <label
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
+      >
+        What can we improve on?
+      </label>
+      <textarea
+        className="textarea v50 pv-v input-border"
+        disabled={false}
+        name="feedback"
+        onBlur={[Function]}
+        onChange={[Function]}
+        placeholder="Type your feedback here..."
+        rows={3}
+        value=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="y-background1 b-dark-y"
+  >
+    <div
+      className="base text-area-input x-background1"
+    >
+      <label
+        className="base label v50 mb-v x-main2"
+        htmlFor="feedback"
+      >
+        What can we improve on?
+      </label>
+      <textarea
+        className="textarea v50 pv-v input-border"
+        disabled={false}
+        name="feedback"
         onBlur={[Function]}
         onChange={[Function]}
+        placeholder="Type your feedback here..."
         rows={3}
         value=""
       />
@@ -11607,7 +11812,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
       className="debugger"
     >
       <button
-        className="base button x-main1"
+        className="base button x-main2"
         onClick={[Function]}
         type="button"
       >