@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 = exports.Link = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const prop_types_1 = __importDefault(require("prop-types"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const copy_1 = __importDefault(require("./copy"));
const text_1 = __importDefault(require("./text"));
const icon_js_1 = __importDefault(require("./icon.js"));
const Title = (0, styled_components_1.default)(copy_1.default) `
  display: flex;
  align-items: center;
`;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.default) `
  fill: ${({ type, theme: { mermaidGreen500, flounderYellow200, bubbleBlue500 } }) => type === 'positive' ? mermaidGreen500 : type === 'improve' ? flounderYellow200 : bubbleBlue500};
`;
exports.Link = (0, styled_components_1.default)(text_1.default).attrs(({ target }) => ({
    as: target ? 'a' : react_router_dom_1.Link,
})) `
  color: ${({ theme }) => theme.azure};
  font-weight: bold;
  padding-top: 4px;
  text-decoration: none;

  &:hover {
    color: ${({ theme }) => theme.oceanBoat};
  }

  &:active {
    color: ${({ theme }) => theme.azure};
  }

  &:visited {
    color: ${({ theme }) => theme.azure};
  }
`;
const CardInsightContent = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
`;
exports.StyledInsight = styled_components_1.default.aside `
  padding: 16px;
  border-radius: 4px;
  overflow: hidden;
  background-color: ${({ type, theme: { flounderYellow100, mermaidGreen100, bubbleBlue100 } = {} }) => type === 'improve' ? flounderYellow100 : type === 'positive' ? mermaidGreen100 : bubbleBlue100};
  display: flex;
  flex-direction: row;

  & > ${StyledIcon} {
    min-width: 24px;
    margin-right: 8px;
  }
`;
const CardInsight = ({ action, actionHref, actionLabel = '', className, copy, icon, shouldOpenNewTab, type = 'neutral', title, }) => {
    const hasAction = !!(action || actionHref);
    return ((0, jsx_runtime_1.jsxs)(exports.StyledInsight, Object.assign({ type: type, className: className }, { children: [icon && (0, jsx_runtime_1.jsx)(StyledIcon, { type: type, name: icon }, void 0), (0, jsx_runtime_1.jsxs)(CardInsightContent, { children: [title && (0, jsx_runtime_1.jsx)(Title, Object.assign({ bold: true }, { children: title }), void 0), copy && (0, jsx_runtime_1.jsx)(copy_1.default, { children: copy }, void 0), hasAction && ((0, jsx_runtime_1.jsx)(exports.Link, Object.assign({}, (shouldOpenNewTab ? { href: actionHref } : { to: actionHref }), { target: shouldOpenNewTab && '_blank', onClick: action }, { children: actionLabel }), void 0))] }, void 0)] }), void 0));
};
exports.CardInsight = CardInsight;
exports.CardInsight.propTypes = {
    action: prop_types_1.default.func,
    actionHref: prop_types_1.default.string,
    actionLabel: prop_types_1.default.string,
    type: prop_types_1.default.string,
    title: prop_types_1.default.node,
    copy: prop_types_1.default.node,
    shouldOpenNewTab: prop_types_1.default.bool,
};
const StyledCardInsight = (0, styled_components_1.default)(exports.CardInsight) ``;
exports.default = StyledCardInsight;
//# sourceMappingURL=card-insight.js.map