@navinc/base-react-components
Version:
Nav's Pattern Library
212 lines (206 loc) • 11.9 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";
// @ts-expect-error -- mui doesn't support ESM
import muiDialogPkg, { dialogClasses } from '@mui/material/node/Dialog/index.js';
// @ts-expect-error -- mui doesn't support ESM
import { backdropClasses } from '@mui/material/node/Backdrop/index.js';
import { styled, useTheme } from 'styled-components';
import { Button } from './button.js';
import { Header } from './header.js';
import { Icon } from './icon.js';
import { IconButton } from './icon-button.js';
import { useIsLargerThanPhone } from './use-media-query.js';
import { interopDefault } from '@navinc/utils';
const MuiDialog = interopDefault(muiDialogPkg);
const getPaddingX = (isDesktop = false) => (isDesktop ? '48px' : '24px');
const paddingY = '32px';
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogHeaderContainer = styled.div.withConfig({ displayName: "brc-sc-DialogHeaderContainer", componentId: "brc-sc-1h3ws5z" }) `
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`};
}
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogContentContainer = styled.div.withConfig({ displayName: "brc-sc-DialogContentContainer", componentId: "brc-sc-1gsnbiv" }) `
flex: 1 1 auto;
overflow-y: auto;
padding: ${`0 ${getPaddingX(false)}`};
text-align: ${({ textAlign }) => textAlign};
@media (${({ theme }) => theme.forLargerThanPhone}) {
padding: ${`0 ${getPaddingX(true)}`};
}
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogIconContainer = styled.div.withConfig({ displayName: "brc-sc-DialogIconContainer", componentId: "brc-sc-6339ba" }) `
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};
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogFooterButtonContainer = styled.div.withConfig({ displayName: "brc-sc-DialogFooterButtonContainer", componentId: "brc-sc-o8wde4" }) `
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 StyledCloseX = styled(IconButton).withConfig({ displayName: "brc-sc-StyledCloseX", componentId: "brc-sc-1czpjal" }) `
position: absolute;
${({ $position }) => {
if ($position === 'left')
return 'left: 24px;';
if ($position === 'right')
return 'right: 24px;';
return '';
}}
top: 24px;
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogCloseX = (props) => {
const theme = useTheme();
return (_jsx(StyledCloseX, Object.assign({ "aria-label": "close", name: "actions/close", variation: "outline", "data-testid": "dialog:close-x", size: "18px", color: theme.navNeutralDark, "$position": "left" }, props)));
};
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const useCreateDialogSx = () => {
const theme = useTheme();
const isDesktop = useIsLargerThanPhone();
return ({ fullWidth, noPadding, backgroundImage, backgroundColor, backgroundPosition, backgroundSize, }) => ({
[`.${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)',
},
});
};
/**
* @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead
The `<Dialog />` component is a wrapper for [Material UI's Dialog component](https://mui.com/material-ui/react-dialog/).
`<ConfirmationDialog />` is the default dialog component exported. It does not have "x" and has 2 buttons instead.
The base MUI dialog component has been exported as `BaseDialog` and both components should accept MUI Dialog props. `BaseDialog` has built in "x" and optional props for adding a custom background. The children are fully customizable.
**/
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 createDialogSx = useCreateDialogSx();
return (_jsxs(MuiDialog, Object.assign({ sx: Object.assign(Object.assign({}, createDialogSx({
fullWidth,
noPadding,
backgroundImage,
backgroundColor,
backgroundPosition,
backgroundSize,
})), sx), "data-testid": dataTestId, fullWidth: fullWidth }, props, { children: [onCloseX ? _jsx(DialogCloseX, Object.assign({}, closeXProps, { onClick: onCloseX })) : null, children] })));
};
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogFooterButton = (props) => {
const isDesktop = useIsLargerThanPhone();
return _jsx(Button, Object.assign({}, props, { wrap: true, size: isDesktop ? 'medium' : 'mediumFull' }));
};
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"]);
return (_jsxs(BaseDialog, Object.assign({}, props, { noPadding: true, children: [_jsxs(DialogHeaderContainer, { 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(DialogContentContainer, { textAlign: textAlign, "data-testid": "dialog:content", id: props['aria-describedby'], children: content }), _jsxs(DialogFooterButtonContainer, { direction: buttonsDirection, children: [_jsx(DialogFooterButton, Object.assign({ "data-testid": "dialog:primary-button" }, primaryButtonProps)), _jsx(DialogFooterButton, Object.assign({ "data-testid": "dialog:secondary-button" }, secondaryButtonProps, { variation: "noOutline" }))] })] })));
};
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const ConfirmationDialog = styled(_ConfirmationDialog).withConfig({ displayName: "brc-sc-ConfirmationDialog", componentId: "brc-sc-1ax3hmo" }) ``;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const RawDialog = MuiDialog;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const useCreateWayfinderDialogSx = () => {
const theme = useTheme();
// default of 640 was copied from original dialog styles. This may not be the best default.
return ({ width = '640px', maxWidth = width } = {}) => ({
[`.${dialogClasses.container}`]: {
alignItems: 'flex-end', // align to bottom of screen for mobile
[`@media (${theme.forLargerThanPhone})`]: {
alignItems: 'center', // revert to original for larger than phone
},
},
[`.${dialogClasses.paper}`]: {
background: theme.surfaceContainer,
margin: 0,
borderRadius: 0,
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
boxShadow: '0px 64px 64px -32px rgba(0, 0, 0, 0.05), 0px 32px 32px -16px rgba(0, 0, 0, 0.05), 0px 16px 16px -16px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.10);',
width,
maxWidth,
maxHeight: 'calc(100% - 128px)',
[`@media (${theme.forLargerThanPhone})`]: {
margin: '16px',
borderRadius: '16px',
maxHeight: 'calc(100% - 64px)', // revert to original for larger than phone
},
},
[`.${backdropClasses.root}`]: {
background: 'rgba(0,0,0,0.2)',
},
});
};
const WayfinderCloseX = styled(IconButton).withConfig({ displayName: "brc-sc-WayfinderCloseX", componentId: "brc-sc-t4czz3" }) `
position: absolute;
left: 20px;
top: 20px;
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogWayfinderCloseButton = (props) => {
const theme = useTheme();
return (_jsx(WayfinderCloseX, Object.assign({ "aria-label": "close", name: "actions/close", variation: "noOutline", "data-testid": "dialog:close-x", size: "24px", color: theme.onSurfaceVariant }, props)));
};
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogWayfinderHeader = styled.div.withConfig({ displayName: "brc-sc-DialogWayfinderHeader", componentId: "brc-sc-fzlmyq" }) `
text-align: center;
padding: 22px 48px;
border-bottom: 1px solid ${({ theme }) => theme.outlineVariant};
`;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogWayfinderHeaderText = styled(({ children, className }) => {
return (_jsx(DialogWayfinderHeader, { className: className, children: _jsx("p", { className: "title3", children: children }) }));
}).withConfig({ displayName: "brc-sc-DialogWayfinderHeaderText", componentId: "brc-sc-j7vm6" }) ``;
/** @deprecated use the wayfinder dialog from @navinc/base-react-components/wayfinder instead */
export const DialogWayfinderContent = styled.div.withConfig({ displayName: "brc-sc-DialogWayfinderContent", componentId: "brc-sc-hmwtsz" }) `
padding: 32px;
overflow-y: auto;
`;
//# sourceMappingURL=dialog.js.map