@navinc/base-react-components/src/chevron.js

Nav's Pattern Library

import styled from 'styled-components'

import CarrotLeft from './icons/actions/carrot-left'
import PropTypes from 'prop-types'

const ChevronWrapper = styled.div`
  pointer-events: none;
`

ChevronWrapper.displayName = 'ChevronWrapper'

/**
 *
 * @param {*} props You can not access props directly. | optional | {}
 * @property {string} className
 * @property {boolean} disabled
 * @property {boolean} isInvalid
 * @property {boolean} $isOpen
 * @returns React.ReactElement
 */
export const Chevron = ({ className, disabled, isInvalid, $isOpen }) => (
  <ChevronWrapper className={className} disabled={disabled} isInvalid={isInvalid}>
    <CarrotLeft
      style={{
        color: ({ isInvalid, disabled, theme }) =>
          isInvalid ? theme.error : disabled ? theme.scuttleGray500 : theme.azure,
        transform: `rotate(${$isOpen ? '0turn' : '-0.25turn'})`,
        transition: 'transform 0.2s ease-in-out',
        transitionDelay: '0.1s',
        willChange: 'transform',
      }}
    />
  </ChevronWrapper>
)

Chevron.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  isInvalid: PropTypes.bool,
  /** Shares the isOpen state with styled-components, but does not pass down to the child as a prop */
  $isOpen: PropTypes.bool,
}

Chevron.defaultProps = {
  disabled: false,
  isInvalid: false,
  $isOpen: false,
}

Chevron.displayName = 'Chevron'

export default styled(Chevron)``