Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@schibsted/data-controller
Advanced tools
@schibsted/data-controller - npm Package Compare versions
Comparing version 2.0.1 to 3.0.0
@@ -0,1 +1,14 @@ | ||
| # [3.0.0](https://github.schibsted.io/smp-distribution/data-controller-sdk/compare/v2.0.1...v3.0.0) (2020-09-07) | ||
| ### Features | ||
| * renamed default stylesheet to `styles.css` ([a5a78ef](https://github.schibsted.io/smp-distribution/data-controller-sdk/commit/a5a78ef4442cb4a479dd77f9c67da5d92429b935)) | ||
| ### BREAKING CHANGES | ||
| * The stylesheet is now named `styles.css`. Make sure to | ||
| update any references to `data-controller-sdk.css` to `styles.css` | ||
| ## [2.0.1](https://github.schibsted.io/smp-distribution/data-controller-sdk/compare/v2.0.0...v2.0.1) (2020-09-04) | ||
@@ -2,0 +15,0 @@ |
| { | ||
| "name": "@schibsted/data-controller", | ||
| "version": "2.0.1", | ||
| "version": "3.0.0", | ||
| "module": "dist/data-controller-sdk.mjs", | ||
@@ -5,0 +5,0 @@ "unpkg": "dist/data-controller-sdk.umd.js", |
106
README.md
| # Schibsted Data Controller SDK | ||
| Documentation is yet to come... | ||
| 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](https://docs.google.com/document/d/1ai8FK5FXQzMpuIMwT5sXW46kpPumxIQRzxD-DHqDNAw). | ||
| ### Installing | ||
| ```sh | ||
| $ 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: | ||
| ```js | ||
| import { init } from '@schibsted/data-controller'; | ||
| const sdkInstance = init({ | ||
| brandName: 'AwesomeSite', | ||
| language: 'sv', | ||
| layout: 'footer', | ||
| }); | ||
| ``` | ||
| **As a browser script tag:** | ||
| ```html | ||
| <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: | ||
| ```js | ||
| 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. | ||
| ```js | ||
| import '@schibsted/data-controller/dist/styles.css'; | ||
| ``` | ||
| ```html | ||
| <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 |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.34%
101454
- Number of lines in readme file
- increased by2600%
108
No dependency changes