@pega/custom-dx-components 0.24.3 → 0.24.5

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

@@ -1,6 +1,8 @@
 import { Fragment } from 'react';
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
+import HighlightRender from './HighlightRender';
 
 import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
 
@@ -15,8 +17,6 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
   children: any;
 }
 
-// Duplicated runtime code from Constellation Design System Component
-
 // 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) {
@@ -24,9 +24,17 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
   const { getPConnect, children, label, 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');
+  }
+
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { "colGap": 1};
+  const gridContainer = { "colGap": 0};
   // @ts-ignore
   gridContainer.cols = gridRepeat;
   // @ts-ignore
@@ -36,7 +44,7 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
   // @ts-ignore
   gridHighlightContainer.cols = gridRepeat;
   // @ts-ignore
-  gridHighlightContainer.alignItems = 'start';
+  gridHighlightContainer.alignItems = 'flex-start';
   // @ts-ignore
   gridHighlightContainer.pad = [0, 0, 2, 0];
 
@@ -47,33 +55,47 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-      field.config.displayMode = 'STACKED_LARGE_VAL';
+      // 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);
+      // // 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} />;
     });
   }
 
+  const hrStyle = {
+    line: {
+      margin: '0.75rem 0',
+      opacity: '50%'
+    }
+  };
+
   return (
     <StyledPegaDxilMyTwoColumnDetailsWrapper>
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container={gridHighlightContainer}
-          data-testid={`highlighted-column-count-${numRegions}`}>
-          {highlightedDataArr.map((child: any, i: number) => (
-            <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
-          ))}
-        </Grid>
+          <>
+            <Flex
+              container={{ direction: 'row', alignItems: 'start', colGap: 10 }}
+              data-testid={`highlighted-column-count-${numRegions}`}
+            >
+              {highlightedDataArr.map((child: any, i: number) => (
+                <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
+              ))}
+            </Flex>
+            <hr style={hrStyle.line} />
+          </>
       )}
       <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
        {children.map((child: any, i: number) => (
-        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
-        {child}
+        // @ts-ignore
+        <Flex container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }} key={`r-${i + 1}`}>
+          <DetailsRender child={child} />
         </Flex>
        ))}
       </Grid>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/DetailsRender.tsx

@@ -0,0 +1,58 @@
+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) => {
+    const { type } = value.getPConnect().getRawMetadata();
+    const { hideLabel, variant, testId, label } = value
+      .getPConnect()
+      .resolveConfigProps(value.getPConnect().getConfigProps());
+
+    let displayComp;
+    const key = JSON.stringify(value.getPConnect());
+
+    if (type === 'reference') {
+      const refElement = value.getPConnect().getComponent();
+
+      displayCompArr.push(refElement);
+    } else {
+      const element = value.getPConnect().getComponent();
+      const displayEl = <Fragment key={key}>{element}</Fragment>;
+
+      const fvlStyle = {
+        myColGap: {
+          columnGap: '0'
+        }
+      };
+
+      // const myEl = <div>boo</div>;
+      displayComp = (
+        <Fragment key={key}>
+          <FieldValueList
+            style={fvlStyle.myColGap}
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
+          />
+        </Fragment>
+      );
+
+      displayCompArr.push(displayComp);
+    }
+  });
+
+  return <>{displayCompArr}</>;
+};
+
+export default DetailsRender;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -142,7 +142,6 @@ const renderField = resolvedProps => {
 
 export const BasePegaDxilMyTwoColumnForm: Story = args => {
   const props = {
-    template: 'DefaultForm',
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -187,4 +186,7 @@ export const BasePegaDxilMyTwoColumnForm: Story = args => {
   );
 };
 
-BasePegaDxilMyTwoColumnForm.args = {};
+BasePegaDxilMyTwoColumnForm.args = {
+  showLabel: true,
+  label: 'Form Region template',
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
 
 import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
 
@@ -11,14 +12,12 @@ interface PegaDxilMyTwoColumnFormProps extends PConnFieldProps {
   children: any;
 }
 
-// Duplicated runtime code from Constellation Design System Component
-
 // 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 PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
 
 
-  const { children = [], label, showLabel, getPConnect } = props;
+  const { children = [], label, showLabel, getPConnect, readOnly, displayMode  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const numRegions = children?.length;
@@ -33,6 +32,26 @@ function PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
   // @ts-ignore
   flexContainer.gap = 2;
 
+  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+    return (
+      <StyledPegaDxilMyTwoColumnFormWrapper>
+        <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+          <Grid container={gridContainer} data-testid={`column-count-${numRegions}`}>
+            {children.map((child: any, i: number) => (
+              <Flex
+                // @ts-ignore
+                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                key={`r-${i + 1}`}
+              >
+                <DetailsRender child={child} />
+              </Flex>
+            ))}
+          </Grid>
+        </FieldGroup>
+      </StyledPegaDxilMyTwoColumnFormWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTwoColumnFormWrapper>
       <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/demo.stories.tsx

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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/mock.ts

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

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

@@ -23,20 +23,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -76,6 +63,9 @@ BasePegaDxilMyBoolean.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -3,7 +3,8 @@ import {
   CheckboxGroup,
   FieldValueList,
   Text,
-  withConfiguration
+  withConfiguration,
+  BooleanDisplay
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
@@ -96,15 +97,17 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
-      <PegaDxilMyBoolean value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
+    return (
+      <StyledPegaDxilMyBooleanWrapper>
+       {displayComponent}
+      </StyledPegaDxilMyBooleanWrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

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

@@ -20,17 +20,8 @@ export const BasePegaDxilMyCurrency: Story = args => {
 
   const props = {
     value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -60,6 +51,7 @@ export const BasePegaDxilMyCurrency: Story = args => {
 
 BasePegaDxilMyCurrency.args = {
   label: configProps.label,
+  placeholder: configProps.placeholder,
   helperText: configProps.helperText,
   showGroupSeparators: configProps.showGroupSeparators,
   allowDecimals: configProps.allowDecimals,
@@ -72,5 +64,6 @@ BasePegaDxilMyCurrency.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -3,6 +3,7 @@
 export const configProps = {
   value: '',
   label: 'Currency Sample',
+  placeholder: 'Currency Placeholder',
   currencyISOCode: 'USD',
   allowDecimals: true,
   showGroupSeparators: true,
@@ -12,6 +13,7 @@ export const configProps = {
   testId: 'currency-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

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

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const BasePegaDxilMyDate: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,25 +57,7 @@ export const BasePegaDxilMyDate: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    testId: configProps.testId,
-    showAsFormattedText: configProps.showAsFormattedText,
-    additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    hasSuggestions: configProps.hasSuggestions,
-    validatemessage: '',
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required
+    }
   };
 
   return (
@@ -92,6 +77,10 @@ BasePegaDxilMyDate.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
+  showAsFormattedText: configProps.showAsFormattedText,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const BasePegaDxilMyDateTime: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,24 +57,7 @@ export const BasePegaDxilMyDateTime: Story = args => {
         acceptSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    nextYearRange: configProps.nextYearRange,
-    previousYearRange: configProps.previousYearRange,
-    showWeekNumber: configProps.showWeekNumber,
-    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 (
@@ -92,6 +78,9 @@ BasePegaDxilMyDateTime.args = {
   required: configProps.required,
   status: configProps.status,
   hideLabel: configProps.hideLabel,
+  nextYearRange: configProps.nextYearRange,
+  previousYearRange: configProps.previousYearRange,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

@@ -2,6 +2,7 @@
 // @ts-nocheck
 export const configProps = {
   value: '2023-01-24T16:45:00.000Z',
+  placeholder: 'DateTime Placeholder',
   validatemessage: '',
   label: 'DateTime Label',
   hideLabel: false,

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

@@ -20,14 +20,7 @@ export const BasePegaDxilMyDecimal: 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: () => {
@@ -66,5 +59,6 @@ BasePegaDxilMyDecimal.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

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

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

@@ -0,0 +1,58 @@
+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) => {
+    const { type } = value.getPConnect().getRawMetadata();
+    const { hideLabel, variant, testId, label } = value
+      .getPConnect()
+      .resolveConfigProps(value.getPConnect().getConfigProps());
+
+    let displayComp;
+    const key = JSON.stringify(value.getPConnect());
+
+    if (type === 'reference') {
+      const refElement = value.getPConnect().getComponent();
+
+      displayCompArr.push(refElement);
+    } else {
+      const element = value.getPConnect().getComponent();
+      const displayEl = <Fragment key={key}>{element}</Fragment>;
+
+      const fvlStyle = {
+        myColGap: {
+          columnGap: '0'
+        }
+      };
+
+      // const myEl = <div>boo</div>;
+      displayComp = (
+        <Fragment key={key}>
+          <FieldValueList
+            style={fvlStyle.myColGap}
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
+          />
+        </Fragment>
+      );
+
+      displayCompArr.push(displayComp);
+    }
+  });
+
+  return <>{displayCompArr}</>;
+};
+
+export default DetailsRender;

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/HighlightRender.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { FieldValueList, Text } from '@pega/cosmos-react-core';
+
+const HighlightRender = (data: any) => {
+  const { getPConnect } = data.props;
+  const { field } = data;
+
+  field.config['displayMode'] = 'DISPLAY_ONLY';
+
+  // Mark as status display when using pyStatusWork
+  if (field.config?.value === '@P .pyStatusWork') {
+    field.type = 'TextInput';
+    field.config.displayAsStatus = true;
+  }
+
+  const configProps = getPConnect().resolveConfigProps(field.config);
+
+  // field.config = configProps;
+
+  const reactField = getPConnect().createComponent(field);
+  // const reactField = field.getPConnect().getComponent();
+
+  const styles = {
+    myWidth: {
+      width: 'auto'
+    }
+  };
+
+  return (
+    <FieldValueList
+      style={styles.myWidth}
+      variant='stacked'
+      data-testid={field.testId}
+      fields={[
+        {
+          id: '2',
+          name: configProps.hideLabel ? '' : configProps.label,
+          value: (
+            <Text variant='h1' as='span'>
+              {reactField}
+            </Text>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+export default HighlightRender;

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

@@ -88,10 +88,6 @@ const renderField = resolvedProps => {
 
 export const BasePegaDxilMyDetails: Story = args => {
   const props = {
-    template: 'MyCo_MyComponents_NewDetailsTemplate',
-    showHighlightedData: true,
-    label: 'Test Details',
-    showLabel: true,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -146,4 +142,8 @@ export const BasePegaDxilMyDetails: Story = args => {
   );
 };
 
-BasePegaDxilMyDetails.args = {};
+BasePegaDxilMyDetails.args = {
+  showLabel: true,
+  label: 'Details template',
+  showHighlightedData: true
+};