Merge pull request #527 from alphagov/alpha-label

Add an alpha label component

app/assets/stylesheets/govuk-component/_alpha-label.scss

@@ -0,0 +1,3 @@
+.govuk-alpha-label {
+  @include phase-banner($state: alpha);
+}

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";

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>

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: