address div issue

ONSdigital · Nov 29, 2024 · 6b953a8 · 6b953a8
1 parent 2d3c0d0
commit 6b953a8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 52 deletions.
diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -1,44 +1,45 @@
 .ons-description-list {
-    &__items {
+    &__items & {
         margin: 0 0 2rem;
-    }
 
-    &--inline {
-        @include mq(l) {
-            grid-template-columns: repeat(3, 1fr);
-            display: grid;
-            gap: 0.5rem 2.5rem;
-        }
-        .ons-description-list__term,
-        .ons-description-list__value {
-            overflow-wrap: normal;
+        &__term {
+            clear: both;
+            float: left;
+            font-weight: $font-weight-bold;
+            word-break: break-word;
         }
-    }
 
-    &__term {
-        clear: both;
-        float: left;
-        font-weight: $font-weight-bold;
+        &__value {
+            float: right;
+            margin-left: 0; /* As normalize adds a 40px left margin */
+            word-break: break-word;
 
-        &:not(:first-child) {
-            margin-top: 0.5rem;
+            & + & {
+                @include mq(m) {
+                    margin-top: 0;
+                }
+            }
         }
     }
 
-    &__value {
-        float: right;
-        margin-left: 0; /* As normalize adds a 40px left margin */
-
-        &:not(:nth-of-type(1)) {
-            @include mq(m) {
-                margin-top: 0.5rem;
+    &__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;
+                }
             }
         }
+    }
 
-        & + & {
-            @include mq(m) {
-                margin-top: 0;
-            }
+    &--inline {
+        @include mq(l) {
+            grid-template-columns: repeat(3, 1fr);
+            display: grid;
+            gap: 0.5rem 2.5rem;
         }
     }
 }
diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md
@@ -1,12 +1,12 @@
-| Name                 | Type            | Required | Description                                                                                                    |
-| -------------------- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
-| id                   | string          | false    | The HTML `id` for the description list (`<dl>`)                                                                |
-| classes              | string          | false    | Classes to apply to description list (`<dl>`)                                                                  |
-| descriptionListLabel | string          | false    | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list |
-| 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)                                 |
-| variants             | array or string | false    | An array of values or single value (string) to adjust the component using available variants:“inline”          |
+| Name                 | Type          | Required | Description                                                                                                    |
+| -------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
+| id                   | string        | false    | The HTML `id` for the description list (`<dl>`)                                                                |
+| classes              | string        | false    | Classes to apply to description list (`<dl>`)                                                                  |
+| descriptionListLabel | string        | false    | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list |
+| 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
 

diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -1,17 +1,15 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ " " + params.classes if params.classes else "" }}{{ " ons-description-list--inline" if params.variants == 'inline' else " ons-u-cf" }}"
+        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 %}
-            {% set descriptionItems %}
+            <div class="ons-description-list__item">
                 {% if item.term | length %}
-                    <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m ons-grid-flex--no-wrap">
-                        {{ item.term }}
-                    </dt>
+                    <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
                 {% endif %}
 
                 {% for descriptionItem in item.descriptions %}
@@ -24,13 +22,7 @@
                         </dd>
                     {% endif %}
                 {% endfor %}
-            {% endset %}
-
-            {% if params.variants == 'inline' %}
-                <div>{{ descriptionItems | safe }}</div>
-            {% else %}
-                {{ descriptionItems | safe }}
-            {% endif %}
+            </div>
         {% endfor %}
     </dl>
 {% endmacro %}
diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js
@@ -90,7 +90,7 @@ describe('macro: description-list', () => {
         const $ = cheerio.load(
             renderComponent('description-list', {
                 ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
-                variants: 'inline',
+                variant: 'inline',
             }),
         );
 

diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk
@@ -3,7 +3,7 @@
     onsDescriptionList({
         "classes": "ons-u-mb-no",
         "descriptionListLabel": "Information about this business and its survey requirements",
-        "variants": 'inline',
+        "variant": 'inline',
         "termCol": "4",
         "descriptionCol": "8",
         "itemsList": [