@bonniernews/dn-design-system-web 3.0.0-alpha.46 → 3.0.0-alpha.48

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.
 
+## [3.0.0-alpha.48](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.47...@bonniernews/dn-design-system-web@3.0.0-alpha.48) (2023-05-08)
+
+
+### Features
+
+* **web:** teaser package ([#791](https://github.com/BonnierNews/dn-design-system/issues/791)) ([e3477df](https://github.com/BonnierNews/dn-design-system/commit/e3477df7f48657e9084bc7a4bea97a7ec1afa81f))
+
+
+
+## 3.0.0-alpha.47 (2023-05-08)
+
+
+### Bug Fixes
+
+* **web:** set standardteaser image width to 196px ([#798](https://github.com/BonnierNews/dn-design-system/issues/798)) ([5911856](https://github.com/BonnierNews/dn-design-system/commit/59118561f6166b2be2b68de068b7909117de2fda))
+
+
+
 ## [3.0.0-alpha.46](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.45...@bonniernews/dn-design-system-web@3.0.0-alpha.46) (2023-05-05)
 
 

package/components/teaser-large/teaser-large.njk

@@ -19,6 +19,10 @@
     {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
   {% endif %}
 
+  {% if params.mediaHtml %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'top-img'), additionalClasses) %}
+  {% endif %}
+
   {% if params.classNames %}
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}

package/components/teaser-package/README.md

@@ -0,0 +1,44 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
+- Storybook (PROD): [TeaserPackage > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserpackage-web)
+- Storybook (LATEST): [TeaserPackage > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserpackage-web)
+
+----
+
+# teaser-package
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|teasersHtml | HTML String | yes | | | HTML teaser output |
+|vignetteText | String | yes | | | Heading of the teaser |
+|vignetteTargetUrl | String | no | | | Target URL for the teaser |
+|vignetteTargetId | String | no | | | Target article ID |
+|areaType | string | no | "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 |
+|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-package/teaser-package.njk' import TeaserPackage %}
+
+{{ TeaserPackage({
+  teasersHtml: "",
+  areaType: "bauta",
+  vignetteText: "Svensk politik",
+  vignetteTargetId: "dn.tag.svensk-politik",
+  vignetteTargetUrl: "/om/svensk-politik/"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-package/teaser-package" as *;
+```

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

@@ -0,0 +1,37 @@
+{% 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 TeaserPackage(params) %}
+  {%- set componentClassName = "ds-teaser-package" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {%- if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <div class="{{ classes }}">
+    {%- if params.vignetteTargetUrl %}
+      <a href="{{ params.vignetteTargetUrl }}"
+        class="{{ componentClassName + '__vignette'}}"
+        {% if params.vignetteTargetId %} data-id="{{ params.vignetteTargetId }}" {% endif %}
+        {{- attributes | safe }}>
+        <span>{{ params.vignetteText }}</span>
+        {{ Icon({ icon: "arrow_forward", attributes: {"aria-hidden": true} }) }}
+      </a>
+    {% else %}
+      <div class="{{ componentClassName + '__vignette'}}">{{ params.vignetteText }}</div>
+    {% endif %}
+    {{ params.teasersHtml | safe }}
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,104 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss";
+
+.ds-teaser-package {
+  position: relative;
+  background-color: $ds-color-background-primary;
+
+  & > .ds-teaser {
+    position: relative;
+  }
+
+  > .ds-teaser::after,
+  > .ds-teaser + .ds-split-container::after {
+    content: "";
+    height: ds-metrics-border-width(x1);
+    background-color: $ds-color-border-primary;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    @include ds-spacing-layout(0 $ds-sl-teaser-horizontal, margin);
+    box-sizing: border-box;
+    z-index: 5;
+  }
+
+  .ds-teaser-package__vignette + .ds-teaser::after,
+  .ds-teaser--top-img::after {
+    display: none;
+  }
+
+  .ds-teaser--onsite {
+    background-position-y: 1px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    top: 0;
+    background-color: $ds-theme-color;
+    z-index: 5;
+  }
+
+  .ds-teaser-package__vignette {
+    padding: ds-spacing-component($ds-sc-x3);
+    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-left);
+    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-right);
+    @include ds-typography($ds-typography-functional-body02bold);
+    display: flex;
+    justify-content: space-between;
+    color: $ds-color-text-primary;
+    background-color: $ds-color-component-secondary;
+  }
+
+  a.ds-teaser-package__vignette {
+    @include ds-link($ds-link-list);
+    display: flex;
+    align-items: center;
+  }
+
+  &.ds-teaser-package--bauta {
+    .ds-teaser-package__vignette {
+      color: $ds-color-static-white;
+      background-color: $ds-theme-color;
+    }
+  }
+
+  &.ds-teaser-package--bautaxl {
+    &::after {
+      background-color: transparent;
+    }
+
+    .ds-teaser-package__vignette {
+      color: $ds-color-static-white;
+      background-color: #2b2b2b; // @todo change to token when available
+    }
+
+    .ds-teaser-package__vignette
+      + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
+      @include ds-mq-smallest-breakpoint(desktop) {
+        .ds-teaser__title {
+          font-size: 80px; // special case, will not have a token
+          line-height: 88px;
+        }
+      }
+      @include ds-mq-only-breakpoint(mobile) {
+        background-color: #2b2b2b; // @todo change to token when available
+        .ds-teaser__title,
+        .ds-teaser__text {
+          color: $ds-color-static-white;
+        }
+      }
+    }
+  }
+
+  .ds-icon {
+    width: ds-px-to-rem(24px);
+    height: ds-px-to-rem(24px);
+    color: currentColor;
+    display: inline-flex;
+  }
+}

package/components/teaser-standard/teaser-standard.scss

@@ -27,8 +27,8 @@
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
-      min-width: 224px;
-      max-width: 224px;
+      min-width: 196px;
+      max-width: 196px;
     }
 
     .teaser__video {

package/package.json

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