@bonniernews/dn-design-system-web 4.4.1 → 4.6.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.6.0 (2023-09-12)
+
+
+### Features
+
+* **web:** add teaser longlife ([#992](https://github.com/BonnierNews/dn-design-system/issues/992)) ([f60fb92](https://github.com/BonnierNews/dn-design-system/commit/f60fb92bbf5bbd39e620de6551a6b261593bed5f))
+
+
+
+## 4.5.2 (2023-09-12)
+
+
+### Bug Fixes
+
+* **web:** specify when email and followable can be used ([#996](https://github.com/BonnierNews/dn-design-system/issues/996)) ([b8458e9](https://github.com/BonnierNews/dn-design-system/commit/b8458e9a9dca3c50f32151222b6955d4f1038ffb))
+
+
+
+## 4.5.1 (2023-09-12)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## 4.5.0 (2023-09-11)
+
+
+### Features
+
+* **web:** implement the app's teaser dot animation ([#990](https://github.com/BonnierNews/dn-design-system/issues/990)) ([3147f94](https://github.com/BonnierNews/dn-design-system/commit/3147f942cb5ff276c2c788e8549e43fa7ba14830))
+
+
+
 ## 4.4.1 (2023-09-08)
 
 

package/components/byline/README.md

@@ -8,6 +8,9 @@
 
 The byline is a list item and should be wrapped in a list.
 
+* If variant:'follow', followable:true AND authorPageUrl are set at the same time, the element will render as a div with an inner `<a>` and a button.
+* If variant:'link' and authorpageUrl are set, the outer elment will render as an `<a>`.
+
 ## Parameters
 
 |parameter | type | required | options | default | description |

package/components/teaser-dot/README.md

@@ -15,6 +15,7 @@
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 
+
 ## Minimum requirement example
 
 ### Nunjucks
@@ -32,4 +33,9 @@ These are copy paste friendly examples to quickliy get started using a component
 ### SCSS
 ```scss
 @use "@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot";
+
+.ds-teaser-dot {
+  // use css variable to optionally override size
+  --ds-teaser-dot-size: 10px;
+}
 ```

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

@@ -1,39 +1,70 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
-$ds-teaser-dot-size: 10px;
-
 .ds-teaser-dot {
-  display: inline-flex;
-  box-sizing: border-box;
-  background-color: $ds-theme-color;
-  border-radius: 50%;
-  height: ds-px-to-rem($ds-teaser-dot-size);
-  width: ds-px-to-rem($ds-teaser-dot-size);
-  margin-right: ds-px-to-rem(1px);
+  --ds-teaser-dot-size: #{ds-px-to-rem(10px)};
 
   @at-root .ds-force-px#{&} {
-    height: $ds-teaser-dot-size;
-    width: $ds-teaser-dot-size;
-    margin-right: 1px;
+    --ds-teaser-dot-size: 10px;
   }
 
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  height: var(--ds-teaser-dot-size);
+  width: var(--ds-teaser-dot-size);
+  margin-right: calc(var(--ds-teaser-dot-size) * 0.1);
+  color: $ds-theme-color;
+
   @media (prefers-reduced-motion: no-preference) {
     &.ds-teaser-dot--flashing {
-      animation: pulse 1.25s ease-in-out infinite;
+      animation: dot-pulse 2s ease infinite;
+    }
+    &.ds-teaser-dot--flashing::after {
+      animation: ripple-pulse 2s linear infinite;
     }
   }
+
+  &::after,
+  &.ds-teaser-dot--flashing::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform-origin: 50% 50%;
+    background-color: currentColor;
+    border-radius: 50%;
+  }
 }
 
-@keyframes pulse {
+@keyframes dot-pulse {
   0% {
-    opacity: 0;
+    transform: scale(.95);
   }
 
-  50% {
-    opacity: 1;
+  70% {
+    transform: scale(1);
   }
 
   100% {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes ripple-pulse {
+  0% {
+    transform: scale(.95);
+    opacity: 0.4;
+  }
+
+  70% {
+    transform: scale(2);
     opacity: 0;
   }
+
+  100% {
+    transform: scale(.95);
+    opacity: 0
+  }
 }

package/components/teaser-longlife/README.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-longlife](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-longlife)
+- Storybook: [TeaserRightNow](https://designsystem.dn.se/?path=/docs/section-teaserlonglife--docs)
+- Storybook (Latest): [TeaserRightNow](https://designsystem-latest.dn.se/?path=/docs/section-teaserlonglife--docs)
+
+----
+
+# teaser-longlife
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|vignette | String | no | | | Top text in the teaser |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+
+### Nunjucks
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-longlife/teaser-longlife.njk' import TeaserLonglife %}
+
+{{ TeaserLonglife({
+  title: 'Susa fram på DN-elcykeln',
+  targetLink: 'https://dngranskar.dn.se',
+  vignette: 'Beställ DN-cykeln',
+  mediaHtml: 'image-html',
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-longlife/teaser-longlife" as *;
+```

package/components/teaser-longlife/teaser-longlife.njk

@@ -0,0 +1,38 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+
+{% macro TeaserLonglife(params) %}
+  {%- set additionalClasses = ["ds-teaser--longlife"] %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    areaType: 'right',
+    attributes: params.attributes,
+    classNames: additionalClasses | join(" ")
+  }) %}
+
+    {% if params.mediaHtml %}
+      {{ params.mediaHtml }}
+      {% if params.isLocked %}
+        {{ VipBadge({
+          showText: false,
+          forcePx: true
+        }) }}
+      {% endif %}
+    {% endif %}
+
+    <div class="ds-teaser__content">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+      <h2 class="ds-teaser__title">
+        {{ params.title }}
+      </h2>
+    </div>
+  {% endcall %}
+{% endmacro %}
+

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

@@ -0,0 +1,56 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss";
+
+.ds-teaser.ds-teaser--longlife {
+  position: relative;
+
+  .ds-teaser-image {
+    position: relative;
+    width: 100%;
+    height: auto;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: $ds-color-static-transparent-black;
+      z-index: 1;
+    }
+
+    figcaption {
+      display: none;
+    }
+  }
+
+  .ds-teaser__content {
+    color: $ds-color-static-white;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    padding: ds-spacing-component($ds-sc-x4);
+  }
+
+  &:not(:has(.ds-teaser-image))  {
+    background-color: $ds-color-static-black;
+
+    .ds-teaser__content {
+      position: relative;
+    }
+  }
+
+  .ds-teaser__vignette {
+    color: currentColor;
+    @include ds-typography($ds-typography-functional-meta02bold);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .ds-teaser__title {
+    color: currentColor;
+    @include ds-typography($ds-typography-functional-heading02bold);
+  }
+}

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

@@ -106,6 +106,6 @@
   }
 
   .ds-teaser-dot {
-    background-color: $ds-color-text-primary;
+    color: $ds-color-text-primary;
   }
 }

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

@@ -100,7 +100,7 @@
           color: $ds-color-static-white;
         }
         .ds-teaser-dot {
-          background-color: $ds-color-static-red-300;
+          color: $ds-color-static-red-300;
         }
         .ds-teaser__vignette,
         .ds-teaser__sticker {

package/foundations/variables/typographyTokensList.scss

@@ -89,3 +89,5 @@ $ds-typography-detailarticle-longread: 'detailarticle-longread';
 $ds-typography-detailarticle-longread-premium: 'detailarticle-longread-premium';
 $ds-typography-detailarticle-quote: 'detailarticle-quote';
 $ds-typography-detailmellanrubrik: 'detailmellanrubrik';
+$ds-typography-detailarticle-direkt: 'detailarticle-direkt';
+$ds-typography-detailarticle-direkt-opinion: 'detailarticle-direkt-opinion';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -220,6 +220,19 @@ $typographyTokensScreenExtraLarge: (
     lineHeight: 64,
     fontSize: 56
   ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    lineHeight: 36,
+    fontSize: 32
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 36,
+    fontSize: 32,
+    fontStyle: italic
+  ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -445,6 +445,19 @@ $typographyTokensScreenLarge: (
     lineHeight: 36,
     fontSize: 32
   ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    lineHeight: 30,
+    fontSize: 26
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    lineHeight: 30,
+    fontSize: 26,
+    fontStyle: italic
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -584,5 +584,18 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     fontSize: 20,
     lineHeight: 24
+  ),
+  detailarticle-direkt: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 20
+  ),
+  detailarticle-direkt-opinion: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    lineHeight: 24,
+    fontSize: 20,
+    fontStyle: italic
   )
 );

package/package.json

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

@@ -88,5 +88,8 @@
   "detailarticle-opinion": "'detailarticle-opinion'",
   "detailarticle-longread": "'detailarticle-longread'",
   "detailarticle-longread-premium": "'detailarticle-longread-premium'",
-  "detailarticle-quote": "'detailarticle-quote'"
+  "detailarticle-quote": "'detailarticle-quote'",
+  "detailmellanrubrik": "'detailmellanrubrik'",
+  "detailarticle-direkt": "'detailarticle-direkt'",
+  "detailarticle-direkt-opinion": "'detailarticle-direkt-opinion'"
 }