Merge pull request #366 from alphagov/add-phase-tags

[For discussion] Examples of phase tags
alphagov · Feb 14, 2017 · 9af188f · 9af188f
2 parents f6c225c + a69f949
commit 9af188f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/app/views/guide_alpha_beta.html b/app/views/guide_alpha_beta.html
@@ -23,6 +23,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
       <ul class="list list-contents">
         <li><a href="#alpha-banner">Alpha banner</a></li>
         <li><a href="#beta-banner">Beta banner</a></li>
+        <li><a href="#phase-tags">Phase tags</a></li>
         <li><a href="#creating-phase-banners">Creating phase banners</a></li>
       </ul>
     </div>
@@ -48,6 +49,33 @@ <h3 class="heading-medium" id="beta-banner">Beta banner</h3>
 <code class="language-markup">
   {% include "snippets/encoded/phase_banner_beta.html" %}
 </code>
+</pre>
+
+<h3 class="heading-medium" id="phase-tags">Alpha and Beta phase tags</h3>
+<p>
+  Phase tags are mostly used inside phase banners as an indication of the state of a project. It’s possible to use them outside phase banners, for example as part of a service header.
+</p>
+
+<h4 class="heading-small">Alpha tag</h4>
+<div class="example">
+  {% include "snippets/phase_tag_alpha.html" %}
+</div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/phase_tag_alpha.html" %}
+</code>
+</pre>
+
+  <h4 class="heading-small">Beta tag</h4>
+  <div class="example">
+    {% include "snippets/phase_tag_beta.html" %}
+  </div>
+
+<pre>
+<code class="language-markup">
+  {% include "snippets/encoded/phase_tag_beta.html" %}
+</code>
 </pre>
 
   <h3 class="heading-medium" id="creating-phase-banners">Creating alpha and beta banners</h3>

diff --git a/app/views/snippets/phase_tag_alpha.html b/app/views/snippets/phase_tag_alpha.html
@@ -0,0 +1 @@
+<strong class="phase-tag">ALPHA</strong>
diff --git a/app/views/snippets/phase_tag_beta.html b/app/views/snippets/phase_tag_beta.html
@@ -0,0 +1 @@
+<strong class="phase-tag">BETA</strong>
diff --git a/public/sass/elements/_phase-banner.scss b/public/sass/elements/_phase-banner.scss
@@ -1,4 +1,4 @@
-// Phase banners
+// Phase banners and tags
 // ==========================================================================
 
 .phase-banner {
@@ -11,3 +11,7 @@
 .phase-banner-beta {
   @include phase-banner();
 }
+
+.phase-tag {
+  @include phase-tag();
+}