@bonniernews/dn-design-system-web 4.1.2 → 4.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.
 
+## 4.2.0 (2023-09-06)
+
+
+### Features
+
+* **web:** implement `TeaserListSwipe` ([#966](https://github.com/BonnierNews/dn-design-system/issues/966)) ([d93e6cb](https://github.com/BonnierNews/dn-design-system/commit/d93e6cb32dd16d30c83ccca194e2250cd7e06b54))
+
+
+
 ## 4.1.2 (2023-09-06)
 
 

package/assets/teaser/teaser.scss

@@ -43,7 +43,9 @@ $grade-size: ds-px-to-rem(34px);
   }
 
   @include ds-hover(true) {
-    .ds-teaser__title {
+    > .ds-teaser__title,
+    > .ds-teaser__content > .ds-teaser__title,
+    > .ds-teaser__text > .ds-teaser__title {
       @include ds-underline();
     }
   }

package/components/group-header/README.md

@@ -11,14 +11,21 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | string | yes | | | The title text |
-|variant | string | no | icon, link, toggle | icon | The variant to render |
-|href | string | no | | | If given, the title is rendered as a link. Only available for variants `icon` and `link` |
+|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`) |
-|toggle | object | no | | | Arguments to the ToggleButton (only for variant `toggle`) |
+|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`) |
+|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for variant `toggle`) |
+|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for variant `toggle`) |
+|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for variant `toggle`) |
 |classNames | String | no | | | Ex. "my-special-class" |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
 
-Depending on variant, only one of `toggle`, `linkText` is allowed. In `icon` and `link` mode, the `href` is required to show the ornament.
+NB: The `arrows` variant is only active in desktop environments. It is equivalent to `icon` in non-desktop environments.
+
+Depending on variant, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.
 
 ## Minimum requirement example
 
@@ -29,7 +36,7 @@ These are copy paste friendly examples to quickliy get started using a component
 ```html
 {% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
 
-{{ call GroupHeader({
+{{ GroupHeader({
   title: "Dagens Nyheter",
   href: "https://www.dn.se/"
 }) }}
@@ -41,4 +48,4 @@ These are copy paste friendly examples to quickliy get started using a component
 ```
 
 ### JS
-If you provide the `toggle` parameter, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).
+If you use the `toggle` variant, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).

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

@@ -1,42 +1,73 @@
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
 
 {% macro GroupHeader(params) %}
   {% set componentClassName = "ds-group-header" %}
   {% set classNamePrefix = componentClassName + "--" %}
-  {% set variant = [] %}
+  {% set additionalClasses = [classNamePrefix + (params.variant or 'icon')] %}
   {% set attributes = getAttributes(params.attributes) %}
 
   {% if params.classNames %}
-    {% set variant = (variant.push(params.classNames), variant) %}
-  {% endif%}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
 
-  {% set classes = componentClassName + " " + variant | join(" ") %}
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
 
   {% set groupHeaderInner %}
     <h2 class="{{ componentClassName + '__title'}}">{{ params.title}}</h2>
 
-    {% if params.variant == 'toggle' and params.toggle %}
-      {# Could we add defaults here? #}
-      {{ ButtonToggle(params.toggle) }}
-    {% elif params.variant == 'link' and params.linkText and params.href %}
+    {% if params.variant == 'link' and params.linkText and params.href %}
       <span class="{{ componentClassName + '__right-link' }}">
         {{ params.linkText }}
       </span>
     {% elif (params.variant == 'icon' or not params.variant) and params.href %}
-      {{ IconUse({ icon: "arrow_forward" }) }}
+      {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon' }) }}
+    {% elif (params.variant == 'arrows') and params.href %}
+      {{ IconUse({ icon: "arrow_forward", classNames: componentClassName + '__icon hidden-desktop' }) }}
     {% endif %}
   {% endset %}
 
-  {% if (params.variant == 'link' or params.variant == 'icon' or not params.variant) and params.href %}
-    <a class="{{ classes }} {{ componentClassName + '--link'}}" href="{{ params.titleHref }}" {{ attributes | safe }}>
-      {{ groupHeaderInner | safe }}
-    </a>
-  {% else %}
-    <div class="{{ classes }}" {{ attributes | safe }}>
+  <div class="{{ classes }}" {{ attributes | safe }}>
+    {% if params.href %}
+      <a class="{{ componentClassName + '__href'}}" href="{{ params.titleHref }}">
+        {{ groupHeaderInner | safe }}
+      </a>
+    {% else %}
       {{ groupHeaderInner | safe }}
-    </div>
-  {% endif %}
+    {% endif %}
+    {% if params.variant == 'toggle' %}
+      {{ ButtonToggle({
+        variant: 'brand',
+        size: 'xsmall',
+        text: params.toggleText,
+        selectedText: params.toggleSelectedText,
+        selected: params.toggleSelected,
+        loading: params.toggleLoading,
+        classNames: params.toggleClassNames,
+        attributes: params.toggleAttributes
+      }) }}
+    {% elif (params.variant == 'arrows') %}
+      <div class="{{ componentClassName + '__arrows' }} hidden-mobile hidden-tablet">
+        {{ IconButton({
+          variant: "elevated",
+          size: "small",
+          iconName: "arrow_back",
+          classNames: "ds-group-header__arrow ds-group-header__arrow--left",
+          attributes: {"aria-label": "Föregående"},
+          forcePx: true
+        }) }}
+        {{ IconButton({
+          variant: "elevated",
+          size: "small",
+          iconName: "arrow_forward",
+          classNames: "ds-group-header__arrow ds-group-header__arrow--right",
+          attributes: {"aria-label": "Nästa"},
+          forcePx: true
+        }) }}
+      </div>
+    {% endif %}
+  </div>
 
 {% endmacro %}

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

@@ -1,5 +1,6 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../button-toggle/button-toggle.scss";
+@use "../icon-button/icon-button.scss";
 
 .ds-group-header {
   display: flex;
@@ -7,25 +8,35 @@
   justify-content: space-between;
   background: $ds-color-background-primary;
   color: $ds-color-text-primary;
-  padding: ds-spacing-component(0 $ds-sc-x4);
   @include ds-typography($ds-typography-functional-body02regular);
 
   .ds-group-header__right-link,
-  .ds-btn-toggle,
-  .ds-icon {
+  .ds-group-header__icon,
+  .ds-btn-toggle {
     flex-shrink: 0;
+    margin-right: ds-spacing-component($ds-sc-x4);
+  }
+
+  .ds-group-header__arrows {
+    flex-shrink: 0;
+    padding-right: ds-spacing-component($ds-sc-x2);
   }
 
   .ds-group-header__right-link {
     @include ds-link($ds-link-paragraph);
   }
 
-  .ds-icon {
+  .ds-group-header__icon {
     height: 24px;
     width: 24px;
   }
 
-  &.ds-group-header--link {
+  .ds-group-header__href {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+
     @include ds-link($ds-link-list);
 
     @include ds-hover(true) {
@@ -42,7 +53,8 @@
   }
 
   .ds-group-header__title {
-    padding: ds-spacing-component($ds-sc-x3 0);
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    flex: 1;
     @include ds-typography($ds-typography-functional-body02bold);
     margin: 0;
   }

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

@@ -0,0 +1,44 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
+- Storybook: [TeaserListSwipe](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe--docs)
+- Storybook (Latest): [TeaserListSwipe](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistswipe--docs)
+
+----
+
+# teaser-list-swipe
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|titleHref | String | no | | | Target URL for the header |
+|areaType | String | no | "main", "right", "bauta", "bautaxl" | | The area where the column is rendered |
+|scrollType | String | no | "arrows", "header" | "arrows" | Where to render the scroll arrows |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|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 quickly get started using a component.
+
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe.njk' import TeaserListSwipe %}
+
+{% call TeaserListSwipe({
+  title: 'DN Direkt',
+  targetLink: '/direkt/'
+}) %}
+   {% for teaser in teasers}
+      (render teasers)
+   {% endfor %}
+{% endcall}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-list-swipe/teaser-list-swipe";
+```

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

@@ -0,0 +1,54 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/icon-button/icon-button.njk' import IconButton %}
+{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}
+
+{% macro TeaserListSwipe(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--list-swipe"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <div class="{{ classes }}" {{- attributes | safe }}>
+    {{ GroupHeader({
+      title: params.title,
+      href: params.titleHref,
+      variant: 'arrows' if params.scrollType == 'header'
+    }) }}
+    <div class="{{ componentClassName + '__carousel'}}">
+      {{ caller() }}
+    </div>
+
+    {% if params.scrollType != 'header' %}
+      {{ IconButton({
+        iconName: 'arrow_back',
+        variant: 'elevated',
+        size: 'small',
+        attributes: { 'aria-label': 'Föregående' },
+        classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--back hidden-mobile hidden-tablet',
+        forcePx: true
+      }) }}
+      {{ IconButton({
+        iconName: 'arrow_forward',
+        variant: 'elevated',
+        size: 'small',
+        attributes: { 'aria-label': 'Nästa' },
+        classNames: componentClassName + '__swipe-arrow ' + componentClassName + '__swipe-arrow--forward hidden-mobile hidden-tablet',
+        forcePx: true
+      }) }}
+    {% endif %}
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,37 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+@use "../../components/icon-button/icon-button";
+@use "../../components/group-header/group-header";
+@use "../../components/teaser-swipe-card/teaser-swipe-card";
+
+.ds-teaser.ds-teaser--list-swipe {
+  max-width: 100%;
+  color: $ds-color-text-primary;
+
+  .ds-teaser__carousel {
+    padding: ds-spacing-component(0 $ds-sc-x4);
+    padding-bottom: ds-spacing-component($ds-sc-x3);
+    overflow-x: scroll;
+    display: grid;
+    grid-auto-columns: max-content;
+    grid-auto-flow: column;
+    gap: ds-spacing-component($ds-sc-x2);
+  }
+
+  @include ds-mq-only-breakpoint(desktop) {
+    .ds-teaser__swipe-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+
+      &--back {
+        left: ds-spacing-component($ds-sc-x4);
+      }
+
+      &--forward {
+        right: ds-spacing-component($ds-sc-x4);
+      }
+    }
+  }
+}

package/components/teaser-onsite/teaser-onsite.scss

@@ -14,7 +14,7 @@
 
   @include ds-hover(true) {
     .ds-teaser__title {
-      text-decoration: none;
+      text-decoration: none !important;
     }
 
     .ds-teaser__text {

package/components/teaser-swipe-card/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
+- Storybook: [Subcomponents > TeaserSwipeCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)
+- Storybook (Latest): [Subcomponents > TeaserSwipeCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)
+
+----
+
+# TeaserSwipeCard
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | text | yes | | | The title of the teaser |
+|href | text | yes | | | The link of the teaser |
+|highlight | text | no | | | The highlight text of the teaser |
+|time | text | no | | | The timestamp text of the teaser |
+|mediaHtml | html | no | | | The media to render |
+|variant | text | no | default, insandare, direkt | default | The variant of the teaser |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | bool | no | true, false | false | Not supported |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+
+## 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-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}
+
+{{ TeaserSwipeCard({
+  title: "Nyheter händer"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card";
+```

package/components/teaser-swipe-card/teaser-swipe-card.njk

@@ -0,0 +1,54 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserSwipeCard(params) %}
+  {% set componentClassName = "ds-teaser-swipe-card" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% if params.forcePx %}
+    {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.variant and params.variant !== "default" %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push("ds-theme--" + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ teaser.href }}" class="{{classes}}" {{- attributes | safe }}>
+    {% if params.variant != 'direkt' and params.mediaHtml %}
+      {{ params.mediaHtml | safe }}
+    {% endif %}
+
+    <div class="ds-teaser__text">
+      {% if params.variant != 'direkt' and params.vignette %}
+        <div class="ds-teaser__vignette">{{params.vignette}}</div>
+      {% endif %}
+
+      {% if params.variant == 'direkt' and params.time %}
+        <span class="{{ componentClassName + '__time' }}">{{ params.time }}</span>
+      {% endif %}
+      <h3 class="ds-teaser__title">
+        {% if params.variant != 'direkt' and params.highlight %}
+          <span class="ds-teaser__highlight">
+            {{ params.highlight}}
+          </span>
+        {% endif %}
+        {{ params.title }}
+      </h3>
+
+      {% if params.variant != 'direkt' and params.time %}
+        <span class="{{ componentClassName + '__time' }}">{{ params.time }}</span>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

package/components/teaser-swipe-card/teaser-swipe-card.scss

@@ -0,0 +1,88 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+
+@use "../../assets/teaser/teaser.scss";
+@use "../../components/teaser-image/teaser-image.scss";
+
+.ds-teaser.ds-teaser-swipe-card {
+  display: flex;
+  flex-direction: column;
+  width: 268px;
+  max-width: 75vw; // ensure low-width devices see atleast part of a second teaser
+  color: $ds-color-text-primary;
+  text-decoration: none;
+
+  border: ds-metrics-border-width(x1) solid $ds-color-border-primary;
+  border-radius: ds-metrics-border-radius(x2);
+  overflow: hidden; // ensure media doesn't overflow the border-radius
+
+  .ds-teaser__text {
+    display: flex;
+    flex-direction: column;
+    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
+    margin: 0;
+    flex: 1;
+  }
+
+  .ds-teaser-swipe-card__time {
+    @include ds-typography($ds-typography-functional-meta02regular);
+    color: $ds-color-text-primary-02;
+  }
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-expressive-heading01bold);
+    margin-bottom: ds-spacing-component($ds-sc-x1);
+    flex: 1;
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(2px, 2px);
+    }
+  }
+
+  &.ds-teaser-swipe-card--insandare {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading01italicsemibold);
+    }
+  }
+
+  &.ds-teaser-swipe-card--direkt {
+    border: none;
+    border-radius: 0;
+
+    &:not(:last-of-type) {
+      margin-right: ds-spacing-component($ds-sc-x2);
+    }
+
+    .ds-teaser__text {
+      padding: ds-spacing-component($ds-sc-x1 0 0 0);
+    }
+
+    .ds-teaser-swipe-card__time {
+      display: flex;
+      @include ds-typography($ds-typography-functional-body01semibold);
+      color: $ds-theme-color;
+      align-items: center;
+      margin-bottom: ds-spacing-component($ds-sc-x1);
+
+      &::before {
+        content: "";
+        display: block;
+        width: ds-spacing-component($ds-sc-x2);
+        height: ds-spacing-component($ds-sc-x2);
+        background-color: $ds-theme-color;
+        border-radius: 50%;
+        margin-right: ds-spacing-component($ds-sc-x2);
+      }
+
+      &::after {
+        content: "";
+        display: block;
+        height: 2px;
+        flex: 1;
+        background-color: $ds-color-border-primary;
+        margin-left: ds-spacing-component($ds-sc-x2);
+      }
+    }
+  }
+}

package/package.json

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