Issue/833

Conformance.md

@@ -51,11 +51,11 @@ View the source here: http://hl7.org/fhir/uv/sdc/expressions.html
 View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
-- [x] hidden
+- [x] hidden  
 - [ ] itemMedia
 - [ ] itemAnswerMedia
 
@@ -64,7 +64,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 

apps/smart-forms-app/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.2.0",
     "@aehrc/sdc-populate": "^2.2.0",
-    "@aehrc/smart-forms-renderer": "^0.33.1",
+    "@aehrc/smart-forms-renderer": "^0.34.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.16",

apps/smart-forms-app/src/theme/overrides/Accordion.ts

@@ -22,7 +22,7 @@ export default function Accordion(theme: Theme) {
     MuiAccordion: {
       styleOverrides: {
         root: {
-          boxShadow: theme.customShadows.z1,
+          boxShadow: theme.customShadows.card,
           borderRadius: Number(theme.shape.borderRadius) * 2,
           '&:before': {
             display: 'none'

documentation/docs/devUsage/renderer-overview.mdx

@@ -312,7 +312,7 @@ The button will look different in the output, but it still functions the same wa
   <TabItem value="output">
     <IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-testing-build-form-button-tester--build-form-button-tester">
       <iframe
-        src="http://localhost:6006/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
+        src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
         width="100%"
         height="130"
       />

documentation/docs/sdc/advanced/question.mdx

@@ -22,6 +22,7 @@ The extensions that fall under this subsection are:
 
 - [choiceOrientation](http://hl7.org/fhir/uv/sdc/rendering.html#choiceOrientation)
 - [sliderStepValue](http://hl7.org/fhir/uv/sdc/rendering.html#sliderStepValue)
+- [collapsible](http://hl7.org/fhir/uv/sdc/rendering.html#collapsible)
 - [entryFormat](http://hl7.org/fhir/uv/sdc/rendering.html#entryFormat)
 - [questionnaire-unit](https://hl7.org/fhir/extensions/StructureDefinition-questionnaire-unit.html)
 
@@ -209,6 +210,49 @@ SliderStepValue is only supported on the [itemControl](https://hl7.org/fhir/exte
   />
 </IframeContainer>
 
+### Collapsible
+
+Allows the child items of a group to be displayed in a collapsible form where items can be shown and hidden from the view. It is useful for particularly long questionnaires.
+
+Collapsible is only supported on **group** items.
+
+#### Default Open Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-open"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Default Closed Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-default-closed"
+    width="100%"
+    height="260"
+  />
+</IframeContainer>
+
+#### Nested Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/?path=/story/component-sdc-8-1-2-advanced-control-appearance--collapsible-nested">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance--collapsible-nested"
+    width="100%"
+    height="760"
+  />
+</IframeContainer>
+
+:::note
+
+When a parent of a child collapsible item is collapsed, its child items effectively stopped being rendered by React.
+This means the collapsible status of any child collapsible groups will return to the default values ("default-open" or "default-closed") as defined in the Questionnaire.
+
+:::
+
 ### EntryFormat
 
 Displays a "ghost" text in the field. Acts as a guide for the user on what to enter in the field.

documentation/docs/sdc/index.mdx

@@ -11,7 +11,7 @@ The SDC specification provides a set of guidance around the use of Questionnaire
 
 :::tip
 
-Before diving into this section, it might be worth reading the [usage examples guide](http://localhost:3000/docs/components#usage-examples) in the Components section.
+Before diving into this section, it might be worth reading the [usage examples guide](/docs/components#usage-examples) in the Components section.
 
 :::
 
@@ -54,7 +54,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 
 #### [Text Appearance](http://hl7.org/fhir/uv/sdc/rendering.html#extension-overview)
 
-- [ ] rendering-style
+- [x] rendering-style
 - [x] rendering-xhtml
 - [x] displayCategory
 - [x] openLabel
@@ -68,7 +68,7 @@ View the source here: http://hl7.org/fhir/uv/sdc/rendering.html
 - [x] choiceOrientation
 - [x] sliderStepValue
 - [ ] width
-- [ ] collapsible
+- [x] collapsible
 
 **Questionnaire `itemControl` Checklist**
 

documentation/package.json

@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@aehrc/smart-forms-renderer": "^0.33.1",
+    "@aehrc/smart-forms-renderer": "^0.34.0",
     "@docusaurus/core": "3.3.2",
     "@docusaurus/preset-classic": "3.3.2",
     "@docusaurus/theme-live-codeblock": "^3.3.2",

packages/smart-forms-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

packages/smart-forms-renderer/src/components/FormComponents/GroupItem/GroupAccordion.styles.ts

@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+
+export const GroupAccordion = styled(Accordion, {
+  shouldForwardProp: (prop) => prop !== 'elevation' && prop !== 'isRepeated'
+})<{ elevation: number; isRepeated: boolean }>(({ elevation, isRepeated }) => ({
+  paddingTop: '8px',
+  paddingBottom: '4px',
+  paddingLeft: elevation === 1 ? '10px' : '8px',
+  paddingRight: elevation === 1 ? '10px' : '8px',
+  marginBottom: isRepeated ? 0 : '28px'
+}));

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

@@ -44,15 +44,15 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
 
   return (
     <>
-      <Box display="flex" alignItems="center" justifyContent="space-between">
+      <Box display="flex" alignItems="center" width="100%">
         <Typography
           variant="h6"
           fontSize={isTabHeading ? 16 : 15}
           color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
           <ItemLabelText qItem={qItem} />
         </Typography>
-
-        <Box display="flex" columnGap={0.5}>
+        <Box flexGrow={1} />
+        <Box display="flex" columnGap={0.5} mx={1}>
           {contextDisplayItems.map((item) => {
             return <ContextDisplayItem key={item.linkId} displayItem={item} />;
           })}

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

@@ -19,7 +19,6 @@ import React, { useMemo } from 'react';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
-import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
@@ -29,11 +28,7 @@ import type {
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
 import useHidden from '../../../hooks/useHidden';
 import type { Tabs } from '../../../interfaces/tab.interface';
-import GroupHeading from './GroupHeading';
-import { GroupCard } from './GroupItem.styles';
-import TabButtonsWrapper from './TabButtonsWrapper';
-import GroupItemSwitcher from './GroupItemSwitcher';
-import useReadOnly from '../../../hooks/useReadOnly';
+import GroupItemView from './GroupItemView';
 
 interface GroupItemProps
   extends PropsWithQrItemChangeHandler,
@@ -65,7 +60,6 @@ function GroupItem(props: GroupItemProps) {
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
   if (itemIsHidden) {
     return null;
@@ -96,39 +90,21 @@ function GroupItem(props: GroupItemProps) {
   const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
 
   return (
-    <QGroupContainerBox
-      cardElevation={groupCardElevation}
+    <GroupItemView
+      qItem={qItem}
+      childQItems={qItems}
+      qrItemsByIndex={qrItemsByIndex}
       isRepeated={isRepeated}
-      data-test="q-item-group-box">
-      <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
-        <GroupHeading
-          qItem={qItem}
-          readOnly={readOnly}
-          tabIsMarkedAsComplete={tabIsMarkedAsComplete}
-          isRepeated={isRepeated}
-        />
-        {qItems.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={handleQrItemChange}
-              onQrRepeatGroupChange={handleQrRepeatGroupChange}
-            />
-          );
-        })}
-
-        {/* Next tab button at the end of each tab group */}
-        <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
-      </GroupCard>
-    </QGroupContainerBox>
+      groupCardElevation={groupCardElevation}
+      tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+      tabs={tabs}
+      currentTabIndex={currentTabIndex}
+      parentIsReadOnly={parentIsReadOnly}
+      parentIsRepeatGroup={parentIsRepeatGroup}
+      parentRepeatGroupIndex={parentRepeatGroupIndex}
+      onQrItemChange={handleQrItemChange}
+      onQrRepeatGroupChange={handleQrRepeatGroupChange}
+    />
   );
 }
 

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

@@ -18,10 +18,10 @@
 import React from 'react';
 import type {
   PropsWithParentIsReadOnlyAttribute,
+  PropsWithParentIsRepeatGroupAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsRepeatGroupAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../../utils';
 import GroupTable from '../Tables/GroupTable';
@@ -101,7 +101,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <GridGroup
         qItem={qItem}
         qrItem={qrItem ?? null}
-        groupCardElevation={groupCardElevation}
+        groupCardElevation={groupCardElevation + 1}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />