@pareto-engineering/design-system 2.0.0-alpha.15 → 2.0.0-alpha.19

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

@@ -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-main2"
+      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-main2"
+      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-main2"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -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
@@ -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-main2"
+      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-main2"
+      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-main2"
+    className="base text-area-input form-input x-background1"
   >
     <label
-      className="base label c-y v50 mb-v x-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -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
@@ -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-main2"
+      className="base label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -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
@@ -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
@@ -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
@@ -11269,6 +11287,64 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
 </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"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 <form
   action="#"
@@ -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
@@ -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-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -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-main2"
+        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-main2"
+        className="base label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -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-main2"
+        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-main2"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main2"
-        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}
@@ -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-main2"
+      className="base text-area-input x-background1"
     >
       <label
-        className="base label c-y v50 mb-v x-main2"
-        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=""
       />

package/src/stories/f/SelectInput.stories.jsx

@@ -38,6 +38,35 @@ export const Base = () => (
   </>
 )
 
+export const RequiredSelect = () => {
+  const requiredInput = (inputValue) => {
+    let error = ''
+
+    if (!inputValue || !inputValue?.length === 0) {
+      error = 'This information is required'
+    }
+    return error
+  }
+
+  return (
+    <>
+      <SelectInput
+        validate={requiredInput}
+        name="activity"
+        label="Activity Type"
+        options={[
+          {
+            value:'', label:'Select activity type', disabled:true,
+          },
+          { value: 'review', label: 'Review' },
+          { value: 'Approve', label: 'Approve' },
+        ]}
+      />
+      <FormDebugger />
+    </>
+  )
+}
+
 export const Objects = () => (
   <>
     <SelectInput

package/src/stories/f/TextInput.stories.jsx

@@ -52,6 +52,16 @@ export const Base = () => {
   )
 }
 
+export const TextInputWithPlaceHolder = () => (
+  <div className="y-background1 b-dark-y u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      placeholder="First Name"
+    />
+  </div>
+)
+
 export const DisabledTextInput = () => (
   <div className="y-background1 b-dark-y u2 pb-u">
     <TextInput

package/src/stories/f/TextareaInput.stories.jsx

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedBack: '' }}
+        initialValues={{ feedback: '' }}
       >
         <Form>
 
@@ -31,16 +31,52 @@ export default {
 export const Base = () => (
   <div className="y-background1 b-dark-y">
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
     />
     <FormDebugger />
   </div>
 )
-export const DisabledTextareaInput = () => (
+
+export const Placeholder = () => (
+  <div className="y-background1 b-dark-y">
+    <TextareaInput
+      name="feedback"
+      label="What can we improve on?"
+      placeholder="Type your feedback here..."
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Validation = () => {
+  const validate = (value) => {
+    let errorMessage = ''
+    const isValid = value.length > 3
+
+    if (!isValid) {
+      errorMessage = 'Value should be greater than 3 characters'
+    }
+    return errorMessage
+  }
+
+  return (
+    <div className="y-background1 b-dark-y">
+      <TextareaInput
+        name="feedback"
+        label="What can we improve on?"
+        placeholder="Type your feedback here..."
+        validate={validate}
+      />
+      <FormDebugger />
+    </div>
+  )
+}
+
+export const Disabled = () => (
   <div className="y-background1 b-dark-y">
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
       disabled
     />

package/src/ui/a/Conversation/styles.scss

@@ -6,7 +6,7 @@
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
 $triangle-border-size: 15px;
@@ -147,15 +147,3 @@ $triangle-after-side:25px;
     }
   }
 }
-
-//@keyframes fadeIn {
-//  from {
-//    opacity: 0;
-//    transform: translate3d(0, 50%, 0);
-//  }
-//
-//  to {
-//    opacity: 1;
-//    transform: translate3d(0, 0, 0);
-//  }
-//}