@bonniernews/dn-design-system-web 15.2.10 → 15.2.12

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [15.2.12](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.11...@bonniernews/dn-design-system-web@15.2.12) (2024-06-19)
+
+
+### Bug Fixes
+
+* **web:** group header image updates ([#1320](https://github.com/BonnierNews/dn-design-system/issues/1320)) ([2a684b5](https://github.com/BonnierNews/dn-design-system/commit/2a684b5d6a4aba737e3adb6fce78b0734e6f1d92))
+
+## [15.2.11](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.10...@bonniernews/dn-design-system-web@15.2.11) (2024-06-04)
+
+
+### Bug Fixes
+
+* **web:** add image to bauta ([#1315](https://github.com/BonnierNews/dn-design-system/issues/1315)) ([23e1091](https://github.com/BonnierNews/dn-design-system/commit/23e1091c4dbddf7ca206732a0fc0cb6f95e95bf5))
+
+
+### Maintenance
+
+* **app:** change pressable onpress type ([#1313](https://github.com/BonnierNews/dn-design-system/issues/1313)) ([3ce69ee](https://github.com/BonnierNews/dn-design-system/commit/3ce69ee7fb7323ac62b35716d247a2d6f50e5b45))
+* prerelease packages ([09c0dea](https://github.com/BonnierNews/dn-design-system/commit/09c0dea5706d48f1769d392eef3357b653a90928))
+
 ## [15.2.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.9...@bonniernews/dn-design-system-web@15.2.10) (2024-05-20)
 
 

package/components/group-header/README.md

@@ -11,22 +11,26 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | string | yes | | | The title text |
-|variant | string | no | icon, link, toggle, arrows, image, bauta, bauataxl, image | icon | The variant to render |
+|type | string | no | icon, link, toggle, arrows | icon | The type of interactive element added to the header |
+|variant | string | no | bauta, bauataxl | | The design variant, if not bauta or bautaxl the group header will get the 'standard' design |
+|mediaHtml | string | no | | | The image markup for the header |
 |href | string | no | | | If given, the title is rendered as a link |
-|linkText | string | no | | | The link text to render (only for variants `link` and `direkt`) |
+|linkText | string | no | | | The link text to render (only for types `link` and `direkt`) |
 |showBottomBorder | boolean | no | | | If true there will be a bottom border |
-|toggleText | text | no | | | `text` parameter to ToggleButton (only for variant `toggle`) |
-|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for variant `toggle`) |
-|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for variant `toggle`) |
-|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for variant `toggle`) |
-|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for variant `toggle`) |
-|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for variant `toggle`) |
+|toggleText | text | no | | | `text` parameter to ToggleButton (only for type `toggle`) |
+|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for type `toggle`) |
+|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for type `toggle`) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for type `toggle`) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for type `toggle`) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for type `toggle`) |
 |classNames | String | no | | | Ex. "my-special-class" |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 
-NB: The `arrows` variant is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.
+NB: The `arrows` type is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.
 
-Depending on variant, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
+Depending on type, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
+
+The type `toggle` is (currently) not allowed if variant is bauta or bautaxl.
 
 ## Minimum requirement example
 
@@ -49,4 +53,4 @@ These are copy paste friendly examples to quickliy get started using a component
 ```
 
 ### JS
-If you use the `toggle` variant, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).
+If you use the `toggle` type, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).

package/components/group-header/group-header.njk

@@ -10,28 +10,29 @@
 
   {%- set classes = [
     componentClassName,
-    classNamePrefix + (params.variant or "icon"),
+    classNamePrefix + (params.type or "icon"),
+    classNamePrefix + params.variant if params.variant,
     classNamePrefix + 'bottom-border' if params.showBottomBorder,
     params.classNames if params.classNames
   ] | join(" ") %}
 
   {% set groupHeaderInner %}
-    {% if params.variant == 'image' %}
+    {% if params.mediaHtml %}
       <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml | safe }}</div>
     {% endif %}
     <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
 
-    {% if params.variant == 'link' and params.linkText and params.href %}
+    {% if params.type == 'link' and params.linkText and params.href %}
       <span class="{{ componentClassName + '__right-link' }}">
         {{ params.linkText }}
       </span>
-    {% elif (params.variant == 'icon' or params.variant == 'bauta' or params.variant == 'image' or not params.variant) and params.href %}
+    {% elif (params.type == 'icon' or not params.type) and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
-    {% elif (params.variant == 'arrows') and params.href and params.linkText %}
+    {% elif (params.type == 'arrows') and params.href and params.linkText %}
       <span class="{{ componentClassName + '__right-link' }} hidden-desktop">
         {{ params.linkText }}
       </span>
-    {% elif (params.variant == 'arrows') and params.href %}
+    {% elif (params.type == 'arrows') and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon hidden-desktop' }) }}
     {% endif %}
   {% endset %}
@@ -44,9 +45,10 @@
     {% else %}
       {{ groupHeaderInner | safe }}
     {% endif %}
-    {% if params.variant == 'toggle' %}
+    {# there is no static-white toggle btn so it is disabled for bauta/xl for now #}
+    {% if params.type == 'toggle' and not params.variant %}
       {{ ButtonToggle({
-        variant: 'brand',
+        variant: "brand",
         size: 'small',
         text: params.toggleText,
         selectedText: params.toggleSelectedText,
@@ -55,10 +57,11 @@
         classNames: params.toggleClassNames,
         attributes: params.toggleAttributes
       }) }}
-    {% elif (params.variant == 'arrows') %}
+    {% elif (params.type == 'arrows') %}
+      {%  set buttonVariant = "staticWhite" if params.variant else "primary" %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
         {{ IconButton({
-          variant: "primary",
+          variant: buttonVariant,
           emphasis: "outline",
           size: "small",
           iconName: "arrow_back",
@@ -66,7 +69,7 @@
           attributes: {"aria-label": "Föregående"}
         }) }}
         {{ IconButton({
-          variant: "primary",
+          variant: buttonVariant,
           emphasis: "outline",
           size: "small",
           iconName: "arrow_forward",

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

@@ -28,6 +28,7 @@ $ds-group-header__icon-size: 24px;
   &--bautaxl {
     --group-header-background: #{$ds-color-static-black};
     --group-header-color: #{$ds-color-static-yellow};
+    --group-header-icon-color: #{$ds-color-icon-on-brand};
   }
 
   &--toggle,
@@ -42,11 +43,6 @@ $ds-group-header__icon-size: 24px;
     }
   }
 
-  &--image {
-    display: flex;
-    align-items: center;
-  }
-
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn--toggle {
@@ -73,6 +69,7 @@ $ds-group-header__icon-size: 24px;
   .ds-group-header__right-link {
     @include ds-typography($ds-typography-functional-body01regular);
     @include ds-link($ds-link-paragraph);
+    color: var(--group-header-icon-color);
   }
 
   .ds-group-header__icon {
@@ -122,10 +119,11 @@ $ds-group-header__icon-size: 24px;
 
   .ds-group-header__image {
     margin-left: ds-spacing($ds-s-100);
+    align-self: center;
 
     .picture,
     img {
-      max-height: ds-px-to-rem($ds-group-header__icon-size);
+      height: ds-px-to-rem($ds-group-header__icon-size);
     }
 
     figure {

package/components/list-item/list-item.scss

@@ -113,7 +113,7 @@ $ds-list-item__icon-size: 24px;
   .ds-list-item__image {
     .picture,
     img {
-      max-height: ds-px-to-rem($ds-list-item__icon-size);
+      height: ds-px-to-rem($ds-list-item__icon-size);
     }
 
     @at-root .ds-force-px#{&} {

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

@@ -13,12 +13,12 @@
     params.classNames if params.classNames
   ] | join(" ") %}
 
-  {% if params.groupHeaderVariant %}
-    {% set variant = params.groupHeaderVariant %}
+  {% if params.groupHeaderType %}
+    {% set type = params.groupHeaderType %}
   {% elif arrowPosition === 'header' %}
-    {% set variant = 'arrows' %}
+    {% set type = 'arrows' %}
   {% else %}
-    {% set variant = 'link' %}
+    {% set type = 'link' %}
   {% endif %}
 
   {%- call TeaserCard({
@@ -30,7 +30,7 @@
     {{ GroupHeader({
       title: params.title,
       href: params.titleHref,
-      variant: variant,
+      type: type,
       linkText: 'Visa alla'
     }) }}
     <div class="{{ componentClassName + '__carousel'}}">

package/components/teaser-package/teaser-package.njk

@@ -12,18 +12,12 @@
   ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
 
-  {% if params.vignetteIconHtml %}
-    {% set variant = 'image' %}
-  {% elif params.areaType === 'bauta' or params.areaType === 'bautaxl'%}
-    {% set variant = params.areaType  %}
-  {% endif %}
-
   <div class="{{ classes }}">
     {% if params.vignetteText %}
       {{ GroupHeader({
         title: params.vignetteText,
         href: params.vignetteTargetUrl,
-        variant: variant,
+        variant: params.areaType if params.areaType,
         mediaHtml: params.vignetteIconHtml if params.vignetteIconHtml
       }) }}
     {% endif %}

package/package.json

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