@bonniernews/dn-design-system-web 32.7.14 → 32.7.15

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/components/teaser-dot/README-NJK.md +41 -0
  3. package/components/teaser-dot/README.md +20 -34
  4. package/package.json +1 -1
  5. package/preact/components/teaser-dot/teaser-dot.d.ts +22 -0
  6. package/preact/components/teaser-dot/teaser-dot.js +25 -0
  7. package/preact/components/teaser-dot/teaser-dot.js.map +7 -0
  8. package/components/teaser-dot/README-UXD.md +0 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,18 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [32.7.15](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.14...@bonniernews/dn-design-system-web@32.7.15) (2025-07-07)
8
+
9
+
10
+ ### Bug Fixes
11
+
12
+ * **web:** teaser dot tsx ([#1807](https://github.com/BonnierNews/dn-design-system/issues/1807)) ([546c40a](https://github.com/BonnierNews/dn-design-system/commit/546c40a7459b1e23d8d38b06f8b9ef0d15a4a8eb))
13
+
14
+
15
+ ### Maintenance
16
+
17
+ * **web:** fix test by id ([#1813](https://github.com/BonnierNews/dn-design-system/issues/1813)) ([80e8145](https://github.com/BonnierNews/dn-design-system/commit/80e81454a7257710558133a60f4fb992ee25abf5))
18
+
7
19
  ## [32.7.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.13...@bonniernews/dn-design-system-web@32.7.14) (2025-07-07)
8
20
 
9
21
 
package/components/teaser-dot/README-NJK.md ADDED
@@ -0,0 +1,41 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
2
+ - Storybook: [Subcomponents > TeaserDot](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
3
+ - Storybook (Latest): [Subcomponents > TeaserDot](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
4
+
5
+ ----
6
+
7
+ # TeaserDot
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |flashing | boolean | no | true, false | false | If the dot should be flashing |
14
+ |classNames | String | no | | | Ex. "my-special-class" |
15
+ |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
16
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
+
18
+
19
+ ## Minimum requirement example
20
+
21
+ ### Nunjucks
22
+
23
+ These are copy paste friendly examples to quickliy get started using a component.
24
+
25
+ ```html
26
+ {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
27
+
28
+ {{ TeaserDot({
29
+ flashing: false
30
+ })}}
31
+ ```
32
+
33
+ ### SCSS
34
+ ```scss
35
+ @use "@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot";
36
+
37
+ .ds-teaser-dot {
38
+ // use css variable to optionally override size
39
+ --ds-teaser-dot-size: 10px;
40
+ }
41
+ ```
package/components/teaser-dot/README.md CHANGED
@@ -1,41 +1,27 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
2
- - Storybook: [Subcomponents > TeaserDot](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
3
- - Storybook (Latest): [Subcomponents > TeaserDot](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
1
+ TeaserDot
2
+ =========
4
3
 
5
- ----
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
5
+ * Storybook: [TeaserDot](https://designsystem.dn.se/?path=/docs/section-teaser-dot--docs)
6
6
 
7
- # TeaserDot
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/teaser-dot/teaser-dot.scss'`
8
8
 
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |flashing | boolean | no | true, false | false | If the dot should be flashing |
14
- |classNames | String | no | | | Ex. "my-special-class" |
15
- |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
16
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
-
18
-
19
- ## Minimum requirement example
20
-
21
- ### Nunjucks
22
-
23
- These are copy paste friendly examples to quickliy get started using a component.
24
-
25
- ```html
26
- {% from '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.njk' import TeaserDot %}
27
-
28
- {{ TeaserDot({
29
- flashing: false
30
- })}}
31
- ```
32
-
33
- ### SCSS
34
- ```scss
35
- @use "@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot";
9
+ You can override size of the dot:
36
10
 
11
+ ```javascript
37
12
  .ds-teaser-dot {
38
- // use css variable to optionally override size
39
- --ds-teaser-dot-size: 10px;
13
+ // use css variable to optionally override size
14
+ --ds-teaser-dot-size: 10px;
40
15
  }
41
16
  ```
17
+
18
+ | Name | Description | Default |
19
+ |:--- | :--- | :--- |
20
+ | flashing | boolean | \- |
21
+ | forcePx | boolean | \- |
22
+ | classNames | Ex. "my-special-class"<br />string | \- |
23
+ | attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
24
+
25
+ ```jsx
26
+ <TeaserDot />
27
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.7.14",
3
+ "version": "32.7.15",
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/teaser-dot/teaser-dot.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { SharedProps } from "@bonniernews/dn-design-system-web/assets/types/shared-props.ts";
2
+ interface TeaserDotProps extends SharedProps {
3
+ flashing?: boolean;
4
+ forcePx?: boolean;
5
+ }
6
+ /**
7
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)
8
+ * - Storybook: [TeaserDot](https://designsystem.dn.se/?path=/docs/section-teaser-dot--docs)
9
+ *
10
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
11
+ * `@use '@bonniernews/dn-design-system-web/components/teaser-dot/teaser-dot.scss'`
12
+ *
13
+ *
14
+ * You can override size of the dot:
15
+ * ```
16
+ * .ds-teaser-dot {
17
+ * // use css variable to optionally override size
18
+ * --ds-teaser-dot-size: 10px;
19
+ * }```
20
+ */
21
+ export declare const TeaserDot: ({ flashing, forcePx, classNames, attributes, }: TeaserDotProps) => import("preact").JSX.Element;
22
+ export {};
package/preact/components/teaser-dot/teaser-dot.js ADDED
@@ -0,0 +1,25 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/components/teaser-dot/teaser-dot.tsx
7
+ import { jsx } from "preact/jsx-runtime";
8
+ var TeaserDot = ({
9
+ flashing,
10
+ forcePx,
11
+ classNames,
12
+ attributes = {}
13
+ }) => {
14
+ const classes = formatClassString([
15
+ "ds-teaser-dot",
16
+ flashing && "ds-teaser-dot--flashing",
17
+ forcePx && "ds-force-px",
18
+ classNames
19
+ ]);
20
+ return /* @__PURE__ */ jsx("span", { className: classes, ...attributes });
21
+ };
22
+ export {
23
+ TeaserDot
24
+ };
25
+ //# sourceMappingURL=teaser-dot.js.map
package/preact/components/teaser-dot/teaser-dot.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-dot/teaser-dot.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import type { SharedProps } from \"@bonniernews/dn-design-system-web/assets/types/shared-props.ts\";\nimport { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\n\ninterface TeaserDotProps extends SharedProps {\n flashing?: boolean;\n forcePx?: boolean;\n}\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-dot](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-dot)\n * - Storybook: [TeaserDot](https://designsystem.dn.se/?path=/docs/section-teaser-dot--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/teaser-dot/teaser-dot.scss'`\n *\n *\n * You can override size of the dot:\n * ```\n * .ds-teaser-dot {\n * // use css variable to optionally override size\n * --ds-teaser-dot-size: 10px;\n * }```\n */\n\nexport const TeaserDot = ({\n flashing,\n forcePx,\n classNames,\n attributes = {},\n}: TeaserDotProps) => {\n\n const classes = formatClassString([\n 'ds-teaser-dot',\n flashing && 'ds-teaser-dot--flashing',\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n return (\n <span className={classes} {...attributes}></span>\n )\n}\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACoCE;AAfK,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa,CAAC;AAChB,MAAsB;AAEpB,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACA,oBAAC,UAAK,WAAW,SAAU,GAAG,YAAY;AAE5C;",
6
+ "names": []
7
+ }
package/components/teaser-dot/README-UXD.md DELETED
File without changes