@pega/custom-dx-components 23.1.12 → 24.1.10

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/demo.stories.tsx

@@ -20,14 +20,8 @@ export const BasePegaDxilMyPercentage: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -57,6 +51,7 @@ export const BasePegaDxilMyPercentage: Story = args => {
 BasePegaDxilMyPercentage.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
@@ -65,5 +60,6 @@ BasePegaDxilMyPercentage.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/index.tsx

@@ -165,7 +165,7 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPercentageWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPercentageWrapper>
     ) : (
       <StyledPegaDxilMyPercentageWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/mock.ts

@@ -8,6 +8,7 @@ export const configProps = {
   testId: 'percentage-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/demo.stories.tsx

@@ -19,12 +19,7 @@ export const BasePegaDxilMyPhone: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    datasource: configProps.datasource,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -52,6 +47,7 @@ export const BasePegaDxilMyPhone: Story = args => {
 };
 
 BasePegaDxilMyPhone.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,
@@ -62,5 +58,6 @@ BasePegaDxilMyPhone.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/index.tsx

@@ -164,7 +164,7 @@ function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPhoneWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPhoneWrapper>
     ) : (
       <StyledPegaDxilMyPhoneWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/mock.ts

@@ -26,6 +26,7 @@ export const configProps = {
   testId: 'phone-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/demo.stories.tsx

@@ -23,14 +23,8 @@ export const BasePegaDxilMyPicklist: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -84,6 +78,7 @@ export const BasePegaDxilMyPicklist: Story = args => {
 };
 
 BasePegaDxilMyPicklist.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,
@@ -94,5 +89,6 @@ BasePegaDxilMyPicklist.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/index.tsx

@@ -256,7 +256,7 @@ function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPicklistWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPicklistWrapper>
     ) : (
       <StyledPegaDxilMyPicklistWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/mock.ts

@@ -22,6 +22,7 @@ export const configProps = {
   testId: 'picklist-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyRadioButtons/demo.stories.tsx

@@ -23,15 +23,8 @@ export const BasePegaDxilMyRadiobuttons: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    inline: configProps.inline,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -88,6 +81,7 @@ export const BasePegaDxilMyRadiobuttons: Story = args => {
 };
 
 BasePegaDxilMyRadiobuttons.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MySearchbox/demo.stories.tsx

@@ -24,19 +24,11 @@ export const BasePegaDxilMySearchbox: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     columns: [],
-    isTableFormatter: false,
     listType: 'associated',
-    parameters: {},
     datasourceMetadata,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -93,9 +85,11 @@ export const BasePegaDxilMySearchbox: Story = args => {
 };
 
 BasePegaDxilMySearchbox.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
   placeholder: configProps.placeholder,
+  parameters: {},
   isTableFormatter: false,
   testId: configProps.testId,
   readOnly: configProps.readOnly,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MySearchbox/index.tsx

@@ -645,12 +645,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue)
             doSearch(
               '',
               getDisplayFieldsMetaData(dataConfig.columns),
+              // @ts-ignore
               dataObj,
               setItems as any,
               setLoading,
@@ -677,6 +679,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue) {
@@ -692,6 +695,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
+                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -711,6 +715,7 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               doSearch(
                 '',
                 getDisplayFieldsMetaData(dataConfig.columns),
+                // @ts-ignore
                 dataObj,
                 setItems as any,
                 setLoading,
@@ -770,10 +775,14 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
       PCore.getDataApi()
         .init(dataConfig, contextName)
         .then(dataObj => {
+          // @ts-ignore
           setDataApiObj(dataObj);
+          // @ts-ignore
           buildColumnForDisplayValue(dataObj);
           // SET matchPosition to EQUALS to return exact matching record
+          // @ts-ignore
           dataObj.matchPosition = 'equals';
+          // @ts-ignore
           dataObj
             .fetchData(value)
             .then((displayResponse: { data: Array<never> }) => {
@@ -822,11 +831,13 @@ function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
               setSelected(searchedItem[0]);
               setActualValue(value);
               // RESET matchPosition
+              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             })
             .catch(() => {
               setActualValue(value);
               // RESET matchPosition
+              // @ts-ignore
               dataObj.matchPosition = dataConfig.matchPosition;
             });
         });

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MySearchbox/utils.ts

@@ -181,7 +181,9 @@ export const updatePropertiesForNewRecord = (
       setDataApiObj(dataObj);
       buildColumnForDisplayValue(dataObj);
       // SET matchPosition to EQUALS to return exact matching record
+      // @ts-ignore
       dataObj.matchPosition = 'equals';
+      // @ts-ignore
       dataObj
         .fetchData(newCaseId)
         // @ts-ignore
@@ -212,6 +214,7 @@ export const updatePropertiesForNewRecord = (
         })
         .finally(() => {
           // RESET matchPosition
+          // @ts-ignore
           dataObj.matchPosition = dataConfig.matchPosition;
         });
     });

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyText/demo.stories.tsx

@@ -23,9 +23,6 @@ export const BasePegaDxilMyText: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyText/index.tsx

@@ -1,4 +1,12 @@
-import { Input, withConfiguration } from '@pega/cosmos-react-core';
+import {
+  Input,
+  FieldValueList,
+  Text,
+  EmailDisplay,
+  PhoneDisplay,
+  URLDisplay,
+  withConfiguration
+} from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -7,7 +15,9 @@ import StyledPegaDxilMyTextWrapper from './styles';
 // interface for props
 interface PegaDxilMyTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-
+  isTableFormatter?: boolean;
+  formatter: string;
+  variant?: any;
 }
 
 // interface for StateProps object
@@ -16,23 +26,103 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-// Duplicated runtime code from Constellation Design System Component
+export const formatExists = (formatterVal: string) => {
+  const formatterValues = [
+    'TextInput',
+    'WorkStatus',
+    'RichText',
+    'Email',
+    'Phone',
+    'URL',
+    'Operator'
+  ];
+  let isformatter = false;
+  if (formatterValues.includes(formatterVal)) {
+    isformatter = true;
+  }
+  return isformatter;
+};
+
+export const textFormatter = (formatter: string, value: string) => {
+  let displayComponent: any = null;
+  switch (formatter) {
+    case 'TextInput': {
+      displayComponent = value;
+      break;
+    }
+    case 'Email': {
+      displayComponent = <EmailDisplay value={value} displayText={value} variant='link' />;
+      break;
+    }
+    case 'Phone': {
+      displayComponent = <PhoneDisplay value={value} variant='link' />;
+      break;
+    }
+    case 'URL': {
+      displayComponent = (
+        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
+      );
+      break;
+    }
+    // no default
+  }
+  return displayComponent;
+};
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyText(props: PegaDxilMyTextProps) {
-  const { getPConnect, value, placeholder, disabled = false, readOnly = false, required = false, label, hideLabel = false, testId } = props;
+  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
+  const { formatter } = props;
 
   const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;
     actions.updateFieldValue(propName, updatedValue);
   };
 
+  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+    let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    if (isTableFormatter && formatExists(formatter)) {
+      displayComp = textFormatter(formatter, value);
+    }
+    return displayMode === 'DISPLAY_ONLY' ? (
+      <StyledPegaDxilMyTextWrapper> {displayComp} </StyledPegaDxilMyTextWrapper>
+    ) : (
+      <StyledPegaDxilMyTextWrapper>
+        <FieldValueList
+          variant={hideLabel ? 'stacked' : variant}
+          data-testid={testId}
+          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+        />
+      </StyledPegaDxilMyTextWrapper>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const isValDefined = typeof value !== 'undefined' && value !== '';
+    const val = isValDefined ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+    return (
+      <StyledPegaDxilMyTextWrapper>
+        <FieldValueList
+          variant='stacked'
+          data-testid={testId}
+          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
+        />
+      </StyledPegaDxilMyTextWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTextWrapper>
       <Input

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/StatusWork.tsx

@@ -2,9 +2,9 @@
 import React from 'react';
 import { Status } from '@pega/cosmos-react-core';
 
-export default function StatusWorkRenderer({ value } : any) {
+export default function StatusWorkRenderer({ value }: any) {
   // need to cast variant
-  let variant : 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+  let variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
   variant = 'info';
 
   const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
@@ -22,11 +22,5 @@ export default function StatusWorkRenderer({ value } : any) {
     variant = 'pending';
   }
 
-
-
-  return (
-    <Status type='rectangle' variant={variant} >
-      {value}
-    </Status>
-  );
+  return <Status variant={variant}>{value}</Status>;
 }

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/demo.stories.tsx

@@ -20,13 +20,8 @@ export const BasePegaDxilMyTextInput: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -64,5 +59,6 @@ BasePegaDxilMyTextInput.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/index.tsx

@@ -143,7 +143,7 @@ function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <StyledPegaDxilMyTextInputWrapper> displayComp </StyledPegaDxilMyTextInputWrapper>
+      <StyledPegaDxilMyTextInputWrapper> {displayComp} </StyledPegaDxilMyTextInputWrapper>
     ) : (
       <StyledPegaDxilMyTextInputWrapper>
       <FieldValueList

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/mock.ts

@@ -8,6 +8,7 @@ export const configProps = {
   testId: 'TextInput-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/demo.stories.tsx

@@ -15,6 +15,9 @@ type Story = StoryObj<typeof PegaDxilMyTimeOfDay>;
 
 export const BasePegaDxilMyTimeOfDay: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -37,21 +40,7 @@ export const BasePegaDxilMyTimeOfDay: Story = args => {
         ignoreSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    testId: configProps.testId,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
@@ -72,5 +61,6 @@ BasePegaDxilMyTimeOfDay.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -140,7 +140,7 @@ function PegaDxilMyTimeOfDay (props: PegaDxilMyTimeOfDayProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyTimeOfDayWrapper> displayComp </StyledPegaDxilMyTimeOfDayWrapper>);
+        return ( <StyledPegaDxilMyTimeOfDayWrapper> {displayComp} </StyledPegaDxilMyTimeOfDayWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import  React from 'react';
+import { useEffect, useState } from 'react';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
+  const { metaObj, showStatus = false } = props;
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
+  let userName: string;
+  let userIdentifier: string;
+
+  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
+  // This is non CaseView case (Dashboard, MyWork etc)
+  if (!metaObj) {
+    userName = PCore.getEnvironmentInfo().getOperatorName();
+    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
+  } else {
+    userName = metaObj.name;
+    userIdentifier = metaObj.ID;
+  }
+  if (!userName && userIdentifier) {
+    userName = userIdentifier;
+  }
+
+  useEffect(() => {
+    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
+    if (imageKey) {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then((blob) => window.URL.createObjectURL(blob))
+        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
+    }
+  }, [metaObj]);
+
+  if (showStatus) {
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
+
+    // @ts-ignore
+    const handleUserStateChange = ({ state }) => {
+      setUserState(state === 'online' ? 'active' : 'inactive');
+    };
+
+    useEffect(() => {
+      const subId = PCore.getMessagingServiceManager()
+        .getUserPresence()
+        // @ts-ignore
+        .subscribe(userIdentifier, handleUserStateChange);
+
+      return function cleanup() {
+        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
+      };
+    }, [userIdentifier, handleUserStateChange]);
+    // @ts-ignore
+    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
+  }
+
+  // Do not render when userName does not exists
+  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
+  if (!userName) {
+    return null;
+  }
+
+  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
+}
+
+
+export default withConfiguration(Avatar);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx

@@ -0,0 +1,52 @@
+import { Fragment, ReactElement } from 'react';
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+interface DetailsRenderProps {
+  children?: never;
+  child: NonNullable<ReactElement>;
+}
+
+const DetailsRender = (props: DetailsRenderProps) => {
+  const { child } = props;
+
+  const kids = child.props.getPConnect().getChildren();
+
+  const displayCompArr: ReactElement[] = [];
+
+  Object.values(kids).forEach((value: any, i :number) => {
+    const { type } = value.getPConnect().getRawMetadata();
+    const { hideLabel, variant, testId, label } = value
+      .getPConnect()
+      .resolveConfigProps(value.getPConnect().getConfigProps());
+
+    let displayComp;
+    const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
+
+    if (type === 'reference') {
+      const refElement = value.getPConnect().getComponent();
+
+      displayCompArr.push(refElement);
+    } else {
+      const element = value.getPConnect().getComponent();
+      const displayEl = <Fragment key={key}>{element}</Fragment>;
+
+      displayComp = (
+        <Fragment key={key1}>
+          <FieldValueList
+            style={{ columnGap: '0'}}
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
+          />
+        </Fragment>
+      );
+
+      displayCompArr.push(displayComp);
+    }
+  });
+
+  return <>{displayCompArr}</>;
+};
+
+export default DetailsRender;