@bonniernews/dn-design-system-web 4.0.0 → 4.1.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.1.0-alpha.0 (2023-08-23)
+
+
+### Features
+
+* **web:** add link to blockedcontent ([#919](https://github.com/BonnierNews/dn-design-system/issues/919)) ([98c0d92](https://github.com/BonnierNews/dn-design-system/commit/98c0d92d6ce19c2e3b42ed97f142374662b02fc4))
+
+
+
+## 4.0.1-alpha.0 (2023-08-21)
+
+
+### Bug Fixes
+
+* **web:** overly generous has-selector in teaser-package ([#930](https://github.com/BonnierNews/dn-design-system/issues/930)) ([99bd04b](https://github.com/BonnierNews/dn-design-system/commit/99bd04b74cbf65701c482c090b51d7a79bb09bbe))
+
+
+
 ## 4.0.0 (2023-08-16)
 
 

package/components/blocked-content/README.md

@@ -14,6 +14,7 @@ This component is available as either a Nunjuck component or a JavaScript compon
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |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" |
@@ -31,7 +32,8 @@ These are copy paste friendly examples to quickliy get started using a component
 
 {{ BlockedContent({
   title: 'Hoppsan, här saknas något',
-  body: 'Innehållet från Twitter kunde inte visas på grund av dina val i cookie-inställningarna.'
+  body: 'Innehållet från Twitter kunde inte visas på grund av dina val i cookie-inställningarna.',
+  link: 'https://twitter.com/LAGalaxy/status/1665752957919592448'
 })}}
 ```
 
@@ -46,14 +48,14 @@ These are copy paste friendly examples to quickliy get started using a component
 import { dsBlockedContent } from '@bonniernews/dn-design-system-web/components/blocked-content/blocked-content.js'
 
 // avalaible javascript parameters, matches njk paramaters + vendor:
-const parameters = { 
+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()" }
+  elementAttributes: { "onClick": "javascript:Didomi.notice.show()" }
 }
 
 const blockedContentHtml = dsBlockedContent(parameters);

package/components/blocked-content/blocked-content.js

@@ -13,7 +13,7 @@ function dsBlockedContent(params) {
       <div class="ds-blocked-content__inner">
         <div class="ds-blocked-content__content">
           <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
-          <div class="ds-blocked-content__body">Innehållet från <span class='ds-blocked-content__vendor'></span> kunde inte visas på grund av dina val i cookie-inställningarna.</div>
+          <div class="ds-blocked-content__body">Innehållet ${ params.vendor ? `från ${params.vendor}` : '' } kunde inte visas på grund av dina val i cookie-inställningarna.</div>
         </div>
         <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--condensed ds-btn--small ds-btn--full-width">
           <div class="ds-btn__inner">
@@ -29,20 +29,28 @@ function dsBlockedContent(params) {
 
   const newBlockedContent = blockedContentTmpl.getElementsByClassName("ds-blocked-content")[0];
   const btnEl = newBlockedContent.getElementsByClassName("ds-btn")[0];
+  const bodyEl = newBlockedContent.getElementsByClassName("ds-blocked-content__body")[0];
 
-  if (params.vendor) {
-    const vendorEl = newBlockedContent.getElementsByClassName("ds-blocked-content__vendor")[0];
-    vendorEl.textContent = params.vendor;
-  }
-  
   if (params.title) {
     const titleEl = newBlockedContent.getElementsByClassName("ds-blocked-content__title")[0];
     titleEl.textContent = params.title;
   }
 
   if (params.body) {
-    const titleEl = newBlockedContent.getElementsByClassName("ds-blocked-content__body")[0];
-    titleEl.textContent = params.body;
+    bodyEl.textContent = params.body;
+  }
+
+  if (params.link) {
+    const linkContainerEl = document.createElement("div");
+    const linkEl = document.createElement("a");
+    linkEl.href = params.link;
+    linkEl.innerText = params.link;
+    linkEl.className = "ds-blocked-content__link";
+    if (params.vendor) {
+      linkEl.setAttribute("aria-label", `Länk till innehåll på ${params.vendor}`);
+    }
+    linkContainerEl.appendChild(linkEl)
+    bodyEl.appendChild(linkContainerEl);
   }
 
   if (params.classNames) {

package/components/blocked-content/blocked-content.njk

@@ -21,7 +21,10 @@
     <div class="{{ componentClassName + '__inner'}}">
       <div class="{{ componentClassName + '__content'}}">
         <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
-        <div class="{{ componentClassName + '__body'}}">{{ params.body }}</div>
+        <div class="{{ componentClassName + '__body'}}">
+          {{ params.body }}
+          <a class="{{ componentClassName + '__link'}}" href="{{ params.link }}">{{params.link}}</a>
+        </div>
       </div>
       {{ Button({
           text: 'Integritetsinställningar',

package/components/blocked-content/blocked-content.scss

@@ -23,6 +23,14 @@
       @include ds-typography($ds-typography-functional-body02regular, true);
     }
   }
+
+  .ds-blocked-content__link {
+    @include ds-link($ds-link-paragraph);
+    display: inline-block;
+    margin-top: ds-spacing-component($ds-sc-x2);
+    word-break: break-word;
+  }
+
   .ds-blocked-content__title {
     @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;

package/components/teaser-package/teaser-package.scss

@@ -39,7 +39,7 @@
     z-index: 5;
   }
 
-  &:has(.ds-teaser:only-child)::after {
+  &:has(> .ds-teaser:only-child)::after {
     display: none;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "4.0.0",
+  "version": "4.1.0-alpha.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",