@bonniernews/dn-design-system-web 16.0.4 → 16.0.6
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.
- package/CHANGELOG.md +14 -0
- package/components/article-body-image/article-body-image.scss +1 -1
- package/components/article-top-image/article-top-image.scss +1 -1
- package/components/blocked-content/blocked-content.scss +1 -1
- package/components/byline/byline.scss +2 -2
- package/components/disclaimer/disclaimer.scss +1 -1
- package/components/divider/divider.scss +1 -1
- package/components/factbox/factbox.njk +2 -0
- package/components/factbox/factbox.scss +1 -1
- package/components/list-item/list-item.scss +3 -3
- package/components/quote/quote.scss +1 -1
- package/components/teaser-large/teaser-large.scss +1 -1
- package/components/teaser-native/teaser-native.scss +2 -2
- package/components/teaser-onsite/teaser-onsite.scss +1 -1
- package/components/teaser-package/teaser-package.scss +1 -1
- package/components/teaser-right-now/teaser-right-now.scss +1 -1
- package/components/teaser-slideshow/teaser-slideshow.scss +1 -1
- package/components/teaser-split/teaser-split.scss +4 -4
- package/components/teaser-standard/teaser-standard.scss +3 -3
- package/components/teaser-tipsa/teaser-tipsa.scss +1 -1
- package/components/thematic-break/thematic-break.scss +1 -1
- package/foundations/helpers/README-spacing.md +4 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [16.0.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.5...@bonniernews/dn-design-system-web@16.0.6) (2024-07-15)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **web:** updating to new spacing ([#1333](https://github.com/BonnierNews/dn-design-system/issues/1333)) ([d512d73](https://github.com/BonnierNews/dn-design-system/commit/d512d73f2516c7885a3990ae2968800795b93940))
|
|
13
|
+
|
|
14
|
+
## [16.0.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.4...@bonniernews/dn-design-system-web@16.0.5) (2024-07-12)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **web:** hide buttons in factbox for screen readers ([#1332](https://github.com/BonnierNews/dn-design-system/issues/1332)) ([6d39bd6](https://github.com/BonnierNews/dn-design-system/commit/6d39bd6415ecf6c99ca74617d5fc5c083900e444))
|
|
20
|
+
|
|
7
21
|
## [16.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.3...@bonniernews/dn-design-system-web@16.0.4) (2024-07-11)
|
|
8
22
|
|
|
9
23
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
.ds-blocked-content {
|
|
5
5
|
background-color: $ds-color-surface-background;
|
|
6
6
|
margin: 0;
|
|
7
|
-
padding: ds-spacing($ds-s-
|
|
7
|
+
padding: ds-spacing($ds-s-100 0 $ds-s-200);
|
|
8
8
|
|
|
9
9
|
.ds-blocked-content__inner {
|
|
10
10
|
text-align: center;
|
|
@@ -24,7 +24,7 @@ $ds-byline__image-size--direkt: 36px;
|
|
|
24
24
|
&::after {
|
|
25
25
|
content: "";
|
|
26
26
|
height: ds-metrics-border-width(x1);
|
|
27
|
-
width: calc(100% -
|
|
27
|
+
width: calc(100% - ds-spacing($ds-s-200));
|
|
28
28
|
background-color: $ds-color-border-primary;
|
|
29
29
|
position: absolute;
|
|
30
30
|
left: ds-spacing($ds-s-100);
|
|
@@ -39,7 +39,7 @@ $ds-byline__image-size--direkt: 36px;
|
|
|
39
39
|
align-items: center;
|
|
40
40
|
justify-content: space-between;
|
|
41
41
|
position: relative;
|
|
42
|
-
padding: ds-spacing($ds-s-100 $ds-s-
|
|
42
|
+
padding: ds-spacing($ds-s-100 $ds-s-100);
|
|
43
43
|
width: 100%;
|
|
44
44
|
|
|
45
45
|
&::before {
|
|
@@ -5,7 +5,7 @@ $ds-disclaimer__icon-size: 20px;
|
|
|
5
5
|
$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
|
|
6
6
|
|
|
7
7
|
.ds-disclaimer {
|
|
8
|
-
padding-bottom: ds-spacing($ds-s-
|
|
8
|
+
padding-bottom: ds-spacing($ds-s-100);
|
|
9
9
|
box-sizing: border-box;
|
|
10
10
|
|
|
11
11
|
.ds-disclaimer__body-html,
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
iconPosition: 'right',
|
|
35
35
|
iconName: 'expand_more',
|
|
36
36
|
classNames: 'ds-factbox__expand-more',
|
|
37
|
+
attributes: { "aria-hidden": "true" },
|
|
37
38
|
mobile: { fullWidth: true },
|
|
38
39
|
forcePx: params.forcePx
|
|
39
40
|
})}}
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
iconPosition: 'right',
|
|
45
46
|
iconName: 'expand_less',
|
|
46
47
|
classNames: 'ds-factbox__expand-less',
|
|
48
|
+
attributes: { "aria-hidden": "true" },
|
|
47
49
|
mobile: { fullWidth: true },
|
|
48
50
|
forcePx: params.forcePx
|
|
49
51
|
})}}
|
|
@@ -12,7 +12,7 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
|
|
|
12
12
|
background-color: $ds-color-surface-background;
|
|
13
13
|
box-sizing: border-box;
|
|
14
14
|
margin: 0;
|
|
15
|
-
padding: ds-spacing($ds-s-
|
|
15
|
+
padding: ds-spacing($ds-s-100 0 $ds-s-200);
|
|
16
16
|
|
|
17
17
|
.ds-factbox__inner {
|
|
18
18
|
border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
|
|
@@ -32,7 +32,7 @@ $ds-list-item__icon-size: 24px;
|
|
|
32
32
|
align-items: center;
|
|
33
33
|
justify-content: space-between;
|
|
34
34
|
position: relative;
|
|
35
|
-
padding: ds-spacing($ds-s-100 $ds-s-
|
|
35
|
+
padding: ds-spacing($ds-s-100 $ds-s-100);
|
|
36
36
|
width: 100%;
|
|
37
37
|
|
|
38
38
|
&::before {
|
|
@@ -269,13 +269,13 @@ $ds-list-item__icon-size: 24px;
|
|
|
269
269
|
cursor: default;
|
|
270
270
|
.ds-list-item__inner {
|
|
271
271
|
display: flex;
|
|
272
|
-
padding: ds-spacing(0 0 0 $ds-s-
|
|
272
|
+
padding: ds-spacing(0 0 0 $ds-s-100);
|
|
273
273
|
}
|
|
274
274
|
.ds-list-item__titles {
|
|
275
275
|
padding: ds-spacing($ds-s-100) 0;
|
|
276
276
|
}
|
|
277
277
|
.ds-btn--toggle {
|
|
278
|
-
margin: ds-spacing(0 $ds-s-
|
|
278
|
+
margin: ds-spacing(0 $ds-s-100 0 $ds-s-100);
|
|
279
279
|
}
|
|
280
280
|
a {
|
|
281
281
|
@include ds-link($ds-link-list);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
@include ds-typography($ds-typography-detailarticle-quote);
|
|
5
5
|
color: $ds-color-text-primary;
|
|
6
6
|
margin: 0;
|
|
7
|
-
padding: ds-spacing($ds-s-
|
|
7
|
+
padding: ds-spacing($ds-s-100 0 $ds-s-200);
|
|
8
8
|
position: relative;
|
|
9
9
|
|
|
10
10
|
@at-root .ds-force-px#{&} {
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
.ds-teaser__content {
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: row;
|
|
18
|
-
padding: ds-spacing($ds-s-
|
|
18
|
+
padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
|
|
19
19
|
|
|
20
20
|
.ds-teaser__content-inner {
|
|
21
21
|
display: flex;
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.ds-teaser__media {
|
|
18
|
-
margin-bottom: ds-spacing($ds-s-
|
|
18
|
+
margin-bottom: ds-spacing($ds-s-100);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.ds-teaser__content {
|
|
22
22
|
display: block;
|
|
23
|
-
padding: ds-spacing($ds-s-
|
|
23
|
+
padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.ds-teaser__title {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use "../../assets/teaser/teaser.scss" as *;
|
|
3
3
|
|
|
4
4
|
.ds-split-container {
|
|
5
|
-
padding: ds-spacing($ds-s-
|
|
5
|
+
padding: ds-spacing($ds-s-075 $ds-s-100 $ds-s-100);
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-wrap: wrap;
|
|
8
8
|
position: relative;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
right: 0;
|
|
19
19
|
top: 0;
|
|
20
20
|
position: absolute;
|
|
21
|
-
margin: ds-spacing(0 $ds-s-
|
|
21
|
+
margin: ds-spacing(0 $ds-s-100);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
&:nth-child(4)::before {
|
|
51
51
|
display: block;
|
|
52
52
|
content: "";
|
|
53
|
-
margin-top: ds-spacing($ds-s-
|
|
54
|
-
padding-top: ds-spacing($ds-s-
|
|
53
|
+
margin-top: ds-spacing($ds-s-100);
|
|
54
|
+
padding-top: ds-spacing($ds-s-075);
|
|
55
55
|
border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
|
|
56
56
|
|
|
57
57
|
@include ds-mq-smallest-breakpoint(tablet) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@use "sass:math";
|
|
4
4
|
|
|
5
5
|
.ds-teaser.ds-teaser--standard {
|
|
6
|
-
padding: ds-spacing($ds-s-
|
|
6
|
+
padding: ds-spacing($ds-s-075 $ds-s-100 0);
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
|
|
9
9
|
.ds-teaser__title {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
.ds-teaser__media,
|
|
28
28
|
.ds-teaser__content {
|
|
29
|
-
margin-bottom: ds-spacing($ds-s-
|
|
29
|
+
margin-bottom: ds-spacing($ds-s-100);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&::after {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.ds-teaser__media {
|
|
43
|
-
margin-bottom: ds-spacing($ds-s-
|
|
43
|
+
margin-bottom: ds-spacing($ds-s-100);
|
|
44
44
|
margin-left: ds-spacing($ds-s-100);
|
|
45
45
|
float: right;
|
|
46
46
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
## use sass variable
|
|
10
10
|
To avoid silent breaking changes use sass variable instead of raw token name.
|
|
11
11
|
|
|
12
|
-
Ex: `margin: ds-spacing($ds-s-050 0 $ds-s-
|
|
12
|
+
Ex: `margin: ds-spacing($ds-s-050 0 $ds-s-sm)`
|
|
13
13
|
|
|
14
14
|
By using sass variables (instead of token name directly), if a spacing token used in scss is removed sass will not compile - which is a good thing!
|
|
15
15
|
|
|
@@ -21,7 +21,7 @@ By using sass variables for spacing tokens you will see which tokens are availab
|
|
|
21
21
|
|
|
22
22
|
|parameter | type | required | options | default | description |
|
|
23
23
|
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
24
|
-
|units | String | yes | one or more spacing tokens or `auto` or `0` or numeric value `14`| | $ds-s-050 0 $ds-s-
|
|
24
|
+
|units | String | yes | one or more spacing tokens or `auto` or `0` or numeric value `14`| | $ds-s-050 0 $ds-s-sm 14 |
|
|
25
25
|
|sizeUnit | String | no | px, rem | px | |
|
|
26
26
|
|negative | bool | no | true, false | false | Applies to all units except for `auto` and `0` |
|
|
27
27
|
|
|
@@ -29,7 +29,7 @@ By using sass variables for spacing tokens you will see which tokens are availab
|
|
|
29
29
|
@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers.scss" as *;
|
|
30
30
|
|
|
31
31
|
.test-1 {
|
|
32
|
-
margin: ds-spacing($ds-s-050 0 $ds-s-
|
|
32
|
+
margin: ds-spacing($ds-s-050 0 $ds-s-sm auto);
|
|
33
33
|
padding: ds-spacing($ds-s-125 14);
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -40,7 +40,7 @@ By using sass variables for spacing tokens you will see which tokens are availab
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.test-2 {
|
|
43
|
-
margin: ds-spacing($ds-s-050 0 $ds-s-
|
|
43
|
+
margin: ds-spacing($ds-s-050 0 $ds-s-sm auto, rem, true);
|
|
44
44
|
padding: ds-spacing($ds-s-125 14, rem);
|
|
45
45
|
}
|
|
46
46
|
|
package/package.json
CHANGED