Add support for "Help" questionnaire item control

[williamito]

Is your feature request related to a problem? Please describe. Both NLM Form Builder (https://lhcformbuilder.nlm.nih.gov/beta/) and Structor (https://formdesigner.helsenorgelab.no/) support adding help text via the questionnaire item control type "help" (see value-set http://hl7.org/fhir/R4/valueset-questionnaire-item-control.html). In addition, many LOINC forms loadable from the NLM Form Builder use help text. We should also prioritize supporting this control to have parity with these two popular tools.

Here's an example in use:

"item": [
  {
    "text": "Sex of the patient, created for HL7 v3's \"Administrative gender\" concept, which represents the sex of a person used for adminstrative purposes (such as registering a patient in a hospital EHR). [https://www.hl7.org/fhir/v3/AdministrativeGender/index.html]",
    "type": "display",
    "linkId": "/72143-1-help",
    "extension": [
      {
        "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
        "valueCodeableConcept": {
          "coding": [
            {
              "system": "http://hl7.org/fhir/questionnaire-item-control",
              "code": "help",
              "display": "Help-Button"
            }
          ],
          "text": "Help-Button"
        }
      }
    ]
  }
]

Describe the solution you'd like Support in SDC Library for the "help" item control type.

[shelaghm]

Here are some mocks for this.

(1) Place the 'question' help button next to the 'instructions' text field. (2) Show the help text in a container that appears below the instructional text. Click on help button icon again to hide the text. (3) Place the 'questionnaire' help button in the top bar (default location for help button in Android)

[fredhersch]

Thanks @williamito for flagging this. @shelaghm any preference or best practice we can draw on for which approach should be prioritized?

@Tarun-Bhardwaj let's discuss priority of this

[fredhersch]

@jingtang10 can you help us to estimate the size of this. Ty

[santosh-pingle]

in progress.

[santosh-pingle]

Here are some mocks for this.

(1) Place the 'question' help button next to the 'instructions' text field. (2) Show the help text in a container that appears below the instructional text. Click on help button icon again to hide the text. (3) Place the 'questionnaire' help button in the top bar (default location for help button in Android)

@shelaghm can you please share figma link on chat for Help button v2(in-line)?

[shelaghm]

@santosh-pingle you can download the SVG for help icon here (it is open source) https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Ahelp%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048

[santosh-pingle]

@shelaghm Can you please also update style for below items

• Help
• Only one answer can be selected. If none apply ...
• Background drawable where above 2 texts are shown.