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

Add more directions to IconArrowHead

Browse source
This commit is contained in:
Janne Koivistoinen 2019-08-19 18:41:18 +03:00 • committed by Jenni Nurmi
parent 262bfba6b3
commit c1bfed5e7d
1 changed files with 65 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/components/IconArrowHead/IconArrowHead.js
View file

@ -6,6 +6,8 @@ import css from './IconArrowHead.css';
const DIRECTION_RIGHT = 'right';
const DIRECTION_LEFT = 'left';
const DIRECTION_DOWN = 'down';
const DIRECTION_UP = 'up';
const SIZE_BIG = 'big';
const SIZE_SMALL = 'small';
@ -15,6 +17,8 @@ const IconArrowHead = props => {
const isRight = direction === DIRECTION_RIGHT;
const isLeft = direction === DIRECTION_LEFT;
const isDown = direction === DIRECTION_DOWN;
const isUp = direction === DIRECTION_UP;
const isBig = size === SIZE_BIG;
const isSmall = size === SIZE_SMALL;
@ -48,6 +52,36 @@ const IconArrowHead = props => {
/>
</svg>
);
} else if (isDown && isSmall) {
return (
<svg
className={classes}
width="13"
height="9"
viewBox="0 0 13 9"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.03 6.805c.26.26.68.26.94 0l5.335-5.333a.668.668 0 0 0-.943-.943L6.5 5.39 1.638.53a.666.666 0 1 0-.943.942L6.03 6.805z"
fillRule="evenodd"
/>
</svg>
);
} else if (isUp && isSmall) {
return (
<svg
className={classes}
width="13"
height="9"
viewBox="0 0 13 9"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.97.195a.664.664 0 0 0-.94 0L.695 5.528a.668.668 0 0 0 .943.943L6.5 1.61l4.862 4.86a.666.666 0 1 0 .943-.942L6.97.195z"
fillRule="evenodd"
/>
</svg>
);
} else if (isRight && isBig) {
return (
<svg
@ -78,6 +112,36 @@ const IconArrowHead = props => {
/>
</svg>
);
} else if (isDown && isBig) {
return (
<svg
className={classes}
width="15"
height="11"
viewBox="0 0 15 11"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M.5 1.1C.5.93.565.76.692.642a.508.508 0 0 1 .764.07L7 7.972 12.545.71a.506.506 0 0 1 .763-.07c.23.214.257.592.064.846l-5.958 7.8A.524.524 0 0 1 7 9.498a.522.522 0 0 1-.414-.212l-5.958-7.8A.638.638 0 0 1 .5 1.098"
fillRule="evenodd"
/>
</svg>
);
} else if (isUp && isBig) {
return (
<svg
className={classes}
width="15"
height="11"
viewBox="0 0 15 11"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5 8.9c0 .17-.065.34-.192.458a.508.508 0 0 1-.764-.07L7 2.028 1.455 9.29a.506.506 0 0 1-.763.07.644.644 0 0 1-.064-.846l5.958-7.8A.524.524 0 0 1 7 .502c.16 0 .31.077.414.212l5.958 7.8c.086.113.128.25.128.388"
fillRule="evenodd"
/>
</svg>
);
}
};
@ -90,7 +154,7 @@ IconArrowHead.defaultProps = {
IconArrowHead.propTypes = {
className: string,
rootClassName: string,
direction: oneOf([DIRECTION_RIGHT, DIRECTION_LEFT]).isRequired,
direction: oneOf([DIRECTION_RIGHT, DIRECTION_LEFT, DIRECTION_DOWN, DIRECTION_UP]).isRequired,
size: oneOf([SIZE_BIG, SIZE_SMALL]),
};