Add inline description list variant (#3439)

Co-authored-by: rmccar <[email protected]>

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

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

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 description list inline                                                         |
 
 ## Item
 

src/components/description-list/_macro.njk

@@ -1,23 +1,31 @@
 {% 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"
+            <div class="ons-description-list__item">
+                {% if item.term | length %}
+                    <dt
+                        class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                     >
-                        {{- descriptionItem.description -}}
-                    </dd>
+                        {{- 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 }}@{{ 'xs@l' if params.variant == 'inline' else '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', {

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"
+                    }
+                ]
+            }
+        ]
+    })
+}}