@abgov/jsonforms-components 2.1.6 → 2.2.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, 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, GoATable, GoABadge, 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';
@@ -5435,7 +5435,9 @@ let _$6 = t => t,
   _t14$1,
   _t15$1,
   _t16$1,
-  _t17$1;
+  _t17$1,
+  _t18$1,
+  _t19$1;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5536,6 +5538,13 @@ 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`
+  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);
+`));
 
 class ContextProviderClass {
   addDataByUrl(key, url, processDataFunction, token) {
@@ -6485,6 +6494,55 @@ const BackButton = ({
   });
 };
 
+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 badgeType = status === PageStatus.Complete ? 'success' : 'information';
+  return jsx(GoABadge, {
+    type: badgeType,
+    content: status,
+    ariaLabel: status
+  });
+};
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const TableOfContents = props => {
+  var _a;
+  const testid = 'table-of-contents';
+  return jsx(PageBorder, {
+    children: jsx("div", {
+      "data-testid": testid,
+      children: jsx(GoATable, {
+        width: "100%",
+        children: jsx("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(TocStatus, {
+                children: getPageStatus(category)
+              })]
+            });
+          })
+        })
+      })
+    })
+  });
+};
+rankWith(1, uiTypeIs('TaskSection'));
+
 const FormStepperPageReviewer = props => {
   const {
     uischema,
@@ -6579,35 +6637,18 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const FormPageStepper = props => {
-  const formStepperCtx = useContext(JsonFormsStepperContext);
-  /**
-   * StepperCtx can only be provided once to prevent issues from categorization in categorization
-   *  */
-  if ((formStepperCtx === null || formStepperCtx === void 0 ? void 0 : formStepperCtx.isProvided) === true) {
-    return jsx(FormPagesView, Object.assign({}, props));
-  }
-  return jsx(JsonFormsStepperContextProvider, {
-    StepperProps: Object.assign({}, props),
-    children: jsx(FormPagesView, Object.assign({}, props))
-  });
-};
-const FormPagesView = props => {
+const RenderPages = props => {
   const {
-    uischema,
     data,
     schema,
     path,
     cells,
     renderers,
-    visible,
-    t
-  } = props;
+    visible
+  } = props.categoryProps;
   const enumerators = useContext(JsonFormContext);
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
-    validatePage,
     goToPage,
     toggleShowReviewLink
   } = formStepperCtx;
@@ -6630,9 +6671,6 @@ const FormPagesView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  useEffect(() => {
-    validatePage(activeId);
-  }, [data]);
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
@@ -6658,11 +6696,7 @@ const FormPagesView = props => {
                 style: {
                   marginTop: '1.5rem'
                 },
-                children: [index > 0 && jsx(BackButton, {
-                  testId: "back-button",
-                  link: () => goToPage(activeId - 1),
-                  text: "Back"
-                }), jsxs(PageRenderPadding, {
+                children: [props.renderBackButton(index, activeId), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
@@ -6690,7 +6724,7 @@ const FormPagesView = props => {
             }
           }), isOnReview && jsxs("div", {
             "data-testid": "stepper-pages-review-page",
-            children: [jsx(FormStepperPageReviewer, Object.assign({}, props, {
+            children: [jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {
               navigationFunc: goToPage
             })), jsx(PageRenderPadding, {
               children: jsx(GoAButtonGroup, {
@@ -6727,6 +6761,68 @@ const FormPagesView = props => {
     })]
   });
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FormPageStepper = props => {
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  /**
+   * StepperCtx can only be provided once to prevent issues from categorization in categorization
+   *  */
+  if ((formStepperCtx === null || formStepperCtx === void 0 ? void 0 : formStepperCtx.isProvided) === true) {
+    return jsx(FormPagesView, Object.assign({}, props));
+  }
+  return jsx(JsonFormsStepperContextProvider, {
+    StepperProps: Object.assign({}, props),
+    children: jsx(FormPagesView, Object.assign({}, props))
+  });
+};
+const FormPagesView = props => {
+  const data = props.data;
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    validatePage,
+    goToPage
+  } = formStepperCtx;
+  const {
+    categories,
+    activeId
+  } = formStepperCtx.selectStepperState();
+  useEffect(() => {
+    validatePage(activeId);
+  }, [data]);
+  const [showTOC, setShowTOC] = useState(true);
+  const handleGoToPage = index => {
+    setShowTOC(false);
+    goToPage(index);
+  };
+  // Make sure the back button on the first page takes us to the Table of Contents.
+  const renderBackButton = (index, activeId) => {
+    if (index > 0) {
+      return jsx(BackButton, {
+        testId: "back-button",
+        link: () => goToPage(activeId - 1),
+        text: "Back"
+      });
+    }
+    return jsx(BackButton, {
+      testId: "back-button",
+      link: () => setShowTOC(true),
+      text: "Back"
+    });
+  };
+  if (showTOC) {
+    const tocProps = {
+      categories,
+      onClick: handleGoToPage
+    };
+    return jsx(TableOfContents, Object.assign({}, tocProps));
+  } else {
+    return jsx(RenderPages, {
+      categoryProps: props,
+      renderBackButton: renderBackButton
+    });
+  }
+};
 const FormStepperPagesControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormPageStepper)));
 
 // Ensure that all children (Category) have valid elements or things tend
@@ -8186,7 +8282,7 @@ const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema) => {
       cellPath: rowPath,
       enabled
     };
-    return jsx(Cell, Object.assign({}, props), rowPath);
+    return jsx(Cell, Object.assign({}, props), `${rowPath}`);
   }
 };
 const getValidColumnProps = scopedSchema => {
@@ -8274,19 +8370,19 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
   return jsxs(Fragment, {
     children: [
     // eslint-disable-next-line
-    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map(element => {
+    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
         uischema: element,
-        path: rowPath,
+        path: `${rowPath}-${index}`,
         enabled: enabled,
         renderers: renderers,
         cells: cells
       }, rowPath);
     }),
     // eslint-disable-next-line
-    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map(element => {
+    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -8295,7 +8391,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         enabled: enabled,
         renderers: renderers,
         cells: cells
-      }, rowPath);
+      }, `${rowPath}-${index}`);
     }), ((_e = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _e === void 0 ? void 0 : _e.length) > 0 && jsx(JsonFormsDispatch, {
       schema: schema,
       uischema: uiSchemaElementsForNotDefined,
@@ -8303,7 +8399,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
       enabled: enabled,
       renderers: renderers,
       cells: cells
-    })]
+    }, `${rowPath}`)]
   });
 });
 const NonEmptyCell = ownProps => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.1.6",
+  "version": "2.2.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/RenderPages.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CategorizationStepperLayoutRendererProps } from './types';
+export interface PageRenderingProps {
+    categoryProps: CategorizationStepperLayoutRendererProps;
+    renderBackButton: (index: number, activeId: number) => JSX.Element;
+}
+export declare const RenderPages: (props: PageRenderingProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import { RankedTester } from '@jsonforms/core';
+import { CategoriesState } from './context';
+export interface TocProps {
+    categories: CategoriesState;
+    onClick: (id: number) => void;
+}
+export declare const TableOfContents: (props: TocProps) => JSX.Element;
+export declare const TableOfContentsTester: RankedTester;

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

@@ -16,3 +16,5 @@ 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 TocPageRef: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;