@abgov/jsonforms-components 2.6.12 → 2.7.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, GoABadge, GoATable, 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, GoAText, 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';
@@ -6878,9 +6878,7 @@ let _$5 = t => t,
   _t18$1,
   _t19$1,
   _t20$1,
-  _t21,
-  _t22,
-  _t23;
+  _t21;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$5`
   display: flex;
   flex-direction: column;
@@ -6990,18 +6988,7 @@ const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$5`
 const TocPageRef = styled.td(_t20$1 || (_t20$1 = _$5`
   padding-left: var(--goa-space-xl);
 `));
-const TocTitle = styled.h1(_t21 || (_t21 = _$5`
-  padding: 0;
-  margin: 0;
-  padding-left: var(--goa-space-xl);
-  padding-bottom: var(--goa-space-3xl);
-`));
-const TocSubtitle = styled.h2(_t22 || (_t22 = _$5`
-  padding: 0;
-  margin: 0;
-  padding-left: var(--goa-space-xl);
-`));
-const CompletionStatus = styled.div(_t23 || (_t23 = _$5`
+const CompletionStatus = styled.div(_t21 || (_t21 = _$5`
   padding: 0;
   margin: 0;
   padding-left: var(--goa-space-xl);
@@ -7695,6 +7682,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 +7956,65 @@ 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
+    })
+  });
+};
+
+const getCategorySections = categories => {
+  const sectionMap = new Map();
+  categories.forEach(category => {
+    var _a, _b;
+    const section = ((_b = (_a = category.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.sectionTitle) || '';
+    if (!sectionMap.has(section)) {
+      sectionMap.set(section, []);
+    }
+    sectionMap.get(section).push(category);
+  });
+  return Array.from(sectionMap.entries()).map(([sectionTitle, categories]) => ({
+    sectionTitle,
+    categories
+  }));
+};
+
+const SectionHeaderRow = ({
+  title,
+  index
+}) => {
+  const section = `${index}. ${title}`;
+  return jsx("tr", {
+    children: jsx("td", {
+      colSpan: 2,
+      children: jsx(GoAText, {
+        size: "heading-m",
+        mt: "none",
+        mb: "m",
+        ml: "m",
+        children: section
+      })
+    })
+  });
+};
+
 var PageStatus;
 (function (PageStatus) {
   PageStatus["Complete"] = "Completed";
@@ -7985,78 +8034,103 @@ const getCategoryStatusBadge = category => {
   });
 };
 
-const ApplicationStatus = ({
-  categories
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const CategoryRow = ({
+  category,
+  index,
+  onClick
 }) => {
-  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
-    })
+  return jsxs("tr", {
+    children: [jsx(TocPageRef, {
+      children: jsx("a", {
+        "data-testid": `page-ref-${index}`,
+        href: "#",
+        onClick: e => {
+          e.preventDefault();
+          onClick(index);
+        },
+        children: jsx(GoAText, {
+          ml: "l",
+          children: category.label
+        })
+      })
+    }), jsx(CategoryStatus, {
+      children: getCategoryStatusBadge(category)
+    })]
   });
 };
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
-const TableOfContents = props => {
-  var _a, _b;
+const SummaryRow = ({
+  index,
+  isValid,
+  onClick
+}) => {
+  return jsxs("tr", {
+    children: [jsx(TocPageRef, {
+      children: jsx("a", {
+        "data-testid": `page-ref-${index}`,
+        href: "#",
+        onClick: e => {
+          e.preventDefault();
+          onClick(index);
+        },
+        children: jsx("b", {
+          children: "Summary"
+        })
+      })
+    }), jsx(CategoryStatus, {})]
+  });
+};
+
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const TaskList = ({
+  categories,
+  onClick,
+  title,
+  subtitle,
+  isValid
+}) => {
   const testid = 'table-of-contents';
+  const sectioned = getCategorySections(categories);
+  let globalIndex = 0;
+  let sectionIndex = 1;
   return jsx(PageBorder, {
     children: jsxs("div", {
       "data-testid": testid,
-      children: [props.title && jsx(TocTitle, {
-        children: props.title
-      }), jsx(ApplicationStatus, {
-        categories: props.categories
-      }), props.subtitle && jsx(TocSubtitle, {
-        children: props.subtitle
+      children: [title && jsx(GoAText, {
+        size: "heading-xl",
+        ml: "xl",
+        mb: "xl",
+        children: title
+      }), jsx(ApplicationStatus, {}), subtitle && jsx(GoAText, {
+        size: "heading-l",
+        mt: "none",
+        mb: "xl",
+        ml: "xl",
+        children: subtitle
       }), jsx(GoATable, {
         width: "100%",
         children: jsxs("tbody", {
-          children: [(_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
-            return jsxs("tr", {
-              children: [jsx(TocPageRef, {
-                children: jsx("a", {
-                  "data-testid": `page-ref-${index}`,
-                  href: "#",
-                  onClick: e => {
-                    e.preventDefault();
-                    props.onClick(index);
-                  },
-                  children: category.label
-                })
-              }), jsx(CategoryStatus, {
-                children: getCategoryStatusBadge(category)
-              })]
-            });
-          }), jsxs("tr", {
-            children: [jsx(TocPageRef, {
-              children: jsx("a", {
-                "data-testid": `page-ref-${(_b = props.categories) === null || _b === void 0 ? void 0 : _b.length}`,
-                href: "#",
-                onClick: e => {
-                  var _a;
-                  e.preventDefault();
-                  props.onClick((_a = props.categories) === null || _a === void 0 ? void 0 : _a.length);
-                },
-                children: jsx("b", {
-                  children: "Summary"
-                })
-              })
-            }), jsxs(CategoryStatus, {
-              children: [jsx(GoABadge, {
-                type: props.isValid ? 'success' : 'information',
-                content: props.isValid ? 'Completed' : 'Incomplete',
-                ariaLabel: props.isValid ? 'Completed' : 'Incomplete'
-              }), props.isValid]
+          children: [sectioned.map(({
+            sectionTitle,
+            categories: group
+          }) => jsxs(Fragment, {
+            children: [sectionTitle && jsx(SectionHeaderRow, {
+              title: sectionTitle,
+              index: sectionIndex++
+            }, `section-${sectionTitle}`), group.map(category => {
+              const index = globalIndex++;
+              return jsx(CategoryRow, {
+                category: category,
+                index: index,
+                onClick: onClick
+              }, `cat-${category.label}`);
             })]
+          })), jsx(SummaryRow, {
+            index: globalIndex,
+            isValid: isValid,
+            onClick: onClick
           })]
         })
       })]
@@ -8218,7 +8292,8 @@ const RenderPages = props => {
   const {
     goToPage,
     toggleShowReviewLink,
-    goToTableOfContext
+    goToTableOfContext,
+    validatePage
   } = formStepperCtx;
   const {
     categories,
@@ -8266,7 +8341,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 +8377,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 +8440,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,9 +8459,9 @@ 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));
+    return jsx(TaskList, Object.assign({}, tocProps));
   } else {
     return jsx(RenderPages, {
       categoryProps: props

package/package.json

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

@@ -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/{TableOfContents.d.ts → TaskList/TaskList.d.ts}

@@ -1,11 +1,11 @@
 import { RankedTester } from '@jsonforms/core';
-import { CategoriesState } from './context';
+import { CategoriesState } from '../context';
 export interface TocProps {
     categories: CategoriesState;
     onClick: (id: number) => void;
-    title: string | undefined;
-    subtitle: string | undefined;
+    title?: string;
+    subtitle?: string;
     isValid: boolean;
 }
-export declare const TableOfContents: (props: TocProps) => JSX.Element;
+export declare const TaskList: ({ categories, onClick, title, subtitle, isValid }: TocProps) => JSX.Element;
 export declare const TableOfContentsTester: RankedTester;

package/src/lib/Controls/FormStepper/TaskList/categoryRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CategoryState } from '../context';
+interface CategoryRowProps {
+    category: CategoryState;
+    index: number;
+    onClick: (id: number) => void;
+}
+export declare const CategoryRow: React.FC<CategoryRowProps>;
+export {};

package/src/lib/Controls/FormStepper/TaskList/categorySections.d.ts

@@ -0,0 +1,7 @@
+import { CategoriesState, CategoryState } from '../context';
+interface SectionMap {
+    sectionTitle: string;
+    categories: CategoryState[];
+}
+export declare const getCategorySections: (categories: CategoriesState) => SectionMap[];
+export {};

package/src/lib/Controls/FormStepper/TaskList/sectionHeaderRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SectionHeaderRowProps {
+    title: string;
+    index: number;
+}
+export declare const SectionHeaderRow: React.FC<SectionHeaderRowProps>;
+export {};

package/src/lib/Controls/FormStepper/TaskList/summaryRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SummaryRowProps {
+    index: number;
+    isValid: boolean;
+    onClick: (id: number) => void;
+}
+export declare const SummaryRow: React.FC<SummaryRowProps>;
+export {};

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>;

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

@@ -18,6 +18,4 @@ export declare const TableReviewPageTitleRow: import("styled-components/dist/typ
 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 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;