alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Design Nunjucks API for cookie banner component #2101

Closed hannalaakso closed 3 years ago

hannalaakso commented 3 years ago

What

Work out what the API for the cookie banner and 'You’ve accepted all cookies' banner should look like.

Where possible, it should be consistent with the APIs for our existing components.

There are a few things we need to consider:

Depends on

Why

By designing and agreeing the API for the component upfront we can ensure that it behaves consistently with our other components.

Who needs to know about this

Developers

Done when

vanitabarrett commented 3 years ago

No decision made yet, but the current thinking is to have the banners (question and confirmation) as the same component and behaving as similarly as possible. We can then have quite a generic API which looks something like this:

govukCookieBanner({
    banners: [
        {
            heading: "Cookies on GOV.UK",
            text: "We use cookies on GOV.UK",
            actions: [
                {
                    text: "Accept cookies",
                    name: "cookies",
                    value: "accept"
                },
                {
                    text: "Reject cookies",
                    name: "cookies",
                    value: "reject",
                }
            ]
        },
        {
            text: "You have accepted cookies"
            actions: [
                {
                    text: "Hide banner"
                }
            ]
        }
    ]
})
vanitabarrett commented 3 years ago

Note that we'll need an ariaLabel option to override the default one

vanitabarrett commented 3 years ago

We may need the ability to turn off role=alert on confirmation banners

vanitabarrett commented 3 years ago

Draft doc: https://docs.google.com/document/d/1LNsNsIxwTw9zda89SyV1SKpe3lTVUpiT6p6SYp0LBZ0/edit# Shared with @hannalaakso @36degrees @EoinShaughnessy for review

vanitabarrett commented 3 years ago

Doc has been drafted and shared with @EoinShaughnessy. Going to close this card now as the tech writer/2i side is covered by https://github.com/alphagov/govuk-frontend/issues/2103