@bonniernews/dn-design-system-web 32.5.1 → 32.6.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 (12) hide show
  1. package/CHANGELOG.md +27 -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 +25 -0
  5. package/components/direkt-header/direkt-header.scss +42 -0
  6. package/package.json +1 -1
  7. package/preact/components/direkt-circle/direkt-circle.d.ts +4 -1
  8. package/preact/components/direkt-circle/direkt-circle.js +15 -20
  9. package/preact/components/direkt-circle/direkt-circle.js.map +2 -2
  10. package/preact/components/direkt-header/direkt-header.d.ts +18 -0
  11. package/preact/components/direkt-header/direkt-header.js +83 -0
  12. package/preact/components/direkt-header/direkt-header.js.map +7 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,33 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.6.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.6.0...@bonniernews/dn-design-system-web@32.6.1) (2025-06-10)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** add prop to direkt header ([#1773](https://github.com/BonnierNews/dn-design-system/issues/1773)) ([294671f](https://github.com/BonnierNews/dn-design-system/commit/294671f7e407a4323f663d3ace3fae0e02e1eda3))
13
+
14
+
15
+ ### Maintenance
16
+
17
+ * **deps-dev:** bump @babel/runtime from 7.27.4 to 7.27.6 ([#1772](https://github.com/BonnierNews/dn-design-system/issues/1772)) ([94c018f](https://github.com/BonnierNews/dn-design-system/commit/94c018fea1cf4dc14263239d401eb8f2fd4e03b8))
18
+
19
+ ## [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)
20
+
21
+
22
+ ### Features
23
+
24
+ * **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))
25
+
26
+
27
+ ### Maintenance
28
+
29
+ * **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))
30
+ * **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))
31
+ * **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))
32
+ * prerelease packages ([6b19397](https://github.com/BonnierNews/dn-design-system/commit/6b1939724725de4c20ffba194b943f6d09b4c9df))
33
+
7
34
  ## [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)
8
35
 
9
36
 
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,25 @@
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
+ | renderAsH2 | boolean | false |
16
+ | classNames | string | \- |
17
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />object | { } |
18
+
19
+ ```jsx
20
+ <DirektHeader
21
+ classNames="test-class"
22
+ subtitle="Följ DN:s direktrapport här"
23
+ title="Senaste nyheterna"
24
+ />
25
+ ```
package/components/direkt-header/direkt-header.scss ADDED
@@ -0,0 +1,42 @@
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
+ overflow: hidden;
8
+ padding: ds-spacing($ds-s-100);
9
+
10
+ .ds-direkt-header__pre-title,
11
+ .ds-direkt-header__title,
12
+ .ds-direkt-header__sub-title {
13
+ margin: 0;
14
+ }
15
+
16
+ .ds-direkt-header__pre-title {
17
+ align-items: center;
18
+ display: flex;
19
+ margin-bottom: ds-spacing($ds-s-050);
20
+ @include ds-typography($ds-typography-functional-meta-md);
21
+ }
22
+
23
+ .ds-direkt-header__title {
24
+ @include ds-typography($ds-typography-detail-direkt-header-v2);
25
+ }
26
+
27
+ .ds-direkt-header__sub-title {
28
+ @include ds-typography($ds-typography-expressive-ingress-md, $fontWeight: $ds-fontweight-regular);
29
+ }
30
+
31
+ .ds-direkt-header__circle-wrapper {
32
+ margin-right: ds-spacing($ds-s-075);
33
+ padding-left: ds-spacing($ds-s-025);
34
+ position: relative;
35
+ }
36
+
37
+ .ds-direkt-header__circle {
38
+ position: absolute;
39
+ top: 50%;
40
+ transform: translate(-50%, -50%);
41
+ }
42
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.5.1",
3
+ "version": "32.6.1",
4
4
  "description": "DN design system for web.",
5
5
  "type": "module",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/preact/components/direkt-circle/direkt-circle.d.ts CHANGED
@@ -2,11 +2,14 @@ interface DirektCircleProps {
2
2
  /** Hex code or supported color name */
3
3
  circleColor?: string;
4
4
  classNames?: string;
5
+ isAnimated?: boolean;
5
6
  attributes?: object;
6
7
  }
7
8
  /**
8
9
  * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
9
10
  * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
11
+ * * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
12
+ * `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`
10
13
  */
11
- export declare const DirektCircle: ({ circleColor, classNames, attributes }: DirektCircleProps) => import("preact").JSX.Element;
14
+ export declare const DirektCircle: ({ circleColor, classNames, attributes, isAnimated, }: DirektCircleProps) => import("preact").JSX.Element;
12
15
  export {};
package/preact/components/direkt-circle/direkt-circle.js CHANGED
@@ -1,7 +1,13 @@
1
1
  // ../src/components/direkt-circle/direkt-circle.tsx
2
2
  import { jsx, jsxs } from "preact/jsx-runtime";
3
- var DirektCircle = ({ circleColor = "white", classNames, attributes = {} }) => {
3
+ var DirektCircle = ({
4
+ circleColor = "white",
5
+ classNames,
6
+ attributes = {},
7
+ isAnimated = false
8
+ }) => {
4
9
  const componentClassName = "ds-direkt-circle";
10
+ const animatedClassName = isAnimated ? `${componentClassName}--animated` : "";
5
11
  const circleOpacity = [
6
12
  0.25,
7
13
  0.25,
@@ -34,25 +40,14 @@ var DirektCircle = ({ circleColor = "white", classNames, attributes = {} }) => {
34
40
  0.023,
35
41
  0.02
36
42
  ];
37
- const classes = [componentClassName, classNames].filter(Boolean).join(" ");
38
- return /* @__PURE__ */ jsxs(
39
- "svg",
40
- {
41
- className: classes,
42
- width: "500",
43
- height: "500",
44
- viewBox: "-250 -250 500 500",
45
- fill: "none",
46
- ...attributes,
47
- children: [
48
- /* @__PURE__ */ jsx("circle", { r: "5", fill: circleColor }),
49
- circleOpacity.map((opacity, index) => {
50
- const radius = (index + 1) * 8 + 5;
51
- return /* @__PURE__ */ jsx("circle", { opacity, r: radius, stroke: circleColor, strokeWidth: "1.5" }, index);
52
- })
53
- ]
54
- }
55
- );
43
+ const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(" ");
44
+ return /* @__PURE__ */ jsxs("svg", { className: classes, width: "500", height: "500", viewBox: "-250 -250 500 500", fill: "none", ...attributes, children: [
45
+ /* @__PURE__ */ jsx("circle", { r: "5", fill: circleColor }),
46
+ circleOpacity.map((opacity, index) => {
47
+ const radius = (index + 1) * 8 + 5;
48
+ return /* @__PURE__ */ jsx("circle", { opacity, r: radius, stroke: circleColor, strokeWidth: "1.5" }, index);
49
+ })
50
+ ] });
56
51
  };
57
52
  export {
58
53
  DirektCircle
package/preact/components/direkt-circle/direkt-circle.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../components/direkt-circle/direkt-circle.tsx"],
4
- "sourcesContent": ["interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n */\nexport const DirektCircle = ({ circleColor = 'white', classNames, attributes = {} }: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ];\n\n const classes = [componentClassName, classNames].filter(Boolean).join(' ')\n\n return (\n <svg\n className={classes}\n width='500'\n height='500'\n viewBox='-250 -250 500 500'\n fill='none'\n {...attributes}\n >\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n"],
5
- "mappings": ";AAqBI,SAQE,KARF;AAVG,IAAM,eAAe,CAAC,EAAE,cAAc,SAAS,YAAY,aAAa,CAAC,EAAE,MAAyB;AACzG,QAAM,qBAAqB;AAC3B,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,QAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,gBAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,iBAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,QACjG,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;",
4
+ "sourcesContent": ["interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n isAnimated?: boolean\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n * * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n circleColor = 'white',\n classNames,\n attributes = {},\n isAnimated = false,\n}: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ]\n\n const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(' ')\n\n return (\n <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n"],
5
+ "mappings": ";AA8BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;",
6
6
  "names": []
7
7
  }
package/preact/components/direkt-header/direkt-header.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ export interface DirektHeaderProps {
2
+ title: string;
3
+ subtitle?: string;
4
+ pretitle?: string;
5
+ isAnimated?: boolean;
6
+ renderAsH2?: boolean;
7
+ classNames?: string;
8
+ /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
9
+ attributes?: object;
10
+ }
11
+ /**
12
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)
13
+ * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)
14
+ *
15
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
16
+ * `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`
17
+ */
18
+ export declare const DirektHeader: ({ classNames, attributes, title, subtitle, pretitle, isAnimated, renderAsH2, }: DirektHeaderProps) => import("preact").JSX.Element;
package/preact/components/direkt-header/direkt-header.js ADDED
@@ -0,0 +1,83 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/direkt-circle/direkt-circle.tsx
7
+ import { jsx, jsxs } from "preact/jsx-runtime";
8
+ var DirektCircle = ({
9
+ circleColor = "white",
10
+ classNames,
11
+ attributes = {},
12
+ isAnimated = false
13
+ }) => {
14
+ const componentClassName = "ds-direkt-circle";
15
+ const animatedClassName = isAnimated ? `${componentClassName}--animated` : "";
16
+ const circleOpacity = [
17
+ 0.25,
18
+ 0.25,
19
+ 0.25,
20
+ 0.25,
21
+ 0.25,
22
+ 0.25,
23
+ 0.25,
24
+ 0.25,
25
+ 0.24,
26
+ 0.235,
27
+ 0.222,
28
+ 0.218,
29
+ 0.212,
30
+ 0.202,
31
+ 0.19,
32
+ 0.178,
33
+ 0.165,
34
+ 0.155,
35
+ 0.145,
36
+ 0.135,
37
+ 0.12,
38
+ 0.107,
39
+ 0.095,
40
+ 0.083,
41
+ 0.07,
42
+ 0.06,
43
+ 0.047,
44
+ 0.035,
45
+ 0.023,
46
+ 0.02
47
+ ];
48
+ const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(" ");
49
+ return /* @__PURE__ */ jsxs("svg", { className: classes, width: "500", height: "500", viewBox: "-250 -250 500 500", fill: "none", ...attributes, children: [
50
+ /* @__PURE__ */ jsx("circle", { r: "5", fill: circleColor }),
51
+ circleOpacity.map((opacity, index) => {
52
+ const radius = (index + 1) * 8 + 5;
53
+ return /* @__PURE__ */ jsx("circle", { opacity, r: radius, stroke: circleColor, strokeWidth: "1.5" }, index);
54
+ })
55
+ ] });
56
+ };
57
+
58
+ // ../src/components/direkt-header/direkt-header.tsx
59
+ import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
60
+ var DirektHeader = ({
61
+ classNames,
62
+ attributes = {},
63
+ title,
64
+ subtitle,
65
+ pretitle = "Direkt",
66
+ isAnimated = true,
67
+ renderAsH2 = false
68
+ }) => {
69
+ const componentClassName = "ds-direkt-header";
70
+ const classes = formatClassString([componentClassName, classNames]);
71
+ return /* @__PURE__ */ jsxs2("header", { className: classes, ...attributes, children: [
72
+ /* @__PURE__ */ jsxs2("p", { className: `${componentClassName}__pre-title`, children: [
73
+ /* @__PURE__ */ jsx2("span", { className: `${componentClassName}__circle-wrapper`, children: /* @__PURE__ */ jsx2(DirektCircle, { classNames: `${componentClassName}__circle`, isAnimated }) }),
74
+ pretitle
75
+ ] }),
76
+ renderAsH2 ? /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__title`, children: title }) : /* @__PURE__ */ jsx2("h1", { className: `${componentClassName}__title`, children: title }),
77
+ subtitle && (renderAsH2 ? /* @__PURE__ */ jsx2("h3", { className: `${componentClassName}__sub-title`, children: subtitle }) : /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__sub-title`, children: subtitle }))
78
+ ] });
79
+ };
80
+ export {
81
+ DirektHeader
82
+ };
83
+ //# sourceMappingURL=direkt-header.js.map
package/preact/components/direkt-header/direkt-header.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/direkt-circle/direkt-circle.tsx", "../../../components/direkt-header/direkt-header.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "interface DirektCircleProps {\n /** Hex code or supported color name */\n circleColor?: string\n classNames?: string\n isAnimated?: boolean\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)\n * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)\n * * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.scss'`\n */\nexport const DirektCircle = ({\n circleColor = 'white',\n classNames,\n attributes = {},\n isAnimated = false,\n}: DirektCircleProps) => {\n const componentClassName = 'ds-direkt-circle'\n const animatedClassName = isAnimated ? `${componentClassName}--animated` : ''\n const circleOpacity = [\n 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.25, 0.24, 0.235, 0.222, 0.218, 0.212, 0.202, 0.19, 0.178, 0.165, 0.155,\n 0.145, 0.135, 0.12, 0.107, 0.095, 0.083, 0.07, 0.06, 0.047, 0.035, 0.023, 0.02,\n ]\n\n const classes = [componentClassName, classNames, animatedClassName].filter(Boolean).join(' ')\n\n return (\n <svg className={classes} width='500' height='500' viewBox='-250 -250 500 500' fill='none' {...attributes}>\n <circle r='5' fill={circleColor} />\n {circleOpacity.map((opacity, index) => {\n const radius = (index + 1) * 8 + 5\n return <circle key={index} opacity={opacity} r={radius} stroke={circleColor} strokeWidth='1.5' />\n })}\n </svg>\n )\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { DirektCircle } from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.tsx'\nexport interface DirektHeaderProps {\n title: string\n subtitle?: string\n pretitle?: string\n isAnimated?: boolean\n renderAsH2?: boolean\n classNames?: string\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)\n * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)\n *\n * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:\n * `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`\n */\nexport const DirektHeader = ({\n classNames,\n attributes = {},\n title,\n subtitle,\n pretitle = 'Direkt',\n isAnimated = true,\n renderAsH2 = false,\n}: DirektHeaderProps) => {\n const componentClassName = 'ds-direkt-header'\n const classes = formatClassString([componentClassName, classNames])\n\n return (\n <header className={classes} {...attributes}>\n <p className={`${componentClassName}__pre-title`}>\n <span className={`${componentClassName}__circle-wrapper`}>\n <DirektCircle classNames={`${componentClassName}__circle`} isAnimated={isAnimated} />\n </span>\n {pretitle}\n </p>\n {renderAsH2 ? (\n <h2 className={`${componentClassName}__title`}>{title}</h2>\n ) : (\n <h1 className={`${componentClassName}__title`}>{title}</h1>\n )}\n {subtitle &&\n (renderAsH2 ? (\n <h3 className={`${componentClassName}__sub-title`}>{subtitle}</h3>\n ) : (\n <h2 className={`${componentClassName}__sub-title`}>{subtitle}</h2>\n ))}\n </header>\n )\n}\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC4BI,SACE,KADF;AAhBG,IAAM,eAAe,CAAC;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,oBAAoB,aAAa,GAAG,kBAAkB,eAAe;AAC3E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAC7G;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAO;AAAA,EAC5E;AAEA,QAAM,UAAU,CAAC,oBAAoB,YAAY,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE5F,SACE,qBAAC,SAAI,WAAW,SAAS,OAAM,OAAM,QAAO,OAAM,SAAQ,qBAAoB,MAAK,QAAQ,GAAG,YAC5F;AAAA,wBAAC,YAAO,GAAE,KAAI,MAAM,aAAa;AAAA,IAChC,cAAc,IAAI,CAAC,SAAS,UAAU;AACrC,YAAM,UAAU,QAAQ,KAAK,IAAI;AACjC,aAAO,oBAAC,YAAmB,SAAkB,GAAG,QAAQ,QAAQ,aAAa,aAAY,SAArE,KAA2E;AAAA,IACjG,CAAC;AAAA,KACH;AAEJ;;;ACJM,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAdC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AACf,MAAyB;AACvB,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,UAAU,CAAC;AAElE,SACE,gBAAAA,MAAC,YAAO,WAAW,SAAU,GAAG,YAC9B;AAAA,oBAAAA,MAAC,OAAE,WAAW,GAAG,kBAAkB,eACjC;AAAA,sBAAAD,KAAC,UAAK,WAAW,GAAG,kBAAkB,oBACpC,0BAAAA,KAAC,gBAAa,YAAY,GAAG,kBAAkB,YAAY,YAAwB,GACrF;AAAA,MACC;AAAA,OACH;AAAA,IACC,aACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM,IAEtD,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM;AAAA,IAEvD,aACE,aACC,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS,IAE7D,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS;AAAA,KAEnE;AAEJ;",
6
+ "names": ["jsx", "jsxs"]
7
+ }