Add documentation for rendering-style extension

aehrc · Jun 3, 2024 · dd4dc4b · dd4dc4b
1 parent cd61e10
commit dd4dc4b
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 2 deletions.
diff --git a/documentation/docs/api/sdc-populate/functions/populate.md b/documentation/docs/api/sdc-populate/functions/populate.md
@@ -1,6 +1,6 @@
 # Function: populate()
 
-> **populate**(`parameters`, `fetchResourceCallback`, `requestConfig`): `Promise` \<[`OutputParameters`](../interfaces/OutputParameters.md) \| `OperationOutcome`\>
+> **populate**(`parameters`, `fetchResourceCallback`, `fetchResourceRequestConfig`, `terminologyCallback`?, `terminologyRequestConfig`?): `Promise` \<[`OutputParameters`](../interfaces/OutputParameters.md) \| `OperationOutcome`\>
 
 Executes the SDC Populate Questionnaire operation - $populate.
 Input and output specific parameters conformant to the SDC populate specification. Can be deployed as a $populate microservice.
@@ -13,7 +13,9 @@ This function expects a nice set of populate input parameters to go. If you do y
 | :------ | :------ |
 | `parameters` | [`InputParameters`](../interfaces/InputParameters.md) |
 | `fetchResourceCallback` | [`FetchResourceCallback`](../interfaces/FetchResourceCallback.md) |
-| `requestConfig` | `any` |
+| `fetchResourceRequestConfig` | `any` |
+| `terminologyCallback`? | [`FetchResourceCallback`](../interfaces/FetchResourceCallback.md) |
+| `terminologyRequestConfig`? | `any` |
 
 ## Returns
 

diff --git a/documentation/docs/api/sdc-populate/interfaces/PopulateQuestionnaireParams.md b/documentation/docs/api/sdc-populate/interfaces/PopulateQuestionnaireParams.md
@@ -42,6 +42,22 @@ Any request configuration to be passed to the fetchResourceCallback i.e. headers
 
 ***
 
+### terminologyCallback?
+
+> `optional` **terminologyCallback**: [`FetchResourceCallback`](FetchResourceCallback.md)
+
+A callback function to fetch terminology resources, optional
+
+***
+
+### terminologyRequestConfig?
+
+> `optional` **terminologyRequestConfig**: `any`
+
+Any request configuration to be passed to the terminologyCallback i.e. headers, auth etc., optional
+
+***
+
 ### user?
 
 > `optional` **user**: `Practitioner`

diff --git a/documentation/docs/components/display.mdx b/documentation/docs/components/display.mdx
@@ -30,6 +30,16 @@ import IframeContainer from '../../src/react/IframeContainer';
   />
 </IframeContainer>
 
+#### Calculations with [cqf-expression](/docs/sdc/calculations#cqf-expression) styled with [rendering-style](/docs/sdc/advanced/display#rendering-style)
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-itemtype-display--display-calculation-styled">
+  <iframe
+    src="http://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation-styled"
+    width="100%"
+    height="240"
+  />
+</IframeContainer>
+
 There are SDC advanced form rendering usages in the SDC [Display/Text Rendering](/docs/sdc/advanced/display) section.
 
 If there are any advanced usage scenarios you'd like to see, feel free to [let us know](https://github.com/aehrc/smart-forms/issues/new).

diff --git a/documentation/docs/sdc/advanced/display.mdx b/documentation/docs/sdc/advanced/display.mdx
@@ -155,6 +155,32 @@ This mechanic doesn't interact with the "Previous/Next Tab" buttons. You can sti
 
 :::
 
+### Rendering Style
+
+Allows styling of the item's label using CSS styles. This is useful when the item's label needs to be styled differently from the rest of the form to draw attention to it.
+
+For more information, refer to http://hl7.org/fhir/uv/sdc/rendering.html#rendering-style.
+
+#### Basic Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-sdc-8-1-1-advanced-text-appearance--rendering-style-boolean-checkbox">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-1-advanced-text-appearance--rendering-style-boolean-checkbox"
+    width="100%"
+    height="100"
+  />
+</IframeContainer>
+
+#### Calculations Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-itemtype-display--display-calculation-styled">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation-styled"
+    width="100%"
+    height="240"
+  />
+</IframeContainer>
+
 ### Rendering XHTML
 
 Provides an alternate representation of the item's label as a XHTML string. Allows for the rendering of styled text and base64-encoded images.

diff --git a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedTextApperance.ts b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QAdvancedTextApperance.ts
@@ -1,5 +1,34 @@
 import type { Questionnaire } from 'fhir/r4';
 
+export const qRenderingStyleBooleanCheckboxItem: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'RenderingStyle-1',
+  name: 'RenderingStyle-1',
+  title: 'Rendering Style 1',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/text/rendering-style-1',
+  item: [
+    {
+      linkId: 'mark-complete',
+      text: 'Mark section as complete',
+      _text: {
+        extension: [
+          {
+            url: 'http://hl7.org/fhir/StructureDefinition/rendering-style',
+            valueString:
+              'padding: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; color: #2E7D32; border-radius: 0.5rem; background-color: #d5e5d6; font-weight: 700;'
+          }
+        ]
+      },
+      type: 'boolean',
+      repeats: false
+    }
+  ]
+};
+
 export const qRenderingXhtmlBooleanCheckboxItem: Questionnaire = {
   resourceType: 'Questionnaire',
   id: 'RenderingXhtml-1',

diff --git a/packages/smart-forms-renderer/src/stories/assets/questionnaires/QDisplay.ts b/packages/smart-forms-renderer/src/stories/assets/questionnaires/QDisplay.ts
@@ -113,3 +113,85 @@ export const qDisplayCalculation: Questionnaire = {
     }
   ]
 };
+
+export const qDisplayCalculationStyled: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'DisplayCalculationStyled',
+  name: 'DisplayCalculationStyled',
+  title: 'Display Calculation Styled',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/components/display/calculation-styled',
+  extension: [
+    {
+      url: 'http://hl7.org/fhir/StructureDefinition/variable',
+      valueExpression: {
+        name: 'gender',
+        language: 'text/fhirpath',
+        expression: "item.where(linkId = 'gender-controller').answer.valueCoding.code"
+      }
+    }
+  ],
+  item: [
+    {
+      linkId: 'gender-controller',
+      text: 'Gender',
+      type: 'choice',
+      repeats: false,
+      answerOption: [
+        {
+          valueCoding: {
+            system: 'http://hl7.org/fhir/administrative-gender',
+            code: 'female',
+            display: 'Female'
+          }
+        },
+        {
+          valueCoding: {
+            system: 'http://hl7.org/fhir/administrative-gender',
+            code: 'male',
+            display: 'Male'
+          }
+        },
+        {
+          valueCoding: {
+            system: 'http://hl7.org/fhir/administrative-gender',
+            code: 'other',
+            display: 'Other'
+          }
+        },
+        {
+          valueCoding: {
+            system: 'http://hl7.org/fhir/administrative-gender',
+            code: 'unknown',
+            display: 'Unknown'
+          }
+        }
+      ]
+    },
+    {
+      linkId: 'gender-display',
+      type: 'display',
+      repeats: false,
+      _text: {
+        extension: [
+          {
+            url: 'http://hl7.org/fhir/StructureDefinition/cqf-expression',
+            valueExpression: {
+              language: 'text/fhirpath',
+              expression: "'Gender: '+ %gender"
+            }
+          },
+          {
+            url: 'http://hl7.org/fhir/StructureDefinition/rendering-style',
+            valueString:
+              'padding: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; color: #2E7D32; border-radius: 0.5rem; background-color: #d5e5d6; font-weight: 700;'
+          }
+        ]
+      },
+      text: ''
+    }
+  ]
+};