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