@bonniernews/dn-design-system-web 4.2.4 → 4.3.0

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 (12) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/components/teaser-card/README.md +41 -0
  3. package/components/teaser-card/teaser-card.njk +32 -0
  4. package/components/teaser-large/teaser-large.njk +9 -17
  5. package/components/teaser-native/teaser-native.njk +8 -13
  6. package/components/teaser-onsite/teaser-onsite.njk +9 -17
  7. package/components/teaser-right-now/teaser-right-now.njk +8 -12
  8. package/components/teaser-slideshow/teaser-slideshow.njk +9 -15
  9. package/components/teaser-split/teaser-split.njk +9 -17
  10. package/components/teaser-standard/teaser-standard.njk +9 -16
  11. package/components/teaser-tipsa/teaser-tipsa.njk +7 -9
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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
+ ## 4.3.0 (2023-09-08)
7
+
8
+
9
+ ### Features
10
+
11
+ * **web:** implement a base TeaserCard component for all teasers ([#979](https://github.com/BonnierNews/dn-design-system/issues/979)) ([9eb1f2f](https://github.com/BonnierNews/dn-design-system/commit/9eb1f2fb392c831e5e00776e8f03474ed9349d8b))
12
+
13
+
14
+
6
15
  ## 4.2.4 (2023-09-07)
7
16
 
8
17
 
package/components/teaser-card/README.md ADDED
@@ -0,0 +1,41 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
2
+ - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
3
+ - Storybook (Latest): [Subcomponents > TeaserCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
4
+
5
+ ----
6
+
7
+ # TeaserCard
8
+
9
+ This component is the basis for all Teasers. While it does not render much itself, it brings a common styling base for its children.
10
+
11
+ ## Parameters
12
+
13
+ |parameter | type | required | options | default | description |
14
+ |:--- | :--- | :--- | :--- | :--- | :--- |
15
+ |targetLink | String | no | | | If given, the card will render as a link |
16
+ |areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
17
+ |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
18
+ |classNames | String | no | | | Ex. "ds-teaser--large" |
19
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
20
+ |~forcePx~ | | | | | Not supported |
21
+
22
+ ## Minimum requirement example
23
+
24
+ ### Nunjucks
25
+
26
+ These are copy paste friendly examples to quickliy get started using a component.
27
+
28
+ ```html
29
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
30
+
31
+ {% call TeaserCard({
32
+ targetLink: 'https://www.dn.se/',
33
+ }) %}
34
+ (content)
35
+ {% endcall %}
36
+ ```
37
+
38
+ ### SCSS
39
+ ```scss
40
+ @use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
41
+ ```
package/components/teaser-card/teaser-card.njk ADDED
@@ -0,0 +1,32 @@
1
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+
3
+ {% macro TeaserCard(params) %}
4
+ {% set componentClassName = "ds-teaser" %}
5
+ {% set classNamePrefix = componentClassName + "--" %}
6
+ {% set variant = [] %}
7
+ {% set attributes = getAttributes(params.attributes) %}
8
+
9
+ {% if params.classNames %}
10
+ {% set variant = (variant.push(params.classNames), variant) %}
11
+ {% endif%}
12
+
13
+ {% if params.areaType %}
14
+ {% set variant = (variant.push(classNamePrefix + params.areaType), variant) %}
15
+ {% endif %}
16
+
17
+ {% if params.theme %}
18
+ {% set variant = (variant.push("ds-theme--" + params.theme), variant) %}
19
+ {% endif %}
20
+
21
+ {% set classes = componentClassName + " " + variant | join(" ") %}
22
+
23
+ {% if params.targetLink %}
24
+ <a class="{{ classes }}" {{- attributes | safe }}>
25
+ {{ caller() }}
26
+ </a>
27
+ {% else %}
28
+ <div class="{{ classes }}" {{- attributes | safe }}>
29
+ {{ caller() }}
30
+ </div>
31
+ {% endif %}
32
+ {% endmacro %}
package/components/teaser-large/teaser-large.njk CHANGED
@@ -1,4 +1,4 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
4
  {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
@@ -7,20 +7,11 @@
7
7
  {% set componentClassName = "ds-teaser" %}
8
8
  {% set classNamePrefix = componentClassName + "--" %}
9
9
  {% set additionalClasses = ["ds-teaser--large"] %}
10
- {% set attributes = getAttributes(params.attributes) %}
11
10
 
12
11
  {% if params.variant %}
13
12
  {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
14
13
  {% endif %}
15
14
 
16
- {% if params.theme %}
17
- {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
18
- {% endif %}
19
-
20
- {% if params.areaType %}
21
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
22
- {% endif %}
23
-
24
15
  {% if params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
25
16
  {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
26
17
  {% endif %}
@@ -39,12 +30,13 @@
39
30
  {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
40
31
  {% endif %}
41
32
 
42
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
43
-
44
- <a href="{{ params.targetLink }}"
45
- class="{{ classes }}"
46
- {{- attributes | safe }}>
47
-
33
+ {% call TeaserCard({
34
+ targetLink: params.targetLink,
35
+ areaType: params.areaType,
36
+ theme: params.theme,
37
+ attributes: params.attributes,
38
+ classNames: additionalClasses | join(" ")
39
+ }) %}
48
40
  {% if params.mediaHtml %}
49
41
  <div class="{{ componentClassName + '__media'}}">
50
42
  {{ params.mediaHtml }}
@@ -94,5 +86,5 @@
94
86
  </div>
95
87
  {% endif %}
96
88
  </div>
97
- </a>
89
+ {% endcall %}
98
90
  {% endmacro %}
package/components/teaser-native/teaser-native.njk CHANGED
@@ -1,4 +1,4 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
3
3
  {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
4
4
 
@@ -6,24 +6,19 @@
6
6
  {% set componentClassName = "ds-teaser" %}
7
7
  {% set classNamePrefix = componentClassName + "--" %}
8
8
  {% set additionalClasses = ["ds-teaser--native"] %}
9
- {% set attributes = getAttributes(params.attributes) %}
10
9
  {% set nativeVariant = params.nativeVariant if params.nativeVariant else "standard" %}
11
10
  {% set additionalClasses = (additionalClasses.push('ds-teaser--native-' + nativeVariant), additionalClasses) %}
12
11
 
13
- {% if params.areaType %}
14
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
15
- {% endif %}
16
-
17
12
  {% if params.classNames %}
18
13
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
19
14
  {% endif%}
20
15
 
21
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
22
-
23
- <a href="{{ params.targetLink }}"
24
- class="{{ classes }}"
25
- {{- attributes | safe }}>
26
-
16
+ {% call TeaserCard({
17
+ targetLink: params.targetLink,
18
+ areaType: params.areaType,
19
+ attributes: params.attributes,
20
+ classNames: additionalClasses | join(" ")
21
+ }) %}
27
22
  <div class="{{ componentClassName + '__ad-bar'}}"><span>ANNONS</span></div>
28
23
  {% if params.mediaHtml and nativeVariant !== "standard" %}
29
24
  <div class="{{ componentClassName + '__media'}}">
@@ -55,5 +50,5 @@
55
50
  {% endif %}
56
51
  </div>
57
52
  </div>
58
- </a>
53
+ {% endcall %}
59
54
  {% endmacro %}
package/components/teaser-onsite/teaser-onsite.njk CHANGED
@@ -1,29 +1,21 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
 
3
3
  {% macro TeaserOnSite(params) %}
4
4
  {% set componentClassName = "ds-teaser" %}
5
5
  {% set classNamePrefix = componentClassName + "--" %}
6
6
  {% set additionalClasses = ["ds-teaser--onsite"] %}
7
- {% set attributes = getAttributes(params.attributes) %}
8
-
9
- {% if params.theme %}
10
- {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
11
- {% endif %}
12
-
13
- {% if params.areaType %}
14
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
15
- {% endif %}
16
7
 
17
8
  {% if params.classNames %}
18
9
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
19
10
  {% endif%}
20
11
 
21
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
22
-
23
- <a href="{{ params.targetLink }}"
24
- class="{{ classes }}"
25
- {{- attributes | safe }}>
26
-
12
+ {% call TeaserCard({
13
+ targetLink: params.targetLink,
14
+ areaType: params.areaType,
15
+ theme: params.theme,
16
+ attributes: params.attributes,
17
+ classNames: additionalClasses | join(" ")
18
+ }) %}
27
19
  {% if params.mediaHtml %}
28
20
  <div class="{{ componentClassName + '__media'}}">
29
21
  {{ params.mediaHtml }}
@@ -41,5 +33,5 @@
41
33
  </p>
42
34
  {% endif %}
43
35
  </div>
44
- </a>
36
+ {% endcall %}
45
37
  {% endmacro %}
package/components/teaser-right-now/teaser-right-now.njk CHANGED
@@ -1,29 +1,25 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
 
3
3
  {% macro TeaserRightNow(params) %}
4
4
  {%- set componentClassName = "ds-teaser" %}
5
5
  {%- set classNamePrefix = componentClassName + "--" %}
6
6
  {%- set additionalClasses = ["ds-teaser--right-now"] %}
7
- {%- set attributes = getAttributes(params.attributes) %}
8
7
 
9
8
  {%- if params.classNames %}
10
9
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
11
10
  {% endif%}
12
11
 
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
-
12
+ {% call TeaserCard({
13
+ targetLink: params.targetLink,
14
+ theme: params.theme,
15
+ attributes: params.attributes,
16
+ classNames: additionalClasses | join(" ")
17
+ }) %}
22
18
  <span class="ds-teaser__right-now-sticker">Just nu</span>
23
19
  <div class="{{ componentClassName + '__content'}}">
24
20
  <h2 class="ds-teaser__title">
25
21
  {{ params.title }}
26
22
  </h2>
27
23
  </div>
28
- </a>
24
+ {% endcall %}
29
25
  {% endmacro %}
package/components/teaser-slideshow/teaser-slideshow.njk CHANGED
@@ -1,26 +1,20 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
 
3
3
  {% macro TeaserSlideshow(params) %}
4
4
  {% set componentClassName = "ds-teaser" %}
5
5
  {% set classNamePrefix = componentClassName + "--" %}
6
- {% set additionalClasses = ["ds-teaser--slideshow ds-dark"] %}
7
- {% set attributes = getAttributes(params.attributes) %}
8
-
9
- {% if params.theme %}
10
- {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
11
- {% endif %}
12
-
13
- {% if params.areaType %}
14
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
15
- {% endif %}
6
+ {% set additionalClasses = ["ds-teaser--slideshow", "ds-dark"] %}
16
7
 
17
8
  {% if params.classNames %}
18
9
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
19
10
  {% endif%}
20
11
 
21
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
22
-
23
- <div class="{{ classes }}" {{ attributes | safe }}>
12
+ {% call TeaserCard({
13
+ areaType: params.areaType,
14
+ theme: params.theme,
15
+ attributes: params.attributes,
16
+ classNames: additionalClasses | join(" ")
17
+ }) %}
24
18
  <div class="{{ componentClassName + '__content'}}">
25
19
  <h2 class="ds-teaser__title">
26
20
  {{ params.title }}
@@ -34,5 +28,5 @@
34
28
  {% if params.mediaHtml %}
35
29
  {{ params.mediaHtml | safe }}
36
30
  {% endif %}
37
- </div>
31
+ {% endcall %}
38
32
  {% endmacro %}
package/components/teaser-split/teaser-split.njk CHANGED
@@ -1,4 +1,5 @@
1
1
  {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
3
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
3
4
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
5
  {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
@@ -7,30 +8,22 @@
7
8
  {% set componentClassName = "ds-teaser" %}
8
9
  {% set classNamePrefix = componentClassName + "--" %}
9
10
  {% set additionalClasses = ["ds-teaser--split"] %}
10
- {% set attributes = getAttributes(params.attributes) %}
11
11
 
12
12
  {% if params.variant %}
13
13
  {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
14
14
  {% endif %}
15
15
 
16
- {% if params.areaType == "bauta" or params.areaType == "bautaxl" %}
17
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
18
- {% endif %}
19
-
20
- {% if params.theme %}
21
- {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
22
- {% endif %}
23
-
24
16
  {% if params.classNames %}
25
17
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
26
18
  {% endif%}
27
19
 
28
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
29
-
30
- <a href="{{ params.targetLink }}"
31
- class="{{ classes }}"
32
- {{- attributes | safe }}>
33
-
20
+ {% call TeaserCard({
21
+ targetLink: params.targetLink,
22
+ areaType: params.areaType,
23
+ theme: params.theme,
24
+ attributes: params.attributes,
25
+ classNames: additionalClasses | join(" ")
26
+ }) %}
34
27
  {% if params.mediaHtml %}
35
28
  <div class="{{ componentClassName + '__media'}}">
36
29
  {{ params.mediaHtml }}
@@ -68,11 +61,10 @@
68
61
  </p>
69
62
  {% endif %}
70
63
  </div>
71
- </a>
64
+ {% endcall %}
72
65
  {% endmacro %}
73
66
 
74
67
  {% macro TeaserSplitContainer(params) %}
75
- {{ params.teasers | dump }}
76
68
  {%- set componentClassName = "ds-split-container" %}
77
69
  {%- set classNamePrefix = componentClassName + "--" %}
78
70
  {%- set additionalClasses = [] %}
package/components/teaser-standard/teaser-standard.njk CHANGED
@@ -1,4 +1,4 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
  {% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
3
3
  {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
4
4
  {% from '@bonniernews/dn-design-system-web/foundations/icons/grade-icon.njk' import GetGrade %}
@@ -7,20 +7,11 @@
7
7
  {% set componentClassName = "ds-teaser" %}
8
8
  {% set classNamePrefix = componentClassName + "--" %}
9
9
  {% set additionalClasses = ["ds-teaser--standard"] %}
10
- {% set attributes = getAttributes(params.attributes) %}
11
10
 
12
11
  {% if params.variant %}
13
12
  {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
14
13
  {% endif %}
15
14
 
16
- {% if params.theme %}
17
- {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
18
- {% endif %}
19
-
20
- {% if params.areaType %}
21
- {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
22
- {% endif %}
23
-
24
15
  {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
25
16
  {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
26
17
  {% endif %}
@@ -29,11 +20,13 @@
29
20
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
30
21
  {% endif%}
31
22
 
32
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
33
-
34
- <a href="{{ params.targetLink }}"
35
- class="{{ classes }}"
36
- {{- attributes | safe }}>
23
+ {% call TeaserCard({
24
+ targetLink: params.targetLink,
25
+ areaType: params.areaType,
26
+ theme: params.theme,
27
+ attributes: params.attributes,
28
+ classNames: additionalClasses | join(" ")
29
+ }) %}
37
30
 
38
31
  {% if params.isLocked and not params.mediaHtml and params.isItalicHeadline %}
39
32
  {{ VipBadge({
@@ -79,5 +72,5 @@
79
72
  </p>
80
73
  {% endif %}
81
74
  </div>
82
- </a>
75
+ {% endcall %}
83
76
  {% endmacro %}
package/components/teaser-tipsa/teaser-tipsa.njk CHANGED
@@ -1,21 +1,19 @@
1
- {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
1
+ {% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
2
2
 
3
3
  {% macro TeaserTipsa(params) %}
4
4
  {% set componentClassName = "ds-teaser" %}
5
5
  {% set classNamePrefix = componentClassName + "--" %}
6
6
  {% set additionalClasses = ["ds-teaser--tipsa"] %}
7
- {% set attributes = getAttributes(params.attributes) %}
8
7
 
9
8
  {% if params.classNames %}
10
9
  {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
11
10
  {% endif%}
12
11
 
13
- {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
14
-
15
- <a href="{{ params.targetLink }}"
16
- class="{{ classes }}"
17
- {{- attributes | safe }}>
18
-
12
+ {% call TeaserCard({
13
+ targetLink: params.targetLink,
14
+ attributes: params.attributes,
15
+ classNames: additionalClasses | join(" ")
16
+ }) %}
19
17
  <div class="{{ componentClassName + '__content'}}">
20
18
  <h2 class="ds-teaser__title">
21
19
  {{ params.title }}
@@ -27,5 +25,5 @@
27
25
  </p>
28
26
  {% endif %}
29
27
  </div>
30
- </a>
28
+ {% endcall %}
31
29
  {% endmacro %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "4.2.4",
3
+ "version": "4.3.0",
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",