Merge pull request #106 from pegasystems/bug/tor/BUG-794769

Fix 2 and 3 col form not rendering properly

Author: vishalshrm539

packages/react-sdk-components/src/components/template/DefaultForm/DefaultForm.css

@@ -23,3 +23,8 @@
 .psdk-default-form-three-column .grid-column {
   grid-column: 1 / span 3;
 }
+
+.psdk-default-form-instruction-text{
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

packages/react-sdk-components/src/components/template/DefaultForm/DefaultForm.tsx

@@ -1,5 +1,5 @@
-import React, { createElement } from "react";
-import PropTypes from "prop-types";
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 
 import { getInstructions } from '../../helpers/template-utils';
 import createPConnectComponent from '../../../bridge/react_pconnect';
@@ -13,19 +13,19 @@ export default function DefaultForm(props) {
 
   let divClass: string;
 
-  const numCols = NumCols || "1";
+  const numCols = NumCols || '1';
   switch (numCols) {
-    case "1" :
-      divClass = "psdk-default-form-one-column";
+    case '1':
+      divClass = 'psdk-default-form-one-column';
       break;
-    case "2" :
-      divClass = "psdk-default-form-two-column";
+    case '2':
+      divClass = 'psdk-default-form-two-column';
       break;
-    case "3" :
-      divClass = "psdk-default-form-three-column";
+    case '3':
+      divClass = 'psdk-default-form-three-column';
       break;
-    default :
-      divClass = "psdk-default-form-one-column";
+    default:
+      divClass = 'psdk-default-form-one-column';
       break;
   }
 
@@ -35,15 +35,19 @@ export default function DefaultForm(props) {
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  // eslint-disable-next-line react/no-array-index-key
-  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));
+  const dfChildren = arChildren.map((kid, idx) =>
+    // eslint-disable-next-line react/no-array-index-key
+    createElement(createPConnectComponent(), { ...kid, key: idx })
+  );
 
   return (
-    <div className={divClass}>
-      <div>{instructionText}</div>
-      {dfChildren}
-    </div>
-  )
+    <>
+      {instructionText && (
+        <div className='psdk-default-form-instruction-text'>{instructionText}</div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
+  );
 }
 
 DefaultForm.propTypes = {
@@ -52,5 +56,5 @@ DefaultForm.propTypes = {
 };
 
 DefaultForm.defaultProps = {
-  NumCols: "1"
+  NumCols: '1'
 };