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

…re/165/analysis-hero
ONSdigital · Dec 5, 2024 · eca78b6 · eca78b6
2 parents 7bc83cd + 0680abb
commit eca78b6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/...nents_description-list_example-inline-description-list_0_document_0_desktop.png b/...nents_description-list_example-inline-description-list_0_document_0_desktop.png
diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -25,21 +25,48 @@
     &__item {
         &:not(:first-child) {
             .ons-description-list__term {
-                @extend .ons-u-mt-2xs;
+                margin-top: 0.5rem;
             }
+
             .ons-description-list__value:nth-of-type(1) {
-                @include mq(xs) {
+                @include mq(m) {
+                    margin-top: 0.5rem;
+                }
+            }
+            .ons-description-list--inline & .ons-description-list__value:nth-of-type(1) {
+                @include mq(l) {
+                    margin-top: 0;
+                }
+                @include mq(xs, l) {
                     margin-top: 0.5rem;
                 }
             }
+            .ons-description-list--inline & .ons-description-list__term {
+                @include mq(l) {
+                    margin-top: 0;
+                }
+            }
         }
     }
 
     &--inline {
         @include mq(l) {
-            grid-template-columns: repeat(3, 1fr);
             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;
+            }
+
+            .ons-description-list__term {
+                margin-right: 1rem;
+            }
         }
     }
 }
diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -10,17 +10,16 @@
             <div class="ons-description-list__item">
                 {% if item.term | length %}
                     <dt
-                        class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs' if params.variant == 'inline' else 'm' }}"
+                        class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else '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 }}@{{ 'xs' if params.variant == 'inline' else 'm' }}"
+                            class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                         >
                             {{- descriptionItem.description -}}
                         </dd>