@bonniernews/dn-design-system-web 32.5.1 → 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 (12) hide show
  1. package/CHANGELOG.md +15 -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/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 +17 -0
  11. package/preact/components/direkt-header/direkt-header.js +82 -0
  12. package/preact/components/direkt-header/direkt-header.js.map +7 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,21 @@ 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
+
7
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)
8
23
 
9
24
 
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/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.0",
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,17 @@
1
+ export interface DirektHeaderProps {
2
+ title: string;
3
+ subtitle?: string;
4
+ preTitle?: string;
5
+ isAnimated?: boolean;
6
+ classNames?: string;
7
+ /** Ex. { target: "_blank", "data-test": "lorem ipsum" } */
8
+ attributes?: object;
9
+ }
10
+ /**
11
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-header)
12
+ * - Storybook: [DirektHeader](https://designsystem.dn.se/?path=/docs/section-direkt-header--docs)
13
+ *
14
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
15
+ * `@use '@bonniernews/dn-design-system-web/components/direkt-header/direkt-header.scss'`
16
+ */
17
+ export declare const DirektHeader: ({ classNames, attributes, title, subtitle, preTitle, isAnimated, }: DirektHeaderProps) => import("preact").JSX.Element;
package/preact/components/direkt-header/direkt-header.js ADDED
@@ -0,0 +1,82 @@
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
+ }) => {
68
+ const componentClassName = "ds-direkt-header";
69
+ const classes = formatClassString([componentClassName, classNames]);
70
+ return /* @__PURE__ */ jsxs2("header", { className: classes, ...attributes, children: [
71
+ /* @__PURE__ */ jsxs2("p", { className: `${componentClassName}__pre-title`, children: [
72
+ /* @__PURE__ */ jsx2("span", { className: `${componentClassName}__circle-wrapper`, children: /* @__PURE__ */ jsx2(DirektCircle, { classNames: `${componentClassName}__circle`, isAnimated }) }),
73
+ preTitle
74
+ ] }),
75
+ /* @__PURE__ */ jsx2("h2", { className: `${componentClassName}__title`, children: title }),
76
+ subtitle && /* @__PURE__ */ jsx2("h3", { className: `${componentClassName}__sub-title`, children: subtitle })
77
+ ] });
78
+ };
79
+ export {
80
+ DirektHeader
81
+ };
82
+ //# 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 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}: 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 <h2 className={`${componentClassName}__title`}>{title}</h2>\n {subtitle && <h3 className={`${componentClassName}__sub-title`}>{subtitle}</h3>}\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;;;ACNM,SAEI,OAAAA,MAFJ,QAAAC,aAAA;AAbC,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,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,IACA,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,WAAY,iBAAM;AAAA,IACrD,YAAY,gBAAAA,KAAC,QAAG,WAAW,GAAG,kBAAkB,eAAgB,oBAAS;AAAA,KAC5E;AAEJ;",
6
+ "names": ["jsx", "jsxs"]
7
+ }