Initial commit

bcgov · Jun 12, 2024 · e61897f · e61897f
1 parent 141efd6
commit e61897f
Show file tree

Hide file tree

Showing 18 changed files with 431 additions and 127 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,14 @@
+## June 11, 2024
+
+- **Feature** Add new header to "new look" engagement page [🎟️ DESENG-630](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-630)
+  - Added a new hero image to the new engagement page
+  - Added a header overlaying the hero image
+    - The header uses the sponsor name, CTA message, and CTA URL from DESENG-629, as well as the engagement title, dates, and status
+  - Added new engagement status chips for use in the header
+  - Added link from the old engagement page offering the option to preview the new engagement page
+  - Added global width limit to the public view to avoid display issues on very wide screens
+- **Task** De-duplicate link code and only use \<Link>s from the common/Navigation module
+
 ## June 10, 2024
 
 - **Feature** Add new fields for use in "new look" design [🎟️ DESENG-629](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-629)

diff --git a/met-web/src/components/appLayouts/PublicLayout.tsx b/met-web/src/components/appLayouts/PublicLayout.tsx
@@ -9,10 +9,11 @@ import { FeedbackModal } from 'components/feedback/FeedbackModal';
 import Footer from 'components/layout/Footer';
 import DocumentTitle from 'DocumentTitle';
 import ScrollToTop from 'components/scrollToTop';
+import { WidthLimiter } from 'components/common/Layout';
 
 export const PublicLayout = () => {
     return (
-        <>
+        <WidthLimiter>
             <DocumentTitle />
             <PageViewTracker />
             <Notification />
@@ -22,6 +23,6 @@ export const PublicLayout = () => {
             <Outlet />
             <FeedbackModal />
             <Footer />
-        </>
+        </WidthLimiter>
     );
 };
diff --git a/met-web/src/components/common/Indicators/StatusChip.tsx b/met-web/src/components/common/Indicators/StatusChip.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Chip as MuiChip } from '@mui/material';
+import { colors } from '..';
+import { SubmissionStatus } from 'constants/engagementStatus';
+
+export interface ChipProps {
+    label?: string;
+    invert?: boolean;
+    statusId: SubmissionStatus;
+}
+
+type StatusText = 'Open' | 'Upcoming' | 'Closed';
+
+export const getStatusFromStatusId = (statusId: SubmissionStatus): StatusText => {
+    switch (statusId) {
+        case SubmissionStatus.Open:
+            return 'Open';
+        case SubmissionStatus.Upcoming:
+            return 'Upcoming';
+        case SubmissionStatus.Closed:
+            return 'Closed';
+        default:
+            return 'Closed';
+    }
+};
+
+export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel, statusId: status, invert }) => {
+    const statusText = getStatusFromStatusId(status);
+    return (
+        <MuiChip
+            label={customLabel || statusText}
+            className={`status-chip status-chip-${statusText.toLowerCase()} ${invert ? 'status-chip-invert' : ''}`}
+            sx={{
+                display: 'inline-flex',
+                height: '28px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '10px',
+                flexShrink: 0,
+                borderWidth: '1px',
+                borderColor: 'transparent',
+                borderRadius: '24px',
+                '&>.MuiChip-label': {
+                    padding: '4px 16px',
+                    fontSize: '14px',
+                    fontWeight: 700,
+                    lineHeight: '16px',
+                },
+                '&.status-chip-open': {
+                    backgroundColor: colors.surface.blue[80],
+                    color: colors.type.inverted.primary,
+                    '&.status-chip-invert': {
+                        backgroundColor: 'transparent',
+                        borderWidth: '2px',
+                        borderColor: colors.surface.white,
+                    },
+                },
+                '&.status-chip-upcoming': {
+                    backgroundColor: 'transparent',
+                    color: colors.surface.blue[80],
+                    borderColor: colors.surface.blue[80],
+                    borderStyle: 'dashed',
+                    '&.status-chip-invert': {
+                        backgroundColor: 'transparent',
+                        borderColor: colors.surface.white,
+                        color: colors.type.inverted.primary,
+                    },
+                },
+                '&.status-chip-closed': {
+                    backgroundColor: colors.surface.gray[90],
+                    borderColor: colors.surface.gray[100],
+                    color: colors.surface.gray[40],
+                },
+            }}
+        />
+    );
+};
diff --git a/met-web/src/components/common/Indicators/index.ts b/met-web/src/components/common/Indicators/index.ts
@@ -0,0 +1 @@
+export { EngagementStatusChip } from './StatusChip';
diff --git a/met-web/src/components/common/Input/index.tsx b/met-web/src/components/common/Input/index.tsx
@@ -1,6 +1,5 @@
 export { Button, IconButton } from './Button';
 export { CustomTextField, TextInput, TextField, TextAreaField } from './TextInput';
 export { FormField } from './FormField';
-export { Link } from '../Navigation/Link';
 export { CommonSelect } from './Select';
 export { Pagination } from './Pagination';
diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
@@ -1,30 +1,13 @@
 import React from 'react';
-import { Box, BoxProps, Theme, useMediaQuery, useTheme } from '@mui/material';
+import { Box, BoxProps } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 
-const useDesktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md'));
-const useTabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm'));
-
 // A container that decreases its padding on smaller screens
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
-    const theme = useTheme();
-    const isDesktopOrLarger = useDesktopOrLarger(theme);
-    const isTabletOrLarger = useTabletOrLarger(theme);
-
-    const horizontalPadding = () => {
-        if (isDesktopOrLarger) {
-            return '2em';
-        } else if (isTabletOrLarger) {
-            return '1.5em';
-        } else {
-            return '1em';
-        }
-    };
-
     return (
         <Box
             sx={{
-                padding: `1.5em ${horizontalPadding()}`,
+                padding: { xs: '1.5em 1em', md: '1.5em 1.5em', lg: '1.5em 2em' },
             }}
             {...props}
         >
@@ -44,5 +27,33 @@ export const ResponsiveWrapper: React.FC = () => {
     );
 };
 
+export const WidthLimiter: React.FC<BoxProps & { innerProps?: BoxProps }> = ({ children, innerProps, ...props }) => {
+    return (
+        <Box
+            sx={{
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'transparent',
+                padding: 0,
+                margin: 0,
+                ...props.sx,
+            }}
+            {...props}
+        >
+            <Box
+                sx={{
+                    maxWidth: '1920px',
+                    margin: '0 auto',
+                    ...innerProps?.sx,
+                }}
+                {...innerProps}
+            >
+                {children}
+            </Box>
+        </Box>
+    );
+};
+
 export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table';
 export { DetailsContainer, Detail } from './Details';
diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx
@@ -10,7 +10,15 @@ interface FocusableNavLinkProps extends MuiLinkProps {
     size?: 'small' | 'regular' | 'large';
 }
 
-export const Link: React.FC<FocusableNavLinkProps> = ({ children, size = 'regular', to, href, onClick, ...props }) => {
+export const Link: React.FC<FocusableNavLinkProps> = ({
+    children,
+    size = 'regular',
+    to,
+    href,
+    onClick,
+    color,
+    ...props
+}) => {
     const fontSize = {
         small: '14px',
         regular: '16px',
@@ -21,16 +29,22 @@ export const Link: React.FC<FocusableNavLinkProps> = ({ children, size = 'regula
         regular: '1.5',
         large: '1.625',
     }[size];
+    const textColor = color ?? colors.surface.blue[90];
     return (
         <MuiLink
             onClick={onClick}
             component={to ? NavLink : 'a'}
             to={to}
             href={href}
             sx={{
+                color: textColor,
+                textDecorationColor: textColor,
                 '&:focus-visible': {
                     outline: `2px solid ${colors.focus.regular.outer}`,
-                    outlineOffset: '4px',
+                    outlineOffset: '2px',
+                    boxShadow: '0px 0px 0px 2px white',
+                    padding: '4px',
+                    margin: '-4px',
                 },
                 outline: 'none',
                 outlineOffset: '2px',

diff --git a/met-web/src/components/common/Typography/Body.tsx b/met-web/src/components/common/Typography/Body.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Typography, TypographyProps } from '@mui/material';
 import { globalFocusVisible, colors } from '../../common';
-import { Link as RouterLink } from 'react-router-dom';
+import { LinkProps, Link as RouterLink } from 'react-router-dom';
 
 export const BodyText = ({
     bold,
@@ -39,40 +39,25 @@ export const BodyText = ({
     );
 };
 
-export const Link = ({
-    bold,
-    size = 'regular',
+export const EyebrowText = ({
     children,
     ...props
 }: {
-    bold?: boolean;
-    size?: 'small' | 'regular' | 'large';
-    to: string;
     children: React.ReactNode;
-}) => {
-    const fontSize = {
-        small: '14px',
-        regular: '16px',
-        large: '18px',
-    }[size];
-    const lineHeight = {
-        small: '1.375',
-        regular: '1.5',
-        large: '1.625',
-    }[size];
+} & TypographyProps) => {
     return (
-        <RouterLink
-            style={{
-                lineHeight,
-                fontSize,
-                textDecoration: 'none',
-                fontWeight: bold ? 700 : 400,
-                color: colors.type.regular.link,
-                ...globalFocusVisible,
-            }}
+        <Typography
+            variant="body1"
             {...props}
+            sx={{
+                fontSize: '24px',
+                lineHeight: 'normal',
+                fontWeight: 300,
+                color: colors.surface.gray[90],
+                ...props.sx,
+            }}
         >
             {children}
-        </RouterLink>
+        </Typography>
     );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { EngagementStatusChip } from './StatusChip';