@bonniernews/dn-design-system-web 14.1.0 → 14.2.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [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)
 
 

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.1.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",