@bonniernews/dn-design-system-web 31.0.1-beta.2 → 31.0.1-beta.3

package/components/teaser-text-on-image/README.md

@@ -1,10 +1,10 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
-- Storybook: [TeaserStandard](https://designsystem.dn.se/?path=/docs/section-teaserstandard--docs)
-- Storybook (Latest): [TeaserStandard](https://designsystem-latest.dn.se/?path=/docs/section-teaserstandard--docs)
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
+- Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
+- Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)
 
 ----
 
-# teaser-standard
+# teaser-text-on-image
 
 ## Parameters
 
@@ -12,20 +12,10 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|variant | String | no | "default" or "podcast" | "default" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |
-|highlight | String | no | | | Text before the heading |
-|sticker | String | no | | | Red text before the text |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
-|isCompact | bool | no | true, false | false | If the headline should be compact |
-|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
-|publicationTime | string | no | | null | Publication time text. |
-|duration | string | no | | null | Duration of podcast. |
-|isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |
+|mediaHtml | HTML String | yes | | | Main image or other media |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |
@@ -35,33 +25,17 @@ 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 %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}
 
-{{ TeaserStandard({
-  title: "Upp på börsen",
-  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
-  highlight: "Ekonominytt:"
+{{ TeaserTextOnImage({
+  title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
+  targetLink: "https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/",
+  text: "Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent.",
+  mediaHtml: "text-on-image",
 })}}
 ```
 
 ### SCSS
 ```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);
+@use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
 ```

package/components/teaser-text-on-image/teaser-text-on-image.njk

@@ -14,7 +14,6 @@
 
   {% call TeaserCard({
     targetLink: params.targetLink,
-    areaType: params.areaType,
     theme: params.theme,
     attributes: params.attributes,
     classNames: extraClasses
@@ -27,6 +26,12 @@
       {% endif %}
 
       <div class="{{ componentClassName + '__text-content'}}">
+        {% if params.vignette %}
+          <p class="{{ componentClassName + '__vignette' }}">
+            {{ params.vignette }}
+          </p>
+        {% endif %}
+        
         <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
           {{ params.title }}
         </h2>

package/components/teaser-text-on-image/teaser-text-on-image.scss

@@ -5,25 +5,12 @@
   overflow: hidden;
 
   .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
+    color: $ds-color-neutral-white;
   }
 
-  .ds-teaser__title,
-  .ds-teaser__text {
-    position: relative;
-    color: $ds-color-surface-primary;
-    margin-top: ds-spacing($ds-s-100);
-  }
-
-  .ds-teaser__title {
-    @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
-
-    &--italic {
-      @include ds-typography($ds-typography-detail-medryckare);
-    }
-  }
   .ds-teaser__content {
     position: relative;
+    color: $ds-color-neutral-white;
 
     &:after {
       content: "";
@@ -37,6 +24,26 @@
     }
   }
 
+  .ds-teaser__title,
+  .ds-teaser__text {
+    position: relative;
+    color: $ds-color-neutral-white;
+  }
+
+  .ds-teaser__text {
+    margin-top: ds-spacing($ds-s-100);
+  }
+
+  .ds-teaser__title {
+    margin-top: ds-spacing($ds-s-050);
+
+    @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
+
+    &--italic {
+      @include ds-typography($ds-typography-detail-medryckare);
+    }
+  }
+
   .ds-teaser-image__byline,
   .ds-teaser__text-content {
     z-index: 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "31.0.1-beta.2",
+  "version": "31.0.1-beta.3",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/components/teaser-text-on-image/teaser-text-on-image.js

@@ -1,53 +0,0 @@
-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));
-  });
-}