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

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 (15) hide show
  1. package/CHANGELOG.md +27 -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/modal/README.md +4 -8
  8. package/components/modal/modal.njk +6 -2
  9. package/components/modal/modal.scss +14 -1
  10. package/components/text-button/text-button.scss +1 -7
  11. package/components/text-button-toggle/text-button-toggle.scss +1 -7
  12. package/foundations/colors.scss +0 -1
  13. package/foundations/helpers/metrics.scss +0 -1
  14. package/foundations/helpers/utilities.scss +16 -0
  15. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,19 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [10.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.3...@bonniernews/dn-design-system-web@10.0.0) (2024-01-12)
8
+
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+
12
+ * **web:** changed min-width and min-height for buttons
13
+
14
+ ### Bug Fixes
15
+
16
+ * **web:** refactor all buttons ([#1149](https://github.com/BonnierNews/dn-design-system/issues/1149)) ([4e61922](https://github.com/BonnierNews/dn-design-system/commit/4e619226e4c1c4e7a946cb86af6ac3585622b755))
17
+
18
+ ## [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)
19
+
7
20
  ## [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
21
 
9
22
 
@@ -31,6 +44,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
31
44
 
32
45
  * **web:** refactor all buttons ([7f89354](https://github.com/BonnierNews/dn-design-system/commit/7f893549c25b585bbd9de2f5fc95e33164b8bd75))
33
46
 
47
+ ## [9.1.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.2...@bonniernews/dn-design-system-web@9.1.3) (2024-01-12)
48
+
49
+
50
+ ### Maintenance
51
+
52
+ * **web:** change bodyText to bodyHtml in modal ([#1163](https://github.com/BonnierNews/dn-design-system/issues/1163)) ([e5b55e3](https://github.com/BonnierNews/dn-design-system/commit/e5b55e3366de257231974c4732e8a80cd025098e))
53
+
54
+ ## [9.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.1...@bonniernews/dn-design-system-web@9.1.2) (2024-01-12)
55
+
56
+
57
+ ### Bug Fixes
58
+
59
+ * **web:** style modal backdrop in after element instead of backdrop ([#1164](https://github.com/BonnierNews/dn-design-system/issues/1164)) ([e031696](https://github.com/BonnierNews/dn-design-system/commit/e031696fe8974777f4260f54d2fb73046eec6537))
60
+
34
61
  ## [9.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.0...@bonniernews/dn-design-system-web@9.1.1) (2024-01-09)
35
62
 
36
63
 
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/modal/README.md CHANGED
@@ -11,8 +11,7 @@
11
11
 
12
12
  |parameter | type | required | options | default | description |
13
13
  |:--- | :--- | :--- | :--- | :--- | :--- |
14
- | title | String | yes | | | Title in modal |
15
- | bodyText | String | yes | text | | Text in modal |
14
+ | title | String | no | | | Title in modal |
16
15
  | primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
17
16
  | secondaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional). Set isCloseButton to true if you wanna close modal with this button |
18
17
  | classNames | String | no | | | Ex. "my-special-class" |
@@ -28,12 +27,9 @@ These are copy paste friendly examples to quickliy get started using a component
28
27
  ```javascript
29
28
  {% from '@bonniernews/dn-design-system-web/components/modal/modal.njk' import Modal %}
30
29
 
31
- {{ Modal({
32
- title: "Rubrik",
33
- bodyText: "Text i modalen",
34
- primaryButton: "Text i knapp",
35
- secondaryButton: "Text i knapp",
36
- })}}
30
+ {% call Modal({title: "Rubrik", primaryButton: { text: "Text i knapp", href: "ww.url.se" }, secondaryButton: { text: "Text i knapp", isCloseButton: true } }) %}
31
+ <p>Text i modalen</p>
32
+ {% endcall %}
37
33
  ```
38
34
 
39
35
  ### Scss
package/components/modal/modal.njk CHANGED
@@ -22,8 +22,12 @@
22
22
  iconName: "close",
23
23
  classNames: "ds-modal__close"
24
24
  })}}
25
- <h2>{{ params.title }}</h2>
26
- <p>{{ params.bodyText }}</p>
25
+
26
+ {% if params.title %}
27
+ <h2>{{ params.title }}</h2>
28
+ {% endif %}
29
+
30
+ {{ caller() if caller }}
27
31
 
28
32
  {% if params.primaryButton or params.secondaryButton %}
29
33
  <div class="ds-modal__buttons">
package/components/modal/modal.scss CHANGED
@@ -16,7 +16,6 @@
16
16
  right: 0;
17
17
  left: 0;
18
18
  z-index: 999;
19
- background-color: $ds-color-surface-overlay;
20
19
 
21
20
  @include ds-mq-only-breakpoint(mobile) {
22
21
  align-items: flex-end;
@@ -57,13 +56,27 @@
57
56
  }
58
57
 
59
58
  &::backdrop {
59
+ background-color: transparent;
60
+ }
61
+
62
+ &::after {
63
+ content: "";
64
+ display: block;
65
+ position: fixed;
66
+ top: 0;
67
+ left: 0;
68
+ width: 100vw;
69
+ height: 100vh;
60
70
  background-color: $ds-color-surface-overlay;
71
+ z-index: 10;
61
72
  }
62
73
  }
63
74
 
64
75
  .ds-modal__content {
65
76
  padding: ds-spacing($ds-s-400 $ds-s-300 $ds-s-300);
66
77
  background-color: $ds-color-surface-background;
78
+ position: relative;
79
+ z-index: 15;
67
80
 
68
81
  .ds-icon-btn.ds-modal__close {
69
82
  position: absolute;
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/colors.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  @use "./helpers/colors.scss" as *;
6
6
 
7
7
  html,
8
- ::backdrop, //backdrop can't handle variables in html element. It needs to be defined here
9
8
  .ds-light {
10
9
  @each $name, $value in meta.module-variables("colorsDnLightTokens") {
11
10
  --ds-color-#{string.slice($name, 8)}: #{$value};
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",
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",