2 files changed, 97 insertions, 0 deletions
diff --git a/frontend/src/components/fields/StringField.js b/frontend/src/components/fields/StringField.js
new file mode 100644
index 0000000..09fe24d
--- /dev/null
+++ b/frontend/src/components/fields/StringField.js
@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import './StringField.scss';
+
+const classNames = require('classnames');
+
+class StringField extends Component {
+
+    render() {
+        return (
+            <div className={classNames("field", "d-inline-block", {"field-active" : this.props.isActive},
+                {"field-invalid": this.props.isInvalid})}>
+                <div className="input-group">
+                    <div className="field-name-wrapper">
+                        <span className="field-name" id={`field-${this.props.name}`}>{this.props.name}:</span>
+                    </div>
+                    <input placeholder={this.props.defaultValue} aria-label={this.props.name}
+                           aria-describedby={`filter-${this.props.name}`} className="field-value"
+                           onChange={this.props.onValueChanged} value={this.props.value} />
+                </div>
+
+                { this.props.active &&
+                <div className="field-clear">
+                        <span className="filter-delete-icon" onClick={() => this.props.onValueChanged("")}>del</span>
+                </div>
+                }
+            </div>
+        );
+    }
+}
+
+export default StringField;
diff --git a/frontend/src/components/fields/StringField.scss b/frontend/src/components/fields/StringField.scss
new file mode 100644
index 0000000..7efac56
--- /dev/null
+++ b/frontend/src/components/fields/StringField.scss
@@ -0,0 +1,66 @@
+@import '../../colors.scss';
+
+.field {
+  margin: 0 10px;
+  position: relative;
+
+  .field-name-wrapper {
+    background-color: $color-primary-2;
+    padding: 3px 7px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .field-name {
+    font-size: 13px;
+  }
+
+  .field-value {
+    font-size: 13px;
+    padding-left: 0;
+    border-radius: 5px;
+
+    &:focus {
+      background-color: $color-primary-2;
+    }
+  }
+
+  &.field-active {
+    .field-name-wrapper {
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+    }
+
+    .field-value {
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+    }
+  }
+
+  &.field-invalid {
+    .field-name-wrapper {
+      background-color: $color-secondary-2;
+      color: $color-primary-4;
+    }
+
+    .field-value {
+      background-color: $color-secondary-2;
+      color: $color-primary-4;
+    }
+  }
+
+  .field-delete {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 10;
+    font-size: 11px;
+    letter-spacing: -0.5px;
+    color: $color-primary-2;
+    cursor: pointer;
+
+    .field-delete-icon {
+      font-weight: 800;
+    }
+  }
+}