From fe9e8e5283bf79b488fc89cf6ee1d5548e071c08 Mon Sep 17 00:00:00 2001
From: Edd Sowden <e@e26.co.uk>
Date: Fri, 9 Jan 2015 15:50:41 +0000
Subject: [PATCH] Add an alpha label component

The same as the beta, but alpha. For things that are newer and haven't
yet proven their worth.
---
 .../stylesheets/govuk-component/_alpha-label.scss    |  3 +++
 .../stylesheets/govuk-component/_component.scss      |  1 +
 app/views/govuk_component/alpha_label.raw.html.erb   | 12 ++++++++++++
 app/views/govuk_component/docs.yml                   |  9 ++++++++-
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/stylesheets/govuk-component/_alpha-label.scss
 create mode 100644 app/views/govuk_component/alpha_label.raw.html.erb

diff --git a/app/assets/stylesheets/govuk-component/_alpha-label.scss b/app/assets/stylesheets/govuk-component/_alpha-label.scss
new file mode 100644
index 000000000..fcfa9dfcf
--- /dev/null
+++ b/app/assets/stylesheets/govuk-component/_alpha-label.scss
@@ -0,0 +1,3 @@
+.govuk-alpha-label {
+  @include phase-banner($state: alpha);
+}
diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss
index d2714e991..ef2199fe1 100644
--- a/app/assets/stylesheets/govuk-component/_component.scss
+++ b/app/assets/stylesheets/govuk-component/_component.scss
@@ -4,6 +4,7 @@
 @import "design-patterns/alpha-beta";
 
 // Components styles
+@import "alpha-label";
 @import "beta-label";
 @import "document-footer";
 @import "govspeak";
diff --git a/app/views/govuk_component/alpha_label.raw.html.erb b/app/views/govuk_component/alpha_label.raw.html.erb
new file mode 100644
index 000000000..15f71be03
--- /dev/null
+++ b/app/views/govuk_component/alpha_label.raw.html.erb
@@ -0,0 +1,12 @@
+<div class="govuk-alpha-label">
+  <p>
+    <strong class="phase-tag">Alpha</strong>
+    <span>
+      <% if local_assigns.include?(:message) %>
+        <%= raw message %>
+      <% else %>
+        This part of GOV.UK is being built &ndash; <a href="/service-manual/phases/ideal-alphas">find out what this means</a>
+      <% end %>
+    </span>
+  </p>
+</div>
diff --git a/app/views/govuk_component/docs.yml b/app/views/govuk_component/docs.yml
index d64338904..03220b5c3 100644
--- a/app/views/govuk_component/docs.yml
+++ b/app/views/govuk_component/docs.yml
@@ -1,6 +1,13 @@
+- id: "alpha_label"
+  name: "Alpha Banner"
+  description: "A banner that indicates content is in an alpha phase with an optional explanation"
+  fixtures:
+    default: {}
+    with_message:
+      message: "This is an optional different message to explain what Alpha means in this context which can take <a href='https://www.gov.uk'>HTML</a>"
 - id: "beta_label"
   name: "Beta Banner"
-  description: "A banner than indicates content is in a beta phase with an optional explanation"
+  description: "A banner that indicates content is in a beta phase with an optional explanation"
   fixtures:
     default: {}
     with_message: