feat: Study List Filter (#1504)

* Inital changes for study list filters

* Style updates on filter

* Small style changes on filter

* Style changes updates on Input and Label and finish fitler

* Refactor on study list filter

* Remove not used callbackFunction

* Small style change

* Adding underline on Learn more link

* Make sure does not show sortable if have no results

* Some style polish

* Fixing margin on filter

* Adding inherit as color on buttons

* Adding inherit on learn more button color

* Addin border with opacity

platform/ui/src/components/Input/Input.jsx

@@ -1,50 +1,54 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Label from '../Label';
+import classnames from 'classnames';
 
-const Input = ({
-  label,
-  containerClassName = '',
-  labelClassName = '',
-  className = '',
-  transparent = defaults.transparent,
-  ...rest
-}) => {
-  const getClasses = () => {
-    const classes = [];
-
-    classes.push(transparentClasses[transparent]);
-
-    return classes.join(' ');
-  };
-
-  const input = (
-    <input
-      className={`shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-gray-700 hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none ${getClasses()} ${className}`}
-      id="id"
-      {...rest}
-    />
-  );
-
-  const renderElement = () => {
-    return label ? (
-      <Label className={labelClassName} text="Label">
-        {input}
-      </Label>
-    ) : (
-      input
-    );
-  };
-
-  return <div className={`flex ${containerClassName}`}>{renderElement()}</div>;
-};
-
-const defaults = {
-  transparent: true,
-};
+const baseInputClasses =
+  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-gray-700 hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
 
 const transparentClasses = {
   true: 'bg-transparent',
   false: '',
 };
 
+const Input = ({
+  label,
+  containerClassName = '',
+  labelClassName = '',
+  className = '',
+  transparent = true,
+  type = 'text',
+  value,
+  onChange,
+  ...otherProps
+}) => {
+  return (
+    <div className={classnames('flex flex-col flex-1', containerClassName)}>
+      <Label className={labelClassName} text={label}></Label>
+      <input
+        className={classnames(
+          className,
+          baseInputClasses,
+          transparentClasses[transparent]
+        )}
+        type={type}
+        value={value}
+        onChange={onChange}
+        {...otherProps}
+      />
+    </div>
+  );
+};
+
+Input.propTypes = {
+  label: PropTypes.string,
+  containerClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
+  className: PropTypes.string,
+  transparent: PropTypes.bool,
+  type: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+};
+
 export default Input;