@bonniernews/dn-design-system-web 9.1.1 → 10.0.0-beta.1

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 (31) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/components/blocked-content/blocked-content.js +1 -1
  3. package/components/blocked-content/blocked-content.njk +0 -1
  4. package/components/buddy-menu/buddy-menu.scss +2 -2
  5. package/components/button/README.md +0 -1
  6. package/components/button/button.njk +6 -11
  7. package/components/button/button.scss +141 -216
  8. package/components/button-toggle/README.md +0 -1
  9. package/components/button-toggle/button-toggle.njk +5 -8
  10. package/components/button-toggle/button-toggle.scss +115 -144
  11. package/components/byline/byline.njk +1 -2
  12. package/components/factbox/factbox.njk +2 -4
  13. package/components/factbox/factbox.scss +2 -2
  14. package/components/floating-button/floating-button.njk +5 -9
  15. package/components/floating-button/floating-button.scss +46 -53
  16. package/components/group-header/group-header.scss +21 -6
  17. package/components/icon-button/icon-button.njk +6 -8
  18. package/components/icon-button/icon-button.scss +93 -111
  19. package/components/icon-button-toggle/icon-button-toggle.scss +3 -5
  20. package/components/list-item/list-item.njk +0 -1
  21. package/components/modal/modal.scss +2 -2
  22. package/components/pictogram/pictogram.njk +1 -1
  23. package/components/teaser-list-swipe/teaser-list-swipe.scss +2 -2
  24. package/components/text-button/README.md +0 -1
  25. package/components/text-button/text-button.njk +7 -12
  26. package/components/text-button/text-button.scss +45 -61
  27. package/components/text-button-toggle/README.md +0 -1
  28. package/components/text-button-toggle/text-button-toggle.njk +7 -10
  29. package/components/text-button-toggle/text-button-toggle.scss +50 -60
  30. package/foundations/helpers/metrics.scss +1 -0
  31. package/package.json +1 -1
package/components/text-button-toggle/text-button-toggle.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @use "../icon-sprite/icon-sprite.scss";
3
3
  @use "../spinner/spinner.scss" as *;
4
4
 
5
- $ds-text-btn-toggle__min-clickable-area: 0;
6
5
  $ds-text-btn-toggle__underline-offset: 2px;
7
6
  $ds-text-btn-toggle__icon-size: 24px;
8
7
 
@@ -21,13 +20,12 @@ $ds-text-btn-toggle__icon-size: 24px;
21
20
 
22
21
  .ds-text-btn-toggle {
23
22
  cursor: pointer;
24
- background-color: transparent;
25
23
  border: 0;
26
- min-width: $ds-text-btn-toggle__min-clickable-area;
27
- min-height: $ds-text-btn-toggle__min-clickable-area;
28
24
  display: inline-flex;
29
25
  align-items: center;
30
26
  justify-content: center;
27
+ background-color: transparent;
28
+ border-radius: ds-border-radius(x1);
31
29
  padding: 0;
32
30
  position: relative;
33
31
 
@@ -36,11 +34,8 @@ $ds-text-btn-toggle__icon-size: 24px;
36
34
  }
37
35
 
38
36
  &:focus-visible {
39
- outline: none;
40
- .ds-text-btn-toggle__inner {
41
- outline: ds-border-width(x2) solid $ds-color-border-focus-02;
42
- outline-offset: 2px;
43
- }
37
+ outline: ds-border-width(x2) solid $ds-color-border-focus-02;
38
+ outline-offset: 2px;
44
39
  }
45
40
 
46
41
  @at-root a#{&} {
@@ -49,69 +44,68 @@ $ds-text-btn-toggle__icon-size: 24px;
49
44
  text-decoration: none;
50
45
  }
51
46
 
52
- .ds-text-btn-toggle__inner {
53
- display: inline-flex;
54
- align-items: center;
55
- justify-content: center;
56
- background-color: transparent;
57
- border-radius: ds-border-radius(x1);
58
- padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
59
- position: relative;
60
- &::before {
61
- content: "";
62
- border-radius: inherit;
63
- pointer-events: none;
64
- position: absolute;
65
- top: 0;
66
- left: 0;
67
- bottom: 0;
68
- right: 0;
69
- }
47
+ &::before {
48
+ content: "";
49
+ border-radius: inherit;
50
+ pointer-events: none;
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ bottom: 0;
55
+ right: 0;
56
+ }
70
57
 
71
- .ds-icon {
72
- display: flex;
73
- height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
74
- width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
75
- margin: ds-spacing(0 $ds-s-050 0 0);
76
- color: $ds-color-icon-primary;
77
- svg {
78
- fill: currentColor;
79
- }
80
- }
58
+ &::after {
59
+ content: "";
60
+ position: absolute;
61
+ min-width: $ds-btn__min-clickable-area;
62
+ min-height: $ds-btn__min-clickable-area;
63
+ width: 100%;
64
+ }
81
65
 
82
- .ds-text-btn-toggle__text {
83
- @include ds-typography($ds-typography-functional-body02regular);
84
- @at-root .ds-force-px#{&} {
85
- @include ds-typography($ds-typography-functional-body02regular, true);
86
- }
87
- text-decoration: none;
88
- color: $ds-color-text-primary;
66
+ .ds-icon {
67
+ display: flex;
68
+ height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
69
+ width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
70
+ margin: ds-spacing(0 $ds-s-050 0 0);
71
+ color: $ds-color-icon-primary;
72
+ svg {
73
+ fill: currentColor;
89
74
  }
75
+ }
90
76
 
91
- .ds-text-btn-toggle__off {
92
- display: flex;
93
- }
94
- .ds-text-btn-toggle__on {
95
- display: none;
77
+ .ds-text-btn-toggle__text {
78
+ @include ds-typography($ds-typography-functional-body02regular);
79
+ @at-root .ds-force-px#{&} {
80
+ @include ds-typography($ds-typography-functional-body02regular, true);
96
81
  }
82
+ color: $ds-color-text-primary;
83
+ }
84
+
85
+ .ds-text-btn-toggle__off {
86
+ display: flex;
87
+ }
88
+ .ds-text-btn-toggle__on {
89
+ display: none;
97
90
  }
98
91
 
99
92
  @include ds-hover() {
100
- &:hover:not(.ds-loading) .ds-text-btn-toggle__inner::before {
101
- background-color: $ds-color-component-primary-overlay;
93
+ &:hover:not(.ds-loading):not(:disabled) .ds-text-btn-toggle__text {
94
+ text-decoration: underline;
95
+ text-underline-offset: $ds-text-btn-toggle__underline-offset;
102
96
  }
103
97
  }
104
- &:active:not(.ds-loading) .ds-text-btn-toggle__inner::before {
105
- background-color: $ds-color-component-primary-overlay-02;
98
+ &:active:not(:disabled):not(.ds-loading) {
99
+ opacity: $ds-opacity-component-disabled;
106
100
  }
107
- &:disabled:not(.ds-loading) .ds-text-btn-toggle__inner {
101
+ &:disabled:not(.ds-loading) {
108
102
  @include ds-text-btn-toggle-disabled;
109
103
  }
110
104
 
111
105
  @include ds-loading();
112
106
  }
113
107
 
114
- .ds-text-btn-toggle--selected .ds-text-btn-toggle__inner {
108
+ .ds-text-btn-toggle--selected {
115
109
  .ds-text-btn-toggle__on {
116
110
  display: flex;
117
111
  }
@@ -121,12 +115,8 @@ $ds-text-btn-toggle__icon-size: 24px;
121
115
  }
122
116
 
123
117
  .ds-force-px {
124
- &.ds-text-btn-toggle .ds-text-btn-toggle__inner .ds-icon {
118
+ &.ds-text-btn-toggle .ds-icon {
125
119
  height: $ds-text-btn-toggle__icon-size;
126
120
  width: $ds-text-btn-toggle__icon-size;
127
121
  }
128
122
  }
129
-
130
- .ds-text-btn-toggle--condensed .ds-text-btn-toggle__inner {
131
- padding: ds-spacing($ds-s-025);
132
- }
package/foundations/helpers/metrics.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use "sass:map";
4
4
  @use "../variables/metrics.scss" as *;
5
5
 
6
+ $ds-btn__min-clickable-area: 48px;
6
7
  $dsBorderRadius: map.get($metrics, "border-radius");
7
8
  $dsBorderWidth: map.get($metrics, "border-width");
8
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "9.1.1",
3
+ "version": "10.0.0-beta.1",
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",