@navinc/base-react-components/dist/button-link-icon.js

Nav's Pattern Library

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Icon } from './icon.js';
const ButtonLinkIconWrapper = styled.div.withConfig({ displayName: "brc-sc-ButtonLinkIconWrapper", componentId: "brc-sc-1hn0nvm" }) `
  display: flex;
  align-items: center;
`;
const getSize = (size) => {
    const iconSizes = {
        small: {
            width: '13.2px',
            height: '13.2px',
        },
        medium: {
            width: '16.5px',
            height: '16.5px',
        },
        large: {
            width: '19.8px',
            height: '19.8px',
        },
        extraLarge: {
            width: '20.5px',
            height: '20.5px',
        },
    };
    return size ? iconSizes[size] : iconSizes.medium;
};
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-10o2ccp" }) `
  & {
    ${({ size }) => getSize(size)}
  }
`;
const StyledChildren = styled.span.withConfig({ displayName: "brc-sc-StyledChildren", componentId: "brc-sc-1u96y6y" }) `
  & {
    ${({ iconPosition }) => (iconPosition === 'left' ? { paddingLeft: '3px' } : { paddingRight: '3px' })}
  }
`;
export const ButtonLinkIcon = ({ children, name, iconPosition, variation, size, }) => {
    if (variation !== 'buttonLinkIcon')
        return _jsx(_Fragment, { children: children });
    return (_jsxs(ButtonLinkIconWrapper, { children: [iconPosition === 'left' && _jsx(StyledIcon, { size, name, $iconPosition: iconPosition }), _jsx(StyledChildren, { iconPosition, children: children }), iconPosition === 'right' && _jsx(StyledIcon, { size, name, $iconPosition: iconPosition })] }));
};
//# sourceMappingURL=button-link-icon.js.map