DevactionUI.CookieConsent (devaction_ui v0.2.3)

Copy Markdown View Source

The cookie notice, a bordered card anchored to the bottom of the page.

It has a short text, three actions (preferences, only the necessary, accept all) and, when the person asks for the preferences, the list of cookie categories each with its own switch.

It is a role="dialog" that is not modal (aria-modal="false"): the page behind stays usable, so nothing traps the focus and nothing takes it on mount. The server owns what is open and what is chosen: open shows the categories, preferences_event toggles them, necessary_event and accept_event answer the notice and category_event (with phx-value-id) flips a category; events are strings or %JS{}, and target serves a LiveComponent. A category with locked is on and cannot change (the necessary ones).

The DevactionUI.CookieConsent hook handles the keyboard and the focus: Esc closes only the categories (it presses the preferences button, so the server decides), opening them moves the focus to the first switch you can change when it was the preferences button that had it, and closing them returns it to the button if it was lost.

fixed (the default) anchors the notice to the bottom of the viewport; with fixed={false} it flows in the page, for a preview.

Summary

Functions

banner(assigns)

The cookie notice.

Functions

banner(assigns)

@spec banner(map()) :: Phoenix.LiveView.Rendered.t()

The cookie notice.

Attributes

  • id (:string) (required)
  • title (:string) (required) - the bold lead of the text; it names the dialog.
  • open (:boolean) - whether the list of categories is shown. Defaults to false.
  • fixed (:boolean) - anchored to the bottom of the viewport. Defaults to true.
  • privacy_label (:string) - the text of the link to the privacy policy. Defaults to nil.
  • privacy_href (:string) - Defaults to nil.
  • preferences_label (:string) (required)
  • preferences_event (:any) - string or %JS{}; toggles open on the server. Defaults to nil.
  • necessary_label (:string) (required)
  • necessary_event (:any) - Defaults to nil.
  • accept_label (:string) (required)
  • accept_event (:any) - Defaults to nil.
  • category_event (:any) - string or %JS{}, with phx-value-id of the category. Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - the text of the notice, after the title.
  • category - a kind of cookie with its switch. Accepts attributes:
    • id (:string) (required)
    • title (:string) (required)
    • description (:string)
    • checked (:boolean)
    • locked (:boolean) - on and unchangeable.