@bonniernews/dn-design-system-web 15.2.9 → 15.2.11

package/CHANGELOG.md

@@ -4,6 +4,27 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1311](https://github.com/BonnierNews/dn-design-system/issues/1311)) ([cf67eea](https://github.com/BonnierNews/dn-design-system/commit/cf67eea4dbc8f3d137a808c818a30d184403ea0b))
+* prerelease packages ([72b6db2](https://github.com/BonnierNews/dn-design-system/commit/72b6db204a1ac626fb785893adeb7027ef8a0478))
+
 ## [15.2.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.8...@bonniernews/dn-design-system-web@15.2.9) (2024-05-16)
 
 

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,6 +119,7 @@ $ds-group-header__icon-size: 24px;
 
   .ds-group-header__image {
     margin-left: ds-spacing($ds-s-100);
+    align-self: center;
 
     .picture,
     img {

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/foundations/variables/colorsDnDarkTokens.scss

@@ -1,27 +1,27 @@
 $ds-hex-dark-text-primary: #EDEDED;
 $ds-hex-dark-text-primary-02: #B8B8B8;
 $ds-hex-dark-text-secondary: #050505;
-$ds-hex-dark-text-critical: #EF7171;
+$ds-hex-dark-text-critical: #FD2330;
 $ds-hex-dark-text-disabled: #B8B8B8;
 $ds-hex-dark-text-on-brand: #141414;
 $ds-hex-dark-text-on-business: #ffffff;
 $ds-hex-dark-text-on-critical: #ffffff;
 $ds-hex-dark-text-on-success: #ffffff;
-$ds-hex-dark-text-brand: #EF7171;
+$ds-hex-dark-text-brand: #FD2330;
 $ds-hex-dark-text-body-link: #65A0FC;
 $ds-hex-dark-text-body-link-visited: #65A0FC;
 $ds-hex-dark-text-positive: #3A8352;
 $ds-hex-dark-icon-primary: #EDEDED;
 $ds-hex-dark-icon-primary-02: #CFCFCF;
 $ds-hex-dark-icon-secondary: #050505;
-$ds-hex-dark-icon-critical: #EF7171;
+$ds-hex-dark-icon-critical: #FD2330;
 $ds-hex-dark-icon-disabled: #B8B8B8;
 $ds-hex-dark-icon-on-brand: #141414;
 $ds-hex-dark-icon-on-critical: #ffffff;
 $ds-hex-dark-icon-on-success: #ffffff;
 $ds-hex-dark-icon-on-business: #ffffff;
-$ds-hex-dark-icon-brand: #EF7171;
-$ds-hex-dark-component-brand: #EF7171;
+$ds-hex-dark-icon-brand: #FD2330;
+$ds-hex-dark-component-brand: #FD2330;
 $ds-hex-dark-component-business: #3A8352;
 $ds-hex-dark-component-primary: #EDEDED;
 $ds-hex-dark-component-primary-overlay: #ffffff21;
@@ -34,8 +34,8 @@ $ds-hex-dark-component-critical-overlay: #A51D24;
 $ds-hex-dark-component-static-white: #ffffff;
 $ds-hex-dark-component-positive: #3A8352;
 $ds-hex-dark-component-primary-02: #CFCFCF;
-$ds-hex-dark-surface-below: #050505;
-$ds-hex-dark-surface-background: #141414;
+$ds-hex-dark-surface-below: #262626;
+$ds-hex-dark-surface-background: #050505;
 $ds-hex-dark-surface-raised: #2B2B2B;
 $ds-hex-dark-surface-native-article: #2B2B2B;
 $ds-hex-dark-surface-elevated: #2B2B2B;
@@ -43,22 +43,22 @@ $ds-hex-dark-surface-overlay: #05050580;
 $ds-hex-dark-surface-quiz: #EA3E3F;
 $ds-hex-dark-surface-korsord: #8BB6E8;
 $ds-hex-dark-surface-sudoko: #90D0BD;
-$ds-hex-dark-border-primary: #ffffff21;
+$ds-hex-dark-border-primary: #3B3B3B;
 $ds-hex-dark-border-primary-02: #ffffff66;
 $ds-hex-dark-border-primary-03: #EDEDED;
 $ds-hex-dark-border-secondary: #141414;
 $ds-hex-dark-border-business: #3A8352;
-$ds-hex-dark-border-critical: #EF7171;
-$ds-hex-dark-border-focus: #EF7171;
+$ds-hex-dark-border-critical: #FD2330;
+$ds-hex-dark-border-focus: #FD2330;
 $ds-hex-dark-border-focus-02: #ffffff;
-$ds-hex-dark-border-focus-03: #EF7171;
+$ds-hex-dark-border-focus-03: #FD2330;
 $ds-hex-dark-border-focus-04: #3A8352;
 $ds-hex-dark-background-primary: #141414;
-$ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #14141400 0%, #141414 100%);
-$ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #14141400 0%, #141414 100%);
-$ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #14141400 0%, #141414 100%);
-$ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
-$ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
+$ds-hex-dark-gradient-content-fade-left: linear-gradient(90deg, #05050500 0%, #050505 100%);
+$ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #05050500 0%, #050505 100%);
+$ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #05050500 0%, #050505 100%);
+$ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
+$ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #05050500 0%, #050505 100%);
 $ds-hex-dark-static-red-100: #FAD4D4;
 $ds-hex-dark-static-black: #141414;
 $ds-hex-dark-static-transparent-black: #14141499;

package/package.json

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

package/tokens/colors-dark-mode.json

@@ -3,13 +3,13 @@
     "primary": "#EDEDED",
     "primary-02": "#B8B8B8",
     "secondary": "#050505",
-    "critical": "#EF7171",
+    "critical": "#FD2330",
     "disabled": "#B8B8B8",
     "on-brand": "#141414",
     "on-business": "#ffffff",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
-    "brand": "#EF7171",
+    "brand": "#FD2330",
     "body-link": "#65A0FC",
     "body-link-visited": "#65A0FC",
     "positive": "#3A8352"
@@ -18,16 +18,16 @@
     "primary": "#EDEDED",
     "primary-02": "#CFCFCF",
     "secondary": "#050505",
-    "critical": "#EF7171",
+    "critical": "#FD2330",
     "disabled": "#B8B8B8",
     "on-brand": "#141414",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
     "on-business": "#ffffff",
-    "brand": "#EF7171"
+    "brand": "#FD2330"
   },
   "component": {
-    "brand": "#EF7171",
+    "brand": "#FD2330",
     "business": "#3A8352",
     "primary": "#EDEDED",
     "primary-overlay": "#ffffff21",
@@ -42,8 +42,8 @@
     "primary-02": "#CFCFCF"
   },
   "surface": {
-    "below": "#050505",
-    "background": "#141414",
+    "below": "#262626",
+    "background": "#050505",
     "raised": "#2B2B2B",
     "native-article": "#2B2B2B",
     "elevated": "#2B2B2B",
@@ -53,26 +53,26 @@
     "sudoko": "#90D0BD"
   },
   "border": {
-    "primary": "#ffffff21",
+    "primary": "#3B3B3B",
     "primary-02": "#ffffff66",
     "primary-03": "#EDEDED",
     "secondary": "#141414",
     "business": "#3A8352",
-    "critical": "#EF7171",
-    "focus": "#EF7171",
+    "critical": "#FD2330",
+    "focus": "#FD2330",
     "focus-02": "#ffffff",
-    "focus-03": "#EF7171",
+    "focus-03": "#FD2330",
     "focus-04": "#3A8352"
   },
   "background": {
     "primary": "#141414"
   },
   "gradient": {
-    "content-fade-left": "linear-gradient(90deg, #14141400 0%, #141414 100%)",
-    "content-fade-right": "linear-gradient(-90deg, #14141400 0%, #141414 100%)",
-    "content-fade-up": "linear-gradient(180deg, #14141400 0%, #141414 100%)",
-    "content-fade-up-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)",
-    "content-fade-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)"
+    "content-fade-left": "linear-gradient(90deg, #05050500 0%, #050505 100%)",
+    "content-fade-right": "linear-gradient(-90deg, #05050500 0%, #050505 100%)",
+    "content-fade-up": "linear-gradient(180deg, #05050500 0%, #050505 100%)",
+    "content-fade-up-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)",
+    "content-fade-down": "linear-gradient(0deg, #05050500 0%, #050505 100%)"
   },
   "static": {
     "red-100": "#FAD4D4",