Update tag component with "in consultation" modifier

nice-digital · Dec 8, 2017 · 2060938 · 2060938
1 parent deb86a5
commit 2060938
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/server/views/components/tag.njk b/server/views/components/tag.njk
@@ -13,10 +13,12 @@
 			<li>Tag <span class="tag">Tag</span></li>
 			<li>New <span class="tag tag--new">New</span></li>
 			<li>Updated <span class="tag tag--updated">Updated</span></li>
+			<li>In consultation <span class="tag tag--consultation">In consultation</span></li>
 			<li>Alpha <span class="tag tag--alpha">Alpha</span></li>
 			<li>Beta <span class="tag tag--beta">Beta</span></li>
 			<li>Live <span class="tag tag--live">Live</span></li>
 			<li>Impact <span class="tag tag--impact">Impact</span></li>
+			<li>Impact alpha <span class="tag tag--impact tag--alpha">Alpha</span></li>
 		</ul>
 
 	</div>

diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss
@@ -2,7 +2,8 @@
 /// @group components
 ////
 
-/// A tag for labelling
+/// Tag component. Used for labelling items in lists
+/// and also used within alpha/beta phase banners.
 ///
 /// BEM modifiers:
 ///   - `--impact` Larger tag, used for impact
@@ -11,9 +12,10 @@
 ///   - `--live`  Live
 ///   - `--new`  New
 ///   - `--updated`  Updated
+///   - `--consultation`  In consultation
 /// @since 0.3.1
 .tag {
-  @include font-size(-2);
+  @include font-size(-1);
   background-color: $colour-panel-inverse;
   border-radius: em($spacing-xx-small);
   color: $colour-text-inverse;
@@ -52,10 +54,14 @@
   }
 
   &--new {
-    background: $colour-nice-purple;
+    background: $colour-guidance-new;
   }
 
   &--updated {
-    background: $colour-nice-blue-3;
+    background: $colour-guidance-updated;
+  }
+
+  &--consultation {
+    background: $colour-guidance-consultation;
   }
 }