Merge pull request #557 from alphagov/environment-flag

Update the header
alphagov · Oct 3, 2018 · 96129e1 · 96129e1
2 parents 74790d3 + 454a4a0
commit 96129e1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 16 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
@@ -1,6 +1,10 @@
 @import "helpers/govuk-frontend-settings";
 @import "govuk-frontend/components/header/header";
 
+.gem-c-layout-header--production .govuk-header__container {
+  border-bottom-color: govuk-colour("bright-red");
+}
+
 .gem-c-layout-header--integration .govuk-header__container,
 .gem-c-layout-header--staging .govuk-header__container {
   border-bottom-color: govuk-colour("yellow");
@@ -10,3 +14,36 @@
 .gem-c-layout-header--test .govuk-header__container {
   border-bottom-color: govuk-colour("grey-1");
 }
+
+.govuk-header__logo {
+  white-space: nowrap;
+}
+
+.govuk-header__product-name {
+  display: none;
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+  }
+}
+
+.gem-c-environment-tag {
+  padding: 2px 5px 0;
+  margin-left: 3px;
+  vertical-align: middle;
+  @include govuk-font($size: 14, $weight: "bold");
+}
+
+.gem-c-environment-tag--production {
+  background-color: govuk-colour("bright-red");
+}
+
+.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
@@ -1,5 +1,4 @@
 <%
-  product_name ||= false
   navigation_items ||= []
 %>
 <header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %>" role="banner" data-module="header">
@@ -18,12 +17,16 @@
             GOV.UK
           </span>
         </span>
-        <% if product_name %>
+
         <span class="govuk-header__product-name">
-          <%= product_name %>
+          Publishing
+        </span>
+
+        <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
+          <%= environment %>
         </span>
-        <% end %>
       </a>
+
     </div><div class="govuk-header__content">
 
     <% if navigation_items.any? %>

diff --git a/app/views/govuk_publishing_components/components/docs/layout_header.yml b/app/views/govuk_publishing_components/components/docs/layout_header.yml
@@ -19,10 +19,6 @@ examples:
   development_environment:
     data:
       environment: development
-  with_product_name:
-    data:
-      environment: production
-      product_name: Product
   with_navigation:
     data:
       environment: production

diff --git a/spec/components/layout_header_spec.rb b/spec/components/layout_header_spec.rb
@@ -17,12 +17,6 @@ def component_name
     assert_select ".govuk-header.gem-c-layout-header--staging"
   end
 
-  it "renders the product name" do
-    render_component(environment: "staging", product_name: "Product name")
-
-    assert_select ".govuk-header__product-name", text: "Product name"
-  end
-
   it "renders the header with navigation items" do
     navigation_items = [
       { text: "Foo", href: "/foo", active: true },

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,6 @@
   <%= render "govuk_publishing_components/components/skip_link" %>
   <%= render "govuk_publishing_components/components/layout_header", {
     environment: environment,
-    product_name: "Admin",
     navigation_items: [
       {text: "John Doe", href: "#profile"},
       {text: "Log out", href: "#logout"}