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

package/components/icon-button/icon-button.scss

@@ -1,141 +1,34 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-sprite/icon-sprite.scss";
-@use "../spinner/spinner.scss" as *;
+@use "../button/button.scss" as *;
 
-$ds-icon-btn__border-radius: 50%;
-$ds-btn-outlined__border-width: ds-metrics-border-width(x1);
+.ds-btn.ds-btn--icon-only {
+  border-radius: 50%;
 
-.ds-icon-btn {
-  --ds-icon-btn__padding: #{ds-spacing($ds-s-050)-$ds-btn-outlined__border-width};
-  --ds-icon-btn__icon-size: #{ds-px-to-rem(24px)};
-  --ds-icon-btn__background-color: transparent;
-  --ds-icon-btn__background-color-hover: #{$ds-color-component-primary-overlay};
-  --ds-icon-btn__background-color-active: #{$ds-color-component-primary-overlay-02};
-  --ds-icon-btn__border-color: transparent;
-  --ds-icon-btn__outline-color: #{$ds-color-border-focus-02};
-  --ds-icon-btn__color: #{$ds-color-icon-primary};
-
-  &--outlined {
-    --ds-icon-btn__background-color: #{$ds-color-component-secondary};
-    --ds-icon-btn__border-color: #{$ds-color-border-primary-02};
-    --ds-icon-btn__color: #{$ds-color-icon-primary};
-  }
-
-  &--elevated {
-    box-shadow: ds-shadow-get-box-shadow($ds-shadow-elevation-m);
-    --ds-icon-btn__background-color: #{$ds-color-component-secondary};
-    --ds-icon-btn__border-color: #{$ds-color-border-primary-02};
-    --ds-icon-btn__color: #{$ds-color-icon-primary};
-  }
-
-  &--on-media {
-    --ds-icon-btn__background-color: #{$ds-color-static-transparent-black};
-    --ds-icon-btn__color: #{$ds-color-static-white};
-    @include ds-hover() {
-      &:hover:not(.ds-loading)::before {
-        --ds-icon-btn__background-color-hover: #{$ds-color-static-transparent-white-10};
-      }
-    }
-    &:active:not(.ds-loading)::before {
-      --ds-icon-btn__background-color-active: $ds-color-static-transparent-white-10;
-    }
-    &:disabled:not(.ds-loading) {
-      color: $ds-color-static-white;
-      &::before {
-        background-color: transparent;
-      }
+  &.ds-btn--small {
+    padding: ds-px-to-rem(ds-spacing($ds-s-025) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-025) - $ds-btn-outlined__border-width;
     }
-    &:focus-visible {
-      --ds-icon-btn__outline-color: #{$ds-color-static-white};
-    }
-  }
-
-  &--outlined:disabled,
-  &--elevated:disabled,
-  &--on-media:disabled {
-    --ds-icon-btn__border-color: #{$ds-color-border-primary};
-  }
-
-  &.ds-force-px {
-    --ds-icon-btn__icon-size: 24px;
-  }
-
-  &.ds-icon-btn--small {
-    --ds-icon-btn__padding: #{2px - $ds-btn-outlined__border-width};
   }
 
-  &.ds-icon-btn--large {
-    --ds-icon-btn__padding: #{ds-spacing($ds-s-075)-$ds-btn-outlined__border-width};
-  }
-
-  cursor: pointer;
-  background-color: var(--ds-icon-btn__background-color);
-  color: var(--ds-icon-btn__color);
-  box-sizing: border-box;
-  border-radius: $ds-icon-btn__border-radius;
-  border: $ds-btn-outlined__border-width solid var(--ds-icon-btn__border-color);
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  padding: var(--ds-icon-btn__padding);
-
-  span {
-    pointer-events: none;
-  }
-
-  &::before {
-    content: "";
-    border-radius: inherit;
-    pointer-events: none;
-    position: absolute;
-    top: -$ds-btn-outlined__border-width;
-    left: -$ds-btn-outlined__border-width;
-    bottom: -$ds-btn-outlined__border-width;
-    right: -$ds-btn-outlined__border-width;
-  }
-
-  @include min-click-surface();
-
-  .ds-icon {
-    position: relative;
-    display: flex;
-    height: var(--ds-icon-btn__icon-size);
-    width: var(--ds-icon-btn__icon-size);
-    margin: 0;
-    svg {
-      fill: currentColor;
+  &.ds-btn--medium {
+    padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-050) - $ds-btn-outlined__border-width;
     }
   }
 
-  @include ds-hover() {
-    &:hover:not(.ds-loading)::before {
-      background-color: var(--ds-icon-btn__background-color-hover);
+  &.ds-btn--large {
+    padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width;
     }
   }
-  &:active:not(.ds-loading)::before {
-    background-color: var(--ds-icon-btn__background-color-active);
-  }
 
-  &:focus-visible {
-    outline: ds-metrics-border-width(x2) solid var(--ds-icon-btn__outline-color);
-    outline-offset: 2px;
-  }
-  &:disabled:not(.ds-loading) {
-    cursor: not-allowed;
-    color: $ds-color-icon-disabled;
-    outline: none;
-    &::before {
-      background-color: transparent;
+  &.ds-btn--xlarge {
+    padding: ds-px-to-rem(ds-spacing($ds-s-075) - $ds-btn-outlined__border-width);
+    @at-root .ds-force-px#{&} {
+      padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width;
     }
   }
-
-  @at-root a#{&} {
-    box-sizing: border-box;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  @include ds-loading();
 }

package/components/icon-button-toggle/README.md

@@ -12,12 +12,12 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |selected | bool | no | true, false | false | |
 |iconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
-|selectedIconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |v
+|selectedIconName | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
-|variant | String | no | outlined, transparent | outlined | Design variant |
-|size| String | no | default, small, large | default | |
+|variant | String | no | primary, secondary, brand, staticWhite | primary | Design variant |
+|emphasis | String | no | default, elevated, outline, transparent | default | |
+|size| String | no | small, medium, large | medium | |
 |loading | bool | no | true, false | false | |
-|a11y.visuallyHidden | Object | no | | | Ex. a11y: { visuallyHidden: "Dela på TikTok" } |
 |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
@@ -32,7 +32,7 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.njk' import IconButtonToggle %}
 
 {{ IconButtonToggle({
-  variant: 'outlined',
+  variant: 'primary',
   size: 'default',
   iconName: 'bookmarked',
   selectedIconName: 'bookmark-fill'
@@ -47,7 +47,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ### Javascript
 
 ```javascript
-import dsIconButtonToggle from '@bonniernews/dn-design-system-web/components/icon-button-toggle/icon-button-toggle.js'
-const toggleElements = Array.from(document.getElementsByClassName("ds-icon-btn--toggle"));
-dsIconButtonToggle(toggleElements);
+import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button.js'
+const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
+dsButtonToggle(toggleElements);
 ```

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

@@ -1,5 +1,18 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro IconButtonToggle(params) %}
-  {{ IconButton(params, true) }}
+  {{ IconButton({
+    isToggle: true,
+    variant: params.variant,
+    emphasis: params.emphasis,
+    disabled: params.disabled,
+    size: params.size,
+    iconName: params.iconName,
+    selectedIconName: params.selectedIconName,
+    loading: params.loading,
+    selected: params.selected,
+    forcePx: params.forcePx,
+    classNames: params.classNames,
+    attributes: params.attributes
+  }) }}
 {% endmacro %}

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

@@ -1,17 +1 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../icon-button/icon-button.scss";
-
-.ds-icon-btn--toggle {
-  .ds-icon-btn__on {
-    display: none;
-  }
-
-  &.ds-icon-btn--selected {
-    .ds-icon-btn__on {
-      display: flex;
-    }
-    .ds-icon-btn__off {
-      display: none;
-    }
-  }
-}
+@use "../icon-button/icon-button.scss" as *;

package/components/icon-sprite/README.md

@@ -3,6 +3,7 @@
 - Storybook (Latest): [Icon](https://designsystem-latest.dn.se/?path=/docs/foundations-icons--docs)
 
 ----
+
 # Icons
 
 There are three ways to use icons from DS:

package/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle';
+import {dsButtonToggle} from '@bonniernews/dn-design-system-web/components/button/button';
 
 export {
   dsListItem,
@@ -23,7 +23,7 @@ function dsListItemAccordion(accordionEl) {
 }
 
 function dsListItemToggle(toggleEl) {
-  const toggleElements = Array.from(toggleEl.getElementsByClassName("ds-btn-toggle"));
+  const toggleElements = Array.from(toggleEl.getElementsByClassName("ds-btn--toggle"));
   dsButtonToggle(toggleElements);
 }
 

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

@@ -147,10 +147,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

@@ -278,7 +278,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: 'outline',
         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: 'outline',
         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/introduction/README-UXD.md

@@ -0,0 +1 @@
+## UXD documentation

package/introduction/README.md

@@ -0,0 +1,19 @@
+# DN Design system
+
+<img src="/images/digital-dn.png" width="150">
+
+The design system used by Dagens Nyheter.
+
+## Technical documentation
+
+Foundations, components and helpers of DN design system for web
+
+### Useful links
+
+Storybook: [https://designsystem.dn.se/](https://designsystem.dn.se/)
+
+Github: [https://github.com/BonnierNews/dn-design-system/tree/main/web/src](https://github.com/BonnierNews/dn-design-system/tree/main/web/src)
+
+Changelog: [https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md](https://github.com/BonnierNews/dn-design-system/blob/main/web/src/CHANGELOG.md)
+
+For specific instructions see each component or helper readme.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "14.3.9",
+  "version": "14.4.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/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 %}