maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #951 from sharetribe/addArrowHeadIcon

Browse source 
Add arrow head icon
This commit is contained in:
Jenni Nurmi 2018-11-14 16:27:45 +02:00 • committed by GitHub
commit 0abb0f7cef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 183 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -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.

4
src/components/FieldDateRangeInput/DateRangeInput.css
View file

@ -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);
}

16
src/components/FieldDateRangeInput/DateRangeInput.js
View file

@ -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.

39
src/components/FieldDateRangeInput/NextMonthIcon.js
View file

@ -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 (
<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>
);
};
const { string } = PropTypes;
NextMonthIcon.defaultProps = {
className: null,
rootClassName: null,
};
NextMonthIcon.propTypes = {
className: string,
rootClassName: string,
};
export default NextMonthIcon;

39
src/components/FieldDateRangeInput/PreviousMonthIcon.js
View file

@ -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 (
<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>
);
};
const { string } = PropTypes;
PreviousMonthIcon.defaultProps = {
className: null,
rootClassName: null,
};
PreviousMonthIcon.propTypes = {
className: string,
rootClassName: string,
};
export default PreviousMonthIcon;

6
src/components/IconArrowHead/IconArrowHead.css Normal file
View file

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

97
src/components/IconArrowHead/IconArrowHead.js Normal file
View file

@ -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;

33
src/components/PaginationLinks/NextPageIcon.js
View file

@ -1,33 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const NextPageIcon = props => {
const { className } = props;
return (
<svg
className={className}
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>
);
};
const { string } = PropTypes;
NextPageIcon.defaultProps = {
className: null,
};
NextPageIcon.propTypes = {
className: string,
};
export default NextPageIcon;

20
src/components/PaginationLinks/PaginationLinks.css
View file

@ -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);

24
src/components/PaginationLinks/PaginationLinks.js
View file

@ -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>
);

33
src/components/PaginationLinks/PrevPageIcon.js
View file

@ -1,33 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const PrevPageIcon = props => {
const { className } = props;
return (
<svg
className={className}
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>
);
};
const { string } = PropTypes;
PrevPageIcon.defaultProps = {
className: null,
};
PrevPageIcon.propTypes = {
className: string,
};
export default PrevPageIcon;

56
src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap
View file

@ -4,11 +4,12 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
<nav
className=""
>
<div
className=""
>
<PrevPageIcon
<div>
<IconArrowHead
className={null}
direction="left"
rootClassName=""
size="big"
/>
</div>
<div
@ -33,11 +34,12 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
1
</NamedLink>
</div>
<div
className=""
>
<NextPageIcon
<div>
<IconArrowHead
className={null}
direction="right"
rootClassName=""
size="big"
/>
</div>
</nav>
@ -61,8 +63,11 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}
}
>
<PrevPageIcon
<IconArrowHead
className={null}
direction="left"
rootClassName={null}
size="big"
/>
</NamedLink>
<div
@ -137,8 +142,11 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}
}
>
<NextPageIcon
<IconArrowHead
className={null}
direction="right"
rootClassName={null}
size="big"
/>
</NamedLink>
</nav>
@ -148,11 +156,12 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
<nav
className=""
>
<div
className=""
>
<PrevPageIcon
<div>
<IconArrowHead
className={null}
direction="left"
rootClassName=""
size="big"
/>
</div>
<div
@ -227,8 +236,11 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
}
}
>
<NextPageIcon
<IconArrowHead
className={null}
direction="right"
rootClassName={null}
size="big"
/>
</NamedLink>
</nav>
@ -252,8 +264,11 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
}
}
>
<PrevPageIcon
<IconArrowHead
className={null}
direction="left"
rootClassName={null}
size="big"
/>
</NamedLink>
<div
@ -314,11 +329,12 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
3
</NamedLink>
</div>
<div
className=""
>
<NextPageIcon
<div>
<IconArrowHead
className={null}
direction="right"
rootClassName=""
size="big"
/>
</div>
</nav>

1
src/components/index.js
View file

@ -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';