Merge pull request #2546 from bcgov/feature/DESENG-633-survey-block

[To Main] DESENG 633: Engagement Survey Block
bcgov · Jun 25, 2024 · 7cf9d13 · 7cf9d13
2 parents 18b019d + a57dacf
commit 7cf9d13
Show file tree

Hide file tree

Showing 20 changed files with 871 additions and 436 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
diff --git a/met-web/src/components/common/Indicators/StatusChip.tsx b/met-web/src/components/common/Indicators/StatusChip.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip as MuiChip } from '@mui/material';
+import { Chip as MuiChip, Skeleton } from '@mui/material';
 import { colors } from '..';
 import { SubmissionStatus } from 'constants/engagementStatus';
 
@@ -75,3 +75,7 @@ export const EngagementStatusChip: React.FC<ChipProps> = ({ label: customLabel,
         />
     );
 };
+
+export const StatusChipSkeleton = () => (
+    <Skeleton variant="rectangular" sx={{ width: '64px', height: '28px', borderRadius: '24px' }} />
+);
diff --git a/met-web/src/components/common/Input/Button.tsx b/met-web/src/components/common/Input/Button.tsx
@@ -1,5 +1,11 @@
 import React, { useState } from 'react';
-import { Button as MuiButton, ButtonProps as MuiButtonProps, Stack, IconButton as MuiIconButton } from '@mui/material';
+import {
+    Button as MuiButton,
+    ButtonProps as MuiButtonProps,
+    Stack,
+    IconButton as MuiIconButton,
+    useTheme,
+} from '@mui/material';
 import { globalFocusShadow, colors, elevations } from '../../common';
 import { isDarkColor } from 'utils';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
@@ -42,12 +48,25 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
     loading,
     ...buttonProps
 }) => {
+    const theme = useTheme();
+    const isDarkMode = theme.palette.mode === 'dark';
     const height: string = sizeMap[size];
+    if (color === 'default' && isDarkMode) {
+        color = '#ffffff';
+    }
     const customColor = colors.button[color as keyof typeof colors.button]?.shade ?? color;
     const bgColor = customColor;
     const darkBgColor = `color-mix(in srgb, ${bgColor}, black 20%)`;
     // Use inverted text color for dark backgrounds
-    const textColors = isDarkColor(bgColor, 0.4) ? colors.type.inverted : colors.type.regular;
+    const textColor = () => {
+        if (isDarkMode && color === '#ffffff') {
+            return colors.surface.blue[90];
+        }
+        if (isDarkColor(bgColor, 0.4)) {
+            return colors.type.inverted.primary;
+        }
+        return colors.type.regular.primary;
+    };
 
     return (
         <MuiButton
@@ -62,7 +81,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
                 boxShadow: elevations.default,
                 height: height,
                 background: bgColor,
-                color: textColors.primary,
+                color: textColor(),
                 '&:focus': {
                     backgroundColor: darkBgColor,
                     boxShadow: elevations.hover,

diff --git a/met-web/src/components/common/Input/RichTextArea.tsx b/met-web/src/components/common/Input/RichTextArea.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { ContentBlock, ContentState, Editor, EditorProps } from 'react-draft-wysiwyg';
+import { Link } from '../Navigation';
+import { Header2 } from '../Typography';
+
+const LinkRenderer = ({
+    children,
+    contentState,
+    entityKey,
+}: {
+    children: React.ReactNode;
+    contentState: ContentState;
+    entityKey: string;
+}) => {
+    const { url } = contentState.getEntity(entityKey).getData();
+    return <Link to={url}>{children}</Link>;
+};
+
+const Header2Renderer = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <Header2 decorated weight="thin">
+            {children}
+        </Header2>
+    );
+};
+
+export const RichTextArea = ({ customDecorators, ...props }: EditorProps) => {
+    return (
+        <Editor
+            customDecorators={[
+                {
+                    // Find all entities of type 'LINK' and render them using the Link component
+                    strategy: (
+                        contentBlock: ContentBlock,
+                        callback: (start: number, end: number) => void,
+                        contentState: ContentState,
+                    ) => {
+                        contentBlock.findEntityRanges((character) => {
+                            const entityKey = character.getEntity();
+                            return entityKey !== null && contentState.getEntity(entityKey).getType() === 'LINK';
+                        }, callback);
+                    },
+                    component: LinkRenderer,
+                },
+                {
+                    // Find all blocks with h2 style and render them using the Header2 component
+                    strategy: (contentBlock: ContentBlock, callback: (start: number, end: number) => void) => {
+                        if (!contentBlock) return;
+                        if (contentBlock.getType() === 'header-two') {
+                            callback(contentBlock.getDepth(), contentBlock.getDepth() + contentBlock.getLength());
+                        }
+                    },
+                    component: Header2Renderer,
+                },
+                ...(customDecorators || []),
+            ]}
+            {...props}
+        />
+    );
+};
diff --git a/met-web/src/components/common/Input/TextInput.tsx b/met-web/src/components/common/Input/TextInput.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Button as MuiButton, Input, InputProps, Box, TextField as MuiTextField } from '@mui/material';
+import { Button as MuiButton, Input, InputProps, Box, TextField as MuiTextField, useTheme } from '@mui/material';
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
 import { colors, globalFocusVisible } from '..';
 import { FormField, FormFieldProps } from './FormField';
@@ -195,6 +195,7 @@ interface CustomTextFieldProps extends Omit<MuiTextFieldProps, 'variant'> {
 }
 
 export const CustomTextField: React.FC<CustomTextFieldProps> = ({ sx, ...props }) => {
+    const theme = useTheme();
     return (
         <MuiTextField
             {...props}
@@ -215,7 +216,7 @@ export const CustomTextField: React.FC<CustomTextFieldProps> = ({ sx, ...props }
                     },
                     '&:hover .MuiOutlinedInput-notchedOutline': {
                         borderWidth: '2px', // 2px black outline on hover
-                        borderColor: 'black',
+                        borderColor: theme.palette.text.primary,
                     },
                     '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                         borderWidth: '0px', // No outline when focused

diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx
@@ -29,7 +29,7 @@ export const Link: React.FC<FocusableNavLinkProps> = ({
         regular: '1.5',
         large: '1.625',
     }[size];
-    const textColor = color ?? colors.surface.blue[90];
+    const textColor = color ?? undefined;
     return (
         <MuiLink
             onClick={onClick}

diff --git a/met-web/src/components/common/RichTextEditor/index.tsx b/met-web/src/components/common/RichTextEditor/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { EditorState, convertToRaw } from 'draft-js';
-import { Editor } from 'react-draft-wysiwyg';
+import { RichTextArea as Editor } from '../Input/RichTextArea';
 import { FormControl, FormHelperText } from '@mui/material';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './RichEditorStyles.css';
@@ -19,10 +19,11 @@ const RichTextEditor = ({
     error = false,
     helperText = '',
     toolbar = {
-        options: ['inline', 'list', 'link', 'history'],
+        options: ['inline', 'list', 'link', 'blockType', 'history'],
         inline: {
             options: ['bold', 'italic', 'underline', 'superscript', 'subscript'],
         },
+        blockType: { options: ['Normal', 'H2', 'H3', 'Blockquote'] },
         list: { options: ['unordered', 'ordered'] },
     },
 }) => {

diff --git a/met-web/src/components/common/Typography/Body.tsx b/met-web/src/components/common/Typography/Body.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Typography, TypographyProps } from '@mui/material';
-import { colors } from '../../common';
 
 export const BodyText = ({
     bold,
@@ -40,7 +39,6 @@ export const BodyText = ({
                 fontSize,
                 lineHeight,
                 fontWeight: fontWeight(),
-                color: colors.type.regular.primary,
                 ...props.sx,
             }}
         >
@@ -63,7 +61,6 @@ export const EyebrowText = ({
                 fontSize: '24px',
                 lineHeight: 'normal',
                 fontWeight: 300,
-                color: colors.surface.gray[90],
                 ...props.sx,
             }}
         >

diff --git a/met-web/src/components/common/Typography/Headers.tsx b/met-web/src/components/common/Typography/Headers.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Typography, TypographyProps } from '@mui/material';
 
-const fontWeight = (weight: string) => {
+const fontWeight = (weight?: string | number) => {
     switch (weight) {
         case 'bold':
             return 700;
@@ -10,13 +10,13 @@ const fontWeight = (weight: string) => {
         case 'thin':
             return 200;
         default:
-            return 700;
+            return weight;
     }
 };
 
 export const Header1 = ({
     children,
-    weight = 'bold',
+    weight,
     ...props
 }: {
     children: React.ReactNode;
@@ -44,7 +44,7 @@ export const Header1 = ({
 export const Header2 = ({
     children,
     decorated = false,
-    weight = 'bold',
+    weight,
     ...props
 }: {
     children: React.ReactNode;
@@ -61,7 +61,6 @@ export const Header2 = ({
                 marginBottom: '1.5rem',
                 marginTop: '0.5rem',
                 fontWeight: fontWeight(weight),
-                color: '#292929',
                 ...(decorated && {
                     '&::before': {
                         backgroundColor: '#FCBA19',

diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx
@@ -17,130 +17,12 @@ import { SxProps, styled } from '@mui/system';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen';
 import { faCircleXmark } from '@fortawesome/pro-regular-svg-icons/faCircleXmark';
-import { Palette } from 'styles/Theme';
+import { Palette, colors } from 'styles/Theme';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { MET_Header_Font_Family, MET_Font_Weight, MET_Header_Font_Weight } from '../../styles/constants';
 import { When } from 'react-if';
 import ReactPlayer from 'react-player';
-
-export const colors = {
-    type: {
-        regular: {
-            primary: '#292929',
-            secondary: '#464341',
-            link: '#1A5A96',
-            disabled: '#A19F9D',
-        },
-        inverted: {
-            primary: '#FFFFFF',
-            secondary: '#EDEBE9',
-            link: '#D8EBFF',
-            disabled: '#A19F9D',
-        },
-    },
-    button: {
-        default: {
-            shade: '#12508F',
-            icon: '#12508F',
-            tint: '#FFF8E8',
-        },
-        success: {
-            shade: '#42814A',
-            icon: '#42814A',
-            tint: '#F6FFF8',
-        },
-        warning: {
-            shade: '#FCBA19',
-            icon: '#C08C07',
-            tint: '#FFECBE',
-        },
-        danger: {
-            shade: '#CE3E39',
-            icon: '#CE3E39',
-            tint: '#F4E1E2',
-        },
-        error: {
-            shade: '#CE3E39',
-            icon: '#CE3E39',
-            tint: '#F4E1E2',
-        },
-    },
-    focus: {
-        regular: {
-            outer: '#2E5DD7',
-            inner: '#FFFFFF',
-        },
-    },
-    surface: {
-        gray: {
-            10: '#FAF9F8',
-            20: '#F3F2F1',
-            30: '#EDEBE9',
-            40: '#E1DFDD',
-            50: '#D2D0CE',
-            60: '#C8C6C4',
-            70: '#A19F9D',
-            80: '#7A7876',
-            90: '#3B3A39',
-            100: '#323130',
-            110: '#201F1E',
-        },
-        blue: {
-            10: '#F1F8FF',
-            20: '#D8EBFF',
-            30: '#C0DFFF',
-            40: '#A7D2FF',
-            50: '#8EC6FF',
-            60: '#76BAFF',
-            70: '#4E97E0',
-            80: '#2B71B8',
-            90: '#12508F',
-            100: '#053662',
-            bc: '#053662',
-        },
-        gold: {
-            10: '#FFF8E8',
-            20: '#FFECBE',
-            30: '#FFE095',
-            40: '#FFD46C',
-            50: '#FFC843',
-            60: '#FCBA19',
-            bc: '#FCBA19',
-            70: '#D39706',
-            80: '#AA7900',
-            90: '#825C00',
-            100: '#593F00',
-        },
-        white: '#FFFFFF',
-    },
-    notification: {
-        default: {
-            shade: '#12508F',
-            icon: '#12508F',
-            tint: '#FFF8E8',
-        },
-        success: {
-            shade: '#42814A',
-            icon: '#42814A',
-            tint: '#F6FFF8',
-        },
-        warning: {
-            shade: '#FCBA19',
-            icon: '#C08C07',
-            tint: '#FFECBE',
-        },
-        danger: {
-            shade: '#CE3E39',
-            icon: '#CE3E39',
-            tint: '#F4E1E2',
-        },
-        error: {
-            shade: '#CE3E39',
-            icon: '#CE3E39',
-            tint: '#F4E1E2',
-        },
-    },
-};
+export { colors };
 
 export const elevations = {
     // For use with CSS box-shadow property
@@ -312,8 +194,9 @@ export const MetToggleButton = ({ value, children, ...rest }: MetToggleButtonPro
     </StyledToggleButton>
 );
 
-const StyledPaper = styled(MuiPaper)(() => ({
-    border: '1px solid #cdcdcd',
+const StyledPaper = styled(MuiPaper)(({ theme }) => ({
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'dark' ? colors.surface.gray[100] : colors.surface.gray[60],
     borderRadius: '5px',
     boxShadow: 'rgb(0 0 0 / 6%) 0px 2px 2px -1px, rgb(0 0 0 / 6%) 0px 1px 1px 0px, rgb(0 0 0 / 6%) 0px 1px 3px 0px',
 }));
@@ -656,7 +539,7 @@ export const MetDisclaimer = ({
             sx={{
                 borderLeft: 8,
                 borderColor: '#003366',
-                backgroundColor: '#F2F2F2',
+                backgroundColor: '#aaaaaa22',
             }}
         >
             <Typography