@bonniernews/dn-design-system-web 3.0.0-alpha.56 → 3.0.0-alpha.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/components/teaser-large/README.md +0 -1
  3. package/components/teaser-large/teaser-large.njk +0 -1
  4. package/components/teaser-onsite/README.md +0 -1
  5. package/components/teaser-onsite/teaser-onsite.njk +0 -1
  6. package/components/teaser-package/README.md +0 -2
  7. package/components/teaser-package/teaser-package.njk +0 -1
  8. package/components/teaser-right-now/README.md +37 -0
  9. package/components/teaser-right-now/teaser-right-now.njk +28 -0
  10. package/components/teaser-right-now/teaser-right-now.scss +16 -0
  11. package/components/teaser-split/README.md +0 -2
  12. package/components/teaser-split/teaser-split.njk +0 -1
  13. package/components/teaser-standard/README.md +0 -1
  14. package/components/teaser-standard/teaser-standard.njk +0 -1
  15. package/components/teaser-tipsa/README.md +0 -1
  16. package/components/teaser-tipsa/teaser-tipsa.njk +0 -1
  17. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 3.0.0-alpha.58 (2023-05-15)
7
+
8
+
9
+ ### Features
10
+
11
+ * **web:** right now teaser ([#827](https://github.com/BonnierNews/dn-design-system/issues/827)) ([05bb4c7](https://github.com/BonnierNews/dn-design-system/commit/05bb4c731bc42c3b0cf1d976cf1fd59956c33c19))
12
+
13
+
14
+
15
+ ## 3.0.0-alpha.57 (2023-05-10)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * **web:** remove targetId as teaser property ([#812](https://github.com/BonnierNews/dn-design-system/issues/812)) ([1633ac9](https://github.com/BonnierNews/dn-design-system/commit/1633ac9ce9f99ef145ccd6bbee05abe0aefc5814))
21
+
22
+
23
+
6
24
  ## 3.0.0-alpha.56 (2023-05-10)
7
25
 
8
26
 
package/components/teaser-large/README.md CHANGED
@@ -12,7 +12,6 @@
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
- |targetId | String | no | | | Target article ID |
16
15
  |variant | String | no | "default" or "podd" | "default" | |
17
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
18
17
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
package/components/teaser-large/teaser-large.njk CHANGED
@@ -42,7 +42,6 @@
42
42
 
43
43
  <a href="{{ params.targetLink }}"
44
44
  class="{{ classes }}"
45
- {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
46
45
  {{- attributes | safe }}>
47
46
 
48
47
  {% if params.mediaHtml %}
package/components/teaser-onsite/README.md CHANGED
@@ -24,7 +24,6 @@ The worldMap has to be set by the parent page as a CSS variable. This is done in
24
24
  |:--- | :--- | :--- | :--- | :--- | :--- |
25
25
  |title | String | yes | | | Heading of the teaser |
26
26
  |targetLink | String | yes | | | Target URL for the teaser |
27
- |targetId | String | no | | | Target article ID |
28
27
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
29
28
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
30
29
  |text | String | no | | | Teaser subtext |
package/components/teaser-onsite/teaser-onsite.njk CHANGED
@@ -22,7 +22,6 @@
22
22
 
23
23
  <a href="{{ params.targetLink }}"
24
24
  class="{{ classes }}"
25
- {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
26
25
  {{- attributes | safe }}>
27
26
 
28
27
  {% if params.mediaHtml %}
package/components/teaser-package/README.md CHANGED
@@ -13,7 +13,6 @@
13
13
  |teasersHtml | HTML String | yes | | | HTML teaser output |
14
14
  |vignetteText | String | yes | | | Heading of the teaser |
15
15
  |vignetteTargetUrl | String | no | | | Target URL for the teaser |
16
- |vignetteTargetId | String | no | | | Target article ID |
17
16
  |areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
18
17
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
19
18
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
@@ -33,7 +32,6 @@ These are copy paste friendly examples to quickliy get started using a component
33
32
  teasersHtml: "",
34
33
  areaType: "bauta",
35
34
  vignetteText: "Svensk politik",
36
- vignetteTargetId: "dn.tag.svensk-politik",
37
35
  vignetteTargetUrl: "/om/svensk-politik/"
38
36
  })}}
39
37
  ```
package/components/teaser-package/teaser-package.njk CHANGED
@@ -24,7 +24,6 @@
24
24
  {%- if params.vignetteTargetUrl %}
25
25
  <a href="{{ params.vignetteTargetUrl }}"
26
26
  class="{{ componentClassName + '__vignette'}}"
27
- {% if params.vignetteTargetId %} data-id="{{ params.vignetteTargetId }}" {% endif %}
28
27
  {{- attributes | safe }}>
29
28
  <span>{{ params.vignetteText }}</span>
30
29
  {{ Icon({ icon: "arrow_forward", attributes: {"aria-hidden": true} }) }}
package/components/teaser-right-now/README.md ADDED
@@ -0,0 +1,37 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-right-now](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-right-now)
2
+ - Storybook (PROD): [TeaserRightNow > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserrightnow-web--right-now)
3
+ - Storybook (LATEST): [TeaserRightNow > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserrightnow-web--right-now)
4
+
5
+ ----
6
+
7
+ # teaser-right-now
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |title | String | yes | | | Heading of the teaser |
14
+ |targetLink | String | yes | | | Target URL for the teaser |
15
+ |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
16
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
+ |classNames | String | no | | | Ex. "my-special-class" |
18
+ |~forcePx~ | | | | | Not supported |
19
+
20
+ ## Minimum requirement example
21
+
22
+ ### Nunjucks
23
+
24
+ These are copy paste friendly examples to quickliy get started using a component.
25
+
26
+ ```html
27
+ {% from '@bonniernews/dn-design-system-web/components/teaser-right-now/teaser-right-now.njk' import TeaserRightNow %}
28
+
29
+ {{ TeaserRightNow({
30
+ title: "Tågtrafiken avstängd mellan Malmö och Göteborg",
31
+ })}}
32
+ ```
33
+
34
+ ### SCSS
35
+ ```scss
36
+ @use "@bonniernews/dn-design-system-web/components/teaser-right-now/teaser-right-now" as *;
37
+ ```
package/components/teaser-right-now/teaser-right-now.njk ADDED
@@ -0,0 +1,28 @@
1
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+
3
+ {% macro TeaserRightNow(params) %}
4
+ {%- set componentClassName = "ds-teaser" %}
5
+ {%- set classNamePrefix = componentClassName + "--" %}
6
+ {%- set additionalClasses = ["ds-teaser--right-now"] %}
7
+ {%- set attributes = getAttributes(params.attributes) %}
8
+
9
+ {%- if params.classNames %}
10
+ {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
11
+ {% endif%}
12
+
13
+ {%- if params.theme %}
14
+ {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
15
+ {% endif %}
16
+
17
+ {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
18
+ <a href="{{ params.targetLink }}"
19
+ class="{{ classes }}"
20
+ {{- attributes | safe }}>
21
+
22
+ <div class="{{ componentClassName + '__content'}}">
23
+ <h2 class="ds-teaser__title">
24
+ <span class="ds-teaser__right-now-sticker">Just nu:</span> {{ params.title | safe }}
25
+ </h2>
26
+ </div>
27
+ </a>
28
+ {% endmacro %}
package/components/teaser-right-now/teaser-right-now.scss ADDED
@@ -0,0 +1,16 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+ @use "../../assets/teaser/teaser.scss";
3
+
4
+ .ds-teaser.ds-teaser--right-now {
5
+ .ds-teaser__content {
6
+ @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
7
+ }
8
+
9
+ .ds-teaser__title {
10
+ @include ds-typography($ds-typography-expressive-heading01bold);
11
+ }
12
+
13
+ .ds-teaser__right-now-sticker {
14
+ color: $ds-theme-color;
15
+ }
16
+ }
package/components/teaser-split/README.md CHANGED
@@ -12,7 +12,6 @@
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
- |targetId | String | no | | | Target article ID |
16
15
  |~variant~ | String | no | "default" or "podd" | "default" | Not implemented |
17
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
18
17
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
@@ -39,7 +38,6 @@ These are copy paste friendly examples to quickliy get started using a component
39
38
  {{ TeaserSplit({
40
39
  title: "Sju miljoner i humanitärt stöd till Turkiet och Syrien",
41
40
  targetLink: "#",
42
- targetId: "test.123",
43
41
  text: "Tält och temporära nödboenden samt ledningsresurser för att koordinera räddningsarbetet."
44
42
  })}}
45
43
  ```
package/components/teaser-split/teaser-split.njk CHANGED
@@ -28,7 +28,6 @@
28
28
 
29
29
  <a href="{{ params.targetLink }}"
30
30
  class="{{ classes }}"
31
- {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
32
31
  {{- attributes | safe }}>
33
32
 
34
33
  {% if params.mediaHtml %}
package/components/teaser-standard/README.md CHANGED
@@ -12,7 +12,6 @@
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
13
  |title | String | yes | | | Heading of the teaser |
14
14
  |targetLink | String | yes | | | Target URL for the teaser |
15
- |targetId | String | no | | | Target article ID |
16
15
  |variant | String | no | "default" or "podd" | "default" | |
17
16
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
18
17
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -32,7 +32,6 @@
32
32
 
33
33
  <a href="{{ params.targetLink }}"
34
34
  class="{{ classes }}"
35
- {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
36
35
  {{- attributes | safe }}>
37
36
 
38
37
  {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
package/components/teaser-tipsa/README.md CHANGED
@@ -14,7 +14,6 @@ It's quite common to include a dot in the title string, like "• This is a titl
14
14
  |:--- | :--- | :--- | :--- | :--- | :--- |
15
15
  |title | String | yes | | | Heading of the teaser |
16
16
  |targetLink | String | yes | | | Target URL for the teaser |
17
- |targetId | String | no | | | Target article ID |
18
17
  |text | String | no | | | Teaser subtext |
19
18
  |areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
20
19
  |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
package/components/teaser-tipsa/teaser-tipsa.njk CHANGED
@@ -14,7 +14,6 @@
14
14
 
15
15
  <a href="{{ params.targetLink }}"
16
16
  class="{{ classes }}"
17
- {% if params.targetId %} data-id="{{ params.targetId }}" {% endif %}
18
17
  {{- attributes | safe }}>
19
18
 
20
19
  <div class="{{ componentClassName + '__content'}}">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.56",
3
+ "version": "3.0.0-alpha.58",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",