@bonniernews/dn-design-system-web 3.0.0-alpha.80 → 3.0.0-alpha.82

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.82](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.81...@bonniernews/dn-design-system-web@3.0.0-alpha.82) (2023-06-02)
+
+
+### Bug Fixes
+
+* **web:** remove world map from teaser-onsite ([#852](https://github.com/BonnierNews/dn-design-system/issues/852)) ([ba0df65](https://github.com/BonnierNews/dn-design-system/commit/ba0df650d5f80aca6ca4ea5fff6b04477243a177))
+
+
+
+## [3.0.0-alpha.81](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.80...@bonniernews/dn-design-system-web@3.0.0-alpha.81) (2023-06-01)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## [3.0.0-alpha.80](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.79...@bonniernews/dn-design-system-web@3.0.0-alpha.80) (2023-06-01)
 
 

package/components/teaser-onsite/README.md

@@ -10,14 +10,6 @@ Also known as "På Plats-puffen".
 
 In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
 
-The worldMap has to be set by the parent page as a CSS variable. This is done in the StoryBook and will have to be done from the production website codebase.
-
-```
-:root {
-  --ds-onsite-background-image-url: url("https://i.imgur.com/GJh7Fbl.png");
-}
-```
-
 ## Parameters
 
 |parameter | type | required | options | default | description |
@@ -36,7 +28,7 @@ The worldMap has to be set by the parent page as a CSS variable. This is done in
 
 ### Nunjucks
 
-These are copy paste friendly examples to quickliy get started using a component.
+These are copy paste friendly examples to quickly get started using a component.
 
 ```html
 {% from '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.njk' import TeaserOnSite %}
@@ -49,5 +41,5 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite" as *;
+@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite";
 ```

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

@@ -3,12 +3,7 @@
 
 .ds-teaser.ds-teaser--onsite {
   @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
-  background-image: var(
-    --ds-onsite-background-image-url
-  ); //Set by parent context (like Storybook or Bang)
-  background-position: 100%;
-  background-repeat: no-repeat;
-  overflow: hidden;
+  display: flex;
 
   .ds-teaser__title {
     color: $ds-theme-color;
@@ -17,7 +12,11 @@
 
   @include ds-hover(true) {
     .ds-teaser__title {
-      @include ds-underline(2px, 1px);
+      text-decoration: none;
+    }
+
+    .ds-teaser__text {
+      @include ds-underline();
     }
   }
 
@@ -27,7 +26,6 @@
   }
 
   .ds-teaser__media {
-    float: left;
     margin-right: ds-spacing-component($ds-sc-x4);
     width: 56px;
     height: 56px;

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

@@ -30,10 +30,6 @@
     display: none;
   }
 
-  .ds-teaser--onsite {
-    background-position-y: 1px;
-  }
-
   &::after {
     content: "";
     position: absolute;

package/foundations/variables/typographyTokensList.scss

@@ -83,3 +83,7 @@ $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';
+$ds-typography-detailarticle-opinion: 'detailarticle-opinion';
+$ds-typography-detailarticle-longread: 'detailarticle-longread';
+$ds-typography-detailarticle-longread-premium: 'detailarticle-longread-premium';

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -502,6 +502,31 @@ $typographyTokensScreenLarge: (
     lineHeight: 78,
     fontSize: 92
   ),
+  detailarticle-standard: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 52,
+    fontSize: 48
+  ),
+  detailarticle-opinion: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 52,
+    fontSize: 48,
+    fontStyle: italic
+  ),
+  detailarticle-longread: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 64,
+    fontSize: 56
+  ),
+  detailarticle-longread-premium: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 64,
+    fontSize: 56
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -547,5 +547,30 @@ $typographyTokensScreenSmall: (
     fontSize: 16,
     textCase: upperCase,
     letterSpacing: 0.7
+  ),
+  detailarticle-standard: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 32,
+    fontSize: 26
+  ),
+  detailarticle-opinion: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 32,
+    fontSize: 26,
+    fontStyle: italic
+  ),
+  detailarticle-longread: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 36,
+    fontSize: 32
+  ),
+  detailarticle-longread-premium: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 36,
+    fontSize: 32
   )
 );

package/package.json

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