Merge 559f1e4 into 6338e32

src/components/UI/atoms/Icon/Icon.md

@@ -12,7 +12,7 @@ Icon with all attributes
   color="black"
   display="block"
   margin="md"
-  icon="starEmpty"
+  iconName="starEmpty"
   />
 ```
 
@@ -28,7 +28,7 @@ Icon with color
 ```jsx
 <Icon
   color="gold"
-  icon="starFull"
+  iconName="starFull"
   />
 ```
 

src/components/UI/atoms/Image/Image.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { borderRadius } from '<variables>/border';
 import { boxShadows } from '<variables>/shadows';
 import { borderColors } from '<variables>/colorPalette';
+import spacing from '<variables>/spacing';
 
 /**
  * @description - Image Component
@@ -28,6 +29,7 @@ const Image = (
     boxShadow,
     borderRadiusType,
     borderColor,
+    margin,
   },
 ) => {
   return <Image.Container
@@ -39,6 +41,7 @@ const Image = (
     boxShadow={boxShadow}
     borderRadiusType={borderRadiusType}
     borderColor={borderColor}
+    margin={margin}
   />;
 };
 
@@ -50,6 +53,7 @@ ${({
     boxShadow,
     borderRadiusType,
     borderColor,
+    margin,
     theme,
   }) => {
     return `
@@ -58,6 +62,7 @@ ${({
   box-shadow:${theme.boxShadows[boxShadow]};
   border: ${`1px solid ${theme.borderColors[borderColor]}`};
   border-radius:${theme.borderRadius[borderRadiusType]};
+  margin: ${theme.spacing[margin]}
   `;
   }}`;
 
@@ -69,6 +74,7 @@ Image.propTypes = {
   height: PropTypes.string,
   boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
   borderColor: PropTypes.oneOf(Object.keys(borderColors)),
+  margin: PropTypes.oneOf(Object.keys(spacing)),
   borderRadiusType: PropTypes.oneOf(Object.keys(borderRadius)),
 };
 

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

@@ -15,6 +15,8 @@ import theme from '<variables>/mainTheme';
  * @prop {string} borderColor - border color
  * @prop {string} borderRadius - add border radius
  * @prop {string} boxShadow - boxShadow
+ * @prop {string} alignItems - alignItems
+ * @prop {string} justifyContent - justifyContent
  *
  * @return {component} FlexContainer
  */
@@ -27,6 +29,8 @@ const FlexContainer = ({
   borderColor,
   borderRadius,
   boxShadow,
+  alignItems,
+  justifyContent,
 }) => (
   <FlexContainer.Container
     margin={margin}
@@ -36,6 +40,8 @@ const FlexContainer = ({
     borderColor={borderColor}
     borderRadius={borderRadius}
     boxShadow={boxShadow}
+    alignItems={alignItems}
+    justifyContent={justifyContent}
   >
     {children}
   </FlexContainer.Container>
@@ -50,6 +56,8 @@ FlexContainer.Container = styled.div`
     boxShadow,
     backgroundColor,
     borderColor,
+    alignItems,
+    justifyContent,
     theme: {
       spacing, backgroundColors, borderColors, boxShadows,
     },
@@ -62,6 +70,8 @@ FlexContainer.Container = styled.div`
     border-radius: ${spacing[borderRadius]};
     box-shadow: ${boxShadows[boxShadow]};
     border: 1px solid ${borderColors[borderColor] || 'transparent'};
+    align-items: ${alignItems}
+    justify-content: ${justifyContent}
   `}
 `;
 
@@ -79,14 +89,18 @@ const {
 } = theme;
 
 FlexContainer.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   margin: PropTypes.oneOf(Object.keys(spacing)),
   padding: PropTypes.oneOf(Object.keys(spacing)),
   backgroundColor: PropTypes.oneOf(Object.keys(backgroundColors)),
   display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']),
   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']),
 };
 
 export default FlexContainer;

src/components/UI/molecules/ButtonRow/ButtonRow.jsx

@@ -0,0 +1,57 @@
+/* eslint-disable no-use-before-define */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FlexContainer from '<atoms>/layouts/FlexContainer/FlexContainer';
+import StyledLink from '<atoms>/StyledLink/StyledLink';
+import Image from '<atoms>/Image/Image';
+import { boxShadows } from '<variables>/shadows';
+
+/**
+ * @description - ButtonRow Component
+ *
+ * @prop {string} images - images
+ *
+ * @return {component} ButtonRow
+ */
+const ButtonRow = ({
+  images,
+}) => {
+  return (
+    <FlexContainer alignItems="center" justifyContent="center">
+      {renderImages()}
+    </FlexContainer>
+  );
+
+  function renderImages() {
+    return images.map((image, index) => {
+      return (
+        <StyledLink key={index}>
+          <Image
+            imageUrl={image.url}
+            width="58px"
+            height="58px"
+            boxShadow="icon"
+            altText="social media button"
+            margin="xs"
+          />
+        </StyledLink>
+      );
+    });
+  }
+};
+
+ButtonRow.propTypes = {
+  images: PropTypes.arrayOf(
+    PropTypes.shape({
+      imageUrl: PropTypes.string,
+      width: PropTypes.string,
+      height: PropTypes.string,
+      boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
+      altText: PropTypes.string,
+      margin: PropTypes.string,
+    }),
+  ),
+};
+
+export default ButtonRow;

src/components/UI/molecules/ButtonRow/ButtonRow.md

@@ -0,0 +1,51 @@
+ButtonRow Default: 
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+const images = [
+  {
+    name: 'twitter',
+    url: 'https://cdn2.downdetector.com/static/uploads/c/300/5d4ec/twitter-logo_16.png',
+  },
+  {
+    name: 'facebook',
+    url: 'https://png.pngtree.com/element_our/sm/20180301/sm_5a9794da1b10e.png',
+  },
+  {
+    name: 'google',
+    url: 'http://pluspng.com/img-png/google-logo-png-open-2000.png',
+  },
+];
+<Router>
+<ButtonRow images={images} />
+</Router>
+```
+
+ButtonRow with all props
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+const images = [
+  {
+    name: 'twitter',
+    url: 'https://cdn2.downdetector.com/static/uploads/c/300/5d4ec/twitter-logo_16.png',
+  },
+  {
+    name: 'facebook',
+    url: 'https://png.pngtree.com/element_our/sm/20180301/sm_5a9794da1b10e.png',
+  },
+  {
+    name: 'google',
+    url: 'http://pluspng.com/img-png/google-logo-png-open-2000.png',
+  },
+];
+<Router>
+<ButtonRow 
+  images={images}
+  width="58px"
+  height="58px"
+  boxShadow="icon"
+  altText="social media button"
+  margin="xs"
+ />
+</Router>
+```

src/components/UI/molecules/ButtonRow/ButtonRow.spec.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import ButtonRow from './ButtonRow';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+const images = [
+  {
+    name: 'facebook',
+    url: 'https://png.pngtree.com/element_our/sm/20180301/sm_5a9794da1b10e.png',
+  },
+  {
+    name: 'google',
+    url: 'http://pluspng.com/img-png/google-logo-png-open-2000.png',
+  },
+];
+
+const setup = (props) => {
+  const utils = render(
+    <MemoryRouter>
+      <ButtonRow images={images} {...props}/>
+    </MemoryRouter>,
+  );
+
+  return { ...utils };
+};
+
+describe('ButtonRow', () => {
+  it('should render the ButtonRow component', () => {
+    const { container } = setup();
+
+    expect(container).toBeTruthy();
+  });
+
+  it('should render the ButtonRow component with default props', () => {
+    const { container } = setup();
+
+    expect(container.lastChild).toHaveStyle(`
+    height: 58px,
+    width: 58px,
+    `);
+  });
+});

src/styles/variables/images.js

@@ -0,0 +1,17 @@
+const images = [
+  {
+    name: 'twitter',
+    // eslint-disable-next-line max-len
+    url: 'https://cdn2.downdetector.com/static/uploads/c/300/5d4ec/twitter-logo_16.png',
+  },
+  {
+    name: 'facebook',
+    url: 'https://png.pngtree.com/element_our/sm/20180301/sm_5a9794da1b10e.png',
+  },
+  {
+    name: 'google',
+    url: 'http://pluspng.com/img-png/google-logo-png-open-2000.png',
+  },
+];
+
+export default images;

src/styles/variables/spacing.js

@@ -1,9 +1,13 @@
 const spacing = {
   zero: '0rem',
   xs: '0.9rem',
+  xxs: '1.5rem',
   sm: '1.6rem',
   smd: '25.8rem',
+  smm: '2.8rem',
+  med: '3.0rem',
   md: '3.2rem',
+  mds: '3.8rem',
   xxl: '8.2rem',
 };