Clean up component options

- remove option to pass a link for the non-title text as not currently needed
- rename options to just title and text, simpler
- remove show banner option, use existence of title as basis for displaying banner
- make banner appear in component guide
- write some rspec tests

app/views/govuk_publishing_components/components/_global_bar.html.erb

@@ -1,9 +1,9 @@
 <%
-  show_global_bar = false
+  add_gem_component_stylesheet("global-bar")
+
   title ||= nil
   title_href ||= nil
-  link_text ||= nil
-  link_href = false
+  text ||= nil
 
   # Toggles banner being permanently visible
   # If true, banner is always_visible & does not disappear automatically after 3 pageviews
@@ -21,40 +21,21 @@
     type: "global bar",
     section: title,
   }.to_json
-
--%>
-
-<% if show_global_bar %>
-  <!--[if gt IE 7]><!-->
+%>
+<% if title %>
   <div id="global-bar" class="<%= global_bar_classes.join(' ') %>" data-module="global-bar" <%= "data-global-bar-permanent=true" if always_visible %> data-nosnippet>
     <p class="gem-c-global-bar-message govuk-width-container">
-      <% if title %>
-        <% if title_href %>
-          <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a>
-        <% else %>
-          <span class="<%= title_classes.join(' ') %>"><%= title %></span>
-        <% end %>
+      <% if title_href %>
+        <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a>
+      <% else %>
+        <span class="<%= title_classes.join(' ') %>"><%= title %></span>
       <% end %>
 
-      <% if link_text %>
+      <% if text %>
         <span class="gem-c-global-bar-text">
-        <% if link_href %>
-          <%= link_to(
-            link_text,
-            link_href,
-            rel: "external noreferrer",
-            class: "govuk-link js-call-to-action",
-            data: {
-              module: "ga4-link-tracker",
-              ga4_link: ga4_data,
-            },
-          ) %>
-        <% else %>
-          <%= link_text %>
-        <% end %>
+          <%= text %>
         </span>
       <% end %>
     </p>
   </div>
-  <!--<![endif]-->
 <% end %>

app/views/govuk_publishing_components/components/docs/global_bar.yml

@@ -1,10 +1,21 @@
 name: Global banner
 description: A site-wide banner used to convey important information
 body: |
-  See the [opsmanual](https://docs.publishing.service.gov.uk/apps/static/global-banner.html) for information about what the Global banner is and when it should be activated.
+  The [dev docs](https://docs.publishing.service.gov.uk/manual/global-banner.html) contains information about this component and when it should be used.
 accessibility_criteria: |
   The link must:
 
   * be keyboard focusable
 examples:
-  default: {}
+  default:
+    data:
+      title: Bring photo ID to vote
+  with_a_link:
+    data:
+      title: Bring photo ID to vote
+      title_href: "https://www.gov.uk"
+  with_a_link_and_text:
+    data:
+      title: Bring photo ID to vote
+      title_href: "https://www.gov.uk"
+      text: Check what photo ID you'll need to vote in person in the General Election on 4 July.

spec/components/global_bar_spec.rb

@@ -4,4 +4,24 @@
   def component_name
     "global_bar"
   end
+
+  it "renders nothing without a title" do
+    assert_empty render_component({})
+  end
+
+  it "renders with a title" do
+    render_component(title: "Look here you")
+    assert_select ".gem-c-global-bar", text: "Look here you"
+  end
+
+  it "renders with a title and a link" do
+    render_component(title: "Look here you", title_href: "https://www.gov.uk")
+    assert_select ".gem-c-global-bar a.gem-c-global-bar-title", text: "Look here you"
+  end
+
+  it "renders with a title and text" do
+    render_component(title: "Look here you", text: "This is important")
+    assert_select ".gem-c-global-bar .gem-c-global-bar-title", text: "Look here you"
+    assert_select ".gem-c-global-bar .gem-c-global-bar-text", text: "This is important"
+  end
 end