Add the environment indicator to header

This adds the environment indicator (staging, integration, development) to the header. From user research we've seen that it might prevent confusion, especially because we currently show the tag in all interfaces. Note that we're not adding this to production, which won't have any overridden styling. https://trello.com/c/05wMNlxg
alphagov · Oct 2, 2018 · 700ad7e · 700ad7e
1 parent 74790d3
commit 700ad7e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
@@ -10,3 +10,22 @@
 .gem-c-layout-header--test .govuk-header__container {
   border-bottom-color: govuk-colour("grey-1");
 }
+
+.govuk-header__logo {
+  white-space: nowrap;
+}
+
+.gem-c-environment-tag {
+  vertical-align: text-bottom;
+  margin-left: 3px;
+}
+
+.gem-c-environment-tag--development {
+  background-color: govuk-colour("grey-1");
+}
+
+.gem-c-environment-tag--staging,
+.gem-c-environment-tag--integration {
+  background-color: govuk-colour("yellow");
+  color: govuk-colour("black");
+}
diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb
@@ -18,12 +18,19 @@
             GOV.UK
           </span>
         </span>
+
         <% if product_name %>
         <span class="govuk-header__product-name">
           <%= product_name %>
         </span>
         <% end %>
       </a>
+
+      <% unless environment == "production" %>
+        <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
+          <%= environment %>
+        </span>
+      <% end %>
     </div><div class="govuk-header__content">
 
     <% if navigation_items.any? %>

diff --git a/spec/dummy/app/views/layouts/dummy_admin_layout.html.erb b/spec/dummy/app/views/layouts/dummy_admin_layout.html.erb
@@ -1,4 +1,4 @@
-<% environment = "production" %>
+<% environment = %w[development production staging integration].sample %>
 
 <%= render 'govuk_publishing_components/components/layout_for_admin', {
   environment: environment,
@@ -7,7 +7,7 @@
   <%= render "govuk_publishing_components/components/skip_link" %>
   <%= render "govuk_publishing_components/components/layout_header", {
     environment: environment,
-    product_name: "Admin",
+    product_name: "Publishing",
     navigation_items: [
       {text: "John Doe", href: "#profile"},
       {text: "Log out", href: "#logout"}