Add option to include links in description list

src/components/description-list/_description-list.scss

@@ -60,4 +60,8 @@
             }
         }
     }
+
+    &__link {
+        display: inline;
+    }
 }

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        |

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 %}

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([

src/components/description-list/example-inline-description-list.njk

@@ -49,7 +49,8 @@
                         "description": "Jacky Turner"
                     },
                     {
-                        "description": "Louise Goodland"
+                        "description": "Louise Goodland",
+                        'url': '#'
                     }
                 ]
             }