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

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

@@ -0,0 +1,67 @@
+- 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)
+
+----
+
+# teaser-standard
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|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 |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+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 %}
+
+{{ TeaserStandard({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### 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);
+```

package/components/teaser-text-on-image/teaser-text-on-image.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-text-on-image/teaser-text-on-image.njk

@@ -0,0 +1,42 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+
+{% macro TeaserTextOnImage(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+
+  {% set extraClasses = [
+    "ds-teaser--text-on-image",
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: params.areaType,
+    theme: params.theme,
+    attributes: params.attributes,
+    classNames: extraClasses
+  }) %}
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.mediaHtml %}
+        <div class="{{ componentClassName + '__media' }}">
+          {{ params.mediaHtml }}
+        </div>
+      {% endif %}
+
+      <div class="{{ componentClassName + '__text-content'}}">
+        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+          {{ params.title }}
+        </h2>
+
+        {% if params.text%}
+          <p class="{{ componentClassName + '__text' }}">
+            {{ params.text }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+  {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,66 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--text-on-image {
+  overflow: hidden;
+
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
+  .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;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
+      z-index: 2;
+    }
+  }
+
+  .ds-teaser-image__byline,
+  .ds-teaser__text-content {
+    z-index: 3;
+  }
+
+  .ds-teaser__text-content {
+    position: absolute;
+    bottom: ds-spacing($ds-s-100);
+    left: ds-spacing($ds-s-100);
+    max-width: 90%;
+
+    @include ds-mq-only-breakpoint(desktop) {
+      max-width: 75%;
+    }
+  }
+
+  .ds-teaser__media {
+    .picture {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ds-teaser-image__byline {
+      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
+    }
+  }
+}

package/package.json

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