@bonniernews/dn-design-system-web 8.9.4 → 8.9.6

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [8.9.6](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.5...@bonniernews/dn-design-system-web@8.9.6) (2023-12-08)
+
+
+### Maintenance
+
+* **deps-dev:** bump @types/react-native-vector-icons from 6.4.15 to 6.4.16 ([#1071](https://github.com/BonnierNews/dn-design-system/issues/1071)) ([1975ff0](https://github.com/BonnierNews/dn-design-system/commit/1975ff0d25548cc8a1a5f74f85ecadd0a4197913))
+* **deps-dev:** bump @types/react-test-renderer from 18.0.3 to 18.0.7 ([#1113](https://github.com/BonnierNews/dn-design-system/issues/1113)) ([dde7014](https://github.com/BonnierNews/dn-design-system/commit/dde70144f6be0dce482004836182c638eda2761d))
+* **deps:** bump @react-native-async-storage/async-storage from 1.19.1 to 1.21.0 ([#1140](https://github.com/BonnierNews/dn-design-system/issues/1140)) ([cb00a6f](https://github.com/BonnierNews/dn-design-system/commit/cb00a6f2bdc11303d06dbaf734b2e6bb002495cd))
+* **deps:** bump @storybook/theming from 6.5.15 to 6.5.16 ([#1040](https://github.com/BonnierNews/dn-design-system/issues/1040)) ([2da4fdd](https://github.com/BonnierNews/dn-design-system/commit/2da4fdd7f7c2b1eaf3ec91b9aca15b86a49175da))
+* prerelease packages ([cf0302b](https://github.com/BonnierNews/dn-design-system/commit/cf0302b19872562260c2a175e80791f6fe7d120a))
+* prerelease packages ([2878ff0](https://github.com/BonnierNews/dn-design-system/commit/2878ff0d0fcde41a8b4791c00cde76973d7a76e7))
+* **web:** remove variant from teaser list vertical ([#1136](https://github.com/BonnierNews/dn-design-system/issues/1136)) ([233219a](https://github.com/BonnierNews/dn-design-system/commit/233219aa04aa85cfc9073b7634ccda7cdef56e3f))
+
+## [8.9.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.4...@bonniernews/dn-design-system-web@8.9.5) (2023-12-05)
+
+
+### Bug Fixes
+
+* **web:** change vignette to link ([#1134](https://github.com/BonnierNews/dn-design-system/issues/1134)) ([e88283d](https://github.com/BonnierNews/dn-design-system/commit/e88283d374e212257ad6f90b1946265827caca69))
+
 ## [8.9.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.3...@bonniernews/dn-design-system-web@8.9.4) (2023-12-04)
 
 

package/components/tag-header/README.md

@@ -11,9 +11,11 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | H1 Title |
-|vignette | String | no | | | Vignette related to title |
+|vignetteText | String | no | | | Heading of the link box |
+|vignetteTargetUrl | String | no | | | Target URL for the vignette |
 |mediaHtml | String | no | | | Main image |
 |descriptionHtml | String | no | | | Intended use is text, links |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the vignette |
 |toggle | Bool | no | true, false | false | Show/hide toggle button |
 |toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
 |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |

package/components/tag-header/tag-header.njk

@@ -7,6 +7,7 @@
 
   {%- set classes = [
     componentClassName,
+    'ds-theme--' + params.theme if params.theme,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -19,8 +20,12 @@
     <div class="{{ componentClassName }}__content">
       <div class="{{ componentClassName }}__bar">
         <div class="{{ componentClassName }}__heading">
-          {% if params.vignette %}
-            <span class="{{ componentClassName }}__vignette">{{ params.vignette }}</span>
+          {% if params.vignetteText %}
+            {% if params.vignetteTargetUrl %}
+              <a href="{{ params.vignetteTargetUrl }}" class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</a>
+            {% else %}
+              <span class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</span>
+            {% endif %}
           {% endif %}
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
         </div>

package/components/tag-header/tag-header.scss

@@ -34,8 +34,13 @@
 
   .ds-tag-header__vignette {
     @include ds-typography($ds-typography-functional-meta02bold);
-    color: $ds-color-text-brand;
+    color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
+    display: block;
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .ds-tag-header__title {

package/components/teaser-list-vertical/README.md

@@ -12,7 +12,6 @@
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |listTitle | String | yes | | | List title |
 |listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
-|listType | String | no | default, media | (empty) | |
 |flexible | bool | no | true, false | false | |
 |teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ] |
 |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
@@ -31,17 +30,15 @@ These are copy paste friendly examples to quickliy get started using a component
 {% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
 
 {{ TeaserListVertical({
-  listTitle: "Senaste nytt",
+  listTitle: "Senaste artiklarna",
   listLink: { text: "Alla nyheter", url: "#"},
   flexible: true,
   theme: "ekonomi",
   teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
 })}}
 
-{# listType == media #}
 {{ TeaserListVertical({
   listTitle: "Senaste klippen",
-  listType: "media",
   mediaIcon: "play_arrow-filled",
   teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', vignette: "VÄRLDEN", targetLink: '#', theme: 'nyheter', isItalicHeadline: false, publicationTime: 'I går 21:22', mediaHtml: '<div class="picture"><img class="picture__img" src="??"></div>', video: 'true', attributes: { "data-test": "list-item-test-data" } } ]
 })}}

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

@@ -9,14 +9,12 @@
   {% set classNamePrefix = componentClassName + "--" %}
   {% set attributes = getAttributes(params.attributes) %}
   {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}
-  {% set isMediaList = params.listType === 'media' %}
 
   {%- set classes = [
     componentClassName,
     "ds-theme--" + params.theme if params.theme,
     classNamePrefix + "flexible" if params.flexible,
     classNamePrefix + "linked" if showButton,
-    classNamePrefix + "media" if isMediaList,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -28,11 +26,7 @@
 
     <div class="{{ componentClassName + '__content'}}">
       {% for teaser in params.teasers %}
-        {% if isMediaList %}
-          {{ TeaserListVerticalMediaItem(teaser) }}
-        {% else %}
-          {{ TeaserListVerticalItem(teaser) }}
-        {% endif %}
+        {{ TeaserListVerticalItem(teaser) }}
       {% endfor %}
     </div>
     {% if showButton %}
@@ -55,47 +49,35 @@
   {% set attributes = getAttributes(teaser.attributes) %}
   {%- set classes = [
     "ds-teaser-list-vertical__item",
-    teaser.classNames if teaser.classNames
-  ] | join(" ") %}
-  <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
-    {{ TeaserDot() }}
-    <h3 class="ds-teaser-list-vertical__item-title">{{ teaser.highlight }} {{ teaser.title }}</h3>
-    {% if teaser.publicationTime or teaser.sectionName %}
-      <div class="ds-teaser-list-vertical__item-notes">
-        <span>{{ teaser.publicationTime }}</span>{{ " • " if teaser.publicationTime and teaser.sectionName }}<span>{{ teaser.sectionName }}</span>
-      </div>
-    {% endif %}
-  </a>
-{% endmacro %}
-
-{% macro TeaserListVerticalMediaItem(teaser) %}
-  {% set attributes = getAttributes(teaser.attributes) %}
-  {%- set classes = [
-    "ds-teaser-list-vertical__media-item",
-    "ds-teaser-list-vertical__media-item--italic" if teaser.isItalicHeadline,
+    "ds-teaser-list-vertical__item--italic" if teaser.isItalicHeadline,
     "ds-theme--" + teaser.theme if teaser.theme,
     teaser.classNames if teaser.classNames
   ] | join(" ") %}
 
   <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
-    <div class="ds-teaser-list-vertical__media-item-text">
+    <div class="ds-teaser-list-vertical__item-text">
       {% if teaser.vignette %}
-        <div class="ds-teaser-list-vertical__media-item-vignette">{{ teaser.vignette }}</div>
+        <div class="ds-teaser-list-vertical__item-vignette">{{ teaser.vignette }}</div>
       {% endif %}
-      <h3 class="ds-teaser-list-vertical__media-item-title">
+      <h3 class="ds-teaser-list-vertical__item-title">
         {%- if teaser.highlight %}
-          <span class="ds-teaser-list-vertical__media-item-highlight">{{ teaser.highlight }}</span>
+          <span class="ds-teaser-list-vertical__item-highlight">{{ teaser.highlight }}</span>
         {% endif %}
         {{- teaser.title }}</h3>
-      {% if teaser.publicationTime or teaser.sectionName %}
-        <div class="ds-teaser-list-vertical__media-item-notes">
-          <span>{{ teaser.publicationTime }}</span>
-        </div>
-      {% endif %}
+        {% 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>
+        {% endif %}
     </div>
 
     {% if teaser.mediaHtml %}
-      <div class="ds-teaser-list-vertical__media-item-img">
+      <div class="ds-teaser-list-vertical__item-img">
         {{ teaser.mediaHtml | safe }}
         {% if teaser.video %}
           {{ IconUse({ icon: 'play_arrow-filled' }) -}}

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

@@ -41,50 +41,6 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
   }
 
   .ds-teaser-list-vertical__item {
-    padding: ds-spacing($ds-s-075 $ds-s-100, rem);
-    display: block;
-    text-decoration: none;
-    position: relative;
-
-    &:not(:last-child)::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      height: ds-metrics-border-width(x1);
-      width: calc(100% - ds-spacing($ds-s-200));
-      background-color: $ds-color-border-primary;
-    }
-
-    .ds-teaser-dot {
-      position: absolute;
-      margin-top: ds-px-to-rem(6px);
-    }
-
-    .ds-teaser-list-vertical__item-title,
-    .ds-teaser-list-vertical__item-notes {
-      margin: 0 0 0 (ds-spacing($ds-s-050, rem) + $ds-dot-size);
-    }
-
-    .ds-teaser-list-vertical__item-title {
-      @include ds-typography($ds-typography-expressive-heading01bold);
-      color: $ds-color-text-primary;
-      word-break: break-word;
-    }
-
-    .ds-teaser-list-vertical__item-notes {
-      @include ds-typography($ds-typography-functional-meta02regular);
-      color: $ds-color-text-primary-02;
-      margin-top: ds-spacing($ds-s-050, rem);
-    }
-
-    @include ds-hover() {
-      &:hover .ds-teaser-list-vertical__item-title {
-        @include ds-underline(2px, 1px);
-      }
-    }
-  }
-
-  .ds-teaser-list-vertical__media-item {
     padding: ds-spacing($ds-s-075 $ds-s-100, rem);
     display: flex;
     justify-content: space-between;
@@ -100,42 +56,40 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
       background-color: $ds-color-border-primary;
     }
 
-    .ds-teaser-list-vertical__media-item-text,
-    .ds-teaser-list-vertical__media-item-title,
-    .ds-teaser-list-vertical__media-item-notes {
+    .ds-teaser-list-vertical__item-text,
+    .ds-teaser-list-vertical__item-title,
+    .ds-teaser-list-vertical__item-notes {
       margin: 0;
     }
 
-    .ds-teaser-list-vertical__media-item-vignette {
+    .ds-teaser-list-vertical__item-vignette {
       display: block;
       @include ds-typography($ds-typography-detailarticle-label);
       color: $ds-theme-color;
       margin-bottom: ds-spacing($ds-s-025);
     }
 
-    .ds-teaser-list-vertical__media-item-title {
+    .ds-teaser-list-vertical__item-title {
       @include ds-typography($ds-typography-expressive-heading01bold);
       color: $ds-color-text-primary;
       word-break: break-word;
 
-      .ds-teaser-list-vertical__media-item-highlight {
+      .ds-teaser-list-vertical__item-highlight {
         color: $ds-theme-color;
       }
     }
 
-    &.ds-teaser-list-vertical__media-item--italic {
-      .ds-teaser-list-vertical__media-item-title {
-        @include ds-typography($ds-typography-expressive-heading01italicregular);
-      }
+    &.ds-teaser-list-vertical__item--italic .ds-teaser-list-vertical__item-title {
+      @include ds-typography($ds-typography-expressive-heading01italicregular);
     }
 
-    .ds-teaser-list-vertical__media-item-notes {
+    .ds-teaser-list-vertical__item-notes {
       @include ds-typography($ds-typography-functional-meta02regular);
       color: $ds-color-text-primary-02;
       margin-top: ds-spacing($ds-s-050, rem);
     }
 
-    .ds-teaser-list-vertical__media-item-img {
+    .ds-teaser-list-vertical__item-img {
       flex: 0 0 91px;
       align-self: flex-start;
       position: relative;
@@ -155,7 +109,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     }
 
     @include ds-hover() {
-      &:hover .ds-teaser-list-vertical__media-item-title {
+      &:hover .ds-teaser-list-vertical__item-title {
         @include ds-underline(2px, 1px);
       }
     }

package/package.json

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