@pega/custom-dx-components 0.24.12 → 0.24.13

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

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Fragment, Children, ReactElement } from 'react';
+import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 
-import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
+import StyledPegaDxilMyTwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -14,40 +14,31 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   showLabel: boolean;
   showHighlightedData: boolean;
-  children: any;
+  children: ReactElement[];
 }
 
 // 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 PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
 
-  const { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, children, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   // update children with readonly
-  // eslint-disable-next-line guard-for-in
-  for (const index in children) {
-    const kid = children[index];
-    kid.props.getPConnect().setInheritedProp('readOnly', true);
-    kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-  }
+  Children.toArray(children).forEach(child => {
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('readOnly', true);
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  });
 
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 0 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = 'flex-start';
-  // @ts-ignore
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
@@ -55,26 +46,10 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-      // field.config.displayMode = 'STACKED_LARGE_VAL';
-
-      // // Mark as status display when using pyStatusWork
-      // if (field.config.value === '@P .pyStatusWork') {
-      //   field.type = 'TextInput';
-      //   field.config.displayAsStatus = true;
-      // }
-      // // @ts-ignore
-      // return getPConnect().createComponent(field);
-      return <HighlightRender field={field} props={props} />;
+      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
-
   return (
     <StyledPegaDxilMyTwoColumnDetailsWrapper>
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
@@ -88,10 +63,13 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
        {children.map((child: any, i: number) => (
         <Flex
           // @ts-ignore

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

@@ -16,6 +16,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
@@ -26,6 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
@@ -35,6 +37,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
@@ -43,6 +46,7 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: false,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
           displayMode: 'STACKED_LARGE_VAL',

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/styles.ts

@@ -6,3 +6,18 @@ export default styled.div(() => {
     margin: 0px 0;
   `;
 });
+
+export const StyledDetailsGridContainer = styled.div(() => {
+  return css`
+    margin-line-start: 1;
+  `;
+});
+
+export const StyledHighlightedFieldsHrLine = styled.hr(() => {
+  return css`
+    line: {
+      margin: '0.75rem 0';
+      opacity: '50%'
+    }
+  `;
+});