@bonniernews/dn-design-system-web 4.6.1 → 4.7.1

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.
 
+## 4.7.1 (2023-09-14)
+
+
+### Bug Fixes
+
+* **foundations:** update readme to trigger package release ([#1006](https://github.com/BonnierNews/dn-design-system/issues/1006)) ([fa8a99e](https://github.com/BonnierNews/dn-design-system/commit/fa8a99e3dd054a0e0e5263d9cc1ee42faf23795e))
+
+
+
+## 4.7.0 (2023-09-13)
+
+
+### Features
+
+* **web:** byline direkt tweaks ([#997](https://github.com/BonnierNews/dn-design-system/issues/997)) ([3302077](https://github.com/BonnierNews/dn-design-system/commit/3302077c8b51ca072b6b93c104fcf8536729ea29))
+
+
+
 ## 4.6.1 (2023-09-13)
 
 

package/README.md

@@ -10,4 +10,6 @@ Storybook latest: [https://designsystem-latest.dn.se/](https://designsystem-late
 
 Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
 
+Changelog: [https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md](https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md)
+
 For specific instructions see each component or helper readme

package/components/byline/README.md

@@ -8,20 +8,19 @@
 
 The byline is a list item and should be wrapped in a list.
 
-* If variant:'follow', followable:true AND authorPageUrl are set at the same time, the element will render as a div with an inner `<a>` and a button.
-* If variant:'link' and authorpageUrl are set, the outer elment will render as an `<a>`.
+* variant:'follow' can render both a button and a link
 
 ## Parameters
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|variant | String | yes | follow, link, compact | | |
+|variant | String | yes | follow, link, direkt | | |
 |authorName | String | yes | | | |
 |bylineImage | HTML | no | | | Html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
-|role | String | no | | | Used in variant link and compact |
-|email | String | no | | | email will be displayed instead of role for variant follow |
-|authorPageUrl | String | no | | | The whole item (varant link and compact), or the title and subtitle (variant follow) will link to this url |
-|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant follow. |
+|role | String | no | | | Used in variant:link |
+|email | String | no | | | email will be displayed instead of role for variant:follow |
+|authorPageUrl | String | no | | | For variant:button an inner link can be used in combination with a button, for other variants an outer link is used |
+|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant:follow. |
 |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 |
 |classNames | String | no | | | Ex. "my-special-class" |

package/components/byline/byline.njk

@@ -8,7 +8,7 @@
     {% call BylineInner(params, componentClassName) %}
       <div class="{{ componentClassName + '__inner'}}">
         {% set componentClassName = componentClassName %}
-        {% call BylineContent(params, visualVariant, componentClassName ) %}
+        {% call BylineContent(params, componentClassName ) %}
           {% if params.bylineImage %}
             <span class="{{ componentClassName + '__image'}}">{{- params.bylineImage | safe -}}</span>
           {% endif %}
@@ -21,10 +21,9 @@
             {% endif %}
           </div>
         {% endcall %}
-        {% if visualVariant == 'icon' %}
+        {% if useArrowIcon %}
           <span class="{{ componentClassName + '__icon-right'}}">{{- IconUse({ icon: 'arrow_forward' }) | safe -}}</span>
-        {% endif %}
-        {% if visualVariant == 'button' and params.followable %}
+        {% elif useFollowButton %}
           {{ ButtonToggle({
             text: "Följ",
             selectedText: "Följer",
@@ -42,9 +41,17 @@
 {% endmacro %}
 
 {# Internal helper macro - not intended for use outside of this file #}
-{% macro BylineContent(params, visualVariant, componentClassName) %}
-  {% set subtitle = params.role if params.variant == 'link' else params.email %}
-  {% if visualVariant == 'button' and params.authorPageUrl %}
+{% macro BylineContent(params, componentClassName) %}
+  {% if params.variant == 'link' %}
+    {% set subtitle = params.role %}
+  {% elif params.variant == 'follow' %}
+    {% set subtitle = params.email %}
+  {% elif params.variant == 'direkt' %}
+    {% set subtitle = false %}
+  {% endif %}
+
+    {# 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 useOuterAnchorElement and params.authorPageUrl %}
     <a href="{{params.authorPageUrl}}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ componentClassName + '__content-wrapper'}}">
       {{ caller() if caller }}
     </a>
@@ -60,7 +67,10 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set variant = [] %}
   {% set attributes = getAttributes(params.attributes) %}
-  {% set visualVariant = "icon" if (params.variant == 'link' or params.variant == 'compact' or params.followable != true) and params.authorPageUrl else "button" %}
+
+  {% set useOuterAnchorElement = true if (params.authorPageUrl and not params.followable) %}
+  {% set useArrowIcon = true if (useOuterAnchorElement and params.variant !== 'direkt') %}
+  {% set useFollowButton = true if (params.variant == 'follow' and params.followable) %}
 
   {% if params.forcePx %}
     {% set variant = (variant.push("ds-force-px"), variant) %}
@@ -85,7 +95,7 @@
     {% set elementClassNames = (elementClassNames.push(params.elementClassNames), elementClassNames) %}
   {% endif %}
 
-  {% if visualVariant == 'icon' %}
+  {% if useOuterAnchorElement %}
     <a href="{{ params.authorPageUrl }}" aria-label="Läs mer från: {{ params.authorName }}" class="{{ classes }}" {{- attributes | safe }}>
       {{ caller() if caller }}
     </a>

package/components/byline/byline.scss

@@ -4,7 +4,7 @@
 
 $ds-byline__icon-size: 24px;
 $ds-byline__image-size: 44px;
-$ds-byline__image-size--compact: 36px;
+$ds-byline__image-size--direkt: 36px;
 
 .ds-byline__outer {
   list-style: none;
@@ -143,19 +143,24 @@ $ds-byline__image-size--compact: 36px;
     }
   }
 
-  &.ds-byline--compact {
+  &.ds-byline--direkt {
     .ds-byline__titles {
       .ds-byline__subtitle {
         line-height: ds-spacing-component($ds-sc-x4);
       }
     }
     .ds-byline__image {
-      height: $ds-byline__image-size--compact;
-      width: $ds-byline__image-size--compact;
+      height: $ds-byline__image-size--direkt;
+      width: $ds-byline__image-size--direkt;
     }
 
     .ds-byline__btn-toggle {
-      min-height: $ds-byline__image-size--compact;
+      min-height: $ds-byline__image-size--direkt;
+    }
+
+    .ds-byline__inner {
+      padding-top: ds-spacing-component($ds-sc-x3);
+      padding-bottom: ds-spacing-component($ds-sc-x3);
     }
   }
 

package/package.json

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