@bonniernews/dn-design-system-web 11.1.0 → 11.1.1

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [11.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.1.0...@bonniernews/dn-design-system-web@11.1.1) (2024-02-02)
+
+
+### Bug Fixes
+
+* **web:** correct height on byline toggle ([#1184](https://github.com/BonnierNews/dn-design-system/issues/1184)) ([2464ece](https://github.com/BonnierNews/dn-design-system/commit/2464ece0c6c0bacbf6f3a0b90787372bfd61c079))
+
 ## [11.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.4...@bonniernews/dn-design-system-web@11.1.0) (2024-02-01)
 
 

package/components/button-toggle/button-toggle.scss

@@ -55,6 +55,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   border: $ds-btn-toggle-outlined__border-width solid var(--ds-btn-toggle__border-color);
   border-radius: 100px;
   position: relative;

package/components/byline/README.md

@@ -21,6 +21,7 @@ The byline is a list item and should be wrapped in a list.
 |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. |
+|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 |
 |classNames | String | no | | | Ex. "my-special-class" |

package/components/byline/byline.njk

@@ -27,6 +27,7 @@
           {{ ButtonToggle({
             text: "Följ",
             selectedText: "Följer",
+            selected: params.followed,
             variant: "secondaryFilled",
             size: "xsmall",
             attributes: params.elementAttributes,

package/components/byline/byline.scss

@@ -52,21 +52,6 @@ $ds-byline__image-size--direkt: 36px;
       bottom: 0;
       right: 0;
     }
-
-    .ds-icon {
-      position: relative;
-      display: flex;
-      height: ds-px-to-rem($ds-byline__icon-size);
-      width: ds-px-to-rem($ds-byline__icon-size);
-      margin: 0;
-      @at-root .ds-force-px#{&} {
-        height: $ds-byline__icon-size;
-        width: $ds-byline__icon-size;
-      }
-      svg {
-        fill: currentColor;
-      }
-    }
   }
 
   .ds-byline__content-wrapper {
@@ -122,11 +107,24 @@ $ds-byline__image-size--direkt: 36px;
     color: $ds-color-icon-primary;
     display: inline-flex;
     margin-left: ds-spacing($ds-s-100);
+
+    .ds-icon {
+      position: relative;
+      display: flex;
+      height: ds-px-to-rem($ds-byline__icon-size);
+      width: ds-px-to-rem($ds-byline__icon-size);
+      margin: 0;
+      @at-root .ds-force-px#{&} {
+        height: $ds-byline__icon-size;
+        width: $ds-byline__icon-size;
+      }
+      svg {
+        fill: currentColor;
+      }
+    }
   }
 
   .ds-byline__btn-toggle {
-    min-height: $ds-byline__icon-size;
-    min-width: 48px;
     margin-left: ds-spacing($ds-s-100);
   }
 

package/package.json

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