@navinc/base-react-components
Version:
Nav's Pattern Library
31 lines • 1.55 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
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.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-yupxyd" }) `
pointer-events: none;
`;
const StyledChevron = styled(CarrotLeft).withConfig({ displayName: "brc-sc-StyledChevron", componentId: "brc-sc-15j0i7d" }) `
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 }) => (_jsx(ChevronWrapper, { className: className, children: _jsx(StyledChevron, { "$isOpen": isOpen, disabled: disabled, isInvalid: isInvalid }) }));
_Chevron.displayName = 'Chevron';
export const Chevron = styled(_Chevron).withConfig({ displayName: "brc-sc-Chevron", componentId: "brc-sc-1wabdil" }) ``;
//# sourceMappingURL=chevron.js.map