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

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.
 
+## 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)
+
+
+### Bug Fixes
+
+* **web:** update teaserlistswipe after design feedback ([#1026](https://github.com/BonnierNews/dn-design-system/issues/1026)) ([4d0bd68](https://github.com/BonnierNews/dn-design-system/commit/4d0bd682a2e5a0f35a5eb75dc7e3ddb99a7b67a9))
+
+
+
 ## 6.0.3 (2023-10-02)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

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/group-header/group-header.scss

@@ -6,6 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  align-items: stretch;
   background: $ds-color-background-primary;
   color: $ds-color-text-primary;
   @include ds-typography($ds-typography-functional-body02regular);
@@ -22,10 +23,16 @@
   }
 
   .ds-group-header__arrows {
+    display: flex;
     flex-shrink: 0;
     padding-right: ds-spacing-component($ds-sc-x2);
   }
 
+  .ds-btn-toggle, .ds-group-header__arrows {
+    margin-top: 2px; // special case due to design margin extending from the component's visual size, not its clickable area
+    margin-bottom: 2px;
+  }
+
   .ds-group-header__right-link {
     @include ds-link($ds-link-paragraph);
   }

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/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 |
-|arrowPosition | String | no | "floating", "header" | "floating" | Determines where the scroll arrows are rendered |
+|arrowPosition | String | no | "floating", "header" | "header" | 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" } |

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

@@ -7,7 +7,7 @@
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set arrowPosition = params.arrowPosition or 'floating' %}
+  {% set arrowPosition = params.arrowPosition or 'header' %}
   {%- set classes = [
     "ds-teaser--list-swipe",
     params.classNames if params.classNames
@@ -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;
-  max-width: 75vw; // ensure low-width devices see atleast part of a second teaser
+  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;
   }
 
@@ -45,7 +45,7 @@
 
   &.ds-teaser-swipe-card--insandare {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading01italicsemibold);
+      @include ds-typography($ds-typography-expressive-heading01italicregular);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "6.0.3",
+  "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",