@bonniernews/dn-design-system-web 22.0.0 → 22.1.0

package/CHANGELOG.md

@@ -4,6 +4,66 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [22.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@22.0.0...@bonniernews/dn-design-system-web@22.1.0) (2024-12-17)
+
+
+### Features
+
+* **web:** visuella toppar ([#1443](https://github.com/BonnierNews/dn-design-system/issues/1443)) ([24953d9](https://github.com/BonnierNews/dn-design-system/commit/24953d972aaca121da4d9c1cfa5060c1b4f514f2))
+
+
+### Maintenance
+
+* **deps:** bump nanoid from 3.3.7 to 3.3.8 in /web ([#1533](https://github.com/BonnierNews/dn-design-system/issues/1533)) ([9ae4af5](https://github.com/BonnierNews/dn-design-system/commit/9ae4af5a4fdf8b279f440b1c4b1a4a16548040f6))
+* prerelease packages ([019b86b](https://github.com/BonnierNews/dn-design-system/commit/019b86b2d23ce424077058f4253069ea18bce781))
+
+## [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)
+
 ## [22.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.14...@bonniernews/dn-design-system-web@22.0.0) (2024-12-13)
 
 
@@ -139,7 +199,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))
@@ -154,7 +213,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
 
@@ -169,6 +230,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)
 
@@ -183,7 +247,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

@@ -74,6 +74,12 @@ $ds-teaser-standard-image-width-desktop: 196px;
   .ds-teaser__media {
     width: 100%;
     position: relative;
+    box-sizing: border-box;
+
+    &--rounded {
+      border-radius: ds-border-radius(x1);
+      overflow: hidden;
+    }
   }
 
   .ds-vip-badge {
@@ -103,6 +109,6 @@ $ds-teaser-standard-image-width-desktop: 196px;
   }
 
   &--bauta {
-    background-color: $bauta-surface-color;
+    background-color: $ds-color-surface-breaking;
   }
 }

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-centered/README.md

@@ -0,0 +1,46 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-centered](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-centered)
+- Storybook: [TeaserCentered](https://designsystem.dn.se/?path=/docs/section-teasercentered--docs)
+- Storybook (Latest): [TeaserCentered](https://designsystem-latest.dn.se/?path=/docs/section-teasercentered--docs)
+
+----
+
+# teaser-centered
+
+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-centered/teaser-centered.njk' import TeaserCentered %}
+
+{{ TeaserCentered({
+  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-centered/teaser-centered" as *;
+```

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

@@ -0,0 +1,47 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+
+{% macro TeaserCentered(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+
+  {% set extraClasses = [
+    "ds-teaser--centered",
+    classNamePrefix + 'hide-top-border' if params.mediaHtml,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: params.areaType,
+    theme: params.theme,
+    attributes: params.attributes,
+    classNames: extraClasses
+  }) %}
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+      </div>
+    {% endif %}
+    <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>
+  {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,51 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--centered {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .ds-teaser__media {
+    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/README.md

@@ -23,7 +23,6 @@
 |bylineHtml | HTML String | no | | | Side image of the author |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
-|isCompact | bool | no | true, false | false | If the headline should be compact |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
 |publicationTime | string | no | | null | Publication time text. |

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

@@ -17,9 +17,8 @@
     "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 params.mediaHtml,
     italicsClass if italicsClass,
-    classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -31,7 +30,10 @@
     classNames: extraClasses
   }) %}
     {% if params.mediaHtml %}
-      <div class="{{ componentClassName + '__media'}}">
+      {% set mediaClass = [
+        componentClassName + '__media'
+      ] | join(" ") %}
+      <div class="{{ mediaClass }}">
         {{ params.mediaHtml }}
         {% if params.isLocked %}
           {{ VipBadge({
@@ -64,8 +66,8 @@
 
         {% if params.text and params.areaType !== "right" %}
           <p class="{{ componentClassName + '__text' }}">
-            {{ 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;
@@ -97,17 +102,6 @@
     }
   }
 
-  &.ds-teaser--compact {
-    .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-large-compact);
-    }
-
-    &.ds-teaser--large-italic .ds-teaser__title,
-    &.ds-teaser--large-big-italic .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-large-compact-opinion);
-    }
-  }
-
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {

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-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,7 +27,7 @@
   }
 
   // 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;
@@ -47,22 +48,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' }}">
-          {{ 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' }}">
-          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
-
           {% if params.sticker %}
+            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
             </span>

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

@@ -5,6 +5,10 @@
   padding: ds-spacing($ds-s-075 $ds-s-100 0);
   overflow: hidden;
 
+  .ds-teaser__vignette {
+    margin-top: ds-spacing($ds-s-025);
+  }
+
   .ds-teaser__title {
     @include ds-typography($ds-typography-detailteaser-standard);
 
@@ -28,17 +32,12 @@
     margin-bottom: ds-spacing($ds-s-100);
   }
 
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
   .ds-teaser__content {
     display: block;
   }
 
   .ds-teaser__media {
+    margin-top: ds-spacing($ds-s-025);
     margin-bottom: ds-spacing($ds-s-100);
     margin-left: ds-spacing($ds-s-100);
     float: right;

package/foundations/helpers/README-links.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|type | String | no | $ds-link-paragraph, $ds-link-list | $ds-link-paragraph | We use scss variables for autocomplete and to easier detect breaking changes |
+|type | String | no | $ds-link-paragraph, $ds-link-list | $ds-link-paragraph | We use scss variables for autocomplete and to easier detect centered changes |
 
 ## Minimum requirement example