refactor to fit inline variant with figma design

ONSdigital · Dec 4, 2024 · 4fbc009 · 4fbc009
1 parent 224586e
commit 4fbc009
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 15 deletions.
diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss
@@ -22,24 +22,68 @@
         }
     }
 
+    &-inline-comma {
+        display: none;
+
+        @include mq(l) {
+            display: inline;
+            margin-right: 0.5rem;
+        }
+    }
+
     &__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-grid__col {
+                flex: none;
+                width: auto;
+                display: block;
+            }
+
+            .ons-description-list__value {
+                float: none;
+                grid-column: auto;
+            }
+
+            .ons-description-list__values {
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .ons-description-list__term {
+                margin-right: 1rem;
+                grid-column: auto;
+            }
         }
     }
 }
diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk
@@ -10,22 +10,26 @@
             <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' }}"
-                        >
-                            {{- descriptionItem.description -}}
-                        </dd>
-                    {% endif %}
-                {% endfor %}
+                <span class="ons-description-list__values">
+                    {% 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 -}}
+                                {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%}
+                                    <span class="ons-description-list-inline-comma">, </span>
+                                {% endif %}
+                            </dd>
+                        {% endif %}
+                    {% endfor %}
+                </span>
             </div>
         {% endfor %}
     </dl>