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

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.0...@bonniernews/dn-design-system-web@21.1.0-beta.0) (2024-10-18)
+
+
+### Features
+
+* **web:** one level of bauta with background color ([075ed25](https://github.com/BonnierNews/dn-design-system/commit/075ed259c6f3c50ed6018bd566fdc7b9b5c05c73))
+
+
+### Maintenance
+
+* **web:** released version v20.7.0-beta.0 ([8ae341a](https://github.com/BonnierNews/dn-design-system/commit/8ae341aea8b99cdd063e0541e95618876a8baa84))
+
+## [21.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.1...@bonniernews/dn-design-system-web@21.0.0) (2024-10-18)
+
+### ⚠ BREAKING CHANGES
+
+* **web:** JS imports requires file extension
+
+### Bug Fixes
+
+* **web:** less specific export ([#1436](https://github.com/BonnierNews/dn-design-system/issues/1436)) ([9da4652](https://github.com/BonnierNews/dn-design-system/commit/9da46527d7e63c800a8391fe2280717e4dd733cd))
+
+### Maintenance
+
+* **deps-dev:** bump @actions/core from 1.10.1 to 1.11.1 ([#1433](https://github.com/BonnierNews/dn-design-system/issues/1433)) ([0aa8f7c](https://github.com/BonnierNews/dn-design-system/commit/0aa8f7c87c052599ec75e19c0a03921ef6417afd))
+* **deps-dev:** bump @babel/runtime from 7.24.5 to 7.25.7 ([#1431](https://github.com/BonnierNews/dn-design-system/issues/1431)) ([f9835dc](https://github.com/BonnierNews/dn-design-system/commit/f9835dc526d20abb98ebcf0fbbad6a1bb143ec80))
+* **deps-dev:** bump @react-native/metro-config from 0.75.2 to 0.75.4 ([#1434](https://github.com/BonnierNews/dn-design-system/issues/1434)) ([22e6777](https://github.com/BonnierNews/dn-design-system/commit/22e67776633a67be1201a78bb5bd9bc6744e291c))
+* **deps-dev:** bump @testing-library/react-native from 12.6.1 to 12.7.2 ([#1432](https://github.com/BonnierNews/dn-design-system/issues/1432)) ([9f44974](https://github.com/BonnierNews/dn-design-system/commit/9f449744f5db8fddf95e08067fce8ae9cf351f1f))
+* **deps:** bump @babel/core from 7.25.2 to 7.25.8 ([#1438](https://github.com/BonnierNews/dn-design-system/issues/1438)) ([7859441](https://github.com/BonnierNews/dn-design-system/commit/7859441441ee67a3a67dd721a6b2ca7f82376863))
+* **deps:** bump @react-native-community/slider from 4.5.2 to 4.5.4 ([#1440](https://github.com/BonnierNews/dn-design-system/issues/1440)) ([d759986](https://github.com/BonnierNews/dn-design-system/commit/d759986423adf1fea025b3fdeb1794577cdb49d7))
+* **deps:** bump express from 4.19.2 to 4.21.1 ([#1429](https://github.com/BonnierNews/dn-design-system/issues/1429)) ([08ea9e8](https://github.com/BonnierNews/dn-design-system/commit/08ea9e884c315661aa6fc6350e7542ea70054555))
+* **deps:** bump sass from 1.77.8 to 1.80.2 ([#1439](https://github.com/BonnierNews/dn-design-system/issues/1439)) ([2583327](https://github.com/BonnierNews/dn-design-system/commit/2583327bc547d5a6ab11f3dc2c74c6ba5b62e99f))
+* **foundations:** update tokens from Figma ([#1441](https://github.com/BonnierNews/dn-design-system/issues/1441)) ([786153f](https://github.com/BonnierNews/dn-design-system/commit/786153f0c09c37141c78623c3419c6afa0c11f07))
+* prerelease packages ([bc56bbc](https://github.com/BonnierNews/dn-design-system/commit/bc56bbce004e95eaf01b636bfc7b132165561271))
+* prerelease packages ([ec0ca89](https://github.com/BonnierNews/dn-design-system/commit/ec0ca895f0e4995f0b700ee40140920f3105ef86))
+* revert "chore(deps-dev): bump @react-native/metro-config from 0.75.2 to 0.75.4" ([#1435](https://github.com/BonnierNews/dn-design-system/issues/1435)) ([97a0feb](https://github.com/BonnierNews/dn-design-system/commit/97a0febdabed45c94a01b0600a040d8eb20dbf46))
+
 ## [20.7.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.1...@bonniernews/dn-design-system-web@20.7.0-beta.1) (2024-10-17)
 
 
@@ -21,6 +58,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([ec0ca89](https://github.com/BonnierNews/dn-design-system/commit/ec0ca895f0e4995f0b700ee40140920f3105ef86))
 * revert "chore(deps-dev): bump @react-native/metro-config from 0.75.2 to 0.75.4" ([#1435](https://github.com/BonnierNews/dn-design-system/issues/1435)) ([97a0feb](https://github.com/BonnierNews/dn-design-system/commit/97a0febdabed45c94a01b0600a040d8eb20dbf46))
 
+## [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))
+
 ## [20.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.6.0...@bonniernews/dn-design-system-web@20.6.1) (2024-10-16)
 
 
@@ -28,6 +72,7 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * move to figma variables ([#1419](https://github.com/BonnierNews/dn-design-system/issues/1419)) ([96eaa70](https://github.com/BonnierNews/dn-design-system/commit/96eaa701b712e66a0597b2524ae31db34eea6294))
 * prerelease packages ([c2ddd94](https://github.com/BonnierNews/dn-design-system/commit/c2ddd9434e69a243959a1a510394cdacd791ef21))
+
 * **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.7.0-beta.1",
+  "version": "21.1.0-beta.0",
   "description": "DN design system for web.",
   "main": "index.tsx",
   "type": "module",