Skip to content

Commit

Permalink
Merge pull request #2547 from bcgov/feature/DESENG-634-engagement-cards
Browse files Browse the repository at this point in the history 
[To Main] DESENG-634: Update engagement cards; add suggested engagements block
  • Loading branch information
@NatSquared
NatSquared authored Jun 27, 2024
2 parents 4ee26b0 + 160b14f commit dcee2a8
Show file tree
Hide file tree
Showing 17 changed files with 534 additions and 402 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
## June 26, 2024

- **Feature** Redesigned Engagement Cards & added Suggested Engagements to the engagement page [🎟️ DESENG-634](https://citz-gdx.atlassian.net/browse/DESENG-634)
- Redesigned the engagement cards to match the new design system
- Added a new section to the engagement page to display suggested engagements
- Engagement cards now take you to the "new look" route
- Tweaks to the engagement list page layout
- Minor tweaks to the engagement view page layout

## June 24, 2024

- **Feature** Add a new survey block to the engagement page [🎟️ DESENG-633](https://citz-gdx.atlassian.net/browse/DESENG-633)
Expand Down
13 changes: 8 additions & 5 deletions met-web/src/components/common/Indicators/StatusChip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import React from 'react';
import { Chip as MuiChip, Skeleton } from '@mui/material';
import { Chip as MuiChip, Skeleton, useTheme } from '@mui/material';
import { colors } from '..';
import { SubmissionStatus } from 'constants/engagementStatus';

export interface ChipProps {
label?: string;
invert?: boolean;
statusId: SubmissionStatus;
}

Expand All @@ -24,8 +23,10 @@ export const getStatusFromStatusId = (statusId: SubmissionStatus): StatusText =>
}
};

export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel, statusId: status, invert }) => {
export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel, statusId: status }) => {
const statusText = getStatusFromStatusId(status);
const theme = useTheme();
const invert = theme.palette.mode === 'dark';
return (
<MuiChip
label={customLabel || statusText}
Expand All @@ -37,21 +38,23 @@ export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel,
alignItems: 'center',
gap: '10px',
flexShrink: 0,
borderWidth: '1px',
border: '2px solid',
borderColor: 'transparent',
borderRadius: '24px',
boxSizing: 'border-box',
'&>.MuiChip-label': {
padding: '4px 16px',
fontSize: '14px',
fontWeight: 700,
lineHeight: '16px',
position: 'relative',
bottom: '1px',
},
'&.status-chip-open': {
backgroundColor: colors.surface.blue[80],
color: colors.type.inverted.primary,
'&.status-chip-invert': {
backgroundColor: 'transparent',
borderWidth: '2px',
borderColor: colors.surface.white,
},
},
Expand Down
7 changes: 6 additions & 1 deletion met-web/src/components/common/Navigation/Link.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
import { NavLink } from 'react-router-dom';
import { LinkProps, NavLink } from 'react-router-dom';
import { colors } from '..';

interface FocusableNavLinkProps extends MuiLinkProps {
Expand Down Expand Up @@ -59,3 +59,8 @@ export const Link: React.FC<FocusableNavLinkProps> = ({
</MuiLink>
);
};

/* Adapter for elements expecting Mui's Link component, allowing them to use react-router's Link component */
export const RouterLinkRenderer = ({ href, ...props }: Omit<LinkProps, 'to'> & { href: string }) => (
<Link to={href} {...props} />
);
3 changes: 3 additions & 0 deletions met-web/src/components/common/Typography/Headers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,18 @@ export const Header2 = ({
children,
decorated = false,
weight,
component,
...props
}: {
children: React.ReactNode;
decorated?: boolean;
weight?: 'bold' | 'regular' | 'thin';
component?: React.ElementType;
} & TypographyProps) => {
return (
<Typography
variant="h2"
component={component || 'h2'}
{...props}
sx={{
lineHeight: '1.5',
Expand Down
43 changes: 23 additions & 20 deletions met-web/src/components/engagement/new/view/EngagementDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,26 +82,29 @@ export const EngagementDescription = () => {
</Await>
</Suspense>
</Grid>
<Grid
item
sx={{
width: { xs: '100%', md: '47.5%' },
display: 'flex',
minHeight: '360px',
marginBottom: '48px',
}}
>
<Suspense fallback={<Skeleton variant="rectangular" sx={{ width: '100%', height: '360px' }} />}>
<ThemeProvider theme={BaseTheme}>
<Await resolve={widgets}>
{(resolvedWidgets: Widget[]) => {
const widget = resolvedWidgets?.[0];
return widget && <WidgetSwitch widget={widget} />;
}}
</Await>
</ThemeProvider>
</Suspense>
</Grid>
<Suspense fallback={<Skeleton variant="rectangular" sx={{ width: '100%', height: '360px' }} />}>
<ThemeProvider theme={BaseTheme}>
<Await resolve={widgets}>
{(resolvedWidgets: Widget[]) => {
const widget = resolvedWidgets?.[0];
if (widget)
return (
<Grid
item
sx={{
width: { xs: '100%', md: '47.5%' },
display: 'flex',
minHeight: '360px',
marginBottom: '48px',
}}
>
<WidgetSwitch widget={widget} />;
</Grid>
);
}}
</Await>
</ThemeProvider>
</Suspense>
</Grid>
</ThemeProvider>
</section>
Expand Down
52 changes: 25 additions & 27 deletions met-web/src/components/engagement/new/view/EngagementSurveyBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
import { Switch, Case } from 'react-if';
import { useAppSelector, useAppTranslation } from 'hooks';
import EmailModal from 'components/engagement/view/EmailModal';
import { RouterLinkRenderer } from 'components/common/Navigation/Link';

const gridContainerStyles = {
width: '100%',
Expand Down Expand Up @@ -104,7 +105,7 @@ export const EngagementSurveyBlock = () => {
item
sx={{
width: { xs: '100%', md: '47.5%' },
display: 'flex',
display: statusBlock?.block_text ? 'flex' : 'none',
flexDirection: 'column',
minHeight: '120px',
marginBottom: '48px',
Expand All @@ -116,12 +117,14 @@ export const EngagementSurveyBlock = () => {
toolbarHidden
editorState={getEditorStateFromRaw(statusBlock?.block_text ?? '')}
/>
<EmailModal
engagement={engagement}
defaultPanel={currentPanel}
open={isEmailModalOpen}
handleClose={() => handleCloseEmailModal()}
/>
<ThemeProvider theme={BaseTheme}>
<EmailModal
engagement={engagement}
defaultPanel={currentPanel}
open={isEmailModalOpen}
handleClose={() => handleCloseEmailModal()}
/>
</ThemeProvider>
<Switch>
<Case condition={engagement.submission_status === SubmissionStatus.Open}>
<Button
Expand All @@ -136,26 +139,21 @@ export const EngagementSurveyBlock = () => {
</Button>
</Case>
<Case condition={engagement.submission_status === SubmissionStatus.Closed}>
<Grid
item
container
direction={{ xs: 'column', sm: 'row' }}
xs={12}
justifyContent="flex-end"
<Button
sx={{ mt: '40px' }}
variant="primary"
size="large"
icon={<FontAwesomeIcon fontSize={24} icon={faChevronRight} />}
iconPosition="right"
href={
isLoggedIn
? `/engagements/${engagement.id}/dashboard/public`
: `/engagements/${engagement.id}/dashboard/public/${language}`
}
LinkComponent={RouterLinkRenderer}
>
<Button
variant="primary"
size="small"
data-testid="SurveyBlock/view-feedback-button"
href={
isLoggedIn
? `/engagements/${engagement.id}/dashboard/public`
: `/engagements/${engagement.id}/dashboard/public/${language}`
}
>
{translate('buttonText.viewFeedback')}
</Button>
</Grid>
{translate('buttonText.viewFeedback')}
</Button>
</Case>
</Switch>
</Box>
Expand All @@ -164,7 +162,7 @@ export const EngagementSurveyBlock = () => {
item
sx={{
width: { xs: '100%', md: '47.5%' },
display: 'flex',
display: widget ? 'flex' : 'none',
minHeight: '360px',
marginBottom: '48px',
}}
Expand Down
Loading

0 comments on commit dcee2a8

Please sign in to comment.