Add arrow head icon

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2018-11-XX
 
+* [fix] the alignment of arrows in FieldDateRangeInput and refactoring arrow icon code. 
+  [#951](https://github.com/sharetribe/flex-template-web/pull/951)
+
 ## v2.3.0 2018-11-13
 
 * [add] Draft listing is used in EditListingWizard, ManageListingCard and ListingPage.

src/components/FieldDateRangeInput/DateRangeInput.css

@@ -97,6 +97,7 @@
   & :global(.DayPickerNavigation_button) {
     color: var(--matterColorLight);
     border: 0;
+    top: 24px;
   }
   & :global(.CalendarDay__default) {
     background-color: var(--marketplaceColor);
@@ -263,8 +264,7 @@
   }
 }
 
-.rootNextMonthIcon,
-.rootPreviousMonthIcon {
+.arrowIcon {
   stroke: var(--matterColorLight);
   fill: var(--matterColorLight);
 }

src/components/FieldDateRangeInput/DateRangeInput.js

@@ -21,8 +21,7 @@ import {
   pickerEndDateToApiDate,
 } from './DateRangeInput.helpers';
 
-import NextMonthIcon from './NextMonthIcon';
-import PreviousMonthIcon from './PreviousMonthIcon';
+import { IconArrowHead } from '../../components';
 import css from './DateRangeInput.css';
 
 export const HORIZONTAL_ORIENTATION = 'horizontal';
@@ -37,6 +36,15 @@ export const ANCHOR_LEFT = 'left';
 // value and moves on to another input within this component.
 const BLUR_TIMEOUT = 100;
 
+// IconArrowHead component might not be defined if exposed directly to the file.
+// This component is called before IconArrowHead component in components/index.js
+const PrevIcon = props => (
+  <IconArrowHead {...props} direction="left" rootClassName={css.arrowIcon} />
+);
+const NextIcon = props => (
+  <IconArrowHead {...props} direction="right" rootClassName={css.arrowIcon} />
+);
+
 // Possible configuration options of React-dates
 const defaultProps = {
   initialDates: null, // Possible initial date passed for the component
@@ -79,8 +87,8 @@ const defaultProps = {
   hideKeyboardShortcutsPanel: true,
 
   // navigation related props
-  navPrev: <PreviousMonthIcon />,
-  navNext: <NextMonthIcon />,
+  navPrev: <PrevIcon />,
+  navNext: <NextIcon />,
   onPrevMonthClick() {},
   onNextMonthClick() {},
   transitionDuration: 200, // milliseconds between next month changes etc.

src/components/IconArrowHead/IconArrowHead.css

@@ -0,0 +1,6 @@
+@import '../../marketplace.css';
+
+.root {
+  stroke: var(--matterColor);
+  fill: var(--matterColor);
+}

src/components/IconArrowHead/IconArrowHead.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { oneOf, string } from 'prop-types';
+import classNames from 'classnames';
+
+import css from './IconArrowHead.css';
+
+const DIRECTION_RIGHT = 'right';
+const DIRECTION_LEFT = 'left';
+const SIZE_BIG = 'big';
+const SIZE_SMALL = 'small';
+
+const IconArrowHead = props => {
+  const { className, rootClassName, direction, size } = props;
+  const classes = classNames(rootClassName || css.root, className);
+
+  const isRight = direction === DIRECTION_RIGHT;
+  const isLeft = direction === DIRECTION_LEFT;
+  const isBig = size === SIZE_BIG;
+  const isSmall = size === SIZE_SMALL;
+
+  if (isRight && isSmall) {
+    return (
+      <svg
+        className={classes}
+        width="9"
+        height="13"
+        viewBox="0 0 9 13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.472 6.97c.26-.26.26-.68 0-.94L2.14.694c-.263-.26-.684-.26-.944 0-.26.26-.26.683 0 .943L6.056 6.5l-4.86 4.862c-.26.26-.26.683 0 .943.26.26.68.26.943 0L7.47 6.97z"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  } else if (isLeft && isSmall) {
+    return (
+      <svg
+        className={classes}
+        width="9"
+        height="13"
+        viewBox="0 0 9 13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1.195 6.03c-.26.26-.26.68 0 .94l5.333 5.335c.262.26.683.26.943 0 .262-.26.262-.683 0-.943L2.61 6.5l4.86-4.862c.262-.26.262-.683 0-.943-.26-.26-.68-.26-.942 0L1.195 6.03z"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  } else if (isRight && isBig) {
+    return (
+      <svg
+        className={classes}
+        width="11"
+        height="15"
+        viewBox="0 0 11 15"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1.6 14c-.17 0-.34-.065-.458-.192-.214-.228-.182-.57.07-.764L8.472 7.5 1.21 1.955c-.252-.194-.284-.535-.07-.763.214-.23.592-.257.846-.064l7.8 5.958c.135.104.212.255.212.414 0 .16-.077.31-.212.414l-7.8 5.958c-.113.086-.25.128-.388.128"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  } else if (isLeft && isBig) {
+    return (
+      <svg
+        className={classes}
+        width="11"
+        height="15"
+        viewBox="0 0 11 15"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.4 1c.17 0 .34.065.458.192.214.228.182.57-.07.764L2.528 7.5l7.26 5.545c.252.194.284.535.07.763-.214.23-.592.257-.846.064l-7.8-5.958C1.077 7.81 1 7.66 1 7.5c0-.16.077-.31.212-.414l7.8-5.958C9.125 1.042 9.262 1 9.4 1"
+          fillRule="evenodd"
+        />
+      </svg>
+    );
+  }
+};
+
+IconArrowHead.defaultProps = {
+  className: null,
+  rootClassName: null,
+  size: SIZE_SMALL,
+};
+
+IconArrowHead.propTypes = {
+  className: string,
+  rootClassName: string,
+  direction: oneOf([DIRECTION_RIGHT, DIRECTION_LEFT]).isRequired,
+  size: oneOf([SIZE_BIG, SIZE_SMALL]),
+};
+
+export default IconArrowHead;

src/components/PaginationLinks/PaginationLinks.css

@@ -17,15 +17,6 @@
   /* Reset <a> tag sizing */
   line-height: 0;
   font-size: 0;
-
-  /* Color for svg icons */
-  fill: var(--marketplaceColor);
-  stroke: var(--marketplaceColor);
-
-  &:hover {
-    fill: var(--marketplaceColorDark);
-    stroke: var(--marketplaceColorDark);
-  }
 }
 
 .prev {
@@ -37,6 +28,17 @@
   padding-left: 33px;
 }
 
+.arrowIcon {
+  /* Color for svg icons */
+  fill: var(--marketplaceColor);
+  stroke: var(--marketplaceColor);
+
+  &:hover {
+    fill: var(--marketplaceColorDark);
+    stroke: var(--marketplaceColorDark);
+  }
+}
+
 .disabled,
 .disabled:hover {
   fill: var(--matterColorAnti);

src/components/PaginationLinks/PaginationLinks.js

@@ -3,12 +3,10 @@ import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import range from 'lodash/range';
-import { NamedLink } from '../../components';
+import { IconArrowHead, NamedLink } from '../../components';
 import { stringify } from '../../util/urlHelpers';
 import { propTypes } from '../../util/types';
 
-import NextPageIcon from './NextPageIcon';
-import PrevPageIcon from './PrevPageIcon';
 import css from './PaginationLinks.css';
 
 const { string, object } = PropTypes;
@@ -77,13 +75,17 @@ export const PaginationLinksComponent = props => {
       to={{ search: stringify(prevSearchParams) }}
       title={intl.formatMessage({ id: 'PaginationLinks.previous' })}
     >
-      <PrevPageIcon className={css.icon} />
+      <IconArrowHead direction="left" size="big" rootClassName={css.arrowIcon} />
     </NamedLink>
   );
 
   const prevLinkDisabled = (
-    <div className={classNames(css.disabled, css.prev)}>
-      <PrevPageIcon className={css.icon} />
+    <div className={css.prev}>
+      <IconArrowHead
+        direction="left"
+        size="big"
+        rootClassName={classNames(css.arrowIcon, css.disabled)}
+      />
     </div>
   );
 
@@ -96,13 +98,17 @@ export const PaginationLinksComponent = props => {
       to={{ search: stringify(nextSearchParams) }}
       title={intl.formatMessage({ id: 'PaginationLinks.next' })}
     >
-      <NextPageIcon className={css.icon} />
+      <IconArrowHead direction="right" size="big" rootClassName={css.arrowIcon} />
     </NamedLink>
   );
 
   const nextLinkDisabled = (
-    <div className={classNames(css.disabled, css.next)}>
-      <NextPageIcon className={css.icon} />
+    <div className={css.next}>
+      <IconArrowHead
+        direction="right"
+        size="big"
+        rootClassName={classNames(css.arrowIcon, css.disabled)}
+      />
     </div>
   );