@bonniernews/dn-design-system-web 5.0.3 → 6.0.0

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.
 
+## 6.0.0 (2023-09-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** change TeaserListSwipe to use variant instead of scrollType (#1015)
+
+### Bug Fixes
+
+* **web:** change TeaserListSwipe to use variant instead of scrollType ([#1015](https://github.com/BonnierNews/dn-design-system/issues/1015)) ([b0a4400](https://github.com/BonnierNews/dn-design-system/commit/b0a440032a2ba65f89946c1f005b442b6d0479c0))
+
+
+
+## 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

package/components/group-header/group-header.scss

@@ -53,7 +53,7 @@
       }
 
       .ds-group-header__right-link {
-        text-decoration: none;
+        @include ds-underline(2px, 1px);
       }
     }
   }

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

@@ -13,7 +13,7 @@
 |title | String | yes | | | Heading of the teaser |
 |titleHref | String | no | | | Target URL for the header |
 |areaType | String | no | "main", "right", "bauta", "bautaxl" | | The area where the column is rendered |
-|scrollType | String | no | "arrows", "header" | "arrows" | Where to render the scroll arrows |
+|arrowPosition | String | no | "floating", "header" | "floating" | Determines where the scroll arrows are rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |teasers | Object | yes | | | A list of arguments to TeaserSwipeCard |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
@@ -40,3 +40,6 @@ These are copy paste friendly examples to quickly get started using a component.
 ```scss
 @use "@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe";
 ```
+
+### JS
+This component does not come with any JS to facilitate scrolling via the buttons. Implementing that is left as an exercise to the reader.

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

@@ -1,4 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
@@ -6,19 +7,23 @@
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set attributes = getAttributes(params.attributes) %}
+  {% set arrowPosition = params.arrowPosition or 'floating' %}
   {%- set classes = [
-    componentClassName,
     "ds-teaser--list-swipe",
-    "ds-theme--" + params.theme if params.theme,
-    classNamePrefix + params.areaType if params.areaType,
     params.classNames if params.classNames
   ] | join(" ") %}
-  <div class="{{ classes }}" {{- attributes | safe }}>
+
+  {%- call TeaserCard({
+    areaType: params.areaType,
+    theme: params.theme,
+    attributes: params.attributes,
+    classNames: classes
+  }) %}
     {{ GroupHeader({
       title: params.title,
       href: params.titleHref,
-      variant: 'arrows' if params.scrollType == 'header'
+      variant: 'arrows' if arrowPosition === 'header' else 'link',
+      linkText: 'Visa alla' if arrowPosition === 'floating'
     }) }}
     <div class="{{ componentClassName + '__carousel'}}">
       {% for teaser in params.teasers %}
@@ -26,7 +31,7 @@
       {% endfor %}
     </div>
 
-    {% if params.scrollType != 'header' %}
+    {% if arrowPosition === 'floating' %}
       {{ IconButton({
         iconName: 'arrow_back',
         variant: 'elevated',
@@ -44,5 +49,5 @@
         forcePx: true
       }) }}
     {% endif %}
-  </div>
+  {% endcall %}
 {% endmacro %}

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

@@ -11,7 +11,7 @@
   @include ds-teaser-focus(2px);
 
   .ds-teaser__carousel {
-    padding: ds-spacing-component(0 $ds-sc-x4);
+    margin: ds-spacing-component(0 $ds-sc-x4);
     padding-bottom: ds-spacing-component($ds-sc-x3);
     overflow-x: scroll;
     display: grid;
@@ -27,14 +27,14 @@
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      z-index: 10;
+      z-index: 2;
 
       &--back {
-        left: ds-spacing-component($ds-sc-x4);
+        left: 0;
       }
 
       &--forward {
-        right: ds-spacing-component($ds-sc-x4);
+        right: 0;
       }
     }
   }

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/package.json

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