@navinc/base-react-components
Version:
Nav's Pattern Library
112 lines (108 loc) • 6.45 kB
JavaScript
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 { backdropClasses } from '@mui/material/Backdrop';
import styled, { useTheme } from 'styled-components';
import { Button } from './button';
import { Header } from './header';
import { Icon } from './icon';
import { IconButton } from './icon-button';
import { useIsLargerThanPhone } from './use-media-query';
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)}`};
}
`;
export const DialogIconContainer = styled.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.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 = styled(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;
`;
export 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 = useTheme();
const isDesktop = useIsLargerThanPhone();
return (_jsxs(MuiDialog, Object.assign({ sx: Object.assign({ [`.${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',
})), [`.${backdropClasses.root}`]: {
background: 'rgba(0,0,0,0.2)',
} }, sx), "data-testid": dataTestId, fullWidth: fullWidth }, props, { children: [onCloseX ? (_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] })));
};
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 = useIsLargerThanPhone();
return (_jsxs(BaseDialog, Object.assign({}, props, { noPadding: true, children: [_jsxs(StyledHeaderContainer, { textAlign: textAlign, children: [iconName && (_jsx(DialogIconContainer, { status: status, "data-testid": "dialog:icon", children: _jsx(Icon, { name: iconName }) })), _jsx(Header, { "data-testid": "dialog:header", id: props['aria-labelledby'], children: header })] }), _jsx(StyledContentContainer, { textAlign: textAlign, "data-testid": "dialog:content", id: props['aria-describedby'], children: content }), _jsxs(StyledButtonContainer, { 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 const ConfirmationDialog = styled(_ConfirmationDialog).withConfig({ displayName: "brc-sc-ConfirmationDialog", componentId: "brc-sc-1qwlnte" }) ``;
//# sourceMappingURL=dialog.js.map