From d062bbe72e54090d0095283268394a6968aca38a Mon Sep 17 00:00:00 2001 From: Richard Marsot Date: Sat, 25 Jan 2025 15:16:16 -0500 Subject: [PATCH 1/2] add Banner Input component and update FormFullWidth to support custom grid layout --- .../Pega_Extensions_BannerInput/Docs.mdx | 14 + .../Pega_Extensions_BannerInput/config.json | 81 +++++ .../demo.stories.tsx | 24 ++ .../Pega_Extensions_BannerInput/demo.test.tsx | 14 + .../Pega_Extensions_BannerInput/index.tsx | 41 +++ .../Pega_Extensions_BannerInput/styles.ts | 56 ++++ .../demo.stories.tsx | 12 +- .../index.tsx | 65 +++- .../styles.ts | 303 ++++++++++-------- .../Pega_Extensions_FormFullWidth/Docs.mdx | 2 + .../Pega_Extensions_FormFullWidth/config.json | 12 +- .../demo.stories.tsx | 3 +- .../Pega_Extensions_FormFullWidth/index.tsx | 8 +- .../Pega_Extensions_TrendDisplay/Docs.mdx | 4 +- 14 files changed, 478 insertions(+), 161 deletions(-) create mode 100644 src/components/Pega_Extensions_BannerInput/Docs.mdx create mode 100644 src/components/Pega_Extensions_BannerInput/config.json create mode 100644 src/components/Pega_Extensions_BannerInput/demo.stories.tsx create mode 100644 src/components/Pega_Extensions_BannerInput/demo.test.tsx create mode 100644 src/components/Pega_Extensions_BannerInput/index.tsx create mode 100644 src/components/Pega_Extensions_BannerInput/styles.ts diff --git a/src/components/Pega_Extensions_BannerInput/Docs.mdx b/src/components/Pega_Extensions_BannerInput/Docs.mdx new file mode 100644 index 0000000..d0a1364 --- /dev/null +++ b/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'; + + + +# 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. + + + +## Props + + diff --git a/src/components/Pega_Extensions_BannerInput/config.json b/src/components/Pega_Extensions_BannerInput/config.json new file mode 100644 index 0000000..cd45e42 --- /dev/null +++ b/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 + } +} diff --git a/src/components/Pega_Extensions_BannerInput/demo.stories.tsx b/src/components/Pega_Extensions_BannerInput/demo.stories.tsx new file mode 100644 index 0000000..ef9ef0a --- /dev/null +++ b/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; + +export const Default: Story = { + render: args => { + const props = { + ...args + }; + return ; + }, + args: { + value: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + variant: 'success', + icon: 'warn-solid' + } +}; diff --git a/src/components/Pega_Extensions_BannerInput/demo.test.tsx b/src/components/Pega_Extensions_BannerInput/demo.test.tsx new file mode 100644 index 0000000..c64de07 --- /dev/null +++ b/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(); + expect( + await screen.findAllByText( + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + ) + ).toHaveLength(1); +}); diff --git a/src/components/Pega_Extensions_BannerInput/index.tsx b/src/components/Pega_Extensions_BannerInput/index.tsx new file mode 100644 index 0000000..d3a6e31 --- /dev/null +++ b/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 ( + + + + + + {value} + + + ); +}; +export default withConfiguration(PegaExtensionsBannerInput); diff --git a/src/components/Pega_Extensions_BannerInput/styles.ts b/src/components/Pega_Extensions_BannerInput/styles.ts new file mode 100644 index 0000000..bb4d765 --- /dev/null +++ b/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}; + `; + } +); diff --git a/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx b/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx index 6216105..e8624f8 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx +++ b/src/components/Pega_Extensions_CompareTableLayout/demo.stories.tsx @@ -120,7 +120,7 @@ const genResponse = (displayFormat: string, selectionProperty: string) => { }, { config: { - value: ['true', 'true', 'false'], + value: [true, true, false], componentType: 'Checkbox', label: 'Windows 10' }, @@ -128,7 +128,7 @@ const genResponse = (displayFormat: string, selectionProperty: string) => { }, { config: { - value: ['true', 'true', 'true'], + value: [true, true, true], componentType: 'Checkbox', label: 'HDMI Port' }, @@ -136,7 +136,7 @@ const genResponse = (displayFormat: string, selectionProperty: string) => { }, { 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) => {} + }; } }; } diff --git a/src/components/Pega_Extensions_CompareTableLayout/index.tsx b/src/components/Pega_Extensions_CompareTableLayout/index.tsx index caa9658..d26bc2b 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/index.tsx +++ b/src/components/Pega_Extensions_CompareTableLayout/index.tsx @@ -14,7 +14,11 @@ import { useTheme, Checkbox } from '@pega/cosmos-react-core'; -import StyledPegaExtensionsCompareTableLayoutWrapper from './styles'; +import StyledPegaExtensionsCompareTableLayoutWrapper, { + SelectedBgCell, + SelectedBgTh, + SelectedCell +} from './styles'; import '../create-nonce'; // includes in bundle @@ -61,7 +65,8 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { const selectObject = (ID: any, index: number) => { if (metadata.config.selectionProperty) { const prop = metadata.config.selectionProperty.replace('@P ', ''); - getPConnect().setValue(prop, ID); + getPConnect().getActionsApi().updateFieldValue(prop, ID); + getPConnect().getActionsApi().triggerFieldChange(prop, ID); } const sel: Array = []; for (let i = 0; i < numCols; i += 1) { @@ -70,7 +75,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { setSelection(sel); }; - const genField = (componentType: string, val: any, key: string) => { + const genField = (componentType: string, val: any) => { const field: FieldObj = { type: componentType, config: { @@ -82,13 +87,13 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { }; if (componentType === 'Checkbox') { return ( - + {val === 'true' || val ? ( ) : ( )} - + ); } if (componentType === 'URL') { @@ -101,7 +106,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { field.config.notation = currencyFormat; } } - return {getPConnect().createComponent(field)}; + return getPConnect().createComponent(field); }; useEffect(() => { @@ -149,7 +154,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { if (displayFormat === 'radio-button-card') { return ( - + {fields[0].value.map((val: any, i: number) => { const fvl: Array<{ id: string; name: string; value: JSX.Element | string }> = []; @@ -164,7 +169,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { name: child.label, value: child.value && child.value.length >= i - ? genField(child.componentType, child.value[i], `card-${i}-${j}`) + ? genField(child.componentType, child.value[i]) : '' }); } @@ -191,7 +196,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { const tableId = createUID(); return ( - + {fields[0].value.map((val: string, idx: number) => { + const isSelected = selection.length >= idx ? selection[idx] : false; const field = { type: 'Text', config: { @@ -208,9 +214,15 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { } }; return ( - + ); })} @@ -221,7 +233,11 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { if (child.heading) { return ( - + + {fields[0].value.map((val: string, idx: number) => { + const isSelected = selection.length >= idx ? selection[idx] : false; + return ; + })} ); } @@ -232,21 +248,27 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { metadata.config.selectionProperty ) return ( - + {child.value && child.value.map((val: any, j: number) => { + const isSelected = selection.length >= j ? selection[j] : false; return ( - + ); })} @@ -256,7 +278,16 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { {child.value && child.value.map((val: any, j: number) => { - return genField(child.componentType, val, `${tableId}-row-${i}-${j}`); + const isSelected = selection.length >= j ? selection[j] : false; + return ( + + {genField(child.componentType, val)} + + ); })} ); diff --git a/src/components/Pega_Extensions_CompareTableLayout/styles.ts b/src/components/Pega_Extensions_CompareTableLayout/styles.ts index 256e17f..da2126f 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/styles.ts +++ b/src/components/Pega_Extensions_CompareTableLayout/styles.ts @@ -1,140 +1,173 @@ import styled, { css, type DefaultTheme } from 'styled-components'; -export default styled.div( - ({ displayFormat, theme }: { displayFormat: string; theme: DefaultTheme }) => { - switch (displayFormat) { - case 'radio-button-card': - return css` - & > fieldset > div { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); - grid-gap: 0.5rem; - overflow: hidden; - padding: 0.2rem; - } - & > fieldset > div > label { - display: block; - } - & > fieldset > div > label > div { - align-items: start !important; - } - `; - case 'financialreport': - return css` - & table { - border-collapse: collapse; - width: 100%; - table-layout: fixed; - } - - & td, - & th { - border-bottom: 0.0625rem solid rgb(207, 207, 207); - padding: 0.25rem 0.5rem; - } - - & td, - & thead th { - text-align: end; - font-weight: 400; - } - - & caption { - padding: 0.5rem; - } - - & tbody th { - font-weight: 400; - text-align: start; - } - - & thead > tr > th:first-child { - opacity: 0; - } - - & thead > tr > th > span { - font-weight: 800; - } - - tr.total.cat-2 { - background-color: rgba(207, 207, 207, 0.3); - } - - & tbody tr.total > th { - font-weight: 600; - text-align: start; - } - & tbody tr.cat-1 > th { - padding: 1rem 0.5rem; - font-size: 1.1rem; - } - `; - case 'spreadsheet': - default: - return css` - & table { - border-collapse: collapse; - border: 0.125rem solid rgb(207, 207, 207); - width: 100%; - table-layout: fixed; - } - - & td, - & th { - border: 0.125rem solid rgb(190, 190, 190); - padding: 0.5rem 1rem; - } - - & thead th, - & tbody tr.total { - background-color: rgba(207, 207, 207, 0.3); - } - - & tbody tr.cat-1 > th { - padding: 1rem 0.5rem; - font-size: 1.1rem; - } - & tbody tr.cat-2 > th { - padding-left: 1rem; - text-align: left; - } - - & tbody tr { - text-align: center; - } - - & caption { - padding: 0.5rem; - } - - & thead > tr > th > span { - font-weight: 800; - } - - & .selection label { - border: 0.125rem solid ${theme.components.button.color}; - border-radius: ${`${theme.components.button['border-radius']}rem`}; - background: ${theme.components.button.color}; - display: block; - } - - & .selection label > div { - font-size: 1rem; - width: 100%; - display: flex; - justify-content: center; - text-align: center; - min-width: unset; - max-width: unset; - color: #ffffff; - } - & .selection label > div > div { - color: #ffffff; - } - & .selection :not(input:checked) + div > div { - display: none; - } - `; +export default styled.div(({ displayFormat }: { displayFormat: string }) => { + switch (displayFormat) { + case 'radio-button-card': + return css` + & > fieldset > div { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + grid-gap: 0.5rem; + overflow: hidden; + padding: 0.2rem; + } + & > fieldset > div > label { + display: block; + } + & > fieldset > div > label > div { + align-items: start !important; + } + `; + case 'financialreport': + return css` + & table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + & td, + & th { + border-bottom: 0.0625rem solid rgb(207, 207, 207); + padding: 0.25rem 0.5rem; + } + + & td, + & thead th { + text-align: end; + font-weight: 400; + } + + & caption { + padding: 0.5rem; + } + + & tbody th { + font-weight: 400; + text-align: start; + } + + & thead > tr > th:first-child { + opacity: 0; + } + + & thead > tr > th > span { + font-weight: 800; + } + + tr.total.cat-2 { + background-color: rgba(207, 207, 207, 0.3); + } + + & tbody tr.total > th { + font-weight: 600; + text-align: start; + } + & tbody tr.cat-1 > th { + padding: 1rem 0.5rem; + font-size: 1.1rem; + } + `; + case 'spreadsheet': + default: + return css` + & table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + & td, + & th { + padding: 0.5rem 1rem; + } + & tbody > tr { + border-bottom: 0.125rem solid rgb(190, 190, 190); + } + & tbody > tr:last-child { + border-bottom: none; + } + & thead th, + & tbody tr.total { + background-color: rgba(207, 207, 207, 0.3); + } + + & tbody tr.cat-1 > th { + font-size: 1.1rem; + } + & tbody tr.cat-2 > th { + padding-left: 1rem; + text-align: left; + } + + & tbody tr { + text-align: center; + } + & tbody tr.total { + text-align: left; + } + + & caption { + padding: 0.5rem; + } + + & thead > tr > th > span { + font-weight: 800; + } + `; + } +}); + +export const SelectedCell = styled.td<{ isSelected: boolean; theme: DefaultTheme }>( + ({ isSelected, theme }) => { + return css` + ${isSelected + ? `border: 0.125rem solid ${theme.components.button.color}; + border-top: none;` + : ''} + &.selection > label { + border: 0.125rem solid ${theme.components.button.color}; + border-radius: ${`${theme.components.button['border-radius']}rem`}; + display: block; + background-color: ${isSelected ? theme.components.button.color : 'transparent'}; + } + &.selection > label > div { + font-size: 1rem; + width: 100%; + display: flex; + justify-content: center; + text-align: center; + min-width: unset; + max-width: unset; + color: ${isSelected ? '#FFF' : theme.components.button.color}; + } + & :not(input:checked) + div > div { + display: none; + } + `; + } +); + +export const SelectedBgCell = styled.td<{ isSelected: boolean; theme: DefaultTheme }>( + ({ isSelected, theme }) => { + if (isSelected) { + return css` + background-color: ${isSelected ? 'rgba(207, 207, 207, 0.2)' : 'transparent'}; + border-left: 0.125rem solid ${theme.components.button.color}; + border-right: 0.125rem solid ${theme.components.button.color}; + `; + } + } +); + +export const SelectedBgTh = styled.th<{ isSelected: boolean; theme: DefaultTheme }>( + ({ isSelected, theme }) => { + if (isSelected) { + return css` + background-color: ${isSelected ? 'rgba(207, 207, 207, 0.2)' : 'transparent'}; + border: 0.125rem solid ${theme.components.button.color}; + border-bottom: none; + `; } } ); diff --git a/src/components/Pega_Extensions_FormFullWidth/Docs.mdx b/src/components/Pega_Extensions_FormFullWidth/Docs.mdx index 44e7a7b..8c6aedb 100644 --- a/src/components/Pega_Extensions_FormFullWidth/Docs.mdx +++ b/src/components/Pega_Extensions_FormFullWidth/Docs.mdx @@ -7,6 +7,8 @@ import * as DemoStories from './demo.stories'; This component allows to insert subviews in a 1 to 3 column layout and will utilize the full width of the assignment. +gridTemplateColumns can be set to override the default grid-template-columns CSS attribute on the layout - For example to do a 66%, 33% 2 column, you can enter "2fr 1fr" + ## Props diff --git a/src/components/Pega_Extensions_FormFullWidth/config.json b/src/components/Pega_Extensions_FormFullWidth/config.json index c1a5eb8..ef2c480 100644 --- a/src/components/Pega_Extensions_FormFullWidth/config.json +++ b/src/components/Pega_Extensions_FormFullWidth/config.json @@ -36,11 +36,21 @@ } ] }, + { + "name": "gridTemplateColumns", + "label": "gridTemplateColumns", + "format": "TEXT" + }, { "name": "A", "label": "Region A", "format": "CONTENTPICKER", - "addTypeList": ["Fields", "Views", "Widgets", "Insights"], + "addTypeList": [ + "Fields", + "Views", + "Widgets", + "Insights" + ], "allowCreatingGroup": true } ] diff --git a/src/components/Pega_Extensions_FormFullWidth/demo.stories.tsx b/src/components/Pega_Extensions_FormFullWidth/demo.stories.tsx index e92bf70..cc6fc7a 100644 --- a/src/components/Pega_Extensions_FormFullWidth/demo.stories.tsx +++ b/src/components/Pega_Extensions_FormFullWidth/demo.stories.tsx @@ -142,6 +142,7 @@ export const Default: Story = { }, args: { heading: 'Heading', - NumCols: '1' + NumCols: '1', + gridTemplateColumns: '' } }; diff --git a/src/components/Pega_Extensions_FormFullWidth/index.tsx b/src/components/Pega_Extensions_FormFullWidth/index.tsx index 6794694..7b9a92d 100644 --- a/src/components/Pega_Extensions_FormFullWidth/index.tsx +++ b/src/components/Pega_Extensions_FormFullWidth/index.tsx @@ -4,19 +4,23 @@ import '../create-nonce'; type FormFullWidthProps = { heading: string; NumCols: string; + gridTemplateColumns?: string; children: any; }; export const PegaExtensionsFormFullWidth = (props: FormFullWidthProps) => { const { heading, NumCols, children } = props; + let { gridTemplateColumns } = props; const nCols = parseInt(NumCols, 10); - + if (!gridTemplateColumns) { + gridTemplateColumns = `repeat(${nCols}, minmax(0, 1fr))`; + } return ( diff --git a/src/components/Pega_Extensions_TrendDisplay/Docs.mdx b/src/components/Pega_Extensions_TrendDisplay/Docs.mdx index 275c748..6242793 100644 --- a/src/components/Pega_Extensions_TrendDisplay/Docs.mdx +++ b/src/components/Pega_Extensions_TrendDisplay/Docs.mdx @@ -5,7 +5,7 @@ import * as DemoStories from './demo.stories'; # Overview -Trend display.... +This component is a flexible component that can render a currency value or a string using different custom color - It can also display a trend of the value (up or down) as well as render a line chart of multiple pieces of data. @@ -15,7 +15,7 @@ Trend display.... ## Examples -This component is a flexible component that can render a currency value or a string using different custom color - It can also display a trend of the value (up or down) as well as render a line chart of multiple pieces of data. +Trend of a field over a reporting value - the values are provides as a comma-separated string From c5e9dff3b50b4c974c3fbbc32c765c57504dd0f7 Mon Sep 17 00:00:00 2001 From: Richard Marsot Date: Sat, 25 Jan 2025 15:27:29 -0500 Subject: [PATCH 2/2] refactor PegaExtensionsCompareTableLayout to simplify Checkbox rendering logic --- .../Pega_Extensions_CompareTableLayout/index.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Pega_Extensions_CompareTableLayout/index.tsx b/src/components/Pega_Extensions_CompareTableLayout/index.tsx index d26bc2b..7567618 100644 --- a/src/components/Pega_Extensions_CompareTableLayout/index.tsx +++ b/src/components/Pega_Extensions_CompareTableLayout/index.tsx @@ -86,15 +86,10 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => { } }; if (componentType === 'Checkbox') { - return ( - - {val === 'true' || val ? ( - - ) : ( - - )} - - ); + if (val === 'true' || val) { + return ; + } + return ; } if (componentType === 'URL') { field.config.displayAs = 'Image';
{heading} @@ -200,6 +205,7 @@ export const PegaExtensionsCompareTableLayout = (props: TableLayoutProps) => {
Name + {getPConnect().createComponent(field)} -
{child.heading}{child.heading}
Selection + = j ? selection[j] : false} + checked={isSelected} onChange={() => selectObject(val, j)} /> -
{child.label}