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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.3.0 (2023-11-14)
+
+
+### Features
+
+* **web:** add typography manual helper ([#1094](https://github.com/BonnierNews/dn-design-system/issues/1094)) ([8bd836f](https://github.com/BonnierNews/dn-design-system/commit/8bd836f19ec415af70cd878e855b001bce47c142))
+
+
+
+## 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/foundations/helpers/typography.scss

@@ -98,6 +98,30 @@ $dsSerifWeights: (
   }
 }
 
+@mixin ds-typography-manual(
+  $family,
+  $size,
+  $lineHeight: $size * 1.2,
+  $weight: 400,
+  $fontStyle: "",
+  $letterSpacing: "",
+  $scaling: "small"
+) {
+  $dsTypographyKeys: (
+    fontFamily: $family,
+    fontSize: $size,
+    lineHeight: $lineHeight,
+    // numbers and strings are both handled as strings in fontWeight
+    fontWeight: "#{$weight}",
+    fontStyle: $fontStyle,
+    letterSpacing: $letterSpacing,
+  );
+  $forcePx: $scaling == false;
+  @each $key in map-keys($dsTypographyKeys) {
+    @include _ds-typography-get-property($dsTypographyKeys, $key, $forcePx, $scaling);
+  }
+}
+
 @mixin _ds-typography-get-property($map, $key, $forcePx, $screen: "small") {
   $unit: "";
   $value: map.get($map, $key);

package/foundations/typography/README.md

@@ -4,6 +4,8 @@
 
 # Typography
 
+## Typography token
+
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |token | Sass variable | yes | | | Ex.  $ds-typography-functional-body01regular, all typography variables starts with prefix $ds-typography- |
@@ -13,7 +15,7 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/foundations/helpers/typography" as *;
+@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers" as *;
 
 @include ds-typography($ds-typography-functional-body01regular);
 ```
@@ -22,3 +24,24 @@ With forcePX parameter:
 ```scss
 @include ds-typography($ds-typography-functional-body01regular, true);
 ```
+
+## ⚠️ Manual typography (only for use in special circumstances)
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|family | String | yes | Sans, Serif | | DN Font family |
+|size | Number | yes | | | Font size in px without unit |
+|lineHeight | Number | no | | size * 1.2 | Line height in px without unit |
+|weight | String, Number | no | bold, 400, etc | 400 | Font weight accepts both name or number |
+|fontStyle | String | no | | | Font style, ex Italic |
+|letterSpacing | Number | no | | font default | Letter spacing |
+|scaling | String, Bool | no | "small", "large", "extraLarge" or false | "small" | Applies typography scaling for screen size. If set to false font will not scale. |
+
+These are copy paste friendly examples to quickliy get started using a component.
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers" as *;
+
+@include ds-typography-manual('Sans', 36, 48, bold);
+```

package/package.json

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