@pareto-engineering/design-system 4.0.0-alpha.5 → 4.0.0-alpha.50

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

@@ -11,7 +11,7 @@ import { useField } from 'formik'
 
 // Local Definitions
 
-import { FormLabel, FormDescription } from '../../common'
+import { FormLabel, FormDescription, InputWrapper } from '../../common'
 
 const baseClassName = styleNames.base
 
@@ -27,17 +27,19 @@ const TextareaInput = ({
   name,
   label,
   validate,
-  labelAsDescription,
-  textAreaId,
+  color,
   rows,
   optional,
-  textAreaColor,
   labelColor,
   description,
   disabled,
   placeholder,
   autoComplete,
   resize,
+  labelSpan,
+  desktopLabelSpan,
+  inputSpan,
+  desktopInputSpan,
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -47,46 +49,46 @@ const TextareaInput = ({
   const [field] = useField({ name, validate })
 
   return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        `y-${textAreaColor}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
+    <>
       <FormLabel
-        className={[labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
-          .filter((e) => e)
-          .join(' ')}
         name={name}
         color={labelColor}
         optional={optional}
+        columnSpan={labelSpan}
+        desktopColumnSpan={desktopLabelSpan}
+      // {...otherProps}
       >
-        { label }
+        {label}
       </FormLabel>
-      <textarea
-        id={textAreaId}
-        className="textarea"
-        {...field}
-        style={{ resize }}
-        placeholder={placeholder}
-        rows={rows}
-        disabled={disabled}
-        autoComplete={autoComplete}
+      <InputWrapper
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${color}`,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={style}
+        columnSpan={inputSpan}
+        desktopColumnSpan={desktopInputSpan}
       >
-        {/* It was a dark and stormy night... */}
-      </textarea>
-
-      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
-    </div>
+        <textarea
+          id={name}
+          className="textarea"
+          {...field}
+          style={{ resize }}
+          placeholder={placeholder}
+          rows={rows}
+          disabled={disabled}
+          autoComplete={autoComplete}
+        >
+          {/* It was a dark and stormy night... */}
+        </textarea>
+        <FormDescription className="s-1" description={description} name={name} />
+      </InputWrapper>
+    </>
   )
 }
 
@@ -136,9 +138,9 @@ TextareaInput.propTypes = {
   rows:PropTypes.number,
 
   /**
-   * Text area base color
+   * Color of the text
    */
-  textAreaColor:PropTypes.string,
+  color:PropTypes.string,
 
   /**
    * Label base color
@@ -175,13 +177,33 @@ TextareaInput.propTypes = {
   * Whether the input is optional or not
   */
   optional:PropTypes.bool,
+
+  /**
+ * The number of columns the label should span
+ */
+  labelSpan:PropTypes.number,
+
+  /**
+   * The number of columns the input should span
+   */
+  inputSpan:PropTypes.number,
+
+  /**
+   * The number of columns the label should span on desktop
+   */
+  desktopLabelSpan:PropTypes.number,
+
+  /**
+   * The number of columns the input should span on desktop
+   */
+  desktopInputSpan:PropTypes.number,
 }
 
 TextareaInput.defaultProps = {
-  rows         :3,
-  textAreaColor:'background2',
-  disabled     :false,
-  resize       :'vertical',
+  rows    :10,
+  disabled:false,
+  resize  :'vertical',
+  color   :'paragraph',
 }
 
 export default memo(TextareaInput)

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

@@ -1,33 +1,50 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
-$default-padding: .5em;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: .55em .75em;
+$default-border: 1px solid var(--outline-inputs);
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-border: var(--theme-default-input-border);
+$hover-border: var(--theme-hover-input-border);
+$focus-border: var(--theme-focus-input-border);
+$default-background: var(--background-inputs);
+$disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-area-input {
-  display: flex;
-  flex-direction: column;
-
-  .textarea {
-    background: var(--soft-y);
-    border: var(--theme-border-style) var(--hard-y);
-    color: var(--on-y);
-    padding: $default-padding;
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-
-    &:not(:disabled):hover {
-      border: var(--theme-border-style) var(--soft-background4);
-    }
-
-    &:disabled {
-      background-color: var(--hard-y);
-    }
-
-    &:focus {
-      background: var(--soft-background4);
+  &.#{bem.$base}.input-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    > .textarea {
+      background: $default-background;
+      border: $default-border;
+      border-radius: $default-input-border-radius;
+      color: var(--y);
+      outline: none;
+      padding: $default-padding;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &:disabled {
+        background-color: $disabled-background;
+      }
+
+      &:not(:disabled) {
+        &:hover,
+        &:active {
+          border: $hover-border;
+        }
+
+        &:focus {
+          border: $focus-border;
+        }
+      }
     }
   }
 }

package/src/ui/f/fields/index.js

@@ -7,3 +7,5 @@ export { QueryCombobox } from './QueryCombobox'
 export { QuerySelect } from './QuerySelect'
 export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
+export { LinkInput } from './LinkInput'
+export { EditorInput } from './EditorInput'

package/src/ui/form.scss

@@ -1,6 +1,6 @@
 @use "form-reset.scss";
 
-$form-input-border-bottom: 1px solid var(--hard-background1);
+$form-input-border-bottom: 1px solid var(--hard-background-far);
 $form-input-on-focus-border-bottom: 1px solid var(--soft-main1);
 $form-input-on-error-border-bottom: 1px solid var(--error);
 $label-input-heigth-width: 100%;