@abgov/jsonforms-components 2.2.0 → 2.3.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as runtime from 'react/jsx-runtime';
 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, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoATable, GoABadge, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoABadge, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -5437,7 +5437,10 @@ let _$6 = t => t,
   _t16$1,
   _t17$1,
   _t18$1,
-  _t19$1;
+  _t19$1,
+  _t20,
+  _t21,
+  _t22;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5538,13 +5541,30 @@ const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$6`
 const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
-const TocStatus = styled.td(_t18$1 || (_t18$1 = _$6`
+const CategoryStatus = styled.td(_t18$1 || (_t18$1 = _$6`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
 `));
 const TocPageRef = styled.td(_t19$1 || (_t19$1 = _$6`
   padding-left: var(--goa-space-xl);
 `));
+const TocTitle = styled.h1(_t20 || (_t20 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+  padding-bottom: var(--goa-space-3xl);
+`));
+const TocSubtitle = styled.h2(_t21 || (_t21 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+`));
+const CompletionStatus = styled.div(_t22 || (_t22 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-left: var(--goa-space-xl);
+  padding-bottom: var(--goa-space-xl);
+`));
 
 class ContextProviderClass {
   addDataByUrl(key, url, processDataFunction, token) {
@@ -6494,14 +6514,98 @@ const BackButton = ({
   });
 };
 
+var aCallable$5 = aCallable$9;
+var toObject = toObject$8;
+var IndexedObject = indexedObject;
+var lengthOfArrayLike$1 = lengthOfArrayLike$7;
+
+var $TypeError$6 = TypeError;
+
+var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
+
+// `Array.prototype.{ reduce, reduceRight }` methods implementation
+var createMethod = function (IS_RIGHT) {
+  return function (that, callbackfn, argumentsLength, memo) {
+    var O = toObject(that);
+    var self = IndexedObject(O);
+    var length = lengthOfArrayLike$1(O);
+    aCallable$5(callbackfn);
+    if (length === 0 && argumentsLength < 2) throw new $TypeError$6(REDUCE_EMPTY);
+    var index = IS_RIGHT ? length - 1 : 0;
+    var i = IS_RIGHT ? -1 : 1;
+    if (argumentsLength < 2) while (true) {
+      if (index in self) {
+        memo = self[index];
+        index += i;
+        break;
+      }
+      index += i;
+      if (IS_RIGHT ? index < 0 : length <= index) {
+        throw new $TypeError$6(REDUCE_EMPTY);
+      }
+    }
+    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
+      memo = callbackfn(memo, self[index], index, O);
+    }
+    return memo;
+  };
+};
+
+var arrayReduce = {
+  // `Array.prototype.reduce` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduce
+  left: createMethod(false),
+  // `Array.prototype.reduceRight` method
+  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
+  right: createMethod(true)
+};
+
+var fails$2 = fails$s;
+
+var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
+  var method = [][METHOD_NAME];
+  return !!method && fails$2(function () {
+    // eslint-disable-next-line no-useless-call -- required for testing
+    method.call(null, argument || function () { return 1; }, 1);
+  });
+};
+
+var global$8 = global$p;
+var classof$1 = classofRaw$2;
+
+var engineIsNode = classof$1(global$8.process) === 'process';
+
+var $$9 = _export;
+var $reduce = arrayReduce.left;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+var CHROME_VERSION = engineV8Version;
+var IS_NODE$4 = engineIsNode;
+
+// Chrome 80-82 has a critical bug
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
+var CHROME_BUG = !IS_NODE$4 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
+var FORCED$1 = CHROME_BUG || !arrayMethodIsStrict('reduce');
+
+// `Array.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-array.prototype.reduce
+$$9({ target: 'Array', proto: true, forced: FORCED$1 }, {
+  reduce: function reduce(callbackfn /* , initialValue */) {
+    var length = arguments.length;
+    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
+  }
+});
+
 var PageStatus;
 (function (PageStatus) {
   PageStatus["Complete"] = "Completed";
   PageStatus["Incomplete"] = "Incomplete";
   PageStatus["NotStarted"] = "Not started";
 })(PageStatus || (PageStatus = {}));
-const getPageStatus = category => {
-  const status = category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Incomplete : PageStatus.NotStarted;
+const getCategoryStatus = category => {
+  return category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Incomplete : PageStatus.NotStarted;
+};
+const getCategoryStatusBadge = category => {
+  const status = getCategoryStatus(category);
   const badgeType = status === PageStatus.Complete ? 'success' : 'information';
   return jsx(GoABadge, {
     type: badgeType,
@@ -6509,14 +6613,40 @@ const getPageStatus = category => {
     ariaLabel: status
   });
 };
+
+const ApplicationStatus = ({
+  categories
+}) => {
+  const total = categories.length;
+  const completed = categories.reduce((acc, cat) => acc + (getCategoryStatus(cat) === PageStatus.Complete ? 1 : 0), 0);
+  const type = total === completed ? 'success' : 'important';
+  const heading = total === completed ? 'Application complete' : 'Application incomplete';
+  const message = `You have completed ${completed} of ${total} sections.`;
+  return jsx(CompletionStatus, {
+    children: jsx(GoACallout, {
+      type: type,
+      heading: heading,
+      size: "medium",
+      maxWidth: '50%',
+      children: message
+    })
+  });
+};
+
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const TableOfContents = props => {
   var _a;
   const testid = 'table-of-contents';
   return jsx(PageBorder, {
-    children: jsx("div", {
+    children: jsxs("div", {
       "data-testid": testid,
-      children: jsx(GoATable, {
+      children: [props.title && jsx(TocTitle, {
+        children: props.title
+      }), jsx(ApplicationStatus, {
+        categories: props.categories
+      }), props.subtitle && jsx(TocSubtitle, {
+        children: props.subtitle
+      }), jsx(GoATable, {
         width: "100%",
         children: jsx("tbody", {
           children: (_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
@@ -6531,13 +6661,13 @@ const TableOfContents = props => {
                   },
                   children: category.label
                 })
-              }), jsx(TocStatus, {
-                children: getPageStatus(category)
+              }), jsx(CategoryStatus, {
+                children: getCategoryStatusBadge(category)
               })]
             });
           })
         })
-      })
+      })]
     })
   });
 };
@@ -6777,6 +6907,7 @@ const FormPageStepper = props => {
   });
 };
 const FormPagesView = props => {
+  var _a, _b, _c, _d;
   const data = props.data;
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
@@ -6813,7 +6944,9 @@ const FormPagesView = props => {
   if (showTOC) {
     const tocProps = {
       categories,
-      onClick: handleGoToPage
+      onClick: handleGoToPage,
+      title: (_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.title,
+      subtitle: (_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.subtitle
     };
     return jsx(TableOfContents, Object.assign({}, tocProps));
   } else {
@@ -7126,7 +7259,7 @@ var isArrayIteratorMethod$1 = function (it) {
   return it !== undefined && (Iterators$1.Array === it || ArrayPrototype[ITERATOR$3] === it);
 };
 
-var classof$1 = classof$9;
+var classof = classof$9;
 var getMethod$1 = getMethod$5;
 var isNullOrUndefined$1 = isNullOrUndefined$6;
 var Iterators = iterators;
@@ -7137,21 +7270,21 @@ var ITERATOR$2 = wellKnownSymbol$3('iterator');
 var getIteratorMethod$2 = function (it) {
   if (!isNullOrUndefined$1(it)) return getMethod$1(it, ITERATOR$2)
     || getMethod$1(it, '@@iterator')
-    || Iterators[classof$1(it)];
+    || Iterators[classof(it)];
 };
 
 var call$5 = functionCall;
-var aCallable$5 = aCallable$9;
+var aCallable$4 = aCallable$9;
 var anObject$4 = anObject$f;
 var tryToString$2 = tryToString$4;
 var getIteratorMethod$1 = getIteratorMethod$2;
 
-var $TypeError$6 = TypeError;
+var $TypeError$5 = TypeError;
 
 var getIterator$1 = function (argument, usingIterator) {
   var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
-  if (aCallable$5(iteratorMethod)) return anObject$4(call$5(iteratorMethod, argument));
-  throw new $TypeError$6(tryToString$2(argument) + ' is not iterable');
+  if (aCallable$4(iteratorMethod)) return anObject$4(call$5(iteratorMethod, argument));
+  throw new $TypeError$5(tryToString$2(argument) + ' is not iterable');
 };
 
 var call$4 = functionCall;
@@ -7183,13 +7316,13 @@ var call$3 = functionCall;
 var anObject$2 = anObject$f;
 var tryToString$1 = tryToString$4;
 var isArrayIteratorMethod = isArrayIteratorMethod$1;
-var lengthOfArrayLike$1 = lengthOfArrayLike$7;
+var lengthOfArrayLike = lengthOfArrayLike$7;
 var isPrototypeOf$1 = objectIsPrototypeOf;
 var getIterator = getIterator$1;
 var getIteratorMethod = getIteratorMethod$2;
 var iteratorClose = iteratorClose$1;
 
-var $TypeError$5 = TypeError;
+var $TypeError$4 = TypeError;
 
 var Result = function (stopped, result) {
   this.stopped = stopped;
@@ -7225,10 +7358,10 @@ var iterate$3 = function (iterable, unboundFunction, options) {
     iterator = iterable;
   } else {
     iterFn = getIteratorMethod(iterable);
-    if (!iterFn) throw new $TypeError$5(tryToString$1(iterable) + ' is not iterable');
+    if (!iterFn) throw new $TypeError$4(tryToString$1(iterable) + ' is not iterable');
     // optimisation for array iterators
     if (isArrayIteratorMethod(iterFn)) {
-      for (index = 0, length = lengthOfArrayLike$1(iterable); length > index; index++) {
+      for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
         result = callFn(iterable[index]);
         if (result && isPrototypeOf$1(ResultPrototype, result)) return result;
       } return new Result(false);
@@ -7256,13 +7389,13 @@ var createProperty$1 = function (object, key, value) {
   else object[key] = value;
 };
 
-var $$9 = _export;
+var $$8 = _export;
 var iterate$2 = iterate$3;
 var createProperty = createProperty$1;
 
 // `Object.fromEntries` method
 // https://github.com/tc39/proposal-object-from-entries
-$$9({ target: 'Object', stat: true }, {
+$$8({ target: 'Object', stat: true }, {
   fromEntries: function fromEntries(iterable) {
     var obj = {};
     iterate$2(iterable, function (k, v) {
@@ -7272,35 +7405,35 @@ $$9({ target: 'Object', stat: true }, {
   }
 });
 
-var global$8 = global$p;
-var fails$2 = fails$s;
+var global$7 = global$p;
+var fails$1 = fails$s;
 var uncurryThis$1 = functionUncurryThis;
 var toString$1 = toString$f;
 var trim = stringTrim.trim;
 var whitespaces = whitespaces$3;
 
-var $parseInt$1 = global$8.parseInt;
-var Symbol$1 = global$8.Symbol;
+var $parseInt$1 = global$7.parseInt;
+var Symbol$1 = global$7.Symbol;
 var ITERATOR$1 = Symbol$1 && Symbol$1.iterator;
 var hex = /^[+-]?0x/i;
 var exec = uncurryThis$1(hex.exec);
-var FORCED$1 = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
+var FORCED = $parseInt$1(whitespaces + '08') !== 8 || $parseInt$1(whitespaces + '0x16') !== 22
   // MS Edge 18- broken with boxed symbols
-  || (ITERATOR$1 && !fails$2(function () { $parseInt$1(Object(ITERATOR$1)); }));
+  || (ITERATOR$1 && !fails$1(function () { $parseInt$1(Object(ITERATOR$1)); }));
 
 // `parseInt` method
 // https://tc39.es/ecma262/#sec-parseint-string-radix
-var numberParseInt = FORCED$1 ? function parseInt(string, radix) {
+var numberParseInt = FORCED ? function parseInt(string, radix) {
   var S = trim(toString$1(string));
   return $parseInt$1(S, (radix >>> 0) || (exec(hex, S) ? 16 : 10));
 } : $parseInt$1;
 
-var $$8 = _export;
+var $$7 = _export;
 var $parseInt = numberParseInt;
 
 // `parseInt` method
 // https://tc39.es/ecma262/#sec-parseint-string-radix
-$$8({ global: true, forced: parseInt !== $parseInt }, {
+$$7({ global: true, forced: parseInt !== $parseInt }, {
   parseInt: $parseInt
 });
 
@@ -8870,7 +9003,7 @@ const AddressInputs = ({
   });
 };
 
-var $$7 = _export;
+var $$6 = _export;
 var uncurryThis = functionUncurryThisClause;
 var getOwnPropertyDescriptor$1 = objectGetOwnPropertyDescriptor.f;
 var toLength = toLength$5;
@@ -8891,7 +9024,7 @@ var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
 
 // `String.prototype.endsWith` method
 // https://tc39.es/ecma262/#sec-string.prototype.endswith
-$$7({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+$$6({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
   endsWith: function endsWith(searchString /* , endPosition = @length */) {
     var that = toString(requireObjectCoercible(this));
     notARegExp(searchString);
@@ -10333,87 +10466,6 @@ const createDefaultAjv = (...schemas) => {
   return ajv;
 };
 
-var aCallable$4 = aCallable$9;
-var toObject = toObject$8;
-var IndexedObject = indexedObject;
-var lengthOfArrayLike = lengthOfArrayLike$7;
-
-var $TypeError$4 = TypeError;
-
-var REDUCE_EMPTY = 'Reduce of empty array with no initial value';
-
-// `Array.prototype.{ reduce, reduceRight }` methods implementation
-var createMethod = function (IS_RIGHT) {
-  return function (that, callbackfn, argumentsLength, memo) {
-    var O = toObject(that);
-    var self = IndexedObject(O);
-    var length = lengthOfArrayLike(O);
-    aCallable$4(callbackfn);
-    if (length === 0 && argumentsLength < 2) throw new $TypeError$4(REDUCE_EMPTY);
-    var index = IS_RIGHT ? length - 1 : 0;
-    var i = IS_RIGHT ? -1 : 1;
-    if (argumentsLength < 2) while (true) {
-      if (index in self) {
-        memo = self[index];
-        index += i;
-        break;
-      }
-      index += i;
-      if (IS_RIGHT ? index < 0 : length <= index) {
-        throw new $TypeError$4(REDUCE_EMPTY);
-      }
-    }
-    for (;IS_RIGHT ? index >= 0 : length > index; index += i) if (index in self) {
-      memo = callbackfn(memo, self[index], index, O);
-    }
-    return memo;
-  };
-};
-
-var arrayReduce = {
-  // `Array.prototype.reduce` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduce
-  left: createMethod(false),
-  // `Array.prototype.reduceRight` method
-  // https://tc39.es/ecma262/#sec-array.prototype.reduceright
-  right: createMethod(true)
-};
-
-var fails$1 = fails$s;
-
-var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
-  var method = [][METHOD_NAME];
-  return !!method && fails$1(function () {
-    // eslint-disable-next-line no-useless-call -- required for testing
-    method.call(null, argument || function () { return 1; }, 1);
-  });
-};
-
-var global$7 = global$p;
-var classof = classofRaw$2;
-
-var engineIsNode = classof(global$7.process) === 'process';
-
-var $$6 = _export;
-var $reduce = arrayReduce.left;
-var arrayMethodIsStrict = arrayMethodIsStrict$1;
-var CHROME_VERSION = engineV8Version;
-var IS_NODE$4 = engineIsNode;
-
-// Chrome 80-82 has a critical bug
-// https://bugs.chromium.org/p/chromium/issues/detail?id=1049982
-var CHROME_BUG = !IS_NODE$4 && CHROME_VERSION > 79 && CHROME_VERSION < 83;
-var FORCED = CHROME_BUG || !arrayMethodIsStrict('reduce');
-
-// `Array.prototype.reduce` method
-// https://tc39.es/ecma262/#sec-array.prototype.reduce
-$$6({ target: 'Array', proto: true, forced: FORCED }, {
-  reduce: function reduce(callbackfn /* , initialValue */) {
-    var length = arguments.length;
-    return $reduce(this, callbackfn, length, length > 1 ? arguments[1] : undefined);
-  }
-});
-
 var isPrototypeOf = objectIsPrototypeOf;
 
 var $TypeError$3 = TypeError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.2.0",
+  "version": "2.3.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/Controls/FormStepper/ApplicationStatus.d.ts

@@ -0,0 +1,5 @@
+import { CategoriesState } from './context';
+export interface ApplicationStatusProps {
+    categories: CategoriesState;
+}
+export declare const ApplicationStatus: ({ categories }: ApplicationStatusProps) => JSX.Element;

package/src/lib/Controls/FormStepper/CategoryStatus.d.ts

@@ -0,0 +1,8 @@
+import { CategoryState } from './context';
+export declare enum PageStatus {
+    Complete = "Completed",
+    Incomplete = "Incomplete",
+    NotStarted = "Not started"
+}
+export declare const getCategoryStatus: (category: CategoryState) => string;
+export declare const getCategoryStatusBadge: (category: CategoryState) => JSX.Element;

package/src/lib/Controls/FormStepper/TableOfContents.d.ts

@@ -3,6 +3,8 @@ import { CategoriesState } from './context';
 export interface TocProps {
     categories: CategoriesState;
     onClick: (id: number) => void;
+    title: string | undefined;
+    subtitle: string | undefined;
 }
 export declare const TableOfContents: (props: TocProps) => JSX.Element;
 export declare const TableOfContentsTester: RankedTester;

package/src/lib/Controls/FormStepper/styled-components.d.ts

@@ -16,5 +16,8 @@ export declare const TableReviewItemSection: import("styled-components/dist/type
 export declare const TableReviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const TocStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const CategoryStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 export declare const TocPageRef: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const TocTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const TocSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const CompletionStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;