@bonniernews/dn-design-system-web 11.1.3 → 11.2.1

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [11.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.2.0...@bonniernews/dn-design-system-web@11.2.1) (2024-02-07)
+
+
+### Bug Fixes
+
+* **web:** footer should take attributes ([#1190](https://github.com/BonnierNews/dn-design-system/issues/1190)) ([6dc0d2b](https://github.com/BonnierNews/dn-design-system/commit/6dc0d2b64c224c41c8759111d6de497c69a57f44))
+
+## [11.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.1.3...@bonniernews/dn-design-system-web@11.2.0) (2024-02-07)
+
+
+### Features
+
+* **web:** add linkattributes to byline and toggle list item ([#1188](https://github.com/BonnierNews/dn-design-system/issues/1188)) ([e4ae0ce](https://github.com/BonnierNews/dn-design-system/commit/e4ae0ce217b07ddee78efad6d7641df166b0732c))
+
 ## [11.1.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.1.2...@bonniernews/dn-design-system-web@11.1.3) (2024-02-06)
 
 

package/components/byline/README.md

@@ -24,6 +24,7 @@ The byline is a list item and should be wrapped in a list.
 |followed | Boolean | no | true, false | false | If true the toggle button will be in "selected" state. Depends on followable parameter. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |
+|linkAttributes | Object | no | | | Sets attributes on the link element. |
 |classNames | String | no | | | Ex. "my-special-class" |
 |elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

package/components/byline/byline.njk

@@ -52,8 +52,9 @@
 
   {# This inner link can exist in combination with a button. It's been decided that it should only be used for authorPageUrls, not for email #}
   {% if not useOuterAnchorElement and params.authorPageUrl %}
+    {% set linkAttributes = getAttributes(params.linkAttributes) %}
     {%- set ariaLabel = 'aria-label="Läs mer från ' + params.authorName + '"' %}
-    <a href="{{params.authorPageUrl}}" {{ ariaLabel | safe if not params.email }} class="{{ componentClassName + '__content-wrapper'}}">
+    <a href="{{params.authorPageUrl}}" {{- linkAttributes | safe }} {{ ariaLabel | safe if not params.email }} class="{{ componentClassName + '__content-wrapper'}}">
       {{ caller() if caller }}
     </a>
   {% else %}
@@ -90,7 +91,8 @@
   {% endif %}
 
   {% if useOuterAnchorElement %}
-    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }}>
+    {% set linkAttributes = getAttributes(params.linkAttributes) %}
+    <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }} {{- linkAttributes | safe }}>
       {{ caller() if caller }}
     </a>
   {% else %}

package/components/footer/README.md

@@ -16,6 +16,7 @@
 |rudolf | Object | yes | | | Ex. { imgUrl: "images/rudolf.png", text: "Punkten efter Dagens Nyheter har funnits med.." } |
 |channels | Array > Object | no | | | Ex. [{ href: "?channel=mobile", text: "Mobil", classNames: "hidden-mobile", attributes: {rel: "nofollow"} }] |
 |classNames | String | no | | | Ex. "my-special-class" |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
 
 ## Minimum requirement example

package/components/footer/footer.njk

@@ -7,8 +7,8 @@
     "ds-force-px" if params.forcePx,
     params.classNames if params.classNames
   ] | join(" ") %}
-
-  <footer class="{{ classes }}">
+  {%- set attributes = getAttributes(params.attributes) %}
+  <footer class="{{ classes }}" {{- attributes | safe }}>
     <div class="{{ componentClassName + '__inner'}}">
       <div class="{{ componentClassName + '__link-grid'}}">
         {% for group in params.linkGroups %}

package/components/list-item/README-toggle.md

@@ -21,6 +21,7 @@
 |border | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |elementAttributes | Object | no | | | Sets attributes on actual toggle element and not list item. Same structure as attributes above |
+|linkAttributes | Object | no | | | Set attributes on the title link. Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
 

package/components/list-item/list-item.njk

@@ -17,7 +17,8 @@
         {% if params.title %}
           <div class="{{ componentClassName + '__titles'}}">
             {% if params.titleHref and not params.disabled %}
-              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}">{{ params.title }}</a>
+              {% set linkAttributes = getAttributes(params.linkAttributes) %}
+              <a class="{{ componentClassName + '__title'}}" href="{{ params.titleHref }}" {{ linkAttributes | safe }}>{{ params.title }}</a>
             {% else %}
               <span class="{{ componentClassName + '__title'}}">{{ params.title }}</span>
             {% endif %}

package/package.json

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