@bonniernews/dn-design-system-web 14.2.1 → 14.3.1

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 (16) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/components/list-item/README-accordion.md +1 -1
  3. package/components/list-item/README-checkbox.md +1 -1
  4. package/components/list-item/README-image.md +48 -0
  5. package/components/list-item/README-radio.md +1 -1
  6. package/components/list-item/README-switch.md +1 -1
  7. package/components/list-item/README-toggle.md +1 -1
  8. package/components/list-item/README.md +1 -1
  9. package/components/list-item/list-item.njk +4 -1
  10. package/components/list-item/list-item.scss +12 -0
  11. package/components/tag-header/tag-header.scss +4 -4
  12. package/components/teaser-footer/teaser-footer.scss +2 -2
  13. package/components/teaser-large/teaser-large.scss +3 -3
  14. package/components/teaser-split/teaser-split.scss +1 -1
  15. package/components/teaser-standard/teaser-standard.scss +2 -2
  16. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,30 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [14.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.3.0...@bonniernews/dn-design-system-web@14.3.1) (2024-03-13)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **web:** use new typo for podd components ([#1239](https://github.com/BonnierNews/dn-design-system/issues/1239)) ([c0a172e](https://github.com/BonnierNews/dn-design-system/commit/c0a172e69d429d19f3489e7a7a716d114bf7051e))
13
+
14
+ ## [14.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.1...@bonniernews/dn-design-system-web@14.3.0) (2024-03-13)
15
+
16
+
17
+ ### Features
18
+
19
+ * **web:** support for images in list item ([#1240](https://github.com/BonnierNews/dn-design-system/issues/1240)) ([0b83b22](https://github.com/BonnierNews/dn-design-system/commit/0b83b22ef2f843e63a127db7e4324d7d077c9ccb))
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **app:** better flex in BaseListItem ([#1241](https://github.com/BonnierNews/dn-design-system/issues/1241)) ([12f7229](https://github.com/BonnierNews/dn-design-system/commit/12f72296fe2ae6b5c73273b9449d92b85f07b335))
25
+
26
+
27
+ ### Maintenance
28
+
29
+ * prerelease packages ([114a615](https://github.com/BonnierNews/dn-design-system/commit/114a615923ab90db49adff9c6a9ce868d1b7d2f2))
30
+
7
31
  ## [14.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.2.0...@bonniernews/dn-design-system-web@14.2.1) (2024-03-12)
8
32
 
9
33
  ## [14.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@14.1.0...@bonniernews/dn-design-system-web@14.2.0) (2024-03-12)
package/components/list-item/README-accordion.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain item types |
13
+ |listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain item types |
14
14
  |accordionContent | String | yes | | | It is possible to use html |
15
15
  |title | String | no | | | |
16
16
  |subtitle | String | no | | | |
package/components/list-item/README-checkbox.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
13
+ |listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
14
  |name | String | yes | | | Also used as id |
15
15
  |title | String | no | | | |
16
16
  |subtitle | String | no | | | |
package/components/list-item/README-image.md ADDED
@@ -0,0 +1,48 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
2
+ - Storybook: [ListItem > ImageListItem](https://designsystem.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
3
+ - Storybook (Latest): [ListItem > ImageListItem](https://designsystem-latest.dn.se/?path=/docs/basic-listitem-imagelistitem--docs)
4
+
5
+ ----
6
+
7
+ # Image List Item
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
+ |title | String | no | | | |
15
+ |subtitle | String | no | | | |
16
+ |meta | String | no | | | |
17
+ |disabled | bool | no | true, false | false | Note: only works on button-tag, not on a-tag |
18
+ |border | bool | no | true, false | false | |
19
+ |mediaHtml | String | no | | | Main image |
20
+ |trailingIcon | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
21
+ |href | String | no | | | If href is set the list item will be rendered as an a-tag |
22
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
23
+ |classNames | String | no | | | Ex. "my-special-class" |
24
+ |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
25
+
26
+ ## Minimum requirement example
27
+
28
+ ### Nunjucks
29
+
30
+ These are copy paste friendly examples to quickliy get started using a component.
31
+
32
+ ```html
33
+ {% from '@bonniernews/dn-design-system-web/components/list-item/list-item.njk' import ListItem %}
34
+
35
+ {{ ListItem({
36
+ listItemType: 'image',
37
+ title: 'My list item',
38
+ mediaHtml: 'image-html',
39
+ trailingIcon: 'arrow_forward',
40
+ subtitle: 'Subtitle text',
41
+ meta: 'Meta text'
42
+ })}}
43
+ ```
44
+
45
+ ### SCSS
46
+ ```scss
47
+ @use "@bonniernews/dn-design-system-web/components/list-item/list-item";
48
+ ```
package/components/list-item/README-radio.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
13
+ |listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
14
  |name | String | yes | | | |
15
15
  |id | String | yes | | | |
16
16
  |title | String | no | | | |
package/components/list-item/README-switch.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | yes | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
13
+ |listItemType | String | yes | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
14
  |name | String | yes | | | Also used as id |
15
15
  |title | String | no | | | |
16
16
  |subtitle | String | no | | | |
package/components/list-item/README-toggle.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | yes | accordion, checkbox, radio, toggle, standard | standard | Note that some parameters are **not** available for certain list item types |
13
+ |listItemType | String | yes | accordion, checkbox, radio, toggle, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
14
  |title | String | yes | | | |
15
15
  |titleHref | String | no | | | If titleHref is set the list item title will be rendered as an a-tag |
16
16
  |subtitle | String | no | | | |
package/components/list-item/README.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |listItemType | String | no | accordion, checkbox, radio, switch, standard | standard | Note that some parameters are **not** available for certain list item types |
13
+ |listItemType | String | no | accordion, checkbox, radio, switch, image, standard | standard | Note that some parameters are **not** available for certain list item types |
14
14
  |title | String | no | | | |
15
15
  |subtitle | String | no | | | |
16
16
  |meta | String | no | | | |
package/components/list-item/list-item.njk CHANGED
@@ -14,6 +14,9 @@
14
14
  {% if iconLeftSvg %}
15
15
  <span class="{{ componentClassName + '__icon-left'}}">{{- iconLeftSvg | safe -}}</span>
16
16
  {% endif %}
17
+ {% if params.listItemType == 'image' %}
18
+ <div class="{{ componentClassName + '__image'}}">{{ params.mediaHtml }}</div>
19
+ {% endif %}
17
20
  {% if params.title %}
18
21
  <div class="{{ componentClassName + '__titles'}}">
19
22
  {% if params.titleHref and not params.disabled %}
@@ -54,7 +57,7 @@
54
57
  {% set variantClass = classNamePrefix + params.listItemType %}
55
58
  {% endif %}
56
59
 
57
- {% if params.leadingIcon %}
60
+ {% if params.leadingIcon and params.listItemType != "image" %}
58
61
  {% set iconLeftSvg = IconUse({ icon: params.leadingIcon }) %}
59
62
  {% endif %}
60
63
 
package/components/list-item/list-item.scss CHANGED
@@ -110,6 +110,18 @@ $ds-list-item__icon-size: 24px;
110
110
  margin-left: ds-spacing($ds-s-100);
111
111
  }
112
112
 
113
+ .ds-list-item__image {
114
+ max-height: 24px;
115
+
116
+ figure {
117
+ margin: 0;
118
+ }
119
+
120
+ + .ds-list-item__titles {
121
+ margin-left: ds-spacing($ds-s-100);
122
+ }
123
+ }
124
+
113
125
  @include ds-hover() {
114
126
  &:hover:not(.ds-list-item--disabled) .ds-list-item__inner::before {
115
127
  background-color: $ds-color-component-primary-overlay;
package/components/tag-header/tag-header.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  .ds-tag-header__vignette {
36
- @include ds-typography($ds-typography-functional-meta02bold);
36
+ @include ds-typography($ds-typography-functionallabel01);
37
37
  color: $ds-theme-color;
38
38
  margin-bottom: ds-spacing($ds-s-025);
39
39
  display: block;
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .ds-tag-header__title {
47
- @include ds-typography($ds-typography-functional-heading03bold);
47
+ @include ds-typography($ds-typography-functionalheading03, $fontWeight: $ds-fontweight-bold);
48
48
  color: $ds-color-text-primary;
49
49
  margin: 0;
50
50
  word-break: break-word;
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .ds-tag-header__description {
63
- @include ds-typography($ds-typography-functional-body02regular);
63
+ @include ds-typography($ds-typography-functionalbody02);
64
64
  color: $ds-color-text-primary;
65
65
  margin: ds-spacing($ds-s-100 $ds-s-100 0);
66
66
  border-top: ds-metrics-border-width(x1) solid $ds-color-border-primary;
@@ -72,7 +72,7 @@
72
72
 
73
73
  b,
74
74
  strong {
75
- @include ds-typography($ds-typography-functional-body02semibold);
75
+ @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
76
76
  }
77
77
 
78
78
  p {
package/components/teaser-footer/teaser-footer.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .ds-teaser-footer__notes {
12
- @include ds-typography($ds-typography-functional-meta02regular);
12
+ @include ds-typography($ds-typography-functionalmeta02);
13
13
  display: block;
14
14
  color: $ds-color-text-primary-02;
15
15
  }
@@ -21,7 +21,7 @@
21
21
  margin-top: ds-spacing($ds-s-050);
22
22
 
23
23
  .ds-teaser-footer__title {
24
- @include ds-typography($ds-typography-functional-body01semibold);
24
+ @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
25
25
  color: $ds-color-text-primary;
26
26
  }
27
27
 
package/components/teaser-large/teaser-large.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  .ds-teaser__title {
36
- @include ds-typography($ds-typography-expressive-heading04bold);
36
+ @include ds-typography($ds-typography-detailteaser-large);
37
37
  }
38
38
 
39
39
  @include ds-hover(true) {
@@ -44,13 +44,13 @@
44
44
 
45
45
  &.ds-teaser--large-big-italic {
46
46
  .ds-teaser__title {
47
- @include ds-typography($ds-typography-expressive-heading04italicregular);
47
+ @include ds-typography($ds-typography-detailteaser-large-storRubrik-opinion);
48
48
  }
49
49
  }
50
50
 
51
51
  &.ds-teaser--large-italic {
52
52
  .ds-teaser__title {
53
- @include ds-typography($ds-typography-expressive-heading03italicregular);
53
+ @include ds-typography($ds-typography-detailteaser-large-opinion);
54
54
  }
55
55
 
56
56
  @include ds-hover(true) {
package/components/teaser-split/teaser-split.scss CHANGED
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  .ds-teaser__title {
69
- @include ds-typography($ds-typography-expressive-heading02bold);
69
+ @include ds-typography($ds-typography-detailteaser-twin);
70
70
  }
71
71
 
72
72
  .ds-teaser__media {
package/components/teaser-standard/teaser-standard.scss CHANGED
@@ -7,10 +7,10 @@
7
7
  overflow: hidden;
8
8
 
9
9
  .ds-teaser__title {
10
- @include ds-typography($ds-typography-expressive-heading03bold);
10
+ @include ds-typography($ds-typography-detailteaser-standard);
11
11
 
12
12
  &--italic {
13
- @include ds-typography($ds-typography-expressive-heading03italicregular);
13
+ @include ds-typography($ds-typography-detailteaser-standard-opinion);
14
14
  }
15
15
  }
16
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "14.2.1",
3
+ "version": "14.3.1",
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",