@pega/dx-component-builder-sdk 0.25.7 → 0.26.1

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyText/index.tsx

@@ -4,12 +4,20 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyTextWrapper from './styles';
 
 interface PegaDxilMyTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,7 +34,6 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur */
     readOnly,
     testId,
@@ -34,14 +41,23 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
   const maxLength = fieldMetadata?.maxLength;
@@ -53,22 +69,14 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -94,7 +102,10 @@ export default function PegaDxilMyText(props: PegaDxilMyTextProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        slotProps={{
+          input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyTextWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTextInput/index.tsx

@@ -4,12 +4,20 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyTextInputWrapper from './styles';
 
 interface PegaDxilMyTextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,7 +34,6 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur */
     readOnly,
     testId,
@@ -34,14 +41,23 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
   const maxLength = fieldMetadata?.maxLength;
@@ -53,7 +69,7 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -64,11 +80,7 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -94,7 +106,10 @@ export default function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        slotProps={{
+          input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyTextInputWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

@@ -1,4 +1,8 @@
 import { useState } from 'react';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyTimeOfDay from './index';
@@ -41,7 +45,11 @@ export const BasePegaDxilMyTimeOfDay: Story = args => {
     }
   };
 
-  return <PegaDxilMyTimeOfDay {...props} {...args} />;
+   return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <PegaDxilMyTimeOfDay {...props} {...args} />
+    </LocalizationProvider>
+  );
 };
 
 BasePegaDxilMyTimeOfDay.args = {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -1,17 +1,23 @@
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 // import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyTimeOfDayWrapper from './styles';
 
 interface PegaDxilMyTimeOfDayProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -22,29 +28,29 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, readOnly, helperText, displayMode, hideLabel, testId, showFieldMessage, messageConfig = {} } = props;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
@@ -64,7 +70,6 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
 
   return (
     <StyledPegaDxilMyTimeOfDayWrapper>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           // keyboardIcon={<AccessTimeIcon />}
           // fullWidth
@@ -85,11 +90,11 @@ export default function PegaDxilMyTimeOfDay(props: PegaDxilMyTimeOfDayProps) {
               error: status === 'error',
               helperText: helperTextToDisplay,
               size: 'small',
-              InputProps: { ...testProp }
+              InputProps: { ...testProps },
+              sx: getFieldSx(status)
             }
           }}
         />
-      </LocalizationProvider>
     </StyledPegaDxilMyTimeOfDayWrapper>
   );
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyURL/index.tsx

@@ -4,11 +4,19 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyUrlWrapper from './styles';
 
 interface PegaDxilMyUrlProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,15 +34,17 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const [inputValue, setInputValue] = useState('');
 
@@ -42,27 +52,26 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   useEffect(() => {
     setInputValue(value);
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = event => {
     setInputValue(event?.target?.value);
@@ -88,7 +97,10 @@ export default function PegaDxilMyUrl(props: PegaDxilMyUrlProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ inputProps: { ...testProp } }}
+        slotProps={{
+          input: { inputProps: { ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyUrlWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/DefaultForm.css

@@ -16,10 +16,90 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
 }

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyForm/index.tsx

@@ -1,6 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, PropsWithChildren, useState } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -22,12 +27,24 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -55,15 +72,35 @@ export default function PegaDxilMyForm(props: PropsWithChildren<PegaDxilMyFormPr
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+      </div>
+    );
+  };
+
   return (
     <StyledPegaDxilMyFormWrapper>
       <>
-        {instructions && (
-          <div className='psdk-default-form-instruction-text'>
-            {/* server performs sanitization method for instructions html content */}
-            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-          </div>
-        )}
+        {renderInstructions()}
         <div className={divClass}>{dfChildren}</div>
       </>
     </StyledPegaDxilMyFormWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -108,18 +108,22 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
       context
     ) as Promise<any>;
 
-    historyData.then((historyJSON: any) => {
-      const tableDataResults = historyJSON.data.data;
-
-      // compute the rowData using the tableDataResults
-      computeRowData(tableDataResults);
-
-      // At this point, if we have data ready to render and haven't been asked
-      //  to NOT call setWaitingForData, we can stop progress indicator
-      if (bCallSetWaitingForData) {
-        setWaitingForData(false);
-      }
-    });
+    historyData
+      .then((historyJSON: any) => {
+        const tableDataResults = historyJSON.data.data;
+
+        // compute the rowData using the tableDataResults
+        computeRowData(tableDataResults);
+
+        // At this point, if we have data ready to render and haven't been asked
+        //  to NOT call setWaitingForData, we can stop progress indicator
+        if (bCallSetWaitingForData) {
+          setWaitingForData(false);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     return () => {
       // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
@@ -154,9 +158,9 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });