WIP: updates components to use yaml where possible (#338)

* updates vf-badge to use yaml more and leave the nunjucks nice and tidy

* vf-badge nunjucks macro-fication

* vf-badge nunjucks macro-fication

* Fixed that for you 

* updates vf-badge to un-macro it

* updates vf-badge to all the new things

* updates vf-badge to all the new things

* updates vf-text to use yml / nunjucks more

* sanitises the yaml variables from the component name

* sanitises the yaml variables from the component name and uses new data for rendering list

* adds a vertical pipe for the additional class

* updates box

* article meta

* starts on buttons

* changes buttons mixin

* makes a start on summary

* Typos

- Makes `overide` to `override`
- Adds "https://" before demo links

components/vf-activity-group/vf-activity-group.config.yml

@@ -3,3 +3,25 @@ label: Acivity List Group
 preview: '@preview--containers'
 context:
   component-type: container
+  heading: Recent activity
+
+  activity_list__1:
+    date: "24th January 2019"
+    list:
+      - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+      - <strong>Mark Boulton</strong> updated <a href="JavaScript:Void(0);">Digital Strategy</a> on <a href="JavaScript:Void(0);">Gitlab</a> to version 1.1, with the comment <blockquote class="vf-activity__blockquote | vf-blockquote">Additional detail added to social section.</blockquote>
+
+  activity_list__2:
+    date: "29th January 2019"
+    list:
+      - <strong>Mark Boulton</strong> updated <a href="JavaScript:Void(0);">Digital Strategy</a> on <a href="JavaScript:Void(0);">Gitlab</a> to version 1.1, with the comment <blockquote class="vf-activity__blockquote | vf-blockquote">Additional detail added to social section.</blockquote>
+      - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+      - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+
+
+  activity_list__3:
+    date: "30th January 2019"
+    list:
+      - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+      - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+      - <strong>Mark Boulton</strong> updated <a href="JavaScript:Void(0);">Digital Strategy</a> on <a href="JavaScript:Void(0);">Gitlab</a> to version 1.1, with the comment <blockquote class="vf-activity__blockquote | vf-blockquote">Additional detail added to social section.</blockquote>

components/vf-activity-group/vf-activity-group.njk

 <section class="vf-activity-group | embl-grid">
-  <h3 class="vf-activity-group__heading">Recent activity</h3>
-  {% render '@vf-activity-list' %}
-  {% render '@vf-activity-list' %}
-  {% render '@vf-activity-list' %}
+
+  <h3 class="vf-activity-group__heading">{{ heading }}</h3>
+
+  {% render '@vf-activity-list', activity_list__1 %}
+  {% render '@vf-activity-list', activity_list__2 %}
+  {% render '@vf-activity-list', activity_list__3 %}
+
 </section>

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

@@ -3,3 +3,8 @@ label: Activity List
 preview: '@preview--blocks'
 context:
   component-type: block
+  date: Tuesday 20th February 2018
+  list:
+    - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+    - <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
+    - <strong>Mark Boulton</strong> updated <a href="JavaScript:Void(0);">Digital Strategy</a> on <a href="JavaScript:Void(0);">Gitlab</a> to version 1.1, with the comment <blockquote class="vf-activity__blockquote | vf-blockquote">Additional detail added to social section.</blockquote>

components/vf-activity-list/vf-activity-list.njk

 <div class="vf-activity">
-  <p class="vf-activity__date">Tuesday 20th February 2018</p>
+
+  <p class="vf-activity__date">{{ date }}</p>
+
   <ul class="vf-activity__list | vf-list">
+
+    {% for item in list %}
+
     <li class="vf-activity__item">
-      <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
-    </li>
-    <li class="vf-activity__item">
-      <strong>Sonia Furtado Neves</strong> published <a href="JavaScript:Void(0);">'The Future of Training'</a> on <a href="JavaScript:Void(0);">EMBL News</a>.
-    </li>
-    <li class="vf-activity__item">
-      <strong>Mark Boulton</strong> updated <a href="JavaScript:Void(0);">Digital Strategy</a> on <a href="JavaScript:Void(0);">Gitlab</a> to version 1.1, with the comment:
-      <blockquote class="vf-activity__blockquote | vf-blockquote">Additional detail added to social section.</blockquote>
+      {{ item }}
     </li>
+
+    {% endfor %}
+
   </ul>
 </div>

components/vf-article-meta-information/vf-article-meta-information.config.yml

@@ -2,3 +2,19 @@ title: Article Meta Information
 label: Article Meta Information
 context:
   component-type: block
+
+  author__name: First-Name Surame
+  author__avatar: https://avatars3.githubusercontent.com/u/925197?s=88&v=4
+  meta__topics:
+    - cancer
+    - history
+  meta__date: 14th February 2019
+  meta__comment_count: 61
+  meta__links_title: On This Page
+  meta__links:
+    - heading link 1
+    - heading link 2
+    - heading link 3
+    - heading link 4
+    - heading link 5
+    - heading link 6

components/vf-article-meta-information/vf-article-meta-information.njk

 <aside class="vf-article-meta-information">
   <div class="vf-author | vf-article-meta-info__author">
     <p class="vf-author__name | vf-text--body-xs">
-      <a class="vf-link" href="#"><span>First Name</span>
-      <span>Surame</span></a>
+      <a class="vf-link" href="#">{{ author__name }}</a>
     </p>
    <a class="vf-author--avatar__link | vf-link" href="#">
      <!-- wrapping the avatar in a link is optional -->
-     <img class="vf-author--avatar" src="https://avatars3.githubusercontent.com/u/925197?s=88&v=4" alt="First Name Surname" />
+     <img class="vf-author--avatar" src="{{ author__avatar }}" alt="FirstName Surname" />
    </a>
   </div>
   <div class="vf-meta__details">
-    <p class="vf-meta__topics | vf-text--body-xs">Topic: <a href="JavaScript:Void(0);" class="vf-link">cancer</a>, <a href="JavaScript:Void(0);" class="vf-link">history</a></p>
-    <p class="vf-meta__date | vf-text--body-xs">14th February 2019</p>
+    <p class="vf-meta__topics | vf-text--body-xs">Topic:
+      {% for item in meta__topics %}
+      <a href="JavaScript:Void(0);" class="vf-link">{{ item }}</a>
+      {% endfor %}
+    <p class="vf-meta__date | vf-text--body-xs">{{ meta__date }}</p>
   </div>
   <div class="vf-meta__comments">
-    <p class="vf-text--body-xs">Comments — <a href="JavaScript:Void(0);" class="vf-link">61</a></p>
+    <p class="vf-text--body-xs">Comments — <a href="JavaScript:Void(0);" class="vf-link">{{ meta__comment_count }}</a></p>
   </div>
   <div class="vf-links | vf-article-meta-info__links">
-    <h6 class="vf-text vf-text--body-xs">On This Page</h6>
-    <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">Heading Link 1</a>
-    <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">Heading Link 1</a>
-    <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">Heading Link 1</a>
-    <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">Heading Link 1</a>
-    <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">Heading Link 1</a>
+    <h6 class="vf-text vf-text--body-xs">{{ meta__links_title}}</h6>
+    {% for item in meta__links %}
+      <a href="JavaScript:Void(0);" class="vf-link | vf-text--body-xs">{{ item }}</a>
+    {% endfor %}
   </div>
 </aside>

components/vf-article-meta-information/vf-article-meta-information.scss

@@ -21,10 +21,7 @@
   .vf-author__name {
     align-self: center;
     margin: 0 0 0 8px;
-
-    span {
-      display: block;
-    }
+    word-spacing: 100vw; // so first name and surname split
   }
 
   .vf-author__title {
@@ -57,8 +54,26 @@
     margin: 0 0 4px 0;
     .vf-link {
       color: inherit;
+      position: relative;
+    }
+    .vf-link:nth-last-child(n+2),
+    .vf-link:nth-last-child(n+2) ~ .vf-link {
+      margin-right: 4px;
+
+      &::before {
+        content: ',';
+        position: absolute;
+        right: -4px;
+      }
+    }
+
+    .vf-link:last-of-type {
+      &::before {
+        content: '' !important;
+      }
     }
   }
+
   .vf-meta__date {
     color: set-color(vf-color-gray);
     margin: 0;

components/vf-badge/README.md

 [![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-badge.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-badge)
 
+{% render "@vf-badge", {
+  href: "https://www.kens-home.com",
+  id: "harsh",
+  override_class: "override",
+  style: ["outline", "pill"],
+  text: "alpha",
+  theme: "primary"
+} %}
+
+
 ## About
 
 The `vf-badge` component is used to label a page, part of a page, or a component. The `vf-badge` component can also be a link using `<a class="vf-badge" href="">badge title</a>`.

components/vf-badge/vf-badge--links.njk

-<a href=""class="vf-badge vf-badge--primary">{{vf_badge_name}}</a>

components/vf-badge/vf-badge--outline.njk

-<span class="vf-badge vf-badge--primary vf-badge--outline">{{vf_badge_name}}</span>

components/vf-badge/vf-badge--sizes.njk

-<span class="vf-badge vf-badge--primary">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--secondary">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--tertiary">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--primary vf-badge--rounded">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--primary vf-badge--pill">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--primary vf-badge--square"></span>
-
-
-<span class="vf-badge vf-badge--primary vf-badge--outline">{{vf_badge_name}}</span>

components/vf-badge/vf-badge--styles.njk

-<span class="vf-badge vf-badge--primary">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--secondary">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--tertiary">{{vf_badge_name}}</span>

components/vf-badge/vf-badge--variants.njk

-<span class="vf-badge vf-badge--primary vf-badge--rounded">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--primary vf-badge--pill">{{vf_badge_name}}</span>
-<div class="vf-badge vf-badge--primary vf-badge--square" arta-label="{{vf_badge_name}}"></div>
-<span class="vf-badge vf-badge--primary vf-badge--phases">{{vf_badge_name}}</span>
-<span class="vf-badge vf-badge--primary vf-badge--phases">beta</span>

components/vf-badge/vf-badge.config.yml

@@ -3,4 +3,47 @@ label: Badges
 preview: '@preview--elements'
 context:
   component-type: element
-  vf_badge_name: alpha
+
+variants:
+  - name: default
+    context:
+      text: alpha
+  - name: primary
+    context:
+      style: ["outline" , "rounded"]
+      text: alpha
+      theme: primary
+  - name: secondary
+    context:
+      text: beta
+      theme: secondary
+  - name: tertiary
+    context:
+      text: alpha
+      theme: tertiary
+      override_class: "Hey--Ken"
+      id: "Yo-Ken"
+  - name: outline
+    context:
+      text: alpha
+      style: ["outline"]
+  - name: rounded
+    context:
+      text: alpha
+      style: ["rounded"]
+  - name: pill
+    context:
+      text: alpha
+      style: ["pill"]
+  - name: square
+    context:
+      style: ["square"]
+      theme: primary
+  - name: phases
+    context:
+      text: alpha
+      theme: tertiary
+  - name: link
+    context:
+      href: http://www.metallica.com
+      text: beta

components/vf-badge/vf-badge.njk

-<span class="vf-badge{% if vf-badge-classes %} {{this}}{% endif %}">{{vf_badge_name}}</span>
+{# Determine type of element to use, if not explicitly set -#}
+
+{% if href %}
+  {% set tags = 'a' %}
+{% else %}
+  {% set tags = 'span' %}
+{% endif %}
+
+{# Work out what colour theme is needed for the styling #}
+{% if theme %}
+  {% set theme_class = theme %}
+{% endif %}
+
+
+{# Decide upon which 'style' the badge has #}
+<{{tags}}
+{# If there's an href put it here #}
+{%- if tags == 'a' %}
+ href="{{ href if href else '#' }}"
+{%- endif %}
+{# You're using an ID? Really?? That'll go here #}
+{% if id %} id="{{-id-}}"{% endif %}
+
+class="vf-badge
+{#- This will list the them classname #}
+{%- if theme_class %} vf-badge--{{theme_class}}{% endif %}
+{# If you're styling the shape of the item, the classnames will render in this for loop #}
+{%- if style %}
+  {% for styles in style %} vf-badge--{{styles}}{% endfor -%}
+{% endif -%}
+{# You want a snowflake of a classname for something, here you  #}
+{%- if override_class %} | {{override_class}}{% endif -%}
+
+">
+
+   {{- html | safe if html else text -}}
+
+</{{tags}}>

components/vf-banner/vf-banner.scss

@@ -28,7 +28,7 @@
   align-items: center;
 
   @media (max-width: 63.9375em) {
-    display: block; // overideing the .emlb-grid code
+    display: block; // overrideing the .emlb-grid code
   }
 
   @media (min-width: $vf-breakpoint-l) {

components/vf-box/vf-box--factoid.njk

-<div class="vf-box vf-box--factoid">
-  <h3 class="vf-box__heading">Did you know?</h3>
-  <p class="vf-box__text">Invasive cancer is the leading cause of death in the developed world and the second leading in the developing world.</p>
-</div>

components/vf-box/vf-box--inlay.njk

-<div class="vf-box vf-box--inlay">
-  <h3 class="vf-box__heading">About the Häring Group</h3>
-  <p class="vf-box__text">The Sharpe group brings together an interdisciplinary team of biologists, physicists and computer scientists to build a multi-scale computer simulation of a paradigm of organogenesis – mammalian limb development.</p>
-</div>

components/vf-box/vf-box.config.yml

@@ -4,3 +4,19 @@ preview: '@preview--blocks'
 status: alpha
 context:
   component-type: block
+
+variants:
+  - name: default
+    context:
+      heading: Did You Know?
+      text: This is some more content that would be in the box.
+  - name: factoid
+    context:
+      heading: Did You Know?
+      text: Invasive cancer is the leading cause of death in the developed world and the second leading in the developing world.
+      class: vf-box--factoid
+  - name: inlay
+    context:
+      heading: About the Häring Group
+      text: The Sharpe group brings together an interdisciplinary team of biologists, physicists and computer scientists to build a multi-scale computer simulation of a paradigm of organogenesis – mammalian limb development.
+      class: vf-box--inlay

components/vf-box/vf-box.njk

-<div class="vf-box">
-  {% render '@vf-heading', {"type": "large", "title": "Hello World"} %}
-  <p class="vf-text vf-text--body-r">This is some more content that would be in the box.</p>
+<div
+
+{# You're using an ID? Really?? That'll go here #}
+{%- if id %} id="{{-id-}}"{% endif %}
+
+{# Here is where we are adding the vf-text--body modifier #}
+class="vf-box
+{%- if class %} {{class}}{% endif -%}
+
+{# You want a snowflake of a classname for something, here you  #}
+{%- if override_class %} | {{override_class}}{% endif -%}
+
+">
+  <h3 class="vf-box__heading">{{- heading -}}</h3>
+  <p class="vf-box__text">{{- text -}}/p>
 </div>