@bonniernews/dn-design-system-web 32.3.0 → 32.3.1
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.
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.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.0...@bonniernews/dn-design-system-web@32.3.1) (2025-05-16)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **web:** change teaser counter to flex ([#1743](https://github.com/BonnierNews/dn-design-system/issues/1743)) ([94c8591](https://github.com/BonnierNews/dn-design-system/commit/94c8591a970a142105376b095dfb2662a0252dd1))
|
|
13
|
+
|
|
7
14
|
## [32.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.2.1...@bonniernews/dn-design-system-web@32.3.0) (2025-05-16)
|
|
8
15
|
|
|
9
16
|
|
|
@@ -23,7 +23,7 @@ The component will not include styling by itself. Make sure to include the right
|
|
|
23
23
|
classNames="test-class"
|
|
24
24
|
counterNumber={124}
|
|
25
25
|
counterText="DAGAR I <br> FÄNGELSE"
|
|
26
|
-
mediaHtml="<div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://
|
|
26
|
+
mediaHtml="<div class='picture picture--placeholder' style='aspect-ratio: 3 / 4;'><img class='picture__img' src='https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&crop=3:4,smart&height=184' alt='' aria-hidden='true'></div>"
|
|
27
27
|
subtitle="fängslad i Turkiet för sin journalistik"
|
|
28
28
|
title="Joakim Medin"
|
|
29
29
|
/>
|
|
@@ -60,10 +60,10 @@
|
|
|
60
60
|
{% endif %}
|
|
61
61
|
|
|
62
62
|
{% if params.mediaHtml %}
|
|
63
|
-
<div class="
|
|
63
|
+
<div class="ds-teaser__media">
|
|
64
64
|
{{ params.mediaHtml | safe }}
|
|
65
65
|
</div>
|
|
66
66
|
{% endif %}
|
|
67
67
|
|
|
68
68
|
{% endcall %}
|
|
69
|
-
{% endmacro %}
|
|
69
|
+
{% endmacro %}
|
|
@@ -7,9 +7,7 @@ a.ds-teaser--counter.ds-teaser {
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.ds-teaser--counter.ds-teaser {
|
|
10
|
-
display:
|
|
11
|
-
grid-template-columns: auto auto;
|
|
12
|
-
background-color: $ds-color-surface-primary;
|
|
10
|
+
display: flex;
|
|
13
11
|
gap: ds-spacing($ds-s-075);
|
|
14
12
|
padding: ds-spacing($ds-s-075);
|
|
15
13
|
|
|
@@ -70,27 +68,20 @@ a.ds-teaser--counter.ds-teaser {
|
|
|
70
68
|
@include ds-typography($ds-typography-functional-meta-md);
|
|
71
69
|
}
|
|
72
70
|
|
|
73
|
-
.ds-
|
|
74
|
-
display: flex;
|
|
75
|
-
justify-content: flex-end;
|
|
76
|
-
max-height: 130px;
|
|
77
|
-
min-height: 86px;
|
|
78
|
-
height: 100%;
|
|
79
|
-
margin: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.ds-teaser__media,
|
|
83
|
-
.ds-teaser--counter__media {
|
|
71
|
+
.ds-teaser__media {
|
|
84
72
|
display: flex;
|
|
85
73
|
justify-content: flex-end;
|
|
74
|
+
width: auto;
|
|
86
75
|
}
|
|
87
76
|
|
|
88
77
|
// Mobile width is hardcoded based on 2 rows of text content and desktop for 1 row
|
|
89
78
|
.picture--placeholder {
|
|
90
79
|
max-height: 82px;
|
|
80
|
+
min-width: 62px;
|
|
91
81
|
|
|
92
82
|
@include ds-mq-only-breakpoint(mobile) {
|
|
93
83
|
max-height: 92px;
|
|
84
|
+
min-width: 69px;
|
|
94
85
|
}
|
|
95
86
|
}
|
|
96
87
|
|
package/package.json
CHANGED