Refactor vf-link (#354)

Refactors vf-link to use yaml and break out the disabled state.

components/vf-badge/vf-badge.scss

@@ -63,7 +63,7 @@ $vf-badge--tertiary-color--text: set-color(vf-color-white) !default;
   border-color: $vf-badge--primary-color--border;
   color: $vf-badge--primary-color--text;
 
-  @include inline-link($vf-badge--primary-color--text,$vf-badge--primary-color--text,$vf-badge--primary-color--text,$vf-badge--primary-color--text, $vf-include-normalisations: false);
+  @include inline-link($vf-badge--primary-color--text,$vf-badge--primary-color--text,$vf-badge--primary-color--text, $vf-include-normalisations: false);
 }
 
 a.vf-badge--primary:hover {
@@ -76,7 +76,7 @@ a.vf-badge--primary:hover {
   border-color: $vf-badge--secondary-color--border;
   color: $vf-badge--secondary-color--text;
 
-  @include inline-link($vf-badge--secondary-color--text,$vf-badge--secondary-color--text,$vf-badge--secondary-color--text,$vf-badge--secondary-color--text, $vf-include-normalisations: false);
+  @include inline-link($vf-badge--secondary-color--text,$vf-badge--secondary-color--text,$vf-badge--secondary-color--text, $vf-include-normalisations: false);
 }
 
 .vf-badge--tertiary {
@@ -84,7 +84,7 @@ a.vf-badge--primary:hover {
   border-color: $vf-badge--tertiary-color--border;
   color: $vf-badge--tertiary-color--text;
 
-  @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
+  @include inline-link($vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text,$vf-badge--tertiary-color--text, $vf-include-normalisations: false);
 
 }
 

components/vf-componenet-rollup/index.scss

@@ -48,7 +48,9 @@ html, button {
 
 @import 'vf-badge/vf-badge.scss';
 @import 'vf-link/vf-link.scss';
+  @import 'vf-link/vf-link--primary.scss';
   @import 'vf-link/vf-link--secondary.scss';
+  @import 'vf-link/vf-link--disabled.scss';
 @import 'vf-logo/vf-logo.scss';
 @import 'embl-logo/embl-logo.scss';
 @import 'vf-form__core/vf-form__core.scss';

components/vf-link/README.md

@@ -2,6 +2,105 @@
 
 ## About
 
+## Demonstration
+
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  text: "A default link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  style: ["hover"],
+  text: "A default:hover link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  style: ["visited"],
+  text: "A default:visited link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  style: ["disable"],
+  text: "A disabled default link"
+} %}
+
+### Primary links
+
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "primary",
+  text: "A primary link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "primary",
+  style: ["hover"],
+  text: "A primary:hover link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "primary",
+  style: ["visited"],
+  target: "blank",
+  text: "A primary:visited link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "primary",
+  style: ["disabled"],
+  text: "A disabled primary link"
+} %}
+
+### Secondary links
+
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "secondary",
+  text: "A secondary link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "secondary",
+  style: ["hover"],
+  text: "A secondary:hover link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "secondary",
+  style: ["visited"],
+  target: "blank",
+  text: "A secondary:visited link"
+} %}
+<br/>
+{% render "@vf-link", {
+  href: "#",
+  id: "harsh",
+  theme: "secondary",
+  style: ["disabled"],
+  text: "A disabled secondary link"
+} %}
+
+
+
 ## Installation and Implementation
 
 This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-link` with this command.

components/vf-link/vf-link--disabled.scss

+.vf-link--disabled {
+  @include vf-disabled($vf-link-disabled-color);
+}

components/vf-link/vf-link--primary.scss

+// vf-link--primary
+@import 'vf-link.variables.scss';
+
+.vf-link {
+  @include inline-link;
+}
+
+.vf-link--visited {
+  color: $vf-link-visited-color;
+}
+
+.vf-link--hover {
+  color: $vf-link-hover-color;
+}

components/vf-link/vf-link--secondary.njk

-<p class="vf-text">
-  <a class="vf-link--secondary" href="#">A secondary link</a>
-</p>
-
-<p class="vf-text">
-  <a class="vf-link vf-link--secondary vf-link--secondary--hover" href="#">A secondary link :hover</a>
-</p>
-
-<p class="vf-text">
-  <a class="vf-link vf-link--secondary vf-link--secondary--visited" href="#">A secondary link :visited</a>
-</p>
-
-<p class="vf-text">
-  <a class="vf-link--secondary" href="#" disabled>A secondary link :disabled</a>
-</p>

components/vf-link/vf-link.config.yml

@@ -4,3 +4,68 @@ preview: '@preview--elements'
 status: alpha
 context:
   component-type: element
+
+variants:
+  - name: default
+    context:
+      href: "#"
+      id: "harsh"
+      text: "A default link"
+  - name: default-hover
+    context:
+      href: "#"
+      style: ["hover"]
+      text: "A default:hover link"
+  - name: default-visited
+    context:
+      href: "#"
+      style: ["visited"]
+      text: "A default:visited link"
+  - name: default-disabled
+    context:
+      href: "#"
+      style: ["disabled"]
+      text: "A disabled default link"
+  - name: primary
+    context:
+      href: "#"
+      id: "harsh"
+      text: "A primary link"
+  - name: primary-hover
+    context:
+      href: "#"
+      style: ["hover"]
+      text: "A primary:hover link"
+  - name: primary-visited
+    context:
+      href: "#"
+      style: ["visited"]
+      text: "A primary:visited link"
+  - name: primary-disabled
+    context:
+      href: "#"
+      style: ["disabled"]
+      text: "A disabled primary link"      
+  - name: secondary
+    context:
+      href: "#"
+      text: A secondary link
+      theme: secondary
+  - name: secondary-hover
+    context:
+      href: "#"
+      text: A secondary:hover link
+      theme: secondary
+      style: ["hover"]
+  - name: secondary-visited
+    context:
+      href: "#"
+      text: A secondary:visited link
+      theme: secondary
+      style: ["visited"]
+  - name: secondary-disabled
+    context:
+      href: "#"
+      text: A disabled secondary link
+      theme: secondary
+      style: ["disabled"]

components/vf-link/vf-link.njk

-<p class="vf-text">
-  <a class="vf-link" href="#">An inline link</a>
-</p>
+{% spaceless %}
 
-<p class="vf-text">
-  <a class="vf-link vf-link--hover" href="#">An inline link :hover</a>
-</p>
+{# We need to know if links should be disabled #}
+{% set disabled = false %}
 
-<p class="vf-text">
-  <a class="vf-link vf-link--visited" href="#">An inline link :visited</a>
-</p>
+<a
+{# Using an ID? Really?? That goes here #}
+{%- if id %} id="{{-id-}}"{% endif -%}
 
-<p class="vf-text">
-  <a class="vf-link" href="#" disabled>An inline link :disabled</a>
-</p>
+{# Gotta have a link #}
+href="{{-href-}}"
+
+{# Have a target like _blank? That goes here #}
+{%- if target %} target="_{{-target-}}"{% endif -%}
+
+{# Here is where we are adding the vf-text--body modifier #}
+class="vf-link
+
+{% if theme %}vf-link--{{ theme -}}{% endif %}
+
+{# If you're styling the shape of the item, the classnames will render in this for loop #}
+{%- if style -%}
+  {% for styles in style %}
+    {# Link is disabled? #}
+    {%- if styles == "disabled" %}
+      vf-link--{{styles-}}
+      {% set disabled = true %}
+    {%- else %}
+      vf-link--{% if theme %}{{theme}}--{% endif %}{{styles-}}
+    {% endif %}
+  {% endfor -%}
+{% endif -%}
+
+{# You want a snowflake of a classname for something, here you go  #}
+{%- if override_class %} | {{override_class}}{% endif -%}
+"
+
+{# Link is disabled?  #}
+{%- if disabled %} disabled{% endif -%}
+>
+
+{{- html | safe if html else text -}}
+
+</a>
+{% endspaceless %}

components/vf-sass-config/mixins/_links.scss

@@ -2,7 +2,6 @@
   $vf-link-color: $vf-link-color,
   $vf-link-hover-color: $vf-link-hover-color,
   $vf-link-visited-color: $vf-link-visited-color,
-  $vf-link-disabled-color: $vf-link-disabled-color,
   $vf-include-normalisations: $vf-include-normalisations) {
 
   /// @todo Add documentation about how/when/where to expect, use $vf-include-normalisations
@@ -30,16 +29,6 @@
       text-decoration: underline;
     }
   }
-
-  &[disabled] {
-    color: $vf-link-disabled-color;
-    cursor: not-allowed;
-
-    @if $vf-include-normalisations == true {
-      border-bottom: none;
-      text-decoration: underline;
-    }
-  }
 }
 
 
@@ -61,11 +50,6 @@
     background-color: $vf-link-hover-color;
     border-color: $vf-link-hover-color;
   }
-
-  &[disabled] {
-    background-color: $vf-link-disabled-color;
-    cursor: not-allowed;
-  }
 }
 
 
@@ -86,9 +70,4 @@
     background-color: $vf-link-hover-color;
     color: map-get($vf-colors-map, vf-color-white);
   }
-
-  &[disabled] {
-    background-color: $vf-link-disabled-color;
-    cursor: not-allowed;
-  }
 }

components/vf-sass-config/mixins/_vf-mixins.scss

@@ -9,3 +9,4 @@
 @import 'padding.scss';
 @import 'text-color.scss';
 @import 'typography.scss';
+@import 'vf-disabled.scss';

components/vf-sass-config/mixins/vf-disabled.scss

+
+$vf-link-disabled-color: $vf-link-disabled-color;
+
+@mixin vf-disabled(
+  $vf-link-disabled-color,
+  $vf-include-normalisations: $vf-include-normalisations) {
+  color: $vf-link-disabled-color;
+  cursor: not-allowed;
+
+  @if $vf-include-normalisations == true {
+    border-bottom: none;
+    text-decoration: underline;
+  }
+}

fractal.js

@@ -49,7 +49,8 @@ module.exports = {
       //   // global-name: global-val
       // },
       extensions: {
-        codeblock: require(__dirname + '/tools/vf-frctl-extensions/codeblock.js')(fractal)
+        codeblock: require(__dirname + '/tools/vf-frctl-extensions/codeblock.js')(fractal),
+        spaceless: require(__dirname + '/tools/vf-frctl-extensions/spaceless.js')(fractal)
       }
     });
 

tools/vf-frctl-extensions/spaceless.js

+'use strict';
+
+var nunjucks = require('nunjucks');
+
+// Strip unneeded spaces
+
+// Sample:
+// {% spaceless 'html' -%}
+//   <a href="#"
+//     class="vf-link"
+//       >
+//     I have a bunch of
+//     silly whitespace that can mass up pre-processors
+// </a>
+// {% endspaceless %}
+
+// via https://github.com/mozilla/nunjucks/issues/207
+
+module.exports = function(fractal){
+
+    function SpacelessExtension() {
+
+      this.tags = ['spaceless'];
+
+      this.parse = function (parser, nodes, lexer) {
+        var tok = parser.nextToken();
+
+        var args = parser.parseSignature(null, true);
+        parser.advanceAfterBlockEnd(tok.value);
+
+        var body = parser.parseUntilBlocks('error','endspaceless');
+        var errorBody = null;
+        if(parser.skipSymbol('error')) {
+            parser.skip(lexer.TOKEN_BLOCK_END);
+            errorBody = parser.parseUntilBlocks('endremote');
+        }
+
+        parser.advanceAfterBlockEnd();
+
+        return new nodes.CallExtension(this, 'run', args, [body, errorBody]);
+      };
+
+      this.run = function (context, body) {
+        return body().replace(/\s+/g, ' ').replace(/>\s</g, '><');
+      };
+
+    }
+
+    return new SpacelessExtension();
+};