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

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 +17 -0
  2. package/components/teaser-standard/README.md +18 -3
  3. package/components/teaser-standard/teaser-standard.js +53 -0
  4. package/foundations/variables/typographyTokensScreenExtraLarge.scss +39 -39
  5. package/foundations/variables/typographyTokensScreenLarge.scss +24 -24
  6. package/foundations/variables/typographyTokensScreenSmall.scss +5 -5
  7. 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.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
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.0.0-alpha.92](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.91...@bonniernews/dn-design-system-web@3.0.0-alpha.92) (2023-06-08)
15
+
16
+
17
+ ### Features
18
+
19
+ * **web:** add js-rendered teaser-standard ([#873](https://github.com/BonnierNews/dn-design-system/issues/873)) ([4cabd62](https://github.com/BonnierNews/dn-design-system/commit/4cabd6242afd5e717fd2a6758724e92d68340130))
20
+
21
+
22
+
6
23
  ## [3.0.0-alpha.91](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.90...@bonniernews/dn-design-system-web@3.0.0-alpha.91) (2023-06-07)
7
24
 
8
25
 
package/components/teaser-standard/README.md CHANGED
@@ -29,11 +29,9 @@
29
29
  |~forcePx~ | | | | | Not supported |
30
30
 
31
31
  ## Minimum requirement example
32
-
33
- ### Nunjucks
34
-
35
32
  These are copy paste friendly examples to quickliy get started using a component.
36
33
 
34
+ ### Nunjucks
37
35
  ```html
38
36
  {% from '@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard.njk' import TeaserStandard %}
39
37
 
@@ -48,3 +46,20 @@ These are copy paste friendly examples to quickliy get started using a component
48
46
  ```scss
49
47
  @use "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard" as *;
50
48
  ```
49
+
50
+ ### Javascript
51
+ This version is rarely used to render a teaser dynamically in the browser. For example, it is used to render reserv-teasers in failover. This version **ONLY** supports the `title`, `text`, `targetLink`, `classNames` and `attributes` parameters.
52
+
53
+ ```javascript
54
+ import { dsTeaserStandard } from "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard";
55
+
56
+ // NB: javascript only supports a subset of all parameters
57
+ const parameters = {
58
+ title: "Upp på börsen",
59
+ text: "Det ser ganska normalt ut på Stockholmsbörsen",
60
+ targetLink: "https://www.dn.se/ekonomi/",
61
+ attributes: { "data-test" : "test-value" }
62
+ }
63
+
64
+ const teaserStandardHtml = dsTeaserStandard(parameters);
65
+ ```
package/components/teaser-standard/teaser-standard.js ADDED
@@ -0,0 +1,53 @@
1
+ export {
2
+ dsTeaserStandard,
3
+ dsTeaserStandardStory
4
+ };
5
+
6
+ function dsTeaserStandard(params = {}) {
7
+ const teaser = document.createElement("a");
8
+ // NOTE: this should match output of teaser-standard.njk for a subset of the parameters
9
+ teaser.innerHTML = `
10
+ <div class="ds-teaser__content">
11
+ <div class="ds-teaser__title"></div>
12
+ <p class="ds-teaser__text">
13
+ <span class="ds-teaser-dot"></span>
14
+ </p>
15
+ </div>`;
16
+ teaser.classList.add("ds-teaser");
17
+ teaser.classList.add("ds-teaser--standard");
18
+
19
+ if (params.targetLink) {
20
+ teaser.setAttribute("href", params.targetLink)
21
+ }
22
+
23
+ if (params.title) {
24
+ const titleEl = teaser.getElementsByClassName("ds-teaser__title")[0];
25
+ titleEl.textContent = params.title;
26
+ }
27
+
28
+ if (params.text) {
29
+ const textEl = teaser.getElementsByClassName("ds-teaser__text")[0];
30
+ textEl.appendChild(document.createTextNode(params.text))
31
+ }
32
+
33
+ if (params.classNames) {
34
+ teaser.classList.add(params.classNames);
35
+ }
36
+
37
+ if (params.attributes) {
38
+ for (const [key, value] of Object.entries(params.attributes)) {
39
+ teaser.setAttribute(key, value);
40
+ }
41
+ }
42
+
43
+ return teaser;
44
+ }
45
+
46
+ /** only use in storybook */
47
+ function dsTeaserStandardStory() {
48
+ const jsTeasers = Array.from(document.getElementsByClassName("js-ds-teaser-standard-story"));
49
+ jsTeasers.forEach((teaserEl) => {
50
+ const params = JSON.parse(teaserEl.getAttribute("data-params"));
51
+ teaserEl.replaceWith(dsTeaserStandard(params));
52
+ });
53
+ }
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -1,4 +1,43 @@
1
1
  $typographyTokensScreenExtraLarge: (
2
+ expressive-heading03regular: (
3
+ fontFamily: "DN Serif",
4
+ fontWeight: Regular,
5
+ fontSize: 36,
6
+ lineHeight: 40
7
+ ),
8
+ expressive-heading03semibold: (
9
+ fontFamily: "DN Serif",
10
+ fontWeight: SemiBold,
11
+ fontSize: 36,
12
+ lineHeight: 40
13
+ ),
14
+ expressive-heading03bold: (
15
+ fontFamily: "DN Serif",
16
+ fontWeight: Bold,
17
+ fontSize: 36,
18
+ lineHeight: 40
19
+ ),
20
+ expressive-heading03italicregular: (
21
+ fontSize: 36,
22
+ lineHeight: 40,
23
+ fontWeight: Regular,
24
+ fontFamily: "DN Serif Italic",
25
+ fontStyle: italic
26
+ ),
27
+ expressive-heading03italicsemibold: (
28
+ fontSize: 36,
29
+ lineHeight: 40,
30
+ fontWeight: SemiBold,
31
+ fontFamily: "DN Serif Italic",
32
+ fontStyle: italic
33
+ ),
34
+ expressive-heading03italicbold: (
35
+ fontSize: 36,
36
+ lineHeight: 40,
37
+ fontWeight: Bold,
38
+ fontFamily: "DN Serif Italic",
39
+ fontStyle: italic
40
+ ),
2
41
  expressive-heading04regular: (
3
42
  fontFamily: "DN Serif",
4
43
  fontWeight: Regular,
@@ -156,45 +195,6 @@ $typographyTokensScreenExtraLarge: (
156
195
  fontFamily: "DN Serif Italic",
157
196
  fontStyle: italic
158
197
  ),
159
- expressive-heading03regular: (
160
- fontFamily: "DN Serif",
161
- fontWeight: Regular,
162
- fontSize: 36,
163
- lineHeight: 40
164
- ),
165
- expressive-heading03semibold: (
166
- fontFamily: "DN Serif",
167
- fontWeight: SemiBold,
168
- fontSize: 36,
169
- lineHeight: 40
170
- ),
171
- expressive-heading03bold: (
172
- fontFamily: "DN Serif",
173
- fontWeight: Bold,
174
- fontSize: 36,
175
- lineHeight: 40
176
- ),
177
- expressive-heading03italicregular: (
178
- fontSize: 36,
179
- lineHeight: 40,
180
- fontWeight: Regular,
181
- fontFamily: "DN Serif Italic",
182
- fontStyle: italic
183
- ),
184
- expressive-heading03italicsemibold: (
185
- fontSize: 36,
186
- lineHeight: 40,
187
- fontWeight: SemiBold,
188
- fontFamily: "DN Serif Italic",
189
- fontStyle: italic
190
- ),
191
- expressive-heading03italicbold: (
192
- fontSize: 36,
193
- lineHeight: 40,
194
- fontWeight: Bold,
195
- fontFamily: "DN Serif Italic",
196
- fontStyle: italic
197
- ),
198
198
  functional-heading01regular: (
199
199
  fontFamily: "DN Sans",
200
200
  fontWeight: Regular,
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: 36,
85
- lineHeight: 40
84
+ fontSize: 24,
85
+ lineHeight: 28
86
86
  ),
87
87
  expressive-heading03semibold: (
88
88
  fontFamily: "DN Serif",
89
89
  fontWeight: SemiBold,
90
- fontSize: 36,
91
- lineHeight: 40
90
+ fontSize: 24,
91
+ lineHeight: 28
92
92
  ),
93
93
  expressive-heading03bold: (
94
94
  fontFamily: "DN Serif",
95
95
  fontWeight: Bold,
96
- fontSize: 36,
97
- lineHeight: 40
96
+ fontSize: 24,
97
+ lineHeight: 28
98
98
  ),
99
99
  expressive-heading03italicregular: (
100
- fontSize: 36,
101
- lineHeight: 40,
100
+ fontSize: 24,
101
+ lineHeight: 28,
102
102
  fontWeight: Regular,
103
103
  fontFamily: "DN Serif Italic",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
- fontSize: 36,
108
- lineHeight: 40,
107
+ fontSize: 24,
108
+ lineHeight: 28,
109
109
  fontWeight: SemiBold,
110
110
  fontFamily: "DN Serif Italic",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
- fontSize: 36,
115
- lineHeight: 40,
114
+ fontSize: 24,
115
+ lineHeight: 28,
116
116
  fontWeight: Bold,
117
117
  fontFamily: "DN Serif Italic",
118
118
  fontStyle: italic
@@ -120,38 +120,38 @@ $typographyTokensScreenLarge: (
120
120
  expressive-heading04regular: (
121
121
  fontFamily: "DN Serif",
122
122
  fontWeight: Regular,
123
- fontSize: 48,
124
- lineHeight: 52
123
+ fontSize: 40,
124
+ lineHeight: 44
125
125
  ),
126
126
  expressive-heading04semibold: (
127
127
  fontFamily: "DN Serif",
128
128
  fontWeight: SemiBold,
129
- fontSize: 48,
130
- lineHeight: 52
129
+ fontSize: 40,
130
+ lineHeight: 44
131
131
  ),
132
132
  expressive-heading04bold: (
133
133
  fontFamily: "DN Serif",
134
134
  fontWeight: Bold,
135
- fontSize: 48,
136
- lineHeight: 52
135
+ fontSize: 40,
136
+ lineHeight: 44
137
137
  ),
138
138
  expressive-heading04italicregular: (
139
- fontSize: 48,
139
+ fontSize: 40,
140
140
  fontWeight: Regular,
141
141
  fontFamily: "DN Serif Italic",
142
- lineHeight: 52,
142
+ lineHeight: 44,
143
143
  fontStyle: italic
144
144
  ),
145
145
  expressive-heading04italicsemibold: (
146
- fontSize: 48,
147
- lineHeight: 52,
146
+ fontSize: 40,
147
+ lineHeight: 44,
148
148
  fontWeight: SemiBold,
149
149
  fontFamily: "DN Serif Italic",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
- fontSize: 48,
154
- lineHeight: 52,
153
+ fontSize: 40,
154
+ lineHeight: 44,
155
155
  fontWeight: Bold,
156
156
  fontFamily: "DN Serif Italic",
157
157
  fontStyle: italic
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -83,8 +83,8 @@ $typographyTokensScreenSmall: (
83
83
  expressive-heading03regular: (
84
84
  fontFamily: "DN Serif",
85
85
  fontWeight: Regular,
86
- lineHeight: 24,
87
- fontSize: 20
86
+ fontSize: 20,
87
+ lineHeight: 24
88
88
  ),
89
89
  expressive-heading03semibold: (
90
90
  fontFamily: "DN Serif",
@@ -99,24 +99,24 @@ $typographyTokensScreenSmall: (
99
99
  lineHeight: 24
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
- fontFamily: "DN Serif Italic",
103
102
  fontSize: 22,
104
103
  lineHeight: 26,
105
104
  fontWeight: Regular,
105
+ fontFamily: "DN Serif Italic",
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicsemibold: (
109
- fontFamily: "DN Serif Italic",
110
109
  fontSize: 22,
111
110
  lineHeight: 26,
112
111
  fontWeight: SemiBold,
112
+ fontFamily: "DN Serif Italic",
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
- fontFamily: "DN Serif Italic",
117
116
  fontSize: 22,
118
117
  lineHeight: 26,
119
118
  fontWeight: Bold,
119
+ fontFamily: "DN Serif Italic",
120
120
  fontStyle: italic
121
121
  ),
122
122
  expressive-heading04regular: (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.91",
3
+ "version": "3.0.0-alpha.93",
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",