Update Input and InputTableField

* Added error and label to input, in a fieldset
* Updated prop labels in InputTableField

components/common/Input/index.module.scss

@@ -2,13 +2,35 @@
   width: 100%;
 }
 
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-half;
+
+  &:last-child .error {
+    margin-bottom: 0;
+  }
+
+  .error {
+    color: $error;
+    font-size: $font-small;
+    padding: calc($unit / 2) ($unit * 2);
+    min-width: 100%;
+    margin-bottom: $unit;
+    width: 0;
+  }
+
   .input {
     -webkit-font-smoothing: antialiased;
     background-color: var(--input-bg);
     border: 2px solid transparent;
     border-radius: $input-corner;
     box-sizing: border-box;
+    color: var(--text-primary);
     display: block;
+    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
+    font-size: $font-regular;
     width: 100%;
 
     &:not(.wrapper) {
@@ -40,6 +62,7 @@
         border-radius: $input-corner;
         border: none;
         box-sizing: border-box;
+        color: var(--text-primary);
         padding: ($unit * 1.75) $unit-2x;
         width: 100%;
       }
@@ -62,15 +85,34 @@
       }
     }
 
-  &.number {
+    &.duration {
-    min-width: $unit-8x;
+      background: transparent;
+      border: none;
+      padding: 0;
+      width: initial;
+      height: 100%;
+      padding: calc($unit-2x - 2px) 0;
+
+      &:hover {
+        background: transparent;
       }
 
-  &.AlignRight {
+      &:focus,
+      &:focus-visible {
+        border: none;
+      }
+    }
+
+    &.number {
+      text-align: right;
+      width: $unit-8x;
+    }
+
+    &.alignRight {
       text-align: right;
     }
 
-  &.Hidden {
+    &.hidden {
       display: none;
     }
   }
@@ -78,6 +120,7 @@
   .counter {
     display: none;
   }
+}
 
 .input::placeholder,
 .input > input::placeholder {

components/common/Input/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
-
 import styles from './index.module.scss'
 
 interface Props extends React.ComponentProps<'input'> {
   bound?: boolean
+  error?: string
+  label?: string
   hide1Password?: boolean
   showCounter?: boolean
 }
@@ -16,16 +17,17 @@ const defaultProps = {
 }
 
 const Input = React.forwardRef<HTMLInputElement, Props>(function input(
-  { value, bound, showCounter, ...props }: Props,
+  { value: initialValue, bound, label, error, showCounter, ...props }: Props,
   forwardedRef
 ) {
   // States
+  const [value, setValue] = useState(initialValue)
   const [currentCount, setCurrentCount] = useState(() =>
     props.maxLength ? props.maxLength - (`${value}` || '').length : 0
   )
 
   // Classes
-  const wrapperClasses = classNames(
+  const inputWrapperClasses = classNames(
     {
       [styles.wrapper]: true,
       [styles.accessory]: showCounter,
@@ -53,12 +55,13 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
 
   // Event handlers
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setValue(event.target.value)
     if (props.onChange) props.onChange(event)
   }
 
   // Rendering
-  return (
+  const input = (
-    <div className={wrapperClasses}>
+    <div className={inputWrapperClasses}>
       <input
         {...inputProps}
         data-1p-ignore={props.hide1Password}
@@ -67,7 +70,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
         type={props.type}
         name={props.name}
         placeholder={props.placeholder}
-        value={value || ''}
+        value={value}
         onBlur={props.onBlur}
         onChange={handleChange}
         maxLength={props.maxLength}
@@ -77,6 +80,16 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function input(
       <span className={styles.counter}>{currentCount}</span>
     </div>
   )
+
+  const fieldset = (
+    <fieldset className={styles.fieldset}>
+      {label && <legend className={styles.legend}>{label}</legend>}
+      {input}
+      {error && <span className={styles.error}>{error}</span>}
+    </fieldset>
+  )
+
+  return fieldset
 })
 
 Input.defaultProps = defaultProps

components/common/InputTableField/index.tsx

@@ -44,18 +44,21 @@ const InputTableField = ({
     <TableField
       {...props}
       name={props.name || ''}
-      className={classNames({ InputField: true }, props.className)}
+      className={styles.nameField}
-      imageAlt={imageAlt}
+      image={{
-      imageClass={imageClass}
+        alt: imageAlt,
-      imageSrc={imageSrc}
+        className: imageClass,
+        src: imageSrc ? imageSrc : [],
+      }}
       label={label}
     >
       <Input
-        className="Bound"
+        className={props.className}
         placeholder={props.placeholder}
         value={inputValue ? `${inputValue}` : ''}
         step={1}
         tabIndex={props.tabIndex}
+        bound={true}
         type={props.type}
         onChange={onInputChange}
       />