@bonniernews/dn-design-system-web 11.0.3 → 11.1.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 (7) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/components/buddy-menu/README.md +3 -3
  3. package/components/link-box/README.md +1 -1
  4. package/components/link-box/link-box-item.njk +8 -4
  5. package/components/link-box/link-box-item.scss +20 -22
  6. package/components/link-box/link-box.scss +4 -7
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,32 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [11.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.4...@bonniernews/dn-design-system-web@11.1.0) (2024-02-01)
8
+
9
+
10
+ ### Features
11
+
12
+ * **web:** redesign linkbox ([#1183](https://github.com/BonnierNews/dn-design-system/issues/1183)) ([3657ac0](https://github.com/BonnierNews/dn-design-system/commit/3657ac0f48688475452702e4ac64a26044df1a3d))
13
+
14
+ ## [11.0.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.3...@bonniernews/dn-design-system-web@11.0.4) (2024-01-30)
15
+
16
+
17
+ ### Features
18
+
19
+ * **app:** allow `ReactElement` in `buttonsRight` in TopBar ([#1180](https://github.com/BonnierNews/dn-design-system/issues/1180)) ([dc776e0](https://github.com/BonnierNews/dn-design-system/commit/dc776e05a2a23588a252474d0590c02a20c343f4))
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **web:** change ksw links to mina sidor links ([#1181](https://github.com/BonnierNews/dn-design-system/issues/1181)) ([2544f43](https://github.com/BonnierNews/dn-design-system/commit/2544f4395628cad2f1f18bd5d53d72436194b174))
25
+
26
+
27
+ ### Maintenance
28
+
29
+ * **app:** fix copyDnIconFonts gradle task ([#1182](https://github.com/BonnierNews/dn-design-system/issues/1182)) ([2d46255](https://github.com/BonnierNews/dn-design-system/commit/2d46255b2766802cd2a8a4c082932f5b51c95b32))
30
+ * prerelease packages ([db966ae](https://github.com/BonnierNews/dn-design-system/commit/db966ae3fafd307114616afc78f8126581a773a7))
31
+ * prerelease packages ([a1b22c9](https://github.com/BonnierNews/dn-design-system/commit/a1b22c957c88980228e80ca8bff1cca948c85f96))
32
+
7
33
  ## [11.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.0.2...@bonniernews/dn-design-system-web@11.0.3) (2024-01-18)
8
34
 
9
35
 
package/components/buddy-menu/README.md CHANGED
@@ -14,7 +14,7 @@
14
14
  |links | HTML String | no | | | Should be list item components|
15
15
  |accountLevel | String | no | | none | Should be populated with product specific js|
16
16
  |myAccountUrl | String | yes | | | Url for "Mitt konto" button |
17
- |addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }] |
17
+ |addons | Array > Object | no | | | Ex. [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }] |
18
18
  |attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
19
19
  |classNames | String | no | | | Ex. "my-special-class" |
20
20
  |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
@@ -51,9 +51,9 @@ These are copy paste friendly examples to quickliy get started using a component
51
51
  {{ BuddyMenu({
52
52
  userName: "",
53
53
  accountLevel: "",
54
- myAccountUrl: "https://kund.dn.se/mitt-konto",
54
+ myAccountUrl: "https://id.dn.se/konto/",
55
55
  links: BuddyMenuSample(),
56
- addons: [{ title: 'Annonsfri', href: "https://kund.dn.se/faq/Annonsfritt/" }],
56
+ addons: [{ title: 'Annonsfri', href: "https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt" }],
57
57
  forcePx: true
58
58
  })}}
59
59
  ```
package/components/link-box/README.md CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  |parameter | type | required | options | default | description |
12
12
  |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
13
+ |linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
14
14
  |vignetteText | String | no | | | Heading of the link box |
15
15
  |vignetteTargetUrl | String | no | | | Target URL for the header |
16
16
  |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
package/components/link-box/link-box-item.njk CHANGED
@@ -15,9 +15,13 @@
15
15
  {{ params.mediaHtml | safe }}
16
16
  </div>
17
17
  {% endif %}
18
-
19
- {% if params.label %}
20
- <span class="{{ componentClassName + '__label'}}">{{ params.label }}</span>
21
- {% endif %}
18
+ <div class="{{ componentClassName + '__content'}}">
19
+ {% if params.label %}
20
+ <span class="{{ componentClassName + '__label'}}">{{ params.label }}</span>
21
+ {% endif %}
22
+ {% if params.text %}
23
+ <span class="{{ componentClassName + '__text'}}">{{ params.text }}</span>
24
+ {% endif %}
25
+ </div>
22
26
  </a>
23
27
  {% endmacro %}
package/components/link-box/link-box-item.scss CHANGED
@@ -1,26 +1,24 @@
1
1
  @use "../../foundations/helpers/forward.helpers.scss" as *;
2
2
 
3
3
  .ds-link-box-item {
4
- padding: ds-spacing($ds-s-100);
4
+ padding: 0;
5
5
  background-color: $ds-color-surface-background;
6
- border: ds-border-width(x1) solid $ds-color-border-primary;
7
- border-radius: ds-border-radius(x2);
8
6
  text-decoration: none;
9
7
  display: flex;
10
8
  flex-direction: column;
11
- align-items: center;
9
+ align-items: flex-start;
12
10
  justify-content: flex-start;
13
11
 
14
12
  &:focus-visible {
15
13
  outline: none;
16
14
 
17
- .ds-link-box-item__label {
15
+ .ds-link-box-item__content {
18
16
  @include ds-focus(2px, false);
19
17
  }
20
18
  }
21
19
 
22
20
  @include ds-hover(true) {
23
- > .ds-link-box-item__label {
21
+ .ds-link-box-item__label {
24
22
  @include ds-underline();
25
23
  }
26
24
  }
@@ -28,30 +26,30 @@
28
26
  .ds-link-box-item__label {
29
27
  color: $ds-color-text-primary;
30
28
  @include ds-typography($ds-typography-functional-body01semibold);
31
- text-align: center;
29
+ word-break: break-word;
30
+ display: block;
32
31
  }
33
32
 
34
- .ds-link-box-item__media + .ds-link-box-item__label {
35
- margin-top: ds-spacing($ds-s-050);
33
+ .ds-link-box-item__text {
34
+ color: $ds-color-text-primary-02;
35
+ @include ds-typography($ds-typography-functional-body01regular);
36
+ display: block;
36
37
  }
37
38
 
38
- .ds-link-box-item__media {
39
- font-size: 0;
39
+ .ds-link-box-item__content {
40
+ width: 100%;
40
41
  }
41
42
 
42
- &.ds-link-box-item--quiz {
43
- .ds-link-box-item__media {
44
- width: 48px;
45
- }
43
+ .ds-link-box-item__media + .ds-link-box-item__content {
44
+ margin-top: ds-spacing($ds-s-050);
46
45
  }
47
46
 
48
- // Just sample css, replace with actual when design is available
49
- &.ds-link-box-item--pod {
50
- .ds-link-box-item__media {
51
- &,
52
- & img {
53
- width: 100%;
54
- }
47
+ .ds-link-box-item__media {
48
+ font-size: 0;
49
+ width: 100%;
50
+ & img {
51
+ width: 100%;
52
+ height: auto;
55
53
  }
56
54
  }
57
55
  }
package/components/link-box/link-box.scss CHANGED
@@ -2,23 +2,20 @@
2
2
  @use "../../components/group-header/group-header";
3
3
  @use "./link-box-item";
4
4
 
5
- $ds-link-box-grid-gap: ds-spacing($ds-s-050);
6
-
7
5
  .ds-link-box {
8
6
  background-color: $ds-color-surface-background;
9
7
 
10
8
  .ds-link-box__grid {
11
- padding: ds-spacing($ds-s-075);
9
+ padding: ds-spacing($ds-s-100);
12
10
  display: grid;
13
- grid-column-gap: $ds-link-box-grid-gap;
14
- row-gap: $ds-link-box-grid-gap;
11
+ gap: ds-spacing($ds-s-100 $ds-s-050);
15
12
 
16
13
  @include ds-mq-only-breakpoint(mobile) {
17
- grid-template-columns: 1fr 1fr;
14
+ grid-template-columns: repeat(2, minmax(0, 1fr));
18
15
  }
19
16
 
20
17
  @include ds-mq-smallest-breakpoint(tablet) {
21
- grid-template-columns: 1fr 1fr 1fr 1fr;
18
+ grid-template-columns: repeat(4, minmax(0, 1fr));
22
19
  }
23
20
  }
24
21
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "11.0.3",
3
+ "version": "11.1.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",