@bonniernews/dn-design-system-web 8.0.10 → 8.1.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.1.1 (2023-11-14)
+
+
+### Bug Fixes
+
+* **web:** improve focus outline ([#1092](https://github.com/BonnierNews/dn-design-system/issues/1092)) ([547ff35](https://github.com/BonnierNews/dn-design-system/commit/547ff3565bc529fa61630e594e1d131cdc87b137))
+
+
+
+## 8.1.0 (2023-11-13)
+
+
+### Features
+
+* **web:** implement vignette, highlight, and italic headlines on media lists ([#1089](https://github.com/BonnierNews/dn-design-system/issues/1089)) ([5ffb9c4](https://github.com/BonnierNews/dn-design-system/commit/5ffb9c4ef06afc9880b802e010faa25fcd984bdd))
+
+
+
 ## 8.0.10 (2023-11-10)
 
 

package/assets/teaser/teaser.scss

@@ -11,6 +11,10 @@ $ds-teaser-standard-image-width-desktop: 196px;
 
 $grade-size: ds-px-to-rem(34px);
 
+@mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
+  @include ds-focus($offset, $includeSelector);
+}
+
 .ds-teaser {
   display: block;
   background-color: $ds-color-surface-background;

package/components/footer/footer.scss

@@ -112,6 +112,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
       a {
         @include ds-link($ds-link-list);
+        @include ds-focus($offset: 2px, $color: $ds-color-static-white);
       }
     }
   }
@@ -126,6 +127,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     a {
       @include ds-link($ds-link-list);
+      @include ds-focus($offset: 2px, $color: $ds-color-static-white);
       margin: ds-spacing($ds-s-100 $ds-s-100 0 0);
       display: inline-block;
 

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

@@ -64,7 +64,7 @@
     justify-content: space-between;
     flex: 1;
 
-    @include ds-teaser-focus(-2px);
+    @include ds-focus(-2px);
 
     @include ds-link($ds-link-list);
 

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

@@ -1,5 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-
+@use "../../assets/teaser/teaser.scss" as *;
 @use "../../components/icon-button/icon-button";
 @use "../../components/group-header/group-header";
 @use "../../components/teaser-swipe-card/teaser-swipe-card";

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

@@ -43,7 +43,7 @@ These are copy paste friendly examples to quickliy get started using a component
   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" } } ]
+  teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', vignette: "VÄRLDEN", targetLink: '#', isItalicHeadline: false, 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" } } ]
 })}}
 ```
 

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

@@ -28,11 +28,11 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% for teaser in params.teasers %}
-          {% if isMediaList %}
-            {{ TeaserListVerticalMediaItem(teaser) }}
-          {% else %}
-            {{ TeaserListVerticalItem(teaser) }}
-          {% endif %}
+        {% if isMediaList %}
+          {{ TeaserListVerticalMediaItem(teaser) }}
+        {% else %}
+          {{ TeaserListVerticalItem(teaser) }}
+        {% endif %}
       {% endfor %}
     </div>
     {% if showButton %}
@@ -72,12 +72,20 @@
   {% set attributes = getAttributes(teaser.attributes) %}
   {%- set classes = [
     "ds-teaser-list-vertical__media-item",
+    "ds-teaser-list-vertical__media-item--italic" if teaser.isItalicHeadline,
     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.vignette %}
+        <div class="ds-teaser-list-vertical__media-item-vignette">{{ teaser.vignette }}</div>
+      {% endif %}
+      <h3 class="ds-teaser-list-vertical__media-item-title">
+        {%- if teaser.highlight %}
+          <span class="ds-teaser-list-vertical__media-item-highlight">{{ teaser.highlight }}</span>
+        {% endif %}
+        {{- teaser.title }}</h3>
       {% if teaser.publicationTime or teaser.sectionName %}
         <div class="ds-teaser-list-vertical__media-item-notes">
           <span>{{ teaser.publicationTime }}</span>

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

@@ -1,6 +1,7 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button/button.scss" as *;
 @use "../../components/group-header/group-header";
+@use "../../assets/teaser/teaser.scss" as *;
 @use "../../components/teaser-dot/teaser-dot.scss";
 
 $ds-dot-size: ds-px-to-rem(10px);
@@ -20,6 +21,10 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     }
   }
 
+  .ds-teaser-list-vertical__content a {
+    @include ds-teaser-focus(-2px);
+  }
+
   .ds-teaser-list-vertical__link {
     position: relative;
     padding: ds-spacing($ds-s-100, rem);
@@ -101,10 +106,27 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       margin: 0;
     }
 
+    .ds-teaser-list-vertical__media-item-vignette {
+      display: block;
+      @include ds-typography($ds-typography-detailarticle-label);
+      color: $ds-theme-color;
+      margin-bottom: ds-spacing($ds-s-025);
+    }
+
     .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-highlight {
+        color: $ds-theme-color;
+      }
+    }
+
+    &.ds-teaser-list-vertical__media-item--italic {
+      .ds-teaser-list-vertical__media-item-title {
+        @include ds-typography($ds-typography-expressive-heading01italicregular);
+      }
     }
 
     .ds-teaser-list-vertical__media-item-notes {

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

@@ -1,9 +1,17 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../../assets/teaser/teaser.scss";
+@use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--longlife {
   position: relative;
 
+  &:focus-visible {
+    outline: none;
+
+    .ds-teaser__content {
+      @include ds-focus($offset: -8px, $includeSelector: false, $color: $ds-color-static-white);
+    }
+  }
+
   .ds-teaser-image {
     position: relative;
     width: 100%;

package/components/teaser-native/teaser-native.scss

@@ -6,6 +6,14 @@
   overflow: hidden;
   border-bottom: 4px solid $ds-color-static-ad-yellow;
 
+  &:focus-visible {
+    outline: none;
+
+    .ds-teaser__content {
+      @include ds-teaser-focus(-8px, false);
+    }
+  }
+
   .ds-teaser__media {
     margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
   }

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

@@ -1,6 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
-@use "../../assets/teaser/teaser.scss";
+@use "../../assets/teaser/teaser.scss" as *;
 @use "../../components/teaser-image/teaser-image.scss";
 
 .ds-teaser.ds-teaser-swipe-card {

package/foundations/helpers/hover.scss

@@ -14,14 +14,24 @@
   }
 }
 
-@mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
-  @if $includeSelector {
+@mixin _ds-focus($offset, $width, $color) {
+  outline: $width solid $color;
+  @if $offset {
+    outline-offset: $offset;
+  }
+}
+
+@mixin ds-focus(
+  $offset: false,
+  $includeSelector: true,
+  $width: ds-metrics-border-width(x2),
+  $color: $ds-color-border-focus-02
+) {
+  @if not $includeSelector {
+    @include _ds-focus($offset, $width, $color);
+  } @else {
     &:focus-visible {
-      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: $offset;
+      @include _ds-focus($offset, $width, $color);
     }
-  } @else {
-    outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
-    outline-offset: $offset;
   }
 }

package/package.json

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