@navinc/base-react-components/dist/card-insight.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { Link } from './link.js';
import { Copy } from './copy.js';
import { Icon } from './icon.js';
import { Button } from './button.js';
const Title = styled(Copy).withConfig({ displayName: "brc-sc-Title", componentId: "brc-sc-1bjpdxc" }) `
  display: flex;
  align-items: center;
`;
const variations = {
    positive: {
        bgColor: 'navStatusPositive200',
        icon: 'navStatusPositive',
    },
    negative: {
        bgColor: 'navStatusNegative200',
        icon: 'navStatusNegative',
    },
    improve: {
        bgColor: 'navSecondary',
        icon: 'navSecondary600',
    },
    neutral: {
        bgColor: 'navNeutral100',
        icon: 'navNeutral400',
    },
};
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- ensure variations is correct type
variations;
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-1klo7xs" }) `
  fill: ${({ type = 'neutral', theme }) => {
    var _a;
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
    return theme[(_a = variations[type]) === null || _a === void 0 ? void 0 : _a.icon];
}};
`;
const CardInsightContent = styled.div.withConfig({ displayName: "brc-sc-CardInsightContent", componentId: "brc-sc-yzd0o7" }) `
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  & > ${Link}, & > ${Button} {
    width: fit-content;
    margin-top: 4px;
  }
`;
export const StyledInsight = styled.aside.withConfig({ displayName: "brc-sc-StyledInsight", componentId: "brc-sc-5ul9h5" }) `
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: ${({ type = 'neutral', theme }) => {
    var _a;
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- not sure if it is safe to remove the optional chaining
    return theme[(_a = variations[type]) === null || _a === void 0 ? void 0 : _a.bgColor];
}};
  display: flex;
  flex-direction: row;

  & > ${StyledIcon} {
    min-width: 24px;
    margin-right: 8px;
  }
`;
const _CardInsight = ({ action, actionHref, actionLabel = '', isActionLoading, className, copy, icon, shouldOpenNewTab, type = 'neutral', title, 'data-testid': dataTestId = 'card-insight', }) => {
    const actionElement = () => {
        if (actionHref) {
            return (_jsx(Link, { href: actionHref, target: shouldOpenNewTab ? '_blank' : undefined, onClick: action, bold: true, "data-testid": `${dataTestId}:action`, rel: "noreferrer", children: actionLabel }));
        }
        if (action) {
            return (_jsx(Button, { onClick: action, "data-testid": `${dataTestId}:action`, variation: "buttonLink", isLoading: isActionLoading, children: actionLabel }));
        }
        return null;
    };
    return (_jsxs(StyledInsight, { type: type, className: className, "data-testid": dataTestId, children: [icon && _jsx(StyledIcon, { type: type, name: icon }), _jsxs(CardInsightContent, { children: [title && (_jsx(Title, { bold: true, "data-testid": `${dataTestId}:title`, children: title })), copy && _jsx(Copy, { "data-testid": `${dataTestId}:copy`, children: copy }), actionLabel && actionElement()] })] }));
};
/**
This component should always be used within a StandardCard

Providing an actionHref will change the action element to an `<a>`. By providing an action instead, a `<button>` will be rendered and loading dots can be displayed through `isActionLoading`

For more details see: https://navinc.invisionapp.com/d/main/#/console/15452082/335365553/preview
 */
export const CardInsight = styled(_CardInsight).withConfig({ displayName: "brc-sc-CardInsight", componentId: "brc-sc-jnoykm" }) ``;
//# sourceMappingURL=card-insight.js.map