@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/index.tsx

@@ -0,0 +1,83 @@
+import { useMemo, Children } from 'react';
+import PropTypes from 'prop-types';
+import { OneColumnPage as OneColumn } from '@pega/cosmos-react-core';
+import { ConfigurableLayout } from '@pega/cosmos-react-work'
+// import { registerIcon } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from './PConnProps';
+
+
+
+// temp
+// import * as headlineIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headline.icon';
+
+import StyledPegaDxilMyPageWrapper from './styles';
+
+import GetNextWork from './GetNextWork';
+import { getLayoutDataFromRegion } from './utils';
+
+// temp
+// registerIcon(headlineIcon);
+
+// currently getting 'icon' from props is not supported with iconRegistry
+// have to manually get icon, so can't determine a runtime for now
+// so "headline" icon is hardcoded.
+
+// interface for props
+interface PegaDxilMyPageProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  children: any;
+  title: string;
+  useConfigurableLayout: boolean;
+  enableGetNextWork: boolean;
+}
+
+// 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
+export default function PegaDxilMyPage(props: PegaDxilMyPageProps) {
+
+  // add back in icon when working
+  // const { children, title, icon, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
+  const { children, title, useConfigurableLayout, getPConnect, enableGetNextWork } = props;
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+  const child0: any = childArray[0];
+  const layoutItemsA = useMemo(() => {
+    return getLayoutDataFromRegion(child0);
+  }, [child0]);
+
+  // temp
+  const tempIcon = "pi pi-headline";
+
+  return (
+
+    <StyledPegaDxilMyPageWrapper>
+    <OneColumn
+      // @ts-ignore
+      a={useConfigurableLayout ? <ConfigurableLayout items={layoutItemsA} /> : childArray[0]}
+      title={title}
+      icon={tempIcon?.replace('pi pi-', '')}
+       // @ts-ignore
+      actions={enableGetNextWork ? <GetNextWork getPConnect={getPConnect} /> : null}
+    />
+    </StyledPegaDxilMyPageWrapper>
+
+  );
+
+
+
+}
+
+PegaDxilMyPage.defaultProps = {
+  /* icon: '', */
+  useConfigurableLayout: false
+};
+
+PegaDxilMyPage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  title: PropTypes.string.isRequired,
+  /* icon: PropTypes.string, */
+  useConfigurableLayout: PropTypes.bool
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/localizations.json

@@ -0,0 +1,4 @@
+{
+  "Get next work" : "Get next work",
+  "No task currently available" : "No task currently available"
+}

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/mock.ts

@@ -0,0 +1,96 @@
+
+// @ts-nocheck
+export const pyHome1Raw = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: '@DATASOURCE D_pyAnnouncements.pxResults',
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};
+
+export const pyHome1Resolved = {
+  name: 'pyHome1',
+  type: 'View',
+  config: {
+    type: 'landingpage',
+    template: 'OneColumnPage',
+    icon: 'home-solid',
+    title: '@ENV APPLICATION_DESC',
+    ruleClass: 'DIXL-MediaCo-UIPages',
+    localeReference: '@LR DIXL-MEDIACO-UIPAGES!PAGE!PYHOME1',
+    enableGetNextWork: true,
+    context: 'pyPortal'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      getPConnect: () => {
+        return {
+          getComponentName: () => {
+            return '';
+          },
+          getComponent: () => {
+            return pyHome1Resolved.children[0];
+          },
+          getConfigProps: () => {
+            return {};
+          }
+        };
+      },
+      children: [
+        {
+          type: 'AppAnnouncement',
+          config: {
+            label: '@L App announcement',
+            description:
+              "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos.",
+            whatsnewlink: 'https://design.pega.com',
+            image:
+              'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+',
+            datasource: {
+              source: '@DATASOURCE D_pyAnnouncements.pxResults',
+              fields: {
+                name: '@P .pyLabel'
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  classID: 'DIXL-MediaCo-UIPages'
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/styles.ts

@@ -0,0 +1,15 @@
+
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
+
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyPage/utils.js

@@ -0,0 +1,228 @@
+import { createUID } from '@pega/cosmos-react-core';
+
+// import { LazyMap as LazyComponentMap } from '../../components_map';
+
+const LazyComponentMap = {};
+
+/**
+ * Given the PConnect object of a Template component, retrieve the children
+ * metadata of all regions.
+ * @param {Function} pConnect PConnect of a Template component.
+ */
+export function getAllFields(pConnect) {
+  const metadata = pConnect().getRawMetadata();
+  if (!metadata.children) {
+    return [];
+  }
+
+  let allFields = [];
+
+  const makeField = (f) => ({
+    ...pConnect().resolveConfigProps(f.config),
+    type: f.type
+  });
+
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    allFields = metadata.children.map((region) =>
+      region.children.map((field) => {
+        // Do not resolve the config props if is status work, instead create component here as status badge and mark as status display
+        if (field.config?.value === '@P .pyStatusWork') {
+          field.type = 'TextInput';
+          field.config.displayAsStatus = true;
+          return pConnect().createComponent(field);
+        }
+
+        return makeField(field);
+      })
+    );
+  } else {
+    allFields = metadata.children.map(makeField);
+  }
+
+  return allFields;
+}
+
+/**
+ * A helper function to create an object consisting react component as per the type.
+ * This is used by CaseSummary template.
+ * @param {object} configObject Object containing meta information for the particular field authored
+ * @param {Function} getPConnect PConnect function passed along to other components.
+ * @param {string} displayMode displayMode string contains information about the layout of component in review mode.
+ */
+export function prepareComponentInCaseSummary(configObject, getPConnect, displayMode) {
+  const { config, children } = configObject;
+  let { type } = configObject;
+  const caseSummaryComponentObject = {};
+  let showAddressLabel = true;
+  if (config && config.value === '@P .pyStatusWork') {
+    config.displayAsStatus = true;
+    type = 'TextInput'; // force the type to be TextInput for status field.
+    // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
+    // Load TextInput if it is not available.
+    if (!LazyComponentMap[type]) {
+      PCore.getAssetLoader().getLoader('component-loader')([type]);
+    }
+  }
+
+  caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+    label: config.label
+  }).label;
+  if (type === 'CaseOperator') {
+    switch (caseSummaryComponentObject.name) {
+      case 'Create operator':
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          createLabel: config.createLabel
+        }).createLabel;
+        break;
+      case 'Update operator':
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          updateLabel: config.updateLabel
+        }).updateLabel;
+        break;
+      default:
+        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+          resolveLabel: config.resolveLabel
+        }).resolveLabel;
+        break;
+    }
+  } else if (type === 'Checkbox') {
+    caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
+      label: config.caption
+    }).label;
+  } else if (type === 'Address') {
+    showAddressLabel = false;
+  }
+  const createdComponent = getPConnect().createComponent({
+    type,
+    children: children ? [...children] : [],
+    showAddressLabel,
+    config: {
+      ...config,
+      hideLabel: true,
+      key: createUID() // Need a unique key on render of the summary so that the component is recreated each time
+    }
+  });
+  createdComponent.props.getPConnect().setInheritedProp('displayMode', displayMode);
+  if (type === 'Address') {
+    createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
+  }
+  // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
+  caseSummaryComponentObject.value = createdComponent;
+  if (type === 'reference') {
+    caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
+  }
+
+  return caseSummaryComponentObject;
+}
+
+export function getFilteredFields(getPConnect) {
+  let primaryFieldsRaw;
+  let secondaryFieldsRaw;
+  const metadata = getPConnect().getRawMetadata();
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    primaryFieldsRaw = metadata.children[0].children;
+    secondaryFieldsRaw = metadata.children[1].children;
+  } else {
+    [primaryFieldsRaw, secondaryFieldsRaw] = metadata.children;
+  }
+
+  // Filter out fields that are not visible and unsupported types for primary fields (for CaseSummary)
+  primaryFieldsRaw = primaryFieldsRaw.filter((item) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  secondaryFieldsRaw = secondaryFieldsRaw.filter((item) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  return [primaryFieldsRaw, secondaryFieldsRaw];
+}
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @param {object[]} regionData template children item.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+export function getIsAssignmentView(pConnect) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect, instructions = 'casestep') {
+  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+    /* eslint-disable no-console */
+    console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+    /* eslint-enable no-console */
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/StatusWork.tsx

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { Status } from "@pega/cosmos-react-core";
+
+export default function StatusWorkRenderer({ value }: any) {
+  let variant: "pending" | "success" | "info" | "warn" | "urgent" = "info";
+
+  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";
+  }
+
+  return (
+    <Status type="rectangle" variant={variant}>
+      {value}
+    </Status>
+  );
+}

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/TwoColumnDetails.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="70px" viewBox="0 0 100 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2 col </title>
+    <g id="Page-Config" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-layouts" transform="translate(-847.000000, -84.000000)">
+            <g id="2-col-" transform="translate(847.000000, 84.000000)">
+                <rect id="bg" stroke="#A5A8BC" stroke-width="0.5" fill="#E7E9EB" x="0.25" y="0.25" width="99.5" height="69.5"></rect>
+                <g id="white" transform="translate(3.000000, 3.000000)" fill="#FFFFFF">
+                    <rect id="Rectangle" x="0" y="0" width="94" height="66.5"></rect>
+                </g>
+                <g id="gray-copy-2" transform="translate(6.000000, 6.000000)" fill="#8084A7">
+                    <rect id="Rectangle" x="0" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                    <rect id="Rectangle" x="46" y="-2.84217094e-14" width="42" height="63.8"></rect>
+                </g>
+                <g id="labels-copy" transform="translate(22.000000, 17.000000)" fill="#FFFFFF" font-family="OpenSans-Semibold, Open Sans" font-size="11" font-weight="500">
+                    <text id="B">
+                        <tspan x="45.75" y="12">B</tspan>
+                    </text>
+                    <g id="labels">
+                        <text id="A">
+                            <tspan x="0.75" y="12">A</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/tests/assets/sdk-r/components/createAll/custom-constellation/template/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -0,0 +1,142 @@
+
+
+// @ts-nocheck
+import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
+import PegaDxilMyTwoColumnDetails from './index';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
+import StatusWorkRenderer from './StatusWork';
+
+export default {
+  title: 'PegaDxilMyTwoColumnDetails',
+  component: PegaDxilMyTwoColumnDetails
+};
+
+const renderField = resolvedProps => {
+  const {
+    displayAsStatus = false,
+    displayMode,
+    value = '',
+    label = '',
+    key,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = useTheme()
+  } = resolvedProps;
+
+  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+
+  let val =
+    value !== '' ? (
+      <Text variant='h1' as='span' key={key}>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+
+  if (label === 'Create date/time')
+    val = (
+      <DateTimeDisplay
+        value={value}
+        variant='datetime'
+        format='long'
+        clockFormat={null}
+        key={key}
+      />
+    );
+
+  if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
+
+  if (label === 'Create Operator')
+    val = (
+      <Button
+        variant='link'
+        style={
+          label !== null
+            ? { width: 'max-content', height: theme.components.input.height }
+            : undefined
+        }
+        key={key}
+      >
+        {value.userName}
+      </Button>
+    );
+
+  if (variant === 'inline') {
+    val = value || (
+      <span aria-hidden='true' key={key}>
+        &ndash;&ndash;
+      </span>
+    );
+  } else {
+    val = (
+      <Text variant='h1' as='span' key={key}>
+        {val}
+      </Text>
+    );
+  }
+  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
+};
+
+export const BasePegaDxilMyTwoColumnDetails = () => {
+  const props = {
+    template: 'MyCo_MyComponents_NewDetailsTemplate',
+    showHighlightedData: true,
+    label: 'Test Details',
+    showLabel: true,
+    getPConnect: () => {
+      return {
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        getRawMetadata: () => {
+          return pyReviewRaw;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
+        createComponent: config => {
+          // eslint-disable-next-line default-case
+          switch (config.config.value) {
+            case '@P .pyStatusWork':
+              return renderField(pyReviewResolved.highlightedData[0].config);
+            case '@P .pyID':
+              return renderField(pyReviewResolved.highlightedData[1].config);
+            case '@P .pxCreateDateTime':
+              return renderField(pyReviewResolved.highlightedData[2].config);
+            case '@USER .pxCreateOperator':
+              return renderField(pyReviewResolved.highlightedData[3].config);
+            case '@P .pySLADeadline':
+              return renderField(regionChildrenResolved[0]);
+            case '@P .pySLAGoal':
+              return renderField(regionChildrenResolved[1]);
+            case '@P .pySLAStartTime':
+              return renderField(regionChildrenResolved[2]);
+          }
+        },
+        setInheritedProp: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
+  };
+
+  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
+    return props.getPConnect().createComponent(child);
+  });
+
+  return (
+    <PegaDxilMyTwoColumnDetails {...props}>
+      {regionAChildren}
+      {regionBChildren}
+    </PegaDxilMyTwoColumnDetails>
+  );
+};