@bonniernews/dn-design-system-web 11.2.1 → 11.3.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [11.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.2.1...@bonniernews/dn-design-system-web@11.3.0) (2024-02-09)
+
+
+### Features
+
+* **web:** teaser footer and podcast variant on large, standard and split teasers ([#1192](https://github.com/BonnierNews/dn-design-system/issues/1192)) ([99987f4](https://github.com/BonnierNews/dn-design-system/commit/99987f4235bd4d2b133a56ee9290c7f10c44ebf9))
+
 ## [11.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.2.0...@bonniernews/dn-design-system-web@11.2.1) (2024-02-07)
 
 

package/assets/teaser/teaser.scss

@@ -3,6 +3,7 @@
 @use "../../components/vip-badge/vip-badge.scss";
 @use "../../components/teaser-image/teaser-image.scss";
 @use "../../components/teaser-dot/teaser-dot.scss";
+@use "../../components/teaser-footer/teaser-footer.scss";
 
 // used in standard and native teaser
 $ds-teaser-standard-image-width-mobile: 104px;
@@ -68,17 +69,6 @@ $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%;
@@ -121,4 +111,16 @@ $grade-size: ds-px-to-rem(34px);
       padding-right: ds-spacing($ds-s-075);
     }
   }
+
+  &--podcast {
+    .ds-teaser__vignette {
+      display: flex;
+    }
+
+    .ds-icon--headphones {
+      height: ds-px-to-rem(16px);
+      width: ds-px-to-rem(16px);
+      margin-right: ds-spacing($ds-s-025);
+    }
+  }
 }

package/components/teaser-footer/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-footer](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-footer)
+- Storybook: [Subcomponents > TeaserFooter](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserfooter--docs)
+- Storybook (Latest): [Subcomponents > TeaserFooter](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserfooter--docs)
+
+----
+
+# TeaserFooter
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|variant | String | yes | "informationText" or "podcast" | | The variant to render |
+|publicationTime | String | no | | | |
+|sectionName | String | no | | | Name of section the teaser is connected to |
+|duration | String | no | | | The length of the podcast |
+|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-footer/teaser-footer.njk' import TeaserFooter %}
+
+  {{ TeaserFooter({
+    variant: 'informationText',
+    publicationTime: '09:45',
+    sectionName; 'Nyheter'
+  }) }}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/assets/teaser-footer/teaser-footer";
+```

package/components/teaser-footer/teaser-footer.njk

@@ -0,0 +1,47 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}
+
+{% macro TeaserFooter(params) %}
+  {% set componentClassName = "ds-teaser-footer" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {%- set classes = [
+    componentClassName,
+    classNamePrefix + params.variant if params.variant,
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {% if params.variant === "informationText" %}
+      {{
+        InformationText({
+          publicationTime: params.publicationTime,
+          sectionName: params.sectionName
+        })
+      }}
+    {% elif params.variant === "podcast" %}
+      {{ Icon({ icon: 'play_arrow-filled' }) | safe }}
+      <div>
+        <span class="{{ componentClassName + '__title' }}">Lyssna på avsnittet</span>
+        {{
+          InformationText({
+            duration: params.duration,
+            publicationTime: params.publicationTime
+          })
+        }}
+      </div>
+    {% endif %}
+  </div>
+{% endmacro %}
+
+{% macro InformationText(params) %}
+  <div class="ds-teaser-footer__notes">
+    {% set notes = [params.duration, params.publicationTime, params.sectionName] %}
+    {% for note in notes %}
+      {% if note %}
+        {{ note }}{{ " • " if notes[loop.index0 + 1] }}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,43 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+.ds-teaser-footer--informationText {
+  margin-top: ds-spacing($ds-s-050);
+}
+
+.ds-teaser__text + .ds-teaser-footer--informationText {
+  margin-top: ds-spacing($ds-s-075);
+}
+
+.ds-teaser-footer__notes {
+  @include ds-typography($ds-typography-functional-meta02regular);
+  display: block;
+  color: $ds-color-text-primary-02;
+}
+
+.ds-teaser-footer--podcast {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: ds-spacing($ds-s-050);
+
+  .ds-teaser-footer__title {
+    @include ds-typography($ds-typography-functional-body01semibold);
+    color: $ds-color-text-primary;
+  }
+
+  .ds-teaser-footer__notes {
+    margin: 0;
+  }
+
+  .ds-icon {
+    height: ds-px-to-rem(24px);
+    width: ds-px-to-rem(24px);
+    margin-right: ds-spacing($ds-s-075);
+    background-color: $ds-color-component-primary;
+    border-radius: 50%;
+
+    > svg {
+      fill: $ds-color-icon-secondary;
+    }
+  }
+}

package/components/teaser-large/README.md

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|variant | String | no | "default" or "podd" | "default" | |
+|variant | String | no | "default" or "podcast" | "default" | |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
@@ -28,6 +28,7 @@
 |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. |
+|duration | string | no | | null | Duration of podcast. |
 |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

@@ -1,6 +1,8 @@
 {% 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 %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserLarge(params) %}
@@ -47,7 +49,12 @@
     <div class="{{ componentClassName + '__content'}}">
       <div class="ds-teaser__content-inner">
         {% if params.vignette %}
-          <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+          <div class="ds-teaser__vignette">
+            {% if params.variant === "podcast" %}
+              {{ IconUse({ icon: "headphones" }) }}
+            {% endif %}
+            {{ params.vignette }}
+          </div>
         {% endif %}
         <h2 class="ds-teaser__title">
           {% if params.highlight %}
@@ -68,8 +75,17 @@
             {{ params.text }}
           </p>
         {% endif %}
-        {% if params.publicationTime %}
-          <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+        {% if params.variant === "podcast" %}
+          {{ TeaserFooter({
+            variant: 'podcast',
+            publicationTime: params.publicationTime,
+            duration: params.duration
+          }) }}
+        {% elif params.publicationTime %}
+          {{ TeaserFooter({
+            variant: 'informationText',
+            publicationTime: params.publicationTime
+          }) }}
         {% endif %}
       </div>
 

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

@@ -3,6 +3,7 @@
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
 
 {% macro TeaserListVertical(params) %}
   {% set componentClassName = "ds-teaser-list-vertical" %}
@@ -65,14 +66,11 @@
         {% endif %}
         {{- teaser.title }}</h3>
         {% if teaser.publicationTime or teaser.sectionName %}
-          <div class="ds-teaser-list-vertical__item-notes">
-            {% if teaser.publicationTime %}
-              <span>{{ teaser.publicationTime }}</span>
-            {% endif %}
-            {% if teaser.sectionName %}
-              {{ " • " if teaser.publicationTime }}<span>{{ teaser.sectionName }}</span>
-            {% endif %}
-          </div>
+          {{ TeaserFooter({
+            variant: 'informationText',
+            publicationTime: teaser.publicationTime,
+            sectionName: teaser.sectionName
+          }) }}
         {% endif %}
     </div>
 

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

@@ -57,8 +57,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     }
 
     .ds-teaser-list-vertical__item-text,
-    .ds-teaser-list-vertical__item-title,
-    .ds-teaser-list-vertical__item-notes {
+    .ds-teaser-list-vertical__item-title {
       margin: 0;
     }
 
@@ -83,9 +82,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       @include ds-typography($ds-typography-expressive-heading01italicregular);
     }
 
-    .ds-teaser-list-vertical__item-notes {
-      @include ds-typography($ds-typography-functional-meta02regular);
-      color: $ds-color-text-primary-02;
+    .ds-teaser-footer {
       margin-top: ds-spacing($ds-s-050, rem);
     }
 

package/components/teaser-split/README.md

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|~variant~ | String | no | "default" or "podd" | "default" | Not implemented |
+|~variant~ | String | no | "default" or "podcast" | "default" | Not implemented |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
@@ -23,6 +23,8 @@
 |mediaHtml | HTML String | no | | | Main image or other media |
 |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. |
+|duration | string | no | | null | Duration of podcast. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 |classNames | String | no | | | Ex. "my-special-class" |
 |~forcePx~ | | | | | Not supported |

package/components/teaser-split/teaser-split.njk

@@ -2,6 +2,8 @@
 {% 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 %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserSplit(params) %}
@@ -34,7 +36,12 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% if params.vignette %}
-        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+        <div class="ds-teaser__vignette">
+          {% if params.variant === "podcast" %}
+            {{ IconUse({ icon: "headphones" }) }}
+          {% endif %}
+          {{ params.vignette }}
+        </div>
       {% endif %}
 
       <h2 class="{{ componentClassName + '__title' }}">
@@ -55,6 +62,14 @@
           {% endif %}
           {{ params.text }}
         </p>
+
+        {% if params.variant === "podcast" %}
+          {{ TeaserFooter({
+            variant: "podcast",
+            publicationTime: params.publicationTime,
+            duration: params.duration
+          }) }}
+        {% endif %}
       {% endif %}
     </div>
   {% endcall %}

package/components/teaser-standard/README.md

@@ -12,7 +12,7 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | Heading of the teaser |
 |targetLink | String | yes | | | Target URL for the teaser |
-|variant | String | no | "default" or "podd" | "default" | |
+|variant | String | no | "default" or "podcast" | "default" | |
 |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
@@ -26,6 +26,7 @@
 |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. |
+|duration | string | no | | null | Duration of podcast. |
 |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

@@ -1,6 +1,8 @@
 {% 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 %}
 {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-footer/teaser-footer.njk' import TeaserFooter %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
 
 {% macro TeaserStandard(params) %}
@@ -43,7 +45,12 @@
       {% endif %}
 
       {% if params.vignette %}
-        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+        <div class="ds-teaser__vignette">
+          {% if params.variant === "podcast" %}
+            {{ IconUse({ icon: "headphones" }) }}
+          {% endif %}
+          {{ params.vignette }}
+        </div>
       {% endif %}
 
       <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
@@ -57,7 +64,7 @@
         {% set gradeHtml = GetGrade({ grade: params.grade, type: "single" }) | trim  if params.grade else "" %}
         <p class="{{ componentClassName + '__text' }} {{ componentClassName + '__text--with-grade' if gradeHtml.length }}">
           {{ gradeHtml if gradeHtml.length else TeaserDot({ flashing: params.isFlashingDot }) }}
-          
+
           {% if params.sticker %}
             <span class="ds-teaser__sticker">
               {{ params.sticker }}
@@ -66,8 +73,19 @@
           {{ params.text }}
         </p>
       {% endif %}
-      {% if params.publicationTime %}
-        <span class="ds-teaser__publication-time">{{ params.publicationTime }}</span>
+      {% if params.variant === "podcast" %}
+        {{ TeaserFooter({
+          variant: "podcast",
+          publicationTime: params.publicationTime,
+          duration: params.duration
+        })}}
+      {% elif params.publicationTime %}
+        {{
+          TeaserFooter({
+            variant: "informationText",
+            publicationTime: params.publicationTime
+          })
+        }}
       {% endif %}
     </div>
   {% endcall %}

package/package.json

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