ece-docs-components 1.0.37 → 1.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Alert.js +8 -0
- package/dist/cjs/components/Alert.js.map +1 -1
- package/dist/cjs/components/Header.js +1 -2
- package/dist/cjs/components/Header.js.map +1 -1
- package/dist/cjs/components/NoteBox.js +2 -1
- package/dist/cjs/components/NoteBox.js.map +1 -1
- package/dist/esm/components/Alert.d.ts +1 -1
- package/dist/esm/components/Alert.js +8 -0
- package/dist/esm/components/Alert.js.map +1 -1
- package/dist/esm/components/Header.js +1 -2
- package/dist/esm/components/Header.js.map +1 -1
- package/dist/esm/components/NoteBox.js +2 -1
- package/dist/esm/components/NoteBox.js.map +1 -1
- package/package.json +1 -1
|
@@ -46,6 +46,11 @@ const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) =
|
|
|
46
46
|
borderColor: '#EDA6A6',
|
|
47
47
|
color: '#5F2120',
|
|
48
48
|
},
|
|
49
|
+
'note-task': {
|
|
50
|
+
backgroundColor: '#FFF4E5',
|
|
51
|
+
borderColor: '#F9C18F',
|
|
52
|
+
color: '#4D3019',
|
|
53
|
+
},
|
|
49
54
|
'note-assurance': {
|
|
50
55
|
backgroundColor: '#FFF4E5',
|
|
51
56
|
borderColor: '#F9C18F',
|
|
@@ -69,6 +74,7 @@ const StyledAlert = material.styled(material.Alert)(({ theme, customvariant }) =
|
|
|
69
74
|
alignItems: 'flex-start',
|
|
70
75
|
gap: theme.spacing(1.5),
|
|
71
76
|
padding: theme.spacing(2),
|
|
77
|
+
marginBottom: theme.spacing(1.5),
|
|
72
78
|
border: `1px solid ${style.borderColor}`,
|
|
73
79
|
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
74
80
|
? parseInt(theme.shape.borderRadius, 10)
|
|
@@ -97,6 +103,7 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
|
|
|
97
103
|
'note': jsxRuntime.jsx(iconsMaterial.NoteOutlined, { sx: { fontSize: 20, color: '#4D3019' } }),
|
|
98
104
|
'note-important': jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20, color: '#D32F2F' } }),
|
|
99
105
|
'note-assurance': jsxRuntime.jsx(iconsMaterial.TaskAltRounded, { sx: { fontSize: 20, color: '#FF9800' } }),
|
|
106
|
+
'note-task': jsxRuntime.jsx(iconsMaterial.TaskAltRounded, { sx: { fontSize: 20, color: '#FF9800' } }),
|
|
100
107
|
'note-share': jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20, color: '#C571FA' } }),
|
|
101
108
|
custom: jsxRuntime.jsx(iconsMaterial.InfoOutlineRounded, { sx: { fontSize: 20 } }),
|
|
102
109
|
};
|
|
@@ -110,6 +117,7 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
|
|
|
110
117
|
'note-externallink': undefined,
|
|
111
118
|
'note-important': undefined,
|
|
112
119
|
'note': undefined,
|
|
120
|
+
'note-task': undefined,
|
|
113
121
|
'note-assurance': undefined,
|
|
114
122
|
'note-share': undefined,
|
|
115
123
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\r\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, LinkRounded, NoteOutlined, OpenInNewOutlined, TaskAltRounded } from '@mui/icons-material';\r\n\r\ninterface AlertProps {\r\n variant?: 'info' |\r\n 'success' |\r\n 'warning' |\r\n 'error' |\r\n 'note-internallink' |\r\n 'note-externallink' |\r\n 'note-important' |\r\n 'note' |\r\n 'note-assurance' |\r\n 'note-share' |\r\n 'custom';\r\n children: React.ReactNode;\r\n className?: string;\r\n icon?: boolean | React.ReactNode; // Allow React node\r\n sx?: SxProps<Theme>; \r\n}\r\n\r\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\r\n const variants = {\r\n info: {\r\n backgroundColor: '#eff6ff',\r\n borderColor: '#bfdbfe',\r\n color: '#1e3a8a',\r\n },\r\n success: {\r\n backgroundColor: '#f0fdf4',\r\n borderColor: '#bbf7d0',\r\n color: '#14532d',\r\n },\r\n warning: {\r\n backgroundColor: '#fefce8',\r\n borderColor: '#fef08a',\r\n color: '#713f12',\r\n },\r\n error: {\r\n backgroundColor: '#fef2f2',\r\n borderColor: '#fecaca',\r\n color: '#7f1d1d',\r\n },\r\n 'note-internallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-externallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-important': {\r\n backgroundColor: '#FDEDED',\r\n borderColor: '#EDA6A6',\r\n color: '#5F2120',\r\n },\r\n 'note-assurance': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-share': {\r\n backgroundColor: '#F8F0FC',\r\n borderColor: '#C269FA',\r\n color: '#4D3019',\r\n },\r\n custom: {\r\n backgroundColor: theme.palette.light.main,\r\n borderColor: `${theme.palette.dark.main}33`,\r\n color: theme.palette.dark.main,\r\n },\r\n };\r\n\r\n const variantKey = customvariant as keyof typeof variants || 'info';\r\n const style = variants[variantKey];\r\n\r\n return {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(2),\r\n border: `1px solid ${style.borderColor}`,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: style.backgroundColor,\r\n color: style.color,\r\n '& .MuiAlert-icon': {\r\n marginRight: 0,\r\n padding: 0,\r\n marginTop: '2px',\r\n },\r\n '& .MuiAlert-message': {\r\n padding: 0,\r\n flex: 1,\r\n },\r\n };\r\n});\r\n\r\nexport const Alert: React.FC<AlertProps> = ({\r\n variant = 'info',\r\n children,\r\n className = '',\r\n icon = true,\r\n sx,\r\n}) => {\r\n const iconMap = {\r\n info: <InfoOutlineRounded sx={{fontSize: 20, color:'#1e3a8a'}} />,\r\n success: <TaskAltRounded sx={{fontSize: 20}} />,\r\n warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\r\n error: <HighlightOffRounded sx={{fontSize: 20}} />,\r\n 'note-internallink': <LinkRounded sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-externallink': <OpenInNewOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note': <NoteOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-important': <InfoOutlineRounded sx={{fontSize: 20, color:'#D32F2F'}} />,\r\n 'note-assurance': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-share': <InfoOutlineRounded sx={{fontSize: 20, color:'#C571FA'}} />,\r\n custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\r\n };\r\n\r\n const severityMap: Record<string, MuiAlertProps['severity'] | undefined> = {\r\n info: 'info',\r\n success: 'success',\r\n warning: 'warning',\r\n error: 'error',\r\n custom: 'info',\r\n 'note-internallink': undefined,\r\n 'note-externallink': undefined,\r\n 'note-important': undefined,\r\n 'note': undefined,\r\n 'note-assurance': undefined,\r\n 'note-share': undefined,\r\n };\r\n\r\n\r\n const getIcon = () => {\r\n if (icon === false) return false;\r\n if (icon === true) return iconMap[variant];\r\n return icon; // Custom icon passed\r\n };\r\n\r\n return (\r\n <StyledAlert\r\n customvariant={variant}\r\n severity={severityMap[variant]}\r\n icon={getIcon()}\r\n className={className}\r\n sx={sx}\r\n >\r\n {children}\r\n </StyledAlert>\r\n );\r\n};"],"names":["styled","MuiAlert","_jsx","InfoOutlineRounded","TaskAltRounded","ErrorOutlineRounded","HighlightOffRounded","LinkRounded","OpenInNewOutlined","NoteOutlined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\r\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, LinkRounded, NoteOutlined, OpenInNewOutlined, TaskAltRounded } from '@mui/icons-material';\r\n\r\ninterface AlertProps {\r\n variant?: 'info' |\r\n 'success' |\r\n 'warning' |\r\n 'error' |\r\n 'note-internallink' |\r\n 'note-externallink' |\r\n 'note-important' |\r\n 'note' |\r\n 'note-assurance' |\r\n 'note-share' |\r\n 'note-task' |\r\n 'custom';\r\n children: React.ReactNode;\r\n className?: string;\r\n icon?: boolean | React.ReactNode; // Allow React node\r\n sx?: SxProps<Theme>; \r\n}\r\n\r\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\r\n const variants = {\r\n info: {\r\n backgroundColor: '#eff6ff',\r\n borderColor: '#bfdbfe',\r\n color: '#1e3a8a',\r\n },\r\n success: {\r\n backgroundColor: '#f0fdf4',\r\n borderColor: '#bbf7d0',\r\n color: '#14532d',\r\n },\r\n warning: {\r\n backgroundColor: '#fefce8',\r\n borderColor: '#fef08a',\r\n color: '#713f12',\r\n },\r\n error: {\r\n backgroundColor: '#fef2f2',\r\n borderColor: '#fecaca',\r\n color: '#7f1d1d',\r\n },\r\n 'note-internallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-externallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-important': {\r\n backgroundColor: '#FDEDED',\r\n borderColor: '#EDA6A6',\r\n color: '#5F2120',\r\n },\r\n 'note-task': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-assurance': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-share': {\r\n backgroundColor: '#F8F0FC',\r\n borderColor: '#C269FA',\r\n color: '#4D3019',\r\n },\r\n custom: {\r\n backgroundColor: theme.palette.light.main,\r\n borderColor: `${theme.palette.dark.main}33`,\r\n color: theme.palette.dark.main,\r\n },\r\n };\r\n\r\n const variantKey = customvariant as keyof typeof variants || 'info';\r\n const style = variants[variantKey];\r\n\r\n return {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(2),\r\n marginBottom: theme.spacing(1.5),\r\n border: `1px solid ${style.borderColor}`,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: style.backgroundColor,\r\n color: style.color,\r\n '& .MuiAlert-icon': {\r\n marginRight: 0,\r\n padding: 0,\r\n marginTop: '2px',\r\n },\r\n '& .MuiAlert-message': {\r\n padding: 0,\r\n flex: 1,\r\n },\r\n };\r\n});\r\n\r\nexport const Alert: React.FC<AlertProps> = ({\r\n variant = 'info',\r\n children,\r\n className = '',\r\n icon = true,\r\n sx,\r\n}) => {\r\n const iconMap = {\r\n info: <InfoOutlineRounded sx={{fontSize: 20, color:'#1e3a8a'}} />,\r\n success: <TaskAltRounded sx={{fontSize: 20}} />,\r\n warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\r\n error: <HighlightOffRounded sx={{fontSize: 20}} />,\r\n 'note-internallink': <LinkRounded sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-externallink': <OpenInNewOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note': <NoteOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-important': <InfoOutlineRounded sx={{fontSize: 20, color:'#D32F2F'}} />,\r\n 'note-assurance': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-task': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-share': <InfoOutlineRounded sx={{fontSize: 20, color:'#C571FA'}} />,\r\n custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\r\n };\r\n\r\n const severityMap: Record<string, MuiAlertProps['severity'] | undefined> = {\r\n info: 'info',\r\n success: 'success',\r\n warning: 'warning',\r\n error: 'error',\r\n custom: 'info',\r\n 'note-internallink': undefined,\r\n 'note-externallink': undefined,\r\n 'note-important': undefined,\r\n 'note': undefined,\r\n 'note-task': undefined,\r\n 'note-assurance': undefined,\r\n 'note-share': undefined,\r\n };\r\n\r\n\r\n const getIcon = () => {\r\n if (icon === false) return false;\r\n if (icon === true) return iconMap[variant];\r\n return icon; // Custom icon passed\r\n };\r\n\r\n return (\r\n <StyledAlert\r\n customvariant={variant}\r\n severity={severityMap[variant]}\r\n icon={getIcon()}\r\n className={className}\r\n sx={sx}\r\n >\r\n {children}\r\n </StyledAlert>\r\n );\r\n};"],"names":["styled","MuiAlert","_jsx","InfoOutlineRounded","TaskAltRounded","ErrorOutlineRounded","HighlightOffRounded","LinkRounded","OpenInNewOutlined","NoteOutlined"],"mappings":"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"}
|
|
@@ -176,8 +176,7 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOu
|
|
|
176
176
|
const handleClose = () => {
|
|
177
177
|
setAnchorEl(null);
|
|
178
178
|
};
|
|
179
|
-
return (jsxRuntime.jsxs(StyledHeader, { children: [signUpStatus === 'Active' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, { disableRipple: true, onClick: toggleMenu, sx: { display: { xs: 'block', md: 'none' } }, size: "large"
|
|
180
|
-
, children: jsxRuntime.jsx(iconsMaterial.MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: {
|
|
179
|
+
return (jsxRuntime.jsxs(StyledHeader, { children: [signUpStatus === 'Active' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, { disableRipple: true, onClick: toggleMenu, sx: { display: { xs: 'block', md: 'none' } }, size: "large", children: jsxRuntime.jsx(iconsMaterial.MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsxRuntime.jsx(material.Divider, { orientation: "vertical", sx: {
|
|
181
180
|
color: '#FFFFFF',
|
|
182
181
|
borderRightWidth: 2,
|
|
183
182
|
display: { xs: 'block', md: 'none' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: () => void;\r\n signUpStatus: SignUpStatus;\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '32rem', // max-w-2xl\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n signUpStatus,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n return (\r\n <StyledHeader>\r\n {signUpStatus === 'Active' && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }} // show on mobile only\r\n size=\"large\" // optional: keeps touch target ~48px in MUI v5+\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg/>\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Search input for md+ screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchContainer >\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\r\n InputProps={{\r\n endAdornment: (\r\n <StyledSearchButton>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n ),\r\n }}\r\n />\r\n </StyledSearchContainer>\r\n } */}\r\n\r\n <StyledUserContainer>\r\n {/* Search button only visible on XS screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchButton\r\n disableRipple\r\n onClick={search}\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83'\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n } */}\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={()=>{signOut(); handleClose();}}\r\n />\r\n </StyledHeader>\r\n );\r\n};"],"names":["styled","Box","Typography","Logo","TextField","IconButton","_jsxs","_Fragment","_jsx","MenuRounded","Divider","PopoverMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: () => void;\r\n signUpStatus: SignUpStatus;\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '32rem', // max-w-2xl\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n signUpStatus,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n return (\r\n <StyledHeader>\r\n {signUpStatus === 'Active' && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }}\r\n size=\"large\"\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg/>\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Search input for md+ screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchContainer >\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\r\n InputProps={{\r\n endAdornment: (\r\n <StyledSearchButton>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n ),\r\n }}\r\n />\r\n </StyledSearchContainer>\r\n } */}\r\n\r\n <StyledUserContainer>\r\n {/* Search button only visible on XS screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchButton\r\n disableRipple\r\n onClick={search}\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83'\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n } */}\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={()=>{signOut(); handleClose();}}\r\n />\r\n </StyledHeader>\r\n );\r\n};"],"names":["styled","Box","Typography","Logo","TextField","IconButton","_jsxs","_Fragment","_jsx","MenuRounded","Divider","PopoverMenu"],"mappings":"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"}
|
|
@@ -72,6 +72,7 @@ const statusConfig = {
|
|
|
72
72
|
};
|
|
73
73
|
const NoteContainer = material.styled(material.Box)({
|
|
74
74
|
position: 'relative',
|
|
75
|
+
display: 'inline',
|
|
75
76
|
maxWidth: '100%',
|
|
76
77
|
});
|
|
77
78
|
// Uses highlight colors driven by status exclusively
|
|
@@ -81,7 +82,7 @@ const HighlightWrapper = material.styled(material.Box, {
|
|
|
81
82
|
prop !== 'highlightSelectedColor'
|
|
82
83
|
})(({ isHovered, highlightColor, highlightSelectedColor }) => ({
|
|
83
84
|
position: 'relative',
|
|
84
|
-
display: 'inline
|
|
85
|
+
display: 'inline',
|
|
85
86
|
maxWidth: '100%',
|
|
86
87
|
'&:hover .edit-button': {
|
|
87
88
|
opacity: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\n\r\n// Status Enum\r\nenum VariableState {\r\n Accepted = \"Accepted\",\r\n Pending = \"Pending\",\r\n ActionRequired = \"Action Required\",\r\n Declined = \"Declined\",\r\n Draft = \"Draft\"\r\n}\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\r\n switch (status) {\r\n case \"Accepted\": return VariableState.Accepted;\r\n case \"Pending\": return VariableState.Pending;\r\n case \"Action Required\": return VariableState.ActionRequired;\r\n case \"Declined\": return VariableState.Declined;\r\n case \"Draft\": return VariableState.Draft;\r\n default: return undefined;\r\n }\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n labelColor: string;\r\n chipColor: string;\r\n chipTextColor: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n labelColor: '#2D5016',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#fff',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#F5A623',\r\n chipTextColor: '#4D3019',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n labelColor: '#CC0000',\r\n chipColor: '#F56B6B',\r\n chipTextColor: '#fff',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#4D3019',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n labelColor: 'rgba(0, 0, 0, 0.6)',\r\n chipColor: '#F5D76E',\r\n chipTextColor: '#fff',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) => \r\n prop !== 'isHovered' && \r\n prop !== 'highlightColor' && \r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline-block',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(50%, -50%)',\r\n width: 20,\r\n height: 20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status);\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n labelColor: 'rgba(0,0,0,0.6)',\r\n chipColor: '#ccc',\r\n chipTextColor: '#4D3019',\r\n };\r\n\r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={style.highlight}\r\n highlightSelectedColor={style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n >\r\n <span className=\"highlight-span\">{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n title=\"Edit variable highlight\"\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted \r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> \r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["styled","Box","IconButton","useState","_jsxs","_jsx","Alert","CheckRounded","EditRounded"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\n\r\n// Status Enum\r\nenum VariableState {\r\n Accepted = \"Accepted\",\r\n Pending = \"Pending\",\r\n ActionRequired = \"Action Required\",\r\n Declined = \"Declined\",\r\n Draft = \"Draft\"\r\n}\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\r\n switch (status) {\r\n case \"Accepted\": return VariableState.Accepted;\r\n case \"Pending\": return VariableState.Pending;\r\n case \"Action Required\": return VariableState.ActionRequired;\r\n case \"Declined\": return VariableState.Declined;\r\n case \"Draft\": return VariableState.Draft;\r\n default: return undefined;\r\n }\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n labelColor: string;\r\n chipColor: string;\r\n chipTextColor: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n labelColor: '#2D5016',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#fff',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#F5A623',\r\n chipTextColor: '#4D3019',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n labelColor: '#CC0000',\r\n chipColor: '#F56B6B',\r\n chipTextColor: '#fff',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#4D3019',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n labelColor: 'rgba(0, 0, 0, 0.6)',\r\n chipColor: '#F5D76E',\r\n chipTextColor: '#fff',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) => \r\n prop !== 'isHovered' && \r\n prop !== 'highlightColor' && \r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(50%, -50%)',\r\n width: 20,\r\n height: 20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status);\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n labelColor: 'rgba(0,0,0,0.6)',\r\n chipColor: '#ccc',\r\n chipTextColor: '#4D3019',\r\n };\r\n\r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={style.highlight}\r\n highlightSelectedColor={style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n >\r\n <span className=\"highlight-span\">{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n title=\"Edit variable highlight\"\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted \r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> \r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["styled","Box","IconButton","useState","_jsxs","_jsx","Alert","CheckRounded","EditRounded"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SxProps, Theme } from '@mui/material';
|
|
3
3
|
interface AlertProps {
|
|
4
|
-
variant?: 'info' | 'success' | 'warning' | 'error' | 'note-internallink' | 'note-externallink' | 'note-important' | 'note' | 'note-assurance' | 'note-share' | 'custom';
|
|
4
|
+
variant?: 'info' | 'success' | 'warning' | 'error' | 'note-internallink' | 'note-externallink' | 'note-important' | 'note' | 'note-assurance' | 'note-share' | 'note-task' | 'custom';
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
className?: string;
|
|
7
7
|
icon?: boolean | React.ReactNode;
|
|
@@ -44,6 +44,11 @@ const StyledAlert = styled(Alert$1)(({ theme, customvariant }) => {
|
|
|
44
44
|
borderColor: '#EDA6A6',
|
|
45
45
|
color: '#5F2120',
|
|
46
46
|
},
|
|
47
|
+
'note-task': {
|
|
48
|
+
backgroundColor: '#FFF4E5',
|
|
49
|
+
borderColor: '#F9C18F',
|
|
50
|
+
color: '#4D3019',
|
|
51
|
+
},
|
|
47
52
|
'note-assurance': {
|
|
48
53
|
backgroundColor: '#FFF4E5',
|
|
49
54
|
borderColor: '#F9C18F',
|
|
@@ -67,6 +72,7 @@ const StyledAlert = styled(Alert$1)(({ theme, customvariant }) => {
|
|
|
67
72
|
alignItems: 'flex-start',
|
|
68
73
|
gap: theme.spacing(1.5),
|
|
69
74
|
padding: theme.spacing(2),
|
|
75
|
+
marginBottom: theme.spacing(1.5),
|
|
70
76
|
border: `1px solid ${style.borderColor}`,
|
|
71
77
|
borderRadius: (typeof theme.shape.borderRadius === 'string'
|
|
72
78
|
? parseInt(theme.shape.borderRadius, 10)
|
|
@@ -95,6 +101,7 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
|
|
|
95
101
|
'note': jsx(NoteOutlined, { sx: { fontSize: 20, color: '#4D3019' } }),
|
|
96
102
|
'note-important': jsx(InfoOutlineRounded, { sx: { fontSize: 20, color: '#D32F2F' } }),
|
|
97
103
|
'note-assurance': jsx(TaskAltRounded, { sx: { fontSize: 20, color: '#FF9800' } }),
|
|
104
|
+
'note-task': jsx(TaskAltRounded, { sx: { fontSize: 20, color: '#FF9800' } }),
|
|
98
105
|
'note-share': jsx(InfoOutlineRounded, { sx: { fontSize: 20, color: '#C571FA' } }),
|
|
99
106
|
custom: jsx(InfoOutlineRounded, { sx: { fontSize: 20 } }),
|
|
100
107
|
};
|
|
@@ -108,6 +115,7 @@ const Alert = ({ variant = 'info', children, className = '', icon = true, sx, })
|
|
|
108
115
|
'note-externallink': undefined,
|
|
109
116
|
'note-important': undefined,
|
|
110
117
|
'note': undefined,
|
|
118
|
+
'note-task': undefined,
|
|
111
119
|
'note-assurance': undefined,
|
|
112
120
|
'note-share': undefined,
|
|
113
121
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\r\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, LinkRounded, NoteOutlined, OpenInNewOutlined, TaskAltRounded } from '@mui/icons-material';\r\n\r\ninterface AlertProps {\r\n variant?: 'info' |\r\n 'success' |\r\n 'warning' |\r\n 'error' |\r\n 'note-internallink' |\r\n 'note-externallink' |\r\n 'note-important' |\r\n 'note' |\r\n 'note-assurance' |\r\n 'note-share' |\r\n 'custom';\r\n children: React.ReactNode;\r\n className?: string;\r\n icon?: boolean | React.ReactNode; // Allow React node\r\n sx?: SxProps<Theme>; \r\n}\r\n\r\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\r\n const variants = {\r\n info: {\r\n backgroundColor: '#eff6ff',\r\n borderColor: '#bfdbfe',\r\n color: '#1e3a8a',\r\n },\r\n success: {\r\n backgroundColor: '#f0fdf4',\r\n borderColor: '#bbf7d0',\r\n color: '#14532d',\r\n },\r\n warning: {\r\n backgroundColor: '#fefce8',\r\n borderColor: '#fef08a',\r\n color: '#713f12',\r\n },\r\n error: {\r\n backgroundColor: '#fef2f2',\r\n borderColor: '#fecaca',\r\n color: '#7f1d1d',\r\n },\r\n 'note-internallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-externallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-important': {\r\n backgroundColor: '#FDEDED',\r\n borderColor: '#EDA6A6',\r\n color: '#5F2120',\r\n },\r\n 'note-assurance': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-share': {\r\n backgroundColor: '#F8F0FC',\r\n borderColor: '#C269FA',\r\n color: '#4D3019',\r\n },\r\n custom: {\r\n backgroundColor: theme.palette.light.main,\r\n borderColor: `${theme.palette.dark.main}33`,\r\n color: theme.palette.dark.main,\r\n },\r\n };\r\n\r\n const variantKey = customvariant as keyof typeof variants || 'info';\r\n const style = variants[variantKey];\r\n\r\n return {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(2),\r\n border: `1px solid ${style.borderColor}`,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: style.backgroundColor,\r\n color: style.color,\r\n '& .MuiAlert-icon': {\r\n marginRight: 0,\r\n padding: 0,\r\n marginTop: '2px',\r\n },\r\n '& .MuiAlert-message': {\r\n padding: 0,\r\n flex: 1,\r\n },\r\n };\r\n});\r\n\r\nexport const Alert: React.FC<AlertProps> = ({\r\n variant = 'info',\r\n children,\r\n className = '',\r\n icon = true,\r\n sx,\r\n}) => {\r\n const iconMap = {\r\n info: <InfoOutlineRounded sx={{fontSize: 20, color:'#1e3a8a'}} />,\r\n success: <TaskAltRounded sx={{fontSize: 20}} />,\r\n warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\r\n error: <HighlightOffRounded sx={{fontSize: 20}} />,\r\n 'note-internallink': <LinkRounded sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-externallink': <OpenInNewOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note': <NoteOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-important': <InfoOutlineRounded sx={{fontSize: 20, color:'#D32F2F'}} />,\r\n 'note-assurance': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-share': <InfoOutlineRounded sx={{fontSize: 20, color:'#C571FA'}} />,\r\n custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\r\n };\r\n\r\n const severityMap: Record<string, MuiAlertProps['severity'] | undefined> = {\r\n info: 'info',\r\n success: 'success',\r\n warning: 'warning',\r\n error: 'error',\r\n custom: 'info',\r\n 'note-internallink': undefined,\r\n 'note-externallink': undefined,\r\n 'note-important': undefined,\r\n 'note': undefined,\r\n 'note-assurance': undefined,\r\n 'note-share': undefined,\r\n };\r\n\r\n\r\n const getIcon = () => {\r\n if (icon === false) return false;\r\n if (icon === true) return iconMap[variant];\r\n return icon; // Custom icon passed\r\n };\r\n\r\n return (\r\n <StyledAlert\r\n customvariant={variant}\r\n severity={severityMap[variant]}\r\n icon={getIcon()}\r\n className={className}\r\n sx={sx}\r\n >\r\n {children}\r\n </StyledAlert>\r\n );\r\n};"],"names":["MuiAlert","_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Alert as MuiAlert, AlertProps as MuiAlertProps, styled, SxProps, Theme } from '@mui/material';\r\nimport { ErrorOutlineRounded, HighlightOffRounded, InfoOutlineRounded, LinkRounded, NoteOutlined, OpenInNewOutlined, TaskAltRounded } from '@mui/icons-material';\r\n\r\ninterface AlertProps {\r\n variant?: 'info' |\r\n 'success' |\r\n 'warning' |\r\n 'error' |\r\n 'note-internallink' |\r\n 'note-externallink' |\r\n 'note-important' |\r\n 'note' |\r\n 'note-assurance' |\r\n 'note-share' |\r\n 'note-task' |\r\n 'custom';\r\n children: React.ReactNode;\r\n className?: string;\r\n icon?: boolean | React.ReactNode; // Allow React node\r\n sx?: SxProps<Theme>; \r\n}\r\n\r\nconst StyledAlert = styled(MuiAlert)<{ customvariant?: string }>(({ theme, customvariant }) => {\r\n const variants = {\r\n info: {\r\n backgroundColor: '#eff6ff',\r\n borderColor: '#bfdbfe',\r\n color: '#1e3a8a',\r\n },\r\n success: {\r\n backgroundColor: '#f0fdf4',\r\n borderColor: '#bbf7d0',\r\n color: '#14532d',\r\n },\r\n warning: {\r\n backgroundColor: '#fefce8',\r\n borderColor: '#fef08a',\r\n color: '#713f12',\r\n },\r\n error: {\r\n backgroundColor: '#fef2f2',\r\n borderColor: '#fecaca',\r\n color: '#7f1d1d',\r\n },\r\n 'note-internallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-externallink': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note': {\r\n backgroundColor: '#FDFCEE',\r\n borderColor: '#ECE8DF',\r\n color: '#4D3019',\r\n },\r\n 'note-important': {\r\n backgroundColor: '#FDEDED',\r\n borderColor: '#EDA6A6',\r\n color: '#5F2120',\r\n },\r\n 'note-task': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-assurance': {\r\n backgroundColor: '#FFF4E5',\r\n borderColor: '#F9C18F',\r\n color: '#4D3019',\r\n },\r\n 'note-share': {\r\n backgroundColor: '#F8F0FC',\r\n borderColor: '#C269FA',\r\n color: '#4D3019',\r\n },\r\n custom: {\r\n backgroundColor: theme.palette.light.main,\r\n borderColor: `${theme.palette.dark.main}33`,\r\n color: theme.palette.dark.main,\r\n },\r\n };\r\n\r\n const variantKey = customvariant as keyof typeof variants || 'info';\r\n const style = variants[variantKey];\r\n\r\n return {\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n gap: theme.spacing(1.5),\r\n padding: theme.spacing(2),\r\n marginBottom: theme.spacing(1.5),\r\n border: `1px solid ${style.borderColor}`,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: style.backgroundColor,\r\n color: style.color,\r\n '& .MuiAlert-icon': {\r\n marginRight: 0,\r\n padding: 0,\r\n marginTop: '2px',\r\n },\r\n '& .MuiAlert-message': {\r\n padding: 0,\r\n flex: 1,\r\n },\r\n };\r\n});\r\n\r\nexport const Alert: React.FC<AlertProps> = ({\r\n variant = 'info',\r\n children,\r\n className = '',\r\n icon = true,\r\n sx,\r\n}) => {\r\n const iconMap = {\r\n info: <InfoOutlineRounded sx={{fontSize: 20, color:'#1e3a8a'}} />,\r\n success: <TaskAltRounded sx={{fontSize: 20}} />,\r\n warning: <ErrorOutlineRounded sx={{fontSize: 20}} />,\r\n error: <HighlightOffRounded sx={{fontSize: 20}} />,\r\n 'note-internallink': <LinkRounded sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-externallink': <OpenInNewOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note': <NoteOutlined sx={{fontSize: 20, color:'#4D3019'}} />,\r\n 'note-important': <InfoOutlineRounded sx={{fontSize: 20, color:'#D32F2F'}} />,\r\n 'note-assurance': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-task': <TaskAltRounded sx={{fontSize: 20, color:'#FF9800'}} />,\r\n 'note-share': <InfoOutlineRounded sx={{fontSize: 20, color:'#C571FA'}} />,\r\n custom: <InfoOutlineRounded sx={{fontSize: 20}} />,\r\n };\r\n\r\n const severityMap: Record<string, MuiAlertProps['severity'] | undefined> = {\r\n info: 'info',\r\n success: 'success',\r\n warning: 'warning',\r\n error: 'error',\r\n custom: 'info',\r\n 'note-internallink': undefined,\r\n 'note-externallink': undefined,\r\n 'note-important': undefined,\r\n 'note': undefined,\r\n 'note-task': undefined,\r\n 'note-assurance': undefined,\r\n 'note-share': undefined,\r\n };\r\n\r\n\r\n const getIcon = () => {\r\n if (icon === false) return false;\r\n if (icon === true) return iconMap[variant];\r\n return icon; // Custom icon passed\r\n };\r\n\r\n return (\r\n <StyledAlert\r\n customvariant={variant}\r\n severity={severityMap[variant]}\r\n icon={getIcon()}\r\n className={className}\r\n sx={sx}\r\n >\r\n {children}\r\n </StyledAlert>\r\n );\r\n};"],"names":["MuiAlert","_jsx"],"mappings":"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"}
|
|
@@ -174,8 +174,7 @@ const Header = ({ userName = 'John Doe', userInitials = 'JD', toggleMenu, signOu
|
|
|
174
174
|
const handleClose = () => {
|
|
175
175
|
setAnchorEl(null);
|
|
176
176
|
};
|
|
177
|
-
return (jsxs(StyledHeader, { children: [signUpStatus === 'Active' && (jsxs(Fragment, { children: [jsx(IconButton, { disableRipple: true, onClick: toggleMenu, sx: { display: { xs: 'block', md: 'none' } }, size: "large"
|
|
178
|
-
, children: jsx(MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsx(Divider, { orientation: "vertical", sx: {
|
|
177
|
+
return (jsxs(StyledHeader, { children: [signUpStatus === 'Active' && (jsxs(Fragment, { children: [jsx(IconButton, { disableRipple: true, onClick: toggleMenu, sx: { display: { xs: 'block', md: 'none' } }, size: "large", children: jsx(MenuRounded, { sx: { fontSize: 32, color: 'white' } }) }), jsx(Divider, { orientation: "vertical", sx: {
|
|
179
178
|
color: '#FFFFFF',
|
|
180
179
|
borderRightWidth: 2,
|
|
181
180
|
display: { xs: 'block', md: 'none' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: () => void;\r\n signUpStatus: SignUpStatus;\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '32rem', // max-w-2xl\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n signUpStatus,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n return (\r\n <StyledHeader>\r\n {signUpStatus === 'Active' && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }} // show on mobile only\r\n size=\"large\" // optional: keeps touch target ~48px in MUI v5+\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg/>\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Search input for md+ screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchContainer >\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\r\n InputProps={{\r\n endAdornment: (\r\n <StyledSearchButton>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n ),\r\n }}\r\n />\r\n </StyledSearchContainer>\r\n } */}\r\n\r\n <StyledUserContainer>\r\n {/* Search button only visible on XS screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchButton\r\n disableRipple\r\n onClick={search}\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83'\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n } */}\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={()=>{signOut(); handleClose();}}\r\n />\r\n </StyledHeader>\r\n );\r\n};"],"names":["Logo","React","_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../src/components/Header.tsx"],"sourcesContent":["\r\n\r\nimport React from 'react';\r\nimport { Box, styled, Typography, TextField, IconButton, Divider } from '@mui/material';\r\nimport { useTheme } from '../ThemeProvider';\r\nimport { MenuRounded, SchoolRounded, SearchRounded } from '@mui/icons-material';\r\nimport PopoverMenu from './PopoverMenu';\r\nimport { ReactComponent as Logo } from '../images/PrimaryLogo_Variation_Cream.svg';\r\n\r\ntype SignUpStatus = 'Withdrawn' | 'Onboarding' | 'Active' | 'In Review';\r\ninterface HeaderProps {\r\n userName?: string;\r\n userInitials?: string;\r\n toggleMenu: () => void;\r\n signOut: () => void;\r\n search?: () => void;\r\n signUpStatus: SignUpStatus;\r\n}\r\n\r\nconst StyledHeader = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n backgroundColor: theme.palette.primary.main, // var(--color-primary)\r\n [theme.breakpoints.up('md')]: {\r\n gap: theme.spacing(4), // md:gap-4\r\n padding: theme.spacing(1.5, 1.5), // px-4 py-3\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n padding: 0, // px-4 py-3\r\n },\r\n}));\r\n\r\nconst StyledLogoWrapper = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(1.5),\r\n gap: theme.spacing(2),\r\n height: '64px', \r\n}));\r\n\r\n\r\nconst StyledLogoIcon = styled(Box)(({ theme }) => ({\r\n width: '100%',\r\n height: '100%',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n}));\r\n\r\n\r\nconst StyledLogoText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 700, // font-bold\r\n letterSpacing: '0.05em', // tracking-wide\r\n fontSize: '1.5rem', // text-2xl\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '1.25rem', // sm:text-xl\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.125rem', // text-lg\r\n },\r\n}));\r\n\r\nconst StyledLogoSvg = styled(Logo)`\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n`;\r\n\r\n\r\nconst StyledSearchContainer = styled(Box)(({ theme }) => ({\r\n flex: 1,\r\n maxWidth: '32rem', // max-w-2xl\r\n margin: theme.spacing(0, 2), // mx-8\r\n position: 'relative',\r\n}));\r\n\r\nconst StyledTextField = styled(TextField)(({ theme }) => ({\r\n '& .MuiInputBase-root': {\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n borderRadius: '9999px', // rounded-full\r\n fontSize: '1rem', // text-base\r\n [theme.breakpoints.down('md')]: {\r\n paddingRight: theme.spacing(5), // sm:pr-10\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n },\r\n '& .MuiInputBase-input': {\r\n padding: theme.spacing(1.5, 3), // px-4 py-2\r\n [theme.breakpoints.up('md')]: {\r\n padding: theme.spacing(1.5, 4), // md:px-6 md:py-3\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n padding: theme.spacing(1.5, 2.5), // sm:px-5\r\n },\r\n },\r\n '& .MuiInputBase-input::placeholder': {\r\n color: `${theme.palette.dark.main}99`, // placeholder-[#4D3019]/60\r\n opacity: 1,\r\n },\r\n '& .MuiInputBase-root:focus-within': {\r\n outline: `2px solid ${theme.palette.light.main}`, // focus:ring-2 focus:ring-[#FDFCEE]\r\n outlineOffset: 0,\r\n },\r\n}));\r\n\r\nconst StyledSearchButton = styled(IconButton)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'static',\r\n borderRadius: '50%',\r\n backgroundColor: theme.palette.primary.main,\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5),\r\n height: theme.spacing(5),\r\n marginRight: theme.spacing(1),\r\n },\r\n [theme.breakpoints.down('sm')]: {\r\n marginRight: theme.spacing(0.5),\r\n },\r\n '&:hover': {\r\n opacity: 0.9,\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst StyledSearchIcon = styled(Box)(({ theme }) => ({\r\n display: 'flex', \r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n color: theme.palette.light.main,\r\n width: '100%',\r\n height: '100%',\r\n '& svg': {\r\n fontSize: '1.5rem',\r\n [theme.breakpoints.down('sm')]: {\r\n fontSize: '1.25rem',\r\n },\r\n },\r\n}));\r\n\r\nconst StyledUserContainer = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(3), // md:gap-3\r\n [theme.breakpoints.down('md')]: {\r\n gap: 0,\r\n },\r\n}));\r\n\r\nconst StyledAvatar = styled(Box)(({ theme }) => ({\r\n width: theme.spacing(6), // md:w-12\r\n height: theme.spacing(6), // md:h-12\r\n borderRadius: '50%', // rounded-full\r\n backgroundColor: theme.palette.light.main, // bg-[#FDFCEE]\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flexShrink: 0,\r\n [theme.breakpoints.down('md')]: {\r\n width: theme.spacing(5), // sm:w-10\r\n height: theme.spacing(5), // sm:h-10\r\n }\r\n}));\r\n\r\nconst StyledAvatarText = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.dark.main, // text-[#4D3019]\r\n fontWeight: 700, // font-bold\r\n fontSize: '1.125rem', // text-lg\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n },\r\n}));\r\n\r\nconst StyledUserName = styled(Typography)(({ theme }) => ({\r\n color: theme.palette.light.main, // text-[#FDFCEE]\r\n fontWeight: 500, // font-medium\r\n marginLeft: theme.spacing(1),\r\n fontSize: '1.125rem', // text-lg\r\n display: 'none', // hidden\r\n [theme.breakpoints.up('sm')]: {\r\n display: 'inline', // sm:inline\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n fontSize: '0.875rem', // text-sm\r\n display: 'none'\r\n },\r\n}));\r\n\r\nexport const Header: React.FC<HeaderProps> = ({\r\n userName = 'John Doe',\r\n userInitials = 'JD',\r\n toggleMenu,\r\n signOut,\r\n search,\r\n signUpStatus,\r\n}) => {\r\n const theme = useTheme();\r\n const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n return (\r\n <StyledHeader>\r\n {signUpStatus === 'Active' && (\r\n <>\r\n <IconButton\r\n disableRipple\r\n onClick={toggleMenu}\r\n sx={{ display: { xs: 'block', md: 'none' } }}\r\n size=\"large\"\r\n >\r\n <MenuRounded sx={{ fontSize: 32, color: 'white' }} />\r\n </IconButton>\r\n\r\n <Divider\r\n orientation=\"vertical\"\r\n sx={{\r\n color: '#FFFFFF',\r\n borderRightWidth: 2,\r\n display: { xs: 'block', md: 'none' },\r\n }}\r\n />\r\n </>\r\n )}\r\n <StyledLogoWrapper>\r\n <StyledLogoIcon>\r\n <StyledLogoSvg/>\r\n </StyledLogoIcon>\r\n </StyledLogoWrapper>\r\n\r\n {/* Search input for md+ screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchContainer >\r\n <StyledTextField\r\n placeholder=\"Search for a policy\"\r\n variant=\"outlined\"\r\n fullWidth\r\n sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}\r\n InputProps={{\r\n endAdornment: (\r\n <StyledSearchButton>\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n ),\r\n }}\r\n />\r\n </StyledSearchContainer>\r\n } */}\r\n\r\n <StyledUserContainer>\r\n {/* Search button only visible on XS screens */}\r\n {/* {signUpStatus === 'Active' &&\r\n <StyledSearchButton\r\n disableRipple\r\n onClick={search}\r\n sx={{\r\n display: { xs: 'flex', md: 'none' },\r\n backgroundColor: '#ffffff83'\r\n }}\r\n >\r\n <StyledSearchIcon>\r\n <SearchRounded />\r\n </StyledSearchIcon>\r\n </StyledSearchButton>\r\n } */}\r\n <IconButton onClick={handleOpen} disableRipple>\r\n <StyledAvatar>\r\n <StyledAvatarText>{userInitials}</StyledAvatarText>\r\n </StyledAvatar>\r\n <StyledUserName>{userName}</StyledUserName>\r\n </IconButton>\r\n </StyledUserContainer>\r\n\r\n <PopoverMenu\r\n anchorEl={anchorEl}\r\n onClose={handleClose}\r\n signOut={()=>{signOut(); handleClose();}}\r\n />\r\n </StyledHeader>\r\n );\r\n};"],"names":["Logo","React","_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -70,6 +70,7 @@ const statusConfig = {
|
|
|
70
70
|
};
|
|
71
71
|
const NoteContainer = styled(Box)({
|
|
72
72
|
position: 'relative',
|
|
73
|
+
display: 'inline',
|
|
73
74
|
maxWidth: '100%',
|
|
74
75
|
});
|
|
75
76
|
// Uses highlight colors driven by status exclusively
|
|
@@ -79,7 +80,7 @@ const HighlightWrapper = styled(Box, {
|
|
|
79
80
|
prop !== 'highlightSelectedColor'
|
|
80
81
|
})(({ isHovered, highlightColor, highlightSelectedColor }) => ({
|
|
81
82
|
position: 'relative',
|
|
82
|
-
display: 'inline
|
|
83
|
+
display: 'inline',
|
|
83
84
|
maxWidth: '100%',
|
|
84
85
|
'&:hover .edit-button': {
|
|
85
86
|
opacity: 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\n\r\n// Status Enum\r\nenum VariableState {\r\n Accepted = \"Accepted\",\r\n Pending = \"Pending\",\r\n ActionRequired = \"Action Required\",\r\n Declined = \"Declined\",\r\n Draft = \"Draft\"\r\n}\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\r\n switch (status) {\r\n case \"Accepted\": return VariableState.Accepted;\r\n case \"Pending\": return VariableState.Pending;\r\n case \"Action Required\": return VariableState.ActionRequired;\r\n case \"Declined\": return VariableState.Declined;\r\n case \"Draft\": return VariableState.Draft;\r\n default: return undefined;\r\n }\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n labelColor: string;\r\n chipColor: string;\r\n chipTextColor: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n labelColor: '#2D5016',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#fff',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#F5A623',\r\n chipTextColor: '#4D3019',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n labelColor: '#CC0000',\r\n chipColor: '#F56B6B',\r\n chipTextColor: '#fff',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#4D3019',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n labelColor: 'rgba(0, 0, 0, 0.6)',\r\n chipColor: '#F5D76E',\r\n chipTextColor: '#fff',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) => \r\n prop !== 'isHovered' && \r\n prop !== 'highlightColor' && \r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline-block',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(50%, -50%)',\r\n width: 20,\r\n height: 20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status);\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n labelColor: 'rgba(0,0,0,0.6)',\r\n chipColor: '#ccc',\r\n chipTextColor: '#4D3019',\r\n };\r\n\r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={style.highlight}\r\n highlightSelectedColor={style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n >\r\n <span className=\"highlight-span\">{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n title=\"Edit variable highlight\"\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted \r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> \r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA;AACA,IAAK,aAMJ;AAND,CAAA,UAAK,aAAa,EAAA;AAChB,IAAA,aAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,gBAAA,CAAA,GAAA,iBAAkC;AAClC,IAAA,aAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EANI,aAAa,KAAb,aAAa,GAAA,EAAA,CAAA,CAAA;AAiBlB,SAAS,wBAAwB,CAAC,MAAe,EAAA;IAC/C,QAAQ,MAAM;AACZ,QAAA,KAAK,UAAU,EAAE,OAAO,aAAa,CAAC,QAAQ;AAC9C,QAAA,KAAK,SAAS,EAAE,OAAO,aAAa,CAAC,OAAO;AAC5C,QAAA,KAAK,iBAAiB,EAAE,OAAO,aAAa,CAAC,cAAc;AAC3D,QAAA,KAAK,UAAU,EAAE,OAAO,aAAa,CAAC,QAAQ;AAC9C,QAAA,KAAK,OAAO,EAAE,OAAO,aAAa,CAAC,KAAK;AACxC,QAAA,SAAS,OAAO,SAAS;;AAE7B;AAEA;AACA,MAAM,YAAY,GAUd;AACF,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,MAAM;AACtB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,UAAU,EAAE,wBAAwB;AACpC,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,SAAS;AACxB,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,YAAY,EAAE,OAAO;AACtB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,UAAU,EAAE,wBAAwB;AACpC,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,SAAS;AACzB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,iBAAiB,EAAE,SAAS;AAC5B,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,UAAU,EAAE,oBAAoB;AAChC,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,aAAa,EAAE,MAAM;AACtB,KAAA;CACF;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAChC,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,QAAQ,EAAE,MAAM;AACjB,CAAA,CAAC;AAEF;AACA,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,EAAE;IACnC,iBAAiB,EAAE,CAAC,IAAI,KACtB,IAAI,KAAK,WAAW;AACpB,QAAA,IAAI,KAAK,gBAAgB;AACzB,QAAA,IAAI,KAAK;AACZ,CAAA,CAAC,CAIC,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM;AAC7D,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,sBAAsB,EAAE;AACtB,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACD,IAAA,mBAAmB,EAAE;QACnB,UAAU,EAAE,SAAS,GAAG,sBAAsB,GAAG,cAAc;AAC/D,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,YAAY,EAAE,iCAAiC;AAC/C,QAAA,kBAAkB,EAAE,OAAO;AAC3B,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,UAAU,EAAE,sBAAsB;AAClC,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,YAAY,EAAE,YAAY;AAC1B,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM;AACpD,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,GAAG,EAAE,CAAC;AACN,IAAA,KAAK,EAAE,CAAC;AACR,IAAA,SAAS,EAAE,sBAAsB;AACjC,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK;UAC/C,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,EAAE;UACrC,KAAK,CAAC,KAAK,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC;AACtC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,OAAO,EAAE,CAAC;AACV,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,4BAA4B;AACvC,IAAA,SAAS,EAAE;AACT,QAAA,eAAe,EAAE,SAAS;AAC1B,QAAA,SAAS,EAAE,iCAAiC;AAC7C,KAAA;AACF,CAAA,CAAC,CAAC;MAEU,OAAO,GAA2B,CAAC,EAC9C,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;AAGjD,IAAA,MAAM,aAAa,GAAG,wBAAwB,CAAC,MAAM,CAAC;IACtD,MAAM,KAAK,GAAG;AACZ,UAAE,YAAY,CAAC,aAAa;AAC5B,UAAE;AACE,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,iBAAiB,EAAE,OAKpB;IAEL,QACEA,KAAC,aAAa,EAAA,EAAC,SAAS,EAAE,SAAS,aAEhC,aAAa,IAAI,KAAK,CAAC,YAAY,IAAI,IAAI,KAC1CC,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAA,QAAA,EAC9C,IAAI,GACC,CACT,EAGDD,KAAC,gBAAgB,EAAA,EACf,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,KAAK,CAAC,SAAS,EAC/B,sBAAsB,EAAE,KAAK,CAAC,iBAAiB,EAC/C,YAAY,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,aAEvCC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,EAClDA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,CAAC,CAAC,eAAe,EAAE;4BACnB,IAAI,WAAW,EAAE;AACf,gCAAA,WAAW,EAAE;4BACf;AACF,wBAAA,CAAC,EACD,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EAAA,QAAA,EAEX,aAAa,KAAK,aAAa,CAAC;AAC/B,8BAAEA,GAAA,CAAC,YAAY,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,EAAE,EAAA;8BACpEA,GAAA,CAAC,WAAW,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,EAAE,GAAI,EAAA,CAChE,CAAA,EAAA,CACI,CAAA,EAAA,CACL;AAEpB;;;;"}
|
|
1
|
+
{"version":3,"file":"NoteBox.js","sources":["../../../../src/components/NoteBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Box, Typography, IconButton, styled, Chip } from '@mui/material';\r\nimport { CheckRounded, EditRounded } from '@mui/icons-material';\r\nimport { Alert } from './Alert';\r\n\r\n// Status Enum\r\nenum VariableState {\r\n Accepted = \"Accepted\",\r\n Pending = \"Pending\",\r\n ActionRequired = \"Action Required\",\r\n Declined = \"Declined\",\r\n Draft = \"Draft\"\r\n}\r\n\r\ninterface NoteBoxProps {\r\n status?: string; // Use only status now\r\n label?: string;\r\n note?: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n onEditClick?: () => void;\r\n}\r\n\r\nfunction mapStatusToVariableState(status?: string): VariableState | undefined {\r\n switch (status) {\r\n case \"Accepted\": return VariableState.Accepted;\r\n case \"Pending\": return VariableState.Pending;\r\n case \"Action Required\": return VariableState.ActionRequired;\r\n case \"Declined\": return VariableState.Declined;\r\n case \"Draft\": return VariableState.Draft;\r\n default: return undefined;\r\n }\r\n}\r\n\r\n// Status based color configs (from Modal)\r\nconst statusConfig: {\r\n [key in VariableState]: {\r\n highlight: string;\r\n highlightSelected: string;\r\n label: string;\r\n labelColor: string;\r\n chipColor: string;\r\n chipTextColor: string;\r\n alertVariant?: \"error\" | \"info\";\r\n }\r\n} = {\r\n Accepted: {\r\n highlight: '#EDF9CD',\r\n highlightSelected: '#DBF59A',\r\n label: 'Accepted',\r\n labelColor: '#2D5016',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#fff',\r\n },\r\n Pending: {\r\n highlight: '#F5E2FF',\r\n highlightSelected: '#EBC7FF',\r\n label: 'Pending',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#F5A623',\r\n chipTextColor: '#4D3019',\r\n alertVariant: 'info',\r\n },\r\n 'Action Required': {\r\n highlight: '#FBEEEE',\r\n highlightSelected: '#FFBCB3',\r\n label: 'ActionRequired',\r\n labelColor: '#CC0000',\r\n chipColor: '#F56B6B',\r\n chipTextColor: '#fff',\r\n alertVariant: 'error',\r\n },\r\n 'Declined': {\r\n highlight: '#FFF6D1',\r\n highlightSelected: '#FDE58E',\r\n label: 'Declined',\r\n labelColor: 'var(--color-secondary)',\r\n chipColor: '#A3D977',\r\n chipTextColor: '#4D3019',\r\n },\r\n Draft: {\r\n highlight: '#FFEACD',\r\n highlightSelected: '#FFC365',\r\n label: 'Draft',\r\n labelColor: 'rgba(0, 0, 0, 0.6)',\r\n chipColor: '#F5D76E',\r\n chipTextColor: '#fff',\r\n },\r\n};\r\n\r\nconst NoteContainer = styled(Box)({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n});\r\n\r\n// Uses highlight colors driven by status exclusively\r\nconst HighlightWrapper = styled(Box, {\r\n shouldForwardProp: (prop) => \r\n prop !== 'isHovered' && \r\n prop !== 'highlightColor' && \r\n prop !== 'highlightSelectedColor'\r\n})<{\r\n isHovered: boolean;\r\n highlightColor: string;\r\n highlightSelectedColor: string;\r\n}>(({ isHovered, highlightColor, highlightSelectedColor }) => ({\r\n position: 'relative',\r\n display: 'inline',\r\n maxWidth: '100%',\r\n '&:hover .edit-button': {\r\n opacity: 1,\r\n },\r\n '& .highlight-span': {\r\n background: isHovered ? highlightSelectedColor : highlightColor,\r\n padding: '2px 4px',\r\n borderBottom: '2px solid rgba(77, 48, 25, 0.3)',\r\n boxDecorationBreak: 'clone',\r\n WebkitBoxDecorationBreak: 'clone',\r\n transition: 'background 0.2s ease',\r\n cursor: 'pointer',\r\n fontSize: '1rem',\r\n wordWrap: 'break-word',\r\n overflowWrap: 'break-word',\r\n display: 'inline',\r\n color: '#4D3019',\r\n },\r\n}));\r\n\r\nconst EditButton = styled(IconButton)(({ theme }) => ({\r\n position: 'absolute',\r\n top: 0,\r\n right: 0,\r\n transform: 'translate(50%, -50%)',\r\n width: 20,\r\n height: 20,\r\n borderRadius: (typeof theme.shape.borderRadius === 'string'\r\n ? parseInt(theme.shape.borderRadius, 10)\r\n : theme.shape.borderRadius || 4) * 2,\r\n backgroundColor: '#4D3019',\r\n opacity: 0,\r\n transition: 'all 0.2s ease',\r\n boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n '&:hover': {\r\n backgroundColor: '#4D3019',\r\n transform: 'translate(50%, -50%) scale(1.1)',\r\n },\r\n}));\r\n\r\nexport const NoteBox: React.FC<NoteBoxProps> = ({\r\n status,\r\n label,\r\n note,\r\n children,\r\n className = '',\r\n onEditClick,\r\n}) => {\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n // Map current status\r\n const variableState = mapStatusToVariableState(status);\r\n const style = variableState\r\n ? statusConfig[variableState]\r\n : {\r\n highlight: '#EEE',\r\n highlightSelected: '#DDD',\r\n label: label || '',\r\n labelColor: 'rgba(0,0,0,0.6)',\r\n chipColor: '#ccc',\r\n chipTextColor: '#4D3019',\r\n };\r\n\r\n return (\r\n <NoteContainer className={className}>\r\n {/* Alert for note when status matches and note available */}\r\n {variableState && style.alertVariant && note && (\r\n <Alert variant={style.alertVariant} sx={{ mb: 1 }}>\r\n {note}\r\n </Alert>\r\n )}\r\n\r\n {/* Highlighted content box */}\r\n <HighlightWrapper\r\n isHovered={isHovered}\r\n highlightColor={style.highlight}\r\n highlightSelectedColor={style.highlightSelected}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n >\r\n <span className=\"highlight-span\">{children}</span>\r\n <EditButton\r\n className=\"edit-button\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (onEditClick) {\r\n onEditClick();\r\n }\r\n }}\r\n title=\"Edit variable highlight\"\r\n size=\"small\"\r\n >\r\n {variableState === VariableState.Accepted \r\n ? <CheckRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> \r\n : <EditRounded sx={{ fontSize: 14, color: \"#FFFFFF\", strokeWidth: 2 }} /> }\r\n </EditButton>\r\n </HighlightWrapper>\r\n </NoteContainer>\r\n );\r\n};\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|