ET-372: ICD questions QA and wrap up (#174)

* feat(forms): add question description for ICD-10 api call * feat(forms): add separate label for icd search placeholder * fix: revert yarnrc changes * feat: bump ui-library version
awell-health · Nov 15, 2024 · 01f6cf3 · 01f6cf3
1 parent 45cd15e
commit 01f6cf3
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",

diff --git a/src/molecules/question/Question.tsx b/src/molecules/question/Question.tsx
@@ -408,28 +408,40 @@ export const QuestionData = ({
           defaultValue=""
           rules={{ required: config?.mandatory }}
           render={({ field: { onChange, value } }) => (
-            <Select
-              id={question.id}
-              value={value}
-              labels={{
-                questionLabel: question.title,
-                placeholder: labels.select?.search_placeholder,
-                noOptions: labels.select?.no_options,
-              }}
-              onChange={(data) => {
-                onChange(data)
-                onAnswerChange()
-              }}
-              type="single"
-              options={icdClassificationOptions ?? []}
-              mandatory={config?.mandatory}
-              showCount
-              filtering
-              onSearch={onIcdClassificationSearchChange}
-              loading={optionsLoading}
-              allowSearchAfterSelect={true}
-              allowEmptyOptionsList={true}
-            />
+            <>
+              <Select
+                id={question.id}
+                value={value}
+                labels={{
+                  questionLabel: question.title,
+                  placeholder: labels.select?.search_icd_placeholder,
+                  noOptions: labels.select?.no_options,
+                }}
+                onChange={(data) => {
+                  onChange(data)
+                  onAnswerChange()
+                }}
+                type="single"
+                options={icdClassificationOptions ?? []}
+                mandatory={config?.mandatory}
+                showCount
+                filtering
+                onSearch={onIcdClassificationSearchChange}
+                loading={optionsLoading}
+                allowSearchAfterSelect={true}
+                allowEmptyOptionsList={true}
+              />
+              <span className={classes.awell_question_description}>
+                {labels.select?.icd_10_catalogue_description}{' '}
+                <a
+                  href="https://icd.who.int/browse10/2019/en#/J00"
+                  target="blank"
+                >
+                  {labels.select?.icd_10_catalogue_link}
+                </a>
+                {'.'}
+              </span>
+            </>
           )}
         />
       )

diff --git a/src/molecules/question/question.module.scss b/src/molecules/question/question.module.scss
@@ -9,3 +9,17 @@
     margin-top: var(--awell-spacing-4);
   }
 }
+
+.awell_question_description {
+  display: block;
+  color: var(--awell-neutralMid400);
+  font-size: 0.875rem;
+  line-height: 20px;
+  margin-top: var(--awell-spacing-2);
+  font-weight: 400;
+
+  & > a {
+    color: var(--awell-blue400);
+    text-decoration: underline;
+  }
+}
diff --git a/src/molecules/question/types.ts b/src/molecules/question/types.ts
@@ -6,8 +6,11 @@ export interface QuestionLabels {
   no_label: string
   select?: {
     search_placeholder: string
+    search_icd_placeholder: string
     no_options: string
     loading?: string
+    icd_10_catalogue_description?: string
+    icd_10_catalogue_link?: string
   }
   slider: {
     tooltip_guide: string