-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2573 from bcgov/feature/DESENG-663-engagement-aut…
…horing-wizard-design-compliance [To Main] Implement UX designs for engagement wizard
- Loading branch information
Showing
22 changed files
with
1,202 additions
and
579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
met-web/src/components/common/Communication/StatusIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React from 'react'; | ||
| import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'; | ||
| import { | ||
| faInfoCircle, | ||
| faExclamationTriangle, | ||
| faExclamationCircle, | ||
| faCheckCircle, | ||
| } from '@fortawesome/pro-solid-svg-icons'; | ||
| import { | ||
| faInfoCircle as faInfoCircleRegular, | ||
| faExclamationTriangle as faExclamationTriangleRegular, | ||
| faExclamationCircle as faExclamationCircleRegular, | ||
| faCheckCircle as faCheckCircleRegular, | ||
| } from '@fortawesome/pro-regular-svg-icons'; | ||
| import { | ||
| faCheckCircle as faCheckCircleLight, | ||
| faExclamationCircle as faExclamationCircleLight, | ||
| faExclamationTriangle as faExclamationTriangleLight, | ||
| faInfoCircle as faInfoCircleLight, | ||
| } from '@fortawesome/pro-light-svg-icons'; | ||
|
|
||
| import { colors } from 'styles/Theme'; | ||
|
|
||
| type IconWeight = 'solid' | 'regular' | 'light'; | ||
|
|
||
| export const StatusIcon = ({ | ||
| status, | ||
| color, | ||
| weight = 'solid', | ||
| ...props | ||
| }: { | ||
| status: 'success' | 'warning' | 'error' | 'info'; | ||
| color?: string; | ||
| weight?: IconWeight; | ||
| } & Partial<FontAwesomeIconProps>) => { | ||
| let iconMap = { | ||
| success: faCheckCircle, | ||
| warning: faExclamationTriangle, | ||
| error: faExclamationCircle, | ||
| info: faInfoCircle, | ||
| }; | ||
| if (weight === 'regular') { | ||
| iconMap = { | ||
| success: faCheckCircleRegular, | ||
| warning: faExclamationTriangleRegular, | ||
| error: faExclamationCircleRegular, | ||
| info: faInfoCircleRegular, | ||
| }; | ||
| } | ||
| if (weight === 'light') { | ||
| iconMap = { | ||
| success: faCheckCircleLight, | ||
| warning: faExclamationTriangleLight, | ||
| error: faExclamationCircleLight, | ||
| info: faInfoCircleLight, | ||
| }; | ||
| } | ||
|
|
||
| return <FontAwesomeIcon icon={iconMap[status]} color={color ?? colors.notification[status].icon} {...props} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import React, { useId } from 'react'; | ||
| import { Box, Grid } from '@mui/material'; | ||
| import { | ||
| faCircle1, | ||
| faCircle2, | ||
| faCircle3, | ||
| faCircle4, | ||
| faCircle5, | ||
| faCircle6, | ||
| faCircle7, | ||
| faCircle8, | ||
| faCircle9, | ||
| } from '@fortawesome/pro-regular-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'; | ||
| import { colors } from 'styles/Theme'; | ||
| import { BodyText, Header2 } from '../Typography'; | ||
|
|
||
| const circleNumberIcons = [ | ||
| faCircle1, | ||
| faCircle2, | ||
| faCircle3, | ||
| faCircle4, | ||
| faCircle5, | ||
| faCircle6, | ||
| faCircle7, | ||
| faCircle8, | ||
| faCircle9, | ||
| ]; | ||
|
|
||
| export const FormStep = ({ | ||
| step, | ||
| completing, | ||
| completed, | ||
| question, | ||
| details, | ||
| labelFor, | ||
| isGroup, | ||
| children, | ||
| }: { | ||
| step: number; | ||
| completing?: boolean; | ||
| completed?: boolean; | ||
| question?: string; | ||
| details?: string; | ||
| labelFor?: string; | ||
| isGroup?: boolean; | ||
| children?: React.ReactNode; | ||
| }) => { | ||
| const [isFocused, setIsFocused] = React.useState(false); | ||
| const activityColor = completed || completing || isFocused ? colors.surface.blue[90] : colors.surface.gray[70]; | ||
| const titleId = useId(); | ||
| const instructionsId = useId(); | ||
|
|
||
| return ( | ||
| <Grid | ||
| onFocus={() => setIsFocused(true)} | ||
| onBlur={() => setIsFocused(false)} | ||
| container | ||
| direction="row" | ||
| justifyContent="flex-start" | ||
| alignItems="stretch" | ||
| spacing={1} | ||
| sx={{ | ||
| padding: '1rem', | ||
| backgroundColor: 'white', | ||
| marginBottom: '1rem', | ||
| maxWidth: '100%', | ||
| }} | ||
| > | ||
| <Grid | ||
| item | ||
| container | ||
| alignItems="stretch" | ||
| direction="column" | ||
| gap={1} | ||
| sx={{ pt: 1.25, fontSize: '16px', width: '3rem' }} | ||
| > | ||
| <Grid item> | ||
| <FontAwesomeIcon | ||
| icon={completed ? faCircleCheck : circleNumberIcons[step - 1]} | ||
| color={activityColor} | ||
| size="2x" | ||
| /> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Box | ||
| sx={{ | ||
| height: '100%', | ||
| width: '1rem', | ||
| borderRight: '1px solid', | ||
| borderColor: activityColor, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid | ||
| item | ||
| container | ||
| xs | ||
| justifyContent="flex-start" | ||
| alignItems="flex-start" | ||
| pb="16px" | ||
| component={isGroup ? 'fieldset' : 'div'} | ||
| aria-labelledby={titleId + ' ' + instructionsId} | ||
| sx={{ border: 'none' }} | ||
| > | ||
| <Grid item xs={12}> | ||
| <Header2 sx={{ mt: 0, fontSize: '20px', fontWeight: '300' }}> | ||
| <label htmlFor={isGroup ? undefined : labelFor} id={titleId}> | ||
| {question} | ||
| </label> | ||
| </Header2> | ||
| </Grid> | ||
| {details && ( | ||
| <Grid item sx={{ marginTop: '-0.5rem', marginBottom: '1.5rem' }}> | ||
| <BodyText size="small"> | ||
| <label htmlFor={isGroup ? undefined : labelFor} id={instructionsId}> | ||
| {details} | ||
| </label> | ||
| </BodyText> | ||
| </Grid> | ||
| )} | ||
| <Grid item xs={12}> | ||
| {children} | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| ); | ||
| }; |
Oops, something went wrong.