Add option to include links in description list (#3464)

Co-authored-by: SriHV <[email protected]> Co-authored-by: SriHV <[email protected]>
ONSdigital · Jan 10, 2025 · 466335b · 466335b
1 parent a2cf3fd
commit 466335b
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 9 deletions.
diff --git a/...nents_description-list_example-inline-description-list_0_document_0_desktop.png b/...nents_description-list_example-inline-description-list_0_document_0_desktop.png
diff --git a/...onents_description-list_example-inline-description-list_0_document_1_tablet.png b/...onents_description-list_example-inline-description-list_0_document_1_tablet.png
diff --git a/...onents_description-list_example-inline-description-list_0_document_2_mobile.png b/...onents_description-list_example-inline-description-list_0_document_2_mobile.png
diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md
@@ -21,3 +21,4 @@
 | ----------- | ------ | -------- | ----------------------------------------------------- |
 | id          | string | false    | The HTML `id` for the description of the related term |
 | description | string | true     | The value of the description of the related term      |
+| url         | string | false    | The url of the description of the related term        |
diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -21,7 +21,13 @@
                             {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
                             class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                         >
-                            {{- descriptionItem.description -}}
+                            {%- if descriptionItem.url -%}
+                                <a class="ons-description-list__link" href="{{ descriptionItem.url }}">
+                                    {{- descriptionItem.description -}}
+                                </a>
+                            {%- else -%}
+                                {{- descriptionItem.description -}}
+                            {%- endif -%}
                         </dd>
                     {% endif %}
                 {% endfor %}

diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js
@@ -30,6 +30,7 @@ const EXAMPLE_DESCRIPTION_LIST_FULL = {
                 {
                     id: 'description-3',
                     description: '49300005832',
+                    url: '#',
                 },
             ],
         },
@@ -142,7 +143,9 @@ describe('macro: description-list', () => {
 
         expect($listElements[4].tagName).toBe('dd');
         expect($($listElements[4]).attr('id')).toBe('description-3');
-        expect($($listElements[4]).text()).toBe('49300005832');
+        const $link = $($listElements[4]).find('a');
+        expect($link.attr('href')).toBe('#');
+        expect($link.text()).toBe('49300005832');
     });
 
     it.each([

diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk
@@ -49,7 +49,8 @@
                         "description": "Jacky Turner"
                     },
                     {
-                        "description": "Louise Goodland"
+                        "description": "Louise Goodland",
+                        'url': '#'
                     }
                 ]
             }