@bonniernews/dn-design-system-web 32.2.0 → 32.2.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 (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/direkt-circle/README-NJK.md +32 -0
  3. package/components/direkt-circle/README.md +12 -29
  4. package/package.json +1 -1
  5. package/preact/components/direkt-circle/direkt-circle.d.ts +12 -0
  6. package/preact/components/direkt-circle/direkt-circle.js +60 -0
  7. package/preact/components/direkt-circle/direkt-circle.js.map +7 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.2.0...@bonniernews/dn-design-system-web@32.2.1) (2025-05-13)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** direkt circle as TSX ([#1732](https://github.com/BonnierNews/dn-design-system/issues/1732)) ([2bfaf60](https://github.com/BonnierNews/dn-design-system/commit/2bfaf608dd2b20618ccc5790eb3b783009273a91))
13
+
7
14
  ## [32.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.1.1...@bonniernews/dn-design-system-web@32.2.0) (2025-05-12)
8
15
 
9
16
 
package/components/direkt-circle/README-NJK.md ADDED
@@ -0,0 +1,32 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
2
+ - Storybook: [Subcomponents > DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
3
+ - Storybook (Latest): [Subcomponents > DirektCircle](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
4
+
5
+ ----
6
+
7
+ # DirektCircle
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |circleColor | String | no | | | Hex code or supported color name |
14
+ |classNames | String | no | | | Ex. "my-special-class" |
15
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
+
17
+
18
+ ## Minimum requirement example
19
+
20
+ ### Nunjucks
21
+
22
+ These are copy paste friendly examples to quickliy get started using a component.
23
+
24
+ ```html
25
+ {% from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.njk' import DirektCircle %}
26
+
27
+ {{ DirektCircle() }}
28
+ ```
29
+
30
+ ### SCSS
31
+ ```scss
32
+ @use "@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle";
package/components/direkt-circle/README.md CHANGED
@@ -1,32 +1,15 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/direkt-circle](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/direkt-circle)
2
- - Storybook: [Subcomponents > DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
3
- - Storybook (Latest): [Subcomponents > DirektCircle](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-direkt-circle--docs)
1
+ DirektCircle
2
+ ============
4
3
 
5
- ----
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
+ * Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
6
6
 
7
- # DirektCircle
7
+ | Name | Description | Default |
8
+ |:--- | :--- | :--- |
9
+ | circleColor | Hex code or supported color name<br />string | "white" |
10
+ | classNames | string | \- |
11
+ | attributes | object | { } |
8
12
 
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |circleColor | String | no | | | Hex code or supported color name |
14
- |classNames | String | no | | | Ex. "my-special-class" |
15
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
-
17
-
18
- ## Minimum requirement example
19
-
20
- ### Nunjucks
21
-
22
- These are copy paste friendly examples to quickliy get started using a component.
23
-
24
- ```html
25
- {% from '@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle.njk' import DirektCircle %}
26
-
27
- {{ DirektCircle() }}
28
- ```
29
-
30
- ### SCSS
31
- ```scss
32
- @use "@bonniernews/dn-design-system-web/components/direkt-circle/direkt-circle";
13
+ ```jsx
14
+ <DirektCircle />
15
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.2.0",
3
+ "version": "32.2.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 ADDED
@@ -0,0 +1,12 @@
1
+ interface DirektCircleProps {
2
+ /** Hex code or supported color name */
3
+ circleColor?: string;
4
+ classNames?: string;
5
+ attributes?: object;
6
+ }
7
+ /**
8
+ * - 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
+ * - Storybook: [DirektCircle](https://designsystem.dn.se/?path=/docs/section-subcomponents-direktcircle--docs)
10
+ */
11
+ export declare const DirektCircle: ({ circleColor, classNames, attributes }: DirektCircleProps) => import("preact").JSX.Element;
12
+ export {};
package/preact/components/direkt-circle/direkt-circle.js ADDED
@@ -0,0 +1,60 @@
1
+ // ../src/components/direkt-circle/direkt-circle.tsx
2
+ import { jsx, jsxs } from "preact/jsx-runtime";
3
+ var DirektCircle = ({ circleColor = "white", classNames, attributes = {} }) => {
4
+ const componentClassName = "ds-direkt-circle";
5
+ const circleOpacity = [
6
+ 0.25,
7
+ 0.25,
8
+ 0.25,
9
+ 0.25,
10
+ 0.25,
11
+ 0.25,
12
+ 0.25,
13
+ 0.25,
14
+ 0.24,
15
+ 0.235,
16
+ 0.222,
17
+ 0.218,
18
+ 0.212,
19
+ 0.202,
20
+ 0.19,
21
+ 0.178,
22
+ 0.165,
23
+ 0.155,
24
+ 0.145,
25
+ 0.135,
26
+ 0.12,
27
+ 0.107,
28
+ 0.095,
29
+ 0.083,
30
+ 0.07,
31
+ 0.06,
32
+ 0.047,
33
+ 0.035,
34
+ 0.023,
35
+ 0.02
36
+ ];
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
+ );
56
+ };
57
+ export {
58
+ DirektCircle
59
+ };
60
+ //# sourceMappingURL=direkt-circle.js.map
package/preact/components/direkt-circle/direkt-circle.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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;",
6
+ "names": []
7
+ }