@bonniernews/dn-design-system-web 32.5.0 → 32.6.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 (17) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/components/direkt-circle/README.md +2 -0
  3. package/components/direkt-circle/direkt-circle.scss +48 -0
  4. package/components/direkt-header/README.md +24 -0
  5. package/components/direkt-header/direkt-header.scss +41 -0
  6. package/foundations/variables/typographyList.scss +48 -48
  7. package/foundations/variables/typographyScreenExtraLarge.scss +208 -208
  8. package/foundations/variables/typographyScreenLarge.scss +210 -210
  9. package/foundations/variables/typographyScreenSmall.scss +201 -201
  10. package/package.json +1 -1
  11. package/preact/components/direkt-circle/direkt-circle.d.ts +4 -1
  12. package/preact/components/direkt-circle/direkt-circle.js +15 -20
  13. package/preact/components/direkt-circle/direkt-circle.js.map +2 -2
  14. package/preact/components/direkt-header/direkt-header.d.ts +17 -0
  15. package/preact/components/direkt-header/direkt-header.js +82 -0
  16. package/preact/components/direkt-header/direkt-header.js.map +7 -0
  17. package/variables/typography-list.json +48 -48
package/CHANGELOG.md CHANGED
@@ -4,6 +4,29 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.6.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.5.1...@bonniernews/dn-design-system-web@32.6.0) (2025-06-09)
8
+
9
+
10
+ ### Features
11
+
12
+ * **app:** create direkt header component ([#1765](https://github.com/BonnierNews/dn-design-system/issues/1765)) ([fa97a2b](https://github.com/BonnierNews/dn-design-system/commit/fa97a2b73717f1c4d402aab3cad2796bf93e0bbd))
13
+
14
+
15
+ ### Maintenance
16
+
17
+ * **deps-dev:** bump @babel/runtime from 7.27.0 to 7.27.4 ([#1764](https://github.com/BonnierNews/dn-design-system/issues/1764)) ([59ec926](https://github.com/BonnierNews/dn-design-system/commit/59ec926c3875bd375291a8236f77ed5cc074d96d))
18
+ * **deps:** bump @react-native-community/slider from 4.5.5 to 4.5.7 ([#1751](https://github.com/BonnierNews/dn-design-system/issues/1751)) ([b261632](https://github.com/BonnierNews/dn-design-system/commit/b26163280c3d1ae971931ee41306522104729173))
19
+ * **deps:** bump sass from 1.89.0 to 1.89.1 ([#1766](https://github.com/BonnierNews/dn-design-system/issues/1766)) ([1f159f6](https://github.com/BonnierNews/dn-design-system/commit/1f159f66f2aeec797c6ecc4a5628f452b54062f4))
20
+ * prerelease packages ([6b19397](https://github.com/BonnierNews/dn-design-system/commit/6b1939724725de4c20ffba194b943f6d09b4c9df))
21
+
22
+ ## [32.5.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.5.0...@bonniernews/dn-design-system-web@32.5.1) (2025-06-02)
23
+
24
+
25
+ ### Maintenance
26
+
27
+ * **foundations:** sort typography variables ([#1762](https://github.com/BonnierNews/dn-design-system/issues/1762)) ([36caa8b](https://github.com/BonnierNews/dn-design-system/commit/36caa8b83ac73bd9f148b2fe62b9f70cbaa98ea7))
28
+ * prerelease packages ([f9cfd76](https://github.com/BonnierNews/dn-design-system/commit/f9cfd764d36094c7001c029ee1b8563442dab866))
29
+
7
30
  ## [32.5.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.4.9...@bonniernews/dn-design-system-web@32.5.0) (2025-06-02)
8
31
 
9
32
 
package/components/direkt-circle/README.md CHANGED
@@ -3,11 +3,13 @@ DirektCircle
3
3
 
4
4
  * GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
5
5
  * Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
6
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`
6
7
 
7
8
  | Name | Description | Default |
8
9
  |:--- | :--- | :--- |
9
10
  | circleColor | Hex code or supported color name<br />string | "white" |
10
11
  | classNames | string | \- |
12
+ | isAnimated | boolean | false |
11
13
  | attributes | object | { } |
12
14
 
13
15
  ```jsx
package/components/direkt-circle/direkt-circle.scss ADDED
@@ -0,0 +1,48 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+
3
+ @keyframes ripple {
4
+ 0% {
5
+ opacity: 0.3;
6
+ r: 0;
7
+ }
8
+
9
+ 100% {
10
+ opacity: 0;
11
+ r: 245px;
12
+ }
13
+ }
14
+
15
+ .ds-direkt-circle--animated {
16
+ $numberOfCircles: 30;
17
+ $animationDuration: 25000ms;
18
+
19
+ $ringColor: $ds-color-text-primaryinvert;
20
+
21
+ circle {
22
+ stroke: $ringColor;
23
+ position: relative;
24
+ will-change: contents, opacity;
25
+
26
+ &:first-of-type {
27
+ fill: $ringColor;
28
+ stroke: none;
29
+ opacity: 1;
30
+ }
31
+
32
+ @media (prefers-reduced-motion: no-preference) {
33
+ opacity: 0;
34
+
35
+ @for $i from 1 through $numberOfCircles {
36
+ $animationDelay: calc(($i * -1) * ($animationDuration / $numberOfCircles));
37
+
38
+ &:nth-child(#{$i + 1}) {
39
+ animation: ripple;
40
+ animation-duration: $animationDuration;
41
+ animation-iteration-count: infinite;
42
+ animation-delay: $animationDelay;
43
+ animation-timing-function: linear;
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
package/components/direkt-header/README.md ADDED
@@ -0,0 +1,24 @@
1
+ DirektHeader
2
+ ============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)
5
+ * Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)
6
+
7
+ The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | title\* | string | \- |
12
+ | subtitle | string | \- |
13
+ | preTitle | string | "Direkt" |
14
+ | isAnimated | boolean | true |
15
+ | classNames | string | \- |
16
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
17
+
18
+ ```jsx
19
+ <DirektHeader
20
+ classNames="test-class"
21
+ subtitle="Följ DN:s direktrapport här"
22
+ title="Senaste nyheterna"
23
+ />
24
+ ```
package/components/direkt-header/direkt-header.scss ADDED
@@ -0,0 +1,41 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+
3
+ .ds-direkt-header {
4
+ background-color: $ds-color-brand-600;
5
+ border-radius: ds-border-radius(050);
6
+ color: $ds-color-text-primaryinvert;
7
+ padding: ds-spacing($ds-s-100);
8
+
9
+ .ds-direkt-header__pre-title,
10
+ .ds-direkt-header__title,
11
+ .ds-direkt-header__sub-title {
12
+ margin: 0;
13
+ }
14
+
15
+ .ds-direkt-header__pre-title {
16
+ align-items: center;
17
+ display: flex;
18
+ margin-bottom: ds-spacing($ds-s-050);
19
+ @include ds-typography($ds-typography-functional-meta-md);
20
+ }
21
+
22
+ .ds-direkt-header__title {
23
+ @include ds-typography($ds-typography-detail-direkt-header-v2);
24
+ }
25
+
26
+ .ds-direkt-header__sub-title {
27
+ @include ds-typography($ds-typography-expressive-ingress-md, $fontWeight: $ds-fontweight-regular);
28
+ }
29
+
30
+ .ds-direkt-header__circle-wrapper {
31
+ margin-right: ds-spacing($ds-s-075);
32
+ padding-left: ds-spacing($ds-s-025);
33
+ position: relative;
34
+ }
35
+
36
+ .ds-direkt-header__circle {
37
+ position: absolute;
38
+ top: 50%;
39
+ transform: translate(-50%, -50%);
40
+ }
41
+ }
package/foundations/variables/typographyList.scss CHANGED
@@ -1,56 +1,56 @@
1
- $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
2
- $ds-typography-expressive-body-sm: 'expressive-body-sm';
3
- $ds-typography-expressive-body-lg: 'expressive-body-lg';
4
- $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
5
- $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
6
- $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
7
- $ds-typography-expressive-heading-md: 'expressive-heading-md';
8
- $ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
9
- $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
10
- $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
11
- $ds-typography-expressive-body-md: 'expressive-body-md';
12
- $ds-typography-functional-heading-xxs: 'functional-heading-xxs';
13
- $ds-typography-functional-heading-lg: 'functional-heading-lg';
14
- $ds-typography-functional-heading-xs: 'functional-heading-xs';
15
- $ds-typography-functional-meta-sm: 'functional-meta-sm';
16
- $ds-typography-functional-label-sm: 'functional-label-sm';
17
- $ds-typography-functional-meta-md: 'functional-meta-md';
18
- $ds-typography-functional-heading-sm: 'functional-heading-sm';
19
- $ds-typography-functional-body-sm: 'functional-body-sm';
20
- $ds-typography-functional-ingress-md: 'functional-ingress-md';
21
- $ds-typography-functional-body-md: 'functional-body-md';
22
- $ds-typography-functional-heading-md: 'functional-heading-md';
23
- $ds-typography-functional-label-md: 'functional-label-md';
24
- $ds-typography-functional-heading-xl: 'functional-heading-xl';
25
- $ds-typography-functional-body-lg: 'functional-body-lg';
26
- $ds-typography-functional-ingress-sm: 'functional-ingress-sm';
27
- $ds-typography-detail-teaser-large: 'detail-teaser-large';
28
- $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
1
+ $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
2
+ $ds-typography-detail-article-direkt: 'detail-article-direkt';
3
+ $ds-typography-detail-article-longread: 'detail-article-longread';
4
+ $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
5
+ $ds-typography-detail-article-opinion: 'detail-article-opinion';
6
+ $ds-typography-detail-article-quote: 'detail-article-quote';
7
+ $ds-typography-detail-article-standard: 'detail-article-standard';
8
+ $ds-typography-detail-direkt-body: 'detail-direkt-body';
9
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
10
+ $ds-typography-detail-direkt-header-v2: 'detail-direkt-header-v2';
11
+ $ds-typography-detail-dropcap: 'detail-dropcap';
12
+ $ds-typography-detail-gameheader: 'detail-gameheader';
13
+ $ds-typography-detail-medryckare: 'detail-medryckare';
14
+ $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
15
+ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
29
16
  $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
30
- $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
17
+ $ds-typography-detail-teaser-large: 'detail-teaser-large';
31
18
  $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
32
- $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
19
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
33
20
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
21
+ $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
22
+ $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
23
+ $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
34
24
  $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
35
- $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
36
25
  $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
37
- $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
38
26
  $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
39
- $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
40
27
  $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
41
- $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
42
28
  $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
43
- $ds-typography-detail-article-quote: 'detail-article-quote';
44
- $ds-typography-detail-article-standard: 'detail-article-standard';
45
- $ds-typography-detail-article-direkt: 'detail-article-direkt';
46
- $ds-typography-detail-article-longread: 'detail-article-longread';
47
- $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
48
- $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
49
- $ds-typography-detail-article-opinion: 'detail-article-opinion';
50
- $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
51
- $ds-typography-detail-gameheader: 'detail-gameheader';
52
- $ds-typography-detail-dropcap: 'detail-dropcap';
53
- $ds-typography-detail-direkt-header: 'detail-direkt-header';
54
- $ds-typography-detail-medryckare: 'detail-medryckare';
55
- $ds-typography-detail-direkt-body: 'detail-direkt-body';
56
- $ds-typography-detail-direkt-header-v2: 'detail-direkt-header-v2';
29
+ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
30
+ $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
31
+ $ds-typography-expressive-body-lg: 'expressive-body-lg';
32
+ $ds-typography-expressive-body-md: 'expressive-body-md';
33
+ $ds-typography-expressive-body-sm: 'expressive-body-sm';
34
+ $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
35
+ $ds-typography-expressive-heading-md: 'expressive-heading-md';
36
+ $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
37
+ $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
38
+ $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
39
+ $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
40
+ $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
41
+ $ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
42
+ $ds-typography-functional-body-lg: 'functional-body-lg';
43
+ $ds-typography-functional-body-md: 'functional-body-md';
44
+ $ds-typography-functional-body-sm: 'functional-body-sm';
45
+ $ds-typography-functional-heading-lg: 'functional-heading-lg';
46
+ $ds-typography-functional-heading-md: 'functional-heading-md';
47
+ $ds-typography-functional-heading-sm: 'functional-heading-sm';
48
+ $ds-typography-functional-heading-xl: 'functional-heading-xl';
49
+ $ds-typography-functional-heading-xs: 'functional-heading-xs';
50
+ $ds-typography-functional-heading-xxs: 'functional-heading-xxs';
51
+ $ds-typography-functional-ingress-md: 'functional-ingress-md';
52
+ $ds-typography-functional-ingress-sm: 'functional-ingress-sm';
53
+ $ds-typography-functional-label-md: 'functional-label-md';
54
+ $ds-typography-functional-label-sm: 'functional-label-sm';
55
+ $ds-typography-functional-meta-md: 'functional-meta-md';
56
+ $ds-typography-functional-meta-sm: 'functional-meta-sm';