Merge branch 'feature/189/add-horizontal-description-list' into featu…

…re/165/analysis-hero
ONSdigital · Dec 6, 2024 · a5ba67b · a5ba67b
2 parents 1140c34 + ff0de57
commit a5ba67b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 16 deletions.
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/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -7,13 +7,12 @@
         clear: both;
         float: left;
         font-weight: $font-weight-bold;
-        word-wrap: break-word;
+        white-space: nowrap;
     }
 
     &__value {
         float: right;
         margin-left: 0; /* As normalize adds a 40px left margin */
-        word-wrap: break-word;
 
         & + & {
             @include mq(xs) {
@@ -50,6 +49,9 @@
     }
 
     &--inline {
+        .ons-description-list__term {
+            padding-right: 1rem;
+        }
         @include mq(l) {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -63,10 +65,6 @@
                 display: grid;
                 grid-template-columns: auto 1fr;
             }
-
-            .ons-description-list__term {
-                margin-right: 1rem;
-            }
         }
     }
 }
diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -12,7 +12,7 @@
                     <dt
                         class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                     >
-                        {{ item.term }}
+                        {{- item.term -}}
                     </dt>
                 {% endif %}
                 {% for descriptionItem in item.descriptions %}

diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js
@@ -127,22 +127,22 @@ describe('macro: description-list', () => {
         const $listElements = $('.ons-description-list__term, .ons-description-list__value');
 
         expect($listElements[0].tagName).toBe('dt');
-        expect($($listElements[0]).text().trim()).toBe('Survey:');
+        expect($($listElements[0]).text()).toBe('Survey:');
 
         expect($listElements[1].tagName).toBe('dd');
         expect($($listElements[1]).attr('id')).toBe('description-1');
-        expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks');
+        expect($($listElements[1]).text()).toBe('Bricks & Blocks');
 
         expect($listElements[2].tagName).toBe('dt');
-        expect($($listElements[2]).text().trim()).toBe('RU Refs:');
+        expect($($listElements[2]).text()).toBe('RU Refs:');
 
         expect($listElements[3].tagName).toBe('dd');
         expect($($listElements[3]).attr('id')).toBe('description-2');
-        expect($($listElements[3]).text().trim()).toBe('49900000118');
+        expect($($listElements[3]).text()).toBe('49900000118');
 
         expect($listElements[4].tagName).toBe('dd');
         expect($($listElements[4]).attr('id')).toBe('description-3');
-        expect($($listElements[4]).text().trim()).toBe('49300005832');
+        expect($($listElements[4]).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
@@ -4,8 +4,8 @@
         "classes": "ons-u-mb-no",
         "descriptionListLabel": "Information about this business and its survey requirements",
         "variant": 'inline',
-        "termCol": "4",
-        "descriptionCol": "8",
+        "termCol": "3",
+        "descriptionCol": "9",
         "itemsList": [
             {
                 "term": "Survey:",