@bonniernews/dn-design-system-web 14.3.9 → 14.4.0-beta.0

package/components/floating-button/floating-button.scss

@@ -1,145 +0,0 @@
-@use "sass:math";
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
-
-.ds-floating-btn {
-  --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125, rem)};
-  --ds-floating-btn__icon-size: #{ds-px-to-rem(24px)};
-
-  &.ds-force-px {
-    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125)};
-    --ds-floating-btn__icon-size: 24px;
-    @include ds-typography($ds-typography-detailstandard-button, true);
-  }
-
-  &.ds-floating-btn--icon-left {
-    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100, rem)};
-    --ds-floating-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
-
-    &.ds-force-px {
-      --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-125 $ds-s-075 $ds-s-100)};
-    }
-  }
-
-  &.ds-floating-btn--icon-right {
-    --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125, rem)};
-    --ds-floating-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
-
-    &.ds-force-px {
-      --ds-floating-btn__padding: #{ds-spacing($ds-s-075 $ds-s-100 $ds-s-075 $ds-s-125)};
-    }
-  }
-
-  &.ds-floating-btn--small {
-    --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125, rem)};
-
-    &.ds-force-px {
-      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125)};
-
-      &.ds-floating-btn--icon-left {
-        --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100)};
-      }
-
-      &.ds-floating-btn--icon-right {
-        --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125)};
-      }
-    }
-
-    &.ds-floating-btn--icon-left {
-      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-125 $ds-s-050 $ds-s-100, rem)};
-    }
-
-    &.ds-floating-btn--icon-right {
-      --ds-floating-btn__padding: #{ds-spacing($ds-s-050 $ds-s-100 $ds-s-050 $ds-s-125, rem)};
-    }
-  }
-
-  cursor: pointer;
-  @include ds-typography($ds-typography-detailstandard-button);
-  color: $ds-color-text-secondary;
-  background-color: $ds-color-component-primary;
-  border-radius: 100px;
-  padding: var(--ds-floating-btn__padding);
-  position: relative;
-  box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  span {
-    pointer-events: none;
-  }
-
-  &:focus-visible {
-    outline: ds-metrics-border-width(x2) solid;
-    outline-offset: 2px;
-    outline-color: $ds-color-border-focus-02;
-  }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  &::before {
-    content: "";
-    border-radius: inherit;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  @include min-click-surface();
-
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading)::before {
-      background-color: $ds-color-component-secondary-overlay;
-    }
-  }
-
-  &:active:not(:disabled):not(.ds-loading)::before {
-    background-color: $ds-color-component-secondary-overlay-02;
-  }
-
-  &:not(.ds-loading):disabled {
-    opacity: $ds-opacity-component-disabled;
-    cursor: not-allowed;
-  }
-
-  // we have to override spinner styling since spinner variant is based on "off" button variant
-  &.ds-loading {
-    border-top-color: $ds-color-icon-secondary;
-    &::before {
-      border-color: $ds-color-icon-secondary;
-    }
-  }
-
-  @include ds-loading();
-}
-
-.ds-floating-btn--icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  .ds-icon {
-    display: flex;
-    margin: var(--ds-floating-btn__icon-margin);
-    height: var(--ds-floating-btn__icon-size);
-    width: var(--ds-floating-btn__icon-size);
-
-    svg {
-      fill: currentColor;
-    }
-  }
-}
-
-.ds-floating-btn--icon-left {
-  flex-direction: row-reverse;
-}

package/components/icon-button-toggle/icon-button-toggle.js

@@ -1,21 +0,0 @@
-export {
-  dsIconButtonToggle,
-  dsIconButtonToggleAll
-};
-
-function dsIconButtonToggle(toggleElements = []) {
-  if (!toggleElements.length) return;
-  toggleElements.forEach((toggleEl) => {
-    toggleEl.addEventListener("click", () => {
-      if (toggleEl.classList.contains("ds-icon-btn--disabled")) return;
-      toggleEl.classList.toggle("ds-icon-btn--selected");
-      const ariaChecked = toggleEl.getAttribute("aria-checked") === "true" ? "false" : "true";
-      toggleEl.setAttribute("aria-checked", ariaChecked);
-    });
-  });
-}
-
-function dsIconButtonToggleAll() {
-  const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn--toggle"));
-  dsIconButtonToggle(toggleElements);
-}