@bonniernews/dn-design-system-web 5.1.0 → 6.0.1

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.1 (2023-09-29)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 6.0.0 (2023-09-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** change TeaserListSwipe to use variant instead of scrollType (#1015)
+
+### Bug Fixes
+
+* **web:** change TeaserListSwipe to use variant instead of scrollType ([#1015](https://github.com/BonnierNews/dn-design-system/issues/1015)) ([b0a4400](https://github.com/BonnierNews/dn-design-system/commit/b0a440032a2ba65f89946c1f005b442b6d0479c0))
+
+
+
 ## 5.1.0 (2023-09-27)
 
 

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

@@ -53,7 +53,7 @@
       }
 
       .ds-group-header__right-link {
-        text-decoration: none;
+        @include ds-underline(2px, 1px);
       }
     }
   }

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 |
-|scrollType | String | no | "arrows", "header" | "arrows" | Where to render the scroll arrows |
+|arrowPosition | String | no | "floating", "header" | "floating" | 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" } |
@@ -40,3 +40,6 @@ These are copy paste friendly examples to quickly get started using a component.
 ```scss
 @use "@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe";
 ```
+
+### JS
+This component does not come with any JS to facilitate scrolling via the buttons. Implementing that is left as an exercise to the reader.

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

@@ -1,4 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
@@ -6,19 +7,23 @@
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set attributes = getAttributes(params.attributes) %}
+  {% set arrowPosition = params.arrowPosition or 'floating' %}
   {%- set classes = [
-    componentClassName,
     "ds-teaser--list-swipe",
-    "ds-theme--" + params.theme if params.theme,
-    classNamePrefix + params.areaType if params.areaType,
     params.classNames if params.classNames
   ] | join(" ") %}
-  <div class="{{ classes }}" {{- attributes | safe }}>
+
+  {%- call TeaserCard({
+    areaType: params.areaType,
+    theme: params.theme,
+    attributes: params.attributes,
+    classNames: classes
+  }) %}
     {{ GroupHeader({
       title: params.title,
       href: params.titleHref,
-      variant: 'arrows' if params.scrollType == 'header'
+      variant: 'arrows' if arrowPosition === 'header' else 'link',
+      linkText: 'Visa alla' if arrowPosition === 'floating'
     }) }}
     <div class="{{ componentClassName + '__carousel'}}">
       {% for teaser in params.teasers %}
@@ -26,7 +31,7 @@
       {% endfor %}
     </div>
 
-    {% if params.scrollType != 'header' %}
+    {% if arrowPosition === 'floating' %}
       {{ IconButton({
         iconName: 'arrow_back',
         variant: 'elevated',
@@ -44,5 +49,5 @@
         forcePx: true
       }) }}
     {% endif %}
-  </div>
+  {% endcall %}
 {% endmacro %}

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

@@ -11,7 +11,7 @@
   @include ds-teaser-focus(2px);
 
   .ds-teaser__carousel {
-    padding: ds-spacing-component(0 $ds-sc-x4);
+    margin: ds-spacing-component(0 $ds-sc-x4);
     padding-bottom: ds-spacing-component($ds-sc-x3);
     overflow-x: scroll;
     display: grid;
@@ -27,14 +27,14 @@
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
-      z-index: 10;
+      z-index: 2;
 
       &--back {
-        left: ds-spacing-component($ds-sc-x4);
+        left: 0;
       }
 
       &--forward {
-        right: ds-spacing-component($ds-sc-x4);
+        right: 0;
       }
     }
   }

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -19,7 +19,7 @@ $typographyTokensScreenSmall: (
   ),
   expressive-heading01italicregular: (
     fontFamily: "DN Serif Text",
-    fontWeight: Regular,
+    fontWeight: Medium,
     fontSize: 16,
     letterSpacing: "",
     lineHeight: 20,

package/package.json

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