- GitHub: [BonnierNews/dn-design-system/../web/src/components/blocked-content](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/blocked-content)
- Storybook: [BlockedContent](https://designsystem.dn.se/?path=/docs/article-blockedcontent--docs)
- Storybook (Latest): [BlockedContent](https://designsystem-latest.dn.se/?path=/docs/article-blockedcontent--docs)

----

# Blocked Content

This component is available as either a Nunjuck component or a JavaScript component. In Bang we only use the JavaScript variant. The Nunjuck implementation is mostly used to generate the html markup used in the JavaScript component.

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | String | yes | | | |
|body | HTML String | yes | | | |
|link | String | no | | | Ex "https://twitter.com/LAGalaxy/status/1665752957919592448" will be injected on a new line below body |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|elementAttributes | Object | no | | | Sets attributes on button element. Same structure as attributes above |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
|vendor | String | yes (only in JavaScript) | | | JavaScript attribute, not available as njk-parameter |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/blocked-content/blocked-content.njk' import BlockedContent %}

{{ BlockedContent({
  title: 'Hoppsan, här saknas något',
  body: 'Innehållet från Twitter kunde inte visas på grund av dina val i kakinställningarna.',
  link: 'https://twitter.com/LAGalaxy/status/1665752957919592448'
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/blocked-content/blocked-content" as *;
```

### Javascript

```javascript
import { dsBlockedContent } from '@bonniernews/dn-design-system-web/components/blocked-content/blocked-content.js'

// avalaible javascript parameters, matches njk paramaters + vendor:
const parameters = {
  vendor: "YouTube",
  title: "Videon kunde ej visas",
  body: "För att spela videon behöver du gå till “Inställningar per partner” och godkänna Screen9 AB", // overrides vendor
  classNames: "test-class",
  forcePx: false,
  attributes: { "data-test" : "test-value" },
  elementAttributes: { "onClick": "javascript:Didomi.notice.show()" }
}

const blockedContentHtml = dsBlockedContent(parameters);
```