Add live service tag and semantic colour name

nice-digital · Aug 12, 2016 · 043f450 · 043f450
1 parent d87fa8e
commit 043f450
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/src/stylesheets/components/_components-phase.scss b/src/stylesheets/components/_components-phase.scss
@@ -47,4 +47,9 @@
 		background-color: $beta-colour;
 		color: $white;
 	}
+
+	&--live {
+		background-color: $live-colour;
+		color: $white;
+	}
 }
diff --git a/src/stylesheets/settings/_settings-colours.scss b/src/stylesheets/settings/_settings-colours.scss
@@ -209,7 +209,7 @@ $body-text-colour: get-colour(grey, mid-dark);
 // $discovery-colour: $fuschia;			// Discovery badges and banners
 $alpha-colour: get-colour(pink);				// Alpha badges and banners
 $beta-colour: get-colour(orange);				// Beta badges and banners
-// $live-colour: $grass-green;			// Live badges and banners
+$live-colour: get-colour(green);			// Live badges and banners
 // $banner-text-colour: #000;			// Text colour for Alpha & Beta banners
 $error-colour: get-colour(red);					// Error text and border colour
 $error-background-colour: get-colour(red, x-light);			// Error background colour

diff --git a/web/server/views/components/alpha-beta.njk → ...rver/views/components/alpha-beta-live.njk b/web/server/views/components/alpha-beta.njk → ...rver/views/components/alpha-beta-live.njk
@@ -3,7 +3,7 @@
 
 {% block main %}
 
-	<h1>Alpha &amp; beta phases</h1>
+	<h1>Alpha, beta &amp; live phases</h1>
 
 	<nav>
 		<ul>
@@ -30,6 +30,9 @@
 				<li>
 					A beta service <strong class="phase-tag phase-tag--beta">BETA</strong>
 				</li>
+				<li>
+					A live service <strong class="phase-tag phase-tag--live">LIVE</strong>
+				</li>
 			</ul>
 
 		{%- endexample %}
@@ -68,6 +71,19 @@
 				</span>
 			</p>
 		{%- endexample %}
+
+		<h3>Live</h3>
+
+		{% example -%}
+			<p class="phase-banner">
+				<span class="phase-banner__tag">
+					<strong class="phase-tag phase-tag--live">LIVE</strong>
+				</span>
+				<span class="phase-banner__label">
+					Pathways is a Live Service
+				</span>
+			</p>
+		{%- endexample %}
 	</section>
 
 {% endblock %}
diff --git a/web/server/views/components/index.njk b/web/server/views/components/index.njk
@@ -26,7 +26,7 @@
 
 			{{ item("Tabs", "/components/tabs", "Content is separated into different panes, with only one pane viewable at a time.") }}
 
-			{{ item("Alpha/beta", "/components/alpha-beta", "Phase tags and banner to denote alpha and beta services.") }}
+			{{ item("Alpha/beta", "/components/alpha-beta-live", "Phase tags and banner to denote alpha and beta services.") }}
 
 			{{ item("Navigation", "/components/navigation", "Lorem ipsum dolor sit amet, consectetur adipisicing elit.") }}
 

diff --git a/web/server/views/index.njk b/web/server/views/index.njk
@@ -49,7 +49,7 @@
 
 				{{ item("Tabs", "/components/tabs", "Content is separated into different panes, with only one pane viewable at a time.") }}
 
-				{{ item("Alpha/beta", "/components/alpha-beta", "Phase tags and banner to denote alpha and beta services") }}
+				{{ item("Alpha/beta", "/components/alpha-beta-live", "Phase tags and banner to denote alpha and beta services") }}
 
 				{{ item("Navigation", "/components/navigation", "Lorem ipsum dolor sit amet, consectetur adipisicing elit.") }}