@bonniernews/dn-design-system-web 4.8.2 → 4.8.3

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.
 
+## 4.8.3 (2023-09-21)
+
+
+### Bug Fixes
+
+* **web:** styling fix on teaser list timeline ([#1001](https://github.com/BonnierNews/dn-design-system/issues/1001)) ([33b5520](https://github.com/BonnierNews/dn-design-system/commit/33b5520cb235c545c070472f96fc84843facb121))
+
+
+
 ## 4.8.2 (2023-09-21)
 
 

package/components/group-header/README.md

@@ -14,6 +14,7 @@
 |variant | string | no | icon, link, toggle, arrows | icon | The variant to render |
 |href | string | no | | | If given, the title is rendered as a link |
 |linkText | string | no | | | The link text to render (only for variant `link`) |
+|showBottomBorder | boolean | no | | | If true there will be a bottom border |
 |toggleText | text | no | | | `text` parameter to ToggleButton (only for variant `toggle`) |
 |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for variant `toggle`) |
 |toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for variant `toggle`) |

package/components/group-header/group-header.njk

@@ -11,10 +11,11 @@
   {%- set classes = [
     componentClassName,
     classNamePrefix + (params.variant or "icon"),
+    classNamePrefix + 'bottom-border' if params.showBottomBorder,
     params.classNames if params.classNames
   ] | join(" ") %}
 
-  {%- set groupHeaderInner %}
+  {% set groupHeaderInner %}
     <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
 
     {% if params.variant == 'link' and params.linkText and params.href %}

package/components/group-header/group-header.scss

@@ -10,6 +10,10 @@
   color: $ds-color-text-primary;
   @include ds-typography($ds-typography-functional-body02regular);
 
+  &--bottom-border {
+    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+  }
+
   .ds-group-header__right-link,
   .ds-group-header__icon,
   .ds-btn-toggle {
@@ -60,4 +64,8 @@
     @include ds-typography($ds-typography-functional-body02bold);
     margin: 0;
   }
+
+  &--bottom-border .ds-group-header__title {
+    padding-bottom: ds-spacing-component($ds-sc-x3) - ds-metrics-border-width(x1);
+  }
 }

package/components/{teaser-list-timeline → teaser-list-vertical}/README.md

@@ -1,10 +1,10 @@
-- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-timeline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-timeline)
-- Storybook: [TeaserListTimeline](https://designsystem.dn.se/?path=/docs/section-teaserlisttimeline--docs)
-- Storybook (Latest): [TeaserListTimeline](https://designsystem-latest.dn.se/?path=/docs/section-teaserlisttimeline--docs)
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
+- Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
+- Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)
 
 ----
 
-# teaser-list-timeline
+# teaser-list-vertical
 
 ## Parameters
 
@@ -27,9 +27,9 @@
 These are copy paste friendly examples to quickliy get started using a component.
 
 ```html
-{% from '@bonniernews/dn-design-system-web/components/teaser-list-timeline/teaser-list-timeline.njk' import TeaserListTimeline %}
+{% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}
 
-{{ TeaserListTimeline({
+{{ TeaserListVertical({
   listTitle: "Senaste nytt",
   listLink: { text: "Alla nyheter", url: "#"},
   flexible: true,
@@ -40,5 +40,13 @@ These are copy paste friendly examples to quickliy get started using a component
 
 ### SCSS
 ```scss
-@use "@bonniernews/dn-design-system-web/components/teaser-list-timeline/teaser-list-timeline" as *;
+@use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
+```
+### Javascript
+
+Only run this if there is a scrollable list
+```javascript
+import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
+const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
+dsTeaserListVertical(teaserListVerticalWrappers);
 ```

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

@@ -0,0 +1,22 @@
+export {
+  dsTeaserListVertical,
+  dsTeaserListVerticalStory
+}
+
+function dsTeaserListVertical(teaserListVerticalWrappers = []) {
+  teaserListVerticalWrappers.forEach((wrapper) => {
+    const teaserListGroupHeader = wrapper.querySelector(".ds-group-header--bottom-border");
+    teaserListGroupHeader?.classList.remove("ds-group-header--bottom-border");
+
+    const teaserListVerticalContentContainer = wrapper.querySelector(".ds-teaser-list-vertical__content");
+    teaserListVerticalContentContainer.addEventListener("scroll", () => {
+      const scrolledToTop = teaserListVerticalContentContainer.scrollTop === 0;
+      teaserListGroupHeader.classList.toggle("ds-group-header--bottom-border", !scrolledToTop);
+    });
+  });
+}
+
+function dsTeaserListVerticalStory() {
+  const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
+  dsTeaserListVertical(teaserListVerticalWrappers);
+}

package/components/{teaser-list-timeline/teaser-list-timeline.njk → teaser-list-vertical/teaser-list-vertical.njk}

@@ -1,11 +1,14 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/button/button.njk' import Button %}
+{% 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 %}
 
-{% macro TeaserListTimeline(params) %}
-  {% set componentClassName = "ds-teaser-list-timeline" %}
+{% macro TeaserListVertical(params) %}
+  {% set componentClassName = "ds-teaser-list-vertical" %}
   {% set classNamePrefix = componentClassName + "--" %}
   {% set attributes = getAttributes(params.attributes) %}
   {% set showButton = params.listLink and params.listLink.text and params.listLink.url %}
+
   {%- set classes = [
     componentClassName,
     "ds-theme--" + params.theme,
@@ -13,15 +16,20 @@
     classNamePrefix + "linked" if showButton,
     params.classNames if params.classNames
   ] | join(" ") %}
+
   <div class="{{ classes }}" {{- attributes | safe }}>
-    <h2 class="ds-teaser-list-timeline__vignette">{{ params.listTitle }}</h2>
+    {{ GroupHeader({
+      title: params.listTitle,
+      showBottomBorder: params.flexible
+    }) }}
+
     <div class="{{ componentClassName + '__content'}}">
       {% for teaser in params.teasers %}
-        {{ TeaserListTimelineItem(teaser) }}
+        {{ TeaserListVerticalItem(teaser) }}
       {% endfor %}
     </div>
     {% if showButton %}
-      <div class="ds-teaser-list-timeline__link">
+      <div class="ds-teaser-list-vertical__link">
         {{ Button({
           text: params.listLink.text,
           href: params.listLink.url,
@@ -36,18 +44,18 @@
   </div>
 {% endmacro %}
 
-{% macro TeaserListTimelineItem(teaser) %}
+{% macro TeaserListVerticalItem(teaser) %}
   {% set attributes = getAttributes(teaser.attributes) %}
   {%- set classes = [
-    "ds-teaser-list-timeline__item",
+    "ds-teaser-list-vertical__item",
     teaser.classNames if teaser.classNames
   ] | join(" ") %}
   <a href="{{teaser.targetLink}}" class="{{ classes }}" {{- attributes | safe }}>
-    <span class="ds-teaser-list-timeline__item-dot"></span>
-    <h3 class="ds-teaser-list-timeline__item-title">{{ teaser.highlight }} {{ teaser.title }}</h3>
+    {{ 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-timeline__item-notes">
-        <span>{{ teaser.publicationTime }}<span>{{ " • " if teaser.publicationTime and teaser.sectionName }}<span>{{ teaser.sectionName }}</span>
+      <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>

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

@@ -0,0 +1,78 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../button/button.scss" as *;
+@use "../../components/group-header/group-header";
+@use "../../components/teaser-dot/teaser-dot.scss";
+
+$ds-dot-size: ds-px-to-rem(10px);
+
+.ds-teaser-list-vertical {
+  background-color: $ds-color-surface-background;
+
+  .ds-teaser-list-vertical__link {
+    position: relative;
+    padding: ds-spacing-component($ds-sc-x4, rem);
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: ds-metrics-border-width(x1);
+      background-color: $ds-color-border-primary;
+    }
+  }
+
+  .ds-teaser-list-vertical__item {
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, 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-component($ds-sc-x8));
+      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-component($ds-sc-x2, 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;
+
+      @include ds-hover(true) {
+        @include ds-underline(2px, 1px);
+      }
+    }
+
+    .ds-teaser-list-vertical__item-notes {
+      @include ds-typography($ds-typography-functional-meta02regular);
+      color: $ds-color-text-primary-02;
+      margin-top: ds-spacing-component($ds-sc-x2, rem);
+    }
+  }
+
+  &.ds-teaser-list-vertical--flexible {
+    display: flex;
+    flex: 1 0 300px;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ds-teaser-list-vertical__content {
+      overflow-y: auto;
+    }
+  }
+}

package/package.json

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

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

@@ -1,80 +0,0 @@
-@use "../../foundations/helpers/forward.helpers.scss" as *;
-@use "../button/button.scss" as *;
-
-$ds-teaser-list-timeline-dot-size: ds-px-to-rem(10px);
-
-.ds-teaser-list-timeline {
-  background-color: $ds-color-surface-background;
-
-  .ds-teaser-list-timeline__vignette {
-    @include ds-typography($ds-typography-functional-body02bold);
-    color: $ds-color-text-primary;
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
-    margin: 0;
-  }
-
-  .ds-teaser-list-timeline__link {
-    border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    padding: ds-spacing-component($ds-sc-x4, rem);
-  }
-
-  .ds-teaser-list-timeline__item {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4, rem);
-    display: block;
-    text-decoration: none;
-    border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
-    position: relative;
-
-    &:last-child {
-      border: none;
-    }
-
-    .ds-teaser-list-timeline__item-dot {
-      position: absolute;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: ds-px-to-rem(6px);
-        display: inline-flex;
-        box-sizing: border-box;
-        background-color: $ds-theme-color;
-        border-radius: 50%;
-        height: $ds-teaser-list-timeline-dot-size;
-        width: $ds-teaser-list-timeline-dot-size;
-      }
-    }
-
-    .ds-teaser-list-timeline__item-title,
-    .ds-teaser-list-timeline__item-notes {
-      margin: 0 0 0 (ds-spacing-component($ds-sc-x2, rem) + $ds-teaser-list-timeline-dot-size);
-    }
-
-    .ds-teaser-list-timeline__item-title {
-      @include ds-typography($ds-typography-expressive-heading01bold);
-      color: $ds-color-text-primary;
-      word-break: break-word;
-
-      @include ds-hover(true) {
-        @include ds-underline(2px, 1px);
-      }
-    }
-
-    .ds-teaser-list-timeline__item-notes {
-      @include ds-typography($ds-typography-functional-meta02regular);
-      color: $ds-color-text-primary-02;
-      margin-top: ds-spacing-component($ds-sc-x2, rem);
-    }
-  }
-
-  &.ds-teaser-list-timeline--flexible {
-    display: flex;
-    flex: 1 0 300px;
-    flex-direction: column;
-    overflow: hidden;
-
-    .ds-teaser-list-timeline__content {
-      overflow-y: auto;
-    }
-  }
-}