add support for gridTemplateColumns to FormFullWidth component

Author: ricmars

package-lock.json

@@ -40,15 +40,15 @@
   "dependencies": {
     "@arcgis/core": "^4.32.9",
     "@dagrejs/dagre": "^1.1.4",
-    "@fullcalendar/core": "^6.1.15",
-    "@fullcalendar/daygrid": "^6.1.15",
-    "@fullcalendar/react": "^6.1.15",
-    "@fullcalendar/timegrid": "^6.1.15",
+    "@fullcalendar/core": "^6.1.20",
+    "@fullcalendar/daygrid": "^6.1.20",
+    "@fullcalendar/react": "^6.1.20",
+    "@fullcalendar/timegrid": "^6.1.20",
     "@hello-pangea/dnd": "^16.6.0",
-    "@pega/cosmos-react-core": "^6.0.10",
-    "@pega/cosmos-react-rte": "^6.0.10",
-    "@pega/cosmos-react-social": "^6.0.10",
-    "@pega/cosmos-react-work": "^6.0.10",
+    "@pega/cosmos-react-core": "^6.0.20",
+    "@pega/cosmos-react-rte": "^6.0.20",
+    "@pega/cosmos-react-social": "^6.0.20",
+    "@pega/cosmos-react-work": "^6.0.20",
     "gantt-task-react": "^0.3.9",
     "imask": "^7.6.1",
     "jsbarcode": "^3.11.6",
@@ -61,9 +61,9 @@
     "styled-components": "5.3.6"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@pega/configs": "^0.16.3",
     "@pega/custom-dx-components": "~24.1",
     "@pega/eslint-config": "^0.16.3",

package.json

@@ -77,7 +77,7 @@ export const downloadFile = (
         let arrayBuf: Uint8Array | BlobPart;
         if (isContentBinary(content.headers)) arrayBuf = content.data;
         else arrayBuf = base64ToArrayBuffer(content.data);
-        const blob = new Blob([arrayBuf], { type: attachment.mimeType });
+        const blob = new Blob([arrayBuf as BlobPart], { type: attachment.mimeType });
         const fileURL = URL.createObjectURL(blob);
         if (setImages) {
           const name = attachment.extension
@@ -141,7 +141,7 @@ export const addAttachment = (props: AddAttachmentProps) => {
 
   const kind = getKindFromMimeType(attachment.mimeType ?? '');
   const visual = <FileVisual type={kind} />;
-  const bCanUseLightBox = useLightBox && kind === 'image';
+  const bCanUseLightBox = useLightBox && canPreviewFile(kind);
   listOfAttachments.push({
     id: attachment.ID,
     visual,

src/components/Pega_Extensions_DisplayAttachments/utils.tsx

@@ -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"
+
 <Primary />
 
 ## Props

src/components/Pega_Extensions_FormFullWidth/Docs.mdx

@@ -36,6 +36,11 @@
         }
       ]
     },
+    {
+      "name": "gridTemplateColumns",
+      "label": "gridTemplateColumns",
+      "format": "TEXT"
+    },
     {
       "name": "A",
       "label": "Region A",

src/components/Pega_Extensions_FormFullWidth/config.json

@@ -94,7 +94,6 @@ const regionChildrenResolved = [
 ];
 
 const createComponent = (config: any) => {
-  // eslint-disable-next-line default-case
   switch (config.config.value) {
     case '@P .pySLADeadline':
       return renderField(regionChildrenResolved[0]);
@@ -142,6 +141,7 @@ export const Default: Story = {
   },
   args: {
     heading: 'Heading',
-    NumCols: '1'
+    NumCols: '1',
+    gridTemplateColumns: ''
   }
 };

src/components/Pega_Extensions_FormFullWidth/demo.stories.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 (
     <FieldGroup name={heading}>
       <Grid
         container={{
-          cols: `repeat(${nCols}, minmax(0, 1fr))`,
+          cols: gridTemplateColumns,
           gap: 2
         }}
       >

src/components/Pega_Extensions_FormFullWidth/index.tsx

@@ -19,7 +19,6 @@ The component support the following features:
 - Click on any item to see a DetailsCard view. This view can be configured via a combination of props `detailsDataPage` and `detailsViewName`.
 - Ability to edit an item from timeline, just click the item and open the details card popup. It has a Edit button in header (pencil icon).
 - Double click on any item enables the drag mode editing. Items can be dragged with multiple drag behaviors, each for distinct purpose
-
   - Drag complete item. This changes the Start and End date for the items without changing the relative duration. All three types of items implements this behavior
   - Two Drag handles are available on item edges, each for modifying the Start or End date respectively. This changes the duration of the task. Only Tasks has this behavior. Project and Milestones doesn't support this.
   - An arrow like handle appears on the item to drag and update the completion progress of the item. Only Task item type supports this.

src/components/Pega_Extensions_GanttChart/Docs.mdx

@@ -4844,8 +4844,8 @@ export const StyledPegaExtensionsMap = styled.div(({ height }: { height: string
     }
 
     .esri-building-disciplines-tree-node__collapse-toggle:not(
-        .esri-building-disciplines-tree-node__collapse-toggle--collapsed
-      ) {
+      .esri-building-disciplines-tree-node__collapse-toggle--collapsed
+    ) {
       transform: rotate(90deg);
     }
 
@@ -7845,8 +7845,8 @@ export const StyledPegaExtensionsMap = styled.div(({ height }: { height: string
     }
 
     .esri-elevation-profile-legend-item__label:not(
-        .esri-elevation-profile-legend-item__label--disabled
-      ) {
+      .esri-elevation-profile-legend-item__label--disabled
+    ) {
       cursor: pointer;
     }
 

src/components/Pega_Extensions_Map/styles.ts

@@ -1,8 +1,8 @@
 {
     "components-directory-path": "src/components",
     "server-config": {
-        "rulesetName": "",
-        "rulesetVersion": "",
+        "rulesetName": "ConstellationUIGallery",
+        "rulesetVersion": "01-01-01",
         "sourceOfComponents": "Server",
         "devBuild": false,
         "serverType": "infinity",
@@ -28,12 +28,12 @@
         "questions_askedOnce": "server,authService"
     },
     "component": {
-        "library": "Extensions",
+        "library": "ConstellationUIGallery",
         "type": "",
         "version": "1.0.0",
         "subtype": "",
         "description": "",
         "icon": ""
     },
     "usePromotedWebPack": false
-}
+}