@bonniernews/dn-design-system-web 3.0.0-alpha.63 → 3.0.0-alpha.65

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.65 (2023-05-24)
+
+
+### Features
+
+* **web:** slideshow teaser ([#831](https://github.com/BonnierNews/dn-design-system/issues/831)) ([7ad7183](https://github.com/BonnierNews/dn-design-system/commit/7ad7183857d8cea9782e0997c25d3ae399f5f782))
+
+
+
+## 3.0.0-alpha.64 (2023-05-24)
+
+
+### Bug Fixes
+
+* **web:** change byline images to be 156px wide ([#838](https://github.com/BonnierNews/dn-design-system/issues/838)) ([339c361](https://github.com/BonnierNews/dn-design-system/commit/339c361d78c2151e37d39a9a449db3e65245c184))
+
+
+
 ## [3.0.0-alpha.63](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.62...@bonniernews/dn-design-system-web@3.0.0-alpha.63) (2023-05-23)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

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

@@ -115,7 +115,7 @@
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
-      width: 168px;
+      width: 156px;
       // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
       min-height: 110px;
     }

package/components/teaser-slideshow/README.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-slideshow](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-slideshow)
+- Storybook (PROD): [TeaserSlideshow > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserslideshow-web)
+- Storybook (LATEST): [TeaserSlideshow > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserslideshow-web)
+
+----
+
+# teaser-slideshow
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|text | String | no | | | Teaser subtext |
+|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 |
+|mediaHtml | HTML String | no | | | Gallery html |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+NB: this component does not render a link. If a link element is desired, it needs to be inserted through the `mediaHtml` property.
+
+## 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-slideshow/teaser-slideshow.njk' import TeaserSlideshow %}
+
+{{ TeaserSlideshow({
+  title: 'Nyårsafton 2023',
+  text: 'Kolla på alla fina bilder från festen!'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-slideshow/teaser-slideshow" as *;
+```

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

@@ -0,0 +1,38 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserSlideshow(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--slideshow"] %}
+  {% 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 }}>
+    <div class="{{ componentClassName + '__content'}}">
+      <h2 class="ds-teaser__title">
+        {{ params.title | safe }}
+      </h2>
+      {% if params.text %}
+        <span class="{{ componentClassName + '__text'}}">
+          {{ params.text | safe }}
+        </span>
+      {% endif %}
+    </div>
+    {% if params.mediaHtml %}
+      {{ params.mediaHtml }}
+    {% endif %}
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,35 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--slideshow {
+  background-color: $ds-color-background-primary;
+  overflow: hidden;
+  max-height: 230px;
+  box-sizing: border-box;
+
+  &.ds-teaser--right {
+    max-width: 300px;
+  }
+
+  .ds-teaser__content {
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+    display: block;
+    color: $ds-color-text-primary;
+
+    .ds-teaser__title {
+      display: inline;
+      @include ds-typography($ds-typography-functional-heading01bold);
+    }
+
+    .ds-teaser__text {
+      display: inline;
+      @include ds-typography($ds-typography-functional-heading01regular);
+    }
+  }
+
+  @include ds-hover {
+    &:hover .ds-teaser__title {
+      text-decoration: none;
+    }
+  }
+}

package/package.json

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