@pega/dx-component-builder-sdk 24.2.14 → 25.1.10

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -1,16 +1,16 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   a: any;
   b: any;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   title?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   cols?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
+
   icon?: string;
 }
 

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,10 +1,10 @@
 import { createElement } from 'react';
-import Grid, { GridSize } from '@mui/material/Grid';
+import Grid2, { type GridSize } from '@mui/material/Grid2';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 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 WideNarrowDetailsProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -36,7 +36,7 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
 
     return createElement(createPConnectComponent(), {
       ...theConfigObject,
-      // eslint-disable-next-line react/no-array-index-key
+
       key: index.toString()
     });
   });
@@ -66,21 +66,21 @@ export default function WideNarrowDetails(props: WideNarrowDetailsProps) {
   return (
     <FieldGroup name={theName}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+        <Grid2 container spacing={1} style={{ padding: '0 0 1em' }}>
           {highlightedDataArr.map((child, i) => (
-            <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+            <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`hf-${i + 1}`}>
               {child}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       )}
-      <Grid container spacing={1}>
+      <Grid2 container spacing={1}>
         {children?.map((child, i) => (
-          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+          <Grid2 size={{ xs: COLUMN_WIDTHS[i] as GridSize }} key={`r-${i + 1}`}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     </FieldGroup>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WideNarrowForm/WideNarrowForm.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PropsWithChildren, ReactElement } from 'react';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrowForm.css';
 
 interface WideNarrowFormProps extends PConnProps {

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx

@@ -1,6 +1,6 @@
-import { Children, PropsWithChildren } from 'react';
+import { Children, type PropsWithChildren } from 'react';
 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 WideNarrowPageProps extends PConnProps {
   // If any, enter additional props that only exist on this component

package/tests/assets/sdk-r/components/createAll/override-sdk/template/WssNavBar/WssNavBar.css

@@ -1,5 +1,5 @@
 .link-style {
-  color: white !important;
+  color: var(--app-text-color) !important;
   text-transform: capitalize !important;
   font-size: 1rem !important;
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/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'
+    maxWidth: '100%',
+    height: '3rem'
   },
   appName: {
-    color: 'white',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(4),
     fontSize: '1.5rem'
@@ -85,7 +85,7 @@ export default function WssNavBar(props: WssNavBarProps) {
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
-        <Container maxWidth='xl'>
+        <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />

package/tests/assets/sdk-r/components/createAll/override-sdk/widget/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/tests/assets/sdk-r/components/createAll/override-sdk/widget/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/tests/assets/sdk-r/components/createAll/override-sdk/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/tests/assets/sdk-r/components/createAll/override-sdk/widget/Attachment/Attachment.css

@@ -34,6 +34,7 @@
 
 .file-error {
   color: var(--app-error-color);
+  font-size: 14px;
 }
 
 .psdk-utility-card {
@@ -41,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 {
@@ -53,6 +58,7 @@
 .psdk-utility-card-svg-icon {
   width: 2.5rem;
   display: inline-block;
+  filter: var(--svg-color);
 }
 
 .psdk-utility-card-main {
@@ -70,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 {