GW-88 Allow tags to be links (#37)

* GW-88 Allow tags to be links

* GW-88 Tidied tag markup

Refactored tag markup and added example for local dev
with a custom class added to a tag

server/views/components/tag.njk

@@ -14,14 +14,18 @@
 			<li>Tag {{ tag({ label: "Tag" }) }}</li>
 			<li>New {{ tag({ label: "New", modifier: "new" }) }}</li>
 			<li>Updated {{ tag({ label: "Updated", modifier: "updated" }) }}</li>
+			<li>New and impact {{ tag({ label: "New", modifiers: ["new", "impact"] }) }}</li>
 			<li>In consultation {{ tag({ label: "In consultation", modifier: "consultation" }) }}</li>
 			<li>Alpha {{ tag({ label: "Alpha", modifier: "alpha" }) }}</li>
 			<li>Beta {{ tag({ label: "Beta", modifier: "beta" }) }}</li>
 			<li>Live {{ tag({ label: "Live", modifier: "live" }) }}</li>
+			<li>With class {{ tag({ label: "Uppercase", className: "text-uppercase" }) }}</li>
 			<li>Impact {{ tag({ label: "Impact", modifier: "impact" }) }}</li>
 			<li>Impact alpha {{ tag({ label: "Alpha", modifiers: ["impact", "alpha"] }) }}</li>
 			<li>Flush {{ tag({ label: "Flush (no margin)", modifier: "flush" }) }}</li>
 			<li><span class="h2">Super {{ tag({ label: "Super", modifier: "super" }) }}</span></li>
+			<li>{{ tag({ label: "Link", href: "#news" }) }}</li>
+			<li>{{ tag({ label: "Link (modifier)", modifier: "new", href: "#news" }) }}</li>
 		</ul>
 
 		<h2>Tag on a heading {{ tag({ label: "Live", modifiers: ["live", "super"] }) }}</h2>

src/components/tag/_tag.scss

@@ -25,9 +25,25 @@
   font-weight: normal;
   margin: rem(0 0 $spacing-x-small 0);
   padding: em(0 $spacing-x-small);
+  position: relative;
   text-decoration: none;
   vertical-align: baseline;
 
+  // At-root directive with interpolation to target a tag
+  // See https://stackoverflow.com/a/25655130/486434
+  @at-root a#{&} {
+    color: $colour-nice-white;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active {
+      top: em($spacing-xx-small);
+    }
+  }
+
   @media print {
     // sass-lint:disable-block no-important
     background: none !important;

src/components/tag/tag.njk

@@ -1,11 +1,17 @@
 {% macro tag(tag) %}
-	{% if tag.modifier %}
-		<span class="{{ tag.className if tag.className }} tag tag--{{ tag.modifier }}">
-			{{ tag.label }}
-		</span>
-	{% else %}
-		<span class="{{ tag.className if tag.className }} tag{% for modifier in tag.modifiers %} tag--{{ modifier }}{% endfor %}">
-			{{ tag.label }}
-		</span>
-	{% endif %}
+	{% set modifier %}
+		{% if tag.modifier %}
+			tag--{{ tag.modifier }}
+		{% else %}
+			{% for modifier in tag.modifiers %} tag--{{ modifier }}{% endfor %}
+		{% endif %}
+	{% endset %}
+
+	{% set tagName %}{{ "a" if tag.href else "span" }}{% endset %}
+
+	{% set href %}{% if tag.href %}href="{{tag.href}}"{% endif %}{% endset %}
+
+	<{{ tagName }} class="tag {{ modifier | trim }} {{ tag.className if tag.className }}" {{ href }}>
+		{{ tag.label }}
+	</{{ tagName }}>
 {% endmacro %}