@navinc/base-react-components/dist/callout-link.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Button from './button';
import Copy from './copy';
import Icon from './icon.js';
import isRebrand from './is-rebrand';
import Link from './link.js';
const getVariation = ({ variation = 'neutral', theme }) => {
    if (isRebrand(theme)) {
        return {
            neutral: {
                backgroundColor: theme.navNeutral100,
                iconFill: theme.navNeutral400,
                buttonColor: theme.navPrimary,
            },
            positive: {
                backgroundColor: theme.navStatusPositive200,
                iconFill: theme.navStatusPositive,
                buttonColor: theme.navStatusPositive,
            },
            improve: {
                backgroundColor: theme.navSecondary,
                iconFill: theme.navSecondary600,
                buttonColor: theme.navSecondary600,
            },
            negative: {
                backgroundColor: theme.navStatusNegative200,
                iconFill: theme.navStatusNegative,
                buttonColor: theme.navStatusNegative,
            },
            information: {
                backgroundColor: theme.navNeutral100,
                iconFill: theme.navPrimary,
                buttonColor: theme.navPrimary,
            },
        }[variation];
    }
    return {
        neutral: {
            backgroundColor: theme.bubbleBlue100,
            iconFill: theme.azure,
        },
        positive: {
            backgroundColor: theme.seaturtleGreen100,
            iconFill: theme.seaturtleGreen200,
        },
        improve: {
            backgroundColor: theme.flounderYellow100,
            iconFill: theme.flounderYellow200,
        },
        negative: {
            backgroundColor: theme.sebastianRed100,
            iconFill: theme.sebastianRed200,
        },
        information: {
            backgroundColor: theme.bubbleBlue100,
            iconFill: theme.azure,
        },
    }[variation];
};
const CalloutLink = styled.div.withConfig({ displayName: "brc-sc-CalloutLink", componentId: "brc-sc-1edmhpi" }) `
  display: grid;
  grid-column-gap: 8px;
  grid-template-columns: 24px minmax(auto, max-content) minmax(auto, max-content);
  background: ${({ theme, variation }) => getVariation({ theme, variation }).backgroundColor};
  padding: 12px 16px;
  border-radius: 12px;

  & > ${Icon} {
    fill: ${({ theme, variation }) => getVariation({ theme, variation }).iconFill};
  }
  & > ${Button} {
    color: ${({ theme, variation }) => (isRebrand(theme) ? getVariation({ theme, variation }).buttonColor : '')};
  }
`;
/**
 * Alternatively, use a linkHref rather than a linkAction to navigate elsewhere.
 */
export default ({ iconName = 'actions/circle-info', copy, linkCopy, linkHref, linkAction, variation, }) => (_jsxs(CalloutLink, Object.assign({ variation: variation }, { children: [_jsx(Icon, { name: iconName }), _jsx(Copy, { children: copy }), linkHref ? (_jsx(Link, Object.assign({ href: linkHref }, { children: linkCopy }))) : (_jsx(Button, Object.assign({ variation: "buttonLink", onClick: linkAction }, { children: linkCopy })))] })));
//# sourceMappingURL=callout-link.js.map