@bonniernews/dn-design-system-web 14.0.0 → 14.0.2

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 (7) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/components/teaser-standard/README.md +1 -0
  3. package/components/teaser-standard/teaser-standard.njk +1 -1
  4. package/components/teaser-standard/teaser-standard.scss +8 -10
  5. package/foundations/variables/typographyTokensScreenExtraLarge.scss +42 -43
  6. package/foundations/variables/typographyTokensScreenLarge.scss +7 -7
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [14.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.1...@bonniernews/dn-design-system-web@14.0.2) (2024-03-06)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** handle square image in teaser standard ([#1231](https://github.com/BonnierNews/dn-design-system/issues/1231)) ([13934cb](https://github.com/BonnierNews/dn-design-system/commit/13934cba7447dd04d0129dd7dd380b63681cb7c5))
13
+ * **web:** update typography tests ([#1230](https://github.com/BonnierNews/dn-design-system/issues/1230)) ([652247f](https://github.com/BonnierNews/dn-design-system/commit/652247f7b9c8f982fe653ff024ea973266ddd9d7))
14
+
15
+ ## [14.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.0...@bonniernews/dn-design-system-web@14.0.1) (2024-03-04)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **app:** button hitslop ([#1229](https://github.com/BonnierNews/dn-design-system/issues/1229)) ([7a0308d](https://github.com/BonnierNews/dn-design-system/commit/7a0308d2ca0c6de7de3ce125a700c56f90afc908))
21
+ * **app:** top bar button check for iconName ([#1225](https://github.com/BonnierNews/dn-design-system/issues/1225)) ([c892d83](https://github.com/BonnierNews/dn-design-system/commit/c892d832e8b0f836890fb00a45eb9cfcab455685))
22
+
23
+
24
+ ### Maintenance
25
+
26
+ * **foundations:** update tokens from Figma ([#1226](https://github.com/BonnierNews/dn-design-system/issues/1226)) ([141a590](https://github.com/BonnierNews/dn-design-system/commit/141a5903bd20ca7346d219ba204f7ad72064eb36))
27
+ * prerelease packages ([7336b86](https://github.com/BonnierNews/dn-design-system/commit/7336b86db6c3c76f0c816fea7ea364cc39ab6e34))
28
+ * prerelease packages ([5afe298](https://github.com/BonnierNews/dn-design-system/commit/5afe298d749b9ee6c37a792f63148ac1768eddc5))
29
+ * prerelease packages ([c534f5a](https://github.com/BonnierNews/dn-design-system/commit/c534f5afea93fbec24fe410caf8396371f72735a))
30
+
7
31
  ## [14.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@13.0.0...@bonniernews/dn-design-system-web@14.0.0) (2024-02-29)
8
32
 
9
33
 
package/components/teaser-standard/README.md CHANGED
@@ -27,6 +27,7 @@
27
27
  |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
28
28
  |publicationTime | string | no | | null | Publication time text. |
29
29
  |duration | string | no | | null | Duration of podcast. |
30
+ |isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |
30
31
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
31
32
  |classNames | String | no | | | Ex. "my-special-class" |
32
33
  |~forcePx~ | | | | | Not supported |
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  <div class="{{ componentClassName + '__content'}}">
36
36
  {% if params.mediaHtml %}
37
- <div class="{{ componentClassName + '__media'}}">
37
+ <div class="{{ componentClassName + '__media'}} {{ componentClassName + '__media--square-image' if params.isSquareImage}}">
38
38
  {{ params.mediaHtml }}
39
39
  {% if params.isLocked %}
40
40
  {{ VipBadge({
package/components/teaser-standard/teaser-standard.scss CHANGED
@@ -72,17 +72,15 @@
72
72
  }
73
73
  }
74
74
 
75
- &.ds-teaser--podcast {
76
- .ds-teaser__media {
77
- @include ds-mq-only-breakpoint(mobile) {
78
- min-width: 80px;
79
- max-width: 80px;
80
- }
75
+ .ds-teaser__media--square-image {
76
+ @include ds-mq-only-breakpoint(mobile) {
77
+ min-width: 80px;
78
+ max-width: 80px;
79
+ }
81
80
 
82
- @include ds-mq-smallest-breakpoint(tablet) {
83
- min-width: 124px;
84
- max-width: 124px;
85
- }
81
+ @include ds-mq-smallest-breakpoint(tablet) {
82
+ min-width: 124px;
83
+ max-width: 124px;
86
84
  }
87
85
  }
88
86
  }
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -50,25 +50,18 @@ $typographyTokensScreenExtraLarge: (
50
50
  fontSize: 48,
51
51
  letterSpacing: 0
52
52
  ),
53
- detaildropcap: (
54
- fontFamily: "DN Serif Display",
55
- fontWeight: Bold,
56
- lineHeight: 1,
57
- fontSize: 92,
58
- letterSpacing: 0
59
- ),
60
- detailarticle-quote: (
53
+ detailteaser-large: (
61
54
  fontFamily: "DN Serif Display",
62
55
  fontWeight: Bold,
63
- lineHeight: 1.2,
64
- fontSize: 28,
56
+ lineHeight: 1.1,
57
+ fontSize: 56,
65
58
  letterSpacing: 0
66
59
  ),
67
- detailmellanrubrik: (
68
- fontFamily: "DN Serif Display",
60
+ detailteaser-standard: (
61
+ fontFamily: "DN Serif Headline",
69
62
  fontWeight: Bold,
70
63
  lineHeight: 1.1,
71
- fontSize: 32,
64
+ fontSize: 36,
72
65
  letterSpacing: 0
73
66
  ),
74
67
  detailteaser-standard-compact: (
@@ -78,6 +71,20 @@ $typographyTokensScreenExtraLarge: (
78
71
  fontSize: 24,
79
72
  letterSpacing: 0
80
73
  ),
74
+ detailteaser-large-compact: (
75
+ fontFamily: "DN Serif Display",
76
+ fontWeight: Bold,
77
+ fontSize: 40,
78
+ lineHeight: 1.1,
79
+ letterSpacing: 0
80
+ ),
81
+ detailteaser-standard-opinion: (
82
+ fontFamily: "DN Serif Display",
83
+ fontWeight: Regular,
84
+ fontSize: 36,
85
+ lineHeight: 1.1,
86
+ fontStyle: italic
87
+ ),
81
88
  detailteaser-standard-compact-opinion: (
82
89
  fontFamily: "DN Serif Headline",
83
90
  fontWeight: Regular,
@@ -86,13 +93,6 @@ $typographyTokensScreenExtraLarge: (
86
93
  letterSpacing: 0,
87
94
  fontStyle: italic
88
95
  ),
89
- detailteaser-large: (
90
- fontFamily: "DN Serif Display",
91
- fontWeight: Bold,
92
- lineHeight: 1.1,
93
- fontSize: 56,
94
- letterSpacing: 0
95
- ),
96
96
  detailteaser-large-opinion: (
97
97
  fontFamily: "DN Serif Display",
98
98
  fontWeight: Regular,
@@ -108,18 +108,19 @@ $typographyTokensScreenExtraLarge: (
108
108
  fontSize: 56,
109
109
  letterSpacing: 0
110
110
  ),
111
- detailteaser-standard: (
112
- fontFamily: "DN Serif Headline",
113
- fontWeight: Bold,
114
- lineHeight: 1.1,
115
- fontSize: 36,
116
- letterSpacing: 0
117
- ),
118
- detailteaser-standard-opinion: (
111
+ detailteaser-large-storRubrik-opinion: (
119
112
  fontFamily: "DN Serif Display",
120
113
  fontWeight: Regular,
114
+ fontSize: 56,
121
115
  lineHeight: 1.1,
122
- fontSize: 36,
116
+ letterSpacing: 0,
117
+ fontStyle: italic
118
+ ),
119
+ detailteaser-large-compact-opinion: (
120
+ fontFamily: "DN Serif Headline",
121
+ fontWeight: Regular,
122
+ fontSize: 24,
123
+ lineHeight: 1.2,
123
124
  letterSpacing: 0,
124
125
  fontStyle: italic
125
126
  ),
@@ -130,28 +131,26 @@ $typographyTokensScreenExtraLarge: (
130
131
  fontSize: 22,
131
132
  letterSpacing: 0
132
133
  ),
133
- detailteaser-large-compact: (
134
+ detaildropcap: (
134
135
  fontFamily: "DN Serif Display",
135
136
  fontWeight: Bold,
136
- fontSize: 40,
137
- lineHeight: 1.1,
137
+ lineHeight: 1,
138
+ fontSize: 92,
138
139
  letterSpacing: 0
139
140
  ),
140
- detailteaser-large-compact-opinion: (
141
- fontFamily: "DN Serif Headline",
142
- fontWeight: Regular,
143
- fontSize: 24,
141
+ detailarticle-quote: (
142
+ fontFamily: "DN Serif Display",
143
+ fontWeight: Bold,
144
144
  lineHeight: 1.2,
145
- letterSpacing: 0,
146
- fontStyle: italic
145
+ fontSize: 28,
146
+ letterSpacing: 0
147
147
  ),
148
- detailteaser-large-storRubrik-opinion: (
148
+ detailmellanrubrik: (
149
149
  fontFamily: "DN Serif Display",
150
- fontWeight: Regular,
151
- fontSize: 56,
150
+ fontWeight: Bold,
152
151
  lineHeight: 1.1,
153
- letterSpacing: 0,
154
- fontStyle: italic
152
+ fontSize: 32,
153
+ letterSpacing: 0
155
154
  ),
156
155
  detailstandard-button: (
157
156
  fontFamily: "DN Sans",
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -90,14 +90,14 @@ $typographyTokensScreenLarge: (
90
90
  fontFamily: "DN Serif Display",
91
91
  fontWeight: Bold,
92
92
  lineHeight: 1.1,
93
- fontSize: 56,
93
+ fontSize: 40,
94
94
  letterSpacing: 0
95
95
  ),
96
96
  detailteaser-large-opinion: (
97
97
  fontFamily: "DN Serif Display",
98
98
  fontWeight: Regular,
99
99
  lineHeight: 1.1,
100
- fontSize: 36,
100
+ fontSize: 26,
101
101
  letterSpacing: 0,
102
102
  fontStyle: italic
103
103
  ),
@@ -105,21 +105,21 @@ $typographyTokensScreenLarge: (
105
105
  fontFamily: "DN Serif Display",
106
106
  fontWeight: Bold,
107
107
  lineHeight: 1.1,
108
- fontSize: 56,
108
+ fontSize: 40,
109
109
  letterSpacing: 0
110
110
  ),
111
111
  detailteaser-standard: (
112
112
  fontFamily: "DN Serif Headline",
113
113
  fontWeight: Bold,
114
114
  lineHeight: 1.1,
115
- fontSize: 36,
115
+ fontSize: 26,
116
116
  letterSpacing: 0
117
117
  ),
118
118
  detailteaser-standard-opinion: (
119
- fontFamily: "DN Serif Display",
119
+ fontFamily: "DN Serif Headline",
120
120
  fontWeight: Regular,
121
121
  lineHeight: 1.1,
122
- fontSize: 36,
122
+ fontSize: 26,
123
123
  letterSpacing: 0,
124
124
  fontStyle: italic
125
125
  ),
@@ -148,7 +148,7 @@ $typographyTokensScreenLarge: (
148
148
  detailteaser-large-storRubrik-opinion: (
149
149
  fontFamily: "DN Serif Display",
150
150
  fontWeight: Regular,
151
- fontSize: 56,
151
+ fontSize: 40,
152
152
  lineHeight: 1.1,
153
153
  letterSpacing: 0,
154
154
  fontStyle: italic
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "14.0.0",
3
+ "version": "14.0.2",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",