@navinc/base-react-components/dist/dialog.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 MuiDialog, { dialogClasses } from '@mui/material/Dialog';
import useMediaQuery from '@mui/material/useMediaQuery';
import { backdropClasses } from '@mui/material/Backdrop';
import styled, { useTheme } from 'styled-components';
import Button from './button';
import Header from './header';
import Icon from './icon';
const getPaddingX = (isDesktop = false) => (isDesktop ? '48px' : '24px');
const paddingY = '32px';
const StyledHeaderContainer = styled.div.withConfig({ displayName: "brc-sc-StyledHeaderContainer", componentId: "brc-sc-1jq3af2" }) `
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
  padding: ${`${paddingY} ${getPaddingX(false)} 16px`};

  ${Header} {
    ${({ textAlign }) => textAlign === 'left' && 'flex: 1 1 auto;'}
    text-align: ${({ textAlign }) => textAlign};
  }

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    padding: ${`${paddingY} ${getPaddingX(true)} 16px`};
  }
`;
const StyledContentContainer = styled.div.withConfig({ displayName: "brc-sc-StyledContentContainer", componentId: "brc-sc-qnr5uw" }) `
  flex: 1 1 auto;
  overflow-y: auto;
  padding: ${`0 ${getPaddingX(false)}`};
  text-align: ${({ textAlign }) => textAlign};

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    padding: ${`0 ${getPaddingX(true)}`};
  }
`;
const StyledIconContainer = styled.div.withConfig({ displayName: "brc-sc-StyledIconContainer", componentId: "brc-sc-f0bd08" }) `
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: ${({ status, theme }) => theme.statusColors[status].backgroundColor};
  color: ${({ status, theme }) => theme.statusColors[status].color};
`;
const StyledButtonContainer = styled.div.withConfig({ displayName: "brc-sc-StyledButtonContainer", componentId: "brc-sc-ja7wkx" }) `
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 8px;
  column-gap: 16px;
  padding: ${`${paddingY} ${getPaddingX(false)}`};

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    flex-direction: ${({ direction }) => direction};
    justify-content: center;
    padding: ${`40px ${getPaddingX(true)} ${paddingY}`};
  }
`;
export const BaseDialog = (_a) => {
    var { noPadding, 'data-testid': dataTestId = 'dialog' } = _a, props = __rest(_a, ["noPadding", 'data-testid']);
    const theme = useTheme();
    const isDesktop = useMediaQuery(`(${theme.forLargerThanPhone})`);
    return (_jsx(MuiDialog, Object.assign({ sx: {
            [`.${dialogClasses.paper}`]: {
                background: () => theme.navSecondary100,
                borderRadius: '12px',
                boxShadow: 'none',
                margin: '16px',
                padding: () => {
                    if (noPadding)
                        return '0px';
                    return `${paddingY} ${getPaddingX(isDesktop)}`;
                },
                maxWidth: '640px',
                width: '640px',
            },
            [`.${backdropClasses.root}`]: {
                background: 'rgba(0,0,0,0.2)',
            },
        }, "data-testid": dataTestId }, props)));
};
export const ConfirmationDialog = (_a) => {
    var { header, content, iconName, status = 'fair', primaryButtonProps, secondaryButtonProps, buttonsDirection = 'row-reverse', textAlign = 'left' } = _a, props = __rest(_a, ["header", "content", "iconName", "status", "primaryButtonProps", "secondaryButtonProps", "buttonsDirection", "textAlign"]);
    const theme = useTheme();
    const isDesktop = useMediaQuery(`(${theme.forLargerThanPhone})`);
    return (_jsxs(BaseDialog, Object.assign({}, props, { noPadding: true }, { children: [_jsxs(StyledHeaderContainer, Object.assign({ textAlign: textAlign }, { children: [iconName && (_jsx(StyledIconContainer, Object.assign({ status: status, "data-testid": "dialog:icon" }, { children: _jsx(Icon, { name: iconName }) }))), _jsx(Header, Object.assign({ "data-testid": "dialog:header", id: props['aria-labelledby'] }, { children: header }))] })), _jsx(StyledContentContainer, Object.assign({ textAlign: textAlign, "data-testid": "dialog:content", id: props['aria-describedby'] }, { children: content })), _jsxs(StyledButtonContainer, Object.assign({ direction: buttonsDirection }, { children: [_jsx(Button, Object.assign({ "data-testid": "dialog:primary-button" }, primaryButtonProps, { wrap: "true", size: isDesktop ? 'medium' : 'mediumFull' })), _jsx(Button, Object.assign({ "data-testid": "dialog:secondary-button" }, secondaryButtonProps, { wrap: "true", variation: "noOutline", size: isDesktop ? 'medium' : 'mediumFull' }))] }))] })));
};
export default styled(ConfirmationDialog).withConfig({ componentId: "brc-sc-18gnfez" }) ``;
//# sourceMappingURL=dialog.js.map