initial commit

src/app/atoms/input/Input.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Input.scss';
+
+import TextareaAutosize from 'react-autosize-textarea';
+
+function Input({
+  id, label, value, placeholder,
+  required, type, onChange, forwardRef,
+  resizable, minHeight, onResize, state,
+}) {
+  return (
+    <div className="input-container">
+      { label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
+      { resizable
+        ? (
+          <TextareaAutosize
+            style={{ minHeight: `${minHeight}px` }}
+            id={id}
+            className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
+            ref={forwardRef}
+            type={type}
+            placeholder={placeholder}
+            required={required}
+            defaultValue={value}
+            autoComplete="off"
+            onChange={onChange}
+            onResize={onResize}
+          />
+        ) : (
+          <input
+            ref={forwardRef}
+            id={id}
+            className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
+            type={type}
+            placeholder={placeholder}
+            required={required}
+            defaultValue={value}
+            autoComplete="off"
+            onChange={onChange}
+          />
+        )}
+    </div>
+  );
+}
+
+Input.defaultProps = {
+  id: null,
+  label: '',
+  value: '',
+  placeholder: '',
+  type: 'text',
+  required: false,
+  onChange: null,
+  forwardRef: null,
+  resizable: false,
+  minHeight: 46,
+  onResize: null,
+  state: 'normal',
+};
+
+Input.propTypes = {
+  id: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  type: PropTypes.string,
+  onChange: PropTypes.func,
+  forwardRef: PropTypes.shape({}),
+  resizable: PropTypes.bool,
+  minHeight: PropTypes.number,
+  onResize: PropTypes.func,
+  state: PropTypes.oneOf(['normal', 'success', 'error']),
+};
+
+export default Input;

src/app/atoms/input/Input.scss

@@ -0,0 +1,40 @@
+.input {
+  display: block;
+  width: 100%;
+  min-width: 0px;
+  padding: var(--sp-tight) var(--sp-normal);
+  background-color: var(--bg-surface-low);
+  color: var(--tc-surface-normal);
+  box-shadow: none;
+  border-radius: var(--bo-radius);
+  border: 1px solid var(--bg-surface-border);
+  font-size: var(--fs-b2);
+  letter-spacing: var(--ls-b2);
+  line-height: var(--lh-b2);
+
+  &__label {
+    display: inline-block;
+    margin-bottom: var(--sp-ultra-tight);
+    color: var(--tc-surface-low);
+  }
+
+  &--resizable {
+    resize: vertical !important;
+  }
+  &--success {
+    border: 1px solid var(--bg-positive);
+    box-shadow: none !important;
+  }
+  &--error {
+    border: 1px solid var(--bg-danger);
+    box-shadow: none !important;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--bs-primary-border);
+  }
+  &::placeholder {
+    color: var(--tc-surface-low)
+  }
+}