@bonniernews/dn-design-system-web 32.7.48 → 33.0.1-beta.0

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [33.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.48...@bonniernews/dn-design-system-web@33.0.0) (2025-08-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** teaser-props-cleanup (#1866)
+
+### Maintenance
+
+* **web:** teaser-props-cleanup ([#1866](https://github.com/BonnierNews/dn-design-system/issues/1866)) ([6eecff4](https://github.com/BonnierNews/dn-design-system/commit/6eecff413b68c40ff0d530e6ddd7eb5fe67d0d49))
+
 ## [32.7.48](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.47...@bonniernews/dn-design-system-web@32.7.48) (2025-08-18)
 
 

package/assets/types/teaser-props.ts

@@ -2,45 +2,64 @@ import { ComponentChild } from 'preact'
 
 import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts'
 
-export interface TeaserProps extends SharedProps {
+import type { TeaserCardProps } from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.tsx'
+
+export interface TeaserBaseProps extends TeaserTitleProps, Omit<TeaserCardProps, 'children' | 'theme'> {}
+
+export interface TeaserTitleProps {
   /** Heading of the teaser */
   title: string
-  /** Target URL for the teaser */
-  targetLink: string
-  /** Variant of the teaser */
-  variant?: 'default' | 'podcast' | 'insandare' | 'direkt'
-  /** The area where the column is rendered */
-  areaType?: 'right' | 'bauta' | 'main'
-  /** The theme-class to apply to the teaser */
-  theme?: 'nyheter' | 'kultur'
-  /** Teaser subtext */
-  text?: string
-  /** Top text in the teaser */
-  vignette?: string
+}
+
+export interface TeaserThemeProps extends Pick<TeaserCardProps, 'theme'> {}
+
+export interface TeaserHighlightProps {
   /** Text before the heading */
   highlight?: string
-  /** Red text before the text */
-  sticker?: string
+}
+
+export interface TeaserItalicHeadlineProps {
+  /** If the headline should be italic */
+  isItalicHeadline?: boolean
+}
+
+export interface TeaserVignetteProps {
+  /** Top text in the teaser */
+  vignette?: string
+}
+
+export interface TeaserVariantProps {
+  /** Variant of the teaser */
+  variant?: 'default' | 'podcast' | 'direkt' | 'insandare'
+}
+
+export interface TeaserMediaProps {
   /** Main image or other media */
   media?: ComponentChild
-  /** Flag so we can handle square teaser images */
-  isSquareImage?: boolean
-  /** Image of the author */
+}
+
+export interface TeaserBylineProps {
+  /** Byline image */
   bylinePicture?: ComponentChild
-  /** If the headline should be italic */
-  isItalicHeadline?: boolean
-  /** If the headline should be large (only if `isItalicHeadline` is true) */
-  isLargeHeadline?: boolean
+}
+
+export interface TeaserTextProps {
+  /** Teaser subtext */
+  text?: string
+}
+
+export interface TeaserBodyDecoratorsProps {
+  /** Red text before the text */
+  sticker?: string
   /** If there should be a flashing ball before the text */
   isFlashingDot?: boolean
+}
+
+export interface TeaserFooterProps extends SharedProps {
   /** Publication time text */
   publicationTime?: string
   /** Duration of podcast */
   duration?: string
-  /** Byline aspect ratio */
-  bylineAspectRatio?: string
-  /** Byline HTML */
-  bylineHtml?: string
   /** Shows in teaser footer */
   sectionName?: string
 }

package/components/factbox/README.md

@@ -12,7 +12,7 @@ The component will not include styling by itself. Make sure to include the right
 | titleHighlight | string | \- |
 | titleImage | ComponentChild | \- |
 | bodyParts\* | BodyPart\[\] | \- |
-| theme | "nyheter", "kultur", "default" | \- |
+| theme | "kultur", "nyheter", "default" | \- |
 | forceExpand | boolean | false |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

package/components/quote/README.md

@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | bodyHtml\* | string | \- |
-| theme | "nyheter", "kultur" | "nyheter" |
+| theme | "kultur", "nyheter" | "nyheter" |
 | forcePx | boolean | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

package/components/tag-header/README.md

@@ -14,7 +14,7 @@ The component will not include styling by itself. Make sure to include the right
 | media | Main image<br />ComponentChild | \- |
 | descriptionHtml | Intended use is text, links<br />string | \- |
 | articleCount | Total articles on this list-page<br />number | \- |
-| theme | The theme-class to apply to the vignette<br />"nyheter", "kultur" | \- |
+| theme | The theme-class to apply to the vignette<br />"kultur", "nyheter" | \- |
 | toggle | Show/hide toggle button<br />boolean | false |
 | toggleText | `text` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
 | toggleSelectedText | `selectedText` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |

package/components/teaser-card/README.md

@@ -8,9 +8,9 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| areaType | "right", "bauta", "main" | \- |
-| targetLink | string | \- |
-| theme | "nyheter", "kultur" | "nyheter" |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 

package/components/teaser-centered/README.md

@@ -8,16 +8,16 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
-| text | Teaser subtext<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
+| highlight | Text before the heading<br />string | \- |
 | vignette | Top text in the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
-| highlight | Text before the heading<br />string | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
+| text | Teaser subtext<br />string | \- |
 
 ```jsx
 <TeaserCentered

package/components/teaser-counter/README.md

@@ -8,14 +8,14 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
 | counterText\* | string | \- |
 | counterNumber\* | number | \- |
 | subtitle | string | \- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
 
 ```jsx

package/components/teaser-footer/README.md

@@ -6,17 +6,17 @@ TeaserFooter
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| variant\* | "default", "podcast", "informationText" | \- |
-| publicationTime | string | \- |
-| sectionName | Name of section the teaser is connected to<br />string | \- |
-| duration | The length of the podcast<br />string | \- |
+| footerVariant | "default", "podcast", "informationText" | \- |
+| publicationTime | Publication time text<br />string | \- |
+| duration | Duration of podcast<br />string | \- |
+| sectionName | Shows in teaser footer<br />string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
 
 ```jsx
 <TeaserFooter
+  footerVariant="informationText"
   publicationTime="10:15"
   sectionName="Nyheter"
-  variant="informationText"
 />
 ```

package/components/teaser-list-swipe/README.md

@@ -8,11 +8,10 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| title\* | Heading of the teaser<br />string | \- |
+| title\* | The header of the teaser list<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
 | titleHref | Target URL for the header<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
 | arrowPosition | Determines where the scroll arrows are rendered<br />"floating", "header" | "header" |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
 | teasers | A list of arguments to TeaserSwipeCard<br />TeaserSwipeCardProps\[\] | \[\] |
 | groupHeaderType | Type of group header<br />"link", "icon", "toggle", "arrows" | \- |
 | groupHeaderToggleText | Text in toggle button<br />string | \- |

package/components/teaser-list-vertical/README.md

@@ -12,7 +12,7 @@ The component will not include styling by itself. Make sure to include the right
 | listLink | Ex. { text: "Alla nyheter", url: "#" }<br />ListLink | \- |
 | flexible | If true, the list will be flexible<br />boolean | false |
 | teasers\* | Array with teaser objects. Ex. \[ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } \]<br />ListTeaser\[\] | \- |
-| theme | The theme-class to apply to _all_ teasers in the list.<br />"nyheter", "kultur" | \- |
+| theme | The theme-class to apply to _all_ teasers in the list.<br />"kultur", "nyheter" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 

package/components/teaser-longlife/README.md

@@ -8,13 +8,12 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| vignette | Top text in the teaser<br />string | \- |
+| title\* | Heading of the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
+| vignette | Top text in the teaser<br />string | \- |
 
 ```jsx
 <TeaserLonglife

package/components/teaser-onsite/README.md

@@ -12,14 +12,14 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
-| text | Teaser subtext<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
 | media | Main image or other media<br />ComponentChild | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
+| text | Teaser subtext<br />string | \- |
 
 ```jsx
 <TeaserOnSite

package/components/teaser-package/README.md

@@ -16,14 +16,14 @@ If you **only** want to include the styles for the teaser package, you can do so
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| areaType | "bauta", "default" | \- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
 | vignetteText | string | \- |
 | vignetteTargetUrl | string | \- |
 | vignetteIcon | ComponentChild | \- |
 | teasers | ComponentChild | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
 
 ```jsx
 <TeaserPackage

package/components/teaser-right-now/README.md

@@ -8,12 +8,13 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | "nyheter" |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | "nyheter" |
+| highlight | Text before the heading<br />string | \- |
 
 ```jsx
 <TeaserRightNow

package/components/teaser-slideshow/README.md

@@ -8,14 +8,14 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| areaType | "right", "bauta", "main" | \- |
-| targetLink | string | \- |
-| theme | "nyheter", "kultur" | \- |
-| title\* | Heading of the teaser<br />string | \- |
-| text | Teaser subtext<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
 | media | Main image or other media<br />ComponentChild | \- |
+| text | Teaser subtext<br />string | \- |
 
 ```jsx
 <TeaserSlideshow

package/components/teaser-split/README.md

@@ -0,0 +1,37 @@
+TeaserSplit
+===========
+
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-split](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-split)
+*   Storybook: [TeaserSplit](https://designsystem.dn.se/?path=/docs/section-teasersplit--docs)
+
+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-split/teaser-split.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
+| variant | Variant of the teaser<br />"default", "podcast" | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
+| highlight | Text before the heading<br />string | \- |
+| vignette | Top text in the teaser<br />string | \- |
+| media | Main image or other media<br />ComponentChild | \- |
+| text | Teaser subtext<br />string | \- |
+| sticker | Red text before the text<br />string | \- |
+| isFlashingDot | If there should be a flashing ball before the text<br />boolean | \- |
+| publicationTime | Publication time text<br />string | \- |
+| duration | Duration of podcast<br />string | \- |
+| sectionName | Shows in teaser footer<br />string | \- |
+
+```jsx
+<TeaserSplit
+  isFlashingDot
+  media={<TeaserImage byline="Foto: Pavel Bednyakov/Sputnik/AFP" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/fd0abe35-9282-46ed-addc-8af0e471db74.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>}
+  sticker="Live"
+  targetLink="https://www.dn.se/sverige/ryska-militarflyg-over-ostersjon/"
+  text="Flög utan transpondrar • Upptäcktes av tyska flygvapnet."
+  title="Ryska militärflyg över Östersjön"
+/>
+```

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

@@ -25,8 +25,9 @@
   &.ds-split-container--bauta {
     background-color: $ds-color-surface-breaking;
   }
+}
 
-  .ds-teaser--split {
+.ds-teaser--split {
     box-sizing: content-box;
     display: block;
     position: relative;
@@ -99,4 +100,3 @@
       }
     }
   }
-}

package/components/teaser-split-container/README.md

@@ -0,0 +1,44 @@
+TeaserSplitContainer
+====================
+
+*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-split](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-split-container)
+*   Storybook: [TeaserSplit](https://designsystem.dn.se/?path=/docs/section-teasersplit-teasersplitcontainer--docs)
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
+| teasers\* | TeaserSplitProps\[\] | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+
+```jsx
+<TeaserSplitContainer
+  teasers={[
+    {
+      highlight: undefined,
+      media: <TeaserImage byline="Foto: Lars Schröder/TT" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/9371897d-7150-4343-bc53-e6d37e25774a.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>,
+      sticker: undefined,
+      targetLink: 'https://www.dn.se/kultur/omar-souleyman-far-dansgolvet-att-koka/',
+      text: 'Hans gubbtafatta dansrörelser är minst sagt älskvärda, skriver Saga Cavallin.',
+      theme: 'kultur',
+      title: 'Omar Souleyman får dansgolvet på Kulturhuset att koka',
+      variant: undefined,
+      vignette: 'MUSIK | RECENSION'
+    },
+    {
+      highlight: undefined,
+      isFlashingDot: true,
+      media: <TeaserImage byline="Foto: Pavel Bednyakov/Sputnik/AFP" image={<ExamplePicture alt="" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/fd0abe35-9282-46ed-addc-8af0e471db74.jpeg" style={{aspectRatio: '16 / 9'}}/>}/>,
+      sticker: 'Live',
+      targetLink: 'https://www.dn.se/sverige/ryska-militarflyg-over-ostersjon/',
+      text: 'Flög utan transpondrar • Upptäcktes av tyska flygvapnet.',
+      theme: undefined,
+      title: 'Ryska militärflyg över Östersjön',
+      variant: undefined,
+      vignette: undefined
+    }
+  ]}
+ />
+```

package/components/teaser-standard/README.md

@@ -25,29 +25,26 @@ const teaserStandardHtml = dsTeaserStandard(parameters);
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| isSquareImage | Flag so we can handle square teaser images<br />boolean | false |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| classNames | Ex. "my-special-class"<br />string | \- |
+| isItalicHeadline | If the headline should be italic<br />boolean | \- |
 | sectionName | Shows in teaser footer<br />string | \- |
-| bylineHtml | Byline HTML<br />string | \- |
-| bylineAspectRatio | Byline aspect ratio<br />string | \- |
 | duration | Duration of podcast<br />string | \- |
 | publicationTime | Publication time text<br />string | \- |
 | isFlashingDot | If there should be a flashing ball before the text<br />boolean | false |
-| isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | \- |
-| isItalicHeadline | If the headline should be italic<br />boolean | \- |
-| bylinePicture | Image of the author<br />ComponentChild | \- |
-| isCompact | If the teaser should be compact<br />boolean | \- |
-| media | Main image or other media<br />ComponentChild | \- |
 | sticker | Red text before the text<br />string | \- |
-| highlight | Text before the heading<br />string | \- |
-| vignette | Top text in the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
+| bylinePicture | Byline image<br />ComponentChild | \- |
+| media | Main image or other media<br />ComponentChild | \- |
+| vignette | Top text in the teaser<br />string | \- |
+| isCompact | If the teaser should be compact<br />boolean | \- |
+| highlight | Text before the heading<br />string | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
 | title\* | Heading of the teaser<br />string | \- |
+| isSquareImage | Flag so we can handle square teaser images<br />boolean | false |
+| variant | Variant of the teaser<br />"default", "podcast" | \- |
 
 ```jsx
 <TeaserStandard

package/components/teaser-swipe-card/README.md

@@ -8,29 +8,17 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| isSquareImage | Flag so we can handle square teaser images<br />boolean | \- |
-| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| classNames | Ex. "my-special-class"<br />string | \- |
-| sectionName | Shows in teaser footer<br />string | \- |
-| bylineHtml | Byline HTML<br />string | \- |
-| bylineAspectRatio | Byline aspect ratio<br />string | \- |
-| duration | Duration of podcast<br />string | \- |
-| publicationTime | Publication time text<br />string | \- |
-| isFlashingDot | If there should be a flashing ball before the text<br />boolean | \- |
-| isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | \- |
-| isItalicHeadline | If the headline should be italic<br />boolean | \- |
-| bylinePicture | Image of the author<br />ComponentChild | \- |
+| variant | Variant of the teaser<br />"default", "insandare", "direkt" | \- |
 | time | The timestamp text of the teaser<br />string | \- |
-| media | Main image or other media<br />ComponentChild | \- |
-| sticker | Red text before the text<br />string | \- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
 | highlight | Text before the heading<br />string | \- |
+| media | Main image or other media<br />ComponentChild | \- |
 | vignette | Top text in the teaser<br />string | \- |
-| text | Teaser subtext<br />string | \- |
-| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| title\* | Heading of the teaser<br />string | \- |
 
 ```jsx
 <TeaserSwipeCard

package/components/teaser-text-on-image/README.md

@@ -8,15 +8,14 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
-| text | Teaser subtext<br />string | \- |
 | vignette | Top text in the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
-| isItalicHeadline | If the headline should be italic<br />boolean | \- |
+| text | Teaser subtext<br />string | \- |
 
 ```jsx
 <TeaserTextOnImage

package/components/teaser-text-on-image/teaser-text-on-image.njk

@@ -26,7 +26,7 @@
           </p>
         {% endif %}
 
-        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+        <h2 class="{{ componentClassName + '__title'}}">
           {{ params.title }}
         </h2>
 

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

@@ -38,10 +38,6 @@
     margin-top: ds-spacing($ds-s-050);
 
     @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
-
-    &--italic {
-      @include ds-typography($ds-typography-detail-medryckare);
-    }
   }
 
   .ds-teaser-image__byline,

package/components/teaser-tipsa/README.md

@@ -8,11 +8,11 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| targetLink | Target URL for the teaser<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| targetLink\* | Target URL for the teaser<br />string | \- |
-| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
-| title\* | Heading of the teaser<br />string | \- |
 | text | Teaser subtext<br />string | \- |
 
 ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.48",
+  "version": "33.0.1-beta.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/teaser-card/teaser-card.d.ts

@@ -1,8 +1,11 @@
 import { ComponentChildren } from 'preact';
 import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
-export interface TeaserCardsProps extends SharedProps {
+export interface TeaserCardProps extends SharedProps {
+    /** The area where the column is rendered */
     areaType?: 'main' | 'right' | 'bauta';
+    /** Target URL for the teaser */
     targetLink?: string;
+    /** The theme-class to apply to the teaser */
     theme?: 'kultur' | 'nyheter';
     children?: ComponentChildren;
 }
@@ -13,4 +16,4 @@ export interface TeaserCardsProps extends SharedProps {
  * 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/assets/teaser/teaser.scss'`
  */
-export declare const TeaserCard: ({ areaType, targetLink, theme, classNames, attributes, children, }: TeaserCardsProps) => import("preact").JSX.Element;
+export declare const TeaserCard: ({ areaType, targetLink, theme, classNames, attributes, children, }: TeaserCardProps) => import("preact").JSX.Element;