@bonniernews/dn-design-system-web 6.0.5 → 6.0.7

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.7 (2023-10-09)
+
+
+### Bug Fixes
+
+* **web:** bauta variant of group header ([#1047](https://github.com/BonnierNews/dn-design-system/issues/1047)) ([6bd3aaf](https://github.com/BonnierNews/dn-design-system/commit/6bd3aafdf87316c1cf8d17553dd10eb7fbf32be1))
+
+
+
+## 6.0.6 (2023-10-09)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## 6.0.5 (2023-10-03)
 
 

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

@@ -22,7 +22,7 @@
       <span class="{{ componentClassName + '__right-link' }}">
         {{ params.linkText }}
       </span>
-    {% elif (params.variant == 'icon' or not params.variant) and params.href %}
+    {% elif (params.variant == 'icon' or params.variant == 'bauta' or not params.variant) and params.href %}
       {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
     {% elif (params.variant == 'arrows') and params.href and params.linkText %}
       <span class="{{ componentClassName + '__right-link' }} hidden-desktop">

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

@@ -3,18 +3,32 @@
 @use "../icon-button/icon-button.scss";
 
 .ds-group-header {
+  --group-header-background: #{$ds-color-background-primary};
+  --group-header-color: #{$ds-color-text-primary};
+  --group-header-icon-color: currentColor;
   display: flex;
   align-items: center;
   justify-content: space-between;
   align-items: stretch;
-  background: $ds-color-background-primary;
-  color: $ds-color-text-primary;
+  background: var(--group-header-background);
+  color: var(--group-header-color);
   @include ds-typography($ds-typography-functional-body02regular);
 
   &--bottom-border {
     border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
   }
 
+  &--bauta {
+    --group-header-background: #{$ds-theme-color};
+    --group-header-color: #{$ds-color-text-on-brand};
+    --group-header-icon-color: #{$ds-color-icon-on-brand};
+  }
+
+  &--bautaxl {
+    --group-header-background: #{$ds-color-static-black};
+    --group-header-color: #{$ds-color-static-yellow};
+  }
+
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn-toggle {
@@ -40,6 +54,7 @@
   .ds-group-header__icon {
     height: 24px;
     width: 24px;
+    color: var(--group-header-icon-color);
   }
 
   .ds-group-header__href {
@@ -75,4 +90,8 @@
   &--bottom-border .ds-group-header__title {
     padding-bottom: ds-spacing-component($ds-sc-x3) - ds-metrics-border-width(x1);
   }
+
+  &--bautaxl .ds-group-header__title {
+    @include ds-typography($ds-typography-detailbaota-xl-label);
+  }
 }

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

@@ -1,5 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 
 {% macro TeaserPackage(params) %}
   {%- set componentClassName = "ds-teaser-package" %}
@@ -12,18 +12,12 @@
   ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
   <div class="{{ classes }}">
-    {%- if params.vignetteTargetUrl and params.vignetteText %}
-      <a href="{{ params.vignetteTargetUrl }}"
-        class="{{ componentClassName + '__vignette'}}"
-        {{- attributes | safe }}>
-        <span>{{ params.vignetteText }}</span>
-        {# To keep the design as close to the old master design as possible, bautaXL does not have an arrow now. But we are hoping it'll make a comeback. #}
-        {% if params.areaType != "bautaxl" %}
-          {{ IconUse({ icon: "arrow_forward", attributes: {"aria-hidden": true} }) }}
-        {% endif %}
-      </a>
-    {% elif params.vignetteText %}
-      <div class="{{ componentClassName + '__vignette'}}">{{ params.vignetteText }}</div>
+    {% if params.vignetteText %}
+      {{ GroupHeader({
+        title: params.vignetteText,
+        href: params.vignetteTargetUrl,
+        variant: params.areaType if params.areaType === 'bauta' or params.areaType === 'bautaxl'
+      }) }}
     {% endif %}
     {{ params.teasersHtml | safe }}
   </div>

package/components/teaser-package/teaser-package.scss

@@ -1,5 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss";
+@use "../../components/group-header/group-header";
 
 .ds-teaser-package {
   position: relative;
@@ -43,49 +44,12 @@
     display: none;
   }
 
-  .ds-teaser-package__vignette {
-    padding: ds-spacing-component($ds-sc-x3);
-    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-left);
-    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-right);
-    @include ds-typography($ds-typography-functional-body02bold);
-    @include ds-teaser-focus(-8px);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: $ds-color-component-secondary;
-  }
-
-  a.ds-teaser-package__vignette {
-    text-decoration-line: none;
-    @include ds-hover(true) {
-      @include ds-underline(1px, 2px);
-    }
-  }
-
-  .ds-teaser-package__vignette,
-  a.ds-teaser-package__vignette {
-    color: $ds-color-text-primary;
-  }
-
-  &.ds-teaser-package--bauta {
-    .ds-teaser-package__vignette {
-      color: $ds-color-static-white;
-      background-color: $ds-theme-color;
-    }
-  }
-
   &.ds-teaser-package--bautaxl {
     &::after {
       background-color: transparent;
     }
 
-    .ds-teaser-package__vignette {
-      color: $ds-color-static-yellow;
-      background-color: $ds-color-static-black;
-      @include ds-typography($ds-typography-detailbaota-xl-label);
-    }
-
-    .ds-teaser-package__vignette
+    .ds-group-header
       + .ds-teaser--large:not(.ds-teaser--large-italic):not(
         .ds-teaser--large-big-italic
       ) {
@@ -117,11 +81,4 @@
       }
     }
   }
-
-  .ds-icon {
-    width: ds-px-to-rem(24px);
-    height: ds-px-to-rem(24px);
-    color: currentColor;
-    display: inline-flex;
-  }
 }

package/foundations/variables/colorsDnDarkTokens.scss

@@ -16,7 +16,7 @@ $ds-hex-dark-icon-primary-02: #CFCFCF;
 $ds-hex-dark-icon-secondary: #050505;
 $ds-hex-dark-icon-critical: #EF7171;
 $ds-hex-dark-icon-disabled: #B8B8B8;
-$ds-hex-dark-icon-on-brand: #ffffff;
+$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;

package/package.json

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

@@ -20,7 +20,7 @@
     "secondary": "#050505",
     "critical": "#EF7171",
     "disabled": "#B8B8B8",
-    "on-brand": "#ffffff",
+    "on-brand": "#141414",
     "on-critical": "#ffffff",
     "on-success": "#ffffff",
     "on-business": "#ffffff",