@bonniernews/dn-design-system-web 32.7.9 → 32.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/article-body-image/README.md +1 -1
  3. package/components/byline/README.md +13 -3
  4. package/components/byline-list/README.md +2 -2
  5. package/components/mask/README-NJK.md +36 -0
  6. package/components/mask/README.md +21 -36
  7. package/components/profile-header/README.md +1 -1
  8. package/components/teaser-image/README-NJK.md +39 -0
  9. package/components/teaser-image/README.md +24 -39
  10. package/components/text-input/README.md +1 -1
  11. package/package.json +1 -1
  12. package/preact/components/mask/mask.d.ts +14 -0
  13. package/preact/components/mask/mask.js +23 -0
  14. package/preact/components/mask/mask.js.map +7 -0
  15. package/preact/components/teaser-image/teaser-image.d.ts +17 -0
  16. package/preact/components/teaser-image/teaser-image.js +38 -0
  17. package/preact/components/teaser-image/teaser-image.js.map +7 -0
  18. package/components/mask/README-UXD.md +0 -0
  19. package/components/teaser-image/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.10](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.9...@bonniernews/dn-design-system-web@32.7.10) (2025-07-04)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** tsx teaserimage and mask ([#1802](https://github.com/BonnierNews/dn-design-system/issues/1802)) ([4b1e264](https://github.com/BonnierNews/dn-design-system/commit/4b1e264f7134ee2eade79fb60330d90a0d9bf390))
13
+
7
14
  ## [32.7.9](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.8...@bonniernews/dn-design-system-web@32.7.9) (2025-07-03)
8
15
 
9
16
 
package/components/article-body-image/README.md CHANGED
@@ -21,7 +21,7 @@ The component will not include styling by itself. Make sure to include the right
21
21
  <ArticleBodyImage
22
22
  author="Paul Hansen"
23
23
  caption="Detta är en bildtext"
24
- image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
24
+ image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
25
25
  imageType="Foto"
26
26
  />
27
27
  ```
package/components/byline/README.md CHANGED
@@ -27,8 +27,18 @@ initModalByline(articleElement);
27
27
  | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
28
28
 
29
29
  ```jsx
30
- <RunComponentJs
31
- component={<><div className="ds-byline ds-byline--show-images"><div className="ds-byline__inner"><div className="ds-byline__portrait"><ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/></div><div className="ds-byline__info "><span className="ds-byline__role">Text</span><a className="ds-byline__name" data-id="https://www.dn.se/av/peter-wolodarski" data-index="1" data-label="Peter Wolodarski" data-link-category="article author" href="https://www.dn.se/av/peter-wolodarski">Peter Wolodarski</a></div></div></div></>}
32
- jsFunction={() => {}}
30
+ <Byline
31
+ bylineTitle="Text"
32
+ bylines={[
33
+ {
34
+ authorId: '123',
35
+ authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
36
+ bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
37
+ followable: true,
38
+ name: 'Peter Wolodarski',
39
+ role: 'Text',
40
+ variant: 'link'
41
+ }
42
+ ]}
33
43
  />
34
44
  ```
package/components/byline-list/README.md CHANGED
@@ -24,7 +24,7 @@ The component will not include styling by itself. Make sure to include the right
24
24
  {
25
25
  authorId: '1',
26
26
  authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
27
- bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
27
+ bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
28
28
  followable: false,
29
29
  name: 'Byline link',
30
30
  role: 'Grafik'
@@ -32,7 +32,7 @@ The component will not include styling by itself. Make sure to include the right
32
32
  {
33
33
  authorId: '123',
34
34
  authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
35
- bylineImage: <ExamplePicture src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
35
+ bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
36
36
  followable: true,
37
37
  name: 'Test Testsson',
38
38
  role: 'Text'
package/components/mask/README-NJK.md ADDED
@@ -0,0 +1,36 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
2
+ - Storybook: [Subcomponents > Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
3
+ - Storybook (Latest): [Subcomponents > Mask](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-mask--docs)
4
+
5
+ ----
6
+
7
+ # Mask
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |imageHtml | HTML String | yes | | | The img element or equivalent to mask |
14
+ |variant | String | yes | quiz-mask | quiz-mask | Mask variant |
15
+ |classNames | String | no | | | Ex. "my-special-class" |
16
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
+
18
+ ## Minimum requirement example
19
+
20
+ ### Nunjucks
21
+
22
+ These are copy paste friendly examples to quickliy get started using a component.
23
+
24
+ ```html
25
+ {% from '@bonniernews/dn-design-system-web/components/mask/mask.njk' import Mask %}
26
+
27
+ {{ Mask({
28
+ variant: "quiz-mask",
29
+ imageHtml: "<img src='cool-pic.jpg'>"
30
+ })}}
31
+ ```
32
+
33
+ ### SCSS
34
+ ```scss
35
+ @use "@bonniernews/dn-design-system-web/components/mask/mask";
36
+ ```
package/components/mask/README.md CHANGED
@@ -1,36 +1,21 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
2
- - Storybook: [Subcomponents > Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
3
- - Storybook (Latest): [Subcomponents > Mask](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-mask--docs)
4
-
5
- ----
6
-
7
- # Mask
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |imageHtml | HTML String | yes | | | The img element or equivalent to mask |
14
- |variant | String | yes | quiz-mask | quiz-mask | Mask variant |
15
- |classNames | String | no | | | Ex. "my-special-class" |
16
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
-
18
- ## Minimum requirement example
19
-
20
- ### Nunjucks
21
-
22
- These are copy paste friendly examples to quickliy get started using a component.
23
-
24
- ```html
25
- {% from '@bonniernews/dn-design-system-web/components/mask/mask.njk' import Mask %}
26
-
27
- {{ Mask({
28
- variant: "quiz-mask",
29
- imageHtml: "<img src='cool-pic.jpg'>"
30
- })}}
31
- ```
32
-
33
- ### SCSS
34
- ```scss
35
- @use "@bonniernews/dn-design-system-web/components/mask/mask";
36
- ```
1
+ Mask
2
+ ====
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
5
+ * Storybook: [Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
6
+
7
+ 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/mask/mask.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | image\* | ComponentChild | \- |
12
+ | variant\* | "quiz-mask" | \- |
13
+ | classNames | Ex. "my-special-class"<br />string | \- |
14
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
15
+
16
+ ```jsx
17
+ <Mask
18
+ image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
19
+ variant="quiz-mask"
20
+ />
21
+ ```
package/components/profile-header/README.md CHANGED
@@ -27,7 +27,7 @@ The component will not include styling by itself. Make sure to include the right
27
27
  <ProfileHeader
28
28
  articleCount={400}
29
29
  descriptionHtml="<p>Peter Wolodarski är chefredaktör och ansvarig utgivare för Dagens Nyheter.</p>"
30
- media={<ExamplePicture className="picture" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=120:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=240:*&output-quality=60 240w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=480:*&output-quality=60 480w" style={{aspectRatio: '450 / 1020'}}/>}
30
+ media={<ExamplePicture className="picture" sizes="120px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=120:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=240:*&output-quality=60 240w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=480:*&output-quality=60 480w" style={{aspectRatio: '450 / 1020'}}/>}
31
31
  subtitleHtml="<a href='mailto:peter.wolodarski@dn.se'>peter.wolodarski@dn.se</a>"
32
32
  title="Peter Wolodarski"
33
33
  toggle
package/components/teaser-image/README-NJK.md ADDED
@@ -0,0 +1,39 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
2
+ - Storybook: [Subcomponents > TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
3
+ - Storybook (Latest): [Subcomponents > TeaserImage](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
4
+
5
+ ----
6
+
7
+ # teaser-image
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |imageHtml | HTML String | yes | | | The img element or equivalent |
14
+ |byline | String | no | | | Media credit text |
15
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
+ |classNames | String | no | | | Ex. "my-special-class" |
17
+ |~forcePx~ | | | | | Always applied |
18
+
19
+ ## Minimum requirement example
20
+
21
+ ### Nunjucks
22
+
23
+ These are copy paste friendly examples to quickliy get started using a component.
24
+
25
+ ```html
26
+ {% from '@bonniernews/dn-design-system-web/components/teaser-image/teaser-image.njk' import TeaserImage %}
27
+
28
+ {{ TeaserImage({
29
+ imageHtml: "<img src='??'>",
30
+ byline: "Foto: Paul Hansen"
31
+ })}}
32
+ ```
33
+
34
+ ### SCSS
35
+ ```scss
36
+ @use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
37
+ ```
38
+
39
+ This scss is already included in `teaser.scss`.
package/components/teaser-image/README.md CHANGED
@@ -1,39 +1,24 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
2
- - Storybook: [Subcomponents > TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
3
- - Storybook (Latest): [Subcomponents > TeaserImage](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
4
-
5
- ----
6
-
7
- # teaser-image
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |imageHtml | HTML String | yes | | | The img element or equivalent |
14
- |byline | String | no | | | Media credit text |
15
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
- |classNames | String | no | | | Ex. "my-special-class" |
17
- |~forcePx~ | | | | | Always applied |
18
-
19
- ## Minimum requirement example
20
-
21
- ### Nunjucks
22
-
23
- These are copy paste friendly examples to quickliy get started using a component.
24
-
25
- ```html
26
- {% from '@bonniernews/dn-design-system-web/components/teaser-image/teaser-image.njk' import TeaserImage %}
27
-
28
- {{ TeaserImage({
29
- imageHtml: "<img src='??'>",
30
- byline: "Foto: Paul Hansen"
31
- })}}
32
- ```
33
-
34
- ### SCSS
35
- ```scss
36
- @use "@bonniernews/dn-design-system-web/components/teaser-image/teaser-image" as *;
37
- ```
38
-
39
- This scss is already included in `teaser.scss`.
1
+ TeaserImage
2
+ ===========
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
5
+ * Storybook: [TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
6
+
7
+ Image caption will never scale (forcePx is always true)
8
+
9
+ 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-image/teaser-image.scss'`
10
+
11
+ | Name | Description | Default |
12
+ |:--- | :--- | :--- |
13
+ | image\* | ComponentChild | \- |
14
+ | byline | string | \- |
15
+ | mask | "quiz-mask" | \- |
16
+ | classNames | Ex. "my-special-class"<br />string | \- |
17
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
18
+
19
+ ```jsx
20
+ <TeaserImage
21
+ byline="Foto: Paul Hansen"
22
+ image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
23
+ />
24
+ ```
package/components/text-input/README.md CHANGED
@@ -17,7 +17,7 @@ import textInput from '@bonniernews/dn-design-system-web/components/text-input/t
17
17
  | Name | Description | Default |
18
18
  |:--- | :--- | :--- |
19
19
  | name\* | It's used as name and id<br />string | \- |
20
- | type | text, password, email, etc<br />"number", "text", "search", "color", "image", "date", "datetime-local", "email" | "text" |
20
+ | type | text, password, email, etc<br />"number", "text", "search", "image", "color", "date", "datetime-local", "email" | "text" |
21
21
  | label\* | A label for the input<br />string | \- |
22
22
  | error | Used if error state shoud be set on load<br />boolean | \- |
23
23
  | errorMessage | What error message that should be displayed<br />string | \- |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.9",
3
+ "version": "32.7.10",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/preact/components/mask/mask.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { ComponentChild } from 'preact';
2
+ import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
3
+ export interface MaskProps extends SharedProps {
4
+ image: ComponentChild;
5
+ variant: "quiz-mask";
6
+ }
7
+ /**
8
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)
9
+ * - Storybook: [Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)
10
+ *
11
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
12
+ * `@use '@bonniernews/dn-design-system-web/components/mask/mask.scss'`
13
+ */
14
+ export declare const Mask: ({ image, variant, classNames, attributes }: MaskProps) => import("preact").JSX.Element;
package/preact/components/mask/mask.js ADDED
@@ -0,0 +1,23 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/mask/mask.tsx
7
+ import { jsx } from "preact/jsx-runtime";
8
+ var Mask = ({ image, variant, classNames, attributes }) => {
9
+ const componentClassName = "ds-mask";
10
+ const classes = formatClassString([
11
+ componentClassName,
12
+ variant ? `${componentClassName}--${variant}` : "",
13
+ classNames
14
+ ]);
15
+ const maskStyle = {
16
+ clipPath: `url(#${variant})`
17
+ };
18
+ return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("div", { style: maskStyle, className: `${componentClassName}__image-wrapper`, children: image }) });
19
+ };
20
+ export {
21
+ Mask
22
+ };
23
+ //# sourceMappingURL=mask.js.map
package/preact/components/mask/mask.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/mask/mask.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface MaskProps extends SharedProps {\n image: ComponentChild;\n variant: \"quiz-mask\"; // Add more variants as needed\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)\n * - Storybook: [Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/mask/mask.scss'`\n */\nexport const Mask = ({ image, variant, classNames, attributes }: MaskProps) => {\n const componentClassName = 'ds-mask';\n\n const classes = formatClassString([\n componentClassName,\n variant ? `${componentClassName}--${variant}` : '',\n classNames,\n ]);\n\n const maskStyle = {\n clipPath: `url(#${variant})`,\n };\n\n return (\n <div className={classes} {...attributes}>\n <div style={maskStyle} className={`${componentClassName}__image-wrapper`}>\n {image}\n </div>\n </div>\n );\n};\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAfC,IAAM,OAAO,CAAC,EAAE,OAAO,SAAS,YAAY,WAAW,MAAiB;AAC7E,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,UAAU,GAAG,kBAAkB,KAAK,OAAO,KAAK;AAAA,IAChD;AAAA,EACF,CAAC;AAED,QAAM,YAAY;AAAA,IAChB,UAAU,QAAQ,OAAO;AAAA,EAC3B;AAEA,SACG,oBAAC,SAAI,WAAW,SAAU,GAAG,YAC5B,8BAAC,SAAI,OAAO,WAAW,WAAW,GAAG,kBAAkB,mBACpD,iBACH,GACF;AAEJ;",
6
+ "names": []
7
+ }
package/preact/components/teaser-image/teaser-image.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ComponentChild } from 'preact';
2
+ import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
3
+ export interface TeaserImageProps extends SharedProps {
4
+ image: ComponentChild;
5
+ byline?: string;
6
+ mask?: "quiz-mask";
7
+ }
8
+ /**
9
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
10
+ * - Storybook: [TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)
11
+ *
12
+ * Image caption will never scale (forcePx is always true)
13
+ *
14
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
15
+ * `@use '@bonniernews/dn-design-system-web/components/teaser-image/teaser-image.scss'`
16
+ */
17
+ export declare const TeaserImage: ({ image, byline, mask, classNames, attributes }: TeaserImageProps) => import("preact").JSX.Element;
package/preact/components/teaser-image/teaser-image.js ADDED
@@ -0,0 +1,38 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/mask/mask.tsx
7
+ import { jsx } from "preact/jsx-runtime";
8
+ var Mask = ({ image, variant, classNames, attributes }) => {
9
+ const componentClassName = "ds-mask";
10
+ const classes = formatClassString([
11
+ componentClassName,
12
+ variant ? `${componentClassName}--${variant}` : "",
13
+ classNames
14
+ ]);
15
+ const maskStyle = {
16
+ clipPath: `url(#${variant})`
17
+ };
18
+ return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children: /* @__PURE__ */ jsx("div", { style: maskStyle, className: `${componentClassName}__image-wrapper`, children: image }) });
19
+ };
20
+
21
+ // ../src/components/teaser-image/teaser-image.tsx
22
+ import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
23
+ var TeaserImage = ({ image, byline, mask, classNames, attributes }) => {
24
+ const componentClassName = "ds-teaser-image";
25
+ const classes = formatClassString([
26
+ componentClassName,
27
+ mask ? `${componentClassName}--mask` : "",
28
+ classNames
29
+ ]);
30
+ return /* @__PURE__ */ jsxs("figure", { className: classes, ...attributes, children: [
31
+ mask ? /* @__PURE__ */ jsx2(Mask, { variant: mask, image }) : image,
32
+ byline && /* @__PURE__ */ jsx2("figcaption", { className: `${componentClassName}__byline`, children: byline })
33
+ ] });
34
+ };
35
+ export {
36
+ TeaserImage
37
+ };
38
+ //# sourceMappingURL=teaser-image.js.map
package/preact/components/teaser-image/teaser-image.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/mask/mask.tsx", "../../../components/teaser-image/teaser-image.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface MaskProps extends SharedProps {\n image: ComponentChild;\n variant: \"quiz-mask\"; // Add more variants as needed\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/mask](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/mask)\n * - Storybook: [Mask](https://designsystem.dn.se/?path=/docs/section-subcomponents-mask--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/mask/mask.scss'`\n */\nexport const Mask = ({ image, variant, classNames, attributes }: MaskProps) => {\n const componentClassName = 'ds-mask';\n\n const classes = formatClassString([\n componentClassName,\n variant ? `${componentClassName}--${variant}` : '',\n classNames,\n ]);\n\n const maskStyle = {\n clipPath: `url(#${variant})`,\n };\n\n return (\n <div className={classes} {...attributes}>\n <div style={maskStyle} className={`${componentClassName}__image-wrapper`}>\n {image}\n </div>\n </div>\n );\n};\n", "import { ComponentChild } from 'preact'\nimport type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\nimport { Mask } from \"../mask/mask\";\n\nexport interface TeaserImageProps extends SharedProps {\n image: ComponentChild;\n byline?: string;\n mask?: \"quiz-mask\";\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)\n * - Storybook: [TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)\n *\n * Image caption will never scale (forcePx is always true)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/teaser-image/teaser-image.scss'`\n */\nexport const TeaserImage = ({ image, byline, mask, classNames, attributes }: TeaserImageProps) => {\n const componentClassName = 'ds-teaser-image';\n\n const classes = formatClassString([\n componentClassName,\n mask ? `${componentClassName}--mask` : '',\n classNames,\n ]);\n\n return (\n <figure className={classes} {...attributes}>\n {\n mask\n ? <Mask variant={mask} image={image} />\n : image\n }\n {byline && <figcaption className={`${componentClassName}__byline`}>{byline}</figcaption>}\n </figure>\n );\n};\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAfC,IAAM,OAAO,CAAC,EAAE,OAAO,SAAS,YAAY,WAAW,MAAiB;AAC7E,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,UAAU,GAAG,kBAAkB,KAAK,OAAO,KAAK;AAAA,IAChD;AAAA,EACF,CAAC;AAED,QAAM,YAAY;AAAA,IAChB,UAAU,QAAQ,OAAO;AAAA,EAC3B;AAEA,SACG,oBAAC,SAAI,WAAW,SAAU,GAAG,YAC5B,8BAAC,SAAI,OAAO,WAAW,WAAW,GAAG,kBAAkB,mBACpD,iBACH,GACF;AAEJ;;;ACNI,SAGM,OAAAA,MAHN;AAVG,IAAM,cAAc,CAAC,EAAE,OAAO,QAAQ,MAAM,YAAY,WAAW,MAAwB;AAChG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,OAAO,GAAG,kBAAkB,WAAW;AAAA,IACvC;AAAA,EACF,CAAC;AAED,SACE,qBAAC,YAAO,WAAW,SAAU,GAAG,YAE5B;AAAA,WACE,gBAAAA,KAAC,QAAK,SAAS,MAAM,OAAc,IACnC;AAAA,IAEH,UAAU,gBAAAA,KAAC,gBAAW,WAAW,GAAG,kBAAkB,YAAa,kBAAO;AAAA,KAC7E;AAEJ;",
6
+ "names": ["jsx"]
7
+ }
package/components/mask/README-UXD.md DELETED
File without changes
package/components/teaser-image/README-UXD.md DELETED
File without changes