#34 Add ArrowButton common component.

.stylelintrc

@@ -12,6 +12,7 @@
   "ignoreFiles": [
     "src/assets/styles/vendor/*.css",
     "src/pages/*.js",
+    "src/components/*.js",
     "src/templates/*.js"
   ]
 }

src/components/Works/Work/Work.js

@@ -2,7 +2,10 @@ import React from 'react';
 import Lightbox from 'react-image-lightbox';
 import PropTypes from 'prop-types';
 import { navigateTo } from 'gatsby-link';
+
 import Icon from '../../common/Icon';
+import ArrowButton from '../../common/ArrowButton';
+
 import colors from '../../../assets/colors';
 import styles from './Work.module.css';
 
@@ -71,10 +74,10 @@ class Work extends React.Component {
           <span className={styles.dateText}>{data.frontmatter.date}</span>
         </div>
         <p>{data.excerpt}</p>
-        <div className={styles.readmore} onClick={() => navigateTo(route)}>
-          <span className={styles.text}>read more</span>
-          <Icon icon="arrowRight2" color={colors.text} spin={false} />
-        </div>
+        <ArrowButton
+          action={() => navigateTo(route)}
+          text="read more"
+        />
       </div>
     );
   }

src/components/Works/Work/Work.module.css

@@ -97,24 +97,3 @@
     margin-left: 1rem;
   }
 }
-
-.readmore {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--text);
-  cursor: pointer;
-
-  & .text {
-    font-size: 1.5rem;
-    margin-right: 1rem;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-
-  &:hover {
-    & .text {
-      text-decoration: underline;
-    }
-  }
-}

src/components/common/ArrowButton/ArrowButton.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from '../Icon';
+
+import colors from '../../../assets/colors';
+import styles from './ArrowButton.module.css';
+
+const Text = ({ text, direction }) => (
+  <span
+    className={`
+      ${styles.text} 
+      ${direction === 'r' ? styles.r : styles.l}
+    `}
+  >
+    {text}
+  </span>
+);
+
+const IconRenderer = ({ arrowIcon }) => (
+  <Icon icon={arrowIcon} color={colors.text} spin={false} />
+);
+
+const ArrowButton = ({ action, text, direction }) => {
+  const arrowIcon = direction === 'r' ? 'arrowRight' : 'arrowLeft';
+
+  const renderButton = () => {
+    if (direction === 'r') {
+      return (
+        <React.Fragment>
+          <Text text={text} direction={direction} />
+          <IconRenderer arrowIcon={arrowIcon} />
+        </React.Fragment>
+      );
+    }
+    return (
+      <React.Fragment>
+          <IconRenderer arrowIcon={arrowIcon} />
+          <Text text={text} direction={direction} />
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <div className={styles.root} onClick={action}>
+      {renderButton()}
+    </div>
+  );
+};
+
+ArrowButton.defaultProps = {
+  direction: 'r',
+};
+
+ArrowButton.propTypes = {
+  action: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  direction: PropTypes.string,
+};
+
+export default ArrowButton;

src/components/common/ArrowButton/ArrowButton.module.css

@@ -0,0 +1,29 @@
+@import "../../../assets/styles/config.css";
+
+.root {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--text);
+  cursor: pointer;
+
+  & .text {
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    &.l {
+      margin-left: 1rem;
+    }
+
+    &.r {
+      margin-right: 1rem;
+    }
+  }
+
+  &:hover {
+    & .text {
+      text-decoration: underline;
+    }
+  }
+}

src/components/common/ArrowButton/index.js

@@ -0,0 +1 @@
+export { default } from './ArrowButton';

src/works/2018-08-01-this-new-work-will-test-the-worksingle-layout.md

@@ -1,5 +1,6 @@
 ---
 title: This new work will test the WorkSingle layout
+author: M.C. Teixeira
 date: '2018-08-01T19:15:18+01:00'
 thumbnail: /assets/img2.jpg
 heroImage: /assets/img1-thumb.jpg