@bonniernews/dn-design-system-web 3.0.0-alpha.93 → 3.0.0-alpha.95

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 (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/components/teaser-standard/teaser-standard.njk +12 -12
  3. package/components/teaser-standard/teaser-standard.scss +33 -9
  4. package/foundations/variables/typographyTokensScreenLarge.scss +12 -12
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.95](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.94...@bonniernews/dn-design-system-web@3.0.0-alpha.95) (2023-06-13)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **web:** float images in standard teasers ([#877](https://github.com/BonnierNews/dn-design-system/issues/877)) ([849996d](https://github.com/BonnierNews/dn-design-system/commit/849996d21fa0bd835a9b214e96b6a0fa18296466))
12
+
13
+
14
+
15
+ ## [3.0.0-alpha.94](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.93...@bonniernews/dn-design-system-web@3.0.0-alpha.94) (2023-06-12)
16
+
17
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
18
+
19
+
20
+
21
+
22
+
6
23
  ## [3.0.0-alpha.93](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.92...@bonniernews/dn-design-system-web@3.0.0-alpha.93) (2023-06-12)
7
24
 
8
25
  **Note:** Version bump only for package @bonniernews/dn-design-system-web
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -41,6 +41,18 @@
41
41
  }) }}
42
42
  {% endif %}
43
43
 
44
+ {% if params.mediaHtml %}
45
+ <div class="{{ componentClassName + '__media'}}">
46
+ {{ params.mediaHtml }}
47
+ {% if params.isLocked %}
48
+ {{ VipBadge({
49
+ showText: false,
50
+ forcePx: true
51
+ }) }}
52
+ {% endif %}
53
+ </div>
54
+ {% endif %}
55
+
44
56
  <div class="{{ componentClassName + '__content'}}">
45
57
  {% if params.vignette %}
46
58
  <div class="ds-teaser__vignette">{{ params.vignette }}</div>
@@ -65,17 +77,5 @@
65
77
  </p>
66
78
  {% endif %}
67
79
  </div>
68
-
69
- {% if params.mediaHtml %}
70
- <div class="{{ componentClassName + '__media'}}">
71
- {{ params.mediaHtml }}
72
- {% if params.isLocked %}
73
- {{ VipBadge({
74
- showText: false,
75
- forcePx: true
76
- }) }}
77
- {% endif %}
78
- </div>
79
- {% endif %}
80
80
  </a>
81
81
  {% endmacro %}
package/components/teaser-standard/teaser-standard.scss CHANGED
@@ -1,11 +1,14 @@
1
1
  @use "../../foundations/helpers/forward.helpers.scss" as *;
2
2
  @use "../../assets/teaser/teaser.scss" as *;
3
+ @use 'sass:math';
4
+
5
+ $ds-teaser-standard-image-width-mobile: 104px;
6
+ $ds-teaser-standard-image-width-tablet: 156px;
7
+ $ds-teaser-standard-image-width-desktop: 196px;
3
8
 
4
9
  .ds-teaser.ds-teaser--standard {
5
- display: flex;
6
10
  @include ds-spacing-layout(
7
- $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
8
- $ds-sl-teaser-vertical-medium
11
+ $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal 0
9
12
  );
10
13
 
11
14
  .ds-teaser__title {
@@ -16,21 +19,42 @@
16
19
  }
17
20
  }
18
21
 
22
+ .ds-teaser__media,
23
+ .ds-teaser__content {
24
+ @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
25
+ }
26
+
27
+ &,
28
+ .ds-teaser__text {
29
+ overflow: hidden;
30
+ }
31
+
32
+ .ds-teaser__content {
33
+ display: block;
34
+ }
35
+
19
36
  .ds-teaser__media {
37
+ @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
20
38
  margin-left: ds-spacing-component($ds-sc-x4);
39
+ float: right;
21
40
 
22
- @include ds-mq-largest-breakpoint(mobile) {
23
- min-width: 104px;
24
- max-width: 104px;
41
+ @include ds-mq-only-breakpoint(mobile) {
42
+ min-width: $ds-teaser-standard-image-width-mobile;
43
+ max-width: $ds-teaser-standard-image-width-mobile;
25
44
 
26
45
  .ds-teaser-image__byline {
27
46
  display: none;
28
47
  }
29
48
  }
30
49
 
31
- @include ds-mq-smallest-breakpoint(tablet) {
32
- min-width: 196px;
33
- max-width: 196px;
50
+ @include ds-mq-only-breakpoint(tablet) {
51
+ min-width: $ds-teaser-standard-image-width-tablet;
52
+ max-width: $ds-teaser-standard-image-width-tablet;
53
+ }
54
+
55
+ @include ds-mq-only-breakpoint(desktop) {
56
+ min-width: $ds-teaser-standard-image-width-desktop;
57
+ max-width: $ds-teaser-standard-image-width-desktop;
34
58
  }
35
59
 
36
60
  .teaser__video {
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -81,38 +81,38 @@ $typographyTokensScreenLarge: (
81
81
  expressive-heading03regular: (
82
82
  fontFamily: "DN Serif",
83
83
  fontWeight: Regular,
84
- fontSize: 24,
85
- lineHeight: 28
84
+ fontSize: 26,
85
+ lineHeight: 30
86
86
  ),
87
87
  expressive-heading03semibold: (
88
88
  fontFamily: "DN Serif",
89
89
  fontWeight: SemiBold,
90
- fontSize: 24,
91
- lineHeight: 28
90
+ fontSize: 26,
91
+ lineHeight: 30
92
92
  ),
93
93
  expressive-heading03bold: (
94
94
  fontFamily: "DN Serif",
95
95
  fontWeight: Bold,
96
- fontSize: 24,
97
- lineHeight: 28
96
+ fontSize: 26,
97
+ lineHeight: 30
98
98
  ),
99
99
  expressive-heading03italicregular: (
100
- fontSize: 24,
101
- lineHeight: 28,
100
+ fontSize: 26,
101
+ lineHeight: 30,
102
102
  fontWeight: Regular,
103
103
  fontFamily: "DN Serif Italic",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
- fontSize: 24,
108
- lineHeight: 28,
107
+ fontSize: 26,
108
+ lineHeight: 30,
109
109
  fontWeight: SemiBold,
110
110
  fontFamily: "DN Serif Italic",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
- fontSize: 24,
115
- lineHeight: 28,
114
+ fontSize: 26,
115
+ lineHeight: 30,
116
116
  fontWeight: Bold,
117
117
  fontFamily: "DN Serif Italic",
118
118
  fontStyle: italic
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.93",
3
+ "version": "3.0.0-alpha.95",
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",