@pega/custom-dx-components 0.23.48 → 0.24.1

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

@@ -35,9 +35,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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 Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   );
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {};
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  title: 'Page Template',
+  enableGetNextWork: pyHome1Raw.config.enableGetNextWork,
+};

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -20,13 +20,8 @@ type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 export const Base{{COMPONENT_CLASS_NAME}}: 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 (
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
   header: configProps.header,
-  description: configProps.description
+  description: configProps.description,
+  whatsnewlink: configProps.whatsnewlink,
+  datasource: configProps.datasource,
 };

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -41,13 +41,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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 (
   );
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {};
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  createLabel: configProps.createLabel,
+  updateLabel: configProps.updateLabel,
+  hideLabel: configProps.hideLabel
+};

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -78,8 +78,4 @@ return (
   );
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {
-  updateDateTime: '2023-01-16T14:53:33.280Z',
-  createDateTime: '2023-01-16T14:53:33.198Z',
-  ...configProps
-};
+Base{{COMPONENT_CLASS_NAME}}.args = {};

package/src/tasks/index.js

@@ -15,3 +15,4 @@ export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build-comp/index.js';
 export { default as buildAllComponents } from './build-all/index.js';
+export { default as buildJestAssets } from './build-jest-assets/index.js';

package/src/tasks/init/template/.storybook/preview.js

@@ -7,6 +7,9 @@ const preview = {
         color: /(background|color)$/i,
         date: /Date$/i
       }
+    },
+    docs: {
+      source: { type: 'code' }
     }
   }
 };

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

@@ -28,6 +28,7 @@
     "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
     "_internal-test-functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
     "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
+    "_internal-build-jest-assets": "custom-dx-components buildJestAssets",
     "_lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "_lint:format": "prettier -c .",
     "_lint:spelling": "cspell --no-progress **/*",
@@ -50,16 +51,16 @@
   "license": "Enter License",
   "sideEffects": false,
  "dependencies": {
-    "@pega/cosmos-react-condition-builder": "^4.2.0",
-    "@pega/cosmos-react-core": "^4.2.0",
-    "@pega/cosmos-react-work": "^4.2.0",
+    "@pega/cosmos-react-condition-builder": "^6.0.3",
+    "@pega/cosmos-react-core": "^6.0.3",
+    "@pega/cosmos-react-work": "^6.0.3",
     "dayjs": "^1.11.10",
     "lodash.get": "^4.4.2",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-autosuggest": "^10.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-player": "^2.10.1",
     "react-redux": "^7.2.6",
@@ -68,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.23.48",
+    "@pega/custom-dx-components": "0.24.1",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/src/util.js

@@ -262,6 +262,24 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
+export const getServerType = async () => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  return defaultPegaServerConfig.serverType;
+}
+
+export const setServerType = async(serverType) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+  let configData = await getPegaConfig();
+  let serverConfig = configData['server-config'];
+  serverConfig.serverType = serverType;
+
+  // update file
+  // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(configData, null, 4), { encoding: 'utf8' });
+
+}
+
 export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);

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

@@ -59,6 +59,7 @@ export const BasePegaDxilMyTestText: Story = args => {
 BasePegaDxilMyTestText.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

package/tests/assets/components/create/_components.md

@@ -0,0 +1 @@
+# directory for components #

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

@@ -69,6 +69,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
 BasePegaDxilMyBoolean.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  caption: configProps.caption,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -104,7 +104,7 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> displayComponent </StyledPegaDxilMyBooleanWrapper>);
+    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {

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

@@ -61,6 +61,10 @@ export const BasePegaDxilMyCurrency: Story = args => {
 BasePegaDxilMyCurrency.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
+  allowDecimals: configProps.allowDecimals,
+  currencyISOCode: configProps.currencyISOCode,
+  alwaysShowISOCode: configProps.alwaysShowISOCode,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -86,6 +86,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
 
   let { readOnly = false, required = false, disabled = false } = props;
+  let { showGroupSeparators = false } = props;
 
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
@@ -120,7 +121,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     displayMode === 'DISPLAY_ONLY'
   ) {
     let displayComp;
-    let { showGroupSeparators = false } = props;
+    // let { showGroupSeparators = false } = props;
     if (displayMode === 'LABELS_LEFT' && isTableFormatter) {
       noOfFractionDigits = undefined;
       showGroupSeparators = true;
@@ -188,7 +189,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (
@@ -242,6 +243,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
       showDecimal={allowDecimals}
       currencyISOCode={currencyISOCode}
       alwaysShowISOCode={alwaysShowISOCode}
+      showGroupSeparators={showGroupSeparators}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}

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

@@ -5,6 +5,7 @@ export const configProps = {
   label: 'Currency Sample',
   currencyISOCode: 'USD',
   allowDecimals: true,
+  showGroupSeparators: true,
   alwaysShowISOCode: true,
   placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',

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

@@ -85,6 +85,7 @@ export const BasePegaDxilMyDate: Story = args => {
 BasePegaDxilMyDate.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -175,7 +175,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
+        return ( <StyledPegaDxilMyDateWrapper> {displayComp} </StyledPegaDxilMyDateWrapper>);
       }
       case "LABELS_LEFT" : {
         return (

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

@@ -84,6 +84,8 @@ export const BasePegaDxilMyDateTime: Story = args => {
 BasePegaDxilMyDateTime.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -181,7 +181,7 @@ function PegaDxilMyDateTime (props: PegaDxilMyDateTimeProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateTimeWrapper> displayComp </StyledPegaDxilMyDateTimeWrapper>);
+        return ( <StyledPegaDxilMyDateTimeWrapper> {displayComp} </StyledPegaDxilMyDateTimeWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

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

@@ -57,6 +57,8 @@ export const BasePegaDxilMyDecimal: Story = args => {
 BasePegaDxilMyDecimal.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -158,7 +158,7 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyDecimalWrapper> displayComp </StyledPegaDxilMyDecimalWrapper>);
+        return (<StyledPegaDxilMyDecimalWrapper> {displayComp} </StyledPegaDxilMyDecimalWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/StatusWork.tsx

@@ -1,28 +1,26 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
-import { Status } from "@pega/cosmos-react-core";
+import { Status } from '@pega/cosmos-react-core';
 
 export default function StatusWorkRenderer({ value }: any) {
-  let variant: "pending" | "success" | "info" | "warn" | "urgent" = "info";
+  // need to cast variant
+  let variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+  variant = 'info';
 
-  const warnStrings = ["fail", "cancel", "reject", "revoke", "stopped", "warn"];
-  const infoStrings = ["open", "hold", "info", "new"];
-  const successStrings = ["resolved", "completed", "success"];
-  const pendingStrings = ["pending"];
+  const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
+  const infoStrings = ['open', 'hold', 'info', 'new'];
+  const successStrings = ['resolved', 'completed', 'success'];
+  const pendingStrings = ['pending'];
 
-  if (new RegExp(warnStrings.join("|"), "i").test(value)) {
-    variant = "warn";
-  } else if (new RegExp(infoStrings.join("|"), "i").test(value)) {
-    variant = "info";
-  } else if (new RegExp(successStrings.join("|"), "i").test(value)) {
-    variant = "success";
-  } else if (new RegExp(pendingStrings.join("|"), "i").test(value)) {
-    variant = "pending";
+  if (new RegExp(warnStrings.join('|'), 'i').test(value)) {
+    variant = 'warn';
+  } else if (new RegExp(infoStrings.join('|'), 'i').test(value)) {
+    variant = 'info';
+  } else if (new RegExp(successStrings.join('|'), 'i').test(value)) {
+    variant = 'success';
+  } else if (new RegExp(pendingStrings.join('|'), 'i').test(value)) {
+    variant = 'pending';
   }
 
-  return (
-    <Status type="rectangle" variant={variant}>
-      {value}
-    </Status>
-  );
+  return <Status variant={variant}>{value}</Status>;
 }

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

@@ -146,7 +146,4 @@ export const BasePegaDxilMyDetails: Story = args => {
   );
 };
 
-BasePegaDxilMyDetails.args = {
-  label: 'Test Details',
-  showLabel: true
-};
+BasePegaDxilMyDetails.args = {};

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

@@ -56,6 +56,7 @@ export const BasePegaDxilMyEmail: Story = args => {
 BasePegaDxilMyEmail.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -128,7 +128,7 @@ function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyEmailWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyEmailWrapper>
     ) : (
       <StyledPegaDxilMyEmailWrapper>

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

@@ -56,6 +56,7 @@ export const BasePegaDxilMyInteger: Story = args => {
 BasePegaDxilMyInteger.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -184,7 +184,7 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyIntegerWrapper> displayComp </StyledPegaDxilMyIntegerWrapper>);
+        return (<StyledPegaDxilMyIntegerWrapper> {displayComp} </StyledPegaDxilMyIntegerWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

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

@@ -3,7 +3,6 @@ export const configProps = {
   value: '',
   label: 'Integer Sample',
   showGroupSeparators: true,
-  placeholder: 'Integer Placeholder',
   helperText: 'Integer Helper Text',
   testId: 'integer-12345678',
   hasSuggestions: false,

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

@@ -56,6 +56,7 @@ export const BasePegaDxilMyParagraph: Story = args => {
 BasePegaDxilMyParagraph.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -126,7 +126,7 @@ function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyParagraphWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyParagraphWrapper>
     ) : (
       <StyledPegaDxilMyParagraphWrapper>

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

@@ -57,6 +57,7 @@ export const BasePegaDxilMyPercentage: Story = args => {
 BasePegaDxilMyPercentage.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

package/tests/assets/components/createAll/Constellation/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/Constellation/Pega_DXIL_MyPercentage/mock.ts

@@ -4,7 +4,6 @@ export const configProps = {
   value: '',
   label: 'Percentage Sample',
   showGroupSeparators: true,
-  placeholder: 'Percentage Placeholder',
   helperText: 'Percentage Helper Text',
   testId: 'percentage-12345678',
   hasSuggestions: false,

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

@@ -54,6 +54,7 @@ export const BasePegaDxilMyPhone: Story = args => {
 BasePegaDxilMyPhone.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -86,6 +86,7 @@ export const BasePegaDxilMyPicklist: Story = args => {
 BasePegaDxilMyPicklist.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -23,11 +23,11 @@ export const BasePegaDxilMyRadiobuttons: Story = args => {
 
   const props = {
     value,
-    align: 'vertical',
     placeholder: configProps.placeholder,
     label: configProps.label,
     helperText: configProps.helperText,
     datasource: configProps.datasource,
+    inline: configProps.inline,
     testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
@@ -90,6 +90,8 @@ export const BasePegaDxilMyRadiobuttons: Story = args => {
 BasePegaDxilMyRadiobuttons.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  inline: configProps.inline,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -19,7 +19,6 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   listType: string;
   datasource: Array<any>;
   inline: boolean;
-  align: string;
 }
 
 
@@ -62,7 +61,6 @@ function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
     datasource = [],
     listType,
     validatemessage,
-    align = 'vertical',
     testId,
     additionalProps = {},
     displayMode,
@@ -185,7 +183,6 @@ function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProps) {
         // @ts-ignore
         pConn.getValidationApi().validate(event.target.value);
       }}
-      align={align}
       disabled={disabled}
       className='standard'
       name={fullReference}

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

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

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

@@ -95,6 +95,8 @@ export const BasePegaDxilMySearchbox: Story = args => {
 BasePegaDxilMySearchbox.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  isTableFormatter: false,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -59,6 +59,7 @@ export const BasePegaDxilMyText: Story = args => {
 BasePegaDxilMyText.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -56,6 +56,7 @@ export const BasePegaDxilMyTextInput: Story = args => {
 BasePegaDxilMyTextInput.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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