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

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** changed min-width and min-height for buttons
+
+### Bug Fixes
+
+* **web:** refactor all buttons ([#1149](https://github.com/BonnierNews/dn-design-system/issues/1149)) ([4e61922](https://github.com/BonnierNews/dn-design-system/commit/4e619226e4c1c4e7a946cb86af6ac3585622b755))
+
 ## [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)
 
 ## [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)
@@ -33,6 +44,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 * **web:** refactor all buttons ([7f89354](https://github.com/BonnierNews/dn-design-system/commit/7f893549c25b585bbd9de2f5fc95e33164b8bd75))
 
+## [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)
+
+
+### Maintenance
+
+* **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))
+
+## [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)
+
+
+### Bug Fixes
+
+* **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))
+
 ## [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)
 
 

package/components/modal/README.md

@@ -11,8 +11,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-| title | String | yes | | | Title in modal |
-| bodyText | String | yes | text | | Text in modal |
+| title | String | no | | | Title in modal |
 | primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
 | 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 |
 | classNames | String | no | | | Ex. "my-special-class" |
@@ -28,12 +27,9 @@ These are copy paste friendly examples to quickliy get started using a component
 ```javascript
 {% from '@bonniernews/dn-design-system-web/components/modal/modal.njk' import Modal %}
 
-{{ Modal({
-  title: "Rubrik",
-  bodyText: "Text i modalen",
-  primaryButton: "Text i knapp",
-  secondaryButton: "Text i knapp",
-})}}
+{% call Modal({title: "Rubrik", primaryButton: { text: "Text i knapp", href: "ww.url.se" }, secondaryButton: { text: "Text i knapp", isCloseButton: true } }) %}
+  <p>Text i modalen</p>
+{% endcall %}
 ```
 
 ### Scss

package/components/modal/modal.njk

@@ -22,8 +22,12 @@
           iconName: "close",
           classNames: "ds-modal__close"
         })}}
-        <h2>{{ params.title }}</h2>
-        <p>{{ params.bodyText }}</p>
+
+        {% if params.title %}
+          <h2>{{ params.title }}</h2>
+        {% endif %}
+
+        {{ caller() if caller }}
 
         {% if params.primaryButton or params.secondaryButton %}
           <div class="ds-modal__buttons">

package/components/modal/modal.scss

@@ -16,7 +16,6 @@
     right: 0;
     left: 0;
     z-index: 999;
-    background-color: $ds-color-surface-overlay;
 
     @include ds-mq-only-breakpoint(mobile) {
       align-items: flex-end;
@@ -57,13 +56,27 @@
     }
 
     &::backdrop {
+      background-color: transparent;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
       background-color: $ds-color-surface-overlay;
+      z-index: 10;
     }
   }
 
   .ds-modal__content {
     padding: ds-spacing($ds-s-400 $ds-s-300 $ds-s-300);
     background-color: $ds-color-surface-background;
+    position: relative;
+    z-index: 15;
 
     .ds-icon-btn.ds-modal__close {
       position: absolute;

package/foundations/colors.scss

@@ -5,7 +5,6 @@
 @use "./helpers/colors.scss" as *;
 
 html,
-::backdrop, //backdrop can't handle variables in html element. It needs to be defined here
 .ds-light {
   @each $name, $value in meta.module-variables("colorsDnLightTokens") {
     --ds-color-#{string.slice($name, 8)}: #{$value};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",