@bonniernews/dn-design-system-web 3.0.0-alpha.70 → 3.0.0-alpha.72

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 +18 -0
  2. package/assets/teaser/teaser.scss +4 -0
  3. package/components/teaser-large/teaser-large.scss +34 -9
  4. package/components/teaser-package/teaser-package.scss +5 -0
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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.72](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.71...@bonniernews/dn-design-system-web@3.0.0-alpha.72) (2023-05-30)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **web:** remove border from teaser in bautaXL ([#847](https://github.com/BonnierNews/dn-design-system/issues/847)) ([e7668d9](https://github.com/BonnierNews/dn-design-system/commit/e7668d92221a33ffc380a900bdc4f1bf869f2097))
12
+
13
+
14
+
15
+ ## [3.0.0-alpha.71](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.70...@bonniernews/dn-design-system-web@3.0.0-alpha.71) (2023-05-30)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** update teaser spacing and typography ([#846](https://github.com/BonnierNews/dn-design-system/issues/846)) ([8dbf030](https://github.com/BonnierNews/dn-design-system/commit/8dbf0300603a417f5c10c10a665d75f4a242fc05))
21
+
22
+
23
+
6
24
  ## [3.0.0-alpha.70](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.69...@bonniernews/dn-design-system-web@3.0.0-alpha.70) (2023-05-25)
7
25
 
8
26
 
package/assets/teaser/teaser.scss CHANGED
@@ -42,7 +42,11 @@
42
42
  .ds-teaser__text {
43
43
  @include ds-typography($ds-typography-detailmedryckare);
44
44
  color: $ds-color-text-primary;
45
+ // Should be replaced with dynamic spacing layout token when available
45
46
  margin: ds-spacing-component($ds-sc-x2 0 0);
47
+ @include ds-mq-smallest-breakpoint(tablet) {
48
+ margin-top: ds-spacing-component($ds-sc-x3);
49
+ }
46
50
  }
47
51
 
48
52
  .ds-teaser__sticker {
package/components/teaser-large/teaser-large.scss CHANGED
@@ -17,6 +17,14 @@
17
17
  grid-auto-rows: auto;
18
18
  grid-template-columns: 1fr auto;
19
19
  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
20
+
21
+ // Special case for large teaser, should be replaced with dynamic spacing layout token when available
22
+ @include ds-mq-only-breakpoint(mobile) {
23
+ padding-bottom: ds-spacing-component($ds-sc-x3);
24
+ }
25
+ @include ds-mq-smallest-breakpoint(tablet) {
26
+ padding-bottom: ds-spacing-component($ds-sc-x4);
27
+ }
20
28
  }
21
29
 
22
30
  .ds-teaser__vignette {
@@ -26,7 +34,24 @@
26
34
  .ds-teaser__title {
27
35
  grid-row: 1;
28
36
  grid-column: 1 / span 1;
29
- @include ds-typography($ds-typography-expressive-heading04bold);
37
+ @include ds-mq-only-breakpoint(mobile) {
38
+ @include ds-typography-without-mq(
39
+ $ds-typography-expressive-heading04bold,
40
+ mobile
41
+ );
42
+ }
43
+ @include ds-mq-only-breakpoint(tablet) {
44
+ @include ds-typography-without-mq(
45
+ $ds-typography-expressive-heading04bold,
46
+ tablet
47
+ );
48
+ }
49
+ @include ds-mq-only-breakpoint(desktop) {
50
+ @include ds-typography-without-mq(
51
+ $ds-typography-expressive-heading05bold,
52
+ desktop
53
+ );
54
+ }
30
55
  }
31
56
 
32
57
  @include ds-hover(true) {
@@ -81,16 +106,16 @@
81
106
  .ds-teaser__byline {
82
107
  grid-column: 2;
83
108
  grid-row: 1 / span 3;
84
-
109
+ overflow: hidden;
85
110
  position: relative;
86
111
  margin-left: ds-spacing-component($ds-sc-x4);
87
- @include ds-spacing-layout(
88
- $ds-sl-teaser-vertical,
89
- margin-bottom,
90
- "px",
91
- true
92
- );
93
- overflow: hidden;
112
+ // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
113
+ @include ds-mq-only-breakpoint(mobile) {
114
+ margin-bottom: ds-spacing-component($ds-sc-x3, "px", true);
115
+ }
116
+ @include ds-mq-smallest-breakpoint(tablet) {
117
+ margin-bottom: ds-spacing-component($ds-sc-x4, "px", true);
118
+ }
94
119
 
95
120
  .picture {
96
121
  position: absolute;
package/components/teaser-package/teaser-package.scss CHANGED
@@ -99,6 +99,11 @@
99
99
  .ds-teaser__text {
100
100
  color: $ds-color-static-white;
101
101
  }
102
+
103
+ & + .ds-teaser::after,
104
+ & + .ds-split-container::after {
105
+ display: none;
106
+ }
102
107
  }
103
108
  }
104
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.70",
3
+ "version": "3.0.0-alpha.72",
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",