@navinc/base-react-components/cjs/info-banner.js

Nav's Pattern Library

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfoBanner = exports.AlertBanner = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_1 = require("./copy");
const icon_1 = require("./icon");
const standard_card_1 = require("./standard-card");
const button_1 = require("./button");
const use_media_query_1 = require("./use-media-query");
const IconBackground = styled_components_1.default.span.withConfig({ displayName: "brc-sc-IconBackground", componentId: "brc-sc-k8yex1" }) `
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  max-width: 48px;
  color: ${({ theme, status }) => (status === 'default' ? theme.navPrimary : theme.navStatusNegative)};
  background-color: ${({ theme, status }) => (status === 'default' ? theme.navPrimary300 : theme.sebastianRed100)};

  @media (min-width: 800px) {
    grid-row: 1/3;
  }
`;
const StyledStandardCard = (0, styled_components_1.default)(standard_card_1.StandardCard).withConfig({ displayName: "brc-sc-StyledStandardCard", componentId: "brc-sc-1prafz6" }) `
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto auto;
  grid-gap: 16px;
  padding: 16px 24px;

  ${copy_1.Copy} {
    &:nth-of-type(1) {
      align-self: center;
    }
    &:nth-of-type(2) {
      grid-column: 1/3;
    }
  }

  @media (min-width: 800px) {
    row-gap: 0;

    ${copy_1.Copy} {
      &:nth-of-type(1) {
        grid-column: 2/3;
        grid-row: 1/2;
      }
      &:nth-of-type(2) {
        grid-column: 2/3;
        grid-row: 2/3;
      }
    }
  }
`;
const ButtonContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ButtonContainer", componentId: "brc-sc-pcg0s3" }) `
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1/3;
  justify-content: flex-end;

  ${button_1.Button} {
    &:last-child {
      margin-top: ${({ primaryBtn, secondaryBtn }) => (primaryBtn && secondaryBtn ? '16px' : '0')};
    }
  }

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    flex-direction: row;

    ${button_1.Button} {
      width: 100%;

      &:last-child {
        margin-top: 0;
        margin-left: ${({ primaryBtn, secondaryBtn }) => (primaryBtn && secondaryBtn ? '10px' : '0')};
      }
    }
  }

  @media (min-width: 800px) {
    grid-row: 1/3;
    grid-column: auto;

    ${button_1.Button} {
      width: initial;

      &:last-child {
        justify-self: end;
      }
    }
  }
`;
const AlertBanner = (_a) => {
    var { title, desc, icon = 'feedback/flag', status = 'default', renderPrimaryBtn, renderSecondaryBtn } = _a, props = __rest(_a, ["title", "desc", "icon", "status", "renderPrimaryBtn", "renderSecondaryBtn"]);
    const isDesktop = (0, use_media_query_1.useIsLargerThanPhone)();
    return ((0, jsx_runtime_1.jsxs)(StyledStandardCard, Object.assign({}, props, { "data-testid": `info-banner:${status}`, children: [(0, jsx_runtime_1.jsx)(IconBackground, { status: status, "data-testid": "info-banner:icon", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: icon, size: "20" }) }), (0, jsx_runtime_1.jsx)(copy_1.Copy, { bold: true, "data-testid": "info-banner:title", children: title }), (0, jsx_runtime_1.jsx)(copy_1.Copy, { "data-testid": "info-banner:desc", children: desc }), (renderSecondaryBtn || renderPrimaryBtn) && ((0, jsx_runtime_1.jsxs)(ButtonContainer, { secondaryBtn: !!renderSecondaryBtn, primaryBtn: !!renderPrimaryBtn, children: [renderSecondaryBtn &&
                        renderSecondaryBtn({
                            'data-testid': 'info-banner:secondary-button',
                            size: `${isDesktop ? 'medium' : 'mediumFull'}`,
                        }), renderPrimaryBtn &&
                        renderPrimaryBtn({
                            'data-testid': 'info-banner:primary-button',
                            size: `${isDesktop ? 'medium' : 'mediumFull'}`,
                        })] }))] })));
};
exports.AlertBanner = AlertBanner;
exports.InfoBanner = (0, styled_components_1.default)(exports.AlertBanner).withConfig({ displayName: "brc-sc-InfoBanner", componentId: "brc-sc-1qwnjax" }) ``;
//# sourceMappingURL=info-banner.js.map