@navinc/base-react-components
Version:
Nav's Pattern Library
139 lines (135 loc) • 8.18 kB
JavaScript
;
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfirmationDialog = exports.BaseDialog = exports.DialogIconContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Dialog_1 = __importStar(require("@mui/material/Dialog"));
const Backdrop_1 = require("@mui/material/Backdrop");
const styled_components_1 = __importStar(require("styled-components"));
const button_1 = require("./button");
const header_1 = require("./header");
const icon_1 = require("./icon");
const icon_button_1 = require("./icon-button");
const use_media_query_1 = require("./use-media-query");
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.Header} {
${({ 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)}`};
}
`;
exports.DialogIconContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DialogIconContainer", componentId: "brc-sc-gb6os1" }) `
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;
gap: 8px 16px;
padding: ${`${paddingY} ${getPaddingX(false)}`};
@media (${({ theme }) => theme.forLargerThanPhone}) {
flex-direction: ${({ direction }) => direction};
justify-content: center;
padding: ${`40px ${getPaddingX(true)} ${paddingY}`};
}
`;
const CloseX = (0, styled_components_1.default)(icon_button_1.IconButton).withConfig({ displayName: "brc-sc-CloseX", componentId: "brc-sc-fuyrkg" }) `
position: absolute;
${({ $position }) => {
if ($position === 'left')
return 'left: 24px;';
if ($position === 'right')
return 'right: 24px;';
return '';
}}
top: 24px;
`;
const BaseDialog = (_a) => {
var { noPadding, 'data-testid': dataTestId = 'dialog', fullWidth, sx, children, onCloseX, closeXProps, backgroundImage, backgroundColor, backgroundPosition, backgroundSize } = _a, props = __rest(_a, ["noPadding", 'data-testid', "fullWidth", "sx", "children", "onCloseX", "closeXProps", "backgroundImage", "backgroundColor", "backgroundPosition", "backgroundSize"]);
const theme = (0, styled_components_1.useTheme)();
const isDesktop = (0, use_media_query_1.useIsLargerThanPhone)();
return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, Object.assign({ sx: Object.assign({ [`.${Dialog_1.dialogClasses.paper}`]: Object.assign(Object.assign(Object.assign({ background: backgroundColor || theme.navNeutral }, (backgroundImage && {
backgroundImage,
backgroundPosition: backgroundPosition || 'center bottom',
backgroundRepeat: 'no-repeat',
backgroundSize: backgroundSize || '100%',
})), { borderRadius: '12px', boxShadow: 'none', margin: backgroundImage ? '0' : '16px', padding: () => {
if (backgroundImage || noPadding)
return '0px';
return `${paddingY} ${getPaddingX(isDesktop)}`;
} }), (!fullWidth && {
maxWidth: '640px',
width: '640px',
})), [`.${Backdrop_1.backdropClasses.root}`]: {
background: 'rgba(0,0,0,0.2)',
} }, sx), "data-testid": dataTestId, fullWidth: fullWidth }, props, { children: [onCloseX ? ((0, jsx_runtime_1.jsx)(CloseX, Object.assign({ "aria-label": "close", name: "actions/close", variation: "outline", "data-testid": "dialog:close-x", size: "18px", color: theme.navNeutralDark, onClick: onCloseX, "$position": "left" }, closeXProps))) : null, children] })));
};
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 isDesktop = (0, use_media_query_1.useIsLargerThanPhone)();
return ((0, jsx_runtime_1.jsxs)(exports.BaseDialog, Object.assign({}, props, { noPadding: true, children: [(0, jsx_runtime_1.jsxs)(StyledHeaderContainer, { textAlign: textAlign, children: [iconName && ((0, jsx_runtime_1.jsx)(exports.DialogIconContainer, { status: status, "data-testid": "dialog:icon", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: iconName }) })), (0, jsx_runtime_1.jsx)(header_1.Header, { "data-testid": "dialog:header", id: props['aria-labelledby'], children: header })] }), (0, jsx_runtime_1.jsx)(StyledContentContainer, { textAlign: textAlign, "data-testid": "dialog:content", id: props['aria-describedby'], children: content }), (0, jsx_runtime_1.jsxs)(StyledButtonContainer, { direction: buttonsDirection, children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ "data-testid": "dialog:primary-button" }, primaryButtonProps, { wrap: "true", size: isDesktop ? 'medium' : 'mediumFull' })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ "data-testid": "dialog:secondary-button" }, secondaryButtonProps, { wrap: "true", variation: "noOutline", size: isDesktop ? 'medium' : 'mediumFull' }))] })] })));
};
exports.ConfirmationDialog = (0, styled_components_1.default)(_ConfirmationDialog).withConfig({ displayName: "brc-sc-ConfirmationDialog", componentId: "brc-sc-1qwlnte" }) ``;
//# sourceMappingURL=dialog.js.map