@bonniernews/dn-design-system-web 3.0.0-alpha.84 → 3.0.0-alpha.85

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 (4) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/components/teaser-large/teaser-large.njk +22 -19
  3. package/components/teaser-large/teaser-large.scss +19 -45
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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.85](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.84...@bonniernews/dn-design-system-web@3.0.0-alpha.85) (2023-06-05)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **web:** gubbe alltid bredvid rubbe ([#863](https://github.com/BonnierNews/dn-design-system/issues/863)) ([59b6842](https://github.com/BonnierNews/dn-design-system/commit/59b68425f4e914f5859ca946b5250030bde2c018))
12
+
13
+
14
+
6
15
  ## [3.0.0-alpha.84](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.83...@bonniernews/dn-design-system-web@3.0.0-alpha.84) (2023-06-05)
7
16
 
8
17
 
package/components/teaser-large/teaser-large.njk CHANGED
@@ -62,27 +62,30 @@
62
62
  {% endif %}
63
63
 
64
64
  <div class="{{ componentClassName + '__content'}}">
65
- {% if params.vignette %}
66
- <div class="ds-teaser__vignette">{{ params.vignette }}</div>
67
- {% endif %}
68
- <h2 class="ds-teaser__title">
69
- {% if params.highlight %}
70
- <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
65
+ <div class="ds-teaser__content-inner">
66
+ {% if params.vignette %}
67
+ <div class="ds-teaser__vignette">{{ params.vignette }}</div>
71
68
  {% endif %}
72
- {{ params.title }}
73
- </h2>
74
-
75
- {% if params.text and params.areaType !== "right" %}
76
- <p class="{{ componentClassName + '__text' }}">
77
- {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
78
- {% if params.sticker %}
79
- <span class="ds-teaser__sticker">
80
- {{ params.sticker }}
81
- </span>
69
+ <h2 class="ds-teaser__title">
70
+ {% if params.highlight %}
71
+ <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
82
72
  {% endif %}
83
- {{ params.text}}
84
- </p>
85
- {% endif %}
73
+ {{ params.title }}
74
+ </h2>
75
+
76
+ {% if params.text and params.areaType !== "right" %}
77
+ <p class="{{ componentClassName + '__text' }}">
78
+ {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
79
+ {% if params.sticker %}
80
+ <span class="ds-teaser__sticker">
81
+ {{ params.sticker }}
82
+ </span>
83
+ {% endif %}
84
+ {{ params.text }}
85
+ </p>
86
+ {% endif %}
87
+ </div>
88
+
86
89
  {% if params.bylineHtml %}
87
90
  <div class="{{ componentClassName + '__byline'}}">
88
91
  {{ params.bylineHtml | safe }}
package/components/teaser-large/teaser-large.scss CHANGED
@@ -2,7 +2,8 @@
2
2
  @use "../../assets/teaser/teaser.scss" as *;
3
3
 
4
4
  .ds-teaser.ds-teaser--large {
5
- display: block;
5
+ display: flex;
6
+ flex-direction: column;
6
7
  position: relative;
7
8
 
8
9
  .ds-teaser__media {
@@ -12,10 +13,8 @@
12
13
  }
13
14
 
14
15
  .ds-teaser__content {
15
- flex: 1;
16
- display: grid;
17
- grid-auto-rows: auto;
18
- grid-template-columns: 1fr auto;
16
+ display: flex;
17
+ flex-direction: row;
19
18
  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
20
19
 
21
20
  // Special case for large teaser, should be replaced with dynamic spacing layout token when available
@@ -25,6 +24,12 @@
25
24
  @include ds-mq-smallest-breakpoint(tablet) {
26
25
  padding-bottom: ds-spacing-component($ds-sc-x4);
27
26
  }
27
+
28
+ .ds-teaser__content-inner {
29
+ display: flex;
30
+ flex-direction: column;
31
+ flex: 1;
32
+ }
28
33
  }
29
34
 
30
35
  &:focus-visible {
@@ -35,13 +40,7 @@
35
40
  }
36
41
  }
37
42
 
38
- .ds-teaser__vignette {
39
- grid-column: 1;
40
- }
41
-
42
43
  .ds-teaser__title {
43
- grid-row: 1;
44
- grid-column: 1 / span 1;
45
44
  @include ds-typography($ds-typography-expressive-heading04bold);
46
45
  }
47
46
 
@@ -51,35 +50,10 @@
51
50
  }
52
51
  }
53
52
 
54
- .ds-teaser__vignette + .ds-teaser__title {
55
- grid-row: 2;
56
- }
57
-
58
- .ds-teaser__text {
59
- grid-row: 3;
60
- }
61
-
62
53
  &.ds-teaser--large-big-italic {
63
54
  .ds-teaser__title {
64
55
  @include ds-typography($ds-typography-expressive-heading04italicregular);
65
56
  }
66
-
67
- @include ds-mq-largest-breakpoint(mobile) {
68
- .ds-teaser__title {
69
- grid-column-end: span 2;
70
- }
71
-
72
- .ds-teaser__byline {
73
- grid-row: 3;
74
- margin-top: ds-spacing-component($ds-sc-x2);
75
- }
76
- }
77
-
78
- @include ds-mq-smallest-breakpoint(tablet) {
79
- .ds-teaser__title {
80
- grid-column-end: span 1;
81
- }
82
- }
83
57
  }
84
58
 
85
59
  &.ds-teaser--large-italic {
@@ -95,11 +69,10 @@
95
69
  }
96
70
 
97
71
  .ds-teaser__byline {
98
- grid-column: 2;
99
- grid-row: 1 / span 3;
100
72
  overflow: hidden;
101
73
  position: relative;
102
74
  margin-left: ds-spacing-component($ds-sc-x4);
75
+
103
76
  // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
104
77
  @include ds-mq-only-breakpoint(mobile) {
105
78
  margin-bottom: ds-spacing-component($ds-sc-x3, "px", true);
@@ -112,9 +85,9 @@
112
85
  position: absolute;
113
86
  top: 0;
114
87
  right: 0;
115
- @include ds-spacing-layout($ds-sl-teaser-vertical, bottom, "px", true);
88
+ bottom: 0;
116
89
  width: 100%;
117
- min-width: 104px;
90
+ min-width: 96px;
118
91
  margin: 0;
119
92
 
120
93
  > .picture__img {
@@ -125,15 +98,16 @@
125
98
  }
126
99
 
127
100
  @include ds-mq-largest-breakpoint(mobile) {
128
- width: 104px;
129
- min-height: 85px;
101
+ width: 96px;
102
+ min-height: 96px;
130
103
  margin-left: ds-spacing-component($ds-sc-x2);
131
104
  }
132
105
 
133
106
  @include ds-mq-smallest-breakpoint(tablet) {
134
- width: 156px;
107
+ width: 144px;
135
108
  // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
136
109
  min-height: 110px;
110
+ margin-left: ds-spacing-component($ds-sc-x4);
137
111
  }
138
112
  }
139
113
 
@@ -156,8 +130,8 @@
156
130
  }
157
131
 
158
132
  .ds-teaser__byline {
159
- width: 104px;
160
- min-height: 85px;
133
+ width: 96px;
134
+ min-height: 96px;
161
135
  margin-left: ds-spacing-component($ds-sc-x2);
162
136
  }
163
137
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.84",
3
+ "version": "3.0.0-alpha.85",
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",