@bonniernews/dn-design-system-web 32.7.17 → 32.7.19
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 +14 -0
- package/components/teaser-tipsa/README-NJK.md +41 -0
- package/components/teaser-tipsa/README.md +24 -41
- package/package.json +1 -1
- package/preact/components/teaser-tipsa/teaser-tipsa.d.ts +16 -0
- package/preact/components/teaser-tipsa/teaser-tipsa.js +42 -0
- package/preact/components/teaser-tipsa/teaser-tipsa.js.map +7 -0
- package/components/teaser-tipsa/README-UXD.md +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [32.7.19](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.18...@bonniernews/dn-design-system-web@32.7.19) (2025-07-08)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Bug Fixes
|
|
11
|
+
|
|
12
|
+
* **web:** forgot to save the old NJK readme for TeaserTipsa ([#1822](https://github.com/BonnierNews/dn-design-system/issues/1822)) ([6c6fa15](https://github.com/BonnierNews/dn-design-system/commit/6c6fa15247e69e91abb44be09a49578941319553))
|
|
13
|
+
|
|
14
|
+
## [32.7.18](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.17...@bonniernews/dn-design-system-web@32.7.18) (2025-07-08)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **web:** component TeaserTipsa as TSX ([#1817](https://github.com/BonnierNews/dn-design-system/issues/1817)) ([cdb87ae](https://github.com/BonnierNews/dn-design-system/commit/cdb87ae8ccd7f6ba15aed60ab60c51b4eca2f6ec))
|
|
20
|
+
|
|
7
21
|
## [32.7.17](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.7.16...@bonniernews/dn-design-system-web@32.7.17) (2025-07-08)
|
|
8
22
|
|
|
9
23
|
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
|
|
2
|
+
- Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--docs)
|
|
3
|
+
- Storybook (Latest): [TeaserTipsa](https://designsystem-latest.dn.se/?path=/docs/section-teasertipsa--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# teaser-tipsa
|
|
8
|
+
|
|
9
|
+
It's quite common to include a dot in the title string, like "• This is a title"
|
|
10
|
+
|
|
11
|
+
## Parameters
|
|
12
|
+
|
|
13
|
+
|parameter | type | required | options | default | description |
|
|
14
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
15
|
+
|title | String | yes | | | Heading of the teaser |
|
|
16
|
+
|targetLink | String | yes | | | Target URL for the teaser |
|
|
17
|
+
|text | String | no | | | Teaser subtext |
|
|
18
|
+
|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
|
|
19
|
+
|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
|
|
20
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
21
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
22
|
+
|~forcePx~ | | | | | Not supported |
|
|
23
|
+
|
|
24
|
+
## Minimum requirement example
|
|
25
|
+
|
|
26
|
+
### Nunjucks
|
|
27
|
+
|
|
28
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
{% from '@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa.njk' import TeaserTipsa %}
|
|
32
|
+
|
|
33
|
+
{{ TeaserTipsa({
|
|
34
|
+
title: "• Jessie Ware låter den fullödiga fullängdaren vänta på sig",
|
|
35
|
+
})}}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### SCSS
|
|
39
|
+
```scss
|
|
40
|
+
@use "@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa" as *;
|
|
41
|
+
```
|
|
@@ -1,41 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
|
14
|
-
|
|
15
|
-
|
|
|
16
|
-
|targetLink |
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
### Nunjucks
|
|
27
|
-
|
|
28
|
-
These are copy paste friendly examples to quickliy get started using a component.
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
{% from '@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa.njk' import TeaserTipsa %}
|
|
32
|
-
|
|
33
|
-
{{ TeaserTipsa({
|
|
34
|
-
title: "• Jessie Ware låter den fullödiga fullängdaren vänta på sig",
|
|
35
|
-
})}}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### SCSS
|
|
39
|
-
```scss
|
|
40
|
-
@use "@bonniernews/dn-design-system-web/components/teaser-tipsa/teaser-tipsa" as *;
|
|
41
|
-
```
|
|
1
|
+
TeaserTipsa
|
|
2
|
+
===========
|
|
3
|
+
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
|
|
5
|
+
* Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--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/teaser-tipsa/teaser-tipsa.scss'`
|
|
8
|
+
|
|
9
|
+
| Name | Description | Default |
|
|
10
|
+
|:--- | :--- | :--- |
|
|
11
|
+
| title\* | string | \- |
|
|
12
|
+
| text | string | \- |
|
|
13
|
+
| classNames | Ex. "my-special-class"<br />string | \- |
|
|
14
|
+
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
|
|
15
|
+
| areaType | "right", "bauta", "bautaxl" | \- |
|
|
16
|
+
| targetLink | string | \- |
|
|
17
|
+
| theme | "kultur", "nyheter" | \- |
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
<TeaserTipsa
|
|
21
|
+
targetLink="'https://dngranskar.dn.se'"
|
|
22
|
+
title="Tipsa DN:s granskande reportrar"
|
|
23
|
+
/>
|
|
24
|
+
```
|
package/package.json
CHANGED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
|
|
2
|
+
import { TeaserCardsProps } from '../teaser-card/teaser-card';
|
|
3
|
+
interface TeaserTipsaProps extends SharedProps, TeaserCardsProps {
|
|
4
|
+
title: string;
|
|
5
|
+
text?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)
|
|
9
|
+
* - Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--docs)
|
|
10
|
+
*
|
|
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/teaser-tipsa/teaser-tipsa.scss'`
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
15
|
+
export declare const TeaserTipsa: ({ targetLink, areaType, title, text, classNames, attributes }: TeaserTipsaProps) => import("preact").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// ../src/helpers/formatClassString.ts
|
|
2
|
+
var formatClassString = (classesArray) => {
|
|
3
|
+
return classesArray.filter((x) => !!x).join(" ");
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
// ../src/components/teaser-card/teaser-card.tsx
|
|
7
|
+
import { jsx } from "preact/jsx-runtime";
|
|
8
|
+
var TeaserCard = ({ areaType, targetLink, theme = "nyheter", classNames, attributes, children }) => {
|
|
9
|
+
const componentClassName = "ds-teaser";
|
|
10
|
+
const classes = formatClassString([
|
|
11
|
+
componentClassName,
|
|
12
|
+
areaType && `${componentClassName}--${areaType}`,
|
|
13
|
+
areaType == "bauta" && "ds-dark",
|
|
14
|
+
`ds-theme--${theme}`,
|
|
15
|
+
classNames
|
|
16
|
+
]);
|
|
17
|
+
if (targetLink) {
|
|
18
|
+
return /* @__PURE__ */ jsx("a", { className: classes, href: targetLink, ...attributes, children });
|
|
19
|
+
}
|
|
20
|
+
return /* @__PURE__ */ jsx("div", { className: classes, ...attributes, children });
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// ../src/components/teaser-tipsa/teaser-tipsa.tsx
|
|
24
|
+
import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
|
|
25
|
+
var TeaserTipsa = ({ targetLink, areaType, title, text, classNames, attributes = {} }) => {
|
|
26
|
+
const componentClassName = "ds-teaser";
|
|
27
|
+
const classes = formatClassString([componentClassName, "ds-teaser--tipsa", classNames]);
|
|
28
|
+
const teaserCardProps = {
|
|
29
|
+
targetLink,
|
|
30
|
+
areaType,
|
|
31
|
+
attributes,
|
|
32
|
+
classNames: classes
|
|
33
|
+
};
|
|
34
|
+
return /* @__PURE__ */ jsx2(TeaserCard, { ...teaserCardProps, children: /* @__PURE__ */ jsxs("div", { className: `${componentClassName}__content`, children: [
|
|
35
|
+
/* @__PURE__ */ jsx2("h2", { className: "ds-teaser__title", children: title }),
|
|
36
|
+
text && /* @__PURE__ */ jsx2("p", { className: `${componentClassName}__text`, children: text })
|
|
37
|
+
] }) });
|
|
38
|
+
};
|
|
39
|
+
export {
|
|
40
|
+
TeaserTipsa
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=teaser-tipsa.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../helpers/formatClassString.ts", "../../../components/teaser-card/teaser-card.tsx", "../../../components/teaser-tipsa/teaser-tipsa.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\";\nimport { ComponentChildren } from \"preact\";\n\nexport interface TeaserCardsProps extends SharedProps {\n areaType?: 'right' | 'bauta' | 'bautaxl';\n targetLink?: string;\n theme?: 'kultur' | 'nyheter';\n children: ComponentChildren;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)\n * - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--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/assets/teaser/teaser.scss'`\n */\nexport const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, children }: TeaserCardsProps) => {\n const componentClassName = 'ds-teaser';\n\n const classes = formatClassString([\n componentClassName,\n areaType && `${componentClassName}--${areaType}`,\n areaType == 'bauta' && 'ds-dark',\n `ds-theme--${theme}`,\n classNames,\n ])\n\n if (targetLink) {\n return (\n <a className={classes} href={targetLink } {...attributes}>\n { children }\n </a>\n );\n }\n\n return (\n <div className={classes}{...attributes}>\n { children }\n </div>\n );\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'\nimport { TeaserCard, TeaserCardsProps } from '../teaser-card/teaser-card'\n\ninterface TeaserTipsaProps extends SharedProps, TeaserCardsProps {\n title: string\n text?: string\n}\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-tipsa](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-tipsa)\n * - Storybook: [TeaserTipsa](https://designsystem.dn.se/?path=/docs/section-teasertipsa--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-tipsa/teaser-tipsa.scss'`\n *\n */\n\nexport const TeaserTipsa = ({ targetLink, areaType, title, text, classNames, attributes = {} }: TeaserTipsaProps) => {\n const componentClassName = 'ds-teaser'\n const classes = formatClassString([componentClassName, 'ds-teaser--tipsa', classNames])\n\n const teaserCardProps = {\n targetLink,\n areaType,\n attributes,\n classNames: classes,\n }\n\n return (\n <TeaserCard {...teaserCardProps}>\n <div className={`${componentClassName}__content`}>\n <h2 className='ds-teaser__title'>{title}</h2>\n {text && <p className={`${componentClassName}__text`}>{text}</p>}\n </div>\n </TeaserCard>\n )\n}\n"],
|
|
5
|
+
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;AC6BM;AAbC,IAAM,aAAa,CAAC,EAAE,UAAU,YAAY,QAAQ,WAAW,YAAY,YAAY,SAAS,MAAwB;AAC7H,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,YAAY,GAAG,kBAAkB,KAAK,QAAQ;AAAA,IAC9C,YAAY,WAAW;AAAA,IACvB,aAAa,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAED,MAAI,YAAY;AACd,WACE,oBAAC,OAAE,WAAW,SAAS,MAAM,YAAc,GAAG,YAC1C,UACJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,WAAW,SAAS,GAAG,YACxB,UACJ;AAEJ;;;ACZM,SACE,OAAAA,MADF;AAbC,IAAM,cAAc,CAAC,EAAE,YAAY,UAAU,OAAO,MAAM,YAAY,aAAa,CAAC,EAAE,MAAwB;AACnH,QAAM,qBAAqB;AAC3B,QAAM,UAAU,kBAAkB,CAAC,oBAAoB,oBAAoB,UAAU,CAAC;AAEtF,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd;AAEA,SACE,gBAAAA,KAAC,cAAY,GAAG,iBACd,+BAAC,SAAI,WAAW,GAAG,kBAAkB,aACnC;AAAA,oBAAAA,KAAC,QAAG,WAAU,oBAAoB,iBAAM;AAAA,IACvC,QAAQ,gBAAAA,KAAC,OAAE,WAAW,GAAG,kBAAkB,UAAW,gBAAK;AAAA,KAC9D,GACF;AAEJ;",
|
|
6
|
+
"names": ["jsx"]
|
|
7
|
+
}
|
|
File without changes
|