@bonniernews/dn-design-system-web 27.0.1 → 28.0.1-beta.0

package/components/group-header/group-header.njk

@@ -1,7 +1,7 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
 {% macro GroupHeader(params) %}
   {% set componentClassName = "ds-group-header" %}
@@ -49,8 +49,8 @@
     {# there is no static-white toggle btn so it is disabled for bauta for now #}
     {% if params.type == 'toggle' and not params.variant %}
       {{ ButtonToggle({
-        variant: "brand",
-        size: 'small',
+        variant: "primary",
+        size: 'sm',
         text: params.toggleText,
         selectedText: params.toggleSelectedText,
         selected: params.toggleSelected,
@@ -59,20 +59,20 @@
         attributes: params.toggleAttributes
       }) }}
     {% elif (params.type == 'arrows') %}
-      {%  set buttonVariant = "staticWhite" if params.variant else "primary" %}
+      {%  set buttonVariant = "staticWhite" if params.variant else "secondaryOutline" %}
       <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
-        {{ IconButton({
+        {{ Button({
           variant: buttonVariant,
-          emphasis: "outline",
-          size: "small",
+          size: "sm",
+          isIconButton: true,
           iconName: "arrow_back",
           classNames: "ds-group-header__arrow ds-group-header__arrow--left",
           attributes: {"aria-label": "Föregående"}
         }) }}
-        {{ IconButton({
+        {{ Button({
           variant: buttonVariant,
-          emphasis: "outline",
-          size: "small",
+          size: "sm",
+          isIconButton: true,
           iconName: "arrow_forward",
           classNames: "ds-group-header__arrow ds-group-header__arrow--right",
           attributes: {"aria-label": "Nästa"}

package/components/group-header/group-header.scss

@@ -1,6 +1,5 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../button-toggle/button-toggle.scss";
-@use "../icon-button/icon-button.scss";
+@use "../button/button.scss";
 
 $ds-group-header__icon-size: 24px;
 

package/components/list-item/list-item-types.ts

@@ -3,7 +3,7 @@ import { ComponentChildren } from "preact";
 import { ButtonProps } from '../radio-button/radio-button'
 import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts'
 import { SwitchInnerProps } from '../switch/switch'
-import { ButtonToggleProps } from '../button/button-types'
+import { ButtonToggleStandardProps } from '../button/button-types'
 
 export interface ListItemSharedProps {
   title?: string
@@ -67,7 +67,7 @@ export interface SwitchListItemProps
 
 export interface ToggleListItemProps
   extends ListItemSharedProps,
-    ButtonToggleProps,
+    ButtonToggleStandardProps,
     Pick<ListItemBaseProps, 'title' | 'subtitle' | 'disabled' | 'selected'> {
   name: string
   titleHref?: string
@@ -104,7 +104,7 @@ export interface InnerListItemProps
       | 'toggleSelectedText'
       | 'disabled'
     >,
-    Pick<ButtonToggleProps, 'variant'> {
+    Pick<ButtonToggleStandardProps, 'variant'> {
   componentClassName: string
 }
 

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

@@ -147,10 +147,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondary"),
+          variant: params.variant | default("secondaryFilled"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "small",
+          size: "sm",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}
@@ -164,10 +164,10 @@
           text: params.toggleText,
           selected: params.selected,
           selectedText: params.toggleSelectedText,
-          variant: params.variant | default("secondary"),
+          variant: params.variant | default("secondaryFilled"),
           disabled: params.disabled,
           forcePx: params.forcePx,
-          size: "small",
+          size: "sm",
           attributes: params.elementAttributes,
           classNames: params.elementClassNames
         })}}

package/components/modal/modal.njk

@@ -1,6 +1,5 @@
 {% 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) %}
@@ -16,10 +15,11 @@
   <div class="{{ classes }}">
     <dialog class="{{ componentClassName + '__inner' }}" {{- attributes | safe }}>
       <div class="{{ componentClassName + '__content' }}">
-        {{ IconButton({
+        {{ Button({
           variant: "transparent",
-          size: "small",
+          size: "sm",
           iconName: "close",
+          isIconButton: true,
           classNames: "ds-modal__close ds-modal__close--icon"
         })}}
 
@@ -32,14 +32,13 @@
         {% if params.primaryButton or params.secondaryButton %}
           <div class="ds-modal__buttons">
             {% if params.secondaryButton %}
-              {%- set secondaryButtonClasses = [
+              {%- set secondaryButtonClasses = ["ds-modal__secondary-button",
                 "ds-modal__close" if params.secondaryButton.isCloseButton,
                 params.secondaryButton.classNames if params.secondaryButton.classNames
               ] | join(" ") %}
               {{ Button({
                 text: params.secondaryButton.text,
-                variant: "primary",
-                emphasis: "outline",
+                variant: "secondaryOutline",
                 href: params.secondaryButton.href,
                 classNames: secondaryButtonClasses,
                 attributes: params.secondaryButton.attributes,
@@ -51,11 +50,14 @@
             {% endif %}
 
             {% if params.primaryButton %}
+            {%- set primaryButtonClasses = ["ds-modal__primary-button",
+              params.primaryButton.classNames if params.primaryButton.classNames
+          ] | join(" ") %}
               {{ Button({
                 text: params.primaryButton.text,
-                variant: "primary",
+                variant: "primaryBlack",
                 href: params.primaryButton.href,
-                classNames: params.primaryButton.classNames,
+                classNames: primaryButtonClasses,
                 attributes: params.primaryButton.attributes,
                 forcePx: params.forcePx,
                 mobile: {

package/components/modal/modal.scss

@@ -1,7 +1,6 @@
 @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";
 
 body:has(dialog[open]),
 body.no-scroll {
@@ -107,12 +106,12 @@ body.no-scroll {
         display: flex;
         flex-wrap: wrap;
 
-        .ds-btn--default:not(:only-child) {
+        .ds-modal__primary-button:not(:only-child) {
           order: 1;
           margin-bottom: ds-spacing($ds-s-100);
         }
 
-        .ds-btn--outline:not(:only-child) {
+        .ds-modal__secondary-button:not(:only-child) {
           order: 2;
         }
       }
@@ -121,7 +120,7 @@ body.no-scroll {
         display: flex;
         justify-content: center;
 
-        .ds-btn--outline:not(:only-child) {
+        .ds-modal__secondary-button:not(:only-child) {
           margin-right: ds-spacing($ds-s-100);
         }
       }

package/components/pagination/pagination.njk

@@ -1,6 +1,5 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/text-button/text-button.njk' import TextButton %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro Pagination(params) %}
   {%- set componentClassName = "ds-pagination" %}

package/components/profile-header/profile-header.njk

@@ -18,8 +18,8 @@
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
           {% if params.toggle %}
             {{ ButtonToggle({
-              variant: 'brand',
-              size: 'medium',
+              variant: 'primary',
+              size: 'md',
               text: params.toggleText,
               selectedText: params.toggleSelectedText,
               selected: params.toggleSelected,

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

@@ -26,8 +26,8 @@
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
           {% if params.toggle %}
             {{ ButtonToggle({
-              variant: 'brand',
-              size: 'medium',
+              variant: 'primary',
+              size: 'md',
               text: params.toggleText,
               selectedText: params.toggleSelectedText,
               selected: params.toggleSelected,

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

@@ -1,8 +1,8 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
+{% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
 
 {% macro TeaserListSwipe(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -45,20 +45,20 @@
     </div>
 
     {% if arrowPosition === 'floating' %}
-      {{ IconButton({
+      {{ Button({
         iconName: 'arrow_back',
-        variant: 'primary',
-        emphasis: 'outline',
-        size: 'small',
+        variant: 'staticWhite',
+        size: 'sm',
+        isIconButton: true,
         attributes: { 'aria-label': 'Föregående' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
         forcePx: true
       }) }}
-      {{ IconButton({
+      {{ Button({
         iconName: 'arrow_forward',
-        variant: 'primary',
-        emphasis: 'outline',
-        size: 'small',
+        variant: 'staticWhite',
+        size: 'sm',
+        isIconButton: true,
         attributes: { 'aria-label': 'Nästa' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--forward hidden-mobile hidden-tablet',
         forcePx: true

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

@@ -1,6 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
-@use "../../components/icon-button/icon-button";
+@use "../../components/button/button.scss";
 @use "../../components/group-header/group-header";
 @use "../../components/teaser-swipe-card/teaser-swipe-card";
 
@@ -47,11 +47,11 @@
       z-index: 5;
 
       &--back {
-        left: 10px;
+        left: ds-spacing($ds-s-125);
       }
 
       &--forward {
-        right: 10px;
+        right: ds-spacing($ds-s-125);
       }
     }
   }

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

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

package/components/text-input/text-input.njk

@@ -1,5 +1,5 @@
-{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %} {# TODO switch to on-off button  #}
 {% from '@bonniernews/dn-design-system-web/assets/form-field/form-field.njk' import FormField %}
+{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
 
 {% macro TextInput(params) %}
   {% set componentClassName = "ds-text-input" %}
@@ -23,10 +23,12 @@
       <label class="{{ componentClassName + '__label'}}" for="{{ params.name }}">{{ params.label }}</label>
     {% endif %}
     {% if password %}
-      {{ IconButton({
+      {{ ButtonToggle({
         variant: "transparent",
-        size: "small",
+        size: "sm",
         iconName: "visibility",
+        selectedIconName: "visibility_off",
+        isIconButton: true,
         classNames: componentClassName + "__password-toggle",
         attributes: {
           id: params.name + "-password-toggle"

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

@@ -1,10 +1,9 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/form-field/form-field.scss";
-@use "../icon-button-toggle/icon-button-toggle.scss";
-@use "../icon-button/icon-button.scss"; // TODO remove when njk is removed
+@use "../../components/button/button.scss";
 
 $ds-text-input-toggle-btn__width: 28px;
-$ds-text-input-toggle-btn__top: 22px;
+$ds-text-input-toggle-btn__top: 20px;
 $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing($ds-s-050));
 
 .ds-form-field__error {

package/components/tooltip/tooltip.njk

@@ -1,6 +1,5 @@
 {% 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 Tooltip(params) %}
@@ -24,12 +23,13 @@
 
       {{ caller() if caller }}
     </div>
-    
+
     {% if params.closeButton %}
-      {{ IconButton({
+      {{ Button({
         variant: "transparent",
-        size: "small",
+        size: "sm",
         iconName: "close",
+        isIconButton: true,
         classNames: "ds-tooltip__close",
         attributes: { "aria-label": "Stäng" }
       })}}

package/components/tooltip/tooltip.scss

@@ -2,7 +2,6 @@
 @use "../../foundations/variables/typographyFontWeight.scss";
 @use "../../components/icon-sprite/icon-sprite.scss";
 @use "../../components/button/button.scss";
-@use "../../components/icon-button/icon-button.scss";
 
 .ds-tooltip {
   background-color: $ds-color-surface-primary-raised-strong;

package/foundations/variables/colorsCssVariables.scss

@@ -35,8 +35,10 @@ $ds-color-text-success: var(--ds-color-text-success);
 $ds-color-text-on-brand: var(--ds-color-text-on-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
-$ds-color-gradients-primary-fade-start: var(--ds-color-gradients-primary-fade-start);
-$ds-color-gradients-primary-fade-end: var(--ds-color-gradients-primary-fade-end);
+$ds-color-gradients-primary-start: var(--ds-color-gradients-primary-start);
+$ds-color-gradients-primary-end: var(--ds-color-gradients-primary-end);
+$ds-color-gradients-overlay-start: var(--ds-color-gradients-overlay-start);
+$ds-color-gradients-overlay-end: var(--ds-color-gradients-overlay-end);
 $ds-color-brand-0: var(--ds-color-brand-0);
 $ds-color-brand-100: var(--ds-color-brand-100);
 $ds-color-brand-200: var(--ds-color-brand-200);

package/foundations/variables/colorsDnDark.scss

@@ -35,8 +35,10 @@ $ds-hex-dark-text-success: #3a8352;
 $ds-hex-dark-text-on-brand: #ffffff;
 $ds-hex-dark-text-body-link: #65a0fc;
 $ds-hex-dark-text-body-link-visited: #65a0fc;
-$ds-hex-dark-gradients-primary-fade-start: #050505;
-$ds-hex-dark-gradients-primary-fade-end: rgba(5, 5, 5, 0);
+$ds-hex-dark-gradients-primary-start: #171717;
+$ds-hex-dark-gradients-primary-end: rgba(23, 23, 23, 0);
+$ds-hex-dark-gradients-overlay-start: rgba(36, 36, 36, 0.5);
+$ds-hex-dark-gradients-overlay-end: rgba(36, 36, 36, 0);
 $ds-hex-dark-brand-0: #fbf4f4;
 $ds-hex-dark-brand-100: #f9eced;
 $ds-hex-dark-brand-200: #f2d9da;

package/foundations/variables/colorsDnLight.scss

@@ -35,8 +35,10 @@ $ds-hex-text-success: #3a8352;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-body-link: #4373ce;
 $ds-hex-text-body-link-visited: #4373ce;
-$ds-hex-gradients-primary-fade-start: #ffffff;
-$ds-hex-gradients-primary-fade-end: #ffffff00;
+$ds-hex-gradients-primary-start: #ffffff;
+$ds-hex-gradients-primary-end: #ffffff00;
+$ds-hex-gradients-overlay-start: #24242480;
+$ds-hex-gradients-overlay-end: #24242400;
 $ds-hex-brand-0: #fbf4f4;
 $ds-hex-brand-100: #f9eced;
 $ds-hex-brand-200: #f2d9da;

package/foundations/variables/gradientsDnDark.scss

@@ -3,10 +3,10 @@ $gradientsDnDark: (
     type: linear,
     angle: 270,
     stops: ((
-      color: #050505,
+      color: #171717,
       position: 0
     ), (
-      color: rgba(5, 5, 5, 0),
+      color: rgba(23, 23, 23, 0),
       position: 1
     ))
   ),
@@ -14,10 +14,10 @@ $gradientsDnDark: (
     type: linear,
     angle: 270,
     stops: ((
-      color: rgba(5, 5, 5, 0),
+      color: rgba(23, 23, 23, 0),
       position: 0
     ), (
-      color: #050505,
+      color: #171717,
       position: 1
     ))
   ),
@@ -25,10 +25,10 @@ $gradientsDnDark: (
     type: linear,
     angle: 180,
     stops: ((
-      color: rgba(5, 5, 5, 0),
+      color: rgba(23, 23, 23, 0),
       position: 0
     ), (
-      color: #050505,
+      color: #171717,
       position: 1
     ))
   ),
@@ -36,10 +36,10 @@ $gradientsDnDark: (
     type: linear,
     angle: 180,
     stops: ((
-      color: #050505,
+      color: #171717,
       position: 0
     ), (
-      color: rgba(5, 5, 5, 0),
+      color: rgba(23, 23, 23, 0),
       position: 1
     ))
   )

package/foundations/variables/typographyList.scss

@@ -43,7 +43,7 @@ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
 $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
 $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
 $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
-$ds-typography-detail-teaser-story: 'detail-teaser-story';
+$ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
 $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
 $ds-typography-detail-article-standard: 'detail-article-standard';
 $ds-typography-detail-article-opinion: 'detail-article-opinion';

package/foundations/variables/typographyScreenExtraLarge.scss

@@ -319,7 +319,7 @@ $typographyScreenExtraLarge: (
     lineHeight: 1.1,
     fontStyle: italic
   ),
-  detail-teaser-story: (
+  detail-teaser-text-i-bild: (
     fontFamily: "DN Serif Display",
     fontSize: 40,
     fontWeight: Regular,

package/foundations/variables/typographyScreenLarge.scss

@@ -319,7 +319,7 @@ $typographyScreenLarge: (
     lineHeight: 1.1,
     fontStyle: italic
   ),
-  detail-teaser-story: (
+  detail-teaser-text-i-bild: (
     fontFamily: "DN Serif Display",
     fontSize: 40,
     fontWeight: Regular,

package/foundations/variables/typographyScreenSmall.scss

@@ -319,7 +319,7 @@ $typographyScreenSmall: (
     lineHeight: 1.2,
     fontStyle: italic
   ),
-  detail-teaser-story: (
+  detail-teaser-text-i-bild: (
     fontFamily: "DN Serif Display",
     fontSize: 32,
     fontWeight: Regular,

package/package.json

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