@pega/custom-dx-components 0.23.48 → 0.24.1

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

@@ -23,14 +23,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -84,8 +78,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -93,5 +89,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/Picklist/index.tsx.mustache

@@ -256,7 +256,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/Picklist/mock.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -24,19 +24,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     columns: [],
-    isTableFormatter: false,
     listType: 'associated',
-    parameters: {},
     datasourceMetadata,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -93,8 +85,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  parameters: {},
+  isTableFormatter: false,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -23,15 +23,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value,
-    align: 'vertical',
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    datasource: configProps.datasource,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getConfigProps: () => {
@@ -88,8 +81,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  inline: configProps.inline,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

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

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/mock.ts.mustache

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

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

@@ -23,9 +23,6 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {
@@ -59,6 +56,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

package/src/tasks/create/templates/Constellation/Field/Text-Email/demo.stories.tsx.mustache

@@ -20,13 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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: () => {
@@ -56,6 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   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/Text-Email/index.tsx.mustache

@@ -128,7 +128,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/Text-Input/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/src/tasks/create/templates/Constellation/Field/Text-Input/demo.stories.tsx.mustache

@@ -20,13 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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: () => {
@@ -56,6 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   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/Text-Input/index.tsx.mustache

@@ -143,7 +143,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FieldValueList

package/src/tasks/create/templates/Constellation/Field/Text-Input/mock.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/demo.stories.tsx.mustache

@@ -20,13 +20,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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: () => {
@@ -56,6 +51,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   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/Text-Paragraph/index.tsx.mustache

@@ -126,7 +126,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/Text-Paragraph/mock.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Phone/demo.stories.tsx.mustache

@@ -19,12 +19,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: 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,8 +47,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
+  datasource: configProps.datasource,
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -61,5 +58,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/Text-Phone/index.tsx.mustache

@@ -164,7 +164,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/Text-Phone/mock.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-URL/demo.stories.tsx.mustache

@@ -19,12 +19,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     value: configProps.value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
-    validatemessage: '',
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -54,6 +49,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -61,5 +57,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/Text-URL/mock.ts.mustache

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

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

@@ -15,6 +15,9 @@ type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
+    value: configProps.value,
+    additionalProps: configProps.additionalProps,
+    hasSuggestions: configProps.hasSuggestions,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -37,21 +40,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         ignoreSuggestion: () => {/* nothing */},
         clearErrorMessages: () => {/* nothing */}
       };
-    },
-    value: configProps.value,
-    validatemessage: configProps.validatemessage,
-    label: configProps.label,
-    hideLabel: configProps.hideLabel,
-    helperText: configProps.helperText,
-    withSeconds: configProps.withSeconds,
-    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 (
@@ -64,6 +53,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 Base{{COMPONENT_CLASS_NAME}}.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,
@@ -71,5 +61,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/TimeofDay/index.tsx.mustache

@@ -140,7 +140,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/Template/DETAILS/StatusWork.tsx.mustache

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

@@ -88,10 +88,6 @@ const renderField = resolvedProps => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
-    template: 'MyCo_MyComponents_NewDetailsTemplate',
-    showHighlightedData: true,
-    label: 'Test Details',
-    showLabel: true,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -147,6 +143,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
-  label: 'Test Details',
-  showLabel: true
+  showLabel: true,
+  label: 'Details template',
+  showHighlightedData: true
 };

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

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

@@ -86,10 +86,6 @@ const renderField = resolvedProps => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
-    template: 'MyCo_MyComponents_NewDetailsTemplate',
-    showHighlightedData: true,
-    label: 'Test Details',
-    showLabel: true,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -149,7 +145,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
-  showHighlightedData: false,
-  label: 'Details Region',
-  showLabel: true
+  showLabel: true,
+  label: 'Details Region template',
+  showHighlightedData: true
 };

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

@@ -142,8 +142,6 @@ const renderField = resolvedProps => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
-    NumCols: 1,
-    template: 'DefaultForm',
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -184,4 +182,8 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   );
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {};
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  showLabel: true,
+  label: 'Form template',
+  NumCols: 1,
+};

package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.tsx.mustache

@@ -145,7 +145,6 @@ const renderField = resolvedProps => {
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
-    template: 'DefaultForm',
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -190,4 +189,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   );
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {};
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  showLabel: true,
+  label: 'Form Region template',
+};