Agree how to structure the cookie banner (one or two components)

vanitabarrett commented 3 years ago

What

Decide if the cookie banner and the confirmation banner are the same component. Could be:

A single component which encapsulates the question banner and the confirmation banner
Two components, one for the question banner and one for the confirmation banner

Why

Making a decision about this upfront will simplify the development process. We've done some prototyping of both options here: https://github.com/alphagov/govuk-frontend/pull/2081

Who needs to know about this

Developers Technical Writers / Content Design Designers

Done when

[x] Run a risk assessment of each options
[x] Made a decision on which option to implement
[x] Documented our decision and reasoning

vanitabarrett commented 3 years ago

I think there's at least 3 different ways this component could be used, and they each probably need slightly different treatments…

Server-side

When the 'accept all' / 'reject all' buttons are pressed, the browser POSTs to the server, and a full page navigation occurs.

The buttons in the cookie banner must be able to belong to a form
It must be possible to render the 'accepted' / 'rejected' banner from the server side separately to the main banner
Should the accepted / rejected banner be read in this situation? Is it important enough to be steal focus when the page loads?

Client-side (synchronous)

When the 'accept all' / 'reject all' buttons are pressed, the client-side JavaScript provided by the service team sets any required cookies and fires any other events required, and the cookie banner is replaced by the 'accepted' / 'rejected' banner immediately.

The service's client-side JavaScript must manage focus as the button that was clicked is no longer visible.
The service's client-side JavaScript needs a way to make the 'accepted' / 'rejected' banner visible.
The accepted / rejected banner should probably be read?

This only works if cookies are only set from the client-side JS, and not from the server?

Client-side (asynchronous)

When the 'accept all' / 'reject all' buttons are pressed, an AJAX request is made to the server.

The 'accepted' / 'rejected' banner is either displayed immediately or after the request has completed (see below).

The service's client-side JavaScript must manage focus as the button that was clicked is no longer visible.
The service's client-side JavaScript needs a way to make the 'accepted' / 'rejected' banner visible.
Is the 'accepted' / 'rejected' banner displayed immediately even though the AJAX request might fail?
If we wait for the AJAX request to complete...
- what happens between the button being pressed and the AJAX request completing successfully?
- what do we do when the request completes? Do we shift focus, even though the user might have moved on down the page?
- what happens if the AJAX request fails?
If we optimistically show the 'accepted' / 'rejected' banner immediately...
- what happens if the AJAX request then fails?
Presumably this would be progressively enhanced from the server-side approach so that if JS is not enabled the user can still control their cookie preferences.

Originally posted by @36degrees in https://github.com/alphagov/design-system-team-internal/issues/402#issuecomment-739949168

vanitabarrett commented 3 years ago

Summary

There were 3 different options which we prototyped:

One component - strict macro options which are different for each banner, e.g: a user would need to provide params for confirmationBanner and a questionBanner.
One component - generic macro options which are the same for each banner, e.g: a user can pass an array of banners each with a number of actions.
Two components - one question banner and one confirmation banner

The design of the banners means we should be able to make the options generic (apply to all), and this would also help to simplify the Nunjucks API. We've therefore decided to go with Option 2 for now, but to keep an open mind as we start building the component. If anything crops up, we may need to revisit this decision.

Example

An example of what Option 2 might look like. A fuller example has been implemented in the prototype here

We still need to make decisions on the following:

{{ govukCookieBanner({
    banners: [{
      title: "Cookies on [service name]",
      html: "<p>We use cookies to make this service work</p><p>We'd like to set some additional cookies so we can remember your settings, understand how you use the service and make improvements.</p>",
      attributes: {
        "data-module": "govuk-cookie-banner-question"
      },
      actions: [
        {
          text: "Accept cookies",
          attributes: {
            "data-accept-cookies": "accept"
          }
        },
        {
          text: "Reject cookies",
          attributes: {
            "data-reject-cookies": "reject"
          }
        },
        {
          text: "View cookies and set preferences",
          href: "/cookie-preferences"
        }
      ]
    }, {
      html: "<p>You've accepted additional cookies. You can <a href='/cookie-preferences'>change your cookie settings</a> at any time.</p>",
      attributes: {
        "data-module": "govuk-cookie-banner-accept",
        "tabindex": "-1"
      },
      hidden: true
    }, {
      html: "<p>You've rejected additional cookies. You can <a href='/cookie-preferences'>change your cookie settings</a> at any time.</p>",
      attributes: {
        "data-module": "govuk-cookie-banner-reject",
        "tabindex": "-1"
      },
      hidden: true
    }]
  }) }}

alphagov / govuk-frontend