search

alphagov / govuk_publishing_components

A gem to document and distribute frontend components for GOV.UK applications
https://components.publishing.service.gov.uk
MIT License
66 stars 20 forks source link

Componentise large numbers #2221

Closed chris-gds closed 3 years ago

chris-gds commented 3 years ago

What

"Big numbers" was an element that we believe qualifies for being a Component

Why

Reasons for doing this:

Visuals

image

More context

owenatgov commented 3 years ago

API proposal

High level

We present the big numbers component as part of a list of values~with an optional heading. The default heading level is h3 unless otherwise specified~. Each value will be a number, can have an associated "label" (not a literal label tag) and can be a link. The latter 2 attributes of the component are optional.

Users can also communicate that a number is a "minimum" to a given value by adding a "+" to the end of the number eg: 400+ government agencies.

Example API calls

With labels and links

<%= render "govuk_publishing_components/components/big_number", {
    items: [
        {
            number: 116,
            label: "Open consultations",
            href: "/government/publications?publication_filter_option=open-consultations",
        },
        {
            number: 553,
            label: "Closed consultations in the past 12 months",
            href: "/government/publications?publication_filter_option=open-consultations",
        },
    ],
} %>

Live example

With "plus"

<%= render "govuk_publishing_components/components/big_number", {
    items: [
        {
            number: 23,
            label: "Ministerial departments",
            href: "/organisations#ministerial_departments",
        },
        {
            number: 400,
            show_plus: true,
            label: "Other agencies",
            href: "/councils",
        },
    ],
} %>

Live example

No links or labels

<%= render "govuk_publishing_components/components/big_number", {
    heading: "Ministerial departments",
    heading_level: 2,
    items: [
        {
            number: 23,
        },
    ],
} %>

Live example

owenatgov commented 3 years ago

Markup and design proposal

The below is based on the above API proposal.

Markup

Number values should be split into list items within an unordered list unless they are a single value, in which case the markup for the value itself will be produced.

Each value item should primarily consist of a span containing the number itself. If a label is present, a second span will be present containing the label. If a href is specified, the element will be wrapped in a link.

The heading should use the heading component and will ingest the heading_level attribute if present.

There should be no need for any additional attributes such as aria or data at this stage. There is no tracking on any uses of the big number presently and it is standard practice on the components gem to only extend components as and when we need to.

Styling

The explore team will soon be iterating on the gov.uk homepage. Included in the proposed design is a unified version of the big number component, as used on the homepage. I've discussed this with the designer and propose the following:

Screenshot 2021-08-18 at 17 36 22

We should use a similar hover behaviour to that seen on the previous and next navigation where, if present, the label is the visual indicator of hover wherein the line thickness will change as per the standard govuk-link behaviour. Otherwise the number will include an underline on hover.

The label should be separated from the associated number using a pseudo element to mock a block-level relationship, like so:

.gem-c-big-number__label {
    &:before {
        content: "";
        display: block;
    }
}

This is to bypass a quirk of NVDA where anything listed as block-level is dictated separately. Whilst not a WCAG fail, it could be a jarring experience for NVDA users.

The focus state should not need to be updated with any additional styling.

alex-ju commented 3 years ago

The above proposition sounds good to me 👍

The heading should use the heading component and will ingest the heading_level attribute if present.

In regards to the heading, I would avoid nesting components, if possible (as we may need more flexibility), in favour of using helpers/presenters – this was we share the logic without introducing interdependencies.

owenatgov commented 3 years ago

After chatting to Alex outside of this issue I've decided to remove the option to include a heading in the component. This feature is infrequent enough that it's presently reasonable to simple ask the developer to use a heading component outside the big number component if they need one.

owenatgov commented 3 years ago

A couple of updates:

  1. Following some discussion on the PR, this component will now only support the rendering of one number value at a time. If there's a need for a list of big number components, we can utilise multiple calls or a single call within a loop, the latter being how most bespoke big number implementations work currently anyway.
  2. This component now supports data attributes. This is in response to this PR https://github.com/alphagov/frontend/pull/2926 which adds tracking to multiple elements on the homepage, including the currently big number implementation.
injms commented 3 years ago

Can this be closed, as https://github.com/alphagov/govuk_publishing_components/pull/2278 has been merged in?

owenatgov commented 3 years ago

I'm gonna hold off on closing as we haven't rolled the component out and it isn't being used anywhere yet. I've got a plan to look into getting it onto the site this week.

owenatgov commented 3 years ago

As the work on this has progressed quite significantly and we now have the component and at least have PR's on it in multiple places, I'm calling this closed.