@abgov/jsonforms-components 2.6.12 → 2.6.13

package/index.esm.js

@@ -7695,6 +7695,9 @@ const JsonFormsStepperContextProvider = ({
         const category = (_a = stepperState.categories) === null || _a === void 0 ? void 0 : _a[stepperState.activeId];
         return category === undefined ? false : !(category === null || category === void 0 ? void 0 : category.isEnabled);
       },
+      selectNumberOfCompletedCategories: () => {
+        return stepperState === null || stepperState === void 0 ? void 0 : stepperState.categories.reduce((acc, cat) => acc + (cat.isValid && cat.isCompleted && cat.isVisited ? 1 : 0), 0);
+      },
       selectIsActive: id => {
         return id === stepperState.activeId;
       },
@@ -7966,6 +7969,30 @@ const FormStepperView = props => {
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
 
+const ApplicationStatus = () => {
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    selectNumberOfCompletedCategories
+  } = formStepperCtx;
+  const {
+    categories
+  } = formStepperCtx.selectStepperState();
+  const total = categories.length;
+  const completed = selectNumberOfCompletedCategories();
+  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
+    })
+  });
+};
+
 var PageStatus;
 (function (PageStatus) {
   PageStatus["Complete"] = "Completed";
@@ -7985,25 +8012,6 @@ const getCategoryStatusBadge = category => {
   });
 };
 
-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, _b;
@@ -8013,9 +8021,7 @@ const TableOfContents = props => {
       "data-testid": testid,
       children: [props.title && jsx(TocTitle, {
         children: props.title
-      }), jsx(ApplicationStatus, {
-        categories: props.categories
-      }), props.subtitle && jsx(TocSubtitle, {
+      }), jsx(ApplicationStatus, {}), props.subtitle && jsx(TocSubtitle, {
         children: props.subtitle
       }), jsx(GoATable, {
         width: "100%",
@@ -8218,7 +8224,8 @@ const RenderPages = props => {
   const {
     goToPage,
     toggleShowReviewLink,
-    goToTableOfContext
+    goToTableOfContext,
+    validatePage
   } = formStepperCtx;
   const {
     categories,
@@ -8266,7 +8273,10 @@ const RenderPages = props => {
                 },
                 children: [jsx(BackButton, {
                   testId: "back-button",
-                  link: () => goToTableOfContext(),
+                  link: () => {
+                    validatePage(index);
+                    goToTableOfContext();
+                  },
                   text: "Back"
                 }), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
@@ -8299,7 +8309,9 @@ const RenderPages = props => {
             children: [jsx(PageRenderPaddingBottom, {
               children: jsx(BackButton, {
                 testId: "review-back-button",
-                link: () => goToTableOfContext(),
+                link: () => {
+                  goToTableOfContext();
+                },
                 text: "Back"
               })
             }), jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {
@@ -8360,12 +8372,12 @@ const FormPagesView = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
     validatePage,
-    goToPage
+    goToPage,
+    selectNumberOfCompletedCategories
   } = formStepperCtx;
   const {
     categories,
-    activeId,
-    isValid
+    activeId
   } = formStepperCtx.selectStepperState();
   useEffect(() => {
     validatePage(activeId);
@@ -8379,7 +8391,7 @@ const FormPagesView = props => {
       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,
-      isValid: isValid
+      isValid: selectNumberOfCompletedCategories() === categories.length
     };
     return jsx(TableOfContents, Object.assign({}, tocProps));
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.6.12",
+  "version": "2.6.13",
   "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

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

package/src/lib/Controls/FormStepper/context/StepperContext.d.ts

@@ -23,6 +23,7 @@ export interface JsonFormsStepperContextProps {
     goToTableOfContext: () => void;
     toggleShowReviewLink: (id: number) => void;
     validatePage: (id: number) => void;
+    selectNumberOfCompletedCategories: () => number;
     isProvided?: boolean;
 }
 export declare const JsonFormsStepperContext: import("react").Context<JsonFormsStepperContextProps | undefined>;