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/Button/Button.jsx

@@ -61,7 +61,7 @@ const variantClasses = {
 };
 
 const sizeClasses = {
-  small: 'py-2 px-2 text-base',
+  small: 'py-2 px-2 text-sm',
   medium: 'py-2 px-2 text-lg',
   large: 'py-2 px-6 text-xl',
 };
@@ -97,12 +97,13 @@ const Button = ({
   return (
     <button
       className={classnames(
+        className,
         baseClasses,
         variantClasses[variant][color],
         radiusClasses[radius],
         sizeClasses[size],
-        disabledClasses[disabled],
-        className
+        fullWidthClasses[fullWidth],
+        disabledClasses[disabled]
       )}
       type={type}
       {...rest}
@@ -119,7 +120,14 @@ Button.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   radius: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
+  color: PropTypes.oneOf([
+    'default',
+    'primary',
+    'secondary',
+    'white',
+    'inherit',
+  ]),
+  fullWidth: PropTypes.bool,
   disabled: PropTypes.bool,
   type: PropTypes.string,
   startIcon: PropTypes.node,

platform/ui/src/components/IconButton/IconButton.jsx

@@ -127,7 +127,13 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'white']),
+  color: PropTypes.oneOf([
+    'default',
+    'primary',
+    'secondary',
+    'white',
+    'inherit',
+  ]),
   fullWidth: PropTypes.bool,
   disabled: PropTypes.bool,
   type: PropTypes.string,

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;

platform/ui/src/components/Label/Label.jsx

@@ -1,32 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
-const Label = ({ children, spacing, className, text, ...rest }) => {
-  const baseClasses = 'flex flex-1 flex-col text-gray-700 text-sm font-bold';
-
-  const getClasses = () => {
-    const classes = [];
-    classes.push(baseClasses);
-    classes.push(className);
-    return classes.join(' ');
-  };
+const Label = ({ children, className, text, ...rest }) => {
+  const baseClasses = '';
 
   return (
-    <label className={getClasses()} {...rest}>
+    <label className={classnames(baseClasses, className)} {...rest}>
       {text}
       {children}
     </label>
   );
 };
 
-const spacing = {
-  small: 'mb-1',
-  medium: 'mb-2',
-  large: 'mb-3',
-};
-
-Label.defaultProps = {};
-
 Label.propTypes = {
   children: PropTypes.node,
 };

platform/ui/src/components/index.js

@@ -2,8 +2,18 @@ import Button from './Button';
 import ButtonGroup from './ButtonGroup';
 import Icon from './Icon';
 import IconButton from './IconButton';
+import Input from './Input';
 import Svg from './Svg';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
 
-export { Button, ButtonGroup, Icon, IconButton, Svg, ThemeWrapper, Typography };
+export {
+  Button,
+  ButtonGroup,
+  Icon,
+  IconButton,
+  Input,
+  Svg,
+  ThemeWrapper,
+  Typography,
+};