@bonniernews/dn-design-system-web 31.0.1-beta.3 → 31.1.0

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 +23 -0
  2. package/components/teaser-text-on-image/README.md +1 -2
  3. package/components/teaser-text-on-image/teaser-text-on-image.njk +4 -10
  4. package/foundations/variables/gradientsDnDark.scss +9 -9
  5. package/foundations/variables/gradientsDnLight.scss +9 -9
  6. package/foundations/variables/gradientsList.scss +1 -1
  7. package/foundations/variables/shadowsDnDark.scss +7 -7
  8. package/foundations/variables/shadowsDnLight.scss +7 -7
  9. package/foundations/variables/shadowsList.scss +1 -1
  10. package/foundations/variables/typographyList.scss +35 -35
  11. package/foundations/variables/typographyScreenExtraLarge.scss +249 -249
  12. package/foundations/variables/typographyScreenLarge.scss +249 -249
  13. package/foundations/variables/typographyScreenSmall.scss +249 -249
  14. package/package.json +1 -1
  15. package/variables/gradients-dark-mode.json +11 -11
  16. package/variables/gradients-light-mode.json +11 -11
  17. package/variables/gradients-list.json +1 -1
  18. package/variables/shadows-list.json +2 -2
  19. package/variables/typography-list.json +35 -35
package/CHANGELOG.md CHANGED
@@ -4,6 +4,29 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [31.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.1...@bonniernews/dn-design-system-web@31.1.0) (2025-03-13)
8
+
9
+
10
+ ### Features
11
+
12
+ * **web:** text on image teaser ([#1656](https://github.com/BonnierNews/dn-design-system/issues/1656)) ([bf0325c](https://github.com/BonnierNews/dn-design-system/commit/bf0325c0b8044580030fdbe41eabee26476d5f5f))
13
+
14
+
15
+ ### Maintenance
16
+
17
+ * **deps:** bump @babel/helpers from 7.24.0 to 7.26.10 in /web ([#1661](https://github.com/BonnierNews/dn-design-system/issues/1661)) ([183c4bf](https://github.com/BonnierNews/dn-design-system/commit/183c4bf793c4143916b30ecf0a3903f1b56e5fa4))
18
+ * **deps:** bump @babel/runtime from 7.24.1 to 7.26.10 in /web ([#1660](https://github.com/BonnierNews/dn-design-system/issues/1660)) ([b76f457](https://github.com/BonnierNews/dn-design-system/commit/b76f4575ece3ffaf92cbe4b03297820f4b3add8f))
19
+ * **deps:** bump sass from 1.83.4 to 1.85.1 ([#1633](https://github.com/BonnierNews/dn-design-system/issues/1633)) ([8c8098b](https://github.com/BonnierNews/dn-design-system/commit/8c8098b99168cd8d3b11765719619654baf821cb))
20
+ * prerelease packages ([e111703](https://github.com/BonnierNews/dn-design-system/commit/e1117039ea9d1bcd6bcaf5225f8f3a8a93a7bc0f))
21
+
22
+ ## [31.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.0...@bonniernews/dn-design-system-web@31.0.1) (2025-03-12)
23
+
24
+
25
+ ### Maintenance
26
+
27
+ * **foundations:** update variables through figma api ([#1653](https://github.com/BonnierNews/dn-design-system/issues/1653)) ([264ae12](https://github.com/BonnierNews/dn-design-system/commit/264ae12d960da05222ed0ce8a0d73cddac40a08f))
28
+ * prerelease packages ([e00b605](https://github.com/BonnierNews/dn-design-system/commit/e00b6059b85097548056942c49795c5dce2d0b87))
29
+
7
30
  ## [31.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@30.1.1...@bonniernews/dn-design-system-web@31.0.0) (2025-03-06)
8
31
 
9
32
 
package/components/teaser-text-on-image/README.md CHANGED
@@ -12,10 +12,9 @@
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
- |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
16
15
  |text | String | no | | | Teaser subtext |
17
16
  |vignette | String | no | | | Top text in the teaser |
18
- |mediaHtml | HTML String | yes | | | Main image or other media |
17
+ |mediaHtml | HTML String | yes | | | Main image |
19
18
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
19
  |classNames | String | no | | | Ex. "my-special-class" |
21
20
  |~forcePx~ | | | | | Not supported |
package/components/teaser-text-on-image/teaser-text-on-image.njk CHANGED
@@ -1,7 +1,4 @@
1
1
  {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
- {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
3
- {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
4
- {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
5
2
 
6
3
  {% macro TeaserTextOnImage(params) %}
7
4
  {% set componentClassName = "ds-teaser" %}
@@ -14,16 +11,13 @@
14
11
 
15
12
  {% call TeaserCard({
16
13
  targetLink: params.targetLink,
17
- theme: params.theme,
18
14
  attributes: params.attributes,
19
15
  classNames: extraClasses
20
16
  }) %}
21
17
  <div class="{{ componentClassName + '__content'}}">
22
- {% if params.mediaHtml %}
23
- <div class="{{ componentClassName + '__media' }}">
24
- {{ params.mediaHtml }}
25
- </div>
26
- {% endif %}
18
+ <div class="{{ componentClassName + '__media' }}">
19
+ {{ params.mediaHtml }}
20
+ </div>
27
21
 
28
22
  <div class="{{ componentClassName + '__text-content'}}">
29
23
  {% if params.vignette %}
@@ -36,7 +30,7 @@
36
30
  {{ params.title }}
37
31
  </h2>
38
32
 
39
- {% if params.text%}
33
+ {% if params.text %}
40
34
  <p class="{{ componentClassName + '__text' }}">
41
35
  {{ params.text }}
42
36
  </p>
package/foundations/variables/gradientsDnDark.scss CHANGED
@@ -1,29 +1,29 @@
1
1
  $gradientsDnDark: (
2
- content-fade-left: (
2
+ content-fade-up: (
3
3
  type: linear,
4
- angle: 270,
4
+ angle: 180,
5
5
  stops: ((
6
- color: #171717,
6
+ color: rgba(23, 23, 23, 0),
7
7
  position: 0
8
8
  ), (
9
- color: rgba(23, 23, 23, 0),
9
+ color: #171717,
10
10
  position: 1
11
11
  ))
12
12
  ),
13
- content-fade-right: (
13
+ content-fade-left: (
14
14
  type: linear,
15
15
  angle: 270,
16
16
  stops: ((
17
- color: rgba(23, 23, 23, 0),
17
+ color: #171717,
18
18
  position: 0
19
19
  ), (
20
- color: #171717,
20
+ color: rgba(23, 23, 23, 0),
21
21
  position: 1
22
22
  ))
23
23
  ),
24
- content-fade-up: (
24
+ content-fade-right: (
25
25
  type: linear,
26
- angle: 180,
26
+ angle: 270,
27
27
  stops: ((
28
28
  color: rgba(23, 23, 23, 0),
29
29
  position: 0
package/foundations/variables/gradientsDnLight.scss CHANGED
@@ -1,29 +1,29 @@
1
1
  $gradientsDnLight: (
2
- content-fade-left: (
2
+ content-fade-up: (
3
3
  type: linear,
4
- angle: 270,
4
+ angle: 180,
5
5
  stops: ((
6
- color: #ffffff,
6
+ color: rgba(255, 255, 255, 0),
7
7
  position: 0
8
8
  ), (
9
- color: rgba(255, 255, 255, 0),
9
+ color: #ffffff,
10
10
  position: 1
11
11
  ))
12
12
  ),
13
- content-fade-right: (
13
+ content-fade-left: (
14
14
  type: linear,
15
15
  angle: 270,
16
16
  stops: ((
17
- color: rgba(255, 255, 255, 0),
17
+ color: #ffffff,
18
18
  position: 0
19
19
  ), (
20
- color: #ffffff,
20
+ color: rgba(255, 255, 255, 0),
21
21
  position: 1
22
22
  ))
23
23
  ),
24
- content-fade-up: (
24
+ content-fade-right: (
25
25
  type: linear,
26
- angle: 180,
26
+ angle: 270,
27
27
  stops: ((
28
28
  color: rgba(255, 255, 255, 0),
29
29
  position: 0
package/foundations/variables/gradientsList.scss CHANGED
@@ -1,4 +1,4 @@
1
+ $ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
1
2
  $ds-gradient-content-fade-left: var(--ds-gradient-content-fade-left);
2
3
  $ds-gradient-content-fade-right: var(--ds-gradient-content-fade-right);
3
- $ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
4
4
  $ds-gradient-content-fade-down: var(--ds-gradient-content-fade-down);
package/foundations/variables/shadowsDnDark.scss CHANGED
@@ -6,6 +6,13 @@ $shadowsDnDark: (
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.25)
8
8
  ),
9
+ elevation-lg: (
10
+ x: 0,
11
+ y: 4,
12
+ blur: 16,
13
+ spread: 0,
14
+ color: rgba(13, 13, 13, 0.25)
15
+ ),
9
16
  elevation-sm: (
10
17
  x: 0,
11
18
  y: 2,
@@ -19,12 +26,5 @@ $shadowsDnDark: (
19
26
  blur: 8,
20
27
  spread: 0,
21
28
  color: rgba(13, 13, 13, 0.25)
22
- ),
23
- elevation-lg: (
24
- x: 0,
25
- y: 4,
26
- blur: 16,
27
- spread: 0,
28
- color: rgba(13, 13, 13, 0.25)
29
29
  )
30
30
  );
package/foundations/variables/shadowsDnLight.scss CHANGED
@@ -6,6 +6,13 @@ $shadowsDnLight: (
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.15)
8
8
  ),
9
+ elevation-lg: (
10
+ x: 0,
11
+ y: 4,
12
+ blur: 16,
13
+ spread: 0,
14
+ color: rgba(13, 13, 13, 0.15)
15
+ ),
9
16
  elevation-sm: (
10
17
  x: 0,
11
18
  y: 2,
@@ -19,12 +26,5 @@ $shadowsDnLight: (
19
26
  blur: 8,
20
27
  spread: 0,
21
28
  color: rgba(13, 13, 13, 0.15)
22
- ),
23
- elevation-lg: (
24
- x: 0,
25
- y: 4,
26
- blur: 16,
27
- spread: 0,
28
- color: rgba(13, 13, 13, 0.15)
29
29
  )
30
30
  );
package/foundations/variables/shadowsList.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
2
+ $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
2
3
  $ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
3
4
  $ds-shadow-elevation-md: --ds-shadow-elevation-md;
4
- $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
package/foundations/variables/typographyList.scss CHANGED
@@ -1,54 +1,54 @@
1
- $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
2
- $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
3
- $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
4
- $ds-typography-expressive-heading-md: 'expressive-heading-md';
5
- $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
6
- $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
1
+ $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
7
2
  $ds-typography-expressive-body-sm: 'expressive-body-sm';
8
- $ds-typography-expressive-body-md: 'expressive-body-md';
9
3
  $ds-typography-expressive-body-lg: 'expressive-body-lg';
4
+ $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
5
+ $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
6
+ $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
7
+ $ds-typography-expressive-heading-md: 'expressive-heading-md';
10
8
  $ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
11
- $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
9
+ $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
10
+ $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
11
+ $ds-typography-expressive-body-md: 'expressive-body-md';
12
12
  $ds-typography-functional-heading-xxs: 'functional-heading-xxs';
13
- $ds-typography-functional-heading-xs: 'functional-heading-xs';
14
- $ds-typography-functional-heading-sm: 'functional-heading-sm';
15
- $ds-typography-functional-heading-md: 'functional-heading-md';
16
13
  $ds-typography-functional-heading-lg: 'functional-heading-lg';
17
- $ds-typography-functional-heading-xl: 'functional-heading-xl';
14
+ $ds-typography-functional-heading-xs: 'functional-heading-xs';
15
+ $ds-typography-functional-meta-sm: 'functional-meta-sm';
18
16
  $ds-typography-functional-label-sm: 'functional-label-sm';
19
- $ds-typography-functional-label-md: 'functional-label-md';
17
+ $ds-typography-functional-meta-md: 'functional-meta-md';
18
+ $ds-typography-functional-heading-sm: 'functional-heading-sm';
20
19
  $ds-typography-functional-body-sm: 'functional-body-sm';
20
+ $ds-typography-functional-ingress-md: 'functional-ingress-md';
21
21
  $ds-typography-functional-body-md: 'functional-body-md';
22
+ $ds-typography-functional-heading-md: 'functional-heading-md';
23
+ $ds-typography-functional-label-md: 'functional-label-md';
24
+ $ds-typography-functional-heading-xl: 'functional-heading-xl';
22
25
  $ds-typography-functional-body-lg: 'functional-body-lg';
23
- $ds-typography-functional-meta-sm: 'functional-meta-sm';
24
- $ds-typography-functional-meta-md: 'functional-meta-md';
25
26
  $ds-typography-functional-ingress-sm: 'functional-ingress-sm';
26
- $ds-typography-functional-ingress-md: 'functional-ingress-md';
27
- $ds-typography-detail-dropcap: 'detail-dropcap';
28
- $ds-typography-detail-gameheader: 'detail-gameheader';
29
- $ds-typography-detail-medryckare: 'detail-medryckare';
30
- $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
31
- $ds-typography-detail-direkt-header: 'detail-direkt-header';
32
- $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
33
- $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
34
- $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
35
- $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
36
27
  $ds-typography-detail-teaser-large: 'detail-teaser-large';
37
- $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
38
- $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
39
- $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
40
- $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
41
- $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
42
- $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
43
28
  $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
44
29
  $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
45
- $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
30
+ $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
31
+ $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
32
+ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
46
33
  $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
34
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
47
35
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
36
+ $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
37
+ $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
38
+ $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
39
+ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
40
+ $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
41
+ $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
42
+ $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
43
+ $ds-typography-detail-medryckare: 'detail-medryckare';
44
+ $ds-typography-detail-article-quote: 'detail-article-quote';
48
45
  $ds-typography-detail-article-standard: 'detail-article-standard';
49
- $ds-typography-detail-article-opinion: 'detail-article-opinion';
46
+ $ds-typography-detail-article-direkt: 'detail-article-direkt';
50
47
  $ds-typography-detail-article-longread: 'detail-article-longread';
51
48
  $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
52
- $ds-typography-detail-article-direkt: 'detail-article-direkt';
53
49
  $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
54
- $ds-typography-detail-article-quote: 'detail-article-quote';
50
+ $ds-typography-detail-article-opinion: 'detail-article-opinion';
51
+ $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
52
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
53
+ $ds-typography-detail-gameheader: 'detail-gameheader';
54
+ $ds-typography-detail-dropcap: 'detail-dropcap';