diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e7a3028..33cb3c83 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/components/FieldDateRangeInput/DateRangeInput.css b/src/components/FieldDateRangeInput/DateRangeInput.css index d9972619..c78ffc46 100644 --- a/src/components/FieldDateRangeInput/DateRangeInput.css +++ b/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); } diff --git a/src/components/FieldDateRangeInput/DateRangeInput.js b/src/components/FieldDateRangeInput/DateRangeInput.js index c3541e32..7d82f3a4 100644 --- a/src/components/FieldDateRangeInput/DateRangeInput.js +++ b/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 => ( + +); +const NextIcon = props => ( + +); + // 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: , - navNext: , + navPrev: , + navNext: , onPrevMonthClick() {}, onNextMonthClick() {}, transitionDuration: 200, // milliseconds between next month changes etc. diff --git a/src/components/FieldDateRangeInput/NextMonthIcon.js b/src/components/FieldDateRangeInput/NextMonthIcon.js deleted file mode 100644 index 87df1076..00000000 --- a/src/components/FieldDateRangeInput/NextMonthIcon.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import css from './DateRangeInput.css'; - -const NextMonthIcon = props => { - const { className, rootClassName } = props; - const classes = classNames(rootClassName || css.rootNextMonthIcon, className); - - return ( - - - - ); -}; - -const { string } = PropTypes; - -NextMonthIcon.defaultProps = { - className: null, - rootClassName: null, -}; - -NextMonthIcon.propTypes = { - className: string, - rootClassName: string, -}; - -export default NextMonthIcon; diff --git a/src/components/FieldDateRangeInput/PreviousMonthIcon.js b/src/components/FieldDateRangeInput/PreviousMonthIcon.js deleted file mode 100644 index f3d79399..00000000 --- a/src/components/FieldDateRangeInput/PreviousMonthIcon.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -import css from './DateRangeInput.css'; - -const PreviousMonthIcon = props => { - const { className, rootClassName } = props; - const classes = classNames(rootClassName || css.rootPreviousMonthIcon, className); - - return ( - - - - ); -}; - -const { string } = PropTypes; - -PreviousMonthIcon.defaultProps = { - className: null, - rootClassName: null, -}; - -PreviousMonthIcon.propTypes = { - className: string, - rootClassName: string, -}; - -export default PreviousMonthIcon; diff --git a/src/components/IconArrowHead/IconArrowHead.css b/src/components/IconArrowHead/IconArrowHead.css new file mode 100644 index 00000000..37b4cf7d --- /dev/null +++ b/src/components/IconArrowHead/IconArrowHead.css @@ -0,0 +1,6 @@ +@import '../../marketplace.css'; + +.root { + stroke: var(--matterColor); + fill: var(--matterColor); +} diff --git a/src/components/IconArrowHead/IconArrowHead.js b/src/components/IconArrowHead/IconArrowHead.js new file mode 100644 index 00000000..43c721f1 --- /dev/null +++ b/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 ( + + + + ); + } else if (isLeft && isSmall) { + return ( + + + + ); + } else if (isRight && isBig) { + return ( + + + + ); + } else if (isLeft && isBig) { + return ( + + + + ); + } +}; + +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; diff --git a/src/components/PaginationLinks/NextPageIcon.js b/src/components/PaginationLinks/NextPageIcon.js deleted file mode 100644 index 47b49052..00000000 --- a/src/components/PaginationLinks/NextPageIcon.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const NextPageIcon = props => { - const { className } = props; - - return ( - - - - ); -}; - -const { string } = PropTypes; - -NextPageIcon.defaultProps = { - className: null, -}; - -NextPageIcon.propTypes = { - className: string, -}; - -export default NextPageIcon; diff --git a/src/components/PaginationLinks/PaginationLinks.css b/src/components/PaginationLinks/PaginationLinks.css index f728c735..c77e068c 100644 --- a/src/components/PaginationLinks/PaginationLinks.css +++ b/src/components/PaginationLinks/PaginationLinks.css @@ -17,15 +17,6 @@ /* Reset 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); diff --git a/src/components/PaginationLinks/PaginationLinks.js b/src/components/PaginationLinks/PaginationLinks.js index ddcb0f61..68c127ee 100644 --- a/src/components/PaginationLinks/PaginationLinks.js +++ b/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' })} > - + ); const prevLinkDisabled = ( -
- +
+
); @@ -96,13 +98,17 @@ export const PaginationLinksComponent = props => { to={{ search: stringify(nextSearchParams) }} title={intl.formatMessage({ id: 'PaginationLinks.next' })} > - + ); const nextLinkDisabled = ( -
- +
+
); diff --git a/src/components/PaginationLinks/PrevPageIcon.js b/src/components/PaginationLinks/PrevPageIcon.js deleted file mode 100644 index 2bb4f0c0..00000000 --- a/src/components/PaginationLinks/PrevPageIcon.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const PrevPageIcon = props => { - const { className } = props; - - return ( - - - - ); -}; - -const { string } = PropTypes; - -PrevPageIcon.defaultProps = { - className: null, -}; - -PrevPageIcon.propTypes = { - className: string, -}; - -export default PrevPageIcon; diff --git a/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap b/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap index ee0b6543..f602dce9 100644 --- a/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap +++ b/src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap @@ -4,11 +4,12 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = ` @@ -61,8 +63,11 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = ` } } > -
- @@ -148,11 +156,12 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl @@ -252,8 +264,11 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl } } > -
-
- +
diff --git a/src/components/index.js b/src/components/index.js index 2094d181..b6115cf9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -42,6 +42,7 @@ export { default as FieldSelect } from './FieldSelect/FieldSelect'; export { default as FieldTextInput } from './FieldTextInput/FieldTextInput'; export { default as Footer } from './Footer/Footer'; export { default as Form } from './Form/Form'; +export { default as IconArrowHead } from './IconArrowHead/IconArrowHead'; export { default as IconBannedUser } from './IconBannedUser/IconBannedUser'; export { default as IconCheckmark } from './IconCheckmark/IconCheckmark'; export { default as IconClose } from './IconClose/IconClose';