add Banner Input component and update FormFullWidth to support custom…

src/components/Pega_Extensions_BannerInput/Docs.mdx

@@ -0,0 +1,14 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+The banner input can be used inside a form to display some information to the user. Apply this component to a field of type textarea. The banner is usually display on change on another input field.
+
+<Primary />
+
+## Props
+
+<Controls />

src/components/Pega_Extensions_BannerInput/config.json

@@ -0,0 +1,81 @@
+{
+  "name": "Pega_Extensions_BannerInput",
+  "label": "Banner Input",
+  "description": "Banner Input",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_BannerInput",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "properties": [
+    {
+      "name": "icon",
+      "label": "Icon",
+      "format": "SELECT",
+      "defaultValue": "warn-solid",
+      "source": [
+        {
+          "key": "warn-solid",
+          "value": "warn-solid"
+        },
+        {
+          "key": "flag-wave-solid",
+          "value": "flag-wave-solid"
+        },
+        {
+          "key": "check",
+          "value": "check"
+        },
+        {
+          "key": "information-solid",
+          "value": "information-solid"
+        }
+      ]
+    },
+    {
+      "name": "variant",
+      "label": "variant",
+      "format": "SELECT",
+      "defaultValue": "success",
+      "source": [
+        {
+          "key": "success",
+          "value": "success"
+        },
+        {
+          "key": "info",
+          "value": "info"
+        },
+        {
+          "key": "warn",
+          "value": "warn"
+        },
+        {
+          "key": "pending",
+          "value": "pending"
+        },
+        {
+          "key": "urgent",
+          "value": "urgent"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "inputProperty": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "detailFVLItem": true
+  }
+}

src/components/Pega_Extensions_BannerInput/demo.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import { PegaExtensionsBannerInput } from './index';
+
+export default {
+  title: 'Fields/Banner Input',
+  component: PegaExtensionsBannerInput
+};
+
+type Story = StoryObj<typeof PegaExtensionsBannerInput>;
+
+export const Default: Story = {
+  render: args => {
+    const props = {
+      ...args
+    };
+    return <PegaExtensionsBannerInput {...props} />;
+  },
+  args: {
+    value:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    variant: 'success',
+    icon: 'warn-solid'
+  }
+};

src/components/Pega_Extensions_BannerInput/demo.test.tsx

@@ -0,0 +1,14 @@
+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 Banner Input component with default args', async () => {
+  render(<Default />);
+  expect(
+    await screen.findAllByText(
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+    )
+  ).toHaveLength(1);
+});

src/components/Pega_Extensions_BannerInput/index.tsx

@@ -0,0 +1,41 @@
+import { withConfiguration, Icon, registerIcon } from '@pega/cosmos-react-core';
+import { useTheme } from 'styled-components';
+import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
+import * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import * as informationSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information-solid.icon';
+
+import '../create-nonce';
+import { StyledBanner, StyledBannerStatus, StyledBannerText } from './styles';
+
+registerIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon, informationSolidIcon);
+
+type BannerInputProps = {
+  /**  The value to display in the banner input */
+  value: string;
+  /** variant of the banner input
+   * @default 'success'
+   */
+  variant?: 'success' | 'urgent' | 'info' | 'warn' | 'pending';
+  /** icon to use
+   * @default 'warn-solid'
+   */
+  icon?: 'warn-solid' | 'flag-wave-solid' | 'check' | 'information-solid';
+};
+
+export const PegaExtensionsBannerInput = (props: BannerInputProps) => {
+  const { value = '', variant = 'success', icon = 'clipboard' } = props;
+  const theme = useTheme();
+  const bannerMsg = `Banner ${variant} - ${value}`;
+  return (
+    <StyledBanner theme={theme} role='alert' tabIndex={0} aria-label={bannerMsg} aria-live='polite'>
+      <StyledBannerStatus variant={variant} theme={theme}>
+        <Icon name={icon} />
+      </StyledBannerStatus>
+      <StyledBannerText variant={variant} theme={theme}>
+        {value}
+      </StyledBannerText>
+    </StyledBanner>
+  );
+};
+export default withConfiguration(PegaExtensionsBannerInput);

src/components/Pega_Extensions_BannerInput/styles.ts

@@ -0,0 +1,56 @@
+import { tryCatch } from '@pega/cosmos-react-core';
+import { getContrast, readableColor } from 'polished';
+import styled, { css } from 'styled-components';
+
+export const StyledBanner = styled.div(({ theme }) => {
+  return css`
+    border-radius: ${theme.components.card['border-radius']};
+    min-height: 3.5rem;
+    display: grid;
+    grid-template-columns: 2rem minmax(0, 1fr);
+  `;
+});
+
+export const StyledBannerStatus = styled.div(
+  ({ variant, theme }: { variant: string; theme: any }) => {
+    const background = theme.base.palette[variant];
+    const color = tryCatch(() =>
+      getContrast(background, theme.base.palette['primary-background']) >= 3
+        ? theme.base.palette['primary-background']
+        : readableColor(background)
+    );
+
+    return css`
+      background-color: ${background};
+      color: ${color};
+      border: 0.0625rem solid ${background};
+      border-inline-end: none;
+      border-start-start-radius: inherit;
+      border-end-start-radius: inherit;
+      font-size: 1.25rem;
+      padding: 0 1rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `;
+  }
+);
+export const StyledBannerText = styled.div(
+  ({ variant, theme }: { variant: string; theme: any }) => {
+    const background = theme.base.palette['primary-background'];
+    const color = readableColor(background);
+    return css`
+      background: ${background};
+      padding-block: 0.5rem;
+      padding-inline-start: 0.5rem;
+      padding-inline-end: 0.5rem;
+      border: 0.0625rem solid ${theme.base.palette[variant]};
+      border-inline-start: none;
+      border-start-end-radius: inherit;
+      border-end-end-radius: inherit;
+      display: flex;
+      align-items: center;
+      color: ${color};
+    `;
+  }
+);

src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx

@@ -120,23 +120,23 @@ const genResponse = (displayFormat: string, selectionProperty: string) => {
       },
       {
         config: {
-          value: ['true', 'true', 'false'],
+          value: [true, true, false],
           componentType: 'Checkbox',
           label: 'Windows 10'
         },
         type: 'ScalarList'
       },
       {
         config: {
-          value: ['true', 'true', 'true'],
+          value: [true, true, true],
           componentType: 'Checkbox',
           label: 'HDMI Port'
         },
         type: 'ScalarList'
       },
       {
         config: {
-          value: ['false', 'true', 'false'],
+          value: [false, true, false],
           componentType: 'Checkbox',
           label: 'USB Port'
         },
@@ -418,6 +418,12 @@ const CompareTableDemo = (inputs: TableLayoutProps) => {
             },
             resolveConfigProps: (f: string) => {
               return f;
+            },
+            getActionsApi: () => {
+              return {
+                updateFieldValue: (prop: string, value: string) => {},
+                triggerFieldChange: (prop: string, value: string) => {}
+              };
             }
           };
         }