@bonniernews/dn-design-system-web 8.1.1 → 8.2.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.2.0 (2023-11-14)
+
+
+### Features
+
+* **web:** add timestamps to TeaserStandard and TeaserLarge ([#1087](https://github.com/BonnierNews/dn-design-system/issues/1087)) ([0e90215](https://github.com/BonnierNews/dn-design-system/commit/0e90215a5e12f1be299e8eabb6d9a19bcb42c374))
+
+
+
 ## 8.1.1 (2023-11-14)
 
 

package/assets/teaser/teaser.scss

@@ -68,6 +68,17 @@ $grade-size: ds-px-to-rem(34px);
     }
   }
 
+  .ds-teaser__publication-time {
+    display: block;
+    @include ds-typography($ds-typography-functional-meta02regular);
+    color: $ds-color-text-primary-02;
+    margin-top: ds-spacing($ds-s-050);
+  }
+
+  .ds-teaser__text + .ds-teaser__publication-time {
+    margin-top: ds-spacing($ds-s-075);
+  }
+
   .ds-icon.ds-icon--grade {
     color: $ds-color-icon-primary;
     border-radius: 50%;

package/components/teaser-large/README.md

@@ -26,6 +26,7 @@
 |isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|publicationTime | string | no | | null | Publication time text. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

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

@@ -69,6 +69,9 @@
             {{ params.text }}
           </p>
         {% endif %}
+        {% if params.publicationTime %}
+          <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+        {% endif %}
       </div>
 
       {% if params.bylineHtml %}

package/components/teaser-standard/README.md

@@ -24,6 +24,7 @@
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
 |isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|publicationTime | string | no | | null | Publication time text. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

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

@@ -66,6 +66,9 @@
           {{ params.text }}
         </p>
       {% endif %}
+      {% if params.publicationTime %}
+        <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+      {% endif %}
     </div>
   {% endcall %}
 {% endmacro %}

package/package.json

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