@bonniernews/dn-design-system-web 3.0.0-alpha.40 → 3.0.0-alpha.42

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 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.42](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.41...@bonniernews/dn-design-system-web@3.0.0-alpha.42) (2023-05-03)
+
+
+### Features
+
+* **web:** onsite teaser - dn på plats ([#783](https://github.com/BonnierNews/dn-design-system/issues/783)) ([42603af](https://github.com/BonnierNews/dn-design-system/commit/42603af21bd6511f858f2b7acc889067584cbf93))
+
+
+
+## [3.0.0-alpha.41](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.40...@bonniernews/dn-design-system-web@3.0.0-alpha.41) (2023-05-03)
+
+
+### Features
+
+* **web:** tipsa teaser  ([#780](https://github.com/BonnierNews/dn-design-system/issues/780)) ([cb2a263](https://github.com/BonnierNews/dn-design-system/commit/cb2a2636cdbc823f8584133b27a6730e9eddb973))
+
+
+### Bug Fixes
+
+* **web:** teaserLarge should check params.targetId ([#789](https://github.com/BonnierNews/dn-design-system/issues/789)) ([4ea1838](https://github.com/BonnierNews/dn-design-system/commit/4ea18388286217e9171f1a851c3dad65c1eace0f))
+
+
+
 ## 3.0.0-alpha.40 (2023-05-03)
 
 

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

@@ -33,7 +33,7 @@
 
   <a href="{{ params.targetLink }}"
     class="{{ classes }}"
-    {% if targetId %} data-id="{{ params.targetId }}" {% endif %}
+    {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
     {{- attributes | safe }}>
 
     {% if params.mediaHtml %}

package/components/teaser-onsite/README.md

@@ -0,0 +1,45 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+- Storybook (PROD): [TeaserOnSite > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaseronsite-web)
+- Storybook (LATEST): [TeaserOnSite > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaseronsite-web)
+
+----
+
+# teaser-onsite
+
+Also known as "På Plats-puffen".
+
+In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|targetId | String | no | | | Target article ID |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|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-onsite/teaser-onsite.njk' import TeaserOnSite %}
+
+{{ TeaserOnSite({
+  title: 'Kiev, Ukraina',
+  text: 'Henrik Brandão Jönsson och Eduardo Leal'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite" as *;
+```

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

@@ -0,0 +1,42 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserOnSite(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--onsite"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% 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(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {% if targetId %} data-id="{{ params.targetId }}" {% endif %}
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+      </div>
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      <h2 class="ds-teaser__title">
+        DN PÅ PLATS {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

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

@@ -0,0 +1,29 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--onsite {
+  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  background-image: var(
+    --ds-onsite-background-image-url
+  ); //Set by parent context (like Storybook or Bang)
+  background-position: 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+
+  .ds-teaser__title {
+    color: $ds-theme-color;
+    @include ds-typography($ds-typography-detailarticle-label);
+  }
+
+  .ds-teaser__text {
+    margin-top: 0;
+    @include ds-typography($ds-typography-functional-heading01bold);
+  }
+
+  .ds-teaser__media {
+    float: left;
+    margin-right: ds-spacing-component($ds-sc-x4);
+    width: 56px;
+    height: 56px;
+  }
+}

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

@@ -1,7 +1,7 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
 
-.ds-teaser--standard {
+.ds-teaser.ds-teaser--standard {
   display: flex;
 
   @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);

package/components/teaser-tipsa/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
+- Storybook (PROD): [TeaserTipsa > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teasertipsa-web)
+- Storybook (LATEST): [TeaserTipsa > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teasertipsa-web)
+
+----
+
+# teaser-tipsa
+
+It's quite common to include a dot in the title string, like "• This is a title"
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|targetId | String | no | | | Target article ID |
+|text | String | no | | | Teaser subtext |
+|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-tipsa/teaser-tipsa.njk' import TeaserTipsa %}
+
+{{ TeaserTipsa({
+  title: "• Jessie Ware låter den fullödiga fullängdaren vänta på sig",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa" as *;
+```

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

@@ -0,0 +1,32 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserTipsa(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--tipsa"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {% if targetId %} data-id="{{ params.targetId }}" {% endif %}
+    {{- attributes | safe }}>
+
+    <div class="{{ componentClassName + '__content'}}">
+      <h2 class="ds-teaser__title">
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

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

@@ -0,0 +1,17 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--tipsa {
+  .ds-teaser__content {
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  }
+
+  .ds-teaser__title {
+    @include ds-typography($ds-typography-expressive-heading01bold);
+  }
+
+  .ds-teaser__text {
+    margin-top: 0;
+    @include ds-typography($ds-typography-functional-body02regular);
+  }
+}

package/package.json

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