Unverified Commit e3c870be authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

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
parent bb942526
Pipeline #220712 failed with stages
in 3 minutes and 11 seconds
### 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 ### 1.0.0
* Initial stable release * Initial stable release
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
## About ## 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 ## Install
......
...@@ -11,6 +11,23 @@ variants: ...@@ -11,6 +11,23 @@ variants:
- another list item - another list item
- and another list item - and another list item
- yet 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 - name: inline
context: context:
list_type: inline list_type: inline
...@@ -35,3 +52,13 @@ variants: ...@@ -35,3 +52,13 @@ variants:
- another list item - another list item
- and another list item - and another list item
- yet 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.
<ul {% spaceless %}
{# You're using an ID? Really?? That'll go here #} {%- 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 %} {% if id %} id="{{-id-}}"{% endif %}
class="vf-list class="vf-list
...@@ -7,6 +24,19 @@ class="vf-list ...@@ -7,6 +24,19 @@ class="vf-list
{%- if override_class %} | {{override_class}}{% endif -%} {%- if override_class %} | {{override_class}}{% endif -%}
"> ">
{% for item in list %} {% 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 %} {% endfor %}
</ul> </{{parent_tag}}>
{% endspaceless %}
...@@ -13,22 +13,40 @@ ...@@ -13,22 +13,40 @@
@include list(vf-list); @include list(vf-list);
@include set-type(text-body--3); @include set-type(text-body--3);
} }
.vf-list--l {
@include set-type(text-body--2);
}
.vf-list--ordered { .vf-list--ordered {
@include list(vf-list--ordered, ordered); @include list(vf-list--ordered, ordered);
} }
.vf-list--unordered { .vf-list--unordered {
@include list(vf-list--unordered, unordered); @include list(vf-list--unordered, unordered);
} }
.vf-list--inline { .vf-list--inline {
@include list(vf-list--inline, inline); @include list(vf-list--inline, inline);
display: inline-block; 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 { .vf-list__link {
@include inline-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);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment