@bonniernews/dn-design-system-web 32.3.2 → 32.4.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 (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/components/video-caption/README-NJK.md +37 -0
  3. package/components/video-caption/README.md +22 -37
  4. package/package.json +1 -1
  5. package/preact/components/video-caption/video-caption.d.ts +20 -0
  6. package/preact/components/video-caption/video-caption.js +31 -0
  7. package/preact/components/video-caption/video-caption.js.map +7 -0
  8. package/preact/foundations/a11y/visually-hidden.d.ts +4 -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.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.2...@bonniernews/dn-design-system-web@32.4.0) (2025-05-19)
8
+
9
+
10
+ ### Features
11
+
12
+ * **web:** videocaption as tsx ([#1737](https://github.com/BonnierNews/dn-design-system/issues/1737)) ([fe29ca1](https://github.com/BonnierNews/dn-design-system/commit/fe29ca158036190b9af50917832a29f7e43ddbd8))
13
+
7
14
  ## [32.3.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.3.1...@bonniernews/dn-design-system-web@32.3.2) (2025-05-19)
8
15
 
9
16
 
package/components/video-caption/README-NJK.md ADDED
@@ -0,0 +1,37 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
2
+ - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
3
+ - Storybook (Latest): [VideoCaption](https://designsystem-latest.dn.se/?path=/docs/article-videocaption--docs)
4
+
5
+ ----
6
+
7
+ # VideoCaption
8
+
9
+ ## Parameters
10
+
11
+ |parameter | type | required | options | default | description |
12
+ |:--- | :--- | :--- | :--- | :--- | :--- |
13
+ |caption | String | no | | | |
14
+ |duration | String | no | | | |
15
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
+ |classNames | String | no | | | Ex. "my-special-class" |
17
+ |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
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/video-caption/video-caption.njk' import VideoCaption %}
27
+
28
+ {{ VideoCaption({
29
+ caption: "Tre år har gått sedan terrordåden i Paris.",
30
+ duration: "47 sek"
31
+ }) }}
32
+ ```
33
+
34
+ ### SCSS
35
+ ```scss
36
+ @use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
37
+ ```
package/components/video-caption/README.md CHANGED
@@ -1,37 +1,22 @@
1
- - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
2
- - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
3
- - Storybook (Latest): [VideoCaption](https://designsystem-latest.dn.se/?path=/docs/article-videocaption--docs)
4
-
5
- ----
6
-
7
- # VideoCaption
8
-
9
- ## Parameters
10
-
11
- |parameter | type | required | options | default | description |
12
- |:--- | :--- | :--- | :--- | :--- | :--- |
13
- |caption | String | no | | | |
14
- |duration | String | no | | | |
15
- |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
16
- |classNames | String | no | | | Ex. "my-special-class" |
17
- |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |
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/video-caption/video-caption.njk' import VideoCaption %}
27
-
28
- {{ VideoCaption({
29
- caption: "Tre år har gått sedan terrordåden i Paris.",
30
- duration: "47 sek"
31
- }) }}
32
- ```
33
-
34
- ### SCSS
35
- ```scss
36
- @use "@bonniernews/dn-design-system-web/components/video-caption/video-caption";
37
- ```
1
+ VideoCaption
2
+ ============
3
+
4
+ * GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
5
+ * Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--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/video-caption/video-caption.scss'`
8
+
9
+ | Name | Description | Default |
10
+ |:--- | :--- | :--- |
11
+ | caption | Ex: "Detta är en bildtext"<br />string | \- |
12
+ | duration | Ex: "01:23"<br />string | \- |
13
+ | classNames | Ex: "my-special-class another-class"<br />string | \- |
14
+ | attributes | Ex: { target: "\_blank", "data-test": "lorem ipsum" }<br />object | \- |
15
+ | forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
16
+
17
+ ```jsx
18
+ <VideoCaption
19
+ caption="Tre år har gått sedan terrordåden i Paris. 130 människor dog och hundratals skadades i attackerna. Nu inför Frankrike omstridda antiterrorlaga"
20
+ duration="47 sek"
21
+ />
22
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "32.3.2",
3
+ "version": "32.4.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/video-caption/video-caption.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ export interface VideoCaptionProps {
2
+ /** Ex: "Detta är en bildtext" */
3
+ caption?: string;
4
+ /** Ex: "01:23" */
5
+ duration?: string;
6
+ /** Ex: "my-special-class another-class" */
7
+ classNames?: string;
8
+ /** Ex: { target: "_blank", "data-test": "lorem ipsum" } */
9
+ attributes?: object;
10
+ /** Fixed pixel value is used for typography to prevent scaling based on html font-size */
11
+ forcePx?: boolean;
12
+ }
13
+ /**
14
+ * - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)
15
+ * - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--docs)
16
+ *
17
+ * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
18
+ * `@use '@bonniernews/dn-design-system-web/components/video-caption/video-caption.scss'`
19
+ */
20
+ export declare const VideoCaption: ({ caption, duration, classNames, attributes, forcePx }: VideoCaptionProps) => import("preact").JSX.Element;
package/preact/components/video-caption/video-caption.js ADDED
@@ -0,0 +1,31 @@
1
+ // ../src/helpers/formatClassString.ts
2
+ var formatClassString = (classesArray) => {
3
+ return classesArray.filter((x) => !!x).join(" ");
4
+ };
5
+
6
+ // ../src/foundations/a11y/visually-hidden.tsx
7
+ import { jsx } from "preact/jsx-runtime";
8
+ var VisuallyHidden = ({ text }) => {
9
+ return /* @__PURE__ */ jsx("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
10
+ };
11
+
12
+ // ../src/components/video-caption/video-caption.tsx
13
+ import { Fragment, jsx as jsx2, jsxs } from "preact/jsx-runtime";
14
+ var VideoCaption = ({ caption, duration, classNames, attributes, forcePx }) => {
15
+ const classes = formatClassString([
16
+ "ds-video-caption",
17
+ forcePx && "ds-force-px",
18
+ classNames
19
+ ]);
20
+ return /* @__PURE__ */ jsxs("figcaption", { className: classes, ...attributes, children: [
21
+ duration && /* @__PURE__ */ jsxs(Fragment, { children: [
22
+ /* @__PURE__ */ jsx2("span", { className: "ds-video-caption__duration", "aria-hidden": "true", children: duration }),
23
+ /* @__PURE__ */ jsx2(VisuallyHidden, { text: `Videon \xE4r ${duration} l\xE5ng.` })
24
+ ] }),
25
+ caption && /* @__PURE__ */ jsx2("span", { className: "ds-video-caption__text", children: caption })
26
+ ] });
27
+ };
28
+ export {
29
+ VideoCaption
30
+ };
31
+ //# sourceMappingURL=video-caption.js.map
package/preact/components/video-caption/video-caption.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../helpers/formatClassString.ts", "../../../foundations/a11y/visually-hidden.tsx", "../../../components/video-caption/video-caption.tsx"],
4
+ "sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "export interface VisuallyHiddenProps {\n text: string;\n};\n\nexport const VisuallyHidden = ({ text }: VisuallyHiddenProps) => {\n return (<span className=\"visually-hidden\" dangerouslySetInnerHTML={{ __html: text }}></span>);\n}\n", "import { formatClassString } from '@bonniernews/dn-design-system-web/helpers/formatClassString.ts'\nimport { VisuallyHidden } from '../../foundations/a11y/visually-hidden';\n\nexport interface VideoCaptionProps {\n /** Ex: \"Detta \u00E4r en bildtext\" */\n caption?: string;\n /** Ex: \"01:23\" */\n duration?: string;\n /** Ex: \"my-special-class another-class\" */\n classNames?: string;\n /** Ex: { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n /** Fixed pixel value is used for typography to prevent scaling based on html font-size */\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/video-caption](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/video-caption)\n * - Storybook: [VideoCaption](https://designsystem.dn.se/?path=/docs/article-videocaption--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/video-caption/video-caption.scss'`\n */\nexport const VideoCaption = ({ caption, duration, classNames, attributes, forcePx }: VideoCaptionProps) => {\n const classes = formatClassString([\n 'ds-video-caption',\n forcePx && 'ds-force-px',\n classNames,\n ]);\n\n return (\n <figcaption className={classes} {...attributes}>\n {duration && (\n <>\n <span className=\"ds-video-caption__duration\" aria-hidden=\"true\">\n {duration}\n </span>\n <VisuallyHidden text={`Videon \u00E4r ${duration} l\u00E5ng.`} />\n </>\n )}\n {caption && (\n <span className=\"ds-video-caption__text\">\n {caption}\n </span>\n )}\n </figcaption>\n );\n};\n"],
5
+ "mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACGU;AADH,IAAM,iBAAiB,CAAC,EAAE,KAAK,MAA2B;AAC/D,SAAQ,oBAAC,UAAK,WAAU,mBAAkB,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AACvF;;;AC2BQ,mBACE,OAAAA,MADF;AAVD,IAAM,eAAe,CAAC,EAAE,SAAS,UAAU,YAAY,YAAY,QAAQ,MAAyB;AACzG,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,SACE,qBAAC,gBAAW,WAAW,SAAU,GAAG,YACjC;AAAA,gBACC,iCACE;AAAA,sBAAAA,KAAC,UAAK,WAAU,8BAA6B,eAAY,QACtD,oBACH;AAAA,MACA,gBAAAA,KAAC,kBAAe,MAAM,gBAAa,QAAQ,aAAU;AAAA,OACvD;AAAA,IAED,WACC,gBAAAA,KAAC,UAAK,WAAU,0BACb,mBACH;AAAA,KAEJ;AAEJ;",
6
+ "names": ["jsx"]
7
+ }
package/preact/foundations/a11y/visually-hidden.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export interface VisuallyHiddenProps {
2
+ text: string;
3
+ }
4
+ export declare const VisuallyHidden: ({ text }: VisuallyHiddenProps) => import("preact").JSX.Element;