@bonniernews/dn-design-system-web 20.4.0 → 20.4.2

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 (8) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/components/pagination/pagination.njk +5 -4
  3. package/components/pagination/pagination.scss +1 -0
  4. package/foundations/variables/colorsDnDarkTokens.scss +1 -1
  5. package/foundations/variables/typographyTokensScreenExtraLarge.scss +8 -7
  6. package/foundations/variables/typographyTokensScreenLarge.scss +6 -6
  7. package/package.json +1 -1
  8. package/tokens/colors-dark-mode.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,27 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [20.4.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.1...@bonniernews/dn-design-system-web@20.4.2) (2024-09-20)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** add aspect-ratio to slow img ([#1407](https://github.com/BonnierNews/dn-design-system/issues/1407)) ([468c932](https://github.com/BonnierNews/dn-design-system/commit/468c932d32a0685f7b0e8dc1d73652c5f959033f))
13
+ * **web:** pagination color css and aria attributes ([#1405](https://github.com/BonnierNews/dn-design-system/issues/1405)) ([5dafdbd](https://github.com/BonnierNews/dn-design-system/commit/5dafdbde6310b11557bdd52b732355c327158417))
14
+
15
+ ## [20.4.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.0...@bonniernews/dn-design-system-web@20.4.1) (2024-09-20)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** remove lint as it does not work with tsx files ([#1406](https://github.com/BonnierNews/dn-design-system/issues/1406)) ([e9c2243](https://github.com/BonnierNews/dn-design-system/commit/e9c2243d34fa2003dfa1b4e0bd03afed1f71a977))
21
+
22
+
23
+ ### Maintenance
24
+
25
+ * **foundations:** update tokens from Figma ([#1408](https://github.com/BonnierNews/dn-design-system/issues/1408)) ([34dbb45](https://github.com/BonnierNews/dn-design-system/commit/34dbb450850cd1dcfc93ef920aa46cd091b2629c))
26
+ * prerelease packages ([d095e1b](https://github.com/BonnierNews/dn-design-system/commit/d095e1becf26d464a670eba08340d1f9455f7c5a))
27
+
7
28
  ## [20.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.3.2...@bonniernews/dn-design-system-web@20.4.0) (2024-09-17)
8
29
 
9
30
 
package/components/pagination/pagination.njk CHANGED
@@ -12,7 +12,7 @@
12
12
  ] | join(" ") %}
13
13
  {%- set attributes = getAttributes(params.attributes) %}
14
14
  {%- set visiblePages = 5 %}
15
- <div class="{{ classes }}" {{- attributes | safe }}>
15
+ <nav class="{{ classes }}" {{- attributes | safe }}>
16
16
  {%- set prevClasses = [
17
17
  componentClassName + "__prev ",
18
18
  params.previousClassNames if params.previousClassNames
@@ -33,10 +33,11 @@
33
33
  {% for page in params.pages %}
34
34
  {%- set pageAttributes = getAttributes(page.attributes) %}
35
35
  {%- set pageClass = componentClassName + "__page" %}
36
+ {%- set ariaLabel = 'aria-label="' + 'sida ' + page.label + '"' if not page.attributes["aria-label"] else "" %}
36
37
  {% if page.current %}
37
- <span class="{{ pageClass }} {{ pageClass }}--current" {{- pageAttributes | safe }}>{{ page.label }}</span>
38
+ <span class="{{ pageClass }} {{ pageClass }}--current" aria-current="page" {{ ariaLabel | safe }} {{- pageAttributes | safe }}>{{ page.label }}</span>
38
39
  {% else %}
39
- <a href="{{ page.url }}" class="{{ pageClass }}" {{- pageAttributes | safe }}>{{ page.label }}</a>
40
+ <a href="{{ page.url }}" class="{{ pageClass }}" {{ ariaLabel | safe }} {{- pageAttributes | safe }}>{{ page.label }}</a>
40
41
  {% endif %}
41
42
  {% endfor %}
42
43
  </div>
@@ -56,5 +57,5 @@
56
57
  href: params.nextUrl,
57
58
  disabled: true if not params.nextUrl else false
58
59
  })}}
59
- </div>
60
+ </nav>
60
61
  {% endmacro %}
package/components/pagination/pagination.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  flex-wrap: wrap;
9
9
  width: 100%;
10
10
  padding: ds-spacing($ds-s-050 $ds-s-100);
11
+ color: $ds-color-text-primary;
11
12
 
12
13
  &--simple {
13
14
  padding: ds-spacing($ds-s-100);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -3,7 +3,7 @@ $ds-hex-dark-text-primary-02: #B8B8B8;
3
3
  $ds-hex-dark-text-secondary: #050505;
4
4
  $ds-hex-dark-text-critical: #FD2330;
5
5
  $ds-hex-dark-text-disabled: #B8B8B8;
6
- $ds-hex-dark-text-on-brand: #141414;
6
+ $ds-hex-dark-text-on-brand: #ffffff;
7
7
  $ds-hex-dark-text-on-business: #ffffff;
8
8
  $ds-hex-dark-text-on-critical: #ffffff;
9
9
  $ds-hex-dark-text-on-success: #ffffff;
package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED
@@ -46,8 +46,8 @@ $typographyTokensScreenExtraLarge: (
46
46
  detaildirekt-header: (
47
47
  fontFamily: "DN Serif Display",
48
48
  fontWeight: Regular,
49
- lineHeight: 1.1,
50
49
  fontSize: 48,
50
+ lineHeight: 1.1,
51
51
  letterSpacing: 0
52
52
  ),
53
53
  detailteaser-large: (
@@ -59,10 +59,10 @@ $typographyTokensScreenExtraLarge: (
59
59
  ),
60
60
  detailteaser-standard: (
61
61
  fontFamily: "DN Serif Headline",
62
- fontWeight: Bold,
63
- lineHeight: 1.1,
64
62
  fontSize: 36,
65
- letterSpacing: 0
63
+ lineHeight: 1.1,
64
+ letterSpacing: 0,
65
+ fontWeight: Bold
66
66
  ),
67
67
  detailteaser-standard-compact: (
68
68
  fontFamily: "DN Serif Headline",
@@ -81,8 +81,9 @@ $typographyTokensScreenExtraLarge: (
81
81
  detailteaser-standard-opinion: (
82
82
  fontFamily: "DN Serif Display",
83
83
  fontWeight: Regular,
84
- fontSize: 36,
85
84
  lineHeight: 1.1,
85
+ fontSize: 36,
86
+ letterSpacing: 0,
86
87
  fontStyle: italic
87
88
  ),
88
89
  detailteaser-standard-compact-opinion: (
@@ -153,9 +154,9 @@ $typographyTokensScreenExtraLarge: (
153
154
  ),
154
155
  detaildropcap: (
155
156
  fontFamily: "DN Serif Display",
156
- fontWeight: Bold,
157
157
  lineHeight: 1,
158
158
  fontSize: 92,
159
+ fontWeight: Bold,
159
160
  letterSpacing: 0
160
161
  ),
161
162
  detailarticle-quote: (
@@ -168,8 +169,8 @@ $typographyTokensScreenExtraLarge: (
168
169
  detailmellanrubrik: (
169
170
  fontFamily: "DN Serif Display",
170
171
  fontWeight: Bold,
171
- lineHeight: 1.1,
172
172
  fontSize: 28,
173
+ lineHeight: 1.1,
173
174
  letterSpacing: 0
174
175
  ),
175
176
  detailgameheader: (
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  $typographyTokensScreenLarge: (
2
2
  detaildropcap: (
3
3
  fontFamily: "DN Serif Display",
4
- fontWeight: Bold,
5
4
  lineHeight: 1,
6
5
  fontSize: 92,
6
+ fontWeight: Bold,
7
7
  letterSpacing: 0
8
8
  ),
9
9
  detailarticle-standard: (
@@ -45,8 +45,8 @@ $typographyTokensScreenLarge: (
45
45
  detailmellanrubrik: (
46
46
  fontFamily: "DN Serif Display",
47
47
  fontWeight: Bold,
48
- lineHeight: 1.1,
49
48
  fontSize: 28,
49
+ lineHeight: 1.1,
50
50
  letterSpacing: 0
51
51
  ),
52
52
  detailarticle-direkt: (
@@ -67,8 +67,8 @@ $typographyTokensScreenLarge: (
67
67
  detaildirekt-header: (
68
68
  fontFamily: "DN Serif Display",
69
69
  fontWeight: Regular,
70
- lineHeight: 1.1,
71
70
  fontSize: 48,
71
+ lineHeight: 1.1,
72
72
  letterSpacing: 0
73
73
  ),
74
74
  detailteaser-standard-compact: (
@@ -110,10 +110,10 @@ $typographyTokensScreenLarge: (
110
110
  ),
111
111
  detailteaser-standard: (
112
112
  fontFamily: "DN Serif Headline",
113
- fontWeight: Bold,
114
- lineHeight: 1.1,
115
113
  fontSize: 26,
116
- letterSpacing: 0
114
+ lineHeight: 1.1,
115
+ letterSpacing: 0,
116
+ fontWeight: Bold
117
117
  ),
118
118
  detailteaser-standard-opinion: (
119
119
  fontFamily: "DN Serif Headline",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "20.4.0",
3
+ "version": "20.4.2",
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",
package/tokens/colors-dark-mode.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "secondary": "#050505",
6
6
  "critical": "#FD2330",
7
7
  "disabled": "#B8B8B8",
8
- "on-brand": "#141414",
8
+ "on-brand": "#ffffff",
9
9
  "on-business": "#ffffff",
10
10
  "on-critical": "#ffffff",
11
11
  "on-success": "#ffffff",