updates navigation to use yaml

components/vf-navigation/vf-navigation--additional.njk

-<nav class="vf-navigation vf-navigation--additional">
-  <h3 class="vf-navigation__heading">European Bioinformatics Institute</h3>
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Services</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Research</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Training</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">About Us</a>
-    </li>
-  </ul>
-</nav>

components/vf-navigation/vf-navigation--additional.scss

@@ -26,6 +26,7 @@
   .vf-navigation__link {
     @include inline-link(
       $vf-link-color: set-color(vf-color-off-white),
+      $vf-link-visited-color: set-color(vf-color-white),
       $vf-link-hover-color: set-color(vf-color-white)
     );
 

components/vf-navigation/vf-navigation--global.njk

-<nav class="vf-navigation vf-navigation--global">
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Explore</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Search</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="JavaScript:Void(0);" class="vf-navigation__link">Sign In</a>
-    </li>
-  </ul>
-</nav>

components/vf-navigation/vf-navigation--main.njk

-<nav class="vf-navigation vf-navigation--main">
-  <ul class="vf-navigation__list | vf-list--inline">
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Home</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Download</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Release Notes</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">FAQ</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Help</a>
-    </li>
-    <li class="vf-navigation__item is-active">
-      <a href="#" class="vf-navigation__link">Licence</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">About</a>
-    </li>
-    <li class="vf-navigation__item">
-      <a href="#" class="vf-navigation__link">Feedback</a>
-    </li>
-  </ul>
-</nav>

components/vf-navigation/vf-navigation.config.yml

 title: Navigation
 label: Navigation
 preview: '@preview--blocks'
+
 context:
   component-type: block
+
+variants:
+  - name: default
+    hidden: true
+
+  - name: global
+    context:
+      classModifier: global
+      navigation:
+        - text: services
+          url: JavaScript:Void(0);
+        - text: research
+          url: JavaScript:Void(0);
+        - text: training
+          url: JavaScript:Void(0);
+        - text: about us
+          url: JavaScript:Void(0);
+
+  - name: main
+    context:
+      classModifier: main
+      navigation:
+        - text: Home
+          url: JavaScript:Void(0);
+        - text: Download
+          url: JavaScript:Void(0);
+        - text: Release Notes
+          url: JavaScript:Void(0);
+        - text: FAQ
+          url: JavaScript:Void(0);
+        - text: Help
+          url: JavaScript:Void(0);
+        - text: Licence
+          url: JavaScript:Void(0);
+        - text: About
+          url: JavaScript:Void(0);
+        - text: Feedback
+          url: JavaScript:Void(0);
+
+  - name: additional
+    context:
+      heading: European Bioinformatics Institute
+      classModifier: additional
+      title: European Bioinformatics Institute
+      navigation:
+        - text: services
+          url: JavaScript:Void(0);
+        - text: research
+          url: JavaScript:Void(0);
+        - text: training
+          url: JavaScript:Void(0);
+        - text: about us
+          url: JavaScript:Void(0);

components/vf-navigation/vf-navigation.njk

-See primary, secondary, and tertiary variants.
+<nav class="vf-navigation {%- if classModifier %} vf-navigation--{{ classModifier }}{% endif %}">
+  {% if heading %}
+  <h3 class="vf-navigation__heading">{{ heading }}</h3>
+  {% endif %}
+  <ul class="vf-navigation__list | vf-list--inline">
+    {% for item in navigation %}
+    <li class="vf-navigation__item">
+      <a href="{{ item.url }}" class="vf-navigation__link">{{ item.text }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</nav>