@bonniernews/dn-design-system-web 8.1.0 → 8.2.0

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.2.0 (2023-11-14)
+
+
+### Features
+
+* **web:** add timestamps to TeaserStandard and TeaserLarge ([#1087](https://github.com/BonnierNews/dn-design-system/issues/1087)) ([0e90215](https://github.com/BonnierNews/dn-design-system/commit/0e90215a5e12f1be299e8eabb6d9a19bcb42c374))
+
+
+
+## 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)
 
 

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;
@@ -64,6 +68,17 @@ $grade-size: ds-px-to-rem(34px);
     }
   }
 
+  .ds-teaser__publication-time {
+    display: block;
+    @include ds-typography($ds-typography-functional-meta02regular);
+    color: $ds-color-text-primary-02;
+    margin-top: ds-spacing($ds-s-050);
+  }
+
+  .ds-teaser__text + .ds-teaser__publication-time {
+    margin-top: ds-spacing($ds-s-075);
+  }
+
   .ds-icon.ds-icon--grade {
     color: $ds-color-icon-primary;
     border-radius: 50%;

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-large/README.md

@@ -26,6 +26,7 @@
 |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|publicationTime | string | no | | null | Publication time text. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-large/teaser-large.njk

@@ -69,6 +69,9 @@
             {{ params.text }}
           </p>
         {% endif %}
+        {% if params.publicationTime %}
+          <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+        {% endif %}
       </div>
 
       {% if params.bylineHtml %}

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/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);

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-standard/README.md

@@ -24,6 +24,7 @@
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|publicationTime | string | no | | null | Publication time text. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-standard/teaser-standard.njk

@@ -66,6 +66,9 @@
           {{ params.text }}
         </p>
       {% endif %}
+      {% if params.publicationTime %}
+        <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+      {% endif %}
     </div>
   {% endcall %}
 {% endmacro %}

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.1.0",
+  "version": "8.2.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",