@aehrc/smart-forms-renderer 1.0.0-alpha.42.dev10 → 1.0.0-alpha.42.dev2

package/src/stories/assets/questionnaires/QInteger.ts

@@ -0,0 +1,119 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Questionnaire } from 'fhir/r4';
+import type { QuestionnaireResponse } from 'fhir/r4';
+
+export const qIntegerBasic: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'IntegerBasic',
+  name: 'IntegerBasic',
+  title: 'Integer Basic',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/components/integer/basic',
+  item: [
+    {
+      linkId: 'age',
+      type: 'integer',
+      repeats: false,
+      text: 'Age'
+    }
+  ]
+};
+
+export const qrIntegerBasicResponse: QuestionnaireResponse = {
+  resourceType: 'QuestionnaireResponse',
+  status: 'in-progress',
+  item: [
+    {
+      linkId: 'age',
+      text: 'Age',
+      answer: [
+        {
+          valueInteger: 40
+        }
+      ]
+    }
+  ],
+  questionnaire: 'https://smartforms.csiro.au/docs/components/integer/basic'
+};
+
+export const qIntegerCalculation: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'IntegerCalculation',
+  name: 'IntegerCalculation',
+  title: 'Integer Calculation',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/components/integer/calculation',
+  extension: [
+    {
+      url: 'http://hl7.org/fhir/StructureDefinition/variable',
+      valueExpression: {
+        name: 'length',
+        language: 'text/fhirpath',
+        expression: "item.where(linkId = 'length-controller').answer.value"
+      }
+    }
+  ],
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+          valueCoding: {
+            system: 'http://unitsofmeasure.org',
+            code: 'cm',
+            display: 'cm'
+          }
+        }
+      ],
+      linkId: 'length-controller',
+      text: 'Length (cm)',
+      type: 'integer',
+      repeats: false
+    },
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression',
+          valueExpression: {
+            language: 'text/fhirpath',
+            expression: '%length.power(2)'
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+          valueCoding: {
+            system: 'http://unitsofmeasure.org',
+            code: 'cm2',
+            display: 'cm^2'
+          }
+        }
+      ],
+      linkId: 'length-squared',
+      text: 'Length squared (cm^2)',
+      type: 'integer',
+      readOnly: true
+    }
+  ]
+};

package/src/stories/assets/questionnaires/QItemControlDisplay.ts

@@ -0,0 +1,558 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Questionnaire } from 'fhir/r4';
+
+export const qItemControlDisplayPrompt: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlDisplayPrompt',
+  name: 'ItemControlDisplayPrompt',
+  title: 'Item Control Display Prompt',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-15',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-display-prompt',
+  item: [
+    {
+      linkId: 'systolic-blood-pressure',
+      text: 'Systolic Blood Pressure',
+      type: 'decimal',
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'prompt'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'systolic-blood-pressure-prompt',
+          text: '75 or more',
+          type: 'display'
+        }
+      ]
+    }
+  ]
+};
+
+export const qItemControlDisplayUnit: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlDisplayUnit',
+  name: 'ItemControlDisplayUnit',
+  title: 'Item Control Display Unit',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-15',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-display-unit',
+  item: [
+    {
+      linkId: 'height',
+      text: 'Height',
+      type: 'decimal',
+      repeats: false,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'unit'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'height-unit',
+          text: 'cm',
+          type: 'display'
+        }
+      ]
+    }
+  ]
+};
+
+export const qItemControlDisplayLowerAndUpper: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlDisplayLowerAndUpper',
+  name: 'ItemControlDisplayLowerAndUpper',
+  title: 'Item Control Display Lower & Upper',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-display-lower-and-upper',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'slider'
+              }
+            ]
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/minValue',
+          valueInteger: 0
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/maxValue',
+          valueInteger: 10
+        }
+      ],
+      linkId: 'pain-measure',
+      text: 'Pain measure',
+      type: 'integer',
+      repeats: false,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'lower'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'pain-measure-lower',
+          text: 'No pain',
+          type: 'display'
+        },
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'upper'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'pain-measure-upper',
+          text: 'Unbearable pain',
+          type: 'display'
+        }
+      ]
+    }
+  ]
+};
+
+export const qItemControlDisplayFlyover: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlDisplayFlyover',
+  name: 'ItemControlDisplayFlyover',
+  title: 'Item Control Display Flyover',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-15',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-display-flyover',
+  item: [
+    {
+      linkId: 'children-details',
+      text: 'Children details (male)',
+      type: 'group',
+      repeats: false,
+      item: [
+        {
+          linkId: 'height',
+          text: 'Height',
+          type: 'decimal',
+          repeats: false,
+          required: true,
+          item: [
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system: 'http://hl7.org/fhir/questionnaire-item-control',
+                        code: 'unit'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'height-unit',
+              text: 'cm',
+              type: 'display'
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system: 'http://hl7.org/fhir/questionnaire-item-control',
+                        code: 'flyover'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'height-flyover',
+              text: 'The average 12-year old boy is 149.5 cm tall',
+              type: 'display'
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
+export const qItemControlDisplayContextDisplay: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlDisplayContextDisplay',
+  name: 'ItemControlDisplayContextDisplay',
+  title: 'Item Control Display Context Display',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-15',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-display-context-display',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                version: '1.0.0',
+                code: 'tab-container'
+              }
+            ]
+          }
+        }
+      ],
+      linkId: 'tab-container',
+      text: 'Tab Container',
+      type: 'group',
+      repeats: false,
+      item: [
+        {
+          linkId: 'tab-section-1',
+          text: 'Tab section 1',
+          type: 'group',
+          repeats: false,
+          item: [
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-in-progress-1',
+              text: 'In progress',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="In progress" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,\r\n\t\tPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM3NTc1NzUiIGQ9Im0xNS44NCAxMC4ybC0xLjAxIDEuMDFsLTIuMDctMi4wM2wxLjAxLTEuMDJjLjItLjIxLjU0LS4yMi43OCAwbDEuMjkgMS4yNWMuMjEuMjEuMjIuNTUgMCAuNzlNOCAxMy45MWw0LjE3LTQuMTlsMi4wNyAyLjA4bC00LjE2IDQuMkg4di0yLjA5TTEzIDJ2MmM0LjM5LjU0IDcuNSA0LjUzIDYuOTYgOC45MkE4LjAxNCA4LjAxNCAwIDAgMSAxMyAxOS44OHYyYzUuNS0uNiA5LjQ1LTUuNTQgOC44NS0xMS4wM0MyMS4zMyA2LjE5IDE3LjY2IDIuNSAxMyAybS0yIDBjLTEuOTYuMTgtMy44MS45NS01LjMzIDIuMkw3LjEgNS43NGMxLjEyLS45IDIuNDctMS40OCAzLjktMS42OHYtMk00LjI2IDUuNjdBOS44MSA5LjgxIDAgMCAwIDIuMDUgMTFoMmMuMTktMS40Mi43NS0yLjc3IDEuNjQtMy45TDQuMjYgNS42N00yLjA2IDEzYy4yIDEuOTYuOTcgMy44MSAyLjIxIDUuMzNsMS40Mi0xLjQzQTguMDAyIDguMDAyIDAgMCAxIDQuMDYgMTNoLTJtNSA1LjM3bC0xLjM5IDEuMzdBOS45OTQgOS45OTQgMCAwIDAgMTEgMjJ2LTJhOC4wMDIgOC4wMDIgMCAwIDEtMy45LTEuNjNoLS4wNFoiLz48L3N2Zz4=\' \r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-1',
+                  operator: '!=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-complete-1',
+              text: 'Complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="Section completed" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiMyZTdkMzIiIGQ9Ik0yMCAxMmE4IDggMCAwIDEtOCA4YTggOCAwIDAgMS04LThhOCA4IDAgMCAxIDgtOGMuNzYgMCAxLjUuMTEgMi4yLjMxbDEuNTctMS41N0E5LjgyMiA5LjgyMiAwIDAgMCAxMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBNNy45MSAxMC4wOEw2LjUgMTEuNUwxMSAxNkwyMSA2bC0xLjQxLTEuNDJMMTEgMTMuMTdsLTMuMDktMy4wOVoiLz48L3N2Zz4=\'\r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-1',
+                  operator: '=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              linkId: 'MarkComplete-1',
+              text: 'Mark section as complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div xmlns="http://www.w3.org/1999/xhtml">\r\n<head>\r\n    <style type="text/css">\r\n        .alert {\r\n            padding: 0.75rem;\r\n            margin-bottom: 1rem;\r\n            font-size: 0.875rem;\r\n            color: #2E7D32;\r\n            border-radius: 0.5rem;\r\n            background-color: #d5e5d6;\r\n            font-weight: 700;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div class="alert">Mark section as complete</div>\r\n</body>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'boolean',
+              repeats: false
+            }
+          ]
+        },
+        {
+          linkId: 'tab-section-2',
+          text: 'Tab section 2',
+          type: 'group',
+          repeats: false,
+          item: [
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-in-progress-2',
+              text: 'In progress',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="In progress" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,\r\n\t\tPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM3NTc1NzUiIGQ9Im0xNS44NCAxMC4ybC0xLjAxIDEuMDFsLTIuMDctMi4wM2wxLjAxLTEuMDJjLjItLjIxLjU0LS4yMi43OCAwbDEuMjkgMS4yNWMuMjEuMjEuMjIuNTUgMCAuNzlNOCAxMy45MWw0LjE3LTQuMTlsMi4wNyAyLjA4bC00LjE2IDQuMkg4di0yLjA5TTEzIDJ2MmM0LjM5LjU0IDcuNSA0LjUzIDYuOTYgOC45MkE4LjAxNCA4LjAxNCAwIDAgMSAxMyAxOS44OHYyYzUuNS0uNiA5LjQ1LTUuNTQgOC44NS0xMS4wM0MyMS4zMyA2LjE5IDE3LjY2IDIuNSAxMyAybS0yIDBjLTEuOTYuMTgtMy44MS45NS01LjMzIDIuMkw3LjEgNS43NGMxLjEyLS45IDIuNDctMS40OCAzLjktMS42OHYtMk00LjI2IDUuNjdBOS44MSA5LjgxIDAgMCAwIDIuMDUgMTFoMmMuMTktMS40Mi43NS0yLjc3IDEuNjQtMy45TDQuMjYgNS42N00yLjA2IDEzYy4yIDEuOTYuOTcgMy44MSAyLjIxIDUuMzNsMS40Mi0xLjQzQTguMDAyIDguMDAyIDAgMCAxIDQuMDYgMTNoLTJtNSA1LjM3bC0xLjM5IDEuMzdBOS45OTQgOS45OTQgMCAwIDAgMTEgMjJ2LTJhOC4wMDIgOC4wMDIgMCAwIDEtMy45LTEuNjNoLS4wNFoiLz48L3N2Zz4=\' \r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-2',
+                  operator: '!=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-complete-2',
+              text: 'Complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="Section completed" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiMyZTdkMzIiIGQ9Ik0yMCAxMmE4IDggMCAwIDEtOCA4YTggOCAwIDAgMS04LThhOCA4IDAgMCAxIDgtOGMuNzYgMCAxLjUuMTEgMi4yLjMxbDEuNTctMS41N0E5LjgyMiA5LjgyMiAwIDAgMCAxMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBNNy45MSAxMC4wOEw2LjUgMTEuNUwxMSAxNkwyMSA2bC0xLjQxLTEuNDJMMTEgMTMuMTdsLTMuMDktMy4wOVoiLz48L3N2Zz4=\'\r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-2',
+                  operator: '=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              linkId: 'MarkComplete-2',
+              text: 'Mark section as complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div xmlns="http://www.w3.org/1999/xhtml">\r\n<head>\r\n    <style type="text/css">\r\n        .alert {\r\n            padding: 0.75rem;\r\n            margin-bottom: 1rem;\r\n            font-size: 0.875rem;\r\n            color: #2E7D32;\r\n            border-radius: 0.5rem;\r\n            background-color: #d5e5d6;\r\n            font-weight: 700;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div class="alert">Mark section as complete</div>\r\n</body>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'boolean',
+              repeats: false
+            }
+          ]
+        },
+        {
+          linkId: 'tab-section-3',
+          text: 'Tab section 3',
+          type: 'group',
+          repeats: false,
+          item: [
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-in-progress-3',
+              text: 'In progress',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="In progress" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,\r\n\t\tPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM3NTc1NzUiIGQ9Im0xNS44NCAxMC4ybC0xLjAxIDEuMDFsLTIuMDctMi4wM2wxLjAxLTEuMDJjLjItLjIxLjU0LS4yMi43OCAwbDEuMjkgMS4yNWMuMjEuMjEuMjIuNTUgMCAuNzlNOCAxMy45MWw0LjE3LTQuMTlsMi4wNyAyLjA4bC00LjE2IDQuMkg4di0yLjA5TTEzIDJ2MmM0LjM5LjU0IDcuNSA0LjUzIDYuOTYgOC45MkE4LjAxNCA4LjAxNCAwIDAgMSAxMyAxOS44OHYyYzUuNS0uNiA5LjQ1LTUuNTQgOC44NS0xMS4wM0MyMS4zMyA2LjE5IDE3LjY2IDIuNSAxMyAybS0yIDBjLTEuOTYuMTgtMy44MS45NS01LjMzIDIuMkw3LjEgNS43NGMxLjEyLS45IDIuNDctMS40OCAzLjktMS42OHYtMk00LjI2IDUuNjdBOS44MSA5LjgxIDAgMCAwIDIuMDUgMTFoMmMuMTktMS40Mi43NS0yLjc3IDEuNjQtMy45TDQuMjYgNS42N00yLjA2IDEzYy4yIDEuOTYuOTcgMy44MSAyLjIxIDUuMzNsMS40Mi0xLjQzQTguMDAyIDguMDAyIDAgMCAxIDQuMDYgMTNoLTJtNSA1LjM3bC0xLjM5IDEuMzdBOS45OTQgOS45OTQgMCAwIDAgMTEgMjJ2LTJhOC4wMDIgOC4wMDIgMCAwIDEtMy45LTEuNjNoLS4wNFoiLz48L3N2Zz4=\' \r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-3',
+                  operator: '!=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              extension: [
+                {
+                  url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                  valueCodeableConcept: {
+                    coding: [
+                      {
+                        system:
+                          'https://smartforms.csiro.au/ig/CodeSystem/QuestionnaireItemControlExtended',
+                        code: 'context-display'
+                      }
+                    ]
+                  }
+                }
+              ],
+              linkId: 'CD-complete-3',
+              text: 'Complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div title="Section completed" xmlns="http://www.w3.org/1999/xhtml">\r\n\t<div style="display: flex; flex-direction: row;">\r\n\t\t<img width=\'24\' height=\'24\' src=\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiMyZTdkMzIiIGQ9Ik0yMCAxMmE4IDggMCAwIDEtOCA4YTggOCAwIDAgMS04LThhOCA4IDAgMCAxIDgtOGMuNzYgMCAxLjUuMTEgMi4yLjMxbDEuNTctMS41N0E5LjgyMiA5LjgyMiAwIDAgMCAxMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBNNy45MSAxMC4wOEw2LjUgMTEuNUwxMSAxNkwyMSA2bC0xLjQxLTEuNDJMMTEgMTMuMTdsLTMuMDktMy4wOVoiLz48L3N2Zz4=\'\r\n\t\tstyle="align-self: center;"/>\r\n\t</div>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'display',
+              enableWhen: [
+                {
+                  question: 'MarkComplete-3',
+                  operator: '=',
+                  answerBoolean: true
+                }
+              ]
+            },
+            {
+              linkId: 'MarkComplete-3',
+              text: 'Mark section as complete',
+              _text: {
+                extension: [
+                  {
+                    url: 'http://hl7.org/fhir/StructureDefinition/rendering-xhtml',
+                    valueString:
+                      '<div xmlns="http://www.w3.org/1999/xhtml">\r\n<head>\r\n    <style type="text/css">\r\n        .alert {\r\n            padding: 0.75rem;\r\n            margin-bottom: 1rem;\r\n            font-size: 0.875rem;\r\n            color: #2E7D32;\r\n            border-radius: 0.5rem;\r\n            background-color: #d5e5d6;\r\n            font-weight: 700;\r\n        }\r\n    </style>\r\n</head>\r\n<body>\r\n<div class="alert">Mark section as complete</div>\r\n</body>\r\n</div>'
+                  }
+                ]
+              },
+              type: 'boolean',
+              repeats: false
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};