vcc-ui/_src/components/arrow/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import PropTypes from 'prop-types';
import React from 'react';
import { useFela } from 'react-fela';
import { Inline } from '../inline';
import { getThemeStyle } from '../../get-theme-style';

const ArrowDown = ({ extend, themeName }) =>
  themeName === 'polestar' ? (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
    >
      <path d="M7.778 13.214L14 6.93l-.778-.785-5.672 5.728V0h-1.1v11.873L.778 6.145 0 6.93 7 14z" />
    </Inline>
  ) : (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 13 6"
    >
      <path d="M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z" />
    </Inline>
  );

const ArrowUp = ({ extend, themeName }) =>
  themeName === 'polestar' ? (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
    >
      <path d="M7.222 1.786L1 8.07l.778.785L7.45 3.127V15h1.1V3.127l5.672 5.728L15 8.07 8 1l-.778.786z" />
    </Inline>
  ) : (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 13 6"
    >
      <path d="M6.50012725 1.86602559L1.21516521 5.5.5 4.62573225 6.50013536.5 12.5 4.6256396l-.7151756.87426061z" />
    </Inline>
  );

const ArrowLeft = ({ extend, themeName }) =>
  themeName === 'polestar' ? (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
    >
      <path d="M1.354 9.046L8.308 16l.861-.862L2.831 8.8H16V7.57H2.83l6.34-6.34-.862-.922L.492 8.185z" />
    </Inline>
  ) : (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 5 12"
    >
      <path d="M1.36602559 5.99987275L5 11.28483479 4.12573225 12 0 5.99986464 4.1256396 0l.87426061.7151756z" />
    </Inline>
  );

const ArrowRight = ({ extend, themeName }) =>
  themeName === 'polestar' ? (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 25.2 25.5"
    >
      <path d="M23.8 11.3L12.5 0l-1.4 1.4 10.3 10.3H0v2h21.4L11.1 24l1.4 1.5 12.7-12.8z" />
    </Inline>
  ) : (
    <Inline
      extend={extend}
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 5 12"
    >
      <path d="M3.63397441 6.00012725L0 .71516521.87426775 0 5 6.00013536.87436041 12l-.87426062-.7151756z" />
    </Inline>
  );

const directionResolver = (direction, isRtl) => {
  if (direction === 'right' && isRtl) {
    return 'left';
  }
  if (direction === 'left' && isRtl) {
    return 'right';
  }
  return direction;
};

const ArrowResolver = ({ direction, extend, themeName }) => {
  switch (direction) {
    case 'right':
      return <ArrowRight extend={extend} themeName={themeName} />;
    case 'left':
      return <ArrowLeft extend={extend} themeName={themeName} />;
    case 'up':
      return <ArrowUp extend={extend} themeName={themeName} />;
    case 'down':
      return <ArrowDown extend={extend} themeName={themeName} />;
  }
};

const arrowStyle = ({ size, color }) => ({
  fill: color,
  height: size,
  width: size,
  stroke: 'transparent',
  transition: 'all 0.3s ease-out',
  transitionProperty: 'transform',
});

export function Arrow({ direction = 'right', size = 10, color }) {
  const { theme } = useFela();

  const styleProps = {
    size,
    color,
  };

  return (
    <ArrowResolver
      direction={directionResolver(direction, theme.direction === 'rtl')}
      themeName={theme.name}
      extend={[
        arrowStyle(styleProps),
        getThemeStyle('arrow', theme, styleProps),
      ]}
    />
  );
}

Arrow.propTypes = {
  /** Any valid CSS color value */
  color: PropTypes.string,
  size: PropTypes.number,
  direction: PropTypes.oneOf(['up', 'down', 'right', 'left']),
};