@abgov/jsonforms-components 2.6.13 → 2.8.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);
@@ -7993,14 +7980,49 @@ const ApplicationStatus = () => {
   });
 };
 
+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";
-  PageStatus["Incomplete"] = "Incomplete";
+  PageStatus["Inprogress"] = "In progress";
   PageStatus["NotStarted"] = "Not started";
 })(PageStatus || (PageStatus = {}));
 const getCategoryStatus = category => {
-  return category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Incomplete : PageStatus.NotStarted;
+  return category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Inprogress : PageStatus.NotStarted;
 };
 const getCategoryStatusBadge = category => {
   const status = getCategoryStatus(category);
@@ -8013,56 +8035,102 @@ const getCategoryStatusBadge = category => {
 };
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
-const TableOfContents = props => {
-  var _a, _b;
+const CategoryRow = ({
+  category,
+  index,
+  onClick
+}) => {
+  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 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, {}), 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
           })]
         })
       })]
@@ -8393,7 +8461,7 @@ const FormPagesView = props => {
       subtitle: (_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.subtitle,
       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.13",
+  "version": "2.8.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/CategoryStatus.d.ts

@@ -1,7 +1,7 @@
 import { CategoryState } from './context';
 export declare enum PageStatus {
     Complete = "Completed",
-    Incomplete = "Incomplete",
+    Inprogress = "In progress",
     NotStarted = "Not started"
 }
 export declare const getCategoryStatus: (category: CategoryState) => string;

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