@bonniernews/dn-design-system-web 4.5.0 → 4.6.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.6.1 (2023-09-13)
+
+
+### Bug Fixes
+
+* **web:** use correct token for teaser bg ([#994](https://github.com/BonnierNews/dn-design-system/issues/994)) ([e007c6e](https://github.com/BonnierNews/dn-design-system/commit/e007c6e54612bd0df3ac52a4fc9ff35c93bde590))
+
+
+
+## 4.6.0 (2023-09-12)
+
+
+### Features
+
+* **web:** add teaser longlife ([#992](https://github.com/BonnierNews/dn-design-system/issues/992)) ([f60fb92](https://github.com/BonnierNews/dn-design-system/commit/f60fb92bbf5bbd39e620de6551a6b261593bed5f))
+
+
+
+## 4.5.2 (2023-09-12)
+
+
+### Bug Fixes
+
+* **web:** specify when email and followable can be used ([#996](https://github.com/BonnierNews/dn-design-system/issues/996)) ([b8458e9](https://github.com/BonnierNews/dn-design-system/commit/b8458e9a9dca3c50f32151222b6955d4f1038ffb))
+
+
+
+## 4.5.1 (2023-09-12)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 4.5.0 (2023-09-11)
 
 

package/assets/teaser/teaser.scss

@@ -13,7 +13,7 @@ $grade-size: ds-px-to-rem(34px);
 
 .ds-teaser {
   display: block;
-  background-color: $ds-color-background-primary;
+  background-color: $ds-color-surface-background;
   text-decoration: none;
   position: relative;
 

package/components/byline/README.md

@@ -8,6 +8,9 @@
 
 The byline is a list item and should be wrapped in a list.
 
+* If variant:'follow', followable:true AND authorPageUrl are set at the same time, the element will render as a div with an inner `<a>` and a button.
+* If variant:'link' and authorpageUrl are set, the outer elment will render as an `<a>`.
+
 ## Parameters
 
 |parameter | type | required | options | default | description |

package/components/teaser-longlife/README.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-longlife](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-longlife)
+- Storybook: [TeaserRightNow](https://designsystem.dn.se/?path=/docs/section-teaserlonglife--docs)
+- Storybook (Latest): [TeaserRightNow](https://designsystem-latest.dn.se/?path=/docs/section-teaserlonglife--docs)
+
+----
+
+# teaser-longlife
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|vignette | String | no | | | Top text in the teaser |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## 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/teaser-longlife/teaser-longlife.njk' import TeaserLonglife %}
+
+{{ TeaserLonglife({
+  title: 'Susa fram på DN-elcykeln',
+  targetLink: 'https://dngranskar.dn.se',
+  vignette: 'Beställ DN-cykeln',
+  mediaHtml: 'image-html',
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-longlife/teaser-longlife" as *;
+```

package/components/teaser-longlife/teaser-longlife.njk

@@ -0,0 +1,38 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+
+{% macro TeaserLonglife(params) %}
+  {%- set additionalClasses = ["ds-teaser--longlife"] %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: 'right',
+    attributes: params.attributes,
+    classNames: additionalClasses | join(" ")
+  }) %}
+
+    {% if params.mediaHtml %}
+      {{ params.mediaHtml }}
+      {% if params.isLocked %}
+        {{ VipBadge({
+          showText: false,
+          forcePx: true
+        }) }}
+      {% endif %}
+    {% endif %}
+
+    <div class="ds-teaser__content">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+      <h2 class="ds-teaser__title">
+        {{ params.title }}
+      </h2>
+    </div>
+  {% endcall %}
+{% endmacro %}
+

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

@@ -0,0 +1,56 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss";
+
+.ds-teaser.ds-teaser--longlife {
+  position: relative;
+
+  .ds-teaser-image {
+    position: relative;
+    width: 100%;
+    height: auto;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: $ds-color-static-transparent-black;
+      z-index: 1;
+    }
+
+    figcaption {
+      display: none;
+    }
+  }
+
+  .ds-teaser__content {
+    color: $ds-color-static-white;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    padding: ds-spacing-component($ds-sc-x4);
+  }
+
+  &:not(:has(.ds-teaser-image))  {
+    background-color: $ds-color-static-black;
+
+    .ds-teaser__content {
+      position: relative;
+    }
+  }
+
+  .ds-teaser__vignette {
+    color: currentColor;
+    @include ds-typography($ds-typography-functional-meta02bold);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .ds-teaser__title {
+    color: currentColor;
+    @include ds-typography($ds-typography-functional-heading02bold);
+  }
+}

package/foundations/variables/typographyTokensList.scss

@@ -89,3 +89,5 @@ $ds-typography-detailarticle-longread: 'detailarticle-longread';
 $ds-typography-detailarticle-longread-premium: 'detailarticle-longread-premium';
 $ds-typography-detailarticle-quote: 'detailarticle-quote';
 $ds-typography-detailmellanrubrik: 'detailmellanrubrik';
+$ds-typography-detailarticle-direkt: 'detailarticle-direkt';
+$ds-typography-detailarticle-direkt-opinion: 'detailarticle-direkt-opinion';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -220,6 +220,19 @@ $typographyTokensScreenExtraLarge: (
     lineHeight: 64,
     fontSize: 56
   ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    lineHeight: 36,
+    fontSize: 32
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 36,
+    fontSize: 32,
+    fontStyle: italic
+  ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -445,6 +445,19 @@ $typographyTokensScreenLarge: (
     lineHeight: 36,
     fontSize: 32
   ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    lineHeight: 30,
+    fontSize: 26
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    lineHeight: 30,
+    fontSize: 26,
+    fontStyle: italic
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -584,5 +584,18 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     fontSize: 20,
     lineHeight: 24
+  ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 20
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    lineHeight: 24,
+    fontSize: 20,
+    fontStyle: italic
   )
 );

package/package.json

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

package/tokens/typography-list.json

@@ -88,5 +88,8 @@
   "detailarticle-opinion": "'detailarticle-opinion'",
   "detailarticle-longread": "'detailarticle-longread'",
   "detailarticle-longread-premium": "'detailarticle-longread-premium'",
-  "detailarticle-quote": "'detailarticle-quote'"
+  "detailarticle-quote": "'detailarticle-quote'",
+  "detailmellanrubrik": "'detailmellanrubrik'",
+  "detailarticle-direkt": "'detailarticle-direkt'",
+  "detailarticle-direkt-opinion": "'detailarticle-direkt-opinion'"
 }