@pega/react-sdk-overrides 0.25.1 → 0.25.3

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -8,7 +8,7 @@ import { IconButton, Menu, MenuItem, Typography, Button } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import MenuIcon from '@mui/icons-material/Menu';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WssNavBar.css';
 
 interface WssNavBarProps extends PConnProps {
@@ -17,10 +17,10 @@ interface WssNavBarProps extends PConnProps {
   navLinks: any[];
   operator: { currentUserInitials: string };
   navDisplayOptions: { alignment: string; position: string };
-  // eslint-disable-next-line react/no-unused-prop-types
+
   portalName: string;
   imageSrc: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   fullImageSrc: string;
   appName: any;
 }
@@ -36,10 +36,10 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   appListLogo: {
-    width: '3.6rem'
+    width: '3.6rem',
+    filter: 'var(--svg-color)'
   },
   appName: {
-    color: 'white',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
     fontSize: '1.5rem'

package/lib/widget/AppAnnouncement/AppAnnouncement.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface AppAnnouncementProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/widget/Attachment/Attachment.css

@@ -42,6 +42,10 @@
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
   margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
 }
 
 .psdk-utility-card-icon {
@@ -54,6 +58,7 @@
 .psdk-utility-card-svg-icon {
   width: 2.5rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-card-main {
@@ -71,14 +76,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
-}
-
-.psdk-utility-card {
-  display: flex;
-  align-items: center;
-  border: 0.0625rem solid rgb(207, 207, 207);
-  border-radius: calc(0.25rem);
-  min-height: 3rem;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-button {

package/lib/widget/Attachment/Attachment.tsx

@@ -1,14 +1,11 @@
-/* eslint-disable react/jsx-boolean-value */
-/* eslint-disable react/no-array-index-key */
-/* eslint-disable no-nested-ternary */
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import download from 'downloadjs';
 
-import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+import { getIconFromFileType, isFileUploadedToServer, useFileDownload, validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
+
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './Attachment.css';
 
@@ -19,7 +16,9 @@ interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
   extensions: string;
 }
 
-const getAttachmentKey = (name = '') => (name ? `attachmentsList.${name}` : 'attachmentsList');
+const getAttachmentKey = (name, embeddedReference) => {
+  return `attachmentsList${embeddedReference}.${name}`;
+};
 
 const getCurrentAttachmentsList = (key, context) => {
   return PCore.getStoreValue(`.${key}`, 'context_data', context) || [];
@@ -38,61 +37,65 @@ export default function Attachment(props: AttachmentProps) {
   let { required, disabled } = props;
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
+
+  const actionSequencer = useMemo(() => PCore.getActionsSequencer(), []);
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CosmosFields';
   const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
   const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
-  let categoryName = '';
-  if (value && value.pyCategoryName) {
-    categoryName = value.pyCategoryName;
-  }
   const deleteIcon = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
   const srcImg = Utils.getImageSrc('document-doc', Utils.getSDKStaticConentUrl());
   let valueRef = (pConn.getStateProps() as any).value;
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const [files, setFiles] = useState<any[]>(() =>
-    value?.pxResults && +value.pyCount > 0 ? value.pxResults.map(f => buildFilePropsFromResponse(f)) : []
-  );
+
+  const rawValue = pConn.getComponentConfig().value;
+  const isAttachmentAnnotationPresent = typeof rawValue === 'object' ? false : rawValue?.includes('@ATTACHMENT');
+  const { hasUploadedFiles, attachments, categoryName } = isAttachmentAnnotationPresent
+    ? value
+    : PCore.getAttachmentUtils().prepareAttachmentData(value);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [files, setFiles] = useState<any[]>(attachments);
   const [filesWithError, setFilesWithError] = useState<any[]>([]);
   const [toggleUploadBegin, setToggleUploadBegin] = useState(false);
 
+  const context = pConn.getContextName();
+  const onFileDownload = useFileDownload(context);
+
+  let embeddedProperty = pConn
+    .getPageReference()
+    .replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '')
+    .replace(PCore.getConstants().DATA_INFO.DATA_INFO_CONTENT, '');
+
+  if (valueRef?.indexOf('.') > 0) {
+    embeddedProperty = valueRef.substring(0, valueRef.indexOf('.') + 1);
+  }
+
   const resetAttachmentStoredState = () => {
-    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(valueRef), undefined, {
+    PCore.getStateUtils().updateState(pConn.getContextName(), getAttachmentKey(valueRef, embeddedProperty), undefined, {
       pageReference: 'context_data',
       isArrayDeepMerge: false
     });
   };
 
-  const fileDownload = (data, fileName, ext) => {
-    const fileData = ext ? `${fileName}.${ext}` : fileName;
-    download(atob(data), fileData);
-  };
-
-  const downloadFile = (fileObj: any) => {
-    setAnchorEl(null);
-    PCore.getAttachmentUtils()
-      // @ts-ignore - 3rd parameter "responseEncoding" should be optional
-      .downloadAttachment(fileObj.pzInsKey, pConn.getContextName())
-      .then((content: any) => {
-        const extension = fileObj.pyAttachName.split('.').pop();
-        fileDownload(content.data, fileObj.pyFileName, extension);
-      })
-      .catch(() => {});
-  };
-
   const deleteFile = useCallback(
     file => {
       setAnchorEl(null);
+
+      // reset the file input so that it will allow re-uploading the same file after deletion
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''; // Reset the input
+      }
+
       let attachmentsList: any[] = [];
-      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      let currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
 
       // If file to be deleted is the one added in previous stage i.e. for which a file instance is created in server
       // no need to filter currentAttachmentList as we will get another entry of file in redux with delete & label
-      // eslint-disable-next-line no-unsafe-optional-chaining
-      if (value && value?.pxResults && +value?.pyCount > 0 && file.responseProps && file?.responseProps?.pzInsKey !== 'temp') {
+      if (hasUploadedFiles && isFileUploadedToServer(file)) {
         const updatedAttachments = files.map(f => {
           if (f.responseProps && f.responseProps.pzInsKey === file.responseProps.pzInsKey) {
             return { ...f, delete: true, label: valueRef };
@@ -101,27 +104,25 @@ export default function Attachment(props: AttachmentProps) {
         });
 
         // updating the redux store to help form-handler in passing the data to delete the file from server
-        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...updatedAttachments]);
+        updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), [...updatedAttachments]);
         setFiles(current => {
           const newlyAddedFiles = current.filter(f => !!f.ID);
-          const filesPostDelete = current.filter(
-            f => f.responseProps?.pzInsKey !== 'temp' && f.responseProps?.pzInsKey !== file.responseProps?.pzInsKey
-          );
+          const filesPostDelete = current.filter(f => isFileUploadedToServer(f) && f.responseProps?.ID !== file.responseProps?.ID);
           attachmentsList = [...filesPostDelete, ...newlyAddedFiles];
           return attachmentsList;
         });
       } //  if the file being deleted is the added in this stage  i.e. whose data is not yet created in server
       else {
         // filter newly added files in this stage, later the updated current stage files will be added to redux once files state is updated in below setFiles()
-        currentAttachmentList = currentAttachmentList.filter(f => f.label !== valueRef);
-        setFiles(current => {
-          attachmentsList = current.filter(f => f.ID !== file.ID);
-          return attachmentsList;
-        });
-        updateAttachmentState(pConn, getAttachmentKey(valueRef), [...currentAttachmentList, ...attachmentsList]);
+        currentAttachmentList = currentAttachmentList.filter(f => !f.props.error && (f.delete || f.label !== valueRef));
+        setFiles(current => current.filter(f => f.ID !== file.ID));
+        updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), [...currentAttachmentList, ...attachmentsList]);
         if (file.inProgress) {
-          // @ts-ignore - 3rd parameter "responseEncoding" should be optional
+          // @ts-expect-error - 3rd parameter "responseEncoding" should be optional
           PCore.getAttachmentUtils().cancelRequest(file.ID, pConn.getContextName());
+          actionSequencer.deRegisterBlockingAction(pConn.getContextName()).catch(error => {
+            console.log(error);
+          });
         }
       }
 
@@ -130,7 +131,7 @@ export default function Attachment(props: AttachmentProps) {
         return prevFilesWithError.filter(f => f.ID !== file.ID);
       });
     },
-    [pConn, value, valueRef, filesWithError]
+    [valueRef, pConn, hasUploadedFiles, filesWithError, hasUploadedFiles, actionSequencer]
   );
 
   const onUploadProgress = () => {};
@@ -152,7 +153,6 @@ export default function Attachment(props: AttachmentProps) {
               f.props.name = pConn.getLocalizedValue('Unable to upload file', '', '');
               f.inProgress = false;
               const fieldName = (pConn.getStateProps() as any).value;
-              const context = pConn.getContextName();
               // set errors to property to block submit even on errors in file upload
               PCore.getMessageManager().addMessages({
                 messages: [
@@ -189,7 +189,6 @@ export default function Attachment(props: AttachmentProps) {
 
   const clearFieldErrorMessages = () => {
     const fieldName = (pConn.getStateProps() as any).value;
-    const context = pConn.getContextName();
     PCore.getMessageManager().clearMessages({
       type: PCore.getConstants().MESSAGES.MESSAGES_TYPE_ERROR,
       property: fieldName,
@@ -226,7 +225,6 @@ export default function Attachment(props: AttachmentProps) {
         }
         if (f.props.error) {
           const fieldName = (pConn.getStateProps() as any).value;
-          const context = pConn.getContextName();
           PCore.getMessageManager().addMessages({
             messages: [
               {
@@ -301,7 +299,6 @@ export default function Attachment(props: AttachmentProps) {
         setToggleUploadBegin(false);
       })
       .catch(error => {
-        // eslint-disable-next-line no-console
         console.log(error);
         setToggleUploadBegin(false);
       });
@@ -315,12 +312,12 @@ export default function Attachment(props: AttachmentProps) {
 
   useEffect(() => {
     if (files.length > 0 && displayMode !== 'DISPLAY_ONLY') {
-      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+      const currentAttachmentList = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
       // block duplicate files to redux store when added 1 after another to prevent multiple duplicates being added to the case on submit
       const tempFiles = files.filter(f => currentAttachmentList.findIndex(fr => fr.ID === f.ID) === -1 && !f.inProgress && f.responseProps);
 
       const updatedAttList = [...currentAttachmentList, ...tempFiles];
-      updateAttachmentState(pConn, getAttachmentKey(valueRef), updatedAttList);
+      updateAttachmentState(pConn, getAttachmentKey(valueRef, embeddedProperty), updatedAttList);
     }
   }, [files]);
 
@@ -331,7 +328,7 @@ export default function Attachment(props: AttachmentProps) {
   }, [filesWithError]);
 
   useEffect(() => {
-    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef), pConn.getContextName());
+    let tempUploadedFiles = getCurrentAttachmentsList(getAttachmentKey(valueRef, embeddedProperty), pConn.getContextName());
     tempUploadedFiles = tempUploadedFiles.filter(f => f.label === valueRef);
     setFiles(current => {
       return [
@@ -349,9 +346,13 @@ export default function Attachment(props: AttachmentProps) {
         ...tempUploadedFiles
       ];
     });
-    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
+    if (displayMode !== 'DISPLAY_ONLY') {
+      PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, resetAttachmentStoredState, caseID);
+    }
     return () => {
-      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      if (displayMode !== 'DISPLAY_ONLY') {
+        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      }
     };
   }, []);
 
@@ -435,7 +436,10 @@ export default function Attachment(props: AttachmentProps) {
                       <MenuItem
                         style={{ fontSize: '14px' }}
                         key='download'
-                        onClick={() => downloadFile(item.responseProps ? item.responseProps : {})}
+                        onClick={() => {
+                          setAnchorEl(null);
+                          onFileDownload(item.responseProps ? item.responseProps : {});
+                        }}
                       >
                         Download
                       </MenuItem>

package/lib/widget/CaseHistory/CaseHistory.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
 import Table from '@mui/material/Table';
@@ -11,7 +11,7 @@ import TableRow from '@mui/material/TableRow';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseHistoryProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -66,8 +66,8 @@ export default function CaseHistory(props: CaseHistoryProps) {
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  function computeRowData(rows: object[]): void {
+    const theRowData: object[] = [];
 
     rows.forEach((row: any, rowIndex: number) => {
       // Now, for each property in the index of row properties (displayedColumns), add an object
@@ -142,7 +142,7 @@ export default function CaseHistory(props: CaseHistoryProps) {
     // Note: using rowData.current since we're using useRef as a mutatable
     //  value that's only updated when it changes.
     if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: Object[], index) => {
+      rowData.current.forEach((dataRow: object[], index) => {
         // using dataRow[0]-dataRow[1] as the array key since it's a unique value
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(

package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.css

@@ -11,17 +11,3 @@
   justify-content: center;
   display: flex;
 }
-
-.primary-button {
-  background-color: #3f51b5 !important;
-  color: white !important;
-  padding: 6px 14px !important;
-  text-transform: unset !important;
-  font-size: 14px;
-}
-
-.secondary-button {
-  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
-  text-transform: unset !important;
-  padding: 6px 14px !important;
-}

package/lib/widget/FileUtility/ActionButtonsForFileUtil/ActionButtonsForFileUtil.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './ActionButtonsForFileUtil.css';
 
 interface ActionButtonsForFileUtilProps extends PConnProps {
@@ -15,14 +15,14 @@ export default function ActionButtonsForFileUtil(props: ActionButtonsForFileUtil
     <div className='psdk-actions'>
       <div className='psdk-action-buttons'>
         {props.arSecondaryButtons.map(file => (
-          <Button className='secondary-button' key={file.actionID} onClick={props.secondaryAction}>
+          <Button className='secondary-button' color='secondary' variant='contained' key={file.actionID} onClick={props.secondaryAction}>
             {file.name}
           </Button>
         ))}
       </div>
       <div className='psdk-action-buttons'>
         {props.arMainButtons.map(file => (
-          <Button className='primary-button' key={file.actionID} onClick={props.primaryAction}>
+          <Button className='primary-button' color='primary' variant='contained' key={file.actionID} onClick={props.primaryAction}>
             {file.name}
           </Button>
         ))}

package/lib/widget/FileUtility/FileUtility/FileUtility.css

@@ -2,7 +2,7 @@
   width: 100%;
   padding: 0.625rem 0rem;
   text-align: left;
-  background-color: white;
+  /* background-color: var(--utility-background-color); */
   border-radius: 0.6125rem;
   margin: 0.3125rem 0rem;
   position: relative;
@@ -16,6 +16,7 @@
 .psdk-file-utility-card-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .header-text {
@@ -25,7 +26,7 @@
 }
 
 .psdk-utility-count {
-  background: #65b5f5;
+  background: var(--utility-count-background-color);
   border-radius: calc(1.125 * 0.5rem);
   font-size: 0.75rem;
   font-weight: bold;
@@ -40,7 +41,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--modal-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -51,11 +52,11 @@
   display: table;
   margin: auto;
   min-width: 650px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
 }
 
 .psdk-modal-file-selector {

package/lib/widget/FileUtility/FileUtility/FileUtility.tsx

@@ -7,12 +7,12 @@ import download from 'downloadjs';
 // import SummaryList from '../../SummaryList';
 // import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
-import { IconButton, Menu, MenuItem, Button, CircularProgress } from '@mui/material';
+import { IconButton, Menu, MenuItem, Button, CircularProgress, Card } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FileUtilityProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -179,7 +179,7 @@ export default function FileUtility(props: FileUtilityProps) {
     const context = thePConn.getContextName();
 
     attachUtils
-      // @ts-ignore - 3rd parameter "responseEncoding" is optional
+      // @ts-expect-error - 3rd parameter "responseEncoding" is optional
       .downloadAttachment(ID, context)
       .then((content: any) => {
         if (type === 'FILE') {
@@ -203,7 +203,6 @@ export default function FileUtility(props: FileUtilityProps) {
     attachUtils
       .deleteAttachment(ID, context)
       .then(() => {
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
         getAttachments();
       })
       .catch();
@@ -488,7 +487,7 @@ export default function FileUtility(props: FileUtilityProps) {
   }
 
   return (
-    <div className='psdk-utility' id='file-utility'>
+    <Card className='psdk-utility' id='file-utility'>
       {inProgress && (
         <div className='progress-div'>
           <CircularProgress />
@@ -630,7 +629,6 @@ export default function FileUtility(props: FileUtilityProps) {
           <div className='psdk-modal-file-top'>
             <div className='psdk-view-all-header'>
               <h3>{thePConn.getLocalizedValue('Attachments', '', '')}</h3> {/* 2nd and 3rd args empty string until typedef marked correctly */}
-              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
               <button type='button' className='psdk-close-button' onClick={() => setViewAll(false)}>
                 <img className='psdk-utility-card-actions-svg-icon' src={closeSvgIcon} />
               </button>
@@ -641,6 +639,6 @@ export default function FileUtility(props: FileUtilityProps) {
           </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }

package/lib/widget/Followers/Followers.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface FollowersProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -17,8 +17,6 @@ const useStyles = makeStyles(theme => ({
     marginLeft: theme.spacing(1),
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
-    // borderLeft: "6px solid",
-    // borderLeftColor: green[300]
   }
 }));
 

package/lib/widget/QuickCreate/QuickCreate.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface QuickCreateProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -21,7 +21,6 @@ export default function QuickCreate(props: QuickCreateProps) {
       .getActionsApi()
       .createWork(className, {} as any)
       .catch(error => {
-        // eslint-disable-next-line no-console
         console.log('Error in case creation: ', error?.message);
       });
   };

package/lib/widget/SummaryItem/SummaryItem.css

@@ -11,6 +11,10 @@
   flex-direction: row;
   padding: 0.25rem 0rem 0.25rem 0.25rem;
   margin-bottom: 0.5rem;
+  align-items: center;
+  border: 0.0625rem solid var(--utility-card-border-color);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
 }
 
 .psdk-utility-card-icon {
@@ -23,6 +27,7 @@
 .psdk-utility-card-svg-icon {
   width: 2.5rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-card-main {
@@ -40,14 +45,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
-}
-
-.psdk-utility-card {
-  display: flex;
-  align-items: center;
-  border: 0.0625rem solid rgb(207, 207, 207);
-  border-radius: calc(0.25rem);
-  min-height: 3rem;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-button {
@@ -65,14 +63,14 @@
   width: 1.4rem;
   display: inline-block;
   vertical-align: middle;
-  filter: invert(28%) sepia(20%) saturate(3903%) hue-rotate(209deg) brightness(101%) contrast(87%);
+  filter: var(--svg-color);
 }
 
-.psdk-link-button {
+.psdk-utility-link-button {
   background: none;
   border: none;
   align-items: center;
   display: flex;
   padding: 0;
-  color: #3f51b5;
+  color: var(--link-button-color);
 }

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import './SummaryItem.css';
 
@@ -47,7 +47,7 @@ export default function SummaryItem(props: SummaryItemProps) {
         {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
         {item.primary.type === 'URL' && (
           <div className='psdk-utility-card-main-primary-url'>
-            <button type='button' className='psdk-link-button'>
+            <button type='button' className='psdk-utility-link-button'>
               {item.primary.name}&nbsp;
               <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
             </button>

package/lib/widget/SummaryList/SummaryList.tsx

@@ -1,5 +1,5 @@
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SummaryListProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/lib/widget/ToDo/ToDo.css

@@ -41,7 +41,7 @@
   text-align: center;
   display: flex;
   background: var(--app-primary-color);
-  color: white;
+  color: var(--app-text-color);
   font-weight: bold;
   font-size: 1.25rem;
 }
@@ -56,18 +56,6 @@
   display: inline-flex;
 }
 
-.psdk-todo-assignment-status {
-  background-color: var(--app-neutral-light-color);
-  border-radius: 0.125rem;
-  color: darkslategray;
-  font-size: 0.75rem;
-  font-weight: bold;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
 .psdk-todo-assignment-task {
   color: var(--app-neutral-color);
 }