@bonniernews/dn-design-system-web 8.8.7 → 8.9.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.
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [8.9.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.8...@bonniernews/dn-design-system-web@8.9.0) (2023-12-01)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Features
|
|
11
|
+
|
|
12
|
+
* **web:** tag header component ([#1124](https://github.com/BonnierNews/dn-design-system/issues/1124)) ([8d34353](https://github.com/BonnierNews/dn-design-system/commit/8d3435337daa2713aca2e745da627bc476457705))
|
|
13
|
+
|
|
14
|
+
## [8.8.8](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.7...@bonniernews/dn-design-system-web@8.8.8) (2023-12-01)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **web:** update teaser swipe cards on mobile ([#1126](https://github.com/BonnierNews/dn-design-system/issues/1126)) ([ce91f5f](https://github.com/BonnierNews/dn-design-system/commit/ce91f5f868fa3303ddfa981fd285fbc915c4c000))
|
|
20
|
+
|
|
7
21
|
## [8.8.7](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.8.6...@bonniernews/dn-design-system-web@8.8.7) (2023-12-01)
|
|
8
22
|
|
|
9
23
|
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/tag-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tag-header)
|
|
2
|
+
- Storybook: [TagHeader](https://designsystem.dn.se/?path=/docs/section-Tagheader--docs)
|
|
3
|
+
- Storybook (Latest): [TagHeader](https://designsystem-latest.dn.se/?path=/docs/section-Tagheader--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# Tag header
|
|
8
|
+
|
|
9
|
+
## Parameters
|
|
10
|
+
|
|
11
|
+
|parameter | type | required | options | default | description |
|
|
12
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
+
|title | String | yes | | | H1 Title |
|
|
14
|
+
|vignette | String | no | | | Vignette related to title |
|
|
15
|
+
|mediaHtml | String | no | | | Main image |
|
|
16
|
+
|descriptionHtml | String | no | | | Intended use is text, links |
|
|
17
|
+
|toggle | Bool | no | true, false | false | Show/hide toggle button |
|
|
18
|
+
|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
19
|
+
|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
20
|
+
|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
21
|
+
|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
22
|
+
|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
23
|
+
|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
|
|
24
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
25
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
26
|
+
|~forcePx~ | | | | | Not supported |
|
|
27
|
+
|
|
28
|
+
## Minimum requirement example
|
|
29
|
+
|
|
30
|
+
### Nunjucks
|
|
31
|
+
|
|
32
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
{% from '@bonniernews/dn-design-system-web/components/tag-header/tag-header.njk' import TagHeader %}
|
|
36
|
+
|
|
37
|
+
{{ TagHeader(
|
|
38
|
+
{
|
|
39
|
+
vignette: "SPEL",
|
|
40
|
+
title: "Quiz",
|
|
41
|
+
descriptionHtml: "<p>Utmana dig själv med smarta quiz av DN:s medarbetare. Välj mellan olika kategorier och svårighetsgrad.</p>"
|
|
42
|
+
}
|
|
43
|
+
)}}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### SCSS
|
|
47
|
+
```scss
|
|
48
|
+
@use "@bonniernews/dn-design-system-web/components/tag-header/tag-header" as *;
|
|
49
|
+
```
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
|
|
2
|
+
{% from '@bonniernews/dn-design-system-web/components/button-toggle/button-toggle.njk' import ButtonToggle %}
|
|
3
|
+
|
|
4
|
+
{% macro TagHeader(params) %}
|
|
5
|
+
{%- set componentClassName = "ds-tag-header" %}
|
|
6
|
+
{% set attributes = getAttributes(params.attributes) %}
|
|
7
|
+
|
|
8
|
+
{%- set classes = [
|
|
9
|
+
componentClassName,
|
|
10
|
+
params.classNames if params.classNames
|
|
11
|
+
] | join(" ") %}
|
|
12
|
+
|
|
13
|
+
<div class="{{ classes }}" {{- attributes | safe }}>
|
|
14
|
+
{% if params.mediaHtml %}
|
|
15
|
+
<div class="{{ componentClassName + '__media'}}">
|
|
16
|
+
{{ params.mediaHtml | safe }}
|
|
17
|
+
</div>
|
|
18
|
+
{% endif %}
|
|
19
|
+
<div class="{{ componentClassName }}__content">
|
|
20
|
+
<div class="{{ componentClassName }}__bar">
|
|
21
|
+
<div class="{{ componentClassName }}__heading">
|
|
22
|
+
{% if params.vignette %}
|
|
23
|
+
<span class="{{ componentClassName }}__vignette">{{ params.vignette }}</span>
|
|
24
|
+
{% endif %}
|
|
25
|
+
<h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
|
|
26
|
+
</div>
|
|
27
|
+
{% if params.toggle %}
|
|
28
|
+
{{ ButtonToggle({
|
|
29
|
+
variant: 'brand',
|
|
30
|
+
size: 'small',
|
|
31
|
+
text: params.toggleText,
|
|
32
|
+
selectedText: params.toggleSelectedText,
|
|
33
|
+
selected: params.toggleSelected,
|
|
34
|
+
loading: params.toggleLoading,
|
|
35
|
+
classNames: params.toggleClassNames,
|
|
36
|
+
attributes: params.toggleAttributes
|
|
37
|
+
}) }}
|
|
38
|
+
{% endif %}
|
|
39
|
+
</div>
|
|
40
|
+
{% if params.descriptionHtml %}
|
|
41
|
+
<div class="{{ componentClassName }}__description">
|
|
42
|
+
{{ params.descriptionHtml | safe }}
|
|
43
|
+
</div>
|
|
44
|
+
{% endif %}
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
{% endmacro %}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
@use "../../foundations/helpers/forward.helpers.scss" as *;
|
|
2
|
+
@use "../button-toggle/button-toggle.scss";
|
|
3
|
+
@use "../../components/teaser-image/teaser-image.scss";
|
|
4
|
+
|
|
5
|
+
.ds-tag-header {
|
|
6
|
+
width: 100%;
|
|
7
|
+
background-color: $ds-color-surface-background;
|
|
8
|
+
padding-bottom: ds-spacing($ds-s-100);
|
|
9
|
+
display: flex;
|
|
10
|
+
|
|
11
|
+
@include ds-mq-only-breakpoint(mobile) {
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ds-tag-header__content {
|
|
16
|
+
width: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.ds-tag-header__bar {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: space-between;
|
|
23
|
+
border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
|
|
24
|
+
padding-bottom: ds-spacing($ds-s-100);
|
|
25
|
+
margin: ds-spacing($ds-s-100 $ds-s-100 0);
|
|
26
|
+
|
|
27
|
+
.ds-btn-toggle {
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
margin-left: ds-spacing($ds-s-100);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.ds-tag-header__heading {
|
|
34
|
+
margin: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ds-tag-header__vignette {
|
|
38
|
+
@include ds-typography($ds-typography-functional-meta02bold);
|
|
39
|
+
color: $ds-color-text-brand;
|
|
40
|
+
margin-bottom: ds-spacing($ds-s-025);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ds-tag-header__title {
|
|
44
|
+
@include ds-typography($ds-typography-functional-heading03bold);
|
|
45
|
+
color: $ds-color-text-primary;
|
|
46
|
+
margin: 0;
|
|
47
|
+
word-break: break-word;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ds-tag-header__media {
|
|
51
|
+
@include ds-mq-smallest-breakpoint(tablet) {
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
width: 256px;
|
|
54
|
+
max-width: 40%;
|
|
55
|
+
margin: ds-spacing($ds-s-100 0 0 $ds-s-100);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.ds-tag-header__description {
|
|
60
|
+
@include ds-typography($ds-typography-functional-body02regular);
|
|
61
|
+
color: $ds-color-text-primary;
|
|
62
|
+
margin: ds-spacing($ds-s-100 $ds-s-100 0);
|
|
63
|
+
|
|
64
|
+
a {
|
|
65
|
+
@include ds-link($ds-link-article-body);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
b,
|
|
69
|
+
strong {
|
|
70
|
+
@include ds-typography($ds-typography-functional-body02semibold);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
p {
|
|
74
|
+
margin: ds-spacing($ds-s-100 0);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
p:first-child {
|
|
78
|
+
margin-top: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
p:last-child {
|
|
82
|
+
margin-bottom: 0;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -23,7 +23,19 @@
|
|
|
23
23
|
@include ds-teaser-focus(2px);
|
|
24
24
|
|
|
25
25
|
@include ds-mq-only-breakpoint(mobile) {
|
|
26
|
-
margin
|
|
26
|
+
margin: 0;
|
|
27
|
+
|
|
28
|
+
.ds-teaser-swipe-card {
|
|
29
|
+
box-sizing: content-box;
|
|
30
|
+
|
|
31
|
+
&:first-of-type {
|
|
32
|
+
padding-left: ds-spacing($ds-s-100);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:last-of-type {
|
|
36
|
+
padding-right: ds-spacing($ds-s-100);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
27
39
|
}
|
|
28
40
|
}
|
|
29
41
|
|
package/package.json
CHANGED