@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

package/src/components/FormComponents/DateTimeItem/DateTimeItem.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -29,21 +30,22 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import DateTimeField from './DateTimeField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateTimeItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function DateTimeItem(props: DateTimeItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let dateTimeString: string | null = null;
@@ -81,7 +83,7 @@ function DateTimeItem(props: DateTimeItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-date-time-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DateTimeField
           value={dateTimeDayJs}
           displayPrompt={displayPrompt}

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -19,6 +19,7 @@ import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -37,25 +38,26 @@ import {
 import { getDecimalPrecision } from '../../../utils/itemControl';
 import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function DecimalItem(props: DecimalItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const precision = getDecimalPrecision(qItem);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -132,7 +134,7 @@ function DecimalItem(props: DecimalItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-decimal-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DecimalField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/DisplayItem/DisplayInstructions.tsx

@@ -21,14 +21,18 @@ import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
 
 interface DisplayInstructionsProps {
   displayInstructions: string;
+  readOnly: boolean;
 }
 
 const DisplayInstructions = memo(function DisplayInstructions(props: DisplayInstructionsProps) {
-  const { displayInstructions } = props;
+  const { displayInstructions, readOnly } = props;
 
   return displayInstructions ? (
     <DisplayInstructionsWrapper>
-      <Typography variant="caption" fontSize={10.5}>
+      <Typography
+        variant="caption"
+        fontSize={10.5}
+        color={readOnly ? 'text.secondary' : 'text.primary'}>
         {displayInstructions}
       </Typography>
     </DisplayInstructionsWrapper>

package/src/components/FormComponents/DisplayItem/DisplayItem.tsx

@@ -18,7 +18,7 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import { isSpecificItemControl } from '../../../utils/itemControl';
+import { isSpecificItemControl } from '../../../utils';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
 interface DisplayItemProps {
@@ -35,7 +35,7 @@ const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <LabelWrapper qItem={qItem} />
+      <LabelWrapper qItem={qItem} readOnly={false} />
     </FullWidthFormComponentBox>
   );
 });

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -17,7 +17,10 @@
 
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
@@ -28,15 +31,18 @@ import Typography from '@mui/material/Typography';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface GridGroupProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface GridGroupProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   groupCardElevation: number;
 }
 
 function GridGroup(props: GridGroupProps) {
-  const { qItem, qrItem, groupCardElevation, onQrItemChange } = props;
+  const { qItem, qrItem, groupCardElevation, parentIsReadOnly, onQrItemChange } = props;
 
   const qRowItems = qItem.item;
   const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
@@ -49,6 +55,7 @@ function GridGroup(props: GridGroupProps) {
     [qRowItems]
   );
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -73,8 +80,8 @@ function GridGroup(props: GridGroupProps) {
   return (
     <>
       <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-        <Typography fontSize={13} variant="h6">
-          <LabelWrapper qItem={qItem} />
+        <Typography fontSize={13} variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Typography>
         <Divider sx={{ my: 1 }} light />
 
@@ -84,6 +91,7 @@ function GridGroup(props: GridGroupProps) {
             qrItems={qrRowItems}
             qItemsIndexMap={qItemsIndexMap}
             columnLabels={columnLabels}
+            parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={handleRowChange}
           />
         </TableContainer>

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -18,6 +18,7 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
 import SingleItem from '../SingleItem/SingleItem';
@@ -25,7 +26,9 @@ import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import Typography from '@mui/material/Typography';
 import useHidden from '../../../hooks/useHidden';
 
-interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface GridRowProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   columnLabels: string[];
@@ -33,7 +36,7 @@ interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireRespons
 }
 
 function GridRow(props: GridRowProps) {
-  const { qItem, qrItem, columnLabels, numOfColumns, onQrItemChange } = props;
+  const { qItem, qrItem, columnLabels, numOfColumns, parentIsReadOnly, onQrItemChange } = props;
 
   const rowQItems = qItem.item;
   const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
@@ -82,6 +85,7 @@ function GridRow(props: GridRowProps) {
               qrItem={cellQrItem}
               isRepeated={true}
               isTabled={true}
+              parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}
             />
           </GridAnswerTableCell>

package/src/components/FormComponents/GridGroup/GridTable.tsx

@@ -26,8 +26,11 @@ import GridRow from './GridRow';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 
-interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface GridTableProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItems: QuestionnaireItem[];
   qrItems: QuestionnaireResponseItem[];
   qItemsIndexMap: Record<string, number>;
@@ -35,7 +38,7 @@ interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireRespo
 }
 
 function GridTable(props: GridTableProps) {
-  const { qItems, qrItems, qItemsIndexMap, columnLabels, onQrItemChange } = props;
+  const { qItems, qrItems, qItemsIndexMap, columnLabels, parentIsReadOnly, onQrItemChange } = props;
 
   const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
     getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
@@ -68,6 +71,7 @@ function GridTable(props: GridTableProps) {
                 qrItem={qrItem}
                 columnLabels={columnLabels}
                 numOfColumns={numOfColumns}
+                parentIsReadOnly={parentIsReadOnly}
                 onQrItemChange={onQrItemChange}
               />
             </TableRow>

package/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -18,20 +18,21 @@
 import React, { memo } from 'react';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import { QGroupHeadingTypography } from '../Typography.styles';
+import Typography from '@mui/material/Typography';
 import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';
 import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
-import LabelText from '../ItemParts/ItemLabelText';
+import ItemLabelText from '../ItemParts/ItemLabelText';
 
 interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
+  readOnly: boolean;
   tabIsMarkedAsComplete?: boolean;
 }
 
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
-  const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
+  const { qItem, readOnly, tabIsMarkedAsComplete, isRepeated } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
@@ -39,12 +40,17 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
     return null;
   }
 
+  const isTabHeading = tabIsMarkedAsComplete !== undefined;
+
   return (
     <>
       <Box display="flex" alignItems="center" justifyContent="space-between">
-        <QGroupHeadingTypography variant="h6" isTabHeading={tabIsMarkedAsComplete !== undefined}>
-          <LabelText qItem={qItem} />
-        </QGroupHeadingTypography>
+        <Typography
+          variant="h6"
+          fontSize={isTabHeading ? 16 : 15}
+          color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
+          <ItemLabelText qItem={qItem} />
+        </Typography>
 
         <Box display="flex" columnGap={0.5}>
           {contextDisplayItems.map((item) => {

package/src/components/FormComponents/GroupItem/GroupItem.tsx

@@ -22,6 +22,7 @@ import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
@@ -31,17 +32,18 @@ import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
 import NextTabButtonWrapper from './NextTabButtonWrapper';
 import GroupItemSwitcher from './GroupItemSwitcher';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface GroupItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   groupCardElevation: number;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
-  goToNextTab?: (nextTabIndex: number) => unknown;
 }
 
 function GroupItem(props: GroupItemProps) {
@@ -53,11 +55,13 @@ function GroupItem(props: GroupItemProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    parentIsReadOnly,
     onQrItemChange
   } = props;
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -96,6 +100,7 @@ function GroupItem(props: GroupItemProps) {
       <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
         <GroupHeading
           qItem={qItem}
+          readOnly={readOnly}
           tabIsMarkedAsComplete={tabIsMarkedAsComplete}
           isRepeated={isRepeated}
         />
@@ -108,6 +113,7 @@ function GroupItem(props: GroupItemProps) {
               qItem={qItem}
               qrItemOrItems={qrItemOrItems}
               groupCardElevation={groupCardElevation}
+              parentIsReadOnly={readOnly}
               onQrItemChange={handleQrItemChange}
               onQrRepeatGroupChange={handleQrRepeatGroupChange}
             />

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx

@@ -17,12 +17,13 @@
 
 import React from 'react';
 import type {
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { isSpecificItemControl } from '../../../utils/itemControl';
-import QItemGroupTable from '../Tables/QItemGroupTable';
+import { isSpecificItemControl } from '../../../utils';
+import GroupTable from '../Tables/GroupTable';
 import RepeatGroup from '../RepeatGroup/RepeatGroup';
 import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
 import RepeatItem from '../RepeatItem/RepeatItem';
@@ -33,14 +34,22 @@ import GridGroup from '../GridGroup/GridGroup';
 
 interface GroupItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithQrRepeatGroupChangeHandler {
+    PropsWithQrRepeatGroupChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
 function GroupItemSwitcher(props: GroupItemSwitcherProps) {
-  const { qItem, qrItemOrItems, groupCardElevation, onQrItemChange, onQrRepeatGroupChange } = props;
+  const {
+    qItem,
+    qrItemOrItems,
+    groupCardElevation,
+    parentIsReadOnly,
+    onQrItemChange,
+    onQrRepeatGroupChange
+  } = props;
 
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -60,10 +69,11 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
 
     if (isSpecificItemControl(qItem, 'gtable')) {
       return (
-        <QItemGroupTable
+        <GroupTable
           qItem={qItem}
           qrItems={qrItems}
           groupCardElevation={groupCardElevation + 1}
+          parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
         />
       );
@@ -74,6 +84,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         qItem={qItem}
         qrItems={qrItems}
         groupCardElevation={groupCardElevation + 1}
+        parentIsReadOnly={parentIsReadOnly}
         onQrRepeatGroupChange={onQrRepeatGroupChange}
       />
     );
@@ -88,6 +99,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         qItem={qItem}
         qrItem={qrItem}
         groupCardElevation={groupCardElevation}
+        parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
     );
@@ -100,10 +112,11 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       // their qrItem array should always be empty
       if (isSpecificItemControl(qItem, 'gtable')) {
         return (
-          <QItemGroupTable
+          <GroupTable
             qItem={qItem}
             qrItems={[]}
             groupCardElevation={groupCardElevation + 1}
+            parentIsReadOnly={parentIsReadOnly}
             onQrRepeatGroupChange={onQrRepeatGroupChange}
           />
         );
@@ -114,12 +127,20 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
           qItem={qItem}
           qrItems={[]}
           groupCardElevation={groupCardElevation + 1}
+          parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
         />
       );
     }
 
-    return <RepeatItem qItem={qItem} qrItem={qrItem} onQrItemChange={onQrItemChange} />;
+    return (
+      <RepeatItem
+        qItem={qItem}
+        qrItem={qrItem}
+        parentIsReadOnly={parentIsReadOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
   }
 
   // if qItem is not a repeating question or is a checkbox
@@ -130,18 +151,20 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         qrItem={qrItem}
         isRepeated={false}
         groupCardElevation={groupCardElevation + 1}
+        parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
     );
   }
 
-  // Defaults to a normal QItemSwitcher
+  // Defaults to a single, non-group item
   return (
     <SingleItem
       qItem={qItem}
       qrItem={qrItem}
       isRepeated={false}
       isTabled={false}
+      parentIsReadOnly={parentIsReadOnly}
       onQrItemChange={onQrItemChange}
     />
   );

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -19,6 +19,7 @@ import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -33,24 +34,25 @@ import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedE
 import { parseValidInteger } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useNumberInput from '../../../hooks/useNumberInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface IntegerItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function IntegerItem(props: IntegerItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -120,7 +122,7 @@ function IntegerItem(props: IntegerItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-integer-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <IntegerField
           linkId={qItem.linkId}
           value={value}

package/src/components/FormComponents/Item.styles.ts

@@ -17,17 +17,12 @@
 
 import FormGroup from '@mui/material/FormGroup';
 import RadioGroup from '@mui/material/RadioGroup';
-import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 
-export const QFormGroup = styled(FormGroup)(() => ({
+export const StyledFormGroup = styled(FormGroup)(() => ({
   marginBottom: 4
 }));
 
-export const QRadioGroup = styled(RadioGroup)(() => ({
+export const StyledRadioGroup = styled(RadioGroup)(() => ({
   marginBottom: 4
 }));
-
-export const QItemTypography = styled(Typography)(() => ({
-  marginTop: 4
-}));

package/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx

@@ -26,19 +26,20 @@ interface ItemFieldGridProps {
   children: ReactNode;
   qItem: QuestionnaireItem;
   displayInstructions: string;
+  readOnly: boolean;
 }
 
 function ItemFieldGrid(props: ItemFieldGridProps) {
-  const { children, qItem, displayInstructions } = props;
+  const { children, qItem, displayInstructions, readOnly } = props;
 
   return (
     <Grid container columnSpacing={6}>
       <Grid item xs={5}>
-        <LabelWrapper qItem={qItem} />
+        <LabelWrapper qItem={qItem} readOnly={readOnly} />
       </Grid>
       <Grid item xs={7}>
         {children}
-        <DisplayInstructions displayInstructions={displayInstructions} />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
       </Grid>
     </Grid>
   );

package/src/components/FormComponents/ItemParts/ItemLabelText.tsx

@@ -18,17 +18,18 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
-import { QItemTypography } from '../Item.styles';
 import parse from 'html-react-parser';
 import Box from '@mui/material/Box';
 import ReactMarkdown from 'react-markdown';
+import Typography from '@mui/material/Typography';
 
 interface ItemLabelTextProps {
   qItem: QuestionnaireItem;
+  readOnly?: boolean;
 }
 
 const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
-  const { qItem } = props;
+  const { qItem, readOnly } = props;
 
   // parse xHTML if found
   const xHtmlString = getXHtmlString(qItem);
@@ -47,12 +48,16 @@ const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
     );
   }
 
-  // parse regular text
   if (qItem.type === 'group') {
     return <>{qItem.text}</>;
-  } else {
-    return <QItemTypography>{qItem.text}</QItemTypography>;
   }
+
+  // parse regular text
+  return (
+    <Typography color={readOnly ? 'text.secondary' : 'text.primary'} sx={{ mt: 0.5 }}>
+      {qItem.text}
+    </Typography>
+  );
 });
 
 export default ItemLabelText;

package/src/components/FormComponents/ItemParts/ItemLabelWrapper.tsx

@@ -24,16 +24,17 @@ import ItemLabelText from './ItemLabelText';
 
 interface LabelWrapperProps {
   qItem: QuestionnaireItem;
+  readOnly: boolean;
 }
 
 function ItemLabelWrapper(props: LabelWrapperProps) {
-  const { qItem } = props;
+  const { qItem, readOnly } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
-      <ItemLabelText qItem={qItem} />
+      <ItemLabelText qItem={qItem} readOnly={readOnly} />
 
       <Box display="flex" columnGap={0.5}>
         {contextDisplayItems.map((item) => {