@schibsted/data-controller

Schibsted Data Controller SDK

The Schibsted data controller SDK is a simple module for rendering information in order to comply with GDPR laws of informing users of who are controlling and processing their data. This SDK provides functionality to comply with the guidelines as outlined in this document.

Installing

$ npm install --save @schibsted/data-controller

or with Yarn:

$ yarn add @schibsted/data-controller

Usage

The SDK can be included in two different ways, either directly in the browser clients, or installed as a module and included as part of the consuming applications JS pipeline.

As part of the JS pipeline:

Import (or require) the module as usual, and initialize it:

import { init } from '@schibsted/data-controller';

const sdkInstance = init({
  brandName: 'AwesomeSite',
  language: 'sv',
  layout: 'footer',
});

As a browser script tag:

<script src="https://unpkg.com/@schibsted/data-controller/dist/data-controller-sdk.umd.js"></script>
<script>
  const sdkInstance = CNP.DataControllerSDK.init({
    brandName: 'AwesomeSite',
    language: 'sv',
    layout: 'footer',
  });
</script>

Once you have a configured instance, you can call the render method to render it to a node:

sdkInstance.render(document.querySelector('#target-node'));

This will, potentially, insert some markup into the document to explain to the end users that Schibsted will process the data they produce on this site in order to comply with GDPR laws.

Internally, the SDK will check for when this information was last shown on this device and decide whether to display or not.

Styling

The DataController markup follows BEM conventions, and the classes used are documented below. To use the default styles shipped with this SDK, remember to link it on the page, or import it in your asset pipeline.

import '@schibsted/data-controller/dist/styles.css';

<link rel="stylesheet" src="https://unpkg.com/@schibsted/data-controller/dist/styles.css">

To override the default styles, just override using normal CSS rules. To avoid specificity issues you can either have rules with higher precidence than the single class selectors used in the default styles, or ensure that your overrides are defined after the default styling.

Blocks

.sch-datacontroller: This is the top level node containing the rest of the markup.

modifiers:

• .sch-datacontroller--subheader: Set when using the subheader-layout
• .sch-datacontroler--footer: Set when using the footer-layout

Elements

• .sch-datacontroller__wrapper: Wrapper inside the top-level node. Contains all other markup. This can be used to inset the contents to fit a certain width, while allowing the overall markup to take up the full width of the page

• .sch-datacontroller__content: Contains the Schibsted logo, texts and links, but not the close button when using the footer-layout

• .sch-datacontroller__text: Contains all text, including links to read more. You can use this class to change the font family, or font size etc.

  modifiers

  • .sch-datacontroller__text--inline: Set when the logotype is inlined in the text

• .sch-datacontroller__logo: Set on the Schibsted logotype SVG

  modifiers

  • .sch-datacontroller__logo--inline: Set when the logotype is part of the text, as a child of .sch-datacontroller__text

• .sch-datacontroller__read-more: Set on the link to display more information about the data collected

• .sch-datacontroller__btn: Set on all <button>-elements

• .sch-datacontroller__btn-close: Set on the close-button in the sticky footer

• .sch-datacontroller__btn-close-icon: Set on the close-icon SVG