Merge d9d9b2b into 363cd0a

package.json

@@ -11,7 +11,8 @@
       "^<core>/(.*)$": "<rootDir>/src/core/$1",
       "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1",
       "^<atoms>/(.*)$": "<rootDir>/src/components/UI/atoms/$1",
-      "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1"
+      "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1",
+      "^<helpers>/(.*)$": "<rootDir>/src/helpers/$1"
     },
     "coverageReporters": [
       "json-summary",
@@ -97,14 +98,15 @@
   "dependencies": {
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "jest-dom": "^4.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "styled-components": "^4.3.2",
+    "styled-icons": "^8.1.0",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.6",
-    "webpack-merge": "^4.2.1",
-    "styled-icons": "^8.1.0"
+    "webpack-merge": "^4.2.1"
   }
 }

src/components/BaseRoute.jsx

@@ -1,15 +1,13 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Routes from '<core>/routes';
 
 const BaseRoute = () => (
-  <Fragment>
-    <Switch>
-      {Routes.default.map(({ exact, path, component }, index) => (
-        <Route key={index} exact={exact} path={path} component={component} />
-      ))}
-    </Switch>
-  </Fragment>
+  <Switch>
+    {Routes.default.map(({ exact, path, component }, index) => (
+      <Route key={index} exact={exact} path={path} component={component} />
+    ))}
+  </Switch>
 );
 
 export default BaseRoute;

src/components/UI/atoms/Icon/Icon.jsx

@@ -63,7 +63,7 @@ Icon.defaultProps = {
   color: 'primary',
 };
 
-Icon.Container = styled.svg`
+Icon.Container = styled.div`
 ${({
     color,
     height,

src/components/UI/atoms/InputField/InputField.jsx

@@ -37,6 +37,7 @@ const InputField = ({
   backgroundColor,
   inputWidth,
   borderRadius,
+  id,
 }) => (
   <InputField.Container
     type={type}
@@ -52,6 +53,7 @@ const InputField = ({
     backgroundColor={backgroundColor}
     inputWidth={inputWidth}
     borderRadius={borderRadius}
+    id={id}
   />
 );
 
@@ -69,6 +71,7 @@ InputField.propTypes = {
   fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
   inputWidth: PropTypes.oneOf(Object.keys(width)),
   borderRadius: PropTypes.oneOf(Object.keys(themeBorderRadius)),
+  id: PropTypes.number,
 };
 
 InputField.defaultProps = {

src/components/UI/atoms/Text/Text.jsx

@@ -91,8 +91,21 @@ Text.Container = styled.span`
     padding: ${theme.spacing[padding] || '0'};
     font-size: ${theme.fontSizes[fontSize]};
     font-weight: ${theme.fontWeights[fontWeight]};
-    font-family: ${content === 'true' && 'Inknut Antiqua'};
+    font-family: ${content === 'true' && 'Roboto'};
     text-transform: ${textTransform};
+
+    @media ${theme.device.mobileS} {
+      font-size: 1.3rem;
+    }
+    @media ${theme.device.mobileM} {
+      font-size: 1.3rem;
+    }
+    @media ${theme.device.mobileL} {
+      font-size: 1.3rem;
+    }
+    @media ${theme.device.tablet} {
+      font-size: 1.3rem;
+    }
 `}
 `;
 export default Text;

src/components/UI/atoms/Title/Title.jsx

@@ -68,6 +68,20 @@ Title.Container = styled.span`
     padding-bottom: ${theme.spacing[paddingBottom]};
     font-size: ${theme.fontSizes[fontSize]};
     font-weight: ${theme.fontWeights.bold}
+
+    @media ${theme.device.mobileS} {
+      font-size: 1.8rem;
+    }
+    @media ${theme.device.mobileM} {
+      font-size: 1.8rem;
+    }
+    @media ${theme.device.mobileL} {
+      font-size: 1.8rem;
+    }
+    @media ${theme.device.tablet} {
+      font-size: 1.8rem;
+    }
+
 `}
 `;
 export default Title;

src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import theme from '<variables>/mainTheme';
 
-
 /**
  * @description - Container Component
  *
@@ -27,6 +26,9 @@ const FlexContainer = ({
   borderColor,
   borderRadius,
   boxShadow,
+  flexContent,
+  containerWidth,
+  alignItems,
 }) => (
   <FlexContainer.Container
     margin={margin}
@@ -36,6 +38,9 @@ const FlexContainer = ({
     borderColor={borderColor}
     borderRadius={borderRadius}
     boxShadow={boxShadow}
+    flexContent={flexContent}
+    containerWidth={containerWidth}
+    alignItems={alignItems}
   >
     {children}
   </FlexContainer.Container>
@@ -51,8 +56,16 @@ FlexContainer.Container = styled.div`
     backgroundColor,
     borderColor,
     theme: {
-      spacing, backgroundColors, borderColors, boxShadows,
+      spacing,
+      backgroundColors,
+      borderColors,
+      boxShadows,
+      justifyContent,
+      width,
     },
+    flexContent,
+    containerWidth,
+    alignItems,
   }) => `
     display: ${display};
     background-color: ${backgroundColors[backgroundColor]};
@@ -61,6 +74,9 @@ FlexContainer.Container = styled.div`
     border-radius: ${spacing[borderRadius]};
     box-shadow: ${boxShadows[boxShadow]};
     border: 1px solid ${borderColors[borderColor] || 'transparent'};
+    justify-content: ${justifyContent[flexContent]};
+    width: ${width[containerWidth]}
+    align-items: ${justifyContent[alignItems]};
   `}
 `;
 
@@ -74,7 +90,7 @@ FlexContainer.defaultProps = {
 };
 
 const {
-  spacing, backgroundColors, borderColors, boxShadows,
+  spacing, backgroundColors, borderColors, boxShadows, width, justifyContent,
 } = theme;
 
 FlexContainer.propTypes = {
@@ -86,6 +102,9 @@ FlexContainer.propTypes = {
   borderColor: PropTypes.oneOf(Object.keys(borderColors)),
   borderRadius: PropTypes.oneOf(Object.keys(spacing)),
   boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
+  flexContent: PropTypes.oneOf(Object.keys(justifyContent)),
+  containerWidth: PropTypes.oneOf(Object.keys(width)),
+  alignItems: PropTypes.oneOf(Object.keys(justifyContent)),
 };
 
 export default FlexContainer;

src/components/UI/molecules/Headers/HeaderContent.jsx

@@ -0,0 +1,20 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+
+const HeaderContent = ({ component }) => {
+  return (
+    <FlexContainer
+      padding="zero"
+      flexContent="flexEnd"
+      containerWidth="searchBarWidth"
+      alignItems="flexEnd"
+    >
+      <Fragment>{component.map(items => items)}</Fragment>
+    </FlexContainer>
+  );
+};
+HeaderContent.propTypes = {
+  component: PropTypes.array.isRequired,
+};
+export default HeaderContent;