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

Nav's Pattern Library

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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { useTheme } from 'styled-components';
import useMediaQuery from '@mui/material/useMediaQuery';
import Copy from './copy';
import Icon from './icon';
import { StandardCard } from './standard-card';
import Button from './button';
const IconBackground = styled.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 = styled(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} {
    &:nth-of-type(1) {
      align-self: center;
    }
    &:nth-of-type(2) {
      grid-column: 1/3;
    }
  }

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

    ${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.div.withConfig({ displayName: "brc-sc-ButtonContainer", componentId: "brc-sc-pcg0s3" }) `
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1/3;

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

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

    ${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} {
      &:last-child {
        justify-self: end;
      }
    }
  }
`;
export 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 = useTheme();
    const isDesktop = useMediaQuery(`(${theme.forLargerThanPhone})`);
    return (_jsxs(StyledStandardCard, Object.assign({}, props, { "data-testid": `info-banner:${status}` }, { children: [_jsx(IconBackground, Object.assign({ status: status, "data-testid": "info-banner:icon" }, { children: _jsx(Icon, { name: icon, size: "20" }) })), _jsx(Copy, Object.assign({ bold: true, "data-testid": "info-banner:title" }, { children: title })), _jsx(Copy, Object.assign({ "data-testid": "info-banner:desc" }, { children: desc })), (renderSecondaryBtn || renderPrimaryBtn) && (_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'}`,
                        })] })))] })));
};
export default styled(AlertBanner).withConfig({ componentId: "brc-sc-1uztw0m" }) ``;
//# sourceMappingURL=info-banner.js.map