feat(page layout): create page layout

- create page layout - create header component - add header to page layout [Finishes #167212749]
andela · Jul 17, 2019 · 2fc5770 · 2fc5770
1 parent b09d3f5
commit 2fc5770
Show file tree

Hide file tree

Showing 33 changed files with 670 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
       "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1",
       "^<atoms>/(.*)$": "<rootDir>/src/components/UI/atoms/$1",
       "^<molecules>/(.*)$": "<rootDir>/src/components/UI/molecules/$1",
-      "^<helpers>/(.*)$": "<rootDir>/src/helpers/$1"
+      "^<helpers>/(.*)$": "<rootDir>/src/helpers/$1",
+      "^<templates>/(.*)$": "<rootDir>/src/components/templates/$1"
     },
     "coverageReporters": [
       "json-summary",
@@ -100,9 +101,11 @@
   "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-loader-spinner": "^2.3.0",
     "react-router-dom": "^5.0.1",
     "styled-components": "^4.3.2",
     "styled-icons": "^8.1.0",

diff --git a/src/components/BaseRoute.jsx b/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;
diff --git a/src/components/UI/atoms/Button/Button.jsx b/src/components/UI/atoms/Button/Button.jsx
@@ -31,7 +31,10 @@ Button.propTypes = {
   display: PropTypes.oneOf(['block', 'inline', 'inline-block']),
   buttonType: PropTypes.oneOf(['default', 'getStarted', 'submit']),
   onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
 };
 
 Button.defaultProps = {
@@ -59,15 +62,19 @@ const buttonBackground = {
 
 const buttonWidth = {
   default: '12rem',
-  getStarted: '12rem',
+  getStarted: '14rem',
+  submit: '30.2rem',
+};
+
+const buttonFade = {
+  default: '12rem',
+  getStarted: 'none',
   submit: '30.2rem',
 };
 
 Button.Container = styled.button`
   ${({
-    buttonType,
-    display,
-    theme,
+    buttonType, display, theme, marginLeft,
   }) => `
   width: ${buttonWidth[buttonType]};
   height: ${theme.height.defaultButtonHeight};
@@ -78,6 +85,7 @@ Button.Container = styled.button`
   border-radius: ${buttonRadius[buttonType]};
   border: 1px solid ${buttonBorderColor[buttonType]};
   cursor: pointer;
+  margin-left: ${theme.spacing[marginLeft]}
 
   &:hover {
     background-color: ${theme.buttonHover[buttonType]};
@@ -93,6 +101,19 @@ Button.Container = styled.button`
   &:focus {
     outline: 0;
   }
+
+  @media ${theme.device.mobileS} {
+    display: ${buttonFade[buttonType]};
+  }
+  @media ${theme.device.mobileM} {
+    display: ${buttonFade[buttonType]};
+  }
+  @media ${theme.device.mobileL} {
+    display: ${buttonFade[buttonType]};
+  }
+  @media ${theme.device.tablet} {
+    display: ${buttonFade[buttonType]};
+  }
 `}
 `;
 

diff --git a/src/components/UI/atoms/Button/Button.spec.js b/src/components/UI/atoms/Button/Button.spec.js
@@ -62,7 +62,6 @@ describe('Button', () => {
     );
 
     expect(getByText('Get Started')).toHaveStyle(`
-    width: 12rem;
     height: 3.8rem;
     display: block;
     font-size: 1.6rem;

diff --git a/src/components/UI/atoms/InputField/InputField.jsx b/src/components/UI/atoms/InputField/InputField.jsx
@@ -60,7 +60,6 @@ const InputField = ({
 
 InputField.propTypes = {
   type: PropTypes.oneOf(['number', 'email', 'password', 'text']).isRequired,
-  id: PropTypes.string,
   placeholder: PropTypes.string,
   name: PropTypes.string,
   value: PropTypes.string,
@@ -73,6 +72,7 @@ InputField.propTypes = {
   fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
   inputWidth: PropTypes.oneOf(Object.keys(width)),
   borderRadius: PropTypes.oneOf(Object.keys(themeBorderRadius)),
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 InputField.defaultProps = {

diff --git a/src/components/UI/atoms/StyledLink/StyledLink.jsx b/src/components/UI/atoms/StyledLink/StyledLink.jsx
@@ -28,6 +28,7 @@ const StyledLink = ({
   margin,
   onClick,
   children,
+  marginleft,
 }) => {
   return isExternal
     ? (<StyledLink.External
@@ -37,6 +38,7 @@ const StyledLink = ({
       fontSize={fontSize}
       margin={margin}
       onClick={onClick}
+      marginleft={marginleft}
     >
       {children}
     </StyledLink.External>)
@@ -47,6 +49,7 @@ const StyledLink = ({
         fontSize={fontSize}
         margin={margin}
         onClick={onClick}
+        marginleft={marginleft}
       >
         {children}
       </StyledLink.Internal>
@@ -64,7 +67,8 @@ StyledLink.propTypes = {
   isExternal: PropTypes.bool,
   fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
   onClick: PropTypes.func,
-  margin: PropTypes.oneOf(Object.keys(spacing)),
+  margin: PropTypes.string,
+  marginleft: PropTypes.oneOf(Object.keys(spacing)),
 };
 
 StyledLink.defaultProps = {
@@ -76,21 +80,22 @@ StyledLink.defaultProps = {
 };
 
 const linkStyle = ({
-  margin, fontSize, theme, tag,
+  margin, fontSize, theme, tag, marginleft,
 }) => `
     text-decoration: none;
     display: inline-block;
     text-align: center;
     transition: .5s border ease-in-out;
     border: solid 1px transparent;
     font-family: 'Roboto';
-    margin: ${spacing[margin]};
+    margin: ${theme.spacing[margin]};
     font-size: ${theme.fontSizes[fontSize]};
     color: ${theme.textColors.primary};
     background: ${(tag && backgroundColors.lightPink) || 'transparent'};
     padding: ${(tag && theme.spacing.xs) || '0'};
     box-shadow: ${(tag && theme.boxShadows.articleCard) || 'none'};
     width: ${(tag && theme.spacing.smd) || 'auto'};
+    margin-left: ${theme.spacing[marginleft]};
     &:visited {
       color: ${theme.textColors.primary};
     }

diff --git a/src/components/UI/atoms/Text/Text.jsx b/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' && 'Inknut Antiqua') || 'roboto'};
     text-transform: ${textTransform};
+
+    @media ${theme.device.mobileS} {
+      font-size: 1.2rem;
+    }
+    @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;
diff --git a/src/components/UI/atoms/Title/Title.jsx b/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;
diff --git a/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx b/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
  *
@@ -29,8 +28,10 @@ const FlexContainer = ({
   borderColor,
   borderRadius,
   boxShadow,
-  alignItems,
   justifyContent,
+  containerWidth,
+  alignItems,
+  flexDirection,
 }) => (
   <FlexContainer.Container
     margin={margin}
@@ -40,8 +41,10 @@ const FlexContainer = ({
     borderColor={borderColor}
     borderRadius={borderRadius}
     boxShadow={boxShadow}
-    alignItems={alignItems}
     justifyContent={justifyContent}
+    containerWidth={containerWidth}
+    alignItems={alignItems}
+    flexDirection={flexDirection}
   >
     {children}
   </FlexContainer.Container>
@@ -56,22 +59,25 @@ FlexContainer.Container = styled.div`
     boxShadow,
     backgroundColor,
     borderColor,
-    alignItems,
     justifyContent,
+    containerWidth,
+    alignItems,
+    flexDirection,
     theme: {
-      spacing, backgroundColors, borderColors, boxShadows,
+      spacing, backgroundColors, borderColors, boxShadows, width,
     },
   }) => `
     display: ${display};
-    flex-direction:column;
+    flex-direction:${flexDirection};
     background-color: ${backgroundColors[backgroundColor]};
     margin: ${spacing[margin]};
     padding: ${spacing[padding]};
     border-radius: ${spacing[borderRadius]};
     box-shadow: ${boxShadows[boxShadow]};
     border: 1px solid ${borderColors[borderColor] || 'transparent'};
-    align-items: ${alignItems}
     justify-content: ${justifyContent}
+    width: ${width[containerWidth]}
+    align-items: ${alignItems}
   `}
 `;
 
@@ -85,7 +91,7 @@ FlexContainer.defaultProps = {
 };
 
 const {
-  spacing, backgroundColors, borderColors, boxShadows,
+  spacing, backgroundColors, borderColors, boxShadows, width,
 } = theme;
 
 FlexContainer.propTypes = {
@@ -97,10 +103,22 @@ FlexContainer.propTypes = {
   borderColor: PropTypes.oneOf(Object.keys(borderColors)),
   borderRadius: PropTypes.oneOf(Object.keys(spacing)),
   boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
-  alignItems: PropTypes.oneOf(['flex-start', 'flex-end',
-    'center', 'baseline', 'stretch']),
-  justifyContent: PropTypes.oneOf(['flex-start', 'flex-end',
-    'center', 'space-between', 'space-around']),
+  containerWidth: PropTypes.oneOf(Object.keys(width)),
+  alignItems: PropTypes.oneOf([
+    'flex-start',
+    'flex-end',
+    'center',
+    'baseline',
+    'stretch',
+  ]),
+  justifyContent: PropTypes.oneOf([
+    'flex-start',
+    'flex-end',
+    'center',
+    'space-between',
+    'space-around',
+  ]),
+  flexDirection: PropTypes.oneOf(['row', 'column']),
 };
 
 export default FlexContainer;