@bonniernews/dn-design-system-web 8.9.8 → 9.1.0

package/CHANGELOG.md

@@ -4,6 +4,36 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [9.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.0.0...@bonniernews/dn-design-system-web@9.1.0) (2024-01-04)
+
+
+### Features
+
+* **web:** modal component ([#1150](https://github.com/BonnierNews/dn-design-system/issues/1150)) ([a0a70ec](https://github.com/BonnierNews/dn-design-system/commit/a0a70ec4d431b6b38738a70468e60ed9cc9e93ef))
+
+
+### Bug Fixes
+
+* **app:** pressable remove hitslop ([#1146](https://github.com/BonnierNews/dn-design-system/issues/1146)) ([4f59509](https://github.com/BonnierNews/dn-design-system/commit/4f59509cc3c29bd1f66c7d064b0fb5e25451b07c))
+
+
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1142](https://github.com/BonnierNews/dn-design-system/issues/1142)) ([66cc18e](https://github.com/BonnierNews/dn-design-system/commit/66cc18e2bd91337d5ffd8b38e76f9230ba5d3610))
+* prerelease packages ([d6f9f31](https://github.com/BonnierNews/dn-design-system/commit/d6f9f31c313028d1e3b192a8b4b2dd59732ef192))
+* prerelease packages ([49b5357](https://github.com/BonnierNews/dn-design-system/commit/49b53574003a03a233b63f467a69d9ea55d9b852))
+
+## [9.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.8...@bonniernews/dn-design-system-web@9.0.0) (2023-12-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** compact renamed to isCompact in teaser standard
+
+### Features
+
+* **web:** teaser large compact ([#1143](https://github.com/BonnierNews/dn-design-system/issues/1143)) ([4c578fb](https://github.com/BonnierNews/dn-design-system/commit/4c578fb20fd3b00eb5f1bd0951f512bd0004da75))
+
 ## [8.9.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.7...@bonniernews/dn-design-system-web@8.9.8) (2023-12-08)
 
 

package/components/modal/README.md

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
+- Storybook: [Modal](https://designsystem.dn.se/?path=/docs/basic-modal--docs)
+- Storybook (Latest): [Modal](https://designsystem-latest.dn.se/?path=/docs/basic-modal--docs)
+
+----
+
+# Modal
+
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+| title | String | yes | | | Title in modal |
+| bodyText | String | yes | text | | Text 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" |
+| attributes | Object | no | | | Ex. { data-prop: value } |
+| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+
+## Minimum requirement example
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+### Nunjucks
+
+```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",
+})}}
+```
+
+### Scss
+
+```scss
+@use "@bonniernews/dn-design-system-web/components/modal/modal";
+```
+
+### Javascript
+
+```javascript
+import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js'
+const modalEl = document.querySelector(".ds-modal");
+initModal(modalEl);
+openModal(modalEl);
+```

package/components/modal/modal.js

@@ -0,0 +1,59 @@
+export {
+  initModal,
+  openModal,
+  initModalStorybook
+}
+
+function initModal(modalEl) {
+  const isDialogSupported = typeof HTMLDialogElement === "function";
+  let modalWrapper = modalEl.querySelector(".ds-modal__inner");
+  if (!isDialogSupported) {
+    modalWrapper = modalEl;
+    const modalElInner = document.querySelector(".ds-modal__inner");
+    const modalAttributes = Array.from(modalElInner.attributes);
+    const fallbackDiv = document.createElement("div");
+    modalEl.classList.add("ds-modal--hidden", "ds-modal--fallback");
+    modalAttributes.forEach((attr) => {
+      fallbackDiv.setAttribute(attr.name, attr.value);
+    });
+    fallbackDiv.setAttribute("role", "dialog");
+    fallbackDiv.setAttribute("aria-modal", "true");
+    fallbackDiv.innerHTML = modalElInner.innerHTML;
+    modalEl.replaceChild(fallbackDiv, modalElInner);
+  }
+
+  modalEl.addEventListener("click", (e) => {
+    if (e.target === modalWrapper) closeModal(modalEl, isDialogSupported);
+  });
+
+  const closeButtons = Array.from(modalEl.getElementsByClassName("ds-modal__close"));
+  closeButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      closeModal(modalEl, isDialogSupported);
+    });
+  });
+}
+
+function openModal(modalEl) {
+  if (typeof HTMLDialogElement === "function") {
+    const modalElInner = modalEl.querySelector(".ds-modal__inner");
+    modalElInner.showModal();
+  } else {
+    modalEl.classList.remove("ds-modal--hidden");
+  }
+}
+
+function closeModal(modalEl, isDialogSupported) {
+  if (isDialogSupported) {
+    const modalElInner = modalEl.querySelector(".ds-modal__inner");
+    modalElInner.close();
+  } else {
+    modalEl.classList.add("ds-modal--hidden");
+  }
+}
+
+function initModalStorybook() {
+  const modalEl = document.querySelector(".ds-modal");
+  initModal(modalEl);
+  openModal(modalEl);
+}

package/components/modal/modal.njk

@@ -0,0 +1,66 @@
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro Modal(params) %}
+  {% set componentClassName = "ds-modal" %}
+
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  <div class="{{ classes }}">
+    <dialog class="{{ componentClassName + '__inner' }}" {{- attributes | safe }}>
+      <div class="{{ componentClassName + '__content' }}">
+        {{ IconButton({
+          variant: "transparent",
+          size: "small",
+          iconName: "close",
+          classNames: "ds-modal__close"
+        })}}
+        <h2>{{ params.title }}</h2>
+        <p>{{ params.bodyText }}</p>
+
+        {% if params.primaryButton or params.secondaryButton %}
+          <div class="ds-modal__buttons">
+            {% if params.secondaryButton %}
+              {%- set secondaryButtonClasses = [
+                "ds-modal__close" if params.secondaryButton.isCloseButton,
+                params.secondaryButton.classNames if params.secondaryButton.classNames
+              ] | join(" ") %}
+              {{ Button({
+                text: params.secondaryButton.text,
+                variant: "secondaryOutlined",
+                href: params.secondaryButton.href,
+                classNames: secondaryButtonClasses,
+                attributes: params.secondaryButton.attributes,
+                forcePx: params.forcePx,
+                mobile: {
+                  fullWidth: true
+                }
+              })}}
+            {% endif %}
+
+            {% if params.primaryButton %}
+              {{ Button({
+                text: params.primaryButton.text,
+                variant: "primary",
+                href: params.primaryButton.href,
+                classNames: params.primaryButton.classNames,
+                attributes: params.primaryButton.attributes,
+                forcePx: params.forcePx,
+                mobile: {
+                  fullWidth: true
+                }
+              })}}
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
+    </dialog>
+  </div>
+{% endmacro %}

package/components/modal/modal.scss

@@ -0,0 +1,115 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../components/icon-sprite/icon-sprite.scss";
+@use "../../components/button/button.scss";
+@use "../../components/icon-button/icon-button.scss";
+
+.ds-modal {
+  &--fallback.ds-modal--hidden {
+    display: none;
+  }
+
+  &--fallback {
+    display: flex;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 999;
+    background-color: $ds-color-surface-overlay;
+
+    @include ds-mq-only-breakpoint(mobile) {
+      align-items: flex-end;
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ds-modal__inner {
+      position: relative;
+    }
+
+    .ds-modal__content {
+      @include ds-mq-only-breakpoint(mobile) {
+        border-radius: 16px 16px 0 0;
+      }
+
+      @include ds-mq-smallest-breakpoint(tablet) {
+        border-radius: ds-border-radius(x1);
+      }
+    }
+  }
+
+  .ds-modal__inner {
+    max-width: 700px;
+    border: none;
+    padding: 0;
+
+    @include ds-mq-only-breakpoint(mobile) {
+      margin-bottom: 0;
+      border-radius: 16px 16px 0 0;
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      border-radius: ds-border-radius(x1);
+    }
+
+    &::backdrop {
+      background-color: $ds-color-surface-overlay;
+    }
+  }
+
+  .ds-modal__content {
+    padding: ds-spacing($ds-s-400 $ds-s-300 $ds-s-300);
+    background-color: $ds-color-surface-background;
+
+    .ds-icon-btn.ds-modal__close {
+      position: absolute;
+      top: ds-spacing($ds-s-100);
+      right: ds-spacing($ds-s-100);
+    }
+
+    > h2 {
+      @include ds-typography($ds-typography-functional-heading03bold);
+      margin: ds-spacing(0 0 $ds-s-200);
+      color: $ds-color-text-primary;
+      text-align: center;
+    }
+
+    > p {
+      @include ds-typography($ds-typography-functional-body02regular);
+      margin: 0;
+      text-align: center;
+      color: $ds-color-text-primary;
+    }
+
+    > .ds-modal__buttons {
+      margin: ds-spacing($ds-s-200 0 0);
+
+      @include ds-mq-only-breakpoint(mobile) {
+        display: flex;
+        flex-wrap: wrap;
+
+        .ds-btn--primary:not(:only-child) {
+          order: 1;
+          margin-bottom: ds-spacing($ds-s-100);
+        }
+
+        .ds-btn--secondaryOutlined:not(:only-child) {
+          order: 2;
+        }
+      }
+
+      @include ds-mq-smallest-breakpoint(tablet) {
+        display: flex;
+        justify-content: center;
+
+        .ds-btn--secondaryOutlined:not(:only-child) {
+          margin-right: ds-spacing($ds-s-100);
+        }
+      }
+    }
+  }
+}

package/components/teaser-large/README.md

@@ -24,6 +24,7 @@
 |bylineHtml | HTML String | no | | | Side image of the author |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
+|isCompact | bool | no | true, false | false | If the headline should be compact |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
 |publicationTime | string | no | | null | Publication time text. |

package/components/teaser-large/teaser-large.njk

@@ -18,6 +18,7 @@
     classNamePrefix + "quote-badge" if isQuoteBadge,
     classNamePrefix + 'top-img' if params.mediaHtml,
     italicsClass if italicsClass,
+    classNamePrefix + "compact" if params.isCompact,
     params.classNames if params.classNames
   ] | join(" ") %}
 

package/components/teaser-large/teaser-large.scss

@@ -103,6 +103,17 @@
     }
   }
 
+  &.ds-teaser--compact {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-detailteaser-large-compact);
+    }
+
+    &.ds-teaser--large-italic .ds-teaser__title,
+    &.ds-teaser--large-big-italic .ds-teaser__title {
+      @include ds-typography($ds-typography-detailteaser-large-compact-opinion);
+    }
+  }
+
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {

package/components/teaser-standard/README.md

@@ -22,6 +22,7 @@
 |grade | String | no | | | zero, one, two, three, four, five, none |
 |mediaHtml | HTML String | no | | | Main image or other media |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isCompact | bool | no | true, false | false | If the headline should be compact |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
 |publicationTime | string | no | | null | Publication time text. |

package/components/teaser-standard/teaser-standard.njk

@@ -11,7 +11,7 @@
   {% set extraClasses = [
     "ds-teaser--standard",
     classNamePrefix + params.variant if params.variant,
-    classNamePrefix + "compact" if params.compact,
+    classNamePrefix + "compact" if params.isCompact,
     classNamePrefix + "quote-badge" if hasQuoteBadge,
     params.classNames if params.classNames
   ] | join(" ") %}

package/foundations/colors.scss

@@ -5,6 +5,7 @@
 @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": "8.9.8",
+  "version": "9.1.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",