@bonniernews/dn-design-system-web 6.0.4 → 6.0.5

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.5 (2023-10-03)
+
+
+### Bug Fixes
+
+* **web:** further updates to TeaserSwipeCard ([#1046](https://github.com/BonnierNews/dn-design-system/issues/1046)) ([307f6e7](https://github.com/BonnierNews/dn-design-system/commit/307f6e7025be770e068f78241b1dbccc7898cb03))
+
+
+
 ## 6.0.4 (2023-10-03)
 
 

package/components/group-header/README.md

@@ -24,7 +24,7 @@
 |classNames | String | no | | | Ex. "my-special-class" |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 
-NB: The `arrows` variant is only active in desktop environments. It is equivalent to `icon` in non-desktop environments.
+NB: The `arrows` variant is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.
 
 Depending on variant, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
 

package/components/group-header/group-header.njk

@@ -24,6 +24,10 @@
       </span>
     {% elif (params.variant == 'icon' or not params.variant) and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
+    {% elif (params.variant == 'arrows') and params.href and params.linkText %}
+      <span class="{{ componentClassName + '__right-link' }} hidden-desktop">
+        {{ params.linkText }}
+      </span>
     {% elif (params.variant == 'arrows') and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon hidden-desktop' }) }}
     {% endif %}

package/components/spinner/spinner.njk

@@ -12,7 +12,7 @@
     classNamePrefix + size,
     classNamePrefix + (params.variant or "primary"),
     params.classNames if params.classNames
-  ] %}
+  ] | join(" ") %}
 
   <span class="{{ classes }}" {{- attributes | safe }}>
     <span class="{{ componentClassName + '__inner'}}"></span>

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

@@ -23,7 +23,7 @@
       title: params.title,
       href: params.titleHref,
       variant: 'arrows' if arrowPosition === 'header' else 'link',
-      linkText: 'Visa alla' if arrowPosition === 'floating'
+      linkText: 'Visa alla'
     }) }}
     <div class="{{ componentClassName + '__carousel'}}">
       {% for teaser in params.teasers %}

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

@@ -6,13 +6,13 @@
 .ds-teaser.ds-teaser-swipe-card {
   display: flex;
   flex-direction: column;
-  width: 268px;
+  width: 248px;
   max-width: 66vw; // ensure low-width devices see atleast part of a second teaser
   color: $ds-color-text-primary;
   text-decoration: none;
 
   border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-  border-radius: ds-metrics-border-radius(x2);
+  border-radius: ds-metrics-border-radius(x1);
   overflow: hidden; // ensure media doesn't overflow the border-radius
   margin-bottom: 0;
 
@@ -21,7 +21,7 @@
   .ds-teaser__text {
     display: flex;
     flex-direction: column;
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    padding: ds-spacing-component($ds-sc-x3);
     margin: 0;
     flex: 1;
   }
@@ -33,7 +33,7 @@
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading01bold);
-    margin-bottom: ds-spacing-component($ds-sc-x1);
+    margin-bottom: ds-spacing-component($ds-sc-x2);
     flex: 1;
   }
 

package/package.json

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