@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.
- package/CHANGELOG.md +7 -0
- package/components/direkt-circle/README-NJK.md +32 -0
- package/components/direkt-circle/README.md +12 -29
- package/package.json +1 -1
- package/preact/components/direkt-circle/direkt-circle.d.ts +12 -0
- package/preact/components/direkt-circle/direkt-circle.js +60 -0
- 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
|
|
|
@@ -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";
|
|
@@ -1,32 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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
|
-
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
@@ -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 {};
|
|
@@ -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
|
|
@@ -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
|
+
}
|