enhancement: definition list support (#1739)

Closes #914

* Add support to inherit context templates from Nunjucks.
* Expose example of large variant (`vf-list-l`).
* Add tight variant (`vf-list--tight`).
* Add support for definition lists.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
* https://github.com/visual-framework/vf-core/issues/914

components/vf-list/CHANGELOG.md

+### 1.1.0
+
+* Add support to inherit context templates from Nunjucks.
+* Expose example of large variant (`vf-list-l`).
+* Add tight variant (`vf-list--tight`).
+* Add support for definition lists.
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
+* https://github.com/visual-framework/vf-core/issues/914
+
 ### 1.0.0
 
 * Initial stable release

components/vf-list/README.md

@@ -4,7 +4,7 @@
 
 ## About
 
-Classic html list `<li>` types: order, unordered, bulleted and inline.
+Classic html list `<li>` and `<dl>` types: order, unordered, bulleted, inline and definition.
 
 ## Install
 

components/vf-list/vf-list.config.yml

@@ -11,6 +11,23 @@ variants:
         - another list item
         - and another list item
         - yet another list item
+  - name: tight
+    context:
+      list_type: default
+      override_class: vf-list--tight
+      list:
+        - a list item
+        - another list item
+        - and another list item
+        - yet another list item
+  - name: large
+    context:
+      list_type: l
+      list:
+        - a list item
+        - another list item
+        - and another list item
+        - yet another list item
   - name: inline
     context:
       list_type: inline
@@ -35,3 +52,13 @@ variants:
         - another list item
         - and another list item
         - yet another list item
+  - name: definition
+    context:
+      list_type: definition
+      list:
+        - term: Beast of Bodmin
+          definition: A large feline inhabiting Bodmin Moor.
+        - term: Morgawr
+          definition: A sea serpent.
+        - term: Owlman
+          definition: A giant owl-like creature.

components/vf-list/vf-list.njk

-<ul
-{# You're using an ID? Really?? That'll go here #}
+{% spaceless %}
+{%- if context %}
+  {% set id = context.id %}
+  {% set list_type = context.list_type %}
+  {% set list = context.list %}
+  {% set definitions = context.definitions %}
+  {% set override_class = context.override_class %}
+{% endif -%}
+
+{# Determine type of element to use, if not explicitly set -#}
+{% if list_type == 'definition' %}
+  {% set parent_tag = 'dl' %}
+  {% set child_tag = 'dt' %}
+{% else %}
+  {% set parent_tag = 'ul' %}
+  {% set child_tag = 'li' %}
+{% endif %}
+
+<{{parent_tag}}
 {% if id %} id="{{-id-}}"{% endif %}
 
 class="vf-list
@@ -7,6 +24,19 @@ class="vf-list
   {%- if override_class %} | {{override_class}}{% endif -%}
 ">
   {% for item in list %}
-  <li class="vf-list__item">{{item}}</li>
+  {% if item.term %}
+    <{{child_tag}} class="vf-list__item vf-list--definition__term">
+    {{ item.term }}
+    </{{child_tag}}>
+    <dd class="vf-list__item vf-list--definition__details">
+    {{ item.definition }}
+    </dd>
+  {% else %}
+    <{{child_tag}} class="vf-list__item {{child_tag_class}}">
+      {{item}}
+    </{{child_tag}}>
+  {% endif %}
+
   {% endfor %}
-</ul>
+</{{parent_tag}}>
+{% endspaceless %}

components/vf-list/vf-list.scss

@@ -13,22 +13,40 @@
   @include list(vf-list);
   @include set-type(text-body--3);
 }
-.vf-list--l {
-  @include set-type(text-body--2);
-}
-
 .vf-list--ordered {
   @include list(vf-list--ordered, ordered);
 }
 .vf-list--unordered {
   @include list(vf-list--unordered, unordered);
 }
-
 .vf-list--inline  {
   @include list(vf-list--inline, inline);
   display: inline-block;
 }
 
+// VF definition lists
+// https://github.com/visual-framework/vf-core/issues/914
+.vf-list--definition {
+  @include list(vf-list--unordered, unordered);
+}
+.vf-list--definition__term {
+  @include set-type(text-heading--4);
+}
+.vf-list--definition__details {
+  @include set-type(text-body--2);
+}
+
+// List links
 .vf-list__link {
   @include inline-link;
 }
+
+// Utility style list modifiers
+.vf-list--l {
+  @include set-type(text-body--2);
+}
+.vf-list--tight {
+  .vf-list__item {
+    margin-bottom: map-get($vf-spacing-map, vf-spacing--100);
+  }
+}