restructure

ONSdigital · Nov 28, 2024 · ecbc90b · ecbc90b
1 parent 52c7272
commit ecbc90b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 36 deletions.
diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -1,40 +1,41 @@
 .ons-description-list {
-    &__items {
+    &__items & {
         margin: 0 0 2rem;
 
-        &.ons-description-list--horizontal {
-            @media (width >= 980px) {
-                grid-template-columns: repeat(3, 1fr);
-                display: grid;
-                gap: 0.5rem 2.5rem;
+        &__term {
+            clear: both;
+            float: left;
+            font-weight: $font-weight-bold;
+            white-space: nowrap;
+
+            &:not(:first-child) {
+                margin-top: 0.5rem;
             }
         }
-    }
 
-    &__term {
-        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 */
 
-    &__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;
+                }
+            }
 
-        &:not(:nth-of-type(1)) {
-            @include mq(m) {
-                margin-top: 0.5rem;
+            & + & {
+                @include mq(m) {
+                    margin-top: 0;
+                }
             }
         }
+    }
 
-        & + & {
-            @include mq(m) {
-                margin-top: 0;
-            }
+    &--inline {
+        @media (width >= 980px) {
+            grid-template-columns: repeat(3, 1fr);
+            display: grid;
+            gap: 0.5rem 2.5rem;
         }
     }
 }
diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -1,13 +1,13 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items{{ " " + params.classes if params.classes else "" }}{{ " ons-description-list--horizontal" if params.horizontal else " ons-grid ons-grid--gutterless 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">{{ item.term }}</dt>
                 {% endif %}
@@ -22,13 +22,7 @@
                         </dd>
                     {% endif %}
                 {% endfor %}
-            {% endset %}
-
-            {% if params.horizontal %}
-                <div>{{ descriptionItems | safe }}</div>
-            {% else %}
-                {{ descriptionItems | safe }}
-            {% endif %}
+            </div>
         {% endfor %}
     </dl>
 {% endmacro %}
diff --git a/src/components/description-list/example-description-list-horizontal.njk b/src/components/description-list/example-description-list-horizontal.njk
@@ -3,7 +3,7 @@
     onsDescriptionList({
         "classes": "ons-u-mb-no",
         "descriptionListLabel": "Information about this business and its survey requirements",
-        "horizontal": true,
+        "variant": "inline",
         "termCol": "4",
         "descriptionCol": "8",
         "itemsList": [