Merge pull request #4452 from alphagov/add-glance-metric-component

Add a `glance_metric` component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add a `glance_metric` component ([PR #4452](https://github.com/alphagov/govuk_publishing_components/pull/4452))
+
 ## 46.0.0
 
 * **BREAKING** Stop setting `id` on fieldsets ([PR #4454](https://github.com/alphagov/govuk_publishing_components/pull/4454))

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -38,6 +38,7 @@
 @import "components/feedback";
 @import "components/fieldset";
 @import "components/file-upload";
+@import "components/glance-metric";
 @import "components/govspeak-html-publication";
 @import "components/govspeak";
 @import "components/heading";

app/assets/stylesheets/govuk_publishing_components/components/_glance-metric.scss

@@ -0,0 +1,75 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-glance-metric {
+  border-top: 1px solid $govuk-border-colour;
+  border-bottom: 0;
+  @include govuk-responsive-margin(6, "bottom");
+
+  &__heading {
+    min-height: 2.6em;
+    @include govuk-font($size: 24, $weight: bold);
+
+    @include govuk-responsive-margin(3, "top");
+    @include govuk-responsive-margin(1, "bottom");
+    @include govuk-responsive-padding(3, "top");
+
+    @include govuk-media-query($until: tablet) {
+      min-height: 4em;
+    }
+
+    @include govuk-media-query($until: mobile) {
+      min-height: 0;
+    }
+  }
+
+  &__figure {
+    display: flex;
+    @include govuk-font($size: 36, $weight: bold);
+    @include govuk-responsive-margin(1, "bottom");
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font($size: 48, $weight: bold);
+    }
+  }
+
+  &__explicit-label {
+    @include govuk-visually-hidden;
+  }
+
+  &__context {
+    min-height: 5em;
+    border-bottom: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(16);
+      min-height: 0;
+      border-bottom: 0;
+    }
+  }
+
+  &__trend {
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(24);
+    }
+
+    &-text {
+      @include govuk-visually-hidden;
+    }
+
+    &-icon {
+      color: govuk-colour("dark-grey");
+
+      @include govuk-media-query($until: mobile) {
+        @include govuk-font(19);
+      }
+    }
+  }
+
+  &__period {
+    @include govuk-responsive-margin(6, "bottom");
+
+    @include govuk-media-query($until: mobile) {
+      @include govuk-font(16);
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+<%
+  add_gem_component_stylesheet("glance-metric")
+
+  name ||= false
+  figure ||= nil
+  context ||= ""
+  measurement_display_label ||= ""
+  measurement_explicit_label ||= ""
+
+  local_assigns[:heading_level] ||= 3
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-glance-metric govuk-body")
+%>
+<% if name %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "gem-c-glance-metric__heading") do %>
+      <%= name %>
+    <% end %>
+
+    <% if figure.nil? %>
+      <span class="gem-c-glance-metric__figure">No data</span>
+    <% else %>
+      <span class="gem-c-glance-metric__figure">
+        <%= figure %>
+        <% if measurement_display_label.present?  %>
+          <span class="gem-c-glance-metric__display-label" aria-hidden="true"><%= measurement_display_label %></span>
+        <% end %>
+        <% if measurement_explicit_label.present? %>
+          <span class="gem-c-glance-metric__explicit-label"><%= measurement_explicit_label %></span>
+        <% end %>
+    <% end %>
+    </span>
+    <p class="gem-c-glance-metric__context govuk-body-xs"><%= context %></p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,37 @@
+name: "Glance metric"
+description: "The glance metric component is an at-a-glance view of data for a content item. The minimum requirements for it to display are a name and figure. "
+part_of_admin_layout: true
+body: |
+
+accessibility_criteria: |
+  This component must:
+  
+  - include an explicit label when an abbreviated label is also used
+  - communicate number value and label (if present) in a single dictation when read with a screen reader
+  - convey the meaning of the number shown
+  - The component must use the correct heading level for the page (defaults to `<h3>`) 
+
+shared_accessibility_criteria:
+  - link
+
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+      name: "Unique pageviews"
+      figure: "167"
+      measurement_display_label: "m"
+      measurement_explicit_label: "million"
+      context: "This is in your top 10 items"
+  no measurement labels:
+    data:
+      name: "Feedback comments"
+      figure: "35"
+  custom heading level:
+    description: A custom heading level can be specified if necessary. Defaults to a `h3`. The heading level does not change any styling.
+    data:
+      name: "Feedback comments"
+      figure: "35"
+      measurement_display_label: "m"
+      measurement_explicit_label: "million"
+      heading_level: 2

spec/components/glance_metric_spec.rb

@@ -0,0 +1,55 @@
+require "rails_helper"
+
+describe "Glance Metric", type: :view do
+  def component_name
+    "glance_metric"
+  end
+
+  let(:data) do
+    {
+      name: "Unique pageviews",
+      figure: "167",
+      measurement_explicit_label: "Million",
+      measurement_display_label: "m",
+      context: "This is in your top 10 items",
+      period: "Apr 2018 to Mar 2018",
+    }
+  end
+
+  it "does not render when no data is given" do
+    assert_empty render_component({})
+  end
+
+  it "does not render if name is not supplied" do
+    data[:name] = false
+    assert_empty render_component(data)
+  end
+
+  it "renders no data if figure is not present" do
+    data[:figure] = nil
+    render_component(data)
+    assert_select ".gem-c-glance-metric__figure", text: "No data"
+  end
+
+  it "renders correctly when given valid data" do
+    render_component(data)
+    assert_select ".gem-c-glance-metric"
+    assert_select "h3.gem-c-glance-metric__heading", text: "Unique pageviews"
+    assert_select ".gem-c-glance-metric__figure", text: /167/
+    assert_select ".gem-c-glance-metric__display-label", text: "m"
+    assert_select ".gem-c-glance-metric__explicit-label", text: "Million"
+    assert_select ".gem-c-glance-metric__context", text: "This is in your top 10 items"
+  end
+
+  it "allows a heading level to be specified" do
+    data[:heading_level] = 2
+    render_component(data)
+    assert_select "h2.gem-c-glance-metric__heading", text: "Unique pageviews"
+  end
+
+  it "does not show a label if no explicit measurement label is provided" do
+    data[:measurement_explicit_label] = nil
+    render_component(data)
+    assert_select ".gem-c-glance-metric__explicit-label", 0
+  end
+end

spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb

@@ -19,7 +19,7 @@ def request
     end
 
     it "detect the total number of stylesheet paths" do
-      expect(get_component_css_paths.count).to eql(81)
+      expect(get_component_css_paths.count).to eql(82)
     end
 
     it "initialize empty asset helper" do