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

package/components/text-button-toggle/text-button-toggle.scss

@@ -2,7 +2,6 @@
 @use "../icon-sprite/icon-sprite.scss";
 @use "../spinner/spinner.scss" as *;
 
-$ds-text-btn-toggle__min-clickable-area: 0;
 $ds-text-btn-toggle__underline-offset: 2px;
 $ds-text-btn-toggle__icon-size: 24px;
 
@@ -21,13 +20,12 @@ $ds-text-btn-toggle__icon-size: 24px;
 
 .ds-text-btn-toggle {
   cursor: pointer;
-  background-color: transparent;
   border: 0;
-  min-width: $ds-text-btn-toggle__min-clickable-area;
-  min-height: $ds-text-btn-toggle__min-clickable-area;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background-color: transparent;
+  border-radius: ds-border-radius(x1);
   padding: 0;
   position: relative;
 
@@ -36,11 +34,8 @@ $ds-text-btn-toggle__icon-size: 24px;
   }
 
   &:focus-visible {
-    outline: none;
-    .ds-text-btn-toggle__inner {
-      outline: ds-border-width(x2) solid $ds-color-border-focus-02;
-      outline-offset: 2px;
-    }
+    outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+    outline-offset: 2px;
   }
 
   @at-root a#{&} {
@@ -49,69 +44,68 @@ $ds-text-btn-toggle__icon-size: 24px;
     text-decoration: none;
   }
 
-  .ds-text-btn-toggle__inner {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border-radius: ds-border-radius(x1);
-    padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
-    position: relative;
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
+  &::before {
+    content: "";
+    border-radius: inherit;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
 
-    .ds-icon {
-      display: flex;
-      height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
-      width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
-      margin: ds-spacing(0 $ds-s-050 0 0);
-      color: $ds-color-icon-primary;
-      svg {
-        fill: currentColor;
-      }
-    }
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
+  }
 
-    .ds-text-btn-toggle__text {
-      @include ds-typography($ds-typography-functional-body02regular);
-      @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
-      }
-      text-decoration: none;
-      color: $ds-color-text-primary;
+  .ds-icon {
+    display: flex;
+    height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
+    width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
+    margin: ds-spacing(0 $ds-s-050 0 0);
+    color: $ds-color-icon-primary;
+    svg {
+      fill: currentColor;
     }
+  }
 
-    .ds-text-btn-toggle__off {
-      display: flex;
-    }
-    .ds-text-btn-toggle__on {
-      display: none;
+  .ds-text-btn-toggle__text {
+    @include ds-typography($ds-typography-functional-body02regular);
+    @at-root .ds-force-px#{&} {
+      @include ds-typography($ds-typography-functional-body02regular, true);
     }
+    color: $ds-color-text-primary;
+  }
+
+  .ds-text-btn-toggle__off {
+    display: flex;
+  }
+  .ds-text-btn-toggle__on {
+    display: none;
   }
 
   @include ds-hover() {
-    &:hover:not(.ds-loading) .ds-text-btn-toggle__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+    &:hover:not(.ds-loading):not(:disabled) .ds-text-btn-toggle__text {
+      text-decoration: underline;
+      text-underline-offset: $ds-text-btn-toggle__underline-offset;
     }
   }
-  &:active:not(.ds-loading) .ds-text-btn-toggle__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
+  &:active:not(:disabled):not(.ds-loading) {
+    opacity: $ds-opacity-component-disabled;
   }
-  &:disabled:not(.ds-loading) .ds-text-btn-toggle__inner {
+  &:disabled:not(.ds-loading) {
     @include ds-text-btn-toggle-disabled;
   }
 
   @include ds-loading();
 }
 
-.ds-text-btn-toggle--selected .ds-text-btn-toggle__inner {
+.ds-text-btn-toggle--selected {
   .ds-text-btn-toggle__on {
     display: flex;
   }
@@ -121,12 +115,8 @@ $ds-text-btn-toggle__icon-size: 24px;
 }
 
 .ds-force-px {
-  &.ds-text-btn-toggle .ds-text-btn-toggle__inner .ds-icon {
+  &.ds-text-btn-toggle .ds-icon {
     height: $ds-text-btn-toggle__icon-size;
     width: $ds-text-btn-toggle__icon-size;
   }
 }
-
-.ds-text-btn-toggle--condensed .ds-text-btn-toggle__inner {
-  padding: ds-spacing($ds-s-025);
-}

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/foundations/helpers/metrics.scss

@@ -3,6 +3,7 @@
 @use "sass:map";
 @use "../variables/metrics.scss" as *;
 
+$ds-btn__min-clickable-area: 48px;
 $dsBorderRadius: map.get($metrics, "border-radius");
 $dsBorderWidth: map.get($metrics, "border-width");
 

package/package.json

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

package/components/modal/README.md

@@ -1,52 +0,0 @@
-- 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

@@ -1,59 +0,0 @@
-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

@@ -1,66 +0,0 @@
-{% 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

@@ -1,115 +0,0 @@
-@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);
-        }
-      }
-    }
-  }
-}