@pega/custom-dx-components 0.24.3 → 0.24.4

package/tests/assets/components/createAll/Constellation/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/Constellation/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/Constellation/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/Constellation/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/Constellation/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/Constellation/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/Constellation/Pega_DXIL_MyDetails/DetailsRender.tsx

@@ -0,0 +1,52 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Fragment } from 'react';
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+const DetailsRender = (child: any) => {
+  const kids = child.props.getPConnect().getChildren();
+
+  const displayCompArr: JSX.Element[] = [];
+
+  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_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/Constellation/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
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/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 StyledPegaDxilMyDetailsWrapper from './styles';
 
@@ -16,8 +18,6 @@ interface PegaDxilMyDetailsProps 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 PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
@@ -25,9 +25,17 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   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
@@ -37,7 +45,7 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   // @ts-ignore
   gridHighlightContainer.cols = gridRepeat;
   // @ts-ignore
-  gridHighlightContainer.alignItems = 'start';
+  gridHighlightContainer.alignItems = 'flex-start';
   // @ts-ignore
   gridHighlightContainer.pad = [0, 0, 2, 0];
 
@@ -48,33 +56,46 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
     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);
+    //  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} />;
     });
   }
 
+  const hrStyle = {
+    line: {
+      margin: '0.75rem 0',
+      opacity: '50%'
+    }
+  };
+
   return (
     <StyledPegaDxilMyDetailsWrapper>
     <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}
+        <Flex container={{ direction: 'column', alignItems: 'start', colGap: 0, rowGap: 1.5 }} key={`r-${i + 1}`}>
+          <DetailsRender {...child} />
         </Flex>
        ))}
       </Grid>

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

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

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

@@ -139,8 +139,6 @@ const renderField = resolvedProps => {
 
 export const BasePegaDxilMyForm: Story = args => {
   const props = {
-    NumCols: 1,
-    template: 'DefaultForm',
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -181,4 +179,8 @@ export const BasePegaDxilMyForm: Story = args => {
   );
 };
 
-BasePegaDxilMyForm.args = {};
+BasePegaDxilMyForm.args = {
+  showLabel: true,
+  label: 'Form template',
+  NumCols: 1,
+};

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

@@ -19,14 +19,8 @@ export const BasePegaDxilMyInteger: 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: () => {
@@ -56,6 +50,7 @@ export const BasePegaDxilMyInteger: Story = args => {
 BasePegaDxilMyInteger.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
@@ -64,5 +59,6 @@ BasePegaDxilMyInteger.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/GetNextWork.tsx

@@ -18,6 +18,7 @@ export default function GetNextWork(props: PegaDxilMyPageWorkProps) {
   const toasterCtx = useToaster();
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Case';
 
   const getNextWork = () => {
 
@@ -30,7 +31,7 @@ export default function GetNextWork(props: PegaDxilMyPageWorkProps) {
         console.log(err);
         if (err[0].status === 404) {
           toasterCtx.push({
-            content: localizedVal('No task currently available')
+            content: localizedVal('No task currently available', localeCategory)
           });
         }
       });

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

@@ -35,9 +35,7 @@ export const BasePegaDxilMyPage: Story = args => {
 
   const props = {
     useConfigurableLayout: false,
-    enableGetNextWork: pyHome1Raw.config.enableGetNextWork,
     icon: pyHome1Raw.config.icon,
-    title: 'Page Template',
 
     getPConnect: () => {
       return {
@@ -108,4 +106,7 @@ export const BasePegaDxilMyPage: Story = args => {
   );
 };
 
-BasePegaDxilMyPage.args = {};
+BasePegaDxilMyPage.args = {
+  title: 'Page Template',
+  enableGetNextWork: pyHome1Raw.config.enableGetNextWork,
+};

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

@@ -41,13 +41,10 @@ export const BasePegaDxilMyPageCaseWidget: Story = args => {
 
   const props = {
     label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
     createOperator: configProps.createOperator,
     updateOperator: configProps.updateOperator,
     createDateTime: configProps.createDateTime,
     updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
 
     getPConnect: () => {
       return {
@@ -72,4 +69,8 @@ return (
   );
 };
 
-BasePegaDxilMyPageCaseWidget.args = {};
+BasePegaDxilMyPageCaseWidget.args = {
+  createLabel: configProps.createLabel,
+  updateLabel: configProps.updateLabel,
+  hideLabel: configProps.hideLabel
+};

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

@@ -20,13 +20,8 @@ type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    label: configProps.label,
-    header: configProps.header,
-    description: configProps.description,
-    image: configProps.image,
-    datasource: configProps.datasource,
-    whatsnewlink: configProps.whatsnewlink
-};
+    image: configProps.image
+  };
 
 return (
     <>
@@ -37,5 +32,7 @@ return (
 
 BasePegaDxilMyPageWidget.args = {
   header: configProps.header,
-  description: configProps.description
+  description: configProps.description,
+  whatsnewlink: configProps.whatsnewlink,
+  datasource: configProps.datasource,
 };

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

@@ -20,13 +20,8 @@ export const BasePegaDxilMyParagraph: 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 @@ BasePegaDxilMyParagraph.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

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

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

package/tests/assets/components/createAll/Constellation/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/Constellation/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/Constellation/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/Constellation/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,