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

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### Bug Fixes
+
+* **web:** tsx factbox ([#1835](https://github.com/BonnierNews/dn-design-system/issues/1835)) ([93ed96a](https://github.com/BonnierNews/dn-design-system/commit/93ed96a8cc7577641f35ccc14cd52870d347f511))
+
+## [32.7.36](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.35...@bonniernews/dn-design-system-web@32.7.36) (2025-07-16)
+
+
+### Bug Fixes
+
+* **web:** teaser list swipe tsx ([#1836](https://github.com/BonnierNews/dn-design-system/issues/1836)) ([ee477a4](https://github.com/BonnierNews/dn-design-system/commit/ee477a413b90be8791e89f42ac1463003f1e2bac))
+
 ## [32.7.35](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.34...@bonniernews/dn-design-system-web@32.7.35) (2025-07-16)
 
 

package/assets/types/teaser-props.ts

@@ -7,7 +7,7 @@ export interface TeaserProps extends SharedProps {
   /** Target URL for the teaser */
   targetLink: string;
   /** Variant of the teaser */
-  variant?: "default" | "podcast";
+  variant?: "default" | "podcast" | "insandare" | "direkt";
   /** The area where the column is rendered */
   areaType?: "right" | "bauta" | "bautaxl";
   /** The theme-class to apply to the teaser */

package/components/group-header/README.md

@@ -9,7 +9,7 @@ The component will not include styling by itself. Make sure to include the right
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | title\* | The title text<br />string | \- |
-| type | The type of interactive element added to the header<br />"link", "toggle", "icon", "arrows" | "icon" |
+| type | The type of interactive element added to the header<br />"link", "icon", "toggle", "arrows" | "icon" |
 | variant | The design variant, if not bauta or bautaxl the group header will get the 'standard' design<br />"bauta", "bauataxl" | \- |
 | media | The image element for the header<br />ComponentChild | \- |
 | href | If given, the title is rendered as a link<br />string | \- |

package/components/teaser-card/README.md

@@ -8,7 +8,7 @@ The component will not include styling by itself. Make sure to include the right
 
 | Name | Description | Default |
 |:--- | :--- | :--- |
-| areaType | "right", "bauta", "bautaxl" | \- |
+| areaType | "main", "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | "nyheter" |
 | classNames | Ex. "my-special-class"<br />string | \- |

package/components/teaser-large/README.md

@@ -27,7 +27,7 @@ The component will not include styling by itself. Make sure to include the right
 | 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" | "default" |
+| variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | "default" |
 | targetLink\* | Target URL for the teaser<br />string | \- |
 
 ```jsx

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

@@ -1,51 +1,68 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
-- Storybook: [TeaserListSwipe](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe--docs)
-- Storybook (Latest): [TeaserListSwipe](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistswipe--docs)
+TeaserListSwipe
+===============
 
-----
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
+*   Storybook: [TeaserListSwipe](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe--docs)
 
-# teaser-list-swipe
+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-list-swipe/teaser-list-swipe.scss'`
 
-## Parameters
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| title\* | Heading of the teaser<br />string | \- |
+| titleHref | Target URL for the header<br />string | \- |
+| areaType | The area where the column is rendered<br />"main", "right", "bauta", "bautaxl" | \- |
+| arrowPosition | Determines where the scroll arrows are rendered<br />"floating", "header" | "header" |
+| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
+| 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 | \- |
+| groupHeaderToggleSelectedText | Text in toggle button when selected<br />string | \- |
+| groupHeaderToggleSelected | Is toggle button selected or not<br />boolean | false |
+| groupHeaderToggleClassNames | Class names for toggle button<br />string | \- |
+| groupHeaderToggleAttributes | Attributes for toggle button. Ex. { "data-entity-id": "dn.epi.434" }<br />Record<string, string> | { } |
+| classNames | Ex. "my-special-class"<br />string | \- |
+| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
 
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | String | yes | | | Heading of the teaser |
-|titleHref | String | no | | | Target URL for the header |
-|areaType | String | no | "main", "right", "bauta", "bautaxl" | | The area where the column is rendered |
-|arrowPosition | String | no | "floating", "header" | "header" | Determines where the scroll arrows are rendered |
-|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
-|teasers | Object | yes | | | A list of arguments to TeaserSwipeCard |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|groupHeaderType | String | no | "icon", "link", "toggle", "arrow" | | Type of group header |
-|groupHeaderToggleText | String | no | | | Text in toggle button |
-|groupHeaderToggleSelectedText | String | no | | | Text in toggle button when selected |
-|groupHeaderToggleSelected | Boolean | no | | false | Is toogle button selected or not |
-|groupHeaderToggleClassNames | String | no | | | Class names for toggle button |
-|groupHeaderToggleAttributes | Object | no | | | Attributes for toogle button. Ex. { "data-entity-id": "dn.epi.434" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | | | | | Not supported |
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickly get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe.njk' import TeaserListSwipe %}
-
-{{ TeaserListSwipe({
-  title: 'DN Direkt',
-  targetLink: '/direkt/'
-  teasers: [{...}, {...}]
-}) }}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe";
-```
-
-### JS
-This component does not come with any JS to facilitate scrolling via the buttons. Implementing that is left as an exercise to the reader.
+```jsx
+<TeaserListSwipe
+  teasers={[
+    {
+      highlight: 'Insändare:',
+      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="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' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
+      targetLink: '#',
+      time: '12:34',
+      title: 'Riktigt bra politik nu',
+      variant: 'insandare',
+      vignette: 'Sverige'
+    },
+    {
+      highlight: 'Insändare:',
+      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="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' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
+      targetLink: '#',
+      time: '11:42',
+      title: 'Ska det vara så här nu?',
+      variant: 'insandare'
+    },
+    {
+      highlight: 'Insändare:',
+      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="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' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
+      targetLink: '#',
+      time: '10:24',
+      title: 'Avskaffa något jag inte tycker om',
+      variant: 'insandare',
+      vignette: 'Världen'
+    },
+    {
+      highlight: 'Insändare:',
+      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="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' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
+      targetLink: '#',
+      time: '09:58',
+      title: 'Man borde bitit hund på Kungsgatan',
+      variant: 'insandare',
+      vignette: 'Sverige'
+    }
+  ]}
+  title="Insändare"
+  titleHref="#"
+/>
+```

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

@@ -1,40 +1,42 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
-- Storybook: [Subcomponents > TeaserSwipeCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)
-- Storybook (Latest): [Subcomponents > TeaserSwipeCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)
-
-----
-
-# TeaserSwipeCard
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|title | text | yes | | | The title of the teaser |
-|href | text | yes | | | The link of the teaser |
-|highlight | text | no | | | The highlight text of the teaser |
-|time | text | no | | | The timestamp text of the teaser |
-|mediaHtml | html | no | | | The media to render |
-|variant | text | no | default, insandare, direkt | default | The variant of the teaser |
-|classNames | String | no | | | Ex. "my-special-class" |
-|~forcePx~ | bool | no | true, false | false | Not supported |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-
-## 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-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
-
-{{ TeaserSwipeCard({
-  title: "Nyheter händer"
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card";
-```
+TeaserSwipeCard
+===============
+
+*   GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
+*   Storybook: [TeaserSwipeCard](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe-teaserswipecard--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-swipe-card/teaser-swipe-card.scss'`
+
+| Name | Description | Default |
+|:--- | :--- | :--- |
+| bylinePicture | Image of the author<br />ComponentChild | \- |
+| 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 | \- |
+| 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 | \- |
+| 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
+<TeaserSwipeCard
+  highlight="Live:"
+  media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="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' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>}
+  time="13:45"
+  title="Man bet hund på Kungsgatan"
+  vignette="Sverige"
+/>
+```

package/components/teaser-tipsa/README.md

@@ -12,7 +12,7 @@ The component will not include styling by itself. Make sure to include the right
 | text | string | \- |
 | classNames | Ex. "my-special-class"<br />string | \- |
 | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
-| areaType | "right", "bauta", "bautaxl" | \- |
+| areaType | "main", "right", "bauta", "bautaxl" | \- |
 | targetLink | string | \- |
 | theme | "kultur", "nyheter" | \- |
 

package/components/text-input/README.md

@@ -17,7 +17,7 @@ import textInput from '@bonniernews/dn-design-system-web/components/text-input/t
 | Name | Description | Default |
 |:--- | :--- | :--- |
 | name\* | It's used as name and id<br />string | \- |
-| type | text, password, email, etc<br />"number", "text", "search", "image", "color", "date", "datetime-local", "email" | "text" |
+| type | text, password, email, etc<br />"number", "text", "search", "time", "image", "color", "date", "datetime-local" | "text" |
 | label\* | A label for the input<br />string | \- |
 | error | Used if error state shoud be set on load<br />boolean | \- |
 | errorMessage | What error message that should be displayed<br />string | \- |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "32.7.35",
+  "version": "32.7.37",
   "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

@@ -6,7 +6,7 @@ export interface TeaserProps extends SharedProps {
     /** Target URL for the teaser */
     targetLink: string;
     /** Variant of the teaser */
-    variant?: "default" | "podcast";
+    variant?: "default" | "podcast" | "insandare" | "direkt";
     /** The area where the column is rendered */
     areaType?: "right" | "bauta" | "bautaxl";
     /** The theme-class to apply to the teaser */

package/preact/components/factbox/factbox.d.ts

@@ -0,0 +1,29 @@
+import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
+import { GradeValue } from "../../foundations/icons/grade-icon";
+import { ComponentChild } from "preact";
+export interface FactboxProps extends SharedProps {
+    title?: string;
+    titleHighlight?: string;
+    titleImage?: ComponentChild;
+    bodyParts: Array<BodyPart>;
+    theme?: 'default' | 'kultur' | 'nyheter';
+    forceExpand?: boolean;
+}
+interface BodyPart {
+    type: string;
+    bodyHtml?: string;
+    grade?: GradeValue;
+    media?: ComponentChild;
+    imageType?: string;
+    caption?: string;
+    author?: string;
+}
+/**
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/factbox](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/factbox)
+ * - Storybook: [Factbox](https://designsystem.dn.se/?path=/docs/basic-factbox--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/factbox/factbox.scss'`
+ */
+export declare const Factbox: ({ title, titleHighlight, titleImage, bodyParts, theme, forceExpand, classNames, attributes }: FactboxProps) => import("preact").JSX.Element;
+export default Factbox;