Merge pull request #101 from pegasystems/feature/status

add new Status badge component

src/components/Pega_Extensions_IframeWrapper/demo.stories.tsx

@@ -2,7 +2,10 @@ import type { StoryObj } from '@storybook/react';
 import { PegaExtensionsIframeWrapper } from './index';
 
 export default {
-  title: 'Fields/IFrame Wrapper',
+  title: 'Fields/Iframe Wrapper',
+  argTypes: {
+    height: { control: 'number', if: { arg: 'heightMode', eq: 'fixed' } }
+  },
   component: PegaExtensionsIframeWrapper
 };
 

src/components/Pega_Extensions_StatusBadge/Docs.mdx

@@ -0,0 +1,22 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+This field-level component allows to render a text field as a 'Status badge'. See [Status badge](https://design.pega.com/extend/badge/#Status) documentation.
+
+The value of field will be matched again each variant of the regular expression. The match is case insensitive. If no match is found, the badge will be displayed as the 'info' variant.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Configuration
+
+Constellation has a special handling for the field ID 'pyStatusWork' - to use this component, select a different field (like pyLabel) and set the input property to 'pyStatusWork' instead.
+
+![Example of using the Status Badget component](StatusBadge_Configuration.png)

src/components/Pega_Extensions_StatusBadge/config.json

@@ -0,0 +1,73 @@
+{
+  "name": "Pega_Extensions_StatusBadge",
+  "label": "Status Badge",
+  "description": "Status Badge",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_StatusBadge",
+  "type": "Field",
+  "subtype": "Text",
+  "icon": "images/pz-text-input-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "key": "inputProperty",
+      "format": "PROPERTY",
+      "name": "inputProperty",
+      "required": true,
+      "label": "Input Property"
+    },
+    {
+      "name": "infoStatus",
+      "label": "List of statuses for Info",
+      "format": "TEXT"
+    },
+    {
+      "name": "warnStatus",
+      "label": "List of statuses for Warning",
+      "format": "TEXT"
+    },
+    {
+      "name": "successStatus",
+      "label": "List of statuses for Success",
+      "format": "TEXT"
+    },
+    {
+      "name": "pendingStatus",
+      "label": "List of statuses for Pending",
+      "format": "TEXT"
+    },
+    {
+      "name": "urgentStatus",
+      "label": "List of statuses for Urgent",
+      "format": "TEXT"
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label",
+    "infoStatus": "@L open|hold|info|new",
+    "warnStatus": "@L fail|cancel|reject|withdraw|revoke|stopped|warn",
+    "successStatus": "@L resolved|completed|success",
+    "pendingStatus": "@L pending",
+    "urgentStatus": "@L blocked",
+    "detailFVLItem": true
+  }
+}

src/components/Pega_Extensions_StatusBadge/demo.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+import { PegaExtensionsStatusBadge } from './index';
+
+export default {
+  title: 'Fields/Status Badge',
+  component: PegaExtensionsStatusBadge
+};
+
+type Story = StoryObj<typeof PegaExtensionsStatusBadge>;
+
+export const Default: Story = {
+  render: args => {
+    const props = {
+      ...args
+    };
+    return <PegaExtensionsStatusBadge {...props} />;
+  },
+  args: {
+    inputProperty: 'Open',
+    infoStatus: 'open|hold|info|new',
+    warnStatus: 'fail|cancel|reject|withdraw|revoke|stopped|warn',
+    successStatus: 'resolved|completed|success',
+    pendingStatus: 'pending',
+    urgentStatus: 'blocked'
+  }
+};

src/components/Pega_Extensions_StatusBadge/demo.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders a Status badge component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findAllByText('Open')).toHaveLength(2);
+});

src/components/Pega_Extensions_StatusBadge/index.tsx

@@ -0,0 +1,51 @@
+import { withConfiguration, Status, type StatusProps } from '@pega/cosmos-react-core';
+import '../create-nonce';
+
+type StatusBadgeProps = {
+  /**  The value to display in the status badge */
+  inputProperty: string;
+  /** Regex expression to match the Info status
+   */
+  infoStatus?: string;
+  /** Regex expression to match the Warning status
+   */
+  warnStatus?: string;
+  /** Regex expression to match the Success status
+   */
+  successStatus?: string;
+  /** Regex expression to match the Pending status
+   */
+  pendingStatus?: string;
+  /** Regex expression to match the Urgent status
+   */
+  urgentStatus?: string;
+};
+
+/* If the status is not found - we will default to 'info' */
+const getStatusVariant = (value: string, statusesRegex: string[]): StatusProps['variant'] => {
+  const variants = ['info', 'warn', 'success', 'pending', 'urgent'];
+  let variant: StatusProps['variant'] = 'info';
+  if (statusesRegex) {
+    statusesRegex.forEach((regex, index) => {
+      if (regex && new RegExp(regex, 'i').test(value)) {
+        variant = variants[index] as StatusProps['variant'];
+      }
+    });
+  }
+  return variant;
+};
+
+export const PegaExtensionsStatusBadge = (props: StatusBadgeProps) => {
+  const {
+    inputProperty = '',
+    infoStatus = '',
+    warnStatus = '',
+    successStatus = '',
+    pendingStatus = '',
+    urgentStatus = ''
+  } = props;
+  const statusesRegex = [infoStatus, warnStatus, successStatus, pendingStatus, urgentStatus];
+
+  return <Status variant={getStatusVariant(inputProperty, statusesRegex)}>{inputProperty}</Status>;
+};
+export default withConfiguration(PegaExtensionsStatusBadge);