@bonniernews/dn-design-system-web 2.1.0-alpha.16 → 2.1.0-alpha.18

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.
 
+## [2.1.0-alpha.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.17...@bonniernews/dn-design-system-web@2.1.0-alpha.18) (2023-02-27)
+
+
+### Bug Fixes
+
+* **web:** removed top border and update tests threshold ([#701](https://github.com/BonnierNews/dn-design-system/issues/701)) ([058b8d6](https://github.com/BonnierNews/dn-design-system/commit/058b8d68e5521ecc82f5ee879e317384042ec81b))
+
+
+
+## 2.1.0-alpha.17 (2023-02-27)
+
+
+### Features
+
+* **web:** blocked content component ([#691](https://github.com/BonnierNews/dn-design-system/issues/691)) ([15ac04e](https://github.com/BonnierNews/dn-design-system/commit/15ac04e5af5785ad99a34a11281e39dfd330dbae))
+
+
+
 ## [2.1.0-alpha.16](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@2.1.0-alpha.15...@bonniernews/dn-design-system-web@2.1.0-alpha.16) (2023-02-24)
 
 

package/components/blocked-content/README.md

@@ -0,0 +1,61 @@
+- 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 (PROD): [BlockedContent > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-blocked-content-web--standard)
+- Storybook (LATEST): [BlockedContent > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-article-components-blocked-content-web--standard)
+
+----
+
+# 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 | | | |
+|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 cookie-inställningarna.'
+})}}
+```
+
+### 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'
+const blockedContentElement = Array.from(document.getElementsByClassName("ds-blocked-content"))[0];
+
+// 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()" }
+}
+
+dsBlockedContent(blockedContentElement, parameters);
+```

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

@@ -0,0 +1,84 @@
+export {
+  dsBlockedContent,
+  dsBlockedContentStory
+};
+
+function dsBlockedContent(blockedContentEl, params) {
+  if (!blockedContentEl) return;
+  params = params || {};
+
+  const blockedContentTmpl = document.createElement("div");
+  // NOTE: this should match output of blocked-content.njk
+  blockedContentTmpl.innerHTML = `
+    <div class="ds-blocked-content">
+      <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>
+        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--condensed ds-btn--small ds-btn--full-width">
+          <div class="ds-btn__inner">
+            <span>Integritetsinställningar</span>
+            <div class="ds-spinner ds-spinner--small ds-spinner--primary">
+              <div class="ds-spinner__inner"></div>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  `;
+
+  const newBlockedContent = blockedContentTmpl.getElementsByClassName("ds-blocked-content")[0];
+  const btnEl = newBlockedContent.getElementsByClassName("ds-btn")[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;
+  }
+
+  if (params.classNames) {
+    newBlockedContent.classList.add(params.classNames);
+  }
+
+  if (params.forcePx) {
+    newBlockedContent.classList.add("ds-force-px");
+    btnEl.classList.add("ds-force-px");
+  }
+
+  if (params.attributes) {
+    for (const [key, value] of Object.entries(params.attributes)) {
+      newBlockedContent.setAttribute(key, value);
+    }
+  }
+
+  if (params.elementAttributes) {
+    for (const [key, value] of Object.entries(params.elementAttributes)) {
+      btnEl.setAttribute(key, value);
+    }
+  }
+
+  return newBlockedContent;
+}
+
+/** only use in storybook */
+function dsBlockedContentStory() {
+  const blockedContentElements = Array.from(document.getElementsByClassName("js-ds-blocked-content-story"));
+  if (!blockedContentElements.length) return;
+
+  blockedContentElements.forEach((blockedContentEl) => {
+    const params = JSON.parse(blockedContentEl.getAttribute("data-params"));
+
+    const newBlockedContent = dsBlockedContent(blockedContentEl, params);
+    blockedContentEl.replaceWith(newBlockedContent);
+  });
+}

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

@@ -0,0 +1,38 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+
+{% macro BlockedContent(params) %}
+  {% set componentClassName = "ds-blocked-content" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set variant = [] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.forcePx %}
+    {% set variant = (variant.push("ds-force-px"), variant) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set variant = (variant.push(params.classNames), variant) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + variant | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName + '__inner'}}">
+      <div class="{{ componentClassName + '__content'}}">
+        <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
+        <div class="{{ componentClassName + '__body'}}">{{ params.body }}</div>
+      </div>
+      {{ Button({
+          text: 'Integritetsinställningar',
+          variant: 'secondaryFilled',
+          size: 'small',
+          classNames: '',
+          fullWidth: true,
+          forcePx: params.forcePx,
+          condensed: true,
+          attributes: params.elementAttributes
+        })}}
+    </div>
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,34 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+
+.ds-blocked-content {
+  background-color: $ds-color-surface-background;
+  margin: 0;
+  padding: ds-spacing-layout(
+    gap-vertical-static-medium 0 gap-vertical-static-large
+  );
+
+  .ds-blocked-content__inner {
+    text-align: center;
+    border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+    border-radius: ds-metrics-border-radius(x1);
+    padding: ds-spacing-component(x8 x4 x4);
+  }
+
+  .ds-blocked-content__body {
+    margin: ds-spacing-component(0 0 x8);
+    @include ds-typography($ds-typography-functional-body02regular);
+    color: $ds-color-text-primary;
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body02regular, true);
+    }
+  }
+  .ds-blocked-content__title {
+    @include ds-typography($ds-typography-functional-heading01medium);
+    color: $ds-color-text-primary;
+    margin: 0 0 ds-spacing-component(x2);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-heading01medium, true);
+    }
+  }
+}

package/components/byline/byline.scss

@@ -8,12 +8,6 @@ $ds-byline__image-size: 44px;
 .ds-byline__outer {
   list-style: none;
   line-height: 0;
-
-  & + .ds-byline__outer {
-    .ds-byline::before {
-      content: none; // remove first top border on all bylines except the first
-    }
-  }
 }
 
 .ds-byline {
@@ -26,7 +20,6 @@ $ds-byline__image-size: 44px;
   width: 100%;
   position: relative;
 
-  &::before,
   &::after {
     content: "";
     height: ds-metrics-border-width(x1);
@@ -34,13 +27,6 @@ $ds-byline__image-size: 44px;
     background-color: $ds-color-border-primary;
     position: absolute;
     left: ds-spacing-component(x4);
-  }
-
-  &::before {
-    top: 0;
-  }
-
-  &::after {
     bottom: 0;
   }
 

package/package.json

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