Cookie Banner Component

This is a project generated with Stencil in combination with tailwindcss for building a standalone Cookie Banner Web Component. This compontent should be reusable for different projects and easily configurable.

Contents

• Used frameworks
• Getting Started
• Using this component
  • CDN
• Configure this component
  • Attributes
  • Slots
• Configuration Options
  • Attributes
  • Slots
• Listening to action events
  • Example for custom events to listen to
• Recommandations
  • Hide component while undefined
  • Access component styling from outsite

Used frameworks

• Stencil (Documentation)
• tailwindcss (Documentation)

Getting Started

To start building this cookie banner web component, clone this repo to a new directory:

git clone https://git.rheinenergie.com/rheinenergie-com-relaunch/baellebad/reusable-cookie-banner.git my-cookie-banner-component
cd my-cookie-banner-component
git remote rm origin

and run:

npm install
npm start

To build this component for production, run:

npm run build

To make tailwindcss listen to changes in the layout, run:

npx tailwindcss -i ./src/directives.css -o ./www/build/cookiebanner.css --watch

Using this component

This component will be uploaded into our CDN soon, then it will be available for individual use. The documentation will then be found here.

CDN

Comming soon...

Configure this component

This component can be configured with its attributes and with slots which will be integrated in the component layout.

Attributes

• Can be assigned directly within the HTML tag:

  <cookie-banner-component font-family-regular="Arial"></cookie-banner-component>

• Can be assigned and mutated dynamically with JavaScript:

  document.querySelector('cookie-banner-component').fontFamilyRegular = 'Arial'

  or

  document.querySelector('cookie-banner-component').setAttribute('font-family-regular', 'Arial')

Slots

• Can be assigned within the HTML component:

  <cookie-banner-component>
    <h1 slot="topic">Cookies</h1>
  </cookie-banner-component>

• Can be assigned dynamically with JavaScript:

  const slotNode = document.createElement('h1')
  slotNode.slot = 'topic'
  slotNode.textContent = 'Cookies'
  document.querySelector('cookie-banner-component').appendChild(slotNode)

  or mutated:

  document.querySelector('cookie-banner-component [slot="topic"]').textContent = 'Cookies'

Configuration Options

There are different options for attributes and slots which can be used to configure the component. These options are listed below.

Attributes

| Attribute name | Attribute type | Attribute default value | |-----------------------|-----------------|----------------------------------------------------------------------------------------| | img-src | string | 'assets/default.svg' | | topic | string | 'Cookies' | | description | string | 'Entscheiden Sie ob die Cookie Einstellungen übernommen oder abgelehnt werden sollen.' | | font-family-regular | string | '' (Default browser font family) | | font-family-bold | string | '' (Default browser font family) | | color-backdrop | string | 'rgba(0, 0, 0, 0.7)' | | color-bg | string | '#ffffff' | | color-text | string | '#000000' | | color-primary | string | '#000000' | | color-secondary | string | '#000000' | | color-on-primary | string | '#ffffff' | | color-on-secondary | string | '#ffffff' | | actions | string | 'primary, secondary' (A set of custom actions, can be reassigned for custom use) | | show-confirmation | boolean | false | | confirmation-timeout | number | 3000 | | cookie-storageName | string | 'cookiesAccepted' | | cookie-domain | string | 'rheinenergie.com' | | ignore-default-action | boolean | false | | show | boolean | Depending on cookie state (When ignore-default-action = true => Default value: false) |

Slots

| Slot name | Slot default value | |---------------------------------------|----------------------------------------------------------------------------------------| | topic | 'Cookies' | | description | 'Entscheiden Sie ob die Cookie Einstellungen übernommen oder abgelehnt werden sollen.' | | [actionType]-action-text | '' | | confirmation-topic | 'Bestätigung' | | confirmation-description | 'Ihre Cookie-Einstellungen wurden erfolgreich gespeichert.' | | [actionType]-confirmation-topic | confirmation-topic | | [actionType]-confirmation-description | confirmation-description |

Listening to action events

The Cookie Banner is emitting an event when a button is clicked (an action is triggered), this event can be accessed with JavaScript and handled individually. The event emitter will return the triggered event with further details to this event, e.g. the button name which is triggered.

document.querySelector('cookie-banner-component').addEventListener('action', (evt) => {
    // The component is accessible with the event target
    const component = evt.currentTarget || evt.target;
    // Details stored in the custom event details
    const eventDetails = evt.detail;
    // The original pointer event is given in the event details
    const originalEvent = eventDetails.event;
    // To check which action is triggered the action type is transferred
    // in the event details as a string, e.g. 'primary' or 'secondary'
    const triggeredAction = eventDetails.type;
});

Example for custom events to listen to

Custom events can be created with the actions attribute of the component which is a type of string. Separated by a "," there could be multiple actions given.

• Directly assigned with HTML:

  <cookie-banner-component actions="primary, secondary, tertiary"></cookie-banner-component>

• Dynamically assigned with JavaScript:

  document.querySelector('cookie-banner-component').actions = 'primary, secondary, tertiary'

  or

  document.querySelector('cookie-banner-component').setAttribute('actions', 'primary, secondary, tertiary')

With this assignment it can be listened to this custom assigned action types:

document.querySelector('cookie-banner-component').addEventListener('action', (evt) => {
    switch (evt.detail.type) {
        case 'primary':
            break;
        
        case 'secondary':
            break;

        case 'tertiary':
            break;

        default:
            break;
    }
});

Recommandations

Hide component while undefined

When using slots in a web component the html will usually be rendered before the slots are placed in the web component. So the slot content could appear on the page for a small time frame. To avoid this, there is a CSS property which can be used to hide the element as long as it is not defined.

cookie-banner-component
{
    display: none;
}

cookie-banner-component:defined
{
    display:block;
}

Access component styling from outsite

Add extra styling from without the components shadow dom to customize the component even more. Parts that can be styled externally:

| Part to be styled | Description of styled part | Location | Containing | |--------------------------|-------------------------------------|----------------------|----------------------------------------------| | backdrop | Backdrop of the component | Top level | content | | content | Component content | backdrop | head, main and footer | | head | Component content head | content | logo | | main | Component content main | content | topic and description | | footer | Component content footer | content | action container | | logo | Logo image | head | | | topic | Component topic | main | | | description | Component description | main | | | action-container | Container containing action buttons | footer | action(s) | | action | Every action | action container | | | [actionType]-action | Specific action | action container | | | confirmation | Component confirmation | backdrop | confirmation-content | | confirmation-content | Confirmation content | confirmation | confirmation-topic, confirmation-description | | confirmation-topic | Confirmation content topic | confirmation-content | | | confirmation-description | Confirmation content description | confirmation-content | |

How to access the different parts:

cookie-banner-component::part(backdrop)
{
    ...
}