feat(article): create article row

- Implement Article Card Row - Implement Article card transition and animation - Add style guide - Write Test - Add component to homepage [Finishes #167531845]
andela · Jul 26, 2019 · d64ad7f · d64ad7f
1 parent eda69c9
commit d64ad7f
Show file tree

Hide file tree

Showing 35 changed files with 898 additions and 83 deletions.
diff --git a/src/components/UI/atoms/Icon/Icon.jsx b/src/components/UI/atoms/Icon/Icon.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import * as iconSource from 'styled-icons/icomoon';
-import { iconSizes, icons } from '<variables>/icons';
+import { iconSizes, iconNames } from '<variables>/icons';
 import { iconColors } from '<variables>/colorPalette';
 import spacing from '<variables>/spacing';
 
@@ -31,8 +31,9 @@ const Icon = ({
   iconName,
   marginTop,
   marginLeft,
+  paddingBottom,
 }) => {
-  const IconType = iconSource[icons[iconName]];
+  const IconType = iconSource[iconNames[iconName]];
   return (
     <Icon.Container
       data-testid={id}
@@ -44,6 +45,7 @@ const Icon = ({
       iconName={iconName}
       marginTop={marginTop}
       marginLeft={marginLeft}
+      paddingBottom={paddingBottom}
     >
       <IconType />
     </Icon.Container>);
@@ -53,13 +55,14 @@ Icon.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   color: PropTypes.oneOf(Object.keys(iconColors)),
-  iconName: PropTypes.oneOf(Object.keys(icons)).isRequired,
+  iconName: PropTypes.oneOf(Object.keys(iconNames)).isRequired,
   height: PropTypes.oneOf(Object.keys(iconSizes)),
   width: PropTypes.oneOf(Object.keys(iconSizes)),
   display: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']),
   margin: PropTypes.oneOf(Object.keys(spacing)),
   marginTop: PropTypes.oneOf(Object.keys(spacing)),
   marginLeft: PropTypes.oneOf(Object.keys(spacing)),
+  paddingBottom: PropTypes.oneOf(Object.keys(spacing)),
 };
 
 Icon.defaultProps = {
@@ -69,6 +72,7 @@ Icon.defaultProps = {
   display: 'block',
   margin: 'md',
   color: 'primary',
+  paddingBottom: 'zero',
 };
 
 Icon.Container = styled.div`
@@ -80,6 +84,7 @@ ${({
     margin,
     marginTop,
     marginLeft,
+    paddingBottom,
     theme,
   }) => `
 color: ${theme.iconColors[color]};
@@ -89,6 +94,7 @@ display: ${display};
 margin: ${theme.spacing[margin]};
 margin-top: ${theme.spacing[marginTop]};
 margin-left: ${theme.spacing[marginLeft]};
+padding-bottom: ${theme.spacing[paddingBottom]};
 `}
 `;
 

diff --git a/src/components/UI/atoms/StyledLink/StyledLink.jsx b/src/components/UI/atoms/StyledLink/StyledLink.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { fontSizes } from '<variables>/fonts';
-import { backgroundColors } from '<variables>/colorPalette';
+import { backgroundColors, textColors } from '<variables>/colorPalette';
 import spacing from '<variables>/spacing';
 
 /**
@@ -29,27 +29,33 @@ const StyledLink = ({
   onClick,
   children,
   marginleft,
+  color,
+  display,
+  textalign,
 }) => {
+  const props = {
+    tag,
+    fontSize,
+    margin,
+    onClick,
+    marginleft,
+    color,
+    display,
+    textalign,
+  };
+
   return isExternal
     ? (<StyledLink.External
       target='_blank'
       href={to}
-      tag={tag}
-      fontSize={fontSize}
-      margin={margin}
-      onClick={onClick}
-      marginleft={marginleft}
+      {...props}
     >
       {children}
     </StyledLink.External>)
     : (
       <StyledLink.Internal
         to={to}
-        tag={tag}
-        fontSize={fontSize}
-        margin={margin}
-        onClick={onClick}
-        marginleft={marginleft}
+        {...props}
       >
         {children}
       </StyledLink.Internal>
@@ -69,6 +75,9 @@ StyledLink.propTypes = {
   onClick: PropTypes.func,
   margin: PropTypes.string,
   marginleft: PropTypes.oneOf(Object.keys(spacing)),
+  color: PropTypes.oneOf(Object.keys(textColors)),
+  display: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']),
+  textalign: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
 };
 
 StyledLink.defaultProps = {
@@ -77,20 +86,24 @@ StyledLink.defaultProps = {
   to: '#',
   isExternal: false,
   backgroundColor: 'transparent',
+  display: 'inline-block',
+  color: 'primary',
+  textalign: 'center',
 };
 
 const linkStyle = ({
-  margin, fontSize, theme, tag, marginleft,
+  margin, fontSize, theme, tag,
+  marginleft, color, display, textalign,
 }) => `
     text-decoration: none;
-    display: inline-block;
-    text-align: center;
+    display: ${display};
+    text-align: ${textalign};
     transition: .5s border ease-in-out;
     border: solid 1px transparent;
     font-family: 'Roboto';
     margin: ${theme.spacing[margin]};
     font-size: ${theme.fontSizes[fontSize]};
-    color: ${theme.textColors.primary};
+    color: ${theme.textColors[color]};
     background: ${(tag && backgroundColors.lightPink) || 'transparent'};
     padding: ${(tag && theme.spacing.xs) || '0'};
     box-shadow: ${(tag && theme.boxShadows.articleCard) || 'none'};
@@ -101,7 +114,7 @@ const linkStyle = ({
       background-color: ${(tag && theme.backgroundColors.activePink)};
     };
     &:visited {
-      color: ${theme.textColors.primary};
+      color: ${theme.textColors[color]};
     }
     &:hover {
       color: ${(tag && theme.textColors.hoverPink)};

diff --git a/src/components/UI/atoms/Text/Text.jsx b/src/components/UI/atoms/Text/Text.jsx
@@ -35,6 +35,9 @@ const Text = ({
   children,
   letterSpacing,
   paddingTop,
+  hasLineHeight,
+  marginBottom,
+  hasLetterSpacing,
 }) => (
   <Text.Container
     fontSize={fontSize}
@@ -48,6 +51,9 @@ const Text = ({
     letterSpacing={letterSpacing}
     paddingTop={paddingTop}
     lineHeight={lineHeight}
+    hasLineHeight={hasLineHeight}
+    marginBottom={marginBottom}
+    hasLetterSpacing={hasLetterSpacing}
   >
     {children}
   </Text.Container>
@@ -72,6 +78,9 @@ Text.propTypes = {
   fontWeight: PropTypes.oneOf(Object.keys(fontWeights)),
   letterSpacing: PropTypes.oneOf(Object.keys(spacing)),
   paddingTop: PropTypes.oneOf(Object.keys(spacing)),
+  hasLineHeight: PropTypes.bool,
+  hasLetterSpacing: PropTypes.bool,
+  marginBottom: PropTypes.oneOf(Object.keys(spacing)),
 };
 
 Text.defaultProps = {
@@ -98,6 +107,7 @@ Text.Container = styled.span`
     theme,
     letterSpacing,
     paddingTop,
+    marginBottom,
   }) => `
     text-align: ${textAlign};
     line-height: ${theme.lineHeights[lineHeight]};
@@ -107,6 +117,7 @@ Text.Container = styled.span`
     font-size: ${theme.fontSizes[fontSize]};
     font-weight: ${theme.fontWeights[fontWeight]};
     font-family: ${(content && 'Inknut Antiqua') || 'Roboto'};
+    margin-bottom: ${theme.spacing[marginBottom]};
     text-transform: ${textTransform};
     letter-spacing: ${theme.spacing[letterSpacing]};
     padding-top: ${theme.spacing[paddingTop] || '0'};

diff --git a/src/components/UI/atoms/Title/Title.jsx b/src/components/UI/atoms/Title/Title.jsx
@@ -27,6 +27,10 @@ const Title = ({
   paddingTop,
   content,
   children,
+  marginLeft,
+  marginRight,
+  marginBottom,
+  hasBottomBorder,
 }) => (
   <Title.Container
     fontSize={fontSize}
@@ -36,6 +40,10 @@ const Title = ({
     paddingBottom={paddingBottom}
     paddingTop={paddingTop}
     content={content}
+    hasBottomBorder={hasBottomBorder}
+    marginLeft={marginLeft}
+    marginRight={marginRight}
+    marginBottom={marginBottom}
   >
     {children}
   </Title.Container>
@@ -51,6 +59,10 @@ Title.propTypes = {
   content: PropTypes.oneOf(['true', 'false']),
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     .isRequired,
+  hasBottomBorder: PropTypes.bool,
+  marginLeft: PropTypes.oneOf(Object.keys(spacing)),
+  marginRight: PropTypes.oneOf(Object.keys(spacing)),
+  marginBottom: PropTypes.oneOf(Object.keys(spacing)),
 };
 
 Title.defaultProps = {
@@ -67,17 +79,25 @@ Title.Container = styled.span`
     display,
     paddingBottom,
     paddingTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
     content,
+    hasBottomBorder,
     theme,
   }) => `
     display: ${display};
     text-align: ${textAlign};
     color: ${theme.textColors[color]};
+    padding-top: ${theme.spacing[paddingTop]};
     padding-bottom: ${theme.spacing[paddingBottom]};
-    padding-top:${theme.spacing[paddingTop]};
+    margin-bottom: ${theme.spacing[marginBottom]};
+    margin-left: ${theme.spacing[marginLeft]};
+    margin-right: ${theme.spacing[marginRight]};
+    font-family: ${(content && 'Inknut Antiqua') || 'Roboto'};
     font-size: ${theme.fontSizes[fontSize]};
-    font-family: ${(content && 'Inknut Antiqua') || 'roboto'};
-    font-weight: ${theme.fontWeights.bold}
+    font-weight: ${theme.fontWeights.bold};
+    border-bottom: ${hasBottomBorder ? '2px solid #B02091' : 'none'};
 
     @media ${theme.device.mobileS} {
       font-size: 1.8rem;

diff --git a/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx b/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx
@@ -38,6 +38,7 @@ const FlexContainer = ({
   containerWidth,
   alignItems,
   flexDirection,
+  overflowX,
 }) => (
   <FlexContainer.Container
     margin={margin}
@@ -54,6 +55,7 @@ const FlexContainer = ({
     alignItems={alignItems}
     flexDirection={flexDirection}
     paddingTop={paddingTop}
+    overflowX={overflowX}
   >
     {children}
   </FlexContainer.Container>
@@ -76,6 +78,7 @@ FlexContainer.Container = styled.div`
     alignItems,
     borderWidth,
     flexDirection,
+    overflowX,
     theme: {
       spacing, backgroundColors, borderColors, boxShadows,
     },
@@ -95,6 +98,7 @@ FlexContainer.Container = styled.div`
     width: ${width[containerWidth]};
     align-items: ${alignItems};
     height: ${height};
+    overflow-x: ${overflowX}
 
     @media ${theme.device.mobileS} {
       padding: ${spacing[padding] === '0rem' ? spacing[padding] : spacing.sm};
@@ -137,6 +141,7 @@ FlexContainer.propTypes = {
   borderRadius: PropTypes.oneOf(Object.keys(spacing)),
   boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
   containerWidth: PropTypes.oneOf(Object.keys(width)),
+  overflowX: PropTypes.oneOf(['auto', 'hidden', 'scroll', 'visible']),
   alignItems: PropTypes.oneOf([
     'flex-start',
     'flex-end',

diff --git a/src/components/UI/molecules/ArticleCard/ArticleCard.jsx b/src/components/UI/molecules/ArticleCard/ArticleCard.jsx
@@ -37,7 +37,7 @@ const ArticleCard = ({
   function renderDivider() {
     return (
       <Divider
-        width="mds"
+        width="xxl"
       />
     );
   }
@@ -56,7 +56,7 @@ const ArticleCard = ({
     return (
       <Text
         textAlign = 'center'
-        fontSize = 'smaller'
+        fontSize = 'sm'
         color = 'darkGrey'
         content = 'true'
         lineHeight = 'medium'
@@ -74,6 +74,7 @@ const ArticleCard = ({
         color = 'darkGrey'
         paddingBottom ='xs'
         paddingTop = 'sm'
+        content='true'
       >
         {title}
       </Title>
@@ -84,9 +85,10 @@ const ArticleCard = ({
     return (
       <Title
         textAlign = 'center'
-        fontSize = 'small'
+        fontSize = 'sm'
         color = 'darkGrey'
         paddingBottom ='xxxs'
+        content='true'
       >
         {author}
       </Title>
@@ -105,7 +107,12 @@ const ArticleCard = ({
 
 ArticleCard.Container = styled.div`
   text-align: center;
-  width: 31.4rem;
+  width: 35.4rem;
+  transition: .5s all linear;
+
+  &:hover {
+    transform: scale(1.05);
+  }
 `;
 
 ArticleCard.propTypes = {