Add inline description list variant

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

@@ -7,26 +7,39 @@
         clear: both;
         float: left;
         font-weight: $font-weight-bold;
-
-        &:not(:first-child) {
-            margin-top: 0.5rem;
-        }
+        word-break: break-word;
     }
 
     &__value {
         float: right;
         margin-left: 0; /* As normalize adds a 40px left margin */
+        word-break: break-word;
 
-        &:not(:nth-of-type(1)) {
+        & + & {
             @include mq(m) {
-                margin-top: 0.5rem;
+                margin-top: 0;
             }
         }
+    }
 
-        & + & {
-            @include mq(m) {
-                margin-top: 0;
+    &__item {
+        &:not(:first-child) {
+            .ons-description-list__term {
+                @extend .ons-u-mt-2xs;
+            }
+            .ons-description-list__value:nth-of-type(1) {
+                @include mq(m) {
+                    margin-top: 0.5rem;
+                }
             }
         }
     }
+
+    &--inline {
+        @include mq(l) {
+            grid-template-columns: repeat(3, 1fr);
+            display: grid;
+            gap: 0.5rem 2.5rem;
+        }
+    }
 }

src/components/description-list/_macro-options.md

@@ -6,6 +6,7 @@
 | termCol              | number        | true     | The number of grid columns used for the `<dt>` elements above medium breakpoint                                |
 | descriptionCol       | number        | true     | The number of grid columns used for the `<dd>` elements above medium breakpoint                                |
 | itemsList            | array`<Item>` | true     | Settings for the terms and descriptions of the [description list items](#item)                                 |
+| variant              | string        | false    | Set to "inline" to display the discription list inline                                                         |
 
 ## Item
 

src/components/description-list/_macro.njk

@@ -1,23 +1,28 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ " " + params.classes if params.classes else "" }}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}{% if params.descriptionListLabel %}
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        {% if params.descriptionListLabel %}
             title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
         {% endif %}
     >
         {% for item in params.itemsList %}
-            {% if item.term | length %}
-                <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
-            {% endif %}
-            {% for descriptionItem in item.descriptions %}
-                {% if descriptionItem.description | length %}
-                    <dd
-                        {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
-                    >
-                        {{- descriptionItem.description -}}
-                    </dd>
+            <div class="ons-description-list__item">
+                {% if item.term | length %}
+                    <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
                 {% endif %}
-            {% endfor %}
+
+                {% for descriptionItem in item.descriptions %}
+                    {% if descriptionItem.description | length %}
+                        <dd
+                            {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
+                            class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
+                        >
+                            {{- descriptionItem.description -}}
+                        </dd>
+                    {% endif %}
+                {% endfor %}
+            </div>
         {% endfor %}
     </dl>
 {% endmacro %}

src/components/description-list/_macro.spec.js

@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
 
 import * as cheerio from 'cheerio';
-
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
@@ -87,6 +86,17 @@ describe('macro: description-list', () => {
         expect($('#example-id').length).toBe(1);
     });
 
+    it('has the provided variant style class when variant is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                variant: 'inline',
+            }),
+        );
+
+        expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true);
+    });
+
     it('has additionally provided style classes', () => {
         const $ = cheerio.load(
             renderComponent('description-list', {
@@ -117,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()).toBe('Survey:');
+        expect($($listElements[0]).text().trim()).toBe('Survey:');
 
         expect($listElements[1].tagName).toBe('dd');
         expect($($listElements[1]).attr('id')).toBe('description-1');
-        expect($($listElements[1]).text()).toBe('Bricks & Blocks');
+        expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks');
 
         expect($listElements[2].tagName).toBe('dt');
-        expect($($listElements[2]).text()).toBe('RU Refs:');
+        expect($($listElements[2]).text().trim()).toBe('RU Refs:');
 
         expect($listElements[3].tagName).toBe('dd');
         expect($($listElements[3]).attr('id')).toBe('description-2');
-        expect($($listElements[3]).text()).toBe('49900000118');
+        expect($($listElements[3]).text().trim()).toBe('49900000118');
 
         expect($listElements[4].tagName).toBe('dd');
         expect($($listElements[4]).attr('id')).toBe('description-3');
-        expect($($listElements[4]).text()).toBe('49300005832');
+        expect($($listElements[4]).text().trim()).toBe('49300005832');
     });
 
     it.each([

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

@@ -0,0 +1,58 @@
+{% from "components/description-list/_macro.njk" import onsDescriptionList %}
+{{
+    onsDescriptionList({
+        "classes": "ons-u-mb-no",
+        "descriptionListLabel": "Information about this business and its survey requirements",
+        "variant": 'inline',
+        "termCol": "4",
+        "descriptionCol": "8",
+        "itemsList": [
+            {
+                "term": "Survey:",
+                "descriptions": [
+                    {
+                        "description": "Bricks & Blocks"
+                    }
+                ]
+            },
+            {
+                "term": "RU Refs:",
+                "descriptions": [
+                    {
+                        "description": "49900000118"
+                    },
+                    {
+                        "description": "49300005832"
+                    }
+                ]
+            },
+            {
+                "term": "Business:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets Ltd."
+                    }
+                ]
+            },
+            {
+                "term": "Trading as:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets"
+                    }
+                ]
+            },
+            {
+                "term": "To:",
+                "descriptions": [
+                    {
+                        "description": "Jacky Turner"
+                    },
+                    {
+                        "description": "Louise Goodland"
+                    }
+                ]
+            }
+        ]
+    })
+}}