@pega/custom-dx-components 0.23.48 → 0.24.1

package/README.md

@@ -8,7 +8,7 @@ This project provides you with an environment to extend Constellation by giving
 
 Ensure you have access to the following in your system:
 
-- Pega Infinity Server version 23 or later
+- Pega Infinity Server version 24 or later
 
 - Git version 2.30 or later
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.48",
+  "version": "0.24.1",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/cli.js

@@ -18,7 +18,8 @@ import {
   promoteWebPack,
   updateComponent,
   validate,
-  upgrade
+  upgrade,
+  buildJestAssets
 } from './tasks/index.js';
 
 const TASKS = {
@@ -38,7 +39,8 @@ const TASKS = {
   DELETE: 'delete',
   DELETE_ALL: "deleteAll",
   AUTHENTICATE: 'authenticate',
-  UPGRADE: 'upgrade'
+  UPGRADE: 'upgrade',
+  BUILD_JEST_ASSETS: 'buildJestAssets'
 };
 
 const parseArgumentsIntoOptions = rawArgs => {
@@ -132,6 +134,10 @@ export default async (args = []) => {
       upgrade(options);
       break;
     }
+    case TASKS.BUILD_JEST_ASSETS: {
+      buildJestAssets(options);
+      break;
+    }
     default: {
       console.log(chalk.red(`No task matched with ${task}`));
       break;

package/src/tasks/build-jest-assets/index.js

@@ -0,0 +1,171 @@
+import fs from 'fs';
+import path from 'path';
+import { join } from 'path';
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import createAll from '../create-all/index.js';
+import create from '../create/index.js';
+
+import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+
+
+const getBuildAssetsQuestions = async ()  => {
+  const message = "\n**IMPORTANT** Building Jest Assets will remove any local components in your components directory!\n";
+  console.log(`${chalk.green.bold(message)}`);
+
+  return [
+    {
+      name: 'buildAssets',
+      type: 'confirm',
+      message: 'Generate Jest Assets ?',
+      default: false
+    }
+  ];
+};
+
+const deleteTestComponent = async(path, componentKey) => {
+  const directory = join(path, componentKey);
+
+  try {
+    fs.rmSync(directory, { recursive: true });
+    console.log(`${chalk.red.bold(componentKey)} is deleted from assets`);
+  } catch (err) {
+    console.log('no file');
+    throw new Error(`No such file ${componentKey}`);
+  }
+}
+
+const copyAssets = async(destinationPath) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+
+  const srcDir = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
+
+  fs.cpSync(srcDir, destinationPath, { recursive: true});
+}
+
+const deleteAssets = async() => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = JSON.parse(data);
+
+  if (!data[COMPONENTS_DIRECTORY_PATH]) {
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+  const localComponents = await getComponents();
+
+  for (const index in localComponents) {
+    const componentToDelete = localComponents[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH], componentToDelete);
+
+    try {
+      fs.rmSync(directory, { recursive: true });
+      console.log(`${chalk.red.bold(componentToDelete)} is deleted from Local`);
+    } catch (err) {
+        console.log('no file');
+        throw new Error(`No such file ${componentToDelete}`);
+    }
+  }
+}
+
+const createJestAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+
+export default async options => {
+  showVersion();
+
+  const questions = await getBuildAssetsQuestions();
+  const answers = await inquirer.prompt(questions);
+  const {  buildAssets } = answers;
+
+  if (buildAssets) {
+    // get current server type
+    const savedServerType = await getServerType();
+
+    // Constellation
+    await setServerType("infinity");
+    await createJestAssets(false);
+
+    //Launchpad
+    await setServerType("launchpad");
+    await createJestAssets(true);
+
+
+    // restore serverType
+    await setServerType(savedServerType);
+  }
+
+
+
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/demo.stories.tsx.mustache

@@ -23,20 +23,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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: () => {
@@ -69,12 +56,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  caption: configProps.caption,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
   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/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   let displayComponent;
   if (displayMode) {
-    // @ts-ignore
     displayComponent = (
-      // @ts-ignore
-      <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
+      <BooleanDisplay value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
     );
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComponent </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+       {displayComponent}
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }
 
   if (displayMode === "LABELS_LEFT") {

package/src/tasks/create/templates/Constellation/Field/Date/demo.stories.tsx.mustache

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,25 +57,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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 (
@@ -85,12 +70,17 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
   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/src/tasks/create/templates/Constellation/Field/Date/index.tsx.mustache

@@ -175,7 +175,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case "LABELS_LEFT" : {
         return (

package/src/tasks/create/templates/Constellation/Field/DateTime/demo.stories.tsx.mustache

@@ -31,6 +31,9 @@ window.PCore.getEnvironmentInfo = () => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -54,24 +57,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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 (
@@ -84,12 +70,17 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
   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/src/tasks/create/templates/Constellation/Field/DateTime/index.tsx.mustache

@@ -181,7 +181,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/DateTime/mock.ts.mustache

@@ -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/src/tasks/create/templates/Constellation/Field/Decimal/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal/index.tsx.mustache

@@ -161,7 +161,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Decimal/mock.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.tsx.mustache

@@ -20,17 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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,7 +51,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
+  placeholder: configProps.placeholder,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
+  allowDecimals: configProps.allowDecimals,
+  currencyISOCode: configProps.currencyISOCode,
+  alwaysShowISOCode: configProps.alwaysShowISOCode,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -68,5 +64,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -86,6 +86,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     displayMode === 'DISPLAY_ONLY'
   ) {
     let displayComp;
-    let { showGroupSeparators = false } = props;
+    // let { showGroupSeparators = false } = props;
     if (displayMode === 'LABELS_LEFT' && isTableFormatter) {
       noOfFractionDigits = undefined;
       showGroupSeparators = true;
@@ -191,7 +192,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>) ;
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (
@@ -245,6 +246,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       showDecimal={allowDecimals}
       currencyISOCode={currencyISOCode}
       alwaysShowISOCode={alwaysShowISOCode}
+      showGroupSeparators={showGroupSeparators}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/mock.ts.mustache

@@ -3,14 +3,17 @@
 export const configProps = {
   value: '',
   label: 'Currency Sample',
+  placeholder: 'Currency Placeholder',
   currencyISOCode: 'USD',
   allowDecimals: true,
+  showGroupSeparators: true,
   alwaysShowISOCode: true,
   placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',
   testId: 'currency-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -20,14 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -64,5 +60,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -168,7 +168,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/mock.ts.mustache

@@ -4,11 +4,11 @@ export const configProps = {
   value: '',
   label: 'Percentage Sample',
   showGroupSeparators: true,
-  placeholder: 'Percentage Placeholder',
   helperText: 'Percentage Helper Text',
   testId: 'percentage-12345678',
   hasSuggestions: false,
   displayMode: '',
+  variant: '',
   hideLabel: false,
   readOnly: false,
   required: false,

package/src/tasks/create/templates/Constellation/Field/Integer/demo.stories.tsx.mustache

@@ -19,14 +19,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -63,5 +59,6 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
+  variant: configProps.variant,
   validatemessage: configProps.validatemessage
 };

package/src/tasks/create/templates/Constellation/Field/Integer/index.tsx.mustache

@@ -187,7 +187,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Integer/mock.ts.mustache

@@ -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,