@navinc/base-react-components/cjs/dialog.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.ConfirmationDialog = exports.BaseDialog = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Dialog_1 = __importStar(require("@mui/material/Dialog"));
const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
const Backdrop_1 = require("@mui/material/Backdrop");
const styled_components_1 = __importStar(require("styled-components"));
const button_1 = __importDefault(require("./button"));
const header_1 = __importDefault(require("./header"));
const icon_1 = __importDefault(require("./icon"));
const getPaddingX = (isDesktop = false) => (isDesktop ? '48px' : '24px');
const paddingY = '32px';
const StyledHeaderContainer = styled_components_1.default.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_1.default} {
    ${({ textAlign }) => textAlign === 'left' && 'flex: 1 1 auto;'}
    text-align: ${({ textAlign }) => textAlign};
  }

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    padding: ${`${paddingY} ${getPaddingX(true)} 16px`};
  }
`;
const StyledContentContainer = styled_components_1.default.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_components_1.default.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_components_1.default.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}`};
  }
`;
const BaseDialog = (_a) => {
    var { noPadding, 'data-testid': dataTestId = 'dialog' } = _a, props = __rest(_a, ["noPadding", 'data-testid']);
    const theme = (0, styled_components_1.useTheme)();
    const isDesktop = (0, useMediaQuery_1.default)(`(${theme.forLargerThanPhone})`);
    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, Object.assign({ sx: {
            [`.${Dialog_1.dialogClasses.paper}`]: {
                background: () => theme.navSecondary100,
                borderRadius: '12px',
                boxShadow: 'none',
                margin: '16px',
                padding: () => {
                    if (noPadding)
                        return '0px';
                    return `${paddingY} ${getPaddingX(isDesktop)}`;
                },
                maxWidth: '640px',
                width: '640px',
            },
            [`.${Backdrop_1.backdropClasses.root}`]: {
                background: 'rgba(0,0,0,0.2)',
            },
        }, "data-testid": dataTestId }, props)));
};
exports.BaseDialog = BaseDialog;
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 = (0, styled_components_1.useTheme)();
    const isDesktop = (0, useMediaQuery_1.default)(`(${theme.forLargerThanPhone})`);
    return ((0, jsx_runtime_1.jsxs)(exports.BaseDialog, Object.assign({}, props, { noPadding: true }, { children: [(0, jsx_runtime_1.jsxs)(StyledHeaderContainer, Object.assign({ textAlign: textAlign }, { children: [iconName && ((0, jsx_runtime_1.jsx)(StyledIconContainer, Object.assign({ status: status, "data-testid": "dialog:icon" }, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { name: iconName }) }))), (0, jsx_runtime_1.jsx)(header_1.default, Object.assign({ "data-testid": "dialog:header", id: props['aria-labelledby'] }, { children: header }))] })), (0, jsx_runtime_1.jsx)(StyledContentContainer, Object.assign({ textAlign: textAlign, "data-testid": "dialog:content", id: props['aria-describedby'] }, { children: content })), (0, jsx_runtime_1.jsxs)(StyledButtonContainer, Object.assign({ direction: buttonsDirection }, { children: [(0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ "data-testid": "dialog:primary-button" }, primaryButtonProps, { wrap: "true", size: isDesktop ? 'medium' : 'mediumFull' })), (0, jsx_runtime_1.jsx)(button_1.default, Object.assign({ "data-testid": "dialog:secondary-button" }, secondaryButtonProps, { wrap: "true", variation: "noOutline", size: isDesktop ? 'medium' : 'mediumFull' }))] }))] })));
};
exports.ConfirmationDialog = ConfirmationDialog;
exports.default = (0, styled_components_1.default)(exports.ConfirmationDialog).withConfig({ componentId: "brc-sc-18gnfez" }) ``;
//# sourceMappingURL=dialog.js.map