@abgov/jsonforms-components 1.34.4 → 1.35.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoASkeleton, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASkeleton } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -7008,6 +7008,188 @@ const validatePostalCode = values => {
   return postalCodeRegex.test(values);
 };
 
+let _ = t => t,
+  _t;
+const HelpContentDiv = styled.div(_t || (_t = _`
+  .parent-label {
+    font-size: 24px;
+    margin-bottom: var(--goa-space-m);
+    font-weight: bold;
+  }
+
+  .child-label {
+    font-size: 18px;
+    margin-bottom: var(--goa-space-xs);
+    font-weight: bold;
+  }
+  .parent-margin {
+    margin-bottom: var(--goa-space-l);
+  }
+  .child-margin {
+    margin-bottom: var(--goa-space-2xs);
+  }
+  ul {
+    margin: 0 0 0 var(--goa-space-xs);
+  }
+  .single-line {
+    margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
+  }
+`));
+
+const linkLength = 40;
+const invalidExtensions = ['exe'];
+const RenderLink = props => {
+  var _a;
+  const {
+    link,
+    help
+  } = props;
+  const [linkValid, setLinkValid] = useState(null);
+  let error = undefined;
+  let linkLabel = link && (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
+  let linkUrl = link;
+  if (help) {
+    linkLabel = help;
+  }
+  const count = ((_a = link === null || link === void 0 ? void 0 : link.split('.')) === null || _a === void 0 ? void 0 : _a.length) || 0;
+  const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
+  if (invalidExtensions.includes(extension || '')) {
+    linkUrl = '';
+    linkLabel = '';
+    error = `Invalid extension: ${extension}`;
+  }
+  useEffect(() => {
+    if (linkUrl) {
+      setLinkValid(isValidHref(linkUrl));
+    }
+  }, [linkUrl]);
+  if (!linkLabel && !error) {
+    linkLabel = 'Link';
+  }
+  if (linkValid === false) {
+    linkLabel = '';
+    error = 'Invalid Link';
+  }
+  return jsx(GoAFormItem, {
+    error: error,
+    label: "",
+    children: jsx("div", {
+      "data-testid": "link-jsonform",
+      children: linkUrl && linkValid ? jsx("div", {
+        children: jsxs("a", {
+          href: link,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: [linkLabel, isMailToHref(link !== null && link !== void 0 ? link : '') ? jsx(GoAContextMenuIcon, {
+            type: "mail",
+            title: "Email",
+            testId: "mail-icon"
+          }) : jsx(GoAIconButton, {
+            icon: "open",
+            title: "Open",
+            testId: "open-icon",
+            size: "small"
+          })]
+        })
+      }) : linkLabel
+    })
+  });
+};
+
+const HelpContentReviewComponent = () => {
+  return jsx(Fragment, {});
+};
+const HelpContentComponent = _a => {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+  var {
+      isParent = true,
+      showLabel = true
+    } = _a,
+    props = __rest(_a, ["isParent", "showLabel"]);
+  const labelClass = isParent ? 'parent-label' : 'child-label';
+  const marginClass = isParent ? 'parent-margin' : 'child-margin';
+  // eslint-disable-next-line
+  const {
+    uischema,
+    visible,
+    label
+  } = props;
+  const link = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.link;
+  const renderHelp = () => {
+    var _a, _b, _c;
+    return Array.isArray((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) ? jsx("ul", {
+      children: (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help.map((line, index) => jsx("li", {
+        children: `${line}`
+      }, index))
+    }) : jsx("p", {
+      className: "single-line",
+      children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
+    });
+  };
+  const renderImage = ({
+    height,
+    width,
+    alt,
+    src
+  }) => {
+    return jsx("img", {
+      src: src,
+      width: width,
+      height: height,
+      alt: alt
+    });
+  };
+  const textVariant = !((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.variant) || ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) !== 'details' && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'hyperlink';
+  return jsx(Visible, {
+    visible: visible,
+    children: jsx(HelpContentDiv, {
+      "aria-label": (_f = uischema.options) === null || _f === void 0 ? void 0 : _f.ariaLabel,
+      children: jsxs("div", {
+        className: marginClass,
+        children: [label && showLabel && (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'hyperlink') && jsxs("div", {
+          className: labelClass,
+          "data-testid": label,
+          children: [label, jsx("br", {})]
+        }), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) === 'img' && renderImage(uischema.options), ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'hyperlink' && link && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), textVariant && renderHelp(), ((_o = uischema.options) === null || _o === void 0 ? void 0 : _o.variant) && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) === 'details' && jsxs(GoADetails, {
+          heading: label ? label : '',
+          mt: "3xs",
+          mb: "none",
+          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_q = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _q === void 0 ? void 0 : _q.length) > 0 && jsx(HelpContents, {
+            elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
+          })]
+        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_r = uischema.options) === null || _r === void 0 ? void 0 : _r.variant) !== 'details' && jsx(HelpContents, {
+          elements: uischema.elements,
+          isParent: false
+        })]
+      })
+    })
+  });
+};
+const HelpContents = ({
+  elements,
+  isParent: _isParent = false
+}) => jsx("div", {
+  children: elements === null || elements === void 0 ? void 0 : elements.map((element, index) => {
+    return jsx(HelpContentComponent, {
+      uischema: element,
+      label: element.label,
+      errors: '',
+      data: undefined,
+      enabled: false,
+      visible: true,
+      path: '',
+      handleChange: () => {},
+      rootSchema: {},
+      id: '',
+      schema: {},
+      isParent: _isParent
+    }, `${element.label}-help-content-${index}`);
+  })
+});
+const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
+const HelpContent = withJsonFormsControlProps(HelpContentComponent);
+const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
+
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
   var _a, _b, _c;
@@ -7059,6 +7241,12 @@ const AddressLookUpControl = props => {
     setAddress(newAddress);
     updateFormData(newAddress);
   };
+  const renderHelp = () => {
+    return jsx(HelpContentComponent, Object.assign({}, props, {
+      isParent: true,
+      showLabel: false
+    }));
+  };
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
       if (searchTerm.length > 2) {
@@ -7090,7 +7278,7 @@ const AddressLookUpControl = props => {
     setSuggestions([]);
   };
   return jsxs("div", {
-    children: [jsx(GoAFormItem, {
+    children: [renderHelp(), jsx(GoAFormItem, {
       label: label,
       children: jsxs(SearchBox, {
         children: [jsx(GoAInput, {
@@ -7286,187 +7474,6 @@ const GoAGroupControlComponent = props => {
 const GoAGroupLayoutTester = rankWith(1, uiTypeIs('Group'));
 const GoAGroupControl = withJsonFormsLayoutProps(GoAGroupControlComponent, true);
 
-let _ = t => t,
-  _t;
-const HelpContentDiv = styled.div(_t || (_t = _`
-  .parent-label {
-    font-size: 24px;
-    margin-bottom: var(--goa-space-m);
-    font-weight: bold;
-  }
-
-  .child-label {
-    font-size: 18px;
-    margin-bottom: var(--goa-space-xs);
-    font-weight: bold;
-  }
-  .parent-margin {
-    margin-bottom: var(--goa-space-l);
-  }
-  .child-margin {
-    margin-bottom: var(--goa-space-2xs);
-  }
-  ul {
-    margin: 0 0 0 var(--goa-space-xs);
-  }
-  .single-line {
-    margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
-  }
-`));
-
-const linkLength = 40;
-const invalidExtensions = ['exe'];
-const RenderLink = props => {
-  var _a;
-  const {
-    link,
-    help
-  } = props;
-  const [linkValid, setLinkValid] = useState(null);
-  let error = undefined;
-  let linkLabel = link && (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
-  let linkUrl = link;
-  if (help) {
-    linkLabel = help;
-  }
-  const count = ((_a = link === null || link === void 0 ? void 0 : link.split('.')) === null || _a === void 0 ? void 0 : _a.length) || 0;
-  const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
-  if (invalidExtensions.includes(extension || '')) {
-    linkUrl = '';
-    linkLabel = '';
-    error = `Invalid extension: ${extension}`;
-  }
-  useEffect(() => {
-    if (linkUrl) {
-      setLinkValid(isValidHref(linkUrl));
-    }
-  }, [linkUrl]);
-  if (!linkLabel && !error) {
-    linkLabel = 'Link';
-  }
-  if (linkValid === false) {
-    linkLabel = '';
-    error = 'Invalid Link';
-  }
-  return jsx(GoAFormItem, {
-    error: error,
-    label: "",
-    children: jsx("div", {
-      "data-testid": "link-jsonform",
-      children: linkUrl && linkValid ? jsx("div", {
-        children: jsxs("a", {
-          href: link,
-          rel: "noopener noreferrer",
-          target: "_blank",
-          children: [linkLabel, isMailToHref(link !== null && link !== void 0 ? link : '') ? jsx(GoAContextMenuIcon, {
-            type: "mail",
-            title: "Email",
-            testId: "mail-icon"
-          }) : jsx(GoAIconButton, {
-            icon: "open",
-            title: "Open",
-            testId: "open-icon",
-            size: "small"
-          })]
-        })
-      }) : linkLabel
-    })
-  });
-};
-
-const HelpContentReviewComponent = () => {
-  return jsx(Fragment, {});
-};
-const HelpContentComponent = _a => {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-  var {
-      isParent = true
-    } = _a,
-    props = __rest(_a, ["isParent"]);
-  const labelClass = isParent ? 'parent-label' : 'child-label';
-  const marginClass = isParent ? 'parent-margin' : 'child-margin';
-  // eslint-disable-next-line
-  const {
-    uischema,
-    visible,
-    label
-  } = props;
-  const link = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.link;
-  const renderHelp = () => {
-    var _a, _b, _c;
-    return Array.isArray((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) ? jsx("ul", {
-      children: (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help.map((line, index) => jsx("li", {
-        children: `${line}`
-      }, index))
-    }) : jsx("p", {
-      className: "single-line",
-      children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
-    });
-  };
-  const renderImage = ({
-    height,
-    width,
-    alt,
-    src
-  }) => {
-    return jsx("img", {
-      src: src,
-      width: width,
-      height: height,
-      alt: alt
-    });
-  };
-  const textVariant = !((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.variant) || ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) !== 'details' && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'hyperlink';
-  return jsx(Visible, {
-    visible: visible,
-    children: jsx(HelpContentDiv, {
-      "aria-label": (_f = uischema.options) === null || _f === void 0 ? void 0 : _f.ariaLabel,
-      children: jsxs("div", {
-        className: marginClass,
-        children: [label && (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'hyperlink') && jsxs("div", {
-          className: labelClass,
-          "data-testid": label,
-          children: [label, jsx("br", {})]
-        }), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) === 'img' && renderImage(uischema.options), ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'hyperlink' && link && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), textVariant && renderHelp(), ((_o = uischema.options) === null || _o === void 0 ? void 0 : _o.variant) && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) === 'details' && jsxs(GoADetails, {
-          heading: label ? label : '',
-          mt: "3xs",
-          mb: "none",
-          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_q = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _q === void 0 ? void 0 : _q.length) > 0 && jsx(HelpContents, {
-            elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
-          })]
-        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_r = uischema.options) === null || _r === void 0 ? void 0 : _r.variant) !== 'details' && jsx(HelpContents, {
-          elements: uischema.elements,
-          isParent: false
-        })]
-      })
-    })
-  });
-};
-const HelpContents = ({
-  elements,
-  isParent: _isParent = false
-}) => jsx("div", {
-  children: elements === null || elements === void 0 ? void 0 : elements.map((element, index) => {
-    return jsx(HelpContentComponent, {
-      uischema: element,
-      label: element.label,
-      errors: '',
-      data: undefined,
-      enabled: false,
-      visible: true,
-      path: '',
-      handleChange: () => {},
-      rootSchema: {},
-      id: '',
-      schema: {},
-      isParent: _isParent
-    }, `${element.label}-help-content-${index}`);
-  })
-});
-const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
-const HelpContent = withJsonFormsControlProps(HelpContentComponent);
-const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
-
 const isNullSchema = schema => {
   return schema === undefined || schema === null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.34.4",
+  "version": "1.35.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Additional/HelpContent.d.ts

@@ -15,12 +15,14 @@ interface CustomControlElement extends ControlElement {
     options?: OptionProps;
     elements?: CustomControlElement[];
 }
+interface ExtraHelpContentProps {
+    isParent?: boolean;
+    showLabel?: boolean;
+}
 interface CustomControlProps extends ControlProps {
     uischema: CustomControlElement;
 }
-export declare const HelpContentComponent: ({ isParent, ...props }: CustomControlProps & {
-    isParent?: boolean;
-}) => JSX.Element;
+export declare const HelpContentComponent: ({ isParent, showLabel, ...props }: CustomControlProps & ExtraHelpContentProps) => JSX.Element;
 export declare const HelpContentTester: RankedTester;
 export declare const HelpContent: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export declare const HelpReviewContent: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;