feat(molecule): setup button row molecule

- setup button role molecule - setup styleguidist for the molecule - write tests for the molecule [Finishes #167279950]
andela · Jul 16, 2019 · 14e4f9d · 14e4f9d
1 parent 363cd0a
commit 14e4f9d
Show file tree

Hide file tree

Showing 10 changed files with 310 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/UI/atoms/Icon/Icon.jsx b/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,

diff --git a/src/components/UI/atoms/Icon/Icon.md b/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"
   />
 ```
 

diff --git a/src/components/UI/atoms/Image/Image.jsx b/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)),
 };
 

diff --git a/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx b/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,
     },
@@ -61,6 +69,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}
   `}
 `;
 
@@ -78,14 +88,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;
diff --git a/src/components/UI/molecules/ButtonRow/ButtonRow.jsx b/src/components/UI/molecules/ButtonRow/ButtonRow.jsx
@@ -0,0 +1,72 @@
+/* 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';
+
+const ButtonRow = ({
+  width,
+  height,
+  boxShadow,
+  altText,
+  alignItems,
+  justifyContent,
+  images,
+}) => {
+  return (
+    <FlexContainer alignItems={alignItems} justifyContent={justifyContent}>
+      {renderImages()}
+    </FlexContainer>
+  );
+
+  function renderImages() {
+    return images.map((image, index) => {
+      return (
+        <StyledLink key={index}>
+          <Image
+            imageUrl={image.url}
+            width={width}
+            height={height}
+            boxShadow={boxShadow}
+            altText={altText}
+            margin="xs"
+          />
+        </StyledLink>
+      );
+    });
+  }
+};
+
+ButtonRow.defaultProps = {
+  width: '58px',
+  height: '58px',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+ButtonRow.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
+  altText: PropTypes.string,
+  images: PropTypes.array,
+  alignItems: PropTypes.oneOf([
+    'flex-start',
+    'flex-end',
+    'center',
+    'baseline',
+    'stretch',
+  ]),
+  justifyContent: PropTypes.oneOf([
+    'flex-start',
+    'flex-end',
+    'center',
+    'space-between',
+    'space-around',
+  ]),
+};
+
+export default ButtonRow;
diff --git a/src/components/UI/molecules/ButtonRow/ButtonRow.md b/src/components/UI/molecules/ButtonRow/ButtonRow.md
@@ -0,0 +1,50 @@
+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="50px"
+  height="50px"
+  margin="xs"
+  alignItems="flex-start"
+  justifyContent="flex-start" />
+</Router>
+```
diff --git a/src/components/UI/molecules/ButtonRow/ButtonRow.spec.js b/src/components/UI/molecules/ButtonRow/ButtonRow.spec.js
@@ -0,0 +1,47 @@
+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,
+    alignItems: center,
+    justifyContent: center,
+    `);
+  });
+});
diff --git a/src/styles/variables/images.js b/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;
diff --git a/src/styles/variables/spacing.js b/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',
 };