@pega/react-sdk-overrides 0.25.2 → 0.25.3

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,7 +7,7 @@ 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';
@@ -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

@@ -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

@@ -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

@@ -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/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);
 }

package/lib/widget/ToDo/ToDo.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Button, Card, CardContent, CardHeader, Avatar, Typography, Badge, List, ListItem, ListItemText } from '@mui/material';
 import Snackbar from '@mui/material/Snackbar';
@@ -51,10 +50,10 @@ interface ToDoProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   datasource?: any;
   myWorkList?: any;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   caseInfoID?: string;
   headerText?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   itemKey?: string;
   showTodoList?: boolean;
   type?: string;
@@ -98,6 +97,17 @@ const useStyles = makeStyles(theme => ({
     borderLeftColor: theme.palette.primary.light,
     padding: theme.spacing(1),
     margin: theme.spacing(1)
+  },
+  psdkTodoAssignmentStatus: {
+    backgroundColor: 'var(--app-neutral-light-color)',
+    borderRadius: '0.125rem',
+    color: theme.embedded.resolutionTextColor,
+    fontSize: '0.75rem',
+    fontWeight: 'bold',
+    lineHeight: 'calc(0.5rem * 2.5)',
+    height: 'calc(0.5rem * 2.5)',
+    padding: '0 0.5rem',
+    textTransform: 'uppercase'
   }
 }));
 
@@ -123,7 +133,7 @@ export default function ToDo(props: ToDoProps) {
   const [bShowMore, setBShowMore] = useState(true);
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [snackbarMessage, setSnackbarMessage]: any = useState('');
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
   const [assignments, setAssignments] = useState<any[]>(initAssignments());
 
   const thePConn = getPConnect();
@@ -179,7 +189,7 @@ export default function ToDo(props: ToDoProps) {
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);
@@ -238,7 +248,6 @@ export default function ToDo(props: ToDoProps) {
       .openAssignment(id, classname, options)
       .then(() => {
         if (bLogging) {
-          // eslint-disable-next-line no-console
           console.log(`openAssignment completed`);
         }
       })
@@ -277,7 +286,6 @@ export default function ToDo(props: ToDoProps) {
     );
   };
 
-  // eslint-disable-next-line no-nested-ternary
   const getCount = () => (assignmentsSource ? assignmentsSource.length : type === CONSTS.WORKLIST ? count : 0);
 
   const toDoContent = (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.25.2",
+  "version": "0.25.3",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [