hb-cookie-law-banner

Category: layout · Tags: layout, compliance

Fixed bottom cookie/consent bar built with Bulma (notification is-dark, columns, buttons). It stays visible until the visitor chooses Accept or (optionally) Decline, then hides and persists the choice in localStorage so repeat visits do not show the bar again.

Behavior and logic

1. Persistence — On Accept or Decline, the component writes localStorage.setItem("cookielaw", "yes" | "no") ("yes" for accept, "no" for decline). On load, if that key exists, the banner is treated as dismissed and does not show the visible state.

2. Visibility — The outer bar uses CSS (see Styling) to sit fixed at the bottom of the viewport. When a stored choice exists, the is-visible class is omitted so the bar animates to hidden (opacity / translate). When there is no stored choice, is-visible is applied so the bar appears (with a short transition delay).

3. allowdecline — Only the string "yes" enables the decline button. Any other value (including missing) is normalized to "no" in an effect: accept-only flow with a single primary button.

4. cookielawuri4more — The “Learn more” anchor is rendered when this attribute is not the literal string "no". If the URL is empty, the link still appears and points to https://wikipedia.org/wiki/HTTP_cookie. Set cookielawuri4more="no" to hide the link entirely.

5. capabilities — If passed as a JSON string (typical from HTML attributes), the component parses it in an effect. The current markup does not render group/item toggles or lists from capabilities; the shape exists in typings and metadata for integrators who may read the prop or extend the host app. The visible UI remains title, body, link, and buttons.

6. Internationalization — i18nlang selects entries from the built-in dictionary ("en", "it"). Strings include title, body, “Learn more”, “Accept”, and “Decline”. Override copy with slots when you need full control. (As shipped, the default body string under en may still be Italian; use the text slot for guaranteed locale-specific copy.)

7. Host logging — Choosing an option logs an informational message to the console (accept cookie law).

Layout

• Shell: Bulma notification is-dark is-radiusless mb-0 with role="alert".
• Grid: columns is-mobile is-vcentered is-multiline — on mobile the text column is full width (is-12-mobile); from tablet up, copy uses is-8-tablet and actions is-4-tablet.
• Actions column: Flex row with wrap, end justification, centered cross-axis, and gap between the optional link and buttons.
• Fixed positioning: Implemented in styles/webcomponent.scss (bottom edge, full width, z-index: 40), with horizontal column margins reset so the bar does not widen the document scroll width.

Custom element

hb-cookie-law-banner

Attributes / properties (snake_case, string-oriented)

Web component attributes are strings. Booleans use yes / no. Complex values such as capabilities are JSON strings.

| Attribute / prop | Type (logical) | Description | | --- | --- | --- | | id | string (optional) | Optional element id (standard host usage). | | style | string (optional) | Inline styles on the host (standard). | | allowdecline | "yes" | "no" (optional, default "no") | "yes" shows Decline; anything else behaves as "no". | | i18nlang | string (optional) | Language key, e.g. en, it. | | cookielawuri4more | string (optional) | Policy URL for “Learn more”. Omit or leave empty for the Wikipedia cookie fallback. Use the literal no to hide the link. | | capabilities | ICapabilities as JSON string (optional) | Structured groups/items for cookie metadata; parsed when provided as a string. Not used by the default UI (see Behavior). |

Events

| Event | detail | When | | --- | --- | --- | | acceptCookieLaw | { accepted: boolean } | After the user clicks Accept (true) or Decline (false, only if decline is enabled). The choice is written to localStorage before the event is dispatched. |

Slots

| Slot | Purpose | | --- | --- | | title | Replaces the default translated heading inside title is-5. | | text | Replaces the default translated paragraph inside content is-size-6. |

Default slot content comes from the i18n dictionary for the active i18nlang.

Styling

Bulma and host tokens

The component forwards Bulma Sass with theme variables on :host. Documented CSS custom properties (from metadata / extra/docs.ts):

| Variable | Role | | --- | --- | | --bulma-scheme-main | Scheme / surface for the dark notification bar. | | --bulma-text | Primary text (title and body). | | --bulma-link | “Learn more” link color on the inverted bar. | | --bulma-border | Useful if you extend the layout with extra separators. |

See Bulma CSS variables for the full token set available where Bulma is forwarded.

Component SCSS

styles/webcomponent.scss pins the bar to the bottom (position: fixed, inset-inline: 0, bottom: 0), hides it by default (opacity: 0, visibility: hidden, translateY(100%)), and reveals it with .hb-cookie-law.is-visible including transition timing.

CSS parts

None (::part not exposed).

TypeScript typings

Authoring types live in types/webcomponent.type.d.ts.

ICapabilities — Cookie catalog shape:

• groups: { _id, label, type }[]
• items: entries with groupId, title, scope, _id, cookieName, and optional fields such as description, descriptionUrl, thirdCompanyName, isMandatory, isTechnical, isMarketing, isThirdPartyOwned, isSessionCookie, cookieExpirationInSeconds

Component (props):

• id?, style?, allowdecline?, i18nlang?, cookielawuri4more?, capabilities? (typed as ICapabilities in TS; from HTML pass JSON string)

Events:

• acceptCookieLaw: { accepted: boolean }

Example

Minimal host page with English copy, optional policy URL, and decline enabled:

<hb-cookie-law-banner
  allowdecline="yes"
  i18nlang="en"
  cookielawuri4more="https://example.com/cookies"
></hb-cookie-law-banner>

<script>
  document.querySelector("hb-cookie-law-banner").addEventListener("acceptCookieLaw", (e) => {
    console.log(e.detail.accepted); // true = accept, false = decline
  });
</script>

Accept-only (no decline button):

<hb-cookie-law-banner allowdecline="no"></hb-cookie-law-banner>

Hide “Learn more”:

<hb-cookie-law-banner cookielawuri4more="no"></hb-cookie-law-banner>

Custom title and body via slots (shadow DOM slot API depends on how you mount the bundle; with declarative shadow DOM or frameworks, use the same slot names):

<hb-cookie-law-banner allowdecline="yes">
  <span slot="title">Cookies on this site</span>
  <span slot="text">We use cookies to run the site and measure usage. See our policy for details.</span>
</hb-cookie-law-banner>

Optional capabilities JSON string (for hosts that store or forward metadata; default UI unchanged):

<hb-cookie-law-banner
  allowdecline="yes"
  capabilities='{"groups":[{"_id":"essential","label":"Essential","type":"technical"}],"items":[{"groupId":"essential","title":"Session","scope":"strictly_necessary","_id":"1","cookieName":"sid","isTechnical":true,"isMandatory":true}]}'
></hb-cookie-law-banner>