@bonniernews/dn-design-system-web 10.0.0-beta.1 → 10.0.0-beta.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 (11) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/components/button/button.scss +1 -7
  3. package/components/button-toggle/button-toggle.scss +1 -7
  4. package/components/floating-button/floating-button.scss +1 -7
  5. package/components/group-header/group-header.scss +8 -4
  6. package/components/icon-button/icon-button.scss +1 -7
  7. package/components/text-button/text-button.scss +1 -7
  8. package/components/text-button-toggle/text-button-toggle.scss +1 -7
  9. package/foundations/helpers/metrics.scss +0 -1
  10. package/foundations/helpers/utilities.scss +16 -0
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,8 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [10.0.0-beta.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@10.0.0-beta.1...@bonniernews/dn-design-system-web@10.0.0-beta.2) (2024-01-10)
8
+
7
9
  ## [10.0.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.1...@bonniernews/dn-design-system-web@10.0.0-beta.1) (2024-01-10)
8
10
 
9
11
 
package/components/button/button.scss CHANGED
@@ -126,13 +126,7 @@ $ds-btn__icon-size: 24px;
126
126
  background-color: transparent;
127
127
  }
128
128
 
129
- &::after {
130
- content: "";
131
- position: absolute;
132
- min-width: $ds-btn__min-clickable-area;
133
- min-height: $ds-btn__min-clickable-area;
134
- width: 100%;
135
- }
129
+ @include min-click-surface();
136
130
 
137
131
  span,
138
132
  i {
package/components/button-toggle/button-toggle.scss CHANGED
@@ -84,13 +84,7 @@ $ds-btn-toggle__icon-size-xsmall: 20px;
84
84
  pointer-events: none;
85
85
  }
86
86
 
87
- &::after {
88
- content: "";
89
- position: absolute;
90
- min-width: $ds-btn__min-clickable-area;
91
- min-height: $ds-btn__min-clickable-area;
92
- width: 100%;
93
- }
87
+ @include min-click-surface();
94
88
 
95
89
  &:focus-visible {
96
90
  outline: ds-metrics-border-width(x2) solid var(--ds-btn-toggle__outline-color);
package/components/floating-button/floating-button.scss CHANGED
@@ -95,13 +95,7 @@
95
95
  right: 0;
96
96
  }
97
97
 
98
- &::after {
99
- content: "";
100
- position: absolute;
101
- min-width: $ds-btn__min-clickable-area;
102
- min-height: $ds-btn__min-clickable-area;
103
- width: 100%;
104
- }
98
+ @include min-click-surface();
105
99
 
106
100
  @include ds-hover() {
107
101
  &:hover:not(:disabled):not(.ds-loading)::before {
package/components/group-header/group-header.scss CHANGED
@@ -28,6 +28,13 @@
28
28
  --group-header-color: #{$ds-color-static-yellow};
29
29
  }
30
30
 
31
+ &--direkt {
32
+ --group-header-background: #{$ds-theme-color};
33
+ --group-header-color: #{$ds-color-text-on-brand};
34
+ position: relative;
35
+ overflow: hidden;
36
+ }
37
+
31
38
  &--toggle,
32
39
  &--arrows,
33
40
  &--direkt {
@@ -35,11 +42,8 @@
35
42
  padding-right: ds-spacing($ds-s-100);
36
43
  }
37
44
 
45
+ &--arrows,
38
46
  &--direkt {
39
- --group-header-background: #{$ds-theme-color};
40
- --group-header-color: #{$ds-color-text-on-brand};
41
- position: relative;
42
- overflow: hidden;
43
47
  @include ds-mq-largest-breakpoint(tablet) {
44
48
  padding-right: 0; // shows link instead of arrows so no need for extra padding
45
49
  }
package/components/icon-button/icon-button.scss CHANGED
@@ -96,13 +96,7 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
96
96
  right: -$ds-btn-outlined__border-width;
97
97
  }
98
98
 
99
- &::after {
100
- content: "";
101
- position: absolute;
102
- min-width: $ds-btn__min-clickable-area;
103
- min-height: $ds-btn__min-clickable-area;
104
- width: 100%;
105
- }
99
+ @include min-click-surface();
106
100
 
107
101
  .ds-icon {
108
102
  position: relative;
package/components/text-button/text-button.scss CHANGED
@@ -56,13 +56,7 @@ $ds-text-btn__underline-offset: 2px;
56
56
  right: 0;
57
57
  }
58
58
 
59
- &::after {
60
- content: "";
61
- position: absolute;
62
- min-width: $ds-btn__min-clickable-area;
63
- min-height: $ds-btn__min-clickable-area;
64
- width: 100%;
65
- }
59
+ @include min-click-surface();
66
60
 
67
61
  span {
68
62
  pointer-events: none;
package/components/text-button-toggle/text-button-toggle.scss CHANGED
@@ -55,13 +55,7 @@ $ds-text-btn-toggle__icon-size: 24px;
55
55
  right: 0;
56
56
  }
57
57
 
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
- }
58
+ @include min-click-surface();
65
59
 
66
60
  .ds-icon {
67
61
  display: flex;
package/foundations/helpers/metrics.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  @use "sass:map";
4
4
  @use "../variables/metrics.scss" as *;
5
5
 
6
- $ds-btn__min-clickable-area: 48px;
7
6
  $dsBorderRadius: map.get($metrics, "border-radius");
8
7
  $dsBorderWidth: map.get($metrics, "border-width");
9
8
 
package/foundations/helpers/utilities.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use "sass:math";
2
2
 
3
+ $ds-btn__min-clickable-area: 48px;
4
+
3
5
  @function ds-px-to-rem($value) {
4
6
  @return math.div(ds-strip-unit($value), 16) * 1rem;
5
7
  }
@@ -20,3 +22,17 @@
20
22
  display: none; // hide scrhollbar in chrome, edge & safari
21
23
  }
22
24
  }
25
+
26
+ @mixin min-click-surface() {
27
+ &::after {
28
+ content: "";
29
+ position: absolute;
30
+ min-height: $ds-btn__min-clickable-area;
31
+ min-width: $ds-btn__min-clickable-area;
32
+ width: 100%;
33
+
34
+ top: 50%;
35
+ left: 50%;
36
+ transform: translate(-50%, -50%);
37
+ }
38
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "10.0.0-beta.1",
3
+ "version": "10.0.0-beta.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",