Merge pull request #2135 from alphagov/add-icon-support

Add icon for banner

app/assets/stylesheets/helpers/_header.scss

@@ -516,6 +516,30 @@ $covid-grey: #262828;
   }
 }
 
+.global-bar-title__icon {
+  display: inline-block;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 50px;
+  min-height: 45px;
+  background-image: image-url("covid-arrow.png"); // PNG fallback for SVG
+  background-image: image-url("covid-arrow.svg");
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+  background-size: 37px auto;
+
+  @include govuk-media-query($from: desktop) {
+    // IE10/11 specific - vertical align in flexbox is ignored
+    // unless an explicit height is set
+    @media screen and (min-width:0\0) {
+      height: 45px;
+    }
+  }
+}
+
 .global-bar-dismiss-wrapper {
   margin-top: govuk-spacing(4);
 }

app/views/notifications/_covid_logos.html.erb

@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="global-bar-image govuk-grid-column-one-third" fill="none" viewBox="0 0 301 39" alt="Stay at home. Protect the NHS. Save lives.">
+<%
+  alt_text = "Stay at home. Protect the NHS. Save lives."
+%>
+
+<svg xmlns="http://www.w3.org/2000/svg" class="global-bar-image govuk-grid-column-one-third" fill="none" viewBox="0 0 301 39" aria-labelledby="global-bar-image__alt-text">
+  <title id="global-bar-image__alt-text"><%= alt_text %></title>
   <g fill="#F9F9F9" clip-path="url(#clip0)">
     <path d="M233.476 8.5038c-3.737-3.70831-9.77-3.70831-13.506 0l-.331.33006-.331-.33006c-3.717-3.72772-9.769-3.72772-13.506 0-3.736 3.7083-3.736 9.7465 0 13.4742l.331.33 8.602 8.5816 2.004 1.9997.039.0389.857.8542c1.128 1.1067 2.919 1.1067 4.047 0l.798-.796 2.083-2.0774 8.601-8.5815.331-.3301c3.737-3.7083 3.756-9.727.039-13.43535-.039-.01942-.058-.03883-.058-.05825zM241.824 10.2704h3.697v1.9609c.564.1554 1.187.2136 1.966.2136 1.167 0 1.887-.4077 1.887-1.2814 0-.9902-1.07-1.22315-2.88-1.59204-2.238-.52421-4.865-1.35907-4.865-4.50434 0-3.10644 2.355-5.0285458 6.617-5.0285458 2.452 0 4.515.6018728 5.624 1.1260858v3.55299h-3.523V2.91203c-.408-.15532-1.128-.2524-1.751-.2524-1.129 0-1.81.46597-1.81 1.22316 0 1.02901 1.148 1.1455 2.802 1.51439 2.219.52421 4.963 1.37848 4.963 4.60141 0 3.20351-2.335 5.08681-6.675 5.08681-2.627 0-4.749-.6601-6.033-1.1455v-3.6695h-.019zM260.389 2.97053c.117.34948.214.69895.214 1.10667 0 1.37848-1.148 2.38807-2.685 2.38807-1.81 0-2.822-.91251-2.822-2.56281C255.077 1.30082 257.704 0 262.394 0c5.138 0 7.025 1.33965 7.025 5.02855v5.76635c0 .6795.156.9125.565.9125h.759v2.9705h-5.664c-.681-.6407-.973-1.2037-1.284-2.1745-.701 1.4756-2.647 2.5822-4.748 2.5822-2.764 0-4.399-1.6308-4.399-3.8442 0-4.01893 4.963-4.65963 9.108-5.378v-.77661c0-1.51439-.623-2.21333-2.218-2.21333-.487-.01942-.857.03883-1.149.09707zm3.348 6.05756V7.97966c-2.024.31065-3.795.77661-3.795 2.44634 0 .8737.603 1.4561 1.459 1.4561 1.557 0 2.336-1.1649 2.336-2.85401zM279.247 9.80469c.778-1.94152 1.693-4.27135 2.043-5.26153.253-.71836 0-1.16491-.622-1.16491h-.876V.407715h6.792V3.37825h-.662c-.584 0-.837.17473-1.129.8931l-4.456 10.56185h-4.398l-4.574-10.56185c-.292-.7572-.525-.8931-.953-.8931h-.662V.407715h8.718V3.37825h-.758c-.584 0-.818.40772-.584 1.06783.428 1.22316 1.362 3.47533 2.121 5.35861z"/>
     <path d="M291.526 8.58179c.097 2.11631 1.323 3.10641 3.289 3.10641 1.771 0 2.724-.9319 3.23-2.03857l2.647 1.88327c-1.051 1.9998-3.133 3.5142-7.026 3.5142-5.196 0-7.998-3.0871-7.998-7.57198 0-4.50433 3.075-7.5136942 7.843-7.5136942 4.962 0 7.298 2.8734542 7.298 7.9990842v.58245h-9.283v.03883zm-.078-2.44632h3.989c-.058-2.34924-.603-3.20351-1.868-3.20351-1.362 0-2.004.91251-2.121 3.20351zM241.144 34.7922h.778c.351 0 .545-.1165.545-.8931V22.4635c0-.8154-.116-1.0484-.545-1.0484h-.914v-2.9899h3.542c1.576 0 2.88-.1748 3.639-.3495v15.804c0 .7766.214.8931.545.8931h.642v2.9705h-8.232v-2.9511zM249.551 34.7923h.778c.409 0 .545-.2135.545-.8931v-6.2517c0-.8737-.156-1.1649-.642-1.1649h-.701v-2.9899h3.425c1.577 0 2.881-.1748 3.64-.3495v10.7366c0 .699.155.8931.544.8931h.74v2.9706h-8.349v-2.9512h.02zm1.167-14.8332c0-1.5726 1.187-2.6793 2.997-2.6793 1.81 0 2.997 1.1067 2.997 2.6793s-1.187 2.6793-2.997 2.6793c-1.81 0-2.997-1.1067-2.997-2.6793z"/>
@@ -19,7 +24,6 @@
     </clipPath>
   </defs>
   <%= tag.image(src: image_url("covid.png"),
-      class: "global-bar-image govuk-grid-column-one-third",
-      alt: "Stay at home. Protect the NHS. Save lives.",
+      alt: alt_text,
       "xlink:href": "") %>
 </svg>

app/views/notifications/_global_bar.html.erb

@@ -2,6 +2,7 @@
   show_global_bar ||= true # Toggles the appearance of the global bar
   title = "Coronavirus (COVID-19): what you need to do"
   title_href = "/coronavirus"
+  title_icon = true
   link_text = false
   link_href = false
 
@@ -15,6 +16,7 @@
   title_classes = %w(global-bar-title)
   title_classes << "js-call-to-action" if title_href
   title_classes << "govuk-link" if title_href
+  title_icon_class = "global-bar-title__icon" if title_icon
 
   dismiss_classes = %w(global-bar__dismiss global-bar__dismiss--show dismiss)
   dismiss_classes << "govuk-link"
@@ -35,7 +37,9 @@
     <div class="global-bar-message govuk-width-container">
       <% if title %>
         <% if title_href %>
-          <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>"><%= title %></a>
+          <span class="<%= title_icon_class %>">
+            <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>"><%= title %></a>
+          </span>
         <% else %>
           <span class="<%= title_classes.join(' ') %>"><%= title %></span>
         <% end %>