@pega/custom-dx-components 0.24.3 → 0.24.5

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -15,8 +17,6 @@ interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
@@ -24,9 +24,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   gridHighlightContainer.cols = gridRepeat;
   // @ts-ignore
-  gridHighlightContainer.alignItems = 'start';
+  gridHighlightContainer.alignItems = 'flex-start';
   // @ts-ignore
   gridHighlightContainer.pad = [0, 0, 2, 0];
 
@@ -47,40 +55,54 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     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 (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
     <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>
     </FieldGroup>
-    <%={{ }}=%>     {{! revert delimiters for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/Template/FORM/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/src/tasks/create/templates/Constellation/Template/FORM/index.tsx.mustache

@@ -1,7 +1,8 @@
-import { Grid, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -13,19 +14,44 @@ interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
-  const { children = [], NumCols = '1', label, showLabel, getPConnect } = props;
+  const { children = [], NumCols = '1', label, showLabel, getPConnect, readOnly, displayMode } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const nCols = parseInt(NumCols, 10);
 
-  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
 
+  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+    const numRegions = '1';
+    const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
+    const gridContainer = { colGap: 0 };
+    // @ts-ignore
+    gridContainer.cols = gridRepeat;
+
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <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>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
 {{! pick new delimiters for mustache }}

package/src/tasks/create/templates/Constellation/Template/FORM-region/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/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -11,14 +12,12 @@ interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
 
-  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,10 +32,33 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // @ts-ignore
   flexContainer.gap = 2;
 
+  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+        <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>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
       <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
         <Grid container={gridContainer}>
         {children.map((child: any, i: number) => (
@@ -47,7 +69,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         ))}
         </Grid>
       </FieldGroup>
-    <%={{ }}=%>     {{! revert delimiters for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/create/templates/Constellation/Template/PAGE/GetNextWork.tsx.mustache

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

package/src/tasks/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.3",
+    "@pega/custom-dx-components": "0.24.5",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/src/tasks/init/template/tsconfig.build.json

@@ -5,7 +5,9 @@
     "./src/**/*.stories.ts",
     "./src/**/*.stories.tsx",
     "./src/**/*.stories.js",
-    "./src/**/*.stories.jsx"
+    "./src/**/*.stories.jsx",
+    "./src/**/*.test.jsx",
+    "./src/**/*.test.tsx"
   ],
   "compilerOptions": {
     "noEmit": false,

package/tests/assets/components/create/Pega_DXIL_MyTestText/demo.stories.tsx

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

package/tests/assets/components/create/Pega_DXIL_MyTestText/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 StyledPegaDxilMyTestTextWrapper from './styles';
 // interface for props
 interface PegaDxilMyTestTextProps 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 PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  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' ? (
+      <StyledPegaDxilMyTestTextWrapper> {displayComp} </StyledPegaDxilMyTestTextWrapper>
+    ) : (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant={hideLabel ? 'stacked' : variant}
+          data-testid={testId}
+          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const isValDefined = typeof value !== 'undefined' && value !== '';
+    const val = isValDefined ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+    return (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant='stacked'
+          data-testid={testId}
+          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTestTextWrapper>
       <Input

package/tests/assets/components/createAll/Constellation/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/Constellation/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/Constellation/Pega_DXIL_MyCaseWidget/demo.stories.tsx

@@ -49,7 +49,6 @@ window.PCore.getDataApiUtils = () => {
 export const BasePegaDxilMyCaseWidget: Story = args => {
 
   const props = {
-    label: 'Case history',
 
     getPConnect: () => {
       return {
@@ -83,4 +82,6 @@ return (
   );
 };
 
-BasePegaDxilMyCaseWidget.args = {};
+BasePegaDxilMyCaseWidget.args = {
+  label: 'Case history',
+};

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