@bonniernews/dn-design-system-web 20.6.0 → 20.7.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [20.7.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.7.0-beta.0) (2024-10-17)
+
+
+### Features
+
+* **web:** one level of bauta with background color ([8f843f7](https://github.com/BonnierNews/dn-design-system/commit/8f843f7f24352feaa89b9c2f332a070845749f0f))
+
+
+### Maintenance
+
+* **web:** running multiple screenshots via test_ids ([#1426](https://github.com/BonnierNews/dn-design-system/issues/1426)) ([996e498](https://github.com/BonnierNews/dn-design-system/commit/996e49813c9a1124cad803760437fba4420cbce7))
+
 ## [20.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.5.4...@bonniernews/dn-design-system-web@20.6.0) (2024-10-09)
 
 

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

@@ -13,6 +13,7 @@
     classNamePrefix + (params.type or "icon"),
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + 'bottom-border' if params.showBottomBorder,
+    'ds-dark' if params.variant == 'bauta',
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -45,7 +46,7 @@
     {% else %}
       {{ groupHeaderInner | safe }}
     {% endif %}
-    {# there is no static-white toggle btn so it is disabled for bauta/xl for now #}
+    {# there is no static-white toggle btn so it is disabled for bauta for now #}
     {% if params.type == 'toggle' and not params.variant %}
       {{ ButtonToggle({
         variant: "brand",

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

@@ -23,15 +23,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--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};
-    --group-header-icon-color: #{$ds-color-icon-on-brand};
+    --group-header-background: #{$bauta-surface-color};
   }
 
   &--toggle,
@@ -116,10 +108,6 @@ $ds-group-header__icon-size: 24px;
     padding-bottom: ds-spacing($ds-s-075) - ds-border-width(x1);
   }
 
-  &--bautaxl .ds-group-header__title {
-    @include ds-typography($ds-typography-detailbaota-xl-label);
-  }
-
   .ds-group-header__image {
     margin-left: ds-spacing($ds-s-100);
     align-self: center;

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

@@ -8,7 +8,8 @@
     componentClassName,
     classNamePrefix + params.areaType if params.areaType,
     'ds-theme--' + params.theme if params.theme,
-    params.classNames if params.classNames
+    params.classNames if params.classNames,
+    'ds-dark' if params.areaType == 'bauta'
   ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
 

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

@@ -46,38 +46,23 @@
     display: none;
   }
 
-  &.ds-teaser-package--bautaxl {
-    &::after {
-      background-color: transparent;
+  &.ds-teaser-package--bauta {
+    background-color: $bauta-surface-color;
+
+    & .ds-teaser,
+    & .ds-teaser--slideshow {
+      background-color: $bauta-surface-color;
     }
 
-    .ds-group-header + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
-      .ds-teaser__title {
-        @include ds-typography($ds-typography-detailteaser-baotaxl);
+    .ds-split-container {
+      background-color: $bauta-surface-color;
+      &::after {
+        background-color: $updated-color-border-primary;
       }
+    }
 
-      @include ds-mq-only-breakpoint(mobile) {
-        background-color: $ds-color-static-black;
-        .ds-teaser__title,
-        .ds-teaser__text {
-          color: $ds-color-static-white;
-        }
-        .ds-teaser-dot {
-          color: $ds-color-static-red-300;
-        }
-        .ds-teaser__vignette,
-        .ds-teaser__sticker {
-          color: $ds-color-static-red-300;
-        }
-        &::after {
-          background-color: $ds-color-static-transparent-white-10;
-        }
-
-        & + .ds-teaser::after,
-        & + .ds-split-container::after {
-          display: none;
-        }
-      }
+    & > .ds-teaser::after {
+      background-color: $updated-color-border-primary;
     }
   }
 }

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

@@ -78,7 +78,7 @@
   {%- set classNamePrefix = componentClassName + "--" %}
   {%- set classes = [
     componentClassName,
-    classNamePrefix + params.areaType if params.areaType == "bauta" or params.areaType == "bautaxl",
+    classNamePrefix + params.areaType if params.areaType == "bauta",
     "ds-theme--" + params.theme if params.theme,
     params.classNames if params.classNames
   ] | join(" ") %}

package/foundations/helpers/colors.scss

@@ -6,6 +6,11 @@
 @use "../variables/colorsDnLightTokens";
 @use "../variables/colorsDnDarkTokens";
 
+// Temporary variables before we update tokens
+$bauta-surface-color: #360003;
+$updated-color-border-primary: #ffffff19;
+// end of temporary variables
+
 $ds-theme-color: var(--ds-theme-color);
 
 @mixin get-dark-color-scheme() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "20.6.0",
+  "version": "20.7.0-beta.0",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",