@bonniernews/dn-design-system-web 32.7.2 → 32.7.4

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 +15 -0
  2. package/components/byline-list/byline-list.scss +14 -10
  3. package/components/modal/modal.js +2 -1
  4. package/components/modal/modal.scss +4 -0
  5. 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
+ ## [32.7.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.3...@bonniernews/dn-design-system-web@32.7.4) (2025-06-19)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** update modal to not have focus and byline padding ([#1786](https://github.com/BonnierNews/dn-design-system/issues/1786)) ([cca6f9d](https://github.com/BonnierNews/dn-design-system/commit/cca6f9ded0b7457b23ef3e636b7f233837152f0e))
13
+
14
+ ## [32.7.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.2...@bonniernews/dn-design-system-web@32.7.3) (2025-06-19)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **web:** correct close target for modal ([#1785](https://github.com/BonnierNews/dn-design-system/issues/1785)) ([403f5e6](https://github.com/BonnierNews/dn-design-system/commit/403f5e6ff251d321696e2f40f7f1b809a712aead))
20
+ * **web:** update test renderer to allow a wrapper class on component and use in byline ([#1784](https://github.com/BonnierNews/dn-design-system/issues/1784)) ([2cd1be0](https://github.com/BonnierNews/dn-design-system/commit/2cd1be08860c44dd3a2b4a738bf1293c80bd9bac))
21
+
7
22
  ## [32.7.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.1...@bonniernews/dn-design-system-web@32.7.2) (2025-06-19)
8
23
 
9
24
 
package/components/byline-list/byline-list.scss CHANGED
@@ -8,7 +8,7 @@ $ds-byline-list__portrait-size: 44px;
8
8
  .ds-byline-list {
9
9
  list-style: none;
10
10
  margin: 0;
11
- padding: ds-spacing(0 $ds-s-100);
11
+ padding: 0;
12
12
 
13
13
  .ds-byline-list__item {
14
14
  background-color: transparent;
@@ -58,10 +58,13 @@ $ds-byline-list__portrait-size: 44px;
58
58
  &:active {
59
59
  opacity: 0.6;
60
60
  }
61
- &:focus-visible {
62
- outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
63
- outline-offset: -2px;
64
- }
61
+
62
+ @include ds-focus(
63
+ $offset: -2px,
64
+ $includeSelector: true,
65
+ $width: ds-border-width(xs),
66
+ $color: $ds-color-border-primary-strongest
67
+ );
65
68
  }
66
69
 
67
70
  .ds-byline-list__item__icon-right {
@@ -115,11 +118,12 @@ $ds-byline-list__portrait-size: 44px;
115
118
 
116
119
  a.ds-byline-list__item__title {
117
120
  @include ds-link($ds-link-list);
118
-
119
- &:focus-visible {
120
- outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
121
- outline-offset: 2px;
122
- }
121
+ @include ds-focus(
122
+ $offset: 2px,
123
+ $includeSelector: true,
124
+ $width: ds-border-width(xs),
125
+ $color: $ds-color-border-primary-strongest
126
+ );
123
127
  }
124
128
  }
125
129
 
package/components/modal/modal.js CHANGED
@@ -23,7 +23,7 @@ function initModal(modalEl) {
23
23
  }
24
24
 
25
25
  modalEl.addEventListener("click", (e) => {
26
- if (e.target === modalWrapper) closeModal(modalEl, isDialogSupported);
26
+ if (e.target === modalEl.querySelector(".ds-modal__inner")) closeModal(modalEl, isDialogSupported);
27
27
  });
28
28
 
29
29
  const closeButtons = Array.from(modalEl.getElementsByClassName("ds-modal__close"));
@@ -38,6 +38,7 @@ function openModal(modalEl) {
38
38
  if (typeof HTMLDialogElement === "function") {
39
39
  const modalElInner = modalEl.querySelector(".ds-modal__inner");
40
40
  modalElInner.showModal();
41
+ modalElInner.focus(); // Ensure the modal is focused when opened and not a button/link within it
41
42
  } else {
42
43
  modalEl.classList.remove("ds-modal--hidden");
43
44
  document.body.classList.add("no-scroll");
package/components/modal/modal.scss CHANGED
@@ -60,6 +60,10 @@ body.no-scroll {
60
60
  background-color: $ds-color-surface-overlay;
61
61
  z-index: 10;
62
62
  }
63
+
64
+ &:focus {
65
+ outline: none;
66
+ }
63
67
  }
64
68
 
65
69
  .ds-modal__content {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.2",
3
+ "version": "32.7.4",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",