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

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/foundations/variables/colorsCssVariables.scss

@@ -51,7 +51,7 @@ $ds-color-border-focus-02: var(--ds-color-border-focus-02);
 $ds-color-border-focus-03: var(--ds-color-border-focus-03);
 $ds-color-border-focus-04: var(--ds-color-border-focus-04);
 $ds-color-background-primary: var(--ds-color-background-primary);
-$ds-color-static-red-200: var(--ds-color-static-red-200);
+$ds-color-static-red-100: var(--ds-color-static-red-100);
 $ds-color-static-black: var(--ds-color-static-black);
 $ds-color-static-transparent-black: var(--ds-color-static-transparent-black);
 $ds-color-static-white: var(--ds-color-static-white);
@@ -69,6 +69,7 @@ $ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
 $ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
 $ds-color-static-red-500: var(--ds-color-static-red-500);
 $ds-color-static-yellow: var(--ds-color-static-yellow);
+$ds-color-static-red-200: var(--ds-color-static-red-200);
 $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
 $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
 $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -56,7 +56,7 @@ $ds-hex-dark-gradient-content-fade-right: linear-gradient(-90deg, #14141400 0%,
 $ds-hex-dark-gradient-content-fade-up: linear-gradient(180deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-up-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
 $ds-hex-dark-gradient-content-fade-down: linear-gradient(0deg, #14141400 0%, #141414 100%);
-$ds-hex-dark-static-red-200: #FAD4D4;
+$ds-hex-dark-static-red-100: #FAD4D4;
 $ds-hex-dark-static-black: #141414;
 $ds-hex-dark-static-transparent-black: #14141499;
 $ds-hex-dark-static-white: #ffffff;
@@ -74,3 +74,4 @@ $ds-hex-dark-static-neutral-100: #EDEDED;
 $ds-hex-dark-static-neutral-500: #9E9E9E;
 $ds-hex-dark-static-red-500: #DA000D;
 $ds-hex-dark-static-yellow: #FFE600;
+$ds-hex-dark-static-red-200: #F6ACAD;

package/foundations/variables/colorsDnLightTokens.scss

@@ -51,7 +51,7 @@ $ds-hex-border-focus-02: #141414;
 $ds-hex-border-focus-03: #DA000D;
 $ds-hex-border-focus-04: #3A8352;
 $ds-hex-background-primary: #ffffff;
-$ds-hex-static-red-200: #FAD4D4;
+$ds-hex-static-red-100: #FAD4D4;
 $ds-hex-static-black: #141414;
 $ds-hex-static-transparent-black: #14141499;
 $ds-hex-static-white: #ffffff;
@@ -69,6 +69,7 @@ $ds-hex-static-neutral-100: #EDEDED;
 $ds-hex-static-neutral-500: #9E9E9E;
 $ds-hex-static-red-500: #DA000D;
 $ds-hex-static-yellow: #FFE600;
+$ds-hex-static-red-200: #F6ACAD;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -67,7 +67,7 @@ $typographyTokensScreenExtraLarge: (
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     fontSize: 24,
     letterSpacing: 0
   ),
@@ -192,7 +192,7 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   expressiveheading02: (
@@ -284,7 +284,7 @@ $typographyTokensScreenExtraLarge: (
     fontWeight: Regular,
     fontSize: 12,
     lineHeight: 1.2,
-    letterSpacing: 0.2
+    letterSpacing: 0
   ),
   functionallabel01: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -74,7 +74,7 @@ $typographyTokensScreenLarge: (
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     fontSize: 24,
     letterSpacing: 0
   ),
@@ -193,7 +193,7 @@ $typographyTokensScreenLarge: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   expressiveheading02: (
@@ -285,7 +285,7 @@ $typographyTokensScreenLarge: (
     fontWeight: Regular,
     fontSize: 12,
     lineHeight: 1.2,
-    letterSpacing: 0.2
+    letterSpacing: 0
   ),
   functionallabel01: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -193,7 +193,7 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 1.1,
+    lineHeight: 1.2,
     letterSpacing: 0
   ),
   expressiveheading02: (
@@ -285,7 +285,7 @@ $typographyTokensScreenSmall: (
     fontWeight: Regular,
     fontSize: 12,
     lineHeight: 1.2,
-    letterSpacing: 0.2
+    letterSpacing: 0
   ),
   functionallabel01: (
     fontFamily: "DN Sans",

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": "15.0.0-beta.0",
+  "version": "15.0.1",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/tokens/colors-css-variables.json

@@ -52,7 +52,7 @@
   "border-focus-03": "var(--ds-color-border-focus-03)",
   "border-focus-04": "var(--ds-color-border-focus-04)",
   "background-primary": "var(--ds-color-background-primary)",
-  "static-red-200": "var(--ds-color-static-red-200)",
+  "static-red-100": "var(--ds-color-static-red-100)",
   "static-black": "var(--ds-color-static-black)",
   "static-transparent-black": "var(--ds-color-static-transparent-black)",
   "static-white": "var(--ds-color-static-white)",
@@ -70,6 +70,7 @@
   "static-neutral-500": "var(--ds-color-static-neutral-500)",
   "static-red-500": "var(--ds-color-static-red-500)",
   "static-yellow": "var(--ds-color-static-yellow)",
+  "static-red-200": "var(--ds-color-static-red-200)",
   "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
   "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
   "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",

package/tokens/colors-dark-mode.json

@@ -72,7 +72,7 @@
     "content-fade-down": "linear-gradient(0deg, #14141400 0%, #141414 100%)"
   },
   "static": {
-    "red-200": "#FAD4D4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
     "transparent-black": "#14141499",
     "white": "#ffffff",
@@ -89,6 +89,7 @@
     "neutral-100": "#EDEDED",
     "neutral-500": "#9E9E9E",
     "red-500": "#DA000D",
-    "yellow": "#FFE600"
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD"
   }
 }

package/tokens/colors-light-mode.json

@@ -65,7 +65,7 @@
     "primary": "#ffffff"
   },
   "static": {
-    "red-200": "#FAD4D4",
+    "red-100": "#FAD4D4",
     "black": "#141414",
     "transparent-black": "#14141499",
     "white": "#ffffff",
@@ -82,7 +82,8 @@
     "neutral-100": "#EDEDED",
     "neutral-500": "#9E9E9E",
     "red-500": "#DA000D",
-    "yellow": "#FFE600"
+    "yellow": "#FFE600",
+    "red-200": "#F6ACAD"
   },
   "gradient": {
     "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",