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

package/dist/cjs/f/fields/TextInput/TextInput.js

@@ -59,7 +59,7 @@ var TextInput = _ref => {
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
     color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({

package/dist/cjs/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

package/dist/cjs/f/fields/TextareaInput/TextareaInput.js

@@ -43,7 +43,8 @@ var TextareaInput = _ref => {
     textAreaColor,
     labelColor,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -55,16 +56,18 @@ var TextareaInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
@@ -137,12 +140,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: _propTypes.default.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main2',
   disabled: false
 };
 

package/dist/es/f/fields/TextInput/TextInput.js

@@ -42,7 +42,7 @@ const TextInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
     name: name,
     color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({

package/dist/es/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -27,7 +27,8 @@ const TextareaInput = ({
   textAreaColor,
   labelColor,
   description,
-  disabled // ...otherProps
+  disabled,
+  placeholder // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -39,16 +40,18 @@ const TextareaInput = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`, `y-${labelColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: `textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
@@ -121,12 +124,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: PropTypes.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
   textAreaColor: 'background1',
-  labelColor: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextareaInput);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.18",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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
@@ -9319,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 ?
@@ -9339,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 ?
@@ -9355,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
@@ -9508,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
@@ -11483,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 ?
@@ -11527,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
@@ -11547,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
@@ -11591,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 ?
@@ -11624,7 +11624,7 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 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 ?
@@ -11655,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}
@@ -11689,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]}
@@ -11699,18 +11699,18 @@ 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}
@@ -11733,6 +11733,96 @@ exports[`Storyshots f/fields/TextareaInput Disabled Textarea Input 1`] = `
 </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=""
+      />
+       
+    </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;

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/f/fields/TextInput/TextInput.jsx

@@ -55,8 +55,7 @@ const TextInput = ({
       // {...otherProps}
     >
       <FormLabel
-        className={[
-          'input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+        className={[oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
           .filter((e) => e)
           .join(' ')}
         name={name}

package/src/ui/f/fields/TextInput/styles.scss

@@ -9,10 +9,6 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main2);
-  }
-
   .input {
     background: var(--light-background2);
     color: var(--on-background2);

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -34,6 +34,7 @@ const TextareaInput = ({
   labelColor,
   description,
   disabled,
+  placeholder,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -52,7 +53,6 @@ const TextareaInput = ({
         componentClassName,
         userClassName,
         `x-${textAreaColor}`,
-        `y-${labelColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -60,11 +60,11 @@ const TextareaInput = ({
       // {...otherProps}
     >
       <FormLabel
-        className={[
-          'c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+        className={[labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
           .filter((e) => e)
           .join(' ')}
         name={name}
+        color={labelColor}
       >
         { label }
       </FormLabel>
@@ -72,6 +72,7 @@ const TextareaInput = ({
         id={textAreaId}
         className={`textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`}
         {...field}
+        placeholder={placeholder}
         rows={rows}
         disabled={disabled}
       >
@@ -123,36 +124,46 @@ TextareaInput.propTypes = {
    * If the text area depends on it's label's text as the default description
    */
   labelAsDescription:PropTypes.bool,
+
   /**
    * The textarea id
   */
-  textAreaId        :PropTypes.string,
+  textAreaId:PropTypes.string,
+
   /**
    * The number of rows int the text area
    */
-  rows              :PropTypes.number,
+  rows:PropTypes.number,
+
   /**
    * Text area base color
    */
-  textAreaColor     :PropTypes.string,
+  textAreaColor:PropTypes.string,
+
   /**
    * Label base color
    */
-  labelColor        :PropTypes.string,
+  labelColor:PropTypes.string,
+
   /**
    * Text area description
    */
-  description       :PropTypes.string,
+  description:PropTypes.string,
+
   /**
    * Whether the text area should be disabled
    */
-  disabled          :PropTypes.bool,
+  disabled:PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder:PropTypes.string,
 }
 
 TextareaInput.defaultProps = {
   rows         :3,
   textAreaColor:'background1',
-  labelColor   :'main2',
   disabled     :false,
 }