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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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)
+
+
+### Features
+
+* **web:** redesign linkbox ([#1183](https://github.com/BonnierNews/dn-design-system/issues/1183)) ([3657ac0](https://github.com/BonnierNews/dn-design-system/commit/3657ac0f48688475452702e4ac64a26044df1a3d))
+
 ## [11.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.3...@bonniernews/dn-design-system-web@11.0.4) (2024-01-30)
 
 

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/components/link-box/README.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
+|linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
 |vignetteText | String | no | | | Heading of the link box |
 |vignetteTargetUrl | String | no | | | Target URL for the header |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/link-box/link-box-item.njk

@@ -15,9 +15,13 @@
         {{ params.mediaHtml | safe }}
       </div>
     {% endif %}
-
-    {% if params.label %}
-      <span class="{{ componentClassName + '__label'}}">{{ params.label }}</span>
-    {% endif %}
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.label %}
+        <span class="{{ componentClassName + '__label'}}">{{ params.label }}</span>
+      {% endif %}
+      {% if params.text %}
+        <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
+      {% endif %}
+    </div>
   </a>
 {% endmacro %}

package/components/link-box/link-box-item.scss

@@ -1,26 +1,24 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-link-box-item {
-  padding: ds-spacing($ds-s-100);
+  padding: 0;
   background-color: $ds-color-surface-background;
-  border: ds-border-width(x1) solid $ds-color-border-primary;
-  border-radius: ds-border-radius(x2);
   text-decoration: none;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
 
   &:focus-visible {
     outline: none;
 
-    .ds-link-box-item__label {
+    .ds-link-box-item__content {
       @include ds-focus(2px, false);
     }
   }
 
   @include ds-hover(true) {
-    > .ds-link-box-item__label {
+    .ds-link-box-item__label {
       @include ds-underline();
     }
   }
@@ -28,30 +26,30 @@
   .ds-link-box-item__label {
     color: $ds-color-text-primary;
     @include ds-typography($ds-typography-functional-body01semibold);
-    text-align: center;
+    word-break: break-word;
+    display: block;
   }
 
-  .ds-link-box-item__media + .ds-link-box-item__label {
-    margin-top: ds-spacing($ds-s-050);
+  .ds-link-box-item__text {
+    color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functional-body01regular);
+    display: block;
   }
 
-  .ds-link-box-item__media {
-    font-size: 0;
+  .ds-link-box-item__content {
+    width: 100%;
   }
 
-  &.ds-link-box-item--quiz {
-    .ds-link-box-item__media {
-      width: 48px;
-    }
+  .ds-link-box-item__media + .ds-link-box-item__content {
+    margin-top: ds-spacing($ds-s-050);
   }
 
-  // Just sample css, replace with actual when design is available
-  &.ds-link-box-item--pod {
-    .ds-link-box-item__media {
-      &,
-      & img {
-        width: 100%;
-      }
+  .ds-link-box-item__media {
+    font-size: 0;
+    width: 100%;
+    & img {
+      width: 100%;
+      height: auto;
     }
   }
 }

package/components/link-box/link-box.scss

@@ -2,23 +2,20 @@
 @use "../../components/group-header/group-header";
 @use "./link-box-item";
 
-$ds-link-box-grid-gap: ds-spacing($ds-s-050);
-
 .ds-link-box {
   background-color: $ds-color-surface-background;
 
   .ds-link-box__grid {
-    padding: ds-spacing($ds-s-075);
+    padding: ds-spacing($ds-s-100);
     display: grid;
-    grid-column-gap: $ds-link-box-grid-gap;
-    row-gap: $ds-link-box-grid-gap;
+    gap: ds-spacing($ds-s-100 $ds-s-050);
 
     @include ds-mq-only-breakpoint(mobile) {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
 

package/package.json

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