@bonniernews/dn-design-system-web 3.0.0-alpha.90 → 3.0.0-alpha.92

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.92](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.91...@bonniernews/dn-design-system-web@3.0.0-alpha.92) (2023-06-08)
+
+
+### Features
+
+* **web:** add js-rendered teaser-standard ([#873](https://github.com/BonnierNews/dn-design-system/issues/873)) ([4cabd62](https://github.com/BonnierNews/dn-design-system/commit/4cabd6242afd5e717fd2a6758724e92d68340130))
+
+
+
+## [3.0.0-alpha.91](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.90...@bonniernews/dn-design-system-web@3.0.0-alpha.91) (2023-06-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update tokens from Figma (#872)
+
+### Miscellaneous Chores
+
+* **foundations:** update tokens from Figma ([#872](https://github.com/BonnierNews/dn-design-system/issues/872)) ([2bf7b9f](https://github.com/BonnierNews/dn-design-system/commit/2bf7b9f79430d0f81e0d856f00d26498b7e0fffe))
+
+
+
 ## 3.0.0-alpha.90 (2023-06-07)
 
 

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

@@ -15,15 +15,10 @@
   .ds-teaser__content {
     display: flex;
     flex-direction: row;
-    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
-
-    // Special case for large teaser, should be replaced with dynamic spacing layout token when available
-    @include ds-mq-only-breakpoint(mobile) {
-      padding-bottom: ds-spacing-component($ds-sc-x3);
-    }
-    @include ds-mq-smallest-breakpoint(tablet) {
-      padding-bottom: ds-spacing-component($ds-sc-x4);
-    }
+    @include ds-spacing-layout(
+      $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
+        $ds-sl-teaser-vertical-medium
+    );
 
     .ds-teaser__content-inner {
       display: flex;

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

@@ -2,7 +2,9 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--onsite {
-  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  @include ds-spacing-layout(
+    $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+  );
   display: flex;
 
   .ds-teaser__title {

package/components/teaser-right-now/teaser-right-now.scss

@@ -6,7 +6,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  @include ds-spacing-layout(
+    $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+  );
 
   .ds-teaser__content {
     padding-left: ds-spacing-component($ds-sc-x3);

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

@@ -14,7 +14,12 @@
   }
 
   .ds-teaser__content {
-    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+    @include ds-spacing-layout(
+      $ds-sl-teaser-vertical-medium $ds-sl-teaser-horizontal
+    );
+    padding-bottom: ds-spacing-component(
+      $ds-sc-x4
+    ) !important; // !important to override spacing set in media query above
     display: block;
     color: $ds-color-text-primary;
 

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

@@ -2,7 +2,10 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-split-container {
-  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  @include ds-spacing-layout(
+    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
+      $ds-sl-teaser-vertical-medium
+  );
   display: flex;
   flex-wrap: wrap;
   position: relative;
@@ -49,8 +52,8 @@
     &:nth-child(4)::before {
       display: block;
       content: "";
-      @include ds-spacing-layout($ds-sl-teaser-vertical, margin-top);
-      @include ds-spacing-layout($ds-sl-teaser-vertical, padding-top);
+      @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-top);
+      @include ds-spacing-layout($ds-sl-teaser-vertical-small, padding-top);
       border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
 
       @include ds-mq-smallest-breakpoint(tablet) {

package/components/teaser-standard/README.md

@@ -29,11 +29,9 @@
 |~forcePx~ | | | | | Not supported |
 
 ## Minimum requirement example
-
-### Nunjucks
-
 These are copy paste friendly examples to quickliy get started using a component.
 
+### Nunjucks
 ```html
 {% from '@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard.njk' import TeaserStandard %}
 
@@ -48,3 +46,20 @@ These are copy paste friendly examples to quickliy get started using a component
 ```scss
 @use "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard" as *;
 ```
+
+### Javascript
+This version is rarely used to render a teaser dynamically in the browser. For example, it is used to render reserv-teasers in failover. This version **ONLY** supports the `title`, `text`, `targetLink`, `classNames` and `attributes` parameters.
+
+```javascript
+import { dsTeaserStandard } from "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard";
+
+// NB: javascript only supports a subset of all parameters
+const parameters = {
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen",
+  targetLink: "https://www.dn.se/ekonomi/",
+  attributes: { "data-test" : "test-value" }
+}
+
+const teaserStandardHtml = dsTeaserStandard(parameters);
+```

package/components/teaser-standard/teaser-standard.js

@@ -0,0 +1,53 @@
+export {
+  dsTeaserStandard,
+  dsTeaserStandardStory
+};
+
+function dsTeaserStandard(params = {}) {
+  const teaser = document.createElement("a");
+  // NOTE: this should match output of teaser-standard.njk for a subset of the parameters
+  teaser.innerHTML = `
+    <div class="ds-teaser__content">
+      <div class="ds-teaser__title"></div>
+      <p class="ds-teaser__text">
+        <span class="ds-teaser-dot"></span>
+      </p>
+    </div>`;
+  teaser.classList.add("ds-teaser");
+  teaser.classList.add("ds-teaser--standard");
+
+  if (params.targetLink) {
+    teaser.setAttribute("href", params.targetLink)
+  }
+
+  if (params.title) {
+    const titleEl = teaser.getElementsByClassName("ds-teaser__title")[0];
+    titleEl.textContent = params.title;
+  }
+
+  if (params.text) {
+    const textEl = teaser.getElementsByClassName("ds-teaser__text")[0];
+    textEl.appendChild(document.createTextNode(params.text))
+  }
+
+  if (params.classNames) {
+    teaser.classList.add(params.classNames);
+  }
+
+  if (params.attributes) {
+    for (const [key, value] of Object.entries(params.attributes)) {
+      teaser.setAttribute(key, value);
+    }
+  }
+
+  return teaser;
+}
+
+/** only use in storybook */
+function dsTeaserStandardStory() {
+  const jsTeasers = Array.from(document.getElementsByClassName("js-ds-teaser-standard-story"));
+  jsTeasers.forEach((teaserEl) => {
+    const params = JSON.parse(teaserEl.getAttribute("data-params"));
+    teaserEl.replaceWith(dsTeaserStandard(params));
+  });
+}

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

@@ -3,8 +3,10 @@
 
 .ds-teaser.ds-teaser--standard {
   display: flex;
-
-  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  @include ds-spacing-layout(
+    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
+      $ds-sl-teaser-vertical-medium
+  );
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading03bold);

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

@@ -3,7 +3,10 @@
 
 .ds-teaser.ds-teaser--tipsa {
   .ds-teaser__content {
-    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+    @include ds-spacing-layout(
+      $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
+        $ds-sl-teaser-vertical-medium
+    );
   }
 
   .ds-teaser__title {

package/foundations/variables/spacingLayout.scss

@@ -9,7 +9,8 @@ $spacingLayout: (
   gap-horizontal-static-small: 8,
   gap-vertical-static-small: 8,
   page-top-xsmall: 4,
-  teaser-vertical: 8,
+  teaser-vertical-small: 8,
   teaser-horizontal: 16,
-  gap-vertical-xsmall: 4
+  gap-vertical-xsmall: 4,
+  teaser-vertical-medium: 12
 );

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -5,9 +5,10 @@ $spacingLayoutLargeScreen: (
   page-horizontal: 32,
   gap-vertical-medium: 32,
   page-top-xsmall: 8,
-  teaser-vertical: 12,
+  teaser-vertical-small: 12,
   teaser-horizontal: 16,
   gap-vertical-xsmall: 8,
+  teaser-vertical-medium: 16,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,

package/foundations/variables/spacingLayoutList.scss

@@ -8,6 +8,7 @@ $ds-sl-gap-vertical-static-large: gap-vertical-static-large;
 $ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
 $ds-sl-gap-vertical-static-small: gap-vertical-static-small;
 $ds-sl-page-top-xsmall: page-top-xsmall;
-$ds-sl-teaser-vertical: teaser-vertical;
+$ds-sl-teaser-vertical-small: teaser-vertical-small;
 $ds-sl-teaser-horizontal: teaser-horizontal;
 $ds-sl-gap-vertical-xsmall: gap-vertical-xsmall;
+$ds-sl-teaser-vertical-medium: teaser-vertical-medium;

package/package.json

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

package/tokens/spacing-layout-list.json

@@ -9,7 +9,8 @@
   "gap-horizontal-static-small": "gap-horizontal-static-small",
   "gap-vertical-static-small": "gap-vertical-static-small",
   "page-top-xsmall": "page-top-xsmall",
-  "teaser-vertical": "teaser-vertical",
+  "teaser-vertical-small": "teaser-vertical-small",
   "teaser-horizontal": "teaser-horizontal",
-  "gap-vertical-xsmall": "gap-vertical-xsmall"
+  "gap-vertical-xsmall": "gap-vertical-xsmall",
+  "teaser-vertical-medium": "teaser-vertical-medium"
 }