@schibsted/data-controller

Schibsted Media Data Controller SDK

The Schibsted Media 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 here.

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',
  hideAfter: 5000,
  minimizeText: false,
});

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

As part of the React / TypeScript pipeline:

Import (or require) the module as usual, and initialize it. By creating a ref using useRef and using useEffect, you can render the Data Controller element to an element in React.

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

export const DataController = () => {
  const nodeRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (nodeRef.current) {
      const sdkInstance: DataControllerSdk = init({
        brandName: 'AwesomeSite',
        language: 'sv',
        layout: 'footer',
        hideAfter: 5000,
        minimizeText: false,
      });

      sdkInstance.render(nodeRef.current);
    }
  }, []);

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: '<!-- googleoff: index -->' }} />
      <div ref={nodeRef} id="target-node" />
      <div dangerouslySetInnerHTML={{ __html: '<!-- googleon: index -->' }} />
    </>
  );
};

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',
    hideAfter: 5000,
    minimizeText: false,
  });

  sdkInstance.render(document.querySelector('#target-node'));
</script>

hideAfter is an optional parameter that gives an opportunity to define time in milliseconds after which the data controller stripe will be hidden. Works for the 'footer' layout. The default value is 0.

minimizeText is an optional parameter that determines link text length. If it is set to true, then the link text in 'no' and 'sv' language is 'Les mer' and 'Läs mer'. The default value is false.

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 Media 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.

You can also force the element to show up. This can, for example, be useful if displaying the element in a static footer on the site:

sdkInstance.render(document.querySelector('#target-node', { permanent: true }));

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" href="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-datacontroller--footer: Set when using the footer-layout
• .sch-datacontroller--permanent: Set when permanent is supplied as rendering options
• .sch-datacontroller--cobranded: Set when the content contains both logotype and text and a read more link
• .sch-datacontroller--minimal: Set when the content is just the brandname and logotype inlined.

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 Media 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 Media 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