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

package/CHANGELOG.md

@@ -4,12 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
-## [14.0.5-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@14.0.5-beta.0) (2024-03-11)
+## [14.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.1.0...@bonniernews/dn-design-system-web@14.2.0) (2024-03-12)
+
+
+### Features
+
+* **web:** tooltip ([#1210](https://github.com/BonnierNews/dn-design-system/issues/1210)) ([0f68d20](https://github.com/BonnierNews/dn-design-system/commit/0f68d20d9d950b42af3931f33b61d6d7260dec7d))
+
+## [14.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.4...@bonniernews/dn-design-system-web@14.1.0) (2024-03-11)
 
 
 ### Features
 
 * **app:** create ImageListItem and add font weight prop to all list items ([#1234](https://github.com/BonnierNews/dn-design-system/issues/1234)) ([73e06e9](https://github.com/BonnierNews/dn-design-system/commit/73e06e9df30f2bdb1677dd4bde015ddea9ddb185))
+* **web:** support for images in group header ([#1235](https://github.com/BonnierNews/dn-design-system/issues/1235)) ([f4148dc](https://github.com/BonnierNews/dn-design-system/commit/f4148dc90b104326cd53e72f930510393bb533a6))
 
 
 ### Maintenance

package/components/group-header/README.md

@@ -11,7 +11,7 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | string | yes | | | The title text |
-|variant | string | no | icon, link, toggle, arrows | icon | The variant to render |
+|variant | string | no | icon, link, toggle, arrows, image, bauta, bauataxl, image | icon | The variant to render |
 |href | string | no | | | If given, the title is rendered as a link |
 |linkText | string | no | | | The link text to render (only for variants `link` and `direkt`) |
 |showBottomBorder | boolean | no | | | If true there will be a bottom border |

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

@@ -16,7 +16,10 @@
   ] | join(" ") %}
 
   {% set groupHeaderInner %}
-    <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
+    {% if params.variant == 'image' %}
+      <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
+    {% endif %}
+    <h2 class="{{ componentClassName + '__title'}}">{{ params.title }}</h2>
 
     {% if params.variant == 'link' and params.linkText and params.href %}
       <span class="{{ componentClassName + '__right-link' }}">

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

@@ -112,4 +112,17 @@
   &--bautaxl .ds-group-header__title {
     @include ds-typography($ds-typography-detailbaota-xl-label);
   }
+
+  .ds-group-header__image {
+    margin-left: ds-spacing($ds-s-100);
+    max-height: 24px;
+
+    figure {
+      margin: 0;
+    }
+
+    + .ds-group-header__title {
+      padding-left: ds-spacing($ds-s-075);
+    }
+  }
 }

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

@@ -33,7 +33,7 @@
   }
 
   .ds-tag-header__vignette {
-    @include ds-typography($ds-typography-functionallabel01);
+    @include ds-typography($ds-typography-functional-meta02bold);
     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-functionalheading03, $fontWeight: $ds-fontweight-bold);
+    @include ds-typography($ds-typography-functional-heading03bold);
     color: $ds-color-text-primary;
     margin: 0;
     word-break: break-word;
@@ -60,7 +60,7 @@
   }
 
   .ds-tag-header__description {
-    @include ds-typography($ds-typography-functionalbody02);
+    @include ds-typography($ds-typography-functional-body02regular);
     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-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      @include ds-typography($ds-typography-functional-body02semibold);
     }
 
     p {

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

@@ -9,7 +9,7 @@
 }
 
 .ds-teaser-footer__notes {
-  @include ds-typography($ds-typography-functionalmeta02);
+  @include ds-typography($ds-typography-functional-meta02regular);
   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-functionalbody01, $fontWeight: $ds-fontweight-semibold);
+    @include ds-typography($ds-typography-functional-body01semibold);
     color: $ds-color-text-primary;
   }
 

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

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

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

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

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

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

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,48 @@
+export {
+  initTooltip,
+  openTooltip,
+  initTooltipStorybook
+}
+
+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 openTooltip(tooltipEl) {
+  tooltipEl.classList.remove("ds-tooltip--hidden");
+}
+
+function closeTooltip(tooltipEl) {
+  tooltipEl.classList.add("ds-tooltip--hidden");
+}
+
+function initTooltipStorybook() {
+  const tooltips = Array.from(document.getElementsByClassName("ds-tooltip"));
+  tooltips.forEach((tooltipEl) => {
+    initTooltip(tooltipEl);
+    openTooltip(tooltipEl);
+  });
+}

package/components/tooltip/tooltip.njk

@@ -0,0 +1,38 @@
+{% 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) %}
+  {% set componentClassName = "ds-tooltip" %}
+
+  {%- set classes = [
+    componentClassName,
+    "ds-force-px" if params.forcePx,
+    componentClassName + '--arrow-' + params.arrowPosition,
+    componentClassName + '--close-outside-click' if params.closeOnClickOutside,
+    componentClassName + '--hidden' if not params.forceOpen,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    <div class="{{ componentClassName + '__content' }}">
+      {% if params.title %}
+        <h2>{{ params.title }}</h2>
+      {% endif %}
+
+      {{ caller() if caller }}
+    </div>
+    
+    {% if params.closeButton %}
+      {{ IconButton({
+        variant: "transparent",
+        size: "small",
+        iconName: "close",
+        classNames: "ds-tooltip__close",
+        attributes: { "aria-label": "Stäng" }
+      })}}
+    {% endif %}
+</div>
+{% endmacro %}

package/components/tooltip/tooltip.scss

@@ -0,0 +1,63 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@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-raised;
+  color: $ds-color-text-primary;
+  box-sizing: border-box;
+  position: relative;
+  padding: ds-spacing($ds-s-100);
+  display: flex;
+
+  .ds-tooltip__close {
+    color: $ds-color-icon-primary;
+    align-self: center;
+    margin-left: ds-spacing($ds-s-100);
+  }
+
+  &--hidden {
+    display: none;
+  }
+
+  &.ds-tooltip--arrow-top::after,
+  &.ds-tooltip--arrow-bottom::after {
+    border-bottom-color: $ds-color-surface-raised;
+  }
+
+  &--arrow-top::after {
+    content: "";
+    position: absolute;
+    top: ds-spacing($ds-s-100, "px", true);
+    right: ds-spacing($ds-s-100);
+    border: 8px solid transparent;
+  }
+
+  &--arrow-bottom::after {
+    content: "";
+    position: absolute;
+    bottom: ds-spacing($ds-s-100, "px", true);
+    left: ds-spacing($ds-s-100);
+    border: 8px solid transparent;
+    transform: rotate(180deg);
+  }
+
+  .ds-tooltip__content {
+    @include ds-typography($ds-typography-functionalbody01);
+
+    h2 {
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      margin: 0;
+
+      + p {
+        margin-top: 0;
+      }
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/package.json

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