@bonniernews/dn-design-system-web 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.1.0 (2023-09-27)
+
+
+### Features
+
+* **web:** media variant of vertical list ([#1014](https://github.com/BonnierNews/dn-design-system/issues/1014)) ([34e72fa](https://github.com/BonnierNews/dn-design-system/commit/34e72fa41664fa754d2bf6f71ea9415643033a39))
+
+
+
+## 5.0.3 (2023-09-27)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 5.0.2 (2023-09-26)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/components/teaser-list-vertical/README.md

@@ -12,10 +12,11 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |listTitle | String | yes | | | List title |
 |listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
+|listType | String | no | default, media | (empty) | |
 |flexible | bool | no | true, false | false | |
 |teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ] |
 |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
-|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to _all_ teasers in the list |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to _all_ teasers in the list. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |
@@ -36,6 +37,14 @@ These are copy paste friendly examples to quickliy get started using a component
   theme: "ekonomi",
   teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
 })}}
+
+{# listType == media #}
+{{ TeaserListVertical({
+  listTitle: "Senaste klippen",
+  listType: "media",
+  mediaIcon: "play_arrow-filled",
+  teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', targetLink: '#', publicationTime: 'I går 21:22', mediaHtml: '<div class="picture"><img class="picture__img" src="??"></div>', video: 'true', attributes: { "data-test": "list-item-test-data" } } ]
+})}}
 ```
 
 ### SCSS

package/components/teaser-list-vertical/teaser-list-vertical.njk

@@ -2,18 +2,21 @@
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 
 {% macro TeaserListVertical(params) %}
   {% set componentClassName = "ds-teaser-list-vertical" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set attributes = getAttributes(params.attributes) %}
   {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}
+  {% set isMediaList = params.listType === 'media' %}
 
   {%- set classes = [
     componentClassName,
-    "ds-theme--" + params.theme,
+    "ds-theme--" + params.theme if params.theme,
     classNamePrefix + "flexible" if params.flexible,
     classNamePrefix + "linked" if showButton,
+    classNamePrefix + "media" if isMediaList,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -25,7 +28,11 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% for teaser in params.teasers %}
-        {{ TeaserListVerticalItem(teaser) }}
+          {% if isMediaList %}
+            {{ TeaserListVerticalMediaItem(teaser) }}
+          {% else %}
+            {{ TeaserListVerticalItem(teaser) }}
+          {% endif %}
       {% endfor %}
     </div>
     {% if showButton %}
@@ -60,3 +67,31 @@
     {% endif %}
   </a>
 {% endmacro %}
+
+{% macro TeaserListVerticalMediaItem(teaser) %}
+  {% set attributes = getAttributes(teaser.attributes) %}
+  {%- set classes = [
+    "ds-teaser-list-vertical__media-item",
+    teaser.classNames if teaser.classNames
+  ] | join(" ") %}
+
+  <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
+    <div class="ds-teaser-list-vertical__media-item-text">
+      <h3 class="ds-teaser-list-vertical__media-item-title">{{ teaser.highlight }} {{ teaser.title }}</h3>
+      {% if teaser.publicationTime or teaser.sectionName %}
+        <div class="ds-teaser-list-vertical__media-item-notes">
+          <span>{{ teaser.publicationTime }}</span>
+        </div>
+      {% endif %}
+    </div>
+
+    {% if teaser.mediaHtml %}
+      <div class="ds-teaser-list-vertical__media-item-img">
+        {{ teaser.mediaHtml | safe }}
+        {% if teaser.video %}
+          {{ IconUse({ icon: 'play_arrow-filled' }) -}}
+        {% endif %}
+      </div>
+    {% endif %}
+  </a>
+{% endmacro %}

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -4,10 +4,22 @@
 @use "../../components/teaser-dot/teaser-dot.scss";
 
 $ds-dot-size: ds-px-to-rem(10px);
+$ds-teaser-list-vertical-media-icon-size: 20px;
 
 .ds-teaser-list-vertical {
   background-color: $ds-color-surface-background;
 
+  &.ds-teaser-list-vertical--flexible {
+    display: flex;
+    flex: 1 0 300px;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ds-teaser-list-vertical__content {
+      overflow-y: auto;
+    }
+  }
+
   .ds-teaser-list-vertical__link {
     position: relative;
     padding: ds-spacing-component($ds-sc-x4, rem);
@@ -52,10 +64,6 @@ $ds-dot-size: ds-px-to-rem(10px);
       @include ds-typography($ds-typography-expressive-heading01bold);
       color: $ds-color-text-primary;
       word-break: break-word;
-
-      @include ds-hover(true) {
-        @include ds-underline(2px, 1px);
-      }
     }
 
     .ds-teaser-list-vertical__item-notes {
@@ -63,16 +71,71 @@ $ds-dot-size: ds-px-to-rem(10px);
       color: $ds-color-text-primary-02;
       margin-top: ds-spacing-component($ds-sc-x2, rem);
     }
+
+    @include ds-hover() {
+      &:hover .ds-teaser-list-vertical__item-title {
+        @include ds-underline(2px, 1px);
+      }
+    }
   }
 
-  &.ds-teaser-list-vertical--flexible {
+  .ds-teaser-list-vertical__media-item {
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
     display: flex;
-    flex: 1 0 300px;
-    flex-direction: column;
-    overflow: hidden;
+    justify-content: space-between;
+    text-decoration: none;
+    position: relative;
 
-    .ds-teaser-list-vertical__content {
-      overflow-y: auto;
+    &:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: ds-metrics-border-width(x1);
+      width: calc(100% - ds-spacing-component($ds-sc-x8));
+      background-color: $ds-color-border-primary;
+    }
+
+    .ds-teaser-list-vertical__media-item-text,
+    .ds-teaser-list-vertical__media-item-title,
+    .ds-teaser-list-vertical__media-item-notes {
+      margin: 0;
+    }
+
+    .ds-teaser-list-vertical__media-item-title {
+      @include ds-typography($ds-typography-expressive-heading01bold);
+      color: $ds-color-text-primary;
+      word-break: break-word;
+    }
+
+    .ds-teaser-list-vertical__media-item-notes {
+      @include ds-typography($ds-typography-functional-meta02regular);
+      color: $ds-color-text-primary-02;
+      margin-top: ds-spacing-component($ds-sc-x2, rem);
+    }
+
+    .ds-teaser-list-vertical__media-item-img {
+      flex: 0 0 91px;
+      align-self: flex-start;
+      position: relative;
+      margin-left: ds-spacing-component($ds-sc-x4);
+
+      .ds-icon {
+        width: $ds-teaser-list-vertical-media-icon-size;
+        height: $ds-teaser-list-vertical-media-icon-size;
+        background: $ds-color-static-red-500;
+        color: $ds-color-static-white;
+        position: absolute;
+        z-index: 1;
+        bottom: 0;
+        left: 0;
+        font-size: 0;
+      }
+    }
+
+    @include ds-hover() {
+      &:hover .ds-teaser-list-vertical__media-item-title {
+        @include ds-underline(2px, 1px);
+      }
     }
   }
 }

package/foundations/variables/spacingLayout.scss

@@ -12,5 +12,6 @@ $spacingLayout: (
   teaser-vertical-small: 8,
   teaser-horizontal: 16,
   gap-vertical-xsmall: 4,
-  teaser-vertical-medium: 12
+  teaser-vertical-medium: 12,
+  direkt-header-bottom: 48
 );

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -9,6 +9,7 @@ $spacingLayoutLargeScreen: (
   teaser-horizontal: 16,
   gap-vertical-xsmall: 8,
   teaser-vertical-medium: 16,
+  direkt-header-bottom: 64,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,

package/foundations/variables/spacingLayoutList.scss

@@ -12,3 +12,4 @@ $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;
+$ds-sl-direkt-header-bottom: direkt-header-bottom;

package/foundations/variables/typographyTokensList.scss

@@ -91,3 +91,4 @@ $ds-typography-detailarticle-quote: 'detailarticle-quote';
 $ds-typography-detailmellanrubrik: 'detailmellanrubrik';
 $ds-typography-detailarticle-direkt: 'detailarticle-direkt';
 $ds-typography-detailarticle-direkt-opinion: 'detailarticle-direkt-opinion';
+$ds-typography-detaildirekt-header: 'detaildirekt-header';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -233,6 +233,12 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 32,
     fontStyle: italic
   ),
+  detaildirekt-header: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 52,
+    fontSize: 48
+  ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -458,6 +458,12 @@ $typographyTokensScreenLarge: (
     fontSize: 26,
     fontStyle: italic
   ),
+  detaildirekt-header: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 52,
+    fontSize: 48
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -597,5 +597,11 @@ $typographyTokensScreenSmall: (
     lineHeight: 24,
     fontSize: 20,
     fontStyle: italic
+  ),
+  detaildirekt-header: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    fontSize: 32,
+    lineHeight: 36
   )
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "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

@@ -12,5 +12,6 @@
   "teaser-vertical-small": "teaser-vertical-small",
   "teaser-horizontal": "teaser-horizontal",
   "gap-vertical-xsmall": "gap-vertical-xsmall",
-  "teaser-vertical-medium": "teaser-vertical-medium"
+  "teaser-vertical-medium": "teaser-vertical-medium",
+  "direkt-header-bottom": "direkt-header-bottom"
 }

package/tokens/typography-list.json

@@ -91,5 +91,6 @@
   "detailarticle-quote": "'detailarticle-quote'",
   "detailmellanrubrik": "'detailmellanrubrik'",
   "detailarticle-direkt": "'detailarticle-direkt'",
-  "detailarticle-direkt-opinion": "'detailarticle-direkt-opinion'"
+  "detailarticle-direkt-opinion": "'detailarticle-direkt-opinion'",
+  "detaildirekt-header": "'detaildirekt-header'"
 }