@bonniernews/dn-design-system-web 13.0.0 → 14.0.1

package/CHANGELOG.md

@@ -4,6 +4,56 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [14.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.0.0...@bonniernews/dn-design-system-web@14.0.1) (2024-03-04)
+
+
+### Bug Fixes
+
+* **app:** button hitslop ([#1229](https://github.com/BonnierNews/dn-design-system/issues/1229)) ([7a0308d](https://github.com/BonnierNews/dn-design-system/commit/7a0308d2ca0c6de7de3ce125a700c56f90afc908))
+* **app:** top bar button check for iconName ([#1225](https://github.com/BonnierNews/dn-design-system/issues/1225)) ([c892d83](https://github.com/BonnierNews/dn-design-system/commit/c892d832e8b0f836890fb00a45eb9cfcab455685))
+
+
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1226](https://github.com/BonnierNews/dn-design-system/issues/1226)) ([141a590](https://github.com/BonnierNews/dn-design-system/commit/141a5903bd20ca7346d219ba204f7ad72064eb36))
+* prerelease packages ([7336b86](https://github.com/BonnierNews/dn-design-system/commit/7336b86db6c3c76f0c816fea7ea364cc39ab6e34))
+* prerelease packages ([5afe298](https://github.com/BonnierNews/dn-design-system/commit/5afe298d749b9ee6c37a792f63148ac1768eddc5))
+* prerelease packages ([c534f5a](https://github.com/BonnierNews/dn-design-system/commit/c534f5afea93fbec24fe410caf8396371f72735a))
+
+## [14.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@13.0.0...@bonniernews/dn-design-system-web@14.0.0) (2024-02-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* **foundations:** update tokens related to vignettes (#1222)
+
+### Features
+
+* **app:** new `Button` ([#1207](https://github.com/BonnierNews/dn-design-system/issues/1207)) ([ed1653d](https://github.com/BonnierNews/dn-design-system/commit/ed1653d411e8c895488917a1fec4cbbd41ec047e))
+* **app:** new `TextButton` ([#1209](https://github.com/BonnierNews/dn-design-system/issues/1209)) ([aa2a98a](https://github.com/BonnierNews/dn-design-system/commit/aa2a98a1d2f08b7209ad649647d3eea8a8707ca3))
+
+
+### Bug Fixes
+
+* **app:** add support for testID in the new buttons ([#1217](https://github.com/BonnierNews/dn-design-system/issues/1217)) ([591a2f9](https://github.com/BonnierNews/dn-design-system/commit/591a2f9a4e8cd8753028985856c10aadc1631d6b))
+* **app:** allow override lineheight again ([#1216](https://github.com/BonnierNews/dn-design-system/issues/1216)) ([6979be3](https://github.com/BonnierNews/dn-design-system/commit/6979be3077914e1426e051b0ea173f6df4b6026b))
+* **app:** create IconButton and revert some button props ([#1221](https://github.com/BonnierNews/dn-design-system/issues/1221)) ([6296edc](https://github.com/BonnierNews/dn-design-system/commit/6296edc1436b19db23f5d4cb5ad3977a271cde43))
+* **app:** support testID in TopBarIconButton ([#1218](https://github.com/BonnierNews/dn-design-system/issues/1218)) ([457741c](https://github.com/BonnierNews/dn-design-system/commit/457741c015214450070f4812a50caa803eab670a))
+* **foundations:** update tokens related to vignettes ([#1222](https://github.com/BonnierNews/dn-design-system/issues/1222)) ([ba498cc](https://github.com/BonnierNews/dn-design-system/commit/ba498cc50a4190459a95eb8e0a902788ebf69910))
+
+
+### Maintenance
+
+* **app:** remove `PressableHighlight` ([#1201](https://github.com/BonnierNews/dn-design-system/issues/1201)) ([ab34c8c](https://github.com/BonnierNews/dn-design-system/commit/ab34c8cd1125d020d734c1b422abe32ef963e36d))
+* prerelease packages ([40e7f76](https://github.com/BonnierNews/dn-design-system/commit/40e7f765e675a9f52cac69653ab421ca7c768bd6))
+* prerelease packages ([0f24211](https://github.com/BonnierNews/dn-design-system/commit/0f242115a56a29fd8391c9c429d8ae03c6f412ae))
+* prerelease packages ([36267b4](https://github.com/BonnierNews/dn-design-system/commit/36267b44d3316b32a8be877f9562307ebca89771))
+* prerelease packages ([77c696a](https://github.com/BonnierNews/dn-design-system/commit/77c696a7bdf3772d1090fe275e04bf99603d1011))
+* prerelease packages ([3832d72](https://github.com/BonnierNews/dn-design-system/commit/3832d72604b5903a9eb2079c6603cab129bfc318))
+* prerelease packages ([b24c7f3](https://github.com/BonnierNews/dn-design-system/commit/b24c7f3495e937a9263a41a9991ee80782c88c8d))
+* prerelease packages ([a76ee70](https://github.com/BonnierNews/dn-design-system/commit/a76ee705ff504f1e7f04c5839e78d46ef02b74da))
+* remove unnecessary memoized style in Icon and IconButton ([#1199](https://github.com/BonnierNews/dn-design-system/issues/1199)) ([be8cef9](https://github.com/BonnierNews/dn-design-system/commit/be8cef9fe9ce742b68d872fec7ebe3fdf211d739))
+
 ## [13.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@12.0.1...@bonniernews/dn-design-system-web@13.0.0) (2024-02-23)
 
 

package/assets/teaser/teaser.scss

@@ -32,7 +32,7 @@ $grade-size: ds-px-to-rem(34px);
 
   .ds-teaser__vignette {
     display: block;
-    @include ds-typography($ds-typography-detailarticle-label);
+    @include ds-typography($ds-typography-functionallabel01);
     color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
   }
@@ -91,7 +91,7 @@ $grade-size: ds-px-to-rem(34px);
   .ds-teaser__sticker {
     display: inline;
     color: $ds-theme-color;
-    @include ds-typography($ds-typography-detailarticle-label);
+    @include ds-typography($ds-typography-functionallabel01);
   }
 
   .ds-teaser__media {
@@ -115,6 +115,7 @@ $grade-size: ds-px-to-rem(34px);
   &--podcast {
     .ds-teaser__vignette {
       display: flex;
+      align-items: center;
     }
 
     .ds-icon--headphones {

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -63,7 +63,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
 
     .ds-teaser-list-vertical__item-vignette {
       display: block;
-      @include ds-typography($ds-typography-detailarticle-label);
+      @include ds-typography($ds-typography-functionallabel01);
       color: $ds-theme-color;
       margin-bottom: ds-spacing($ds-s-025);
     }

package/components/teaser-onsite/teaser-onsite.scss

@@ -7,7 +7,7 @@
 
   .ds-teaser__title {
     color: $ds-theme-color;
-    @include ds-typography($ds-typography-detailarticle-label);
+    @include ds-typography($ds-typography-functionallabel01);
   }
 
   @include ds-hover(true) {

package/foundations/variables/typographyTokensList.scss

@@ -1,8 +1,6 @@
 $ds-typography-detailstandard-button: 'detailstandard-button';
-$ds-typography-detailbottom-nav: 'detailbottom-nav';
 $ds-typography-detaildropcap: 'detaildropcap';
 $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
-$ds-typography-detailarticle-label: 'detailarticle-label';
 $ds-typography-detailmedryckare: 'detailmedryckare';
 $ds-typography-detailbaota-xl-label: 'detailbaota-xl-label';
 $ds-typography-detailarticle-standard: 'detailarticle-standard';
@@ -24,6 +22,7 @@ $ds-typography-detailteaser-standard-opinion: 'detailteaser-standard-opinion';
 $ds-typography-detailteaser-twin: 'detailteaser-twin';
 $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-expressiveheading01: 'expressiveheading01';
 $ds-typography-expressiveheading02: 'expressiveheading02';
 $ds-typography-expressiveheading03: 'expressiveheading03';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -50,25 +50,18 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 48,
     letterSpacing: 0
   ),
-  detaildropcap: (
-    fontFamily: "DN Serif Display",
-    fontWeight: Bold,
-    lineHeight: 1,
-    fontSize: 92,
-    letterSpacing: 0
-  ),
-  detailarticle-quote: (
+  detailteaser-large: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 1.2,
-    fontSize: 28,
+    lineHeight: 1.1,
+    fontSize: 56,
     letterSpacing: 0
   ),
-  detailmellanrubrik: (
-    fontFamily: "DN Serif Display",
+  detailteaser-standard: (
+    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 32,
+    fontSize: 36,
     letterSpacing: 0
   ),
   detailteaser-standard-compact: (
@@ -78,6 +71,20 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 24,
     letterSpacing: 0
   ),
+  detailteaser-large-compact: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 40,
+    lineHeight: 1.1,
+    letterSpacing: 0
+  ),
+  detailteaser-standard-opinion: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    fontSize: 36,
+    lineHeight: 1.1,
+    fontStyle: italic
+  ),
   detailteaser-standard-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
@@ -86,13 +93,6 @@ $typographyTokensScreenExtraLarge: (
     letterSpacing: 0,
     fontStyle: italic
   ),
-  detailteaser-large: (
-    fontFamily: "DN Serif Display",
-    fontWeight: Bold,
-    lineHeight: 1.1,
-    fontSize: 56,
-    letterSpacing: 0
-  ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
@@ -103,24 +103,24 @@ $typographyTokensScreenExtraLarge: (
   ),
   detailteaser-large-storRubrik: (
     fontFamily: "DN Serif Display",
-    fontWeight: Regular,
-    lineHeight: 1.1,
-    fontSize: 56,
-    letterSpacing: 0,
-    fontStyle: italic
-  ),
-  detailteaser-standard: (
-    fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 36,
+    fontSize: 56,
     letterSpacing: 0
   ),
-  detailteaser-standard-opinion: (
+  detailteaser-large-storRubrik-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
+    fontSize: 56,
     lineHeight: 1.1,
-    fontSize: 36,
+    letterSpacing: 0,
+    fontStyle: italic
+  ),
+  detailteaser-large-compact-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    fontSize: 24,
+    lineHeight: 1.2,
     letterSpacing: 0,
     fontStyle: italic
   ),
@@ -131,20 +131,26 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 22,
     letterSpacing: 0
   ),
-  detailteaser-large-compact: (
+  detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    fontSize: 40,
-    lineHeight: 1.1,
+    lineHeight: 1,
+    fontSize: 92,
     letterSpacing: 0
   ),
-  detailteaser-large-compact-opinion: (
-    fontFamily: "DN Serif Headline",
-    fontWeight: Regular,
-    fontSize: 24,
+  detailarticle-quote: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
     lineHeight: 1.2,
-    letterSpacing: 0,
-    fontStyle: italic
+    fontSize: 28,
+    letterSpacing: 0
+  ),
+  detailmellanrubrik: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    lineHeight: 1.1,
+    fontSize: 32,
+    letterSpacing: 0
   ),
   detailstandard-button: (
     fontFamily: "DN Sans",
@@ -153,13 +159,6 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 16,
     letterSpacing: 0
   ),
-  detailbottom-nav: (
-    fontFamily: "DN Sans",
-    fontWeight: SemiBold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    letterSpacing: 0.2
-  ),
   detailstandard-button-small: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
@@ -167,14 +166,6 @@ $typographyTokensScreenExtraLarge: (
     fontSize: 14,
     letterSpacing: 0
   ),
-  detailarticle-label: (
-    fontFamily: "DN Sans",
-    fontWeight: Bold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    textCase: uppercase,
-    letterSpacing: 0.5
-  ),
   detailmedryckare: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
@@ -187,7 +178,7 @@ $typographyTokensScreenExtraLarge: (
     fontWeight: Bold,
     lineHeight: 1.5,
     fontSize: 16,
-    textCase: upperCase,
+    textCase: uppercase,
     letterSpacing: 0.5
   ),
   expressiveheading01: (
@@ -262,14 +253,14 @@ $typographyTokensScreenExtraLarge: (
   ),
   expressiveingress01: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 20,
     lineHeight: 1.5,
     letterSpacing: 0
   ),
   expressiveingress02: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 24,
     lineHeight: 1.5,
     letterSpacing: 0
@@ -293,7 +284,8 @@ $typographyTokensScreenExtraLarge: (
     fontWeight: Bold,
     fontSize: 12,
     lineHeight: 1.1,
-    letterSpacing: 0.5
+    letterSpacing: 0.5,
+    textCase: uppercase
   ),
   functionallabel02: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -90,37 +90,36 @@ $typographyTokensScreenLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 56,
+    fontSize: 40,
     letterSpacing: 0
   ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
     lineHeight: 1.1,
-    fontSize: 36,
+    fontSize: 26,
     letterSpacing: 0,
     fontStyle: italic
   ),
   detailteaser-large-storRubrik: (
     fontFamily: "DN Serif Display",
-    fontWeight: Regular,
+    fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 56,
-    letterSpacing: 0,
-    fontStyle: italic
+    fontSize: 40,
+    letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     lineHeight: 1.1,
-    fontSize: 36,
+    fontSize: 26,
     letterSpacing: 0
   ),
   detailteaser-standard-opinion: (
-    fontFamily: "DN Serif Display",
+    fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     lineHeight: 1.1,
-    fontSize: 36,
+    fontSize: 26,
     letterSpacing: 0,
     fontStyle: italic
   ),
@@ -146,6 +145,14 @@ $typographyTokensScreenLarge: (
     letterSpacing: 0,
     fontStyle: italic
   ),
+  detailteaser-large-storRubrik-opinion: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    fontSize: 40,
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontStyle: italic
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
@@ -153,13 +160,6 @@ $typographyTokensScreenLarge: (
     fontSize: 16,
     letterSpacing: 0
   ),
-  detailbottom-nav: (
-    fontFamily: "DN Sans",
-    fontWeight: SemiBold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    letterSpacing: 0.2
-  ),
   detailstandard-button-small: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
@@ -167,14 +167,6 @@ $typographyTokensScreenLarge: (
     fontSize: 14,
     letterSpacing: 0
   ),
-  detailarticle-label: (
-    fontFamily: "DN Sans",
-    fontWeight: Bold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    textCase: uppercase,
-    letterSpacing: 0.5
-  ),
   detailmedryckare: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
@@ -187,7 +179,7 @@ $typographyTokensScreenLarge: (
     fontWeight: Bold,
     lineHeight: 1.5,
     fontSize: 16,
-    textCase: upperCase,
+    textCase: uppercase,
     letterSpacing: 0.5
   ),
   expressiveheading01: (
@@ -262,14 +254,14 @@ $typographyTokensScreenLarge: (
   ),
   expressiveingress01: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 20,
     lineHeight: 1.5,
     letterSpacing: 0
   ),
   expressiveingress02: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 24,
     lineHeight: 1.5,
     letterSpacing: 0
@@ -293,7 +285,8 @@ $typographyTokensScreenLarge: (
     fontWeight: Bold,
     fontSize: 12,
     lineHeight: 1.1,
-    letterSpacing: 0.5
+    letterSpacing: 0.5,
+    textCase: uppercase
   ),
   functionallabel02: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -6,13 +6,6 @@ $typographyTokensScreenSmall: (
     fontSize: 16,
     letterSpacing: 0
   ),
-  detailbottom-nav: (
-    fontFamily: "DN Sans",
-    fontWeight: SemiBold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    letterSpacing: 0.2
-  ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     lineHeight: 1,
@@ -27,14 +20,6 @@ $typographyTokensScreenSmall: (
     fontSize: 14,
     letterSpacing: 0
   ),
-  detailarticle-label: (
-    fontFamily: "DN Sans",
-    fontWeight: Bold,
-    lineHeight: 1.1,
-    fontSize: 12,
-    textCase: uppercase,
-    letterSpacing: 0.5
-  ),
   detailmedryckare: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
@@ -47,7 +32,7 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     lineHeight: 1.5,
     fontSize: 16,
-    textCase: upperCase,
+    textCase: uppercase,
     letterSpacing: 0.5
   ),
   detailarticle-standard: (
@@ -147,11 +132,10 @@ $typographyTokensScreenSmall: (
   ),
   detailteaser-large-storRubrik: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Regular,
+    fontWeight: Bold,
     lineHeight: 1.1,
     fontSize: 26,
-    letterSpacing: 0,
-    fontStyle: italic
+    letterSpacing: 0
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
@@ -190,6 +174,14 @@ $typographyTokensScreenSmall: (
     letterSpacing: 0,
     fontStyle: italic
   ),
+  detailteaser-large-storRubrik-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    fontSize: 26,
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    fontStyle: italic
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
@@ -262,14 +254,14 @@ $typographyTokensScreenSmall: (
   ),
   expressiveingress01: (
     fontFamily: "DN Serif Text",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 18,
     lineHeight: 1.5,
     letterSpacing: 0
   ),
   expressiveingress02: (
     fontFamily: "DN Serif Headline",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 20,
     lineHeight: 1.5,
     letterSpacing: 0
@@ -293,7 +285,8 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     fontSize: 12,
     lineHeight: 1.1,
-    letterSpacing: 0.5
+    letterSpacing: 0.5,
+    textCase: uppercase
   ),
   functionallabel02: (
     fontFamily: "DN Sans",
@@ -325,7 +318,7 @@ $typographyTokensScreenSmall: (
   ),
   functionalingress02: (
     fontFamily: "DN Sans",
-    fontWeight: Bold,
+    fontWeight: SemiBold,
     fontSize: 20,
     lineHeight: 1.5,
     letterSpacing: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "13.0.0",
+  "version": "14.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/typography-list.json

@@ -1,9 +1,7 @@
 {
   "detailstandard-button": "'detailstandard-button'",
-  "detailbottom-nav": "'detailbottom-nav'",
   "detaildropcap": "'detaildropcap'",
   "detailstandard-button-small": "'detailstandard-button-small'",
-  "detailarticle-label": "'detailarticle-label'",
   "detailmedryckare": "'detailmedryckare'",
   "detailbaota-xl-label": "'detailbaota-xl-label'",
   "detailarticle-standard": "'detailarticle-standard'",
@@ -25,6 +23,7 @@
   "detailteaser-twin": "'detailteaser-twin'",
   "detailteaser-large-compact": "'detailteaser-large-compact'",
   "detailteaser-large-compact-opinion": "'detailteaser-large-compact-opinion'",
+  "detailteaser-large-storRubrik-opinion": "'detailteaser-large-storRubrik-opinion'",
   "expressiveheading01": "'expressiveheading01'",
   "expressiveheading02": "'expressiveheading02'",
   "expressiveheading03": "'expressiveheading03'",