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

Nav's Pattern Library

import styled from 'styled-components'

import CarrotLeft from './icons/actions/carrot-left.js'

const setColor = ({ isInvalid, disabled, theme }) => {
  if (isInvalid) return theme.navStatusNegative
  return disabled ? theme.navNeutral400 : theme.navPrimary
}

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

const StyledChevron = styled(CarrotLeft)`
  fill: ${({ isInvalid, disabled, theme }) => setColor({ isInvalid, disabled, theme })};
  transform: ${({ $isOpen }) => `rotate(${$isOpen ? '0turn' : '-0.25turn'})}`};
  transition: transform 0.2s ease-in-out;
  transition-delay: 0.1s;
`

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
 */

const _Chevron = ({ className, disabled = false, isInvalid = false, isOpen = false }) => (
  <ChevronWrapper className={className}>
    <StyledChevron $isOpen={isOpen} disabled={disabled} isInvalid={isInvalid} />
  </ChevronWrapper>
)

_Chevron.displayName = 'Chevron'

export const Chevron = styled(_Chevron)``