@bonniernews/dn-design-system-web 15.2.4 → 15.2.6

package/CHANGELOG.md

@@ -4,6 +4,28 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [15.2.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.5...@bonniernews/dn-design-system-web@15.2.6) (2024-05-14)
+
+
+### Features
+
+* **app:** create secondary badge variant ([#1286](https://github.com/BonnierNews/dn-design-system/issues/1286)) ([7771286](https://github.com/BonnierNews/dn-design-system/commit/7771286f5750f823aff39ab611d6b24101330ccd))
+
+
+### Maintenance
+
+* **foundations:** update tokens ([#1304](https://github.com/BonnierNews/dn-design-system/issues/1304)) ([0a14d5c](https://github.com/BonnierNews/dn-design-system/commit/0a14d5cbf733f6fbf2e848dbe3e1fee7069ad292))
+* prerelease packages ([43f15a9](https://github.com/BonnierNews/dn-design-system/commit/43f15a9065f73821e866ef9acd6b6aeccaf269a0))
+* **web:** remove grade from teasers ([#1301](https://github.com/BonnierNews/dn-design-system/issues/1301)) ([5535110](https://github.com/BonnierNews/dn-design-system/commit/5535110f78fe3e09e39f093b49c976d748e7c2fa))
+
+## [15.2.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.4...@bonniernews/dn-design-system-web@15.2.5) (2024-05-13)
+
+
+### Maintenance
+
+* **deps:** remove Axians and Mellerud from allowed IP:s ([#1297](https://github.com/BonnierNews/dn-design-system/issues/1297)) ([7d93341](https://github.com/BonnierNews/dn-design-system/commit/7d93341ae91733fd77d1b10e8184fcefc1cc2372))
+* **web:** update README-UXD.md ([#1300](https://github.com/BonnierNews/dn-design-system/issues/1300)) ([0fbbef2](https://github.com/BonnierNews/dn-design-system/commit/0fbbef22242e989498ffd7341b3bfe46dc5d18fc))
+
 ## [15.2.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.3...@bonniernews/dn-design-system-web@15.2.4) (2024-05-07)
 
 

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

@@ -3,7 +3,6 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserLarge(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -64,9 +63,8 @@
         </h2>
 
         {% if params.text and params.areaType !== "right" %}
-          {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
           <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-            {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
+            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
             {% if params.sticker %}
               <span class="ds-teaser__sticker">
                 {{ params.sticker }}

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

@@ -4,7 +4,6 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserSplit(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -52,9 +51,8 @@
       </h2>
 
       {% if params.text %}
-        {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
         <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-          {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
           {% if params.sticker %}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}

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

@@ -3,7 +3,6 @@
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
-{% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserStandard(params) %}
   {% set componentClassName = "ds-teaser" %}
@@ -61,9 +60,8 @@
       </h2>
 
       {% if params.text and params.areaType !== "right" %}
-        {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
         <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
-          {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
+          {{ TeaserDot({ flashing: params.isFlashingDot }) }}
 
           {% if params.sticker %}
             <span class="ds-teaser__sticker">

package/components/tooltip/README-UXD.md

@@ -0,0 +1,39 @@
+# Tooltip
+
+
+### Default Variant Anatomy
+
+- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
+- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
+- **Body Text:** Additional text content providing detailed information or instructions.
+- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
+
+### Share Variant Anatomy
+
+- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
+- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
+- **Body:** Additional content providing information or instructions.
+- **Share Icon Buttons:** Icon buttons allowing users to perform sharing actions.
+- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
+
+## How to Use
+
+### Web
+Associate tooltips with relevant elements or UI components using appropriate trigger mechanisms (e.g., hover, click).
+
+
+### App
+- Utilize tooltips primarily for providing helpful hints or guidance, avoiding excessive use that may clutter the interface.
+
+
+## Dos
+
+- **Provide Clear and Concise Content:** Ensure tooltip content is brief, relevant, and easy to understand.
+- **Use Appropriate Trigger Mechanisms:** Choose trigger mechanisms (e.g., hover, click) that align with user expectations and interaction patterns.
+
+## Don'ts
+
+- **Avoid Cluttering the Interface:** Refrain from overloading the interface with excessive tooltips, which may overwhelm users and hinder usability.
+- **Don't Hide Essential Information:** Avoid using tooltips as a substitute for essential information or instructions that should be visible without interaction.
+
+

package/foundations/variables/colorsCssVariables.scss

@@ -40,6 +40,9 @@ $ds-color-surface-background: var(--ds-color-surface-background);
 $ds-color-surface-raised: var(--ds-color-surface-raised);
 $ds-color-surface-elevated: var(--ds-color-surface-elevated);
 $ds-color-surface-overlay: var(--ds-color-surface-overlay);
+$ds-color-surface-quiz: var(--ds-color-surface-quiz);
+$ds-color-surface-korsord: var(--ds-color-surface-korsord);
+$ds-color-surface-sudoko: var(--ds-color-surface-sudoko);
 $ds-color-border-primary: var(--ds-color-border-primary);
 $ds-color-border-primary-02: var(--ds-color-border-primary-02);
 $ds-color-border-primary-03: var(--ds-color-border-primary-03);
@@ -70,6 +73,7 @@ $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-static-red-0: var(--ds-color-static-red-0);
 $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

@@ -40,6 +40,9 @@ $ds-hex-dark-surface-raised: #2B2B2B;
 $ds-hex-dark-surface-native-article: #2B2B2B;
 $ds-hex-dark-surface-elevated: #2B2B2B;
 $ds-hex-dark-surface-overlay: #05050580;
+$ds-hex-dark-surface-quiz: #EA3E3F;
+$ds-hex-dark-surface-korsord: #8BB6E8;
+$ds-hex-dark-surface-sudoko: #90D0BD;
 $ds-hex-dark-border-primary: #ffffff21;
 $ds-hex-dark-border-primary-02: #ffffff66;
 $ds-hex-dark-border-primary-03: #EDEDED;
@@ -75,3 +78,4 @@ $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;
+$ds-hex-dark-static-red-0: #FCE8E8;

package/foundations/variables/colorsDnLightTokens.scss

@@ -40,6 +40,9 @@ $ds-hex-surface-background: #ffffff;
 $ds-hex-surface-raised: #EDEDED;
 $ds-hex-surface-elevated: #ffffff;
 $ds-hex-surface-overlay: #05050580;
+$ds-hex-surface-quiz: #EA3E3F;
+$ds-hex-surface-korsord: #8BB6E8;
+$ds-hex-surface-sudoko: #90D0BD;
 $ds-hex-border-primary: #08080821;
 $ds-hex-border-primary-02: #08080866;
 $ds-hex-border-primary-03: #050505;
@@ -70,6 +73,7 @@ $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-static-red-0: #FCE8E8;
 $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/spacingDetail.scss

@@ -11,5 +11,8 @@ $spacingDetail: (
   teaser-vertical-small: 8,
   teaser-horizontal: 16,
   teaser-vertical-medium: 12,
-  direkt-header-bottom: 48
+  direkt-header-bottom: 48,
+  spacing-sm: 4,
+  spacing-md: 8,
+  spacing-lg: 16
 );

package/foundations/variables/spacingDetailList.scss

@@ -11,3 +11,6 @@ $ds-s-teaser-vertical-small: teaser-vertical-small;
 $ds-s-teaser-horizontal: teaser-horizontal;
 $ds-s-teaser-vertical-medium: teaser-vertical-medium;
 $ds-s-direkt-header-bottom: direkt-header-bottom;
+$ds-s-spacing-sm: spacing-sm;
+$ds-s-spacing-md: spacing-md;
+$ds-s-spacing-lg: spacing-lg;

package/foundations/variables/spacingDetailScreenLarge.scss

@@ -6,6 +6,9 @@ $spacingDetailScreenLarge: (
   teaser-horizontal: 16,
   teaser-vertical-medium: 16,
   direkt-header-bottom: 64,
+  spacing-sm: 8,
+  spacing-md: 16,
+  spacing-lg: 32,
   outer: 16,
   outer-negative: -16,
   gap-vertical-static-medium: 16,

package/foundations/variables/typographyTokensList.scss

@@ -24,6 +24,7 @@ $ds-typography-detailteaser-large-compact: 'detailteaser-large-compact';
 $ds-typography-detailteaser-large-compact-opinion: 'detailteaser-large-compact-opinion';
 $ds-typography-detailteaser-large-storRubrik-opinion: 'detailteaser-large-storRubrik-opinion';
 $ds-typography-detailstandard-button-xlarge: 'detailstandard-button-xlarge';
+$ds-typography-detailteaser-large-rightcol: 'detailteaser-large-rightcol';
 $ds-typography-expressiveheading01: 'expressiveheading01';
 $ds-typography-expressiveheading02: 'expressiveheading02';
 $ds-typography-expressiveheading03: 'expressiveheading03';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -149,7 +149,7 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 32,
+    fontSize: 28,
     letterSpacing: 0
   ),
   detailstandard-button: (
@@ -188,6 +188,12 @@ $typographyTokensScreenExtraLarge: (
     lineHeight: 1.75,
     letterSpacing: 0
   ),
+  detailteaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 22,
+    lineHeight: 1.2
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -46,7 +46,7 @@ $typographyTokensScreenLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 32,
+    fontSize: 28,
     letterSpacing: 0
   ),
   detailarticle-direkt: (
@@ -189,6 +189,12 @@ $typographyTokensScreenLarge: (
     lineHeight: 1.75,
     letterSpacing: 0
   ),
+  detailteaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 22,
+    lineHeight: 1.2
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -74,7 +74,7 @@ $typographyTokensScreenSmall: (
   detailmellanrubrik: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    fontSize: 20,
+    fontSize: 22,
     lineHeight: 1.2,
     letterSpacing: 0
   ),
@@ -189,6 +189,12 @@ $typographyTokensScreenSmall: (
     lineHeight: 1.75,
     letterSpacing: 0
   ),
+  detailteaser-large-rightcol: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 22,
+    lineHeight: 1.2
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "15.2.4",
+  "version": "15.2.6",
   "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

@@ -41,6 +41,9 @@
   "surface-raised": "var(--ds-color-surface-raised)",
   "surface-elevated": "var(--ds-color-surface-elevated)",
   "surface-overlay": "var(--ds-color-surface-overlay)",
+  "surface-quiz": "var(--ds-color-surface-quiz)",
+  "surface-korsord": "var(--ds-color-surface-korsord)",
+  "surface-sudoko": "var(--ds-color-surface-sudoko)",
   "border-primary": "var(--ds-color-border-primary)",
   "border-primary-02": "var(--ds-color-border-primary-02)",
   "border-primary-03": "var(--ds-color-border-primary-03)",
@@ -71,6 +74,7 @@
   "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)",
+  "static-red-0": "var(--ds-color-static-red-0)",
   "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

@@ -47,7 +47,10 @@
     "raised": "#2B2B2B",
     "native-article": "#2B2B2B",
     "elevated": "#2B2B2B",
-    "overlay": "#05050580"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD"
   },
   "border": {
     "primary": "#ffffff21",
@@ -90,6 +93,7 @@
     "neutral-500": "#9E9E9E",
     "red-500": "#DA000D",
     "yellow": "#FFE600",
-    "red-200": "#F6ACAD"
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   }
 }

package/tokens/colors-light-mode.json

@@ -47,7 +47,10 @@
     "background": "#ffffff",
     "raised": "#EDEDED",
     "elevated": "#ffffff",
-    "overlay": "#05050580"
+    "overlay": "#05050580",
+    "quiz": "#EA3E3F",
+    "korsord": "#8BB6E8",
+    "sudoko": "#90D0BD"
   },
   "border": {
     "primary": "#08080821",
@@ -83,7 +86,8 @@
     "neutral-500": "#9E9E9E",
     "red-500": "#DA000D",
     "yellow": "#FFE600",
-    "red-200": "#F6ACAD"
+    "red-200": "#F6ACAD",
+    "red-0": "#FCE8E8"
   },
   "gradient": {
     "content-fade-left": "linear-gradient(90deg, #ffffff00 0%, #ffffff 100%)",

package/tokens/spacing-detail-list.json

@@ -11,5 +11,8 @@
   "teaser-vertical-small": "teaser-vertical-small",
   "teaser-horizontal": "teaser-horizontal",
   "teaser-vertical-medium": "teaser-vertical-medium",
-  "direkt-header-bottom": "direkt-header-bottom"
+  "direkt-header-bottom": "direkt-header-bottom",
+  "spacing-sm": "spacing-sm",
+  "spacing-md": "spacing-md",
+  "spacing-lg": "spacing-lg"
 }

package/tokens/typography-list.json

@@ -25,6 +25,7 @@
   "detailteaser-large-compact-opinion": "'detailteaser-large-compact-opinion'",
   "detailteaser-large-storRubrik-opinion": "'detailteaser-large-storRubrik-opinion'",
   "detailstandard-button-xlarge": "'detailstandard-button-xlarge'",
+  "detailteaser-large-rightcol": "'detailteaser-large-rightcol'",
   "expressiveheading01": "'expressiveheading01'",
   "expressiveheading02": "'expressiveheading02'",
   "expressiveheading03": "'expressiveheading03'",