@bonniernews/dn-design-system-web 32.7.37 → 32.7.38

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.7.38](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.37...@bonniernews/dn-design-system-web@32.7.38) (2025-07-18)
+
+
+### Bug Fixes
+
+* **web:** teaser standard tsx ([#1838](https://github.com/BonnierNews/dn-design-system/issues/1838)) ([b490e9b](https://github.com/BonnierNews/dn-design-system/commit/b490e9b6835d585fd9d7d7928018b9e7897ab3bb))
+
+
+### Maintenance
+
+* **deps-dev:** bump @react-native/babel-preset from 0.75.2 to 0.80.1 ([#1808](https://github.com/BonnierNews/dn-design-system/issues/1808)) ([45be5ae](https://github.com/BonnierNews/dn-design-system/commit/45be5aed0a32046ddcf483940332dea685107b3c))
+* **deps-dev:** bump @react-native/metro-config from 0.79.1 to 0.80.1 ([#1797](https://github.com/BonnierNews/dn-design-system/issues/1797)) ([a282a9b](https://github.com/BonnierNews/dn-design-system/commit/a282a9b8113e21cec1085db91dc62931c3dec85e))
+* **deps:** bump @react-native-community/datetimepicker from 8.4.1 to 8.4.2 ([#1789](https://github.com/BonnierNews/dn-design-system/issues/1789)) ([b67f703](https://github.com/BonnierNews/dn-design-system/commit/b67f70383d20031b6ae48601c5acd231b1dde491))
+* **deps:** bump @react-native/typescript-config from 0.75.2 to 0.80.1 ([#1799](https://github.com/BonnierNews/dn-design-system/issues/1799)) ([8c4eb5e](https://github.com/BonnierNews/dn-design-system/commit/8c4eb5e7c5f34b077e22ef24b2bbd1b11bce1e1d))
+* **deps:** bump brace-expansion from 1.1.11 to 1.1.12 in /server ([#1837](https://github.com/BonnierNews/dn-design-system/issues/1837)) ([3c86ccd](https://github.com/BonnierNews/dn-design-system/commit/3c86ccd7a2d5381b197e49c11a0def6fec94835b))
+* prerelease packages ([75deb71](https://github.com/BonnierNews/dn-design-system/commit/75deb71018f14f60f1f6b25fbf9f752a3f58791f))
+* prerelease packages ([427ad11](https://github.com/BonnierNews/dn-design-system/commit/427ad11fc5ff365d19fe488939f7842b384b28be))
+
 ## [32.7.37](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.36...@bonniernews/dn-design-system-web@32.7.37) (2025-07-18)
 
 

package/assets/types/teaser-props.ts

@@ -22,6 +22,8 @@ export interface TeaserProps extends SharedProps {
   sticker?: string;
   /** Main image or other media */
   media?: ComponentChild;
+  /** Flag so we can handle square teaser images */
+  isSquareImage?: boolean
   /** Image of the author */
   bylinePicture?: ComponentChild;
   /** If the headline should be italic */

package/components/teaser-large/README.md

@@ -20,6 +20,7 @@ The component will not include styling by itself. Make sure to include the right
 | isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | false |
 | isItalicHeadline | If the headline should be italic<br />boolean | false |
 | title\* | Heading of the teaser<br />string | \- |
+| isSquareImage | Flag so we can handle square teaser images<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 | \- |

package/components/teaser-longlife/README.md

@@ -13,8 +13,8 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | \- |
-| vignette | Top text in the teaser<br />string | \- |
 | media | Main image or other media<br />ComponentChild | \- |
+| vignette | Top text in the teaser<br />string | \- |
 
 ```jsx
 <TeaserLonglife

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

@@ -0,0 +1,68 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
+- Storybook: [TeaserStandard](https://designsystem.dn.se/?path=/docs/section-teaserstandard--docs)
+- Storybook (Latest): [TeaserStandard](https://designsystem-latest.dn.se/?path=/docs/section-teaserstandard--docs)
+
+----
+
+# teaser-standard
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|variant | String | no | "default" or "podcast" | "default" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur | (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 |
+|sticker | String | no | | | Red text before the text |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|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 |
+|publicationTime | string | no | | null | Publication time text. |
+|duration | string | no | | null | Duration of podcast. |
+|isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+These are copy paste friendly examples to quickliy get started using a component.
+
+### Nunjucks
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard.njk' import TeaserStandard %}
+
+{{ TeaserStandard({
+  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-standard/teaser-standard" as *;
+```
+
+### Javascript
+This version is rarely used to render a teaser dynamically in the browser. For example, it is used to render reserv-teasers in failover. This version **ONLY** supports the `title`, `text`, `targetLink`, `classNames` and `attributes` parameters.
+
+```javascript
+import { dsTeaserStandard } from "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard";
+
+// NB: javascript only supports a subset of all parameters
+const parameters = {
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen",
+  targetLink: "https://www.dn.se/ekonomi/",
+  attributes: { "data-test" : "test-value" }
+}
+
+const teaserStandardHtml = dsTeaserStandard(parameters);
+```

package/components/teaser-standard/README.md

@@ -1,68 +1,42 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
-- Storybook: [TeaserStandard](https://designsystem.dn.se/?path=/docs/section-teaserstandard--docs)
-- Storybook (Latest): [TeaserStandard](https://designsystem-latest.dn.se/?path=/docs/section-teaserstandard--docs)
-
-----
-
-# teaser-standard
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|targetLink | String | yes | | | Target URL for the teaser |
-|variant | String | no | "default" or "podcast" | "default" | |
-|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
-|theme | String | no | nyheter, kultur | (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 |
-|sticker | String | no | | | Red text before the text |
-|mediaHtml | HTML String | no | | | Main image or other media |
-|bylineHtml | HTML String | no | | | Side image of the author |
-|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
-|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 |
-|publicationTime | string | no | | null | Publication time text. |
-|duration | string | no | | null | Duration of podcast. |
-|isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-These are copy paste friendly examples to quickliy get started using a component.
-
-### Nunjucks
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard.njk' import TeaserStandard %}
-
-{{ TeaserStandard({
-  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-standard/teaser-standard" as *;
-```
-
-### Javascript
-This version is rarely used to render a teaser dynamically in the browser. For example, it is used to render reserv-teasers in failover. This version **ONLY** supports the `title`, `text`, `targetLink`, `classNames` and `attributes` parameters.
-
-```javascript
-import { dsTeaserStandard } from "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard";
-
-// NB: javascript only supports a subset of all parameters
-const parameters = {
-  title: "Upp på börsen",
-  text: "Det ser ganska normalt ut på Stockholmsbörsen",
-  targetLink: "https://www.dn.se/ekonomi/",
-  attributes: { "data-test" : "test-value" }
-}
-
-const teaserStandardHtml = dsTeaserStandard(parameters);
-```
+TeaserStandard
+==============
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-standard](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-standard)
+*   Storybook: [TeaserStandard](https://designsystem.dn.se/?path=/docs/section-teaserstandard--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-standard/teaser-standard.scss'`
+
+| 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 | \- |
+| 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 />"kultur", "nyheter" | \- |
+| areaType | The area where the column is rendered<br />"right", "bauta", "bautaxl" | \- |
+| 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
+<TeaserStandard
+  media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="" className="picture picture--placeholder" sizes="(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}/>}
+  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-swipe-card/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| bylinePicture | Image of the author<br />ComponentChild | \- |
+| 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 | \- |
@@ -19,6 +19,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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 | \- |
 | 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 | \- |

package/package.json

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

package/preact/assets/types/teaser-props.d.ts

@@ -21,6 +21,8 @@ export interface TeaserProps extends SharedProps {
     sticker?: string;
     /** Main image or other media */
     media?: ComponentChild;
+    /** Flag so we can handle square teaser images */
+    isSquareImage?: boolean;
     /** Image of the author */
     bylinePicture?: ComponentChild;
     /** If the headline should be italic */

package/preact/components/teaser-counter/teaser-counter.js

@@ -32,8 +32,12 @@ import { jsx as jsx4 } from "preact/jsx-runtime";
 
 // ../src/helpers/teaser.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "preact/jsx-runtime";
-var Media = ({ media, rounded }) => {
-  const classNames = "ds-teaser__media" + (rounded ? " ds-teaser__media--rounded" : "");
+var Media = ({ media, rounded, isSquareImage }) => {
+  const classNames = formatClassString([
+    "ds-teaser__media",
+    rounded && "ds-teaser__media--rounded",
+    isSquareImage && "ds-teaser__media--square-image"
+  ]);
   return media ? /* @__PURE__ */ jsx5("div", { className: classNames, children: media }) : null;
 };
 var Content = ({ children, bylinePicture }) => {