@bonniernews/dn-design-system-web 21.1.5 → 21.2.1-beta.0

package/CHANGELOG.md

@@ -4,6 +4,53 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [21.1.0-beta.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.4...@bonniernews/dn-design-system-web@21.1.0-beta.5) (2024-11-08)
+
+
+### Bug Fixes
+
+* **web:** support breaking no image ([#1492](https://github.com/BonnierNews/dn-design-system/issues/1492)) ([dbf30ca](https://github.com/BonnierNews/dn-design-system/commit/dbf30ca9420bd8bc173de127499c0260abc3990a))
+
+## [21.1.0-beta.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.3...@bonniernews/dn-design-system-web@21.1.0-beta.4) (2024-11-06)
+
+## [21.1.0-beta.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.3) (2024-11-06)
+
+
+### Features
+
+* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([5adacb9](https://github.com/BonnierNews/dn-design-system/commit/5adacb9d8b1fadecd615278e63139627f3b88cb7))
+* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([7743c3b](https://github.com/BonnierNews/dn-design-system/commit/7743c3bfad040b46921e934570808b33083401ce))
+* **web:** one level of bauta with background color ([9184544](https://github.com/BonnierNews/dn-design-system/commit/91845447403cb2ec5a787fd64c341d620861b148))
+* **web:** one level of bauta with background color ([644acd6](https://github.com/BonnierNews/dn-design-system/commit/644acd6166d7385ac08c930fe725215a9e35fc80))
+
+
+### Bug Fixes
+
+* **web:** correct spacing teasers ([#1491](https://github.com/BonnierNews/dn-design-system/issues/1491)) ([b2624b8](https://github.com/BonnierNews/dn-design-system/commit/b2624b8311384d38971f82eb84e73560244a4b18))
+* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([48aeeca](https://github.com/BonnierNews/dn-design-system/commit/48aeecac1be293bbcb8ece678d562c26c0ec59d6))
+
+
+### Maintenance
+
+* **deps-dev:** bump @babel/preset-env from 7.25.8 to 7.25.9 ([#1469](https://github.com/BonnierNews/dn-design-system/issues/1469)) ([b9a9884](https://github.com/BonnierNews/dn-design-system/commit/b9a988470f8862d4c010f27a097d9a65af115d2b))
+* **deps-dev:** bump @testing-library/react-native from 12.7.2 to 12.8.0 ([#1477](https://github.com/BonnierNews/dn-design-system/issues/1477)) ([59e489f](https://github.com/BonnierNews/dn-design-system/commit/59e489f4227e83e1d6df43eb9acf6c1ea42db3e3))
+* **deps:** bump @react-native-community/slider from 4.5.4 to 4.5.5 ([#1475](https://github.com/BonnierNews/dn-design-system/issues/1475)) ([c321542](https://github.com/BonnierNews/dn-design-system/commit/c321542bdf60e16f86fc02cae937b301e649bb48))
+* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
+* prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
+* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
+* **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
+* **web:** released version v21.1.0-beta.1 ([9d45c5a](https://github.com/BonnierNews/dn-design-system/commit/9d45c5a4bbcfe53698ca9dffe3e1771422fbcdac))
+* **web:** released version v21.1.0-beta.2 ([49b9324](https://github.com/BonnierNews/dn-design-system/commit/49b9324c7074d6835aab2de9bb7d9e18649f58b6))
+* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([943705a](https://github.com/BonnierNews/dn-design-system/commit/943705afb2922c4d32bb4e042cd746857cbd26cf))
+
+## [21.1.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0-beta.1...@bonniernews/dn-design-system-web@21.1.0-beta.2) (2024-10-25)
+
+### Bug Fixes
+
+* **web:** media box sizing border box ([#1473](https://github.com/BonnierNews/dn-design-system/issues/1473)) ([e132abf](https://github.com/BonnierNews/dn-design-system/commit/e132abf44fc8d525fed7ff565ebdcc3702941669))
+
+## [21.1.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.1.0-beta.1) (2024-10-25)
+
 ## [21.1.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.4...@bonniernews/dn-design-system-web@21.1.5) (2024-11-15)
 
 
@@ -41,7 +88,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 ## [21.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.4...@bonniernews/dn-design-system-web@21.1.0) (2024-11-11)
 
-
 ### Features
 
 * **web:** one level of bauta with background color ([#1428](https://github.com/BonnierNews/dn-design-system/issues/1428)) ([c78c0a5](https://github.com/BonnierNews/dn-design-system/commit/c78c0a5e8a05a4ee4d31d7a58e5d23b1c39a7807))
@@ -56,7 +102,9 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([92a0383](https://github.com/BonnierNews/dn-design-system/commit/92a038392e8bc9b4bfa8b3f2dc508b16ef1ff4cf))
 
 ## [21.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.2...@bonniernews/dn-design-system-web@21.0.3) (2024-11-04)
-
+* **web:** breaking aka nivå3puff till visuella toppar ([#1450](https://github.com/BonnierNews/dn-design-system/issues/1450)) ([602040c](https://github.com/BonnierNews/dn-design-system/commit/602040c5a0e8ef7a7bd996bc6508e97956229c1b))
+* **web:** nivå1puff till visuella toppar  ([#1460](https://github.com/BonnierNews/dn-design-system/issues/1460)) ([d8dcacf](https://github.com/BonnierNews/dn-design-system/commit/d8dcacf7c76b80aac7e48fbf602bc5079d3a1cd3))
+* **web:** one level of bauta with background color ([8734216](https://github.com/BonnierNews/dn-design-system/commit/87342169eacf9d59f202f45424022c1bd733a74e))
 
 ### Maintenance
 
@@ -71,6 +119,9 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 * prerelease packages ([974fe99](https://github.com/BonnierNews/dn-design-system/commit/974fe99363323771a4284b36a895757fd4c49630))
 * prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
 * **web:** change screenshot location ([#1482](https://github.com/BonnierNews/dn-design-system/issues/1482)) ([472d0df](https://github.com/BonnierNews/dn-design-system/commit/472d0df71292d72206f908b82b45148a3b79cb91))
+* **foundations:** update tokens from Figma ([#1467](https://github.com/BonnierNews/dn-design-system/issues/1467)) ([af2cd99](https://github.com/BonnierNews/dn-design-system/commit/af2cd99ce8ab17494a3e51e34588d25e24a9ef38))
+* prerelease packages ([3ebfd91](https://github.com/BonnierNews/dn-design-system/commit/3ebfd91c6780c6222c74b500eade9fd19cac88f3))
+* **web:** visuella-toppar-update-tokens ([#1468](https://github.com/BonnierNews/dn-design-system/issues/1468)) ([87277b4](https://github.com/BonnierNews/dn-design-system/commit/87277b487b6f663d4ca106a74cb878012e579a42))
 
 ## [21.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.0.1...@bonniernews/dn-design-system-web@21.0.2) (2024-10-24)
 
@@ -85,7 +136,6 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * **web:** one level of bauta with background color ([075ed25](https://github.com/BonnierNews/dn-design-system/commit/075ed259c6f3c50ed6018bd566fdc7b9b5c05c73))
 
-
 ### Maintenance
 
 * **deps-dev:** bump @babel/runtime from 7.25.7 to 7.25.9 ([#1458](https://github.com/BonnierNews/dn-design-system/issues/1458)) ([2a160a8](https://github.com/BonnierNews/dn-design-system/commit/2a160a8cfe74b593002ddc460fa4734dc008250d))

package/assets/teaser/teaser.scss

@@ -99,6 +99,12 @@ $grade-size: ds-px-to-rem(34px);
   .ds-teaser__media {
     width: 100%;
     position: relative;
+    box-sizing: border-box;
+
+    &--rounded {
+      border-radius: ds-border-radius(x1);
+      overflow: hidden;
+    }
   }
 
   .ds-vip-badge {
@@ -128,6 +134,6 @@ $grade-size: ds-px-to-rem(34px);
   }
 
   &--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
   }
 }

package/components/divider/README.md

@@ -6,6 +6,4 @@ Divider
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
-
-<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">soft</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span></div></pre>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>

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

@@ -23,7 +23,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   &--bauta {
-    --group-header-background: #{$bauta-surface-color};
+    --group-header-background: #{$ds-color-surface-breaking};
   }
 
   &--toggle,

package/components/teaser-breaking/README.md

@@ -0,0 +1,46 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-breaking](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-breaking)
+- Storybook: [TeaserBreaking](https://designsystem.dn.se/?path=/docs/section-teaserbreaking--docs)
+- Storybook (Latest): [TeaserBreaking](https://designsystem-latest.dn.se/?path=/docs/section-teaserbreaking--docs)
+
+----
+
+# teaser-breaking
+
+This teaser never has a lock-symbol/vip-badge
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking.njk' import TeaserBreaking %}
+
+{{ TeaserBreaking({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-breaking/teaser-breaking" as *;
+```

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

@@ -0,0 +1,46 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+
+{% macro TeaserBreaking(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+
+  {% set extraClasses = [
+    "ds-teaser--breaking",
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: params.areaType,
+    theme: params.theme,
+    attributes: params.attributes,
+    classNames: extraClasses
+  }) %}
+    <div class="{{ componentClassName + '__content'}}">
+      <div class="ds-teaser__content-inner">
+        {% if params.vignette %}
+          <div class="ds-teaser__vignette">
+            {{ params.vignette }}
+          </div>
+        {% endif %}
+        <h2 class="ds-teaser__title">
+          {% if params.highlight %}
+            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+          {% endif %}
+          {{ params.title }}
+        </h2>
+
+        {% if params.text %}
+          <p class="{{ componentClassName + '__text' }}">
+            {{ params.text }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+      </div>
+    {% endif %}
+  {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,52 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--breaking {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .ds-teaser__media {
+    padding: ds-spacing(0 0 $ds-s-100);
+
+    video {
+      max-width: 100%;
+    }
+  }
+
+  .ds-teaser__content {
+    display: flex;
+    flex-direction: row;
+    padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
+    text-align: center;
+
+    .ds-teaser__content-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  &:focus-visible {
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
+
+    .ds-teaser__content {
+      @include ds-teaser-focus(-8px, false);
+    }
+  }
+
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-detailteaser-breaking);
+    text-align: center;
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(3px);
+    }
+  }
+}

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

@@ -31,7 +31,7 @@
     }
   }
 
-  .ds-teaser--top-img &--mask {
+  .ds-teaser--large &--mask {
     padding: ds-spacing($ds-s-100 $ds-s-100 0);
     box-sizing: border-box;
   }

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

@@ -13,11 +13,17 @@
     {% set italicsClass = "ds-teaser--large-big-italic" if params.isLargeHeadline and params.areaType !== "right" else "ds-teaser--large-italic" %}
   {% endif %}
 
+  {# Hide top border if there is media and it's not a compact version. Compact is overruled by italic, if italic we must hide border because we shouldn't change anything related to åsikt #}
+  {% set hideTopBorder = false %}
+  {% if params.mediaHtml and (params.isItalicHeadline or not params.isCompact) %}
+    {% set hideTopBorder = true %}
+  {% endif %}
+
   {% set extraClasses = [
     "ds-teaser--large",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "quote-badge" if isQuoteBadge,
-    classNamePrefix + 'top-img' if params.mediaHtml,
+    classNamePrefix + 'hide-top-border' if hideTopBorder,
     italicsClass if italicsClass,
     classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames
@@ -31,7 +37,11 @@
     classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
+      {% set mediaClass = [
+        componentClassName + '__media',
+        componentClassName + '__media--rounded' if params.isCompact and not params.isItalicHeadline
+      ] | join(" ") %}
+      <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
         {% if params.isLocked %}
           {{ VipBadge({
@@ -64,8 +74,8 @@
 
         {% if params.text and params.areaType !== "right" %}
           <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             {% if params.sticker %}
+              {{ TeaserDot({ flashing: params.isFlashingDot }) }}
               <span class="ds-teaser__sticker">
                 {{ params.sticker }}
               </span>

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

@@ -32,6 +32,10 @@
     }
   }
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-large);
   }
@@ -65,6 +69,7 @@
     position: relative;
     margin-left: ds-spacing($ds-s-100);
     margin-bottom: ds-spacing($ds-s-100, "px", true);
+    margin-top: ds-spacing($ds-s-025);
 
     .picture {
       position: absolute;
@@ -106,6 +111,17 @@
     &.ds-teaser--large-big-italic .ds-teaser__title {
       @include ds-typography($ds-typography-detailteaser-large-compact-opinion);
     }
+
+    &:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
+      .ds-teaser__media {
+        margin: ds-spacing($ds-s-100 $ds-s-100 0 $ds-s-100);
+        width: calc(100% - ds-spacing($ds-s-200));
+      }
+
+      .ds-teaser-dot {
+        display: none;
+      }
+    }
   }
 
   @include ds-mq-smallest-breakpoint(tablet) {

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

@@ -1,7 +1,6 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
-{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 

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

@@ -1,5 +1,4 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 
 {% macro TeaserNative(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -29,7 +28,11 @@
 
   <div class="{{ componentClassName + '__content'}}">
     {% if params.mediaHtml and nativeVariant == "standard" %}
-      <div class="{{ componentClassName + '__media'}}">
+      {% set mediaClass = [
+        componentClassName + '__media',
+        componentClassName + '__media--rounded'
+      ] | join(" ") %}
+      <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
       </div>
     {% endif %}
@@ -44,7 +47,6 @@
 
     {% if params.text and nativeVariant !== "right" %}
       <p class="{{ componentClassName + '__text' }}">
-        {{- TeaserDot() -}}
         {{- params.text -}}
       </p>
     {% endif %}

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

@@ -28,12 +28,6 @@
     }
   }
 
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
   &.ds-teaser--native-right,
   &.ds-teaser--native-large {
     .ds-teaser__media {

package/components/teaser-onsite/README.md

@@ -10,11 +10,4 @@ In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and tex
 
 The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
 
-<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
-
-<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation">&lt;</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">mediaHtml="&lt;figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&amp;quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&amp;quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&amp;quot;</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">&lt;</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">&gt;</span><span class="token tag attr-name">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag">  </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
-</span><span class="token tag"></span><span class="token tag punctuation">/&gt;</span></div></pre>
+<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>

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

@@ -14,7 +14,11 @@
     classNames: classes
   }) %}
     {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
+      {% set mediaClass = [
+        componentClassName + '__media',
+        componentClassName + '__media--rounded'
+      ] | join(" ") %}
+      <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
       </div>
     {% endif %}

package/components/teaser-onsite/teaser-onsite.tsx

@@ -33,7 +33,7 @@ export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNam
 
   return (
     <TeaserCard { ...{ areaType, targetLink, theme, classes, attributes }}>
-      <Media { ...{ mediaHtml }}  />
+      <Media { ...{ mediaHtml, rounded: true }}  />
       <Content>
         <Title title={`PÅ PLATS | ${title}`} />
         <Body { ...{ text }} />

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

@@ -17,6 +17,7 @@
     background-color: $ds-color-border-primary;
     position: absolute;
     display: block;
+    clear: both; // Clears floating media in standard-teaser
     top: 0;
     left: 0;
     right: 0;
@@ -26,12 +27,22 @@
   }
 
   // first-child only triggers if there is no vignette
-  .ds-teaser--top-img::after,
+  .ds-teaser--hide-top-border::after,
   > .ds-split-container:first-child::after,
   > .ds-teaser:first-child::after {
     display: none;
   }
 
+  .ds-teaser--breaking + .ds-teaser--hide-top-border {
+    &::after {
+      display: block; // Override `display:none to make border visible
+    }
+
+    .ds-teaser__media {
+      margin-top: ds-spacing($ds-s-100);
+    }
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -47,22 +58,22 @@
   }
 
   &.ds-teaser-package--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
 
     & .ds-teaser,
     & .ds-teaser--slideshow {
-      background-color: $bauta-surface-color;
+      background-color: $ds-color-surface-breaking;
     }
 
     .ds-split-container {
-      background-color: $bauta-surface-color;
+      background-color: $ds-color-surface-breaking;
       &::after {
-        background-color: $updated-color-border-primary;
+        background-color: $ds-color-border-primary;
       }
     }
 
     & > .ds-teaser::after {
-      background-color: $updated-color-border-primary;
+      background-color: $ds-color-border-primary;
     }
   }
 }

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

@@ -36,6 +36,6 @@
   }
 
   &.ds-teaser--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
   }
 }

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

@@ -23,7 +23,11 @@
     classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
+      {% set mediaClass = [
+        componentClassName + '__media',
+        componentClassName + '__media--rounded'
+      ] | join(" ") %}
+      <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
         {% if params.isLocked %}
           {{ VipBadge({
@@ -52,8 +56,8 @@
 
       {% if params.text %}
         <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
           {% if params.sticker %}
+            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
             </span>

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

@@ -23,7 +23,7 @@
   }
 
   &.ds-split-container--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
   }
 
   .ds-teaser--split {
@@ -74,6 +74,8 @@
     }
 
     .ds-teaser__media {
+      margin-top: ds-spacing($ds-s-025);
+
       .ds-teaser-image__byline {
         @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
       }

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

@@ -33,7 +33,12 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% if params.mediaHtml %}
-        <div class="{{ componentClassName + '__media'}} {{ componentClassName + '__media--square-image' if params.isSquareImage}}">
+        {% set mediaClass = [
+          componentClassName + '__media',
+          componentClassName + '__media--rounded' if not params.isItalicHeadline,
+          componentClassName + '__media--square-image' if params.isSquareImage
+        ] | join(" ") %}
+        <div class="{{ mediaClass }}">
           {{ params.mediaHtml }}
           {% if params.isLocked %}
             {{ VipBadge({
@@ -61,9 +66,8 @@
 
       {% if params.text and params.areaType !== "right" %}
         <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
-
           {% if params.sticker %}
+            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
             </span>