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

Nav's Pattern Library

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
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.AlertBanner = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importStar(require("styled-components"));
const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
const copy_1 = __importDefault(require("./copy"));
const icon_1 = __importDefault(require("./icon"));
const standard_card_1 = require("./standard-card");
const button_1 = __importDefault(require("./button"));
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.default} {
    &:nth-of-type(1) {
      align-self: center;
    }
    &:nth-of-type(2) {
      grid-column: 1/3;
    }
  }

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

    ${copy_1.default} {
      &: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;

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

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

    ${button_1.default} {
      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.default} {
      &: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 theme = (0, styled_components_1.useTheme)();
    const isDesktop = (0, useMediaQuery_1.default)(`(${theme.forLargerThanPhone})`);
    return ((0, jsx_runtime_1.jsxs)(StyledStandardCard, Object.assign({}, props, { "data-testid": `info-banner:${status}` }, { children: [(0, jsx_runtime_1.jsx)(IconBackground, Object.assign({ status: status, "data-testid": "info-banner:icon" }, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { name: icon, size: "20" }) })), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ bold: true, "data-testid": "info-banner:title" }, { children: title })), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ "data-testid": "info-banner:desc" }, { children: desc })), (renderSecondaryBtn || renderPrimaryBtn) && ((0, jsx_runtime_1.jsxs)(ButtonContainer, Object.assign({ 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.default = (0, styled_components_1.default)(exports.AlertBanner).withConfig({ componentId: "brc-sc-1uztw0m" }) ``;
//# sourceMappingURL=info-banner.js.map