Eligibility screener logic

packages/design/src/FormManager/FormEdit/components/PageEdit.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@testing-library/react';
+
+import { createThreePageFormWithPageRules } from '../../../test-form.js';
+import { createPatternEditStoryMeta } from './common/story-helper.js';
+import { PageEdit } from './PageEdit.js';
+
+const blueprint = createThreePageFormWithPageRules();
+
+const storyConfig: Meta<typeof PageEdit> = {
+  title: 'Edit components/PageEdit',
+  ...createPatternEditStoryMeta({
+    blueprint,
+  }),
+};
+export default storyConfig;
+
+export const CreateCustomRule: StoryObj<typeof PageEdit> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    //const pagesetHeaderElement = await canvas.findByText(/Page 1/);
+    canvas.getByRole('button', { name: /Create custom rule/ });
+    //await userEvent.click(button);
+  },
+};

packages/design/src/FormManager/FormEdit/components/PageEdit.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { PageProps } from '@atj/forms';
 import { enLocale as message } from '@atj/common';
@@ -13,6 +13,7 @@ import { PatternEditForm } from './common/PatternEditForm.js';
 import { usePatternEditFormContext } from './common/hooks.js';
 import { PatternPreviewSequence } from './PreviewSequencePattern/index.js';
 import styles from '../formEditStyles.module.css';
+import type { FormManagerContext } from 'FormManager/index.js';
 
 export const PageEdit: PatternEditComponent<PageProps> = props => {
   const handleParentClick = (
@@ -24,6 +25,10 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
     }
   };
 
+  const [editingRule, setEditingRule] = useState<
+    PageProps['rules'][number] | null
+  >(null);
+  console.log(editingRule);
   const { routeParams } = useRouteParams();
   const params = new URLSearchParams(routeParams?.toString());
   const pageNumberText = Number(params.get('page')) + 1;
@@ -62,6 +67,84 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           children: props.previewProps.children,
         }}
       />
+
+      <div data-pattern-edit-control="true">
+        <div className="margin-y-2">
+          <strong>NAVIGATION:</strong> After the current page is completed, go
+          to the next page unless a custom rule applies.
+        </div>
+        {props.previewProps.rules.map((rule, index) => (
+          <div
+            key={index}
+            className="display-flex flex-justify flex-align-center margin-y-1"
+          >
+            <div className="display-flex flex-align-center">
+              <svg
+                className="usa-icon usa-icon--size-3 margin-right-1"
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use
+                  xlinkHref={`${props.context.uswdsRoot}img/sprite.svg#directions`}
+                ></use>
+              </svg>
+              <div>
+                If{' '}
+                <button
+                  className="usa-button usa-button--unstyled"
+                  onClick={() => setEditingRule(rule)}
+                >
+                  these questions
+                </button>{' '}
+                are selected, go to{' '}
+                <span className="text-bold">{rule.next}</span>.
+              </div>
+            </div>
+            <div className="display-flex flex-align-center">
+              <RuleButton
+                context={props.context}
+                icon="edit"
+                label="Edit rule"
+              />
+              <RuleButton
+                context={props.context}
+                icon="content_copy"
+                label="Copy rule"
+              />
+              <RuleButton
+                context={props.context}
+                icon="delete"
+                label="Delete rule"
+              />
+              <RuleButton
+                context={props.context}
+                icon="drag_handle"
+                label="Reorder rule"
+              />
+            </div>
+          </div>
+        ))}
+        <hr className="border-base-lighter margin-top-2" />
+        <div className="margin-top-2">
+          <button
+            type="button"
+            className="usa-button usa-button--unstyled display-flex flex-align-center"
+          >
+            <svg
+              className="usa-icon usa-icon--size-3 margin-right-1"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use
+                xlinkHref={`${props.context.uswdsRoot}img/sprite.svg#add_circle`}
+              ></use>
+            </svg>
+            Create custom rule
+          </button>
+        </div>
+      </div>
     </>
   );
 };
@@ -106,3 +189,23 @@ const PageEditComponent = ({ pattern }: { pattern: PagePattern }) => {
     </div>
   );
 };
+
+const RuleButton = (props: {
+  context: FormManagerContext;
+  icon: string;
+  label: string;
+}) => (
+  <button className="usa-button usa-button--unstyled">
+    <svg
+      className="usa-icon usa-icon--size-3 margin-right-1"
+      aria-label={props.label}
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+    >
+      <use
+        xlinkHref={`${props.context.uswdsRoot}img/sprite.svg#${props.icon}`}
+      ></use>
+    </svg>
+  </button>
+);

packages/design/src/FormManager/FormEdit/components/PageSetEdit.tsx

@@ -1,11 +1,10 @@
+import classNames from 'classnames';
 import React from 'react';
 
 import { getPattern, type PageSetProps } from '@atj/forms';
 
 import { PatternEditComponent } from '../types.js';
 
-import ActionBar from '../../../Form/ActionBar/index.js';
-import classNames from 'classnames';
 import styles from '../../../Form/components/PageSet/PageMenu/pageMenuStyles.module.css';
 import { DraggableList } from './PreviewSequencePattern/DraggableList.js';
 import { useFormManagerStore } from '../../store.js';
@@ -24,7 +23,6 @@ const PageSetEdit: PatternEditComponent<PageSetProps> = ({ previewProps }) => {
         aria-live="polite"
       >
         {previewProps.children}
-        <ActionBar actions={previewProps.actions} />
       </div>
     </div>
   );

packages/design/src/test-form.ts

@@ -3,6 +3,7 @@ import {
   createFormSession,
   defaultFormConfig,
   type Blueprint,
+  type CheckboxPattern,
   type Pattern,
 } from '@atj/forms';
 import { createTestBrowserFormService } from '@atj/forms/context';
@@ -39,6 +40,7 @@ export const createOnePageTwoPatternTestForm = () => {
           data: {
             title: 'Page 1',
             patterns: ['element-1', 'element-2'],
+            rules: [],
           },
         } satisfies PagePattern,
         {
@@ -88,6 +90,7 @@ export const createTwoPageTwoPatternTestForm = () => {
           data: {
             title: 'First page',
             patterns: ['element-1', 'element-2'],
+            rules: [],
           },
         } satisfies PagePattern,
         {
@@ -96,6 +99,7 @@ export const createTwoPageTwoPatternTestForm = () => {
           data: {
             title: 'Second page',
             patterns: [],
+            rules: [],
           },
         } satisfies PagePattern,
         {
@@ -164,6 +168,81 @@ export const createTwoPatternTestForm = () => {
   );
 };
 
+export const createThreePageFormWithPageRules = () => {
+  return createForm(
+    {
+      title: 'Test form with page rules',
+      description: 'This form has three pages and page rules',
+    },
+    {
+      root: 'root',
+      patterns: [
+        {
+          type: 'page-set',
+          id: 'root',
+          data: {
+            pages: ['page-1', 'page-2', 'page-3'],
+          },
+        } satisfies PageSetPattern,
+        {
+          type: 'page',
+          id: 'page-1',
+          data: {
+            title: 'First page',
+            patterns: ['checkbox-1', 'checkbox-2'],
+            rules: [
+              {
+                patternId: 'checkbox-1',
+                condition: { value: 'on', operator: '=' },
+                next: 'page-2',
+              },
+              {
+                patternId: 'checkbox-1',
+                condition: { value: 'off', operator: '=' },
+                next: 'page-3',
+              },
+            ],
+          },
+        } satisfies PagePattern,
+        {
+          type: 'page',
+          id: 'page-2',
+          data: {
+            title: 'Second page',
+            patterns: [],
+            rules: [],
+          },
+        } satisfies PagePattern,
+        {
+          type: 'page',
+          id: 'page-3',
+          data: {
+            title: 'Third page',
+            patterns: [],
+            rules: [],
+          },
+        } satisfies PagePattern,
+        {
+          type: 'checkbox',
+          id: 'checkbox-1',
+          data: {
+            label: 'Pattern 1',
+            defaultChecked: false,
+          },
+        } satisfies CheckboxPattern,
+        {
+          type: 'checkbox',
+          id: 'checkbox-2',
+          data: {
+            label: 'Pattern 2',
+            defaultChecked: false,
+          },
+        } satisfies CheckboxPattern,
+      ],
+    }
+  );
+};
+
 export const createSimpleTestBlueprint = (pattern: Pattern) => {
   return createForm(
     {