@bonniernews/dn-design-system-web 20.4.1 → 20.4.3

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 +15 -0
  2. package/components/pagination/pagination.njk +5 -4
  3. package/components/pagination/pagination.scss +1 -0
  4. package/components/profile-header/profile-header.njk +1 -0
  5. package/components/profile-header/profile-header.scss +13 -3
  6. package/components/tag-header/tag-header.njk +1 -0
  7. package/components/tag-header/tag-header.scss +14 -3
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [20.4.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@20.4.2...@bonniernews/dn-design-system-web@20.4.3) (2024-09-23)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** tagheader and profileheader articlecount border design update ([#1401](https://github.com/BonnierNews/dn-design-system/issues/1401)) ([46786dc](https://github.com/BonnierNews/dn-design-system/commit/46786dc7dcdf3c0b349abf525c68c80b583d4a3d))
13
+
14
+ ## [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)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **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))
20
+ * **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))
21
+
7
22
  ## [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)
8
23
 
9
24
 
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/components/profile-header/profile-header.njk CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  {%- set classes = [
9
9
  componentClassName,
10
+ componentClassName + '--has-border' if params.descriptionHtml or params.articleCount,
10
11
  params.classNames if params.classNames
11
12
  ] | join(" ") %}
12
13
 
package/components/profile-header/profile-header.scss CHANGED
@@ -7,6 +7,16 @@
7
7
  padding-bottom: ds-spacing($ds-s-100);
8
8
  display: flex;
9
9
 
10
+ &.ds-profile-header--has-border {
11
+ .ds-profile-header__bar {
12
+ border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
13
+
14
+ + .ds-profile-header__article-count {
15
+ padding-top: ds-spacing($ds-s-100);
16
+ }
17
+ }
18
+ }
19
+
10
20
  .ds-profile-header__content {
11
21
  width: 100%;
12
22
  }
@@ -44,7 +54,8 @@
44
54
  }
45
55
 
46
56
  .ds-profile-header__article-count {
47
- margin: ds-spacing($ds-s-050 $ds-s-100 0);
57
+ margin: ds-spacing(0 $ds-s-100 0);
58
+ padding-top: ds-spacing($ds-s-050);
48
59
  @include ds-typography($ds-typography-functionalbody02);
49
60
  color: $ds-color-text-primary-02;
50
61
  }
@@ -53,8 +64,7 @@
53
64
  @include ds-typography($ds-typography-functionalbody02);
54
65
  color: $ds-color-text-primary;
55
66
  margin: ds-spacing(0 $ds-s-100 0);
56
- border-top: ds-border-width(x1) solid $ds-color-border-primary;
57
- padding: ds-spacing($ds-s-100 0 0 0);
67
+ padding-top: ds-spacing($ds-s-100);
58
68
 
59
69
  a {
60
70
  @include ds-link($ds-link-article-body);
package/components/tag-header/tag-header.njk CHANGED
@@ -8,6 +8,7 @@
8
8
  {%- set classes = [
9
9
  componentClassName,
10
10
  'ds-theme--' + params.theme if params.theme,
11
+ componentClassName + '--has-border' if params.descriptionHtml or params.articleCount,
11
12
  params.classNames if params.classNames
12
13
  ] | join(" ") %}
13
14
 
package/components/tag-header/tag-header.scss CHANGED
@@ -8,6 +8,17 @@
8
8
  padding-bottom: ds-spacing($ds-s-100);
9
9
  display: flex;
10
10
 
11
+ &.ds-tag-header--has-border {
12
+ .ds-tag-header__bar {
13
+ border-bottom: ds-border-width(x1) solid $ds-color-border-primary;
14
+ padding-bottom: ds-spacing($ds-s-100);
15
+
16
+ + .ds-tag-header__article-count {
17
+ padding-top: ds-spacing($ds-s-100);
18
+ }
19
+ }
20
+ }
21
+
11
22
  @include ds-mq-only-breakpoint(mobile) {
12
23
  flex-direction: column;
13
24
  }
@@ -71,7 +82,8 @@
71
82
  }
72
83
 
73
84
  .ds-tag-header__article-count {
74
- margin: ds-spacing($ds-s-050 $ds-s-100 0);
85
+ margin: ds-spacing(0 $ds-s-100 0);
86
+ padding-top: ds-spacing($ds-s-050);
75
87
  @include ds-typography($ds-typography-functionalbody02);
76
88
  color: $ds-color-text-primary-02;
77
89
  }
@@ -79,8 +91,7 @@
79
91
  .ds-tag-header__description {
80
92
  @include ds-typography($ds-typography-functionalbody02);
81
93
  color: $ds-color-text-primary;
82
- margin: ds-spacing($ds-s-100 $ds-s-100 0);
83
- border-top: ds-border-width(x1) solid $ds-color-border-primary;
94
+ margin: ds-spacing(0 $ds-s-100 0);
84
95
  padding-top: ds-spacing($ds-s-100);
85
96
 
86
97
  a {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "20.4.1",
3
+ "version": "20.4.3",
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",