Fix page rendering to align with spec

.github/workflows/build_test_lint.yml

@@ -94,34 +94,3 @@ jobs:
 
       - name: Check formatting
         run: npm run check-formatting
-
-  deploy-storybook:
-    name: Deploy Storybook to S3
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pages: write
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          cache: npm
-
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          role-to-assume: arn:aws:iam::209248795938:role/SmartFormsReactAppDeployment
-          aws-region: ap-southeast-2
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build application
-        run: npm run build-storybook -w packages/smart-forms-renderer
-
-      - name: Upload static Storybook site to S3
-        run: aws s3 sync packages/smart-forms-renderer/storybook-static s3://smart-forms-storybook/storybook

.github/workflows/deploy_docs.yml

@@ -1,7 +1,9 @@
-name: Smart Forms Docs Deployment Workflow
+name: Smart Forms Docs + Storybook Deployment Workflow
 
 on:
   push:
+    branches-ignore:
+      - alpha
 
 permissions:
   contents: read
@@ -35,3 +37,34 @@ jobs:
 
       - name: Upload static Docusaurus site to S3
         run: aws s3 sync documentation/build s3://smart-forms-docs/docs --cache-control no-cache
+
+  deploy-storybook-s3:
+    name: Deploy Storybook to S3
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: arn:aws:iam::209248795938:role/SmartFormsReactAppDeployment
+          aws-region: ap-southeast-2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build application
+        run: npm run build-storybook -w packages/smart-forms-renderer
+
+      - name: Upload static Storybook site to S3
+        run: aws s3 sync packages/smart-forms-renderer/storybook-static s3://smart-forms-storybook/storybook

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItem.tsx

@@ -39,6 +39,7 @@ interface GroupItemProps
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
+  disableCardView?: boolean;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
@@ -53,6 +54,7 @@ function GroupItem(props: GroupItemProps) {
     qrItem,
     isRepeated,
     groupCardElevation,
+    disableCardView,
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
@@ -103,6 +105,7 @@ function GroupItem(props: GroupItemProps) {
       qrItemsByIndex={qrItemsByIndex}
       isRepeated={isRepeated}
       groupCardElevation={groupCardElevation}
+      disableCardView={disableCardView}
       tabIsMarkedAsComplete={tabIsMarkedAsComplete}
       tabs={tabs}
       currentTabIndex={currentTabIndex}

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupItemView.tsx

@@ -50,6 +50,7 @@ interface GroupItemViewProps
   childQItems: QuestionnaireItem[];
   qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
   groupCardElevation: number;
+  disableCardView?: boolean;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
@@ -65,6 +66,7 @@ function GroupItemView(props: GroupItemViewProps) {
     qrItemsByIndex,
     isRepeated,
     groupCardElevation,
+    disableCardView,
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
@@ -133,6 +135,37 @@ function GroupItemView(props: GroupItemViewProps) {
     );
   }
 
+  // Disable card view - currently only available via disablePageCardView API
+  if (disableCardView) {
+    return (
+      <QGroupContainerBox
+        cardElevation={groupCardElevation}
+        isRepeated={isRepeated}
+        data-test="q-item-group-box">
+        {childQItems.map((qItem: QuestionnaireItem, i) => {
+          const qrItemOrItems = qrItemsByIndex[i];
+
+          return (
+            <GroupItemSwitcher
+              key={qItem.linkId}
+              qItem={qItem}
+              qrItemOrItems={qrItemOrItems}
+              groupCardElevation={groupCardElevation}
+              parentIsReadOnly={readOnly}
+              parentIsRepeatGroup={parentIsRepeatGroup}
+              parentRepeatGroupIndex={parentRepeatGroupIndex}
+              onQrItemChange={onQrItemChange}
+              onQrRepeatGroupChange={onQrRepeatGroupChange}
+            />
+          );
+        })}
+        {/* Next tab button at the end of each tab group */}
+        <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+        <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <QGroupContainerBox
       cardElevation={groupCardElevation}

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/PageButtonWrapper.tsx

@@ -6,6 +6,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import NextPageButton from './NextPageButton';
 import PreviousPageButton from './PreviousPageButton';
 import useNextAndPreviousVisiblePages from '../../../hooks/useNextAndPreviousVisiblePages';
+import { useRendererStylingStore } from '../../../stores/rendererStylingStore';
 
 interface PageButtonsWrapperProps {
   currentPageIndex?: number;
@@ -16,6 +17,7 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
   const { currentPageIndex, pages } = props;
 
   const switchPage = useQuestionnaireStore.use.switchPage();
+  const disablePageButtons = useRendererStylingStore.use.disablePageButtons();
 
   const { previousPageIndex, nextPageIndex, numOfVisiblePages } = useNextAndPreviousVisiblePages(
     currentPageIndex,
@@ -47,10 +49,16 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
     window.scrollTo(0, 0);
   }
 
+  // No pages defined, do not render page buttons
   if (pagesNotDefined) {
     return null;
   }
 
+  // Disable page buttons - currently only available via disableTabButtons API
+  if (disablePageButtons) {
+    return null;
+  }
+
   const previousPageButtonHidden = previousPageIndex === null;
   const nextPageButtonHidden = nextPageIndex === null;
 

packages/smart-forms-renderer/src/components/Renderer/BaseRenderer.tsx

@@ -22,9 +22,9 @@ import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stores';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrItemsInGroup } from '../../utils/qrItem';
-import { everyIsPages } from '../../utils/page';
+import { isPage } from '../../utils/page';
 import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
-import FormTopLevelPage from './FormTopLevelPage';
+import FormBodyPaginated from './FormBodyPaginated';
 import { Container } from '@mui/material';
 
 /**
@@ -76,13 +76,13 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
-  const everyItemIsPage = everyIsPages(topLevelQItems);
+  const formIsPaginated = topLevelQItems.some((i) => isPage(i));
 
-  if (everyItemIsPage) {
+  if (formIsPaginated) {
     return (
       <Fade in={true} timeout={500}>
         <Container disableGutters maxWidth="xl" key={responseKey}>
-          <FormTopLevelPage
+          <FormBodyPaginated
             topLevelQItems={topLevelQItems}
             topLevelQRItems={topLevelQRItemsByIndex}
             parentIsReadOnly={readOnly}