@bonniernews/dn-design-system-web 3.0.0-alpha.72 → 3.0.0-alpha.74

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.
 
+## 3.0.0-alpha.74 (2023-05-30)
+
+
+### Bug Fixes
+
+* **web:** set focus outline offset for teasers ([#845](https://github.com/BonnierNews/dn-design-system/issues/845)) ([9691be5](https://github.com/BonnierNews/dn-design-system/commit/9691be5118ee2a0335bfaaeb28db30521eb92f97))
+
+
+
+## [3.0.0-alpha.73](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.72...@bonniernews/dn-design-system-web@3.0.0-alpha.73) (2023-05-30)
+
+
+### Bug Fixes
+
+* **web:** imageCredit nowrap unless superwide ([#828](https://github.com/BonnierNews/dn-design-system/issues/828)) ([e6b780e](https://github.com/BonnierNews/dn-design-system/commit/e6b780e86bcd62632b1c5c83d70e913050a9655c))
+
+
+
 ## [3.0.0-alpha.72](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.71...@bonniernews/dn-design-system-web@3.0.0-alpha.72) (2023-05-30)
 
 

package/assets/teaser/teaser.scss

@@ -10,6 +10,8 @@
   text-decoration: none;
   position: relative;
 
+  @include ds-teaser-focus(-8px);
+
   .ds-teaser__content {
     display: flex;
     flex: 1;

package/components/image-caption/image-caption.njk

@@ -17,8 +17,19 @@
       <span aria-hidden="true">{{ params.caption | safe }}</span>
     {% endif %}
     {% if params.author %}
-      <span class="ds-article-image__credits">
-        {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
+      {% set authorText = ((params.imageType | capitalize) + ": " + params.author) if params.imageType else params.author %}
+
+      {% set authorClasses = [ "ds-article-image__credits" ] %}
+      {# Low estimate of how much will fit on tablet/desktop #}
+      {% if (authorText | length) >= 27 and (authorText | length) < 60 %}
+        {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap-bigscreen"), authorClasses) %}
+      {# Low estimate of how much will fit on iphone4 #}
+      {% elif (authorText | length) < 27 %}
+        {% set authorClasses = (authorClasses.push("ds-article-image__credits--nowrap"), authorClasses) %}
+      {% endif %}
+
+      <span class="{{ authorClasses | join(" ") }}">
+        {{- authorText -}}
       </span>
     {% endif %}
   </figcaption>

package/components/image-caption/image-caption.scss

@@ -11,5 +11,15 @@
 
   > .ds-article-image__credits {
     color: $ds-color-text-primary-02;
+
+    &.ds-article-image__credits--nowrap {
+      white-space: nowrap;
+    }
+
+    &.ds-article-image__credits--nowrap-bigscreen {
+      @include ds-mq-smallest-breakpoint(tablet) {
+        white-space: nowrap;
+      }
+    }
   }
 }

package/components/teaser-large/teaser-large.scss

@@ -27,6 +27,14 @@
     }
   }
 
+  &:focus-visible {
+    outline: none !important;
+
+    .ds-teaser__content {
+      @include ds-teaser-focus(-8px, false);
+    }
+  }
+
   .ds-teaser__vignette {
     grid-column: 1;
   }

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

@@ -57,6 +57,8 @@
     @include ds-hover(true) {
       @include ds-underline(1px, 2px);
     }
+
+    @include ds-teaser-focus(-8px);
   }
 
   a.ds-teaser-package__vignette {

package/components/teaser-split/teaser-split.scss

@@ -26,11 +26,13 @@
     display: block;
     position: relative;
     flex: 1;
-    padding-right: ds-spacing-component($ds-sc-x4);
+    margin-right: ds-spacing-component($ds-sc-x4);
     &:last-child {
-      padding-right: 0;
+      margin-right: 0;
     }
 
+    @include ds-teaser-focus(4px);
+
     @include ds-mq-largest-breakpoint(mobile) {
       width: calc(50% - ds-spacing-component($ds-sc-x4) / 2);
       flex: auto;
@@ -39,12 +41,14 @@
         flex: 1;
       }
       &:nth-child(2) {
-        padding-right: 0;
+        margin-right: 0;
       }
     }
 
-    &:nth-child(3),
-    &:nth-child(4) {
+    &:nth-child(3)::before,
+    &:nth-child(4)::before {
+      display: block;
+      content: "";
       @include ds-spacing-layout($ds-sl-teaser-vertical, margin-top);
       @include ds-spacing-layout($ds-sl-teaser-vertical, padding-top);
       border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
@@ -56,6 +60,10 @@
       }
     }
 
+    &:nth-child(3):not(:last-child)::before {
+      margin-right: ds-spacing-component($ds-sc-x4, "px", true);
+    }
+
     .ds-teaser__title {
       @include ds-typography($ds-typography-expressive-heading02bold);
     }

package/foundations/helpers/hover.scss

@@ -1,4 +1,6 @@
 @use "mediaQueries.scss" as *;
+@use "colors.scss" as *;
+@use "metrics.scss" as *;
 
 @mixin ds-hover($includeSelector: false) {
   @include ds-mq-smallest-breakpoint(desktop, "and (hover: hover)") {
@@ -11,3 +13,15 @@
     }
   }
 }
+
+@mixin ds-teaser-focus($offset: 2px, $includeSelector: true) {
+  @if $includeSelector {
+    &:focus-visible {
+      outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+      outline-offset: $offset;
+    }
+  } @else {
+    outline: ds-metrics-border-width(x2) solid $ds-color-border-focus-02;
+    outline-offset: $offset;
+  }
+}

package/foundations/helpers/links.scss

@@ -10,7 +10,7 @@ $ds-link-article-body: "article-body";
   color: inherit;
   @include ds-underline(2px, 1px);
   &:focus-visible {
-    outline-color: $ds-color-border-primary-02;
+    outline-color: $ds-color-border-focus-02;
   }
 
   @if ($type == $ds-link-list) {

package/package.json

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