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

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardInsight = exports.StyledInsight = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const link_js_1 = require("./link.js");
const copy_js_1 = require("./copy.js");
const icon_js_1 = require("./icon.js");
const button_js_1 = require("./button.js");
const Title = (0, styled_components_1.default)(copy_js_1.Copy).withConfig({ displayName: "brc-sc-Title", componentId: "brc-sc-1iwcy9h" }) `
  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',
    },
};
// ensure variations is correct type
variations;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-125gry8" }) `
  fill: ${({ type = 'neutral', theme }) => { var _a; return theme[(_a = variations[type]) === null || _a === void 0 ? void 0 : _a.icon]; }};
`;
const CardInsightContent = styled_components_1.default.div.withConfig({ displayName: "brc-sc-CardInsightContent", componentId: "brc-sc-62hvzn" }) `
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  & > ${link_js_1.Link}, & > ${button_js_1.Button} {
    width: fit-content;
    margin-top: 4px;
  }
`;
exports.StyledInsight = styled_components_1.default.aside.withConfig({ displayName: "brc-sc-StyledInsight", componentId: "brc-sc-1ro4obq" }) `
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: ${({ type = 'neutral', theme }) => { var _a; 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 ((0, jsx_runtime_1.jsx)(link_js_1.Link, { href: actionHref, target: shouldOpenNewTab ? '_blank' : undefined, onClick: action, bold: true, "data-testid": `${dataTestId}:action`, rel: "noreferrer", children: actionLabel }));
        }
        if (action) {
            return ((0, jsx_runtime_1.jsx)(button_js_1.Button, { onClick: action, "data-testid": `${dataTestId}:action`, variation: "buttonLink", isLoading: isActionLoading, children: actionLabel }));
        }
        return null;
    };
    return ((0, jsx_runtime_1.jsxs)(exports.StyledInsight, { type: type, className: className, "data-testid": dataTestId, children: [icon && (0, jsx_runtime_1.jsx)(StyledIcon, { type: type, name: icon }), (0, jsx_runtime_1.jsxs)(CardInsightContent, { children: [title && ((0, jsx_runtime_1.jsx)(Title, { bold: true, "data-testid": `${dataTestId}:title`, children: title })), copy && (0, jsx_runtime_1.jsx)(copy_js_1.Copy, { "data-testid": `${dataTestId}:copy`, children: copy }), actionLabel && actionElement()] })] }));
};
exports.CardInsight = (0, styled_components_1.default)(_CardInsight).withConfig({ displayName: "brc-sc-CardInsight", componentId: "brc-sc-64jq1m" }) ``;
//# sourceMappingURL=card-insight.js.map