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

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

@@ -2,6 +2,8 @@
 @use "../button-toggle/button-toggle.scss";
 @use "../icon-button/icon-button.scss";
 
+$ds-group-header__icon-size: 24px;
+
 .ds-group-header {
   --group-header-background: #{$ds-color-background-primary};
   --group-header-color: #{$ds-color-text-primary};
@@ -40,6 +42,11 @@
     }
   }
 
+  &--image {
+    display: flex;
+    align-items: center;
+  }
+
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn--toggle {
@@ -69,8 +76,8 @@
   }
 
   .ds-group-header__icon {
-    height: ds-px-to-rem(24px);
-    width: ds-px-to-rem(24px);
+    height: ds-px-to-rem($ds-group-header__icon-size);
+    width: ds-px-to-rem($ds-group-header__icon-size);
     color: var(--group-header-icon-color);
   }
 
@@ -112,4 +119,21 @@
   &--bautaxl .ds-group-header__title {
     @include ds-typography($ds-typography-detailbaota-xl-label);
   }
+
+  .ds-group-header__image {
+    margin-left: ds-spacing($ds-s-100);
+
+    .picture,
+    img {
+      max-height: ds-px-to-rem($ds-group-header__icon-size);
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    + .ds-group-header__title {
+      padding-left: ds-spacing($ds-s-075);
+    }
+  }
 }

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

@@ -14,6 +14,7 @@
     selected: params.selected,
     forcePx: params.forcePx,
     classNames: params.classNames,
-    attributes: params.attributes
+    attributes: params.attributes,
+    a11y: params.a11y
   }) }}
 {% endmacro %}

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

@@ -18,7 +18,6 @@
 |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

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

@@ -13,7 +13,6 @@
     selected: params.selected,
     forcePx: params.forcePx,
     classNames: params.classNames,
-    attributes: params.attributes,
-    a11y: params.a11y
+    attributes: params.attributes
   }) }}
 {% endmacro %}

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/README-accordion.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain item types |
 |accordionContent | String | yes | | | It is possible to use html |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-checkbox.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | Also used as id |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-image.md

@@ -0,0 +1,48 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
+- Storybook: [ListItem > ImageListItem](https://designsystem.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
+- Storybook (Latest): [ListItem > ImageListItem](https://designsystem-latest.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
+
+----
+
+# Image List Item
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
+|title | String | no | | | |
+|subtitle | String | no | | | |
+|meta | String | no | | | |
+|disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
+|border | bool | no | true, false | false | |
+|mediaHtml | String | no | | | Main image |
+|trailingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
+|href | String | no | | | If href is set the list item 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/list-item/list-item.njk' import ListItem %}
+
+{{ ListItem({
+  listItemType: 'image',
+  title: 'My list item',
+  mediaHtml: 'image-html',
+  trailingIcon: 'arrow_forward',
+  subtitle: 'Subtitle text',
+  meta: 'Meta text'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/list-item/list-item";
+```

package/components/list-item/README-radio.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | |
 |id | String | yes | | | |
 |title | String | no | | | |

package/components/list-item/README-switch.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |name | String | yes | | | Also used as id |
 |title | String | no | | | |
 |subtitle | String | no | | | |

package/components/list-item/README-toggle.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | yes | accordion, checkbox, radio, toggle, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | yes | accordion, checkbox, radio, toggle, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |title | String | yes | | | |
 |titleHref | String | no | | | If titleHref is set the list item title will be rendered as an a-tag |
 |subtitle | String | no | | | |

package/components/list-item/README.md

@@ -10,7 +10,7 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|listItemType | String | no | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
+|listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
 |title | String | no | | | |
 |subtitle | String | no | | | |
 |meta | String | no | | | |

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

@@ -14,6 +14,9 @@
         {% if iconLeftSvg %}
           <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
         {% endif %}
+        {% if params.listItemType == 'image' %}
+          <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
+        {% endif %}
         {% if params.title %}
           <div class="{{ componentClassName + '__titles'}}">
             {% if params.titleHref and not params.disabled %}
@@ -46,7 +49,7 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set attributes = getAttributes(params.attributes) %}
 
-  {% if params.listItemType == "standard" or not params.listItemType %}
+  {% if params.listItemType == "standard" or params.listItemType == "image" or not params.listItemType %}
     {% set element = "link" if params.href and not params.disabled else "button"  %}
     {% set variantClass = classNamePrefix + "standard" %}
   {% else %}
@@ -54,7 +57,7 @@
     {% set variantClass = classNamePrefix + params.listItemType %}
   {% endif %}
 
-  {% if params.leadingIcon %}
+  {% if params.leadingIcon and params.listItemType != "image" %}
     {% set iconLeftSvg = IconUse({ icon: params.leadingIcon }) %}
   {% endif %}
 

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

@@ -110,6 +110,41 @@ $ds-list-item__icon-size: 24px;
     margin-left: ds-spacing($ds-s-100);
   }
 
+  .ds-list-item__image {
+    .picture,
+    img {
+      max-height: ds-px-to-rem($ds-list-item__icon-size);
+    }
+
+    @at-root .ds-force-px#{&} {
+      .picture,
+      img {
+        height: $ds-list-item__icon-size;
+        width: $ds-list-item__icon-size;
+      }
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    + .ds-list-item__titles {
+      margin-left: ds-spacing($ds-s-100);
+
+      .ds-list-item__title {
+        @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+
+        @at-root .ds-force-px#{&} {
+          @include ds-typography(
+            $ds-typography-functional-body02regular,
+            $forcePx: true,
+            $fontWeight: $ds-fontweight-semibold
+          );
+        }
+      }
+    }
+  }
+
   @include ds-hover() {
     &:hover:not(.ds-list-item--disabled) .ds-list-item__inner::before {
       background-color: $ds-color-component-primary-overlay;

package/components/pictogram/pictogram.scss

@@ -11,7 +11,7 @@ $ds-pictogram__icon-size--large: 40px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: $ds-color-static-red-200;
+  background-color: $ds-color-static-red-100;
   height: ds-px-to-rem($ds-pictogram__size);
   width: ds-px-to-rem($ds-pictogram__size);
   @at-root .ds-force-px#{&} {

package/components/tag-header/tag-header.scss

@@ -33,7 +33,7 @@
   }
 
   .ds-tag-header__vignette {
-    @include ds-typography($ds-typography-functional-meta02bold);
+    @include ds-typography($ds-typography-functionallabel01);
     color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
     display: block;
@@ -44,7 +44,7 @@
   }
 
   .ds-tag-header__title {
-    @include ds-typography($ds-typography-functional-heading03bold);
+    @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
     color: $ds-color-text-primary;
     margin: 0;
     word-break: break-word;
@@ -60,7 +60,7 @@
   }
 
   .ds-tag-header__description {
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     margin: ds-spacing($ds-s-100 $ds-s-100 0);
     border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
@@ -72,7 +72,7 @@
 
     b,
     strong {
-      @include ds-typography($ds-typography-functional-body02semibold);
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
     }
 
     p {

package/components/teaser-footer/teaser-footer.scss

@@ -9,7 +9,7 @@
 }
 
 .ds-teaser-footer__notes {
-  @include ds-typography($ds-typography-functional-meta02regular);
+  @include ds-typography($ds-typography-functionalmeta02);
   display: block;
   color: $ds-color-text-primary-02;
 }
@@ -21,7 +21,7 @@
   margin-top: ds-spacing($ds-s-050);
 
   .ds-teaser-footer__title {
-    @include ds-typography($ds-typography-functional-body01semibold);
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
     color: $ds-color-text-primary;
   }
 

package/components/teaser-large/teaser-large.scss

@@ -33,7 +33,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading04bold);
+    @include ds-typography($ds-typography-detailteaser-large);
   }
 
   @include ds-hover(true) {
@@ -44,13 +44,13 @@
 
   &.ds-teaser--large-big-italic {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading04italicregular);
+      @include ds-typography($ds-typography-detailteaser-large-storRubrik-opinion);
     }
   }
 
   &.ds-teaser--large-italic {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading03italicregular);
+      @include ds-typography($ds-typography-detailteaser-large-opinion);
     }
 
     @include ds-hover(true) {

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

@@ -43,7 +43,7 @@
       {{ IconButton({
         iconName: 'arrow_back',
         variant: 'primary',
-        emphasis: 'elevated',
+        emphasis: 'outline',
         size: 'small',
         attributes: { 'aria-label': 'Föregående' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
@@ -52,7 +52,7 @@
       {{ IconButton({
         iconName: 'arrow_forward',
         variant: 'primary',
-        emphasis: 'elevated',
+        emphasis: 'outline',
         size: 'small',
         attributes: { 'aria-label': 'Nästa' },
         classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--forward hidden-mobile hidden-tablet',

package/components/teaser-package/README.md

@@ -13,6 +13,7 @@
 |teasersHtml | HTML String | yes | | | HTML teaser output |
 |vignetteText | String | yes | | | Heading of the teaser |
 |vignetteTargetUrl | String | no | | | Target URL for the teaser |
+|vignetteIconHtml | string | no | | | The icon markup for the vignette |
 |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/teaser-package/teaser-package.njk

@@ -11,12 +11,20 @@
     params.classNames if params.classNames
   ] | join(" ") %}
   {%- set attributes = getAttributes(params.attributes) %}
+
+  {% if params.vignetteIconHtml %}
+    {% set variant = 'image' %}
+  {% elif params.areaType === 'bauta' or params.areaType === 'bautaxl'%}
+    {% set variant = params.areaType  %}
+  {% endif %}
+
   <div class="{{ classes }}">
     {% if params.vignetteText %}
       {{ GroupHeader({
         title: params.vignetteText,
         href: params.vignetteTargetUrl,
-        variant: params.areaType if params.areaType === 'bauta' or params.areaType === 'bautaxl'
+        variant: variant,
+        mediaHtml: params.vignetteIconHtml if params.vignetteIconHtml
       }) }}
     {% endif %}
     {{ params.teasersHtml | safe }}

package/components/teaser-split/teaser-split.scss

@@ -66,7 +66,7 @@
     }
 
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading02bold);
+      @include ds-typography($ds-typography-detailteaser-twin);
     }
 
     .ds-teaser__media {

package/components/teaser-standard/teaser-standard.scss

@@ -7,10 +7,10 @@
   overflow: hidden;
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading03bold);
+    @include ds-typography($ds-typography-detailteaser-standard);
 
     &--italic {
-      @include ds-typography($ds-typography-expressive-heading03italicregular);
+      @include ds-typography($ds-typography-detailteaser-standard-opinion);
     }
   }
 

package/components/tooltip/README.md

@@ -0,0 +1,51 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/tooltip](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tooltip)
+- Storybook: [Tooltip](https://designsystem.dn.se/?path=/docs/basic-tooltip--docs)
+- Storybook (Latest): [Tooltip](https://designsystem-latest.dn.se/?path=/docs/basic-tooltip--docs)
+
+----
+
+# Tooltip
+
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+| arrowPosition | String | yes | "top" or "bottom" | | Position of tooltip arrow |
+| title | String | no | | | Title in tooltip |
+| closeButton | bool | no | true, false | false | Render close button if true  |
+| closeOnClickOutside | bool | no | true, false | false | Set to true to be able to close tooltip when clicking outside of it  |
+| forceOpen | bool | no | true, false | false | Show tooltip on render |
+| 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/tooltip/tooltip.njk' import Tooltip %}
+
+{% call Tooltip({closeButton: true, closeOnClickOutside: false, arrowPosition: "top"}) %}
+  <h2>Titel</h2>
+  <p>Text i vår tooltip</p>
+{% endcall %}
+```
+
+### Scss
+
+```scss
+@use "@bonniernews/dn-design-system-web/components/tooltip/tooltip";
+```
+
+### Javascript
+
+```javascript
+import { initTooltip, openTooltip } from '@bonniernews/dn-design-system-web/components/tooltip/tooltip.js'
+const tooltipEl = document.querySelector(".ds-tooltip");
+initTooltip(tooltipEl);
+openTooltip(tooltipEl);
+```

package/components/tooltip/tooltip.js

@@ -0,0 +1,59 @@
+export {
+  initTooltip,
+  openTooltip,
+  closeTooltip,
+  toggleTooltip,
+  initTooltipStorybook
+}
+
+const TOOLTIP_HIDDEN = "ds-tooltip--hidden";
+
+let setupTooltipClickListener = true;
+
+function initTooltip(tooltipEl) {
+  const tooltipsClosingOnOutsideClick = document.getElementsByClassName("ds-tooltip--close-outside-click");
+  
+  if (setupTooltipClickListener && tooltipsClosingOnOutsideClick.length > 0) {
+    setupTooltipClickListener = false;
+
+    document.addEventListener("click", (e) => {
+      const tooltipClick = e.target.closest(".ds-tooltip");
+      if (tooltipClick) return;
+      
+      const tooltipsToClose = document.getElementsByClassName('ds-tooltip--close-outside-click');
+      for (const tooltip of tooltipsToClose) {
+        closeTooltip(tooltip)
+      }
+    });
+  }
+
+  const closeButtons = Array.from(tooltipEl.getElementsByClassName("ds-tooltip__close"));
+  closeButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      closeTooltip(tooltipEl);
+    });
+  });
+}
+
+function toggleTooltip(tooltipEl, force) {
+  tooltipEl.classList.toggle(TOOLTIP_HIDDEN, !force);
+  return !tooltipEl.classList.contains(TOOLTIP_HIDDEN);
+}
+
+function openTooltip(tooltipEl) {
+  tooltipEl.classList.remove(TOOLTIP_HIDDEN);
+  return true;
+}
+
+function closeTooltip(tooltipEl) {
+  tooltipEl.classList.add(TOOLTIP_HIDDEN);
+  return false;
+}
+
+function initTooltipStorybook() {
+  const tooltips = Array.from(document.getElementsByClassName("ds-tooltip"));
+  tooltips.forEach((tooltipEl) => {
+    initTooltip(tooltipEl);
+    openTooltip(tooltipEl);
+  });
+}