@bonniernews/dn-design-system-web 14.0.3 → 15.0.0-beta.0

package/components/list-item/list-item.njk

@@ -144,10 +144,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondaryFilled"),
+          variant: params.variant | default("secondary"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "xsmall",
+          size: "small",
           attributes: params.elementAttributes
         })}}
       {% endset %}

package/components/list-item/list-item.scss

@@ -243,7 +243,7 @@ $ds-list-item__icon-size: 24px;
   .ds-list-item__titles {
     padding: ds-spacing($ds-s-100) 0;
   }
-  .ds-btn-toggle {
+  .ds-btn--toggle {
     margin: ds-spacing(0 $ds-s-outer 0 $ds-s-100);
   }
   a {

package/components/modal/modal.njk

@@ -20,7 +20,7 @@
           variant: "transparent",
           size: "small",
           iconName: "close",
-          classNames: "ds-modal__close"
+          classNames: "ds-modal__close ds-modal__close--icon"
         })}}
 
         {% if params.title %}
@@ -38,7 +38,8 @@
               ] | join(" ") %}
               {{ Button({
                 text: params.secondaryButton.text,
-                variant: "secondaryOutlined",
+                variant: "primary",
+                emphasis: "outline",
                 href: params.secondaryButton.href,
                 classNames: secondaryButtonClasses,
                 attributes: params.secondaryButton.attributes,

package/components/modal/modal.scss

@@ -78,7 +78,7 @@ body.no-scroll {
       border-radius: ds-border-radius(x1);
     }
 
-    .ds-icon-btn.ds-modal__close {
+    .ds-btn.ds-modal__close--icon {
       position: absolute;
       top: ds-spacing($ds-s-100);
       right: ds-spacing($ds-s-100);
@@ -105,12 +105,12 @@ body.no-scroll {
         display: flex;
         flex-wrap: wrap;
 
-        .ds-btn--primary:not(:only-child) {
+        .ds-btn--default:not(:only-child) {
           order: 1;
           margin-bottom: ds-spacing($ds-s-100);
         }
 
-        .ds-btn--secondaryOutlined:not(:only-child) {
+        .ds-btn--outline:not(:only-child) {
           order: 2;
         }
       }
@@ -119,7 +119,7 @@ body.no-scroll {
         display: flex;
         justify-content: center;
 
-        .ds-btn--secondaryOutlined:not(:only-child) {
+        .ds-btn--outline:not(:only-child) {
           margin-right: ds-spacing($ds-s-100);
         }
       }

package/components/tag-header/tag-header.njk

@@ -32,7 +32,7 @@
         {% if params.toggle %}
           {{ ButtonToggle({
             variant: 'brand',
-            size: 'small',
+            size: 'medium',
             text: params.toggleText,
             selectedText: params.toggleSelectedText,
             selected: params.toggleSelected,

package/components/teaser-list-swipe/teaser-list-swipe.njk

@@ -42,7 +42,8 @@
     {% if arrowPosition === 'floating' %}
       {{ IconButton({
         iconName: 'arrow_back',
-        variant: 'elevated',
+        variant: 'primary',
+        emphasis: 'elevated',
         size: 'small',
         attributes: { 'aria-label': 'Föregående' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
@@ -50,7 +51,8 @@
       }) }}
       {{ IconButton({
         iconName: 'arrow_forward',
-        variant: 'elevated',
+        variant: 'primary',
+        emphasis: 'elevated',
         size: 'small',
         attributes: { 'aria-label': 'Nästa' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--forward hidden-mobile hidden-tablet',

package/components/teaser-list-vertical/teaser-list-vertical.njk

@@ -35,7 +35,7 @@
         {{ Button({
           text: params.listLink.text,
           href: params.listLink.url,
-          variant: 'secondaryFilled',
+          variant: 'secondary',
           fullWidth: true,
           classNames: params.listLink.classNames,
           attributes: params.listLink.attributes,

package/components/text-input/text-input.scss

@@ -95,7 +95,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 }
 
-.ds-icon-btn.ds-text-input__password-toggle {
+.ds-btn.ds-text-input__password-toggle {
   position: absolute;
   top: ds-px-to-rem($ds-text-input-toggle-btn__top);
   right: ds-spacing($ds-s-025);

package/foundations/variables/opacity.scss

@@ -1,2 +1,2 @@
 $ds-opacity-component-disabled: 0.5;
-$ds-opacity-component-hover-pressed: 0.8;
+$ds-opacity-component-hover-pressed: 0.7;

package/foundations/variables/typographyTokensList.scss

@@ -23,6 +23,7 @@ $ds-typography-detailteaser-twin: 'detailteaser-twin';
 $ds-typography-detailteaser-large-compact: 'detailteaser-large-compact';
 $ds-typography-detailteaser-large-compact-opinion: 'detailteaser-large-compact-opinion';
 $ds-typography-detailteaser-large-storRubrik-opinion: 'detailteaser-large-storRubrik-opinion';
+$ds-typography-detailstandard-button-xlarge: 'detailstandard-button-xlarge';
 $ds-typography-expressiveheading01: 'expressiveheading01';
 $ds-typography-expressiveheading02: 'expressiveheading02';
 $ds-typography-expressiveheading03: 'expressiveheading03';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -181,6 +181,13 @@ $typographyTokensScreenExtraLarge: (
     textCase: uppercase,
     letterSpacing: 0.5
   ),
+  detailstandard-button-xlarge: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 18,
+    lineHeight: 1.75,
+    letterSpacing: 0
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
@@ -340,7 +347,7 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 24,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   functionalheading04: (

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -182,6 +182,13 @@ $typographyTokensScreenLarge: (
     textCase: uppercase,
     letterSpacing: 0.5
   ),
+  detailstandard-button-xlarge: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 18,
+    lineHeight: 1.75,
+    letterSpacing: 0
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
@@ -341,7 +348,7 @@ $typographyTokensScreenLarge: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 24,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   functionalheading04: (

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -182,6 +182,13 @@ $typographyTokensScreenSmall: (
     letterSpacing: 0,
     fontStyle: italic
   ),
+  detailstandard-button-xlarge: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 18,
+    lineHeight: 1.75,
+    letterSpacing: 0
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
@@ -341,7 +348,7 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 20,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   functionalheading04: (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "14.0.3",
+  "version": "15.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/tokens/typography-list.json

@@ -24,6 +24,7 @@
   "detailteaser-large-compact": "'detailteaser-large-compact'",
   "detailteaser-large-compact-opinion": "'detailteaser-large-compact-opinion'",
   "detailteaser-large-storRubrik-opinion": "'detailteaser-large-storRubrik-opinion'",
+  "detailstandard-button-xlarge": "'detailstandard-button-xlarge'",
   "expressiveheading01": "'expressiveheading01'",
   "expressiveheading02": "'expressiveheading02'",
   "expressiveheading03": "'expressiveheading03'",

package/components/floating-button/README.md

@@ -1,41 +0,0 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/floating-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/floating-button)
-- Storybook: [Button > Web](https://designsystem.dn.se/?path=/story/components-app-web-floatingbutton-web)
-
-----
-
-# FloatingButton
-
-## Parameters
-
-|parameter | type | required | options | default | description |
-|:--- | :--- | :--- | :--- | :--- | :--- |
-|text | String | yes | | | |
-|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|size| String | no | default, small | default | |
-|iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icon-web--all |
-|iconPosition | String | no | none, left, right | none | |
-|loading | bool | no | true, false | false | |
-|href | String | no | | | If href is set the button will be rendered as an a-tag |
-|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
-|classNames | String | no | | | Ex. "my-special-class" |
-|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
-
-## Minimum requirement example
-
-### Nunjucks
-
-These are copy paste friendly examples to quickliy get started using a component.
-
-```html
-{% from '@bonniernews/dn-design-system-web/components/floating-button/floating-button.njk' import FloatingButton %}
-
-{{ FloatingButton({
-  text: 'With icon',
-  iconName: 'arrow_forward'
-})}}
-```
-
-### SCSS
-```scss
-@use "@bonniernews/dn-design-system-web/components/floating-button/floating-button";
-```

package/components/floating-button/floating-button.njk

@@ -1,41 +0,0 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
-{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-
-{% macro FloatingButton(params) %}
-  {%- set componentClassName = "ds-floating-btn" %}
-  {%- set classNamePrefix = componentClassName + "--" %}
-  {%- set text = params.text %}
-  {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + text + '"' if not params.attributes["aria-label"] else "" %}
-
-  {%- set loadingHtml %}
-    {{ Spinner({ size: 'small', forcePx: params.forcePx }) }}
-  {% endset %}
-
-  {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set iconSvg = IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
-  {% endif %}
-
-  {%- set classes = [
-    componentClassName,
-    "ds-force-px" if params.forcePx,
-    "ds-loading" if params.loading,
-    classNamePrefix + params.size if params.size and params.size !== "default",
-    classNamePrefix + "icon" if iconSvg,
-    classNamePrefix + "icon-" + params.iconPosition if iconSvg,
-    params.classNames if params.classNames
-  ] | join(" ") %}
-
-  {%- if params.href %}
-    <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </a>
-  {% else %}
-    <button {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <span aria-hidden="true">{{ text }}</span>
-      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-    </button>
-  {% endif %}
-{% endmacro %}

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);
-}