VF content defentition list support, component library quick fixes

visual-framework · Dec 8, 2021 · b5ca120 · b5ca120
1 parent 5b7d491
commit b5ca120
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 9 deletions.
diff --git a/components/vf-content/CHANGELOG.md b/components/vf-content/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.6.7
+
+* Add support for definition lists.
+
 ### 1.6.3
 
 * Dependency bumps.

diff --git a/components/vf-content/vf-content.njk b/components/vf-content/vf-content.njk
@@ -31,6 +31,19 @@
   - A bulleted item
   - A bulleted item
 
+  ### Definition lists
+
+  <dl>
+    <dt>Beast of Bodmin</dt>
+    <dd>A large feline inhabiting Bodmin Moor.</dd>
+
+    <dt>Morgawr</dt>
+    <dd>A sea serpent.</dd>
+
+    <dt>Owlman</dt>
+    <dd>A giant owl-like creature.</dd>
+  </dl>
+
   {% endmarkdown %}
 
   <table>

diff --git a/components/vf-content/vf-content.scss b/components/vf-content/vf-content.scss
@@ -122,6 +122,15 @@
     margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
   }
 
+  dl:not([class*='vf-']) {
+    dt:not([class*='vf-']) {
+      @include set-type(text-heading--4, $custom-margin-bottom: 8px);
+    }
+    dd:not([class*='vf-']) {
+      @include set-type(text-body--2);
+    }
+  }
+
   img:not([class*='vf-']) {
     height: auto;
     max-width: 100%;

diff --git a/components/vf-list/vf-list.scss b/components/vf-list/vf-list.scss
@@ -26,11 +26,11 @@
 
 // VF definition lists
 // https://github.com/visual-framework/vf-core/issues/914
-.vf-list--definition {
-  @include list(vf-list--unordered, unordered);
-}
+// .vf-list--definition {
+//   @include list(vf-list--unordered, unordered);
+// }
 .vf-list--definition__term {
-  @include set-type(text-heading--4);
+  @include set-type(text-heading--4, $custom-margin-bottom: 8px);
 }
 .vf-list--definition__details {
   @include set-type(text-body--2);

diff --git a/tools/vf-component-library/src/site/developing/getting-started/setting-up.njk b/tools/vf-component-library/src/site/developing/getting-started/setting-up.njk
@@ -46,7 +46,7 @@ We have a recommended development environment for new developers:
 
 <div class="vf-box vf-box-theme-- vf-box- vf-box-theme--quinary">
 <h4 class=" vf-box__heading">Problems?</h4>
-<p class="vf-box__text">See the <a href="({{ '/troubleshooting' | url}})" class="vf-link">troubleshooting guide</a>.</p>
+<p class="vf-box__text">See the <a href="{{ '/troubleshooting' | url}}" class="vf-link">troubleshooting guide</a>.</p>
 </div>
 
 ### Developing the VF Core

diff --git a/tools/vf-component-library/src/site/patterns/article.njk b/tools/vf-component-library/src/site/patterns/article.njk
@@ -187,10 +187,7 @@ layout: layouts/boilerplate.njk
       "text": "Version, 1982, Adenovirus with 217 dots.",
       "alttext": "hello alt text",
       "imageUrl": "../../assets/vf-figure/assets/figure-example.png"
-    }
-    %}
-    {% render '@vf-figure', context %}
-    {# vf-figure needs template updates to work with include #}
+    } %}
     {% include "vf-core-components/vf-figure/vf-figure.njk" %}
   </section>