Add the environment indicator

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.
alphagov · Oct 2, 2018 · 454a4a0 · 454a4a0
1 parent 01d27bc
commit 454a4a0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 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
@@ -14,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
@@ -21,6 +21,10 @@
         <span class="govuk-header__product-name">
           Publishing
         </span>
+
+        <span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
+          <%= environment %>
+        </span>
       </a>
 
     </div><div class="govuk-header__content">