@bonniernews/dn-design-system-web 21.1.1 → 21.1.3
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/assets/teaser/teaser.scss +4 -0
- package/components/divider/README-NJK.md +34 -0
- package/components/divider/README.md +7 -30
- package/components/divider/divider.tsx +7 -0
- package/components/quote/README-NJK.md +36 -0
- package/components/quote/README.md +7 -32
- package/components/quote/quote.tsx +7 -0
- package/components/teaser-card/README-NJK.md +41 -0
- package/components/teaser-card/README.md +13 -37
- package/components/teaser-card/teaser-card.njk +1 -0
- package/components/teaser-card/teaser-card.tsx +8 -0
- package/components/teaser-onsite/README-NJK.md +45 -0
- package/components/teaser-onsite/README.md +12 -37
- package/components/teaser-onsite/teaser-onsite.tsx +11 -0
- package/components/teaser-right-now/teaser-right-now.njk +1 -0
- package/components/teaser-slideshow/teaser-slideshow.scss +4 -0
- package/components/teaser-split/teaser-split.scss +4 -0
- package/components/teaser-tipsa/teaser-tipsa.njk +1 -0
- package/components/thematic-break/README-NJK.md +31 -0
- package/components/thematic-break/README.md +7 -27
- package/components/thematic-break/thematic-break.tsx +8 -0
- package/package.json +1 -1
- package/preact/components/divider/divider.d.ts +7 -0
- package/preact/components/quote/quote.d.ts +7 -0
- package/preact/components/teaser-card/teaser-card.d.ts +7 -0
- package/preact/components/teaser-onsite/teaser-onsite.d.ts +11 -0
- package/preact/components/thematic-break/thematic-break.d.ts +7 -0
- package/preact/components.cjs.map +2 -2
- package/preact/components.esm.js.map +2 -2
- package/react/components/divider/divider.d.ts +7 -0
- package/react/components/quote/quote.d.ts +7 -0
- package/react/components/teaser-card/teaser-card.d.ts +7 -0
- package/react/components/teaser-onsite/teaser-onsite.d.ts +11 -0
- package/react/components/thematic-break/thematic-break.d.ts +7 -0
- package/react/components.cjs.map +2 -2
- package/react/components.esm.js.map +2 -2
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
|
+
## [21.1.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.2...@bonniernews/dn-design-system-web@21.1.3) (2024-11-15)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Maintenance
|
|
11
|
+
|
|
12
|
+
* **web:** generate readme files based on storybook stories ([#1493](https://github.com/BonnierNews/dn-design-system/issues/1493)) ([253fa95](https://github.com/BonnierNews/dn-design-system/commit/253fa9592f35cb8f80faeafc2de9ba1d7da3ea3f))
|
|
13
|
+
|
|
14
|
+
## [21.1.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.1...@bonniernews/dn-design-system-web@21.1.2) (2024-11-15)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **web:** support bauta outside package ([#1496](https://github.com/BonnierNews/dn-design-system/issues/1496)) ([47a7d21](https://github.com/BonnierNews/dn-design-system/commit/47a7d219b4c4c7aefa1106a7a58433d3b5b7b897))
|
|
20
|
+
|
|
7
21
|
## [21.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@21.1.0...@bonniernews/dn-design-system-web@21.1.1) (2024-11-15)
|
|
8
22
|
|
|
9
23
|
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
|
|
2
|
+
- Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
|
|
3
|
+
- Storybook (Latest): [Divider](https://designsystem-latest.dn.se/?path=/docs/basic-divider--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# Divider
|
|
8
|
+
|
|
9
|
+
## Parameters
|
|
10
|
+
|
|
11
|
+
|parameter | type | required | options | default | description |
|
|
12
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
+
|variant | String | no | soft, medium, strong | soft | |
|
|
14
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
15
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
16
|
+
|
|
17
|
+
## Minimum requirement example
|
|
18
|
+
|
|
19
|
+
### Nunjucks
|
|
20
|
+
|
|
21
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
{% from '@bonniernews/dn-design-system-web/components/divider/divider.njk' import Divider %}
|
|
25
|
+
|
|
26
|
+
{{ Divider({
|
|
27
|
+
variant: "soft"
|
|
28
|
+
})}}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### SCSS
|
|
32
|
+
```scss
|
|
33
|
+
@use "@bonniernews/dn-design-system-web/components/divider/divider";
|
|
34
|
+
```
|
|
@@ -1,34 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [Divider](https://designsystem-latest.dn.se/?path=/docs/basic-divider--docs)
|
|
1
|
+
Divider
|
|
2
|
+
=======
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
|
|
5
|
+
* Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
|
|
6
6
|
|
|
7
|
-
|
|
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/divider/divider.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">variant</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span><span class="css-o1d7ko">"medium"</span><span class="css-o1d7ko">"hard"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"soft"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
-
|variant | String | no | soft, medium, strong | soft | |
|
|
14
|
-
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
15
|
-
|classNames | String | no | | | Ex. "my-special-class" |
|
|
16
|
-
|
|
17
|
-
## Minimum requirement example
|
|
18
|
-
|
|
19
|
-
### Nunjucks
|
|
20
|
-
|
|
21
|
-
These are copy paste friendly examples to quickliy get started using a component.
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
{% from '@bonniernews/dn-design-system-web/components/divider/divider.njk' import Divider %}
|
|
25
|
-
|
|
26
|
-
{{ Divider({
|
|
27
|
-
variant: "soft"
|
|
28
|
-
})}}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### SCSS
|
|
32
|
-
```scss
|
|
33
|
-
@use "@bonniernews/dn-design-system-web/components/divider/divider";
|
|
34
|
-
```
|
|
11
|
+
<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation"><</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">soft</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre>
|
|
@@ -6,6 +6,13 @@ export interface DividerProps {
|
|
|
6
6
|
attributes?: object;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
|
|
11
|
+
* - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--docs)
|
|
12
|
+
*
|
|
13
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
14
|
+
* `@use '@bonniernews/dn-design-system-web/components/divider/divider.scss'`
|
|
15
|
+
*/
|
|
9
16
|
export const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {
|
|
10
17
|
const classes = formatClassString([
|
|
11
18
|
'ds-divider',
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
|
|
2
|
+
- Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
|
|
3
|
+
- Storybook (Latest): [Quote](https://designsystem-latest.dn.se/?path=/docs/article-quote--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# Quote
|
|
8
|
+
|
|
9
|
+
## Parameters
|
|
10
|
+
|
|
11
|
+
|parameter | type | required | options | default | description |
|
|
12
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
+
|bodyHtml | HTML String | yes | | | |
|
|
14
|
+
|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
|
|
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/quote/quote.njk' import Quote %}
|
|
27
|
+
|
|
28
|
+
{{ Quote({
|
|
29
|
+
bodyHtml: ""
|
|
30
|
+
})}}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### SCSS
|
|
34
|
+
```scss
|
|
35
|
+
@use "@bonniernews/dn-design-system-web/components/quote/quote";
|
|
36
|
+
```
|
|
@@ -1,36 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [Quote](https://designsystem-latest.dn.se/?path=/docs/article-quote--docs)
|
|
1
|
+
Quote
|
|
2
|
+
=====
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
|
|
5
|
+
* Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
|
|
6
6
|
|
|
7
|
-
|
|
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/quote/quote.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">bodyHtml</span><span title="Required" class="css-1ywjlcj">*</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">forcePx</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">boolean</span></div></div></td><td><span>-</span></td></tr></tbody></table>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
-
|bodyHtml | HTML String | yes | | | |
|
|
14
|
-
|theme | String | no | default, kultur, nyheter, sport, ekonomi | | Design theme |
|
|
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/quote/quote.njk' import Quote %}
|
|
27
|
-
|
|
28
|
-
{{ Quote({
|
|
29
|
-
bodyHtml: ""
|
|
30
|
-
})}}
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### SCSS
|
|
34
|
-
```scss
|
|
35
|
-
@use "@bonniernews/dn-design-system-web/components/quote/quote";
|
|
36
|
-
```
|
|
11
|
+
<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation"><</span><span class="token tag class-name">Quote</span><span class="token tag"> </span><span class="token tag attr-name">bodyHtml</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value"><p>Vi har blivit som Kuba. Vi lever inte. Vi överlever.</p></span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre>
|
|
@@ -9,6 +9,13 @@ export interface QuoteProps {
|
|
|
9
9
|
forcePx?: boolean;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
|
|
14
|
+
* - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
|
|
15
|
+
*
|
|
16
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
17
|
+
* `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
|
|
18
|
+
*/
|
|
12
19
|
export const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {
|
|
13
20
|
const componentClassName = 'ds-quote';
|
|
14
21
|
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
|
|
2
|
+
- Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
3
|
+
- Storybook (Latest): [Subcomponents > TeaserCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# TeaserCard
|
|
8
|
+
|
|
9
|
+
This component is the basis for all Teasers. While it does not render much itself, it brings a common styling base for its children.
|
|
10
|
+
|
|
11
|
+
## Parameters
|
|
12
|
+
|
|
13
|
+
|parameter | type | required | options | default | description |
|
|
14
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
15
|
+
|targetLink | String | no | | | If given, the card will render as a link |
|
|
16
|
+
|areaType | String | no | '', 'right', 'bauta', 'bautaxl' | '' | The area the teaser will be rendered in |
|
|
17
|
+
|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
|
|
18
|
+
|classNames | String | no | | | Ex. "ds-teaser--large" |
|
|
19
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
20
|
+
|~forcePx~ | | | | | Not supported |
|
|
21
|
+
|
|
22
|
+
## Minimum requirement example
|
|
23
|
+
|
|
24
|
+
### Nunjucks
|
|
25
|
+
|
|
26
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
|
|
30
|
+
|
|
31
|
+
{% call TeaserCard({
|
|
32
|
+
targetLink: 'https://www.dn.se/',
|
|
33
|
+
}) %}
|
|
34
|
+
(content)
|
|
35
|
+
{% endcall %}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### SCSS
|
|
39
|
+
```scss
|
|
40
|
+
@use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
|
|
41
|
+
```
|
|
@@ -1,41 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [Subcomponents > TeaserCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
1
|
+
TeaserCard
|
|
2
|
+
==========
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
|
|
5
|
+
* Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
6
6
|
|
|
7
|
-
|
|
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/assets/teaser/teaser.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|classNames | String | no | | | Ex. "ds-teaser--large" |
|
|
19
|
-
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
20
|
-
|~forcePx~ | | | | | Not supported |
|
|
21
|
-
|
|
22
|
-
## Minimum requirement example
|
|
23
|
-
|
|
24
|
-
### Nunjucks
|
|
25
|
-
|
|
26
|
-
These are copy paste friendly examples to quickliy get started using a component.
|
|
27
|
-
|
|
28
|
-
```html
|
|
29
|
-
{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
|
|
30
|
-
|
|
31
|
-
{% call TeaserCard({
|
|
32
|
-
targetLink: 'https://www.dn.se/',
|
|
33
|
-
}) %}
|
|
34
|
-
(content)
|
|
35
|
-
{% endcall %}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### SCSS
|
|
39
|
-
```scss
|
|
40
|
-
@use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
|
|
41
|
-
```
|
|
11
|
+
<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation"><</span><span class="token tag class-name">TeaserCard</span><span class="token tag punctuation">></span><span class="token plain-text">
|
|
12
|
+
</span><span class="token plain-text"> </span><span class="token tag punctuation"><</span><span class="token tag">div</span><span class="token tag">
|
|
13
|
+
</span><span class="token tag"> </span><span class="token tag attr-name">style</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">
|
|
14
|
+
</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">height</span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'48px'</span><span class="token tag script language-javascript">
|
|
15
|
+
</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag">
|
|
16
|
+
</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain-text">
|
|
17
|
+
</span><span class="token plain-text"></span><span class="token tag punctuation"></</span><span class="token tag class-name">TeaserCard</span><span class="token tag punctuation">></span></div></pre>
|
|
@@ -10,12 +10,20 @@ export interface TeaserCardsProps {
|
|
|
10
10
|
children: any;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
|
|
15
|
+
* - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--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/assets/teaser/teaser.scss'`
|
|
19
|
+
*/
|
|
13
20
|
export const TeaserCard = ({ areaType, targetLink, theme = 'nyheter', classes, attributes, children }: TeaserCardsProps) => {
|
|
14
21
|
const componentClassName = 'ds-teaser';
|
|
15
22
|
|
|
16
23
|
const classNames = formatClassString([
|
|
17
24
|
componentClassName,
|
|
18
25
|
areaType && `${componentClassName}--${areaType}`,
|
|
26
|
+
areaType == 'bauta' && 'ds-dark',
|
|
19
27
|
`ds-theme--${theme}`,
|
|
20
28
|
classes,
|
|
21
29
|
])
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
|
|
2
|
+
- Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
3
|
+
- Storybook (Latest): [TeaserOnSite](https://designsystem-latest.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# teaser-onsite
|
|
8
|
+
|
|
9
|
+
Also known as "På Plats-puffen".
|
|
10
|
+
|
|
11
|
+
In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
|
|
12
|
+
|
|
13
|
+
## Parameters
|
|
14
|
+
|
|
15
|
+
|parameter | type | required | options | default | description |
|
|
16
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
17
|
+
|title | String | yes | | | Heading of the teaser |
|
|
18
|
+
|targetLink | String | yes | | | Target URL for the teaser |
|
|
19
|
+
|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
|
|
20
|
+
|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
|
|
21
|
+
|text | String | no | | | Teaser subtext |
|
|
22
|
+
|mediaHtml | HTML String | no | | | Main image or other media |
|
|
23
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
24
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
25
|
+
|~forcePx~ | | | | | Not supported |
|
|
26
|
+
|
|
27
|
+
## Minimum requirement example
|
|
28
|
+
|
|
29
|
+
### Nunjucks
|
|
30
|
+
|
|
31
|
+
These are copy paste friendly examples to quickly get started using a component.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
{% from '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.njk' import TeaserOnSite %}
|
|
35
|
+
|
|
36
|
+
{{ TeaserOnSite({
|
|
37
|
+
title: 'Kiev, Ukraina',
|
|
38
|
+
text: 'Henrik Brandão Jönsson och Eduardo Leal'
|
|
39
|
+
})}}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### SCSS
|
|
43
|
+
```scss
|
|
44
|
+
@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite";
|
|
45
|
+
```
|
|
@@ -1,45 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [TeaserOnSite](https://designsystem-latest.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
4
|
-
|
|
5
|
-
----
|
|
6
|
-
|
|
7
|
-
# teaser-onsite
|
|
1
|
+
TeaserOnsite
|
|
2
|
+
============
|
|
8
3
|
|
|
9
4
|
Also known as "På Plats-puffen".
|
|
10
5
|
|
|
11
6
|
In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
|
|
12
7
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|parameter | type | required | options | default | description |
|
|
16
|
-
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
17
|
-
|title | String | yes | | | Heading of the teaser |
|
|
18
|
-
|targetLink | String | yes | | | Target URL for the teaser |
|
|
19
|
-
|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
|
|
20
|
-
|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
|
|
21
|
-
|text | String | no | | | Teaser subtext |
|
|
22
|
-
|mediaHtml | HTML String | no | | | Main image or other media |
|
|
23
|
-
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
24
|
-
|classNames | String | no | | | Ex. "my-special-class" |
|
|
25
|
-
|~forcePx~ | | | | | Not supported |
|
|
26
|
-
|
|
27
|
-
## Minimum requirement example
|
|
28
|
-
|
|
29
|
-
### Nunjucks
|
|
30
|
-
|
|
31
|
-
These are copy paste friendly examples to quickly get started using a component.
|
|
8
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
|
|
9
|
+
* Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
32
10
|
|
|
33
|
-
|
|
34
|
-
{% from '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.njk' import TeaserOnSite %}
|
|
11
|
+
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-onsite/teaser-onsite.scss'`
|
|
35
12
|
|
|
36
|
-
{
|
|
37
|
-
title: 'Kiev, Ukraina',
|
|
38
|
-
text: 'Henrik Brandão Jönsson och Eduardo Leal'
|
|
39
|
-
})}}
|
|
40
|
-
```
|
|
13
|
+
<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">areaType</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"right"</span><span class="css-o1d7ko">"bauta"</span><span class="css-o1d7ko">"bautaxl"</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">targetLink</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">theme</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">"kultur"</span><span class="css-o1d7ko">"nyheter"</span><span class="css-o1d7ko">"sport"</span><span class="css-o1d7ko">"ekonomi"</span><span class="css-o1d7ko">"sthlm"</span></div></div></td><td><div class="css-13nzt7e"><span class="css-o1d7ko">"nyheter"</span></div></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-18pz2h2"><span>Ex. { target: "_blank", "data-test": "lorem ipsum" }</span></div><div class="css-1ije3e2"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">mediaHtml</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">title</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">text</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr></tbody></table>
|
|
41
14
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
15
|
+
<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation"><</span><span class="token tag class-name">TeaserOnSite</span><span class="token tag">
|
|
16
|
+
</span><span class="token tag"> </span><span class="token tag attr-name">mediaHtml="<figure</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value">ds-teaser-image</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag punctuation">></span><span class="token tag attr-name"><div</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value">picture</span><span class="token tag"> </span><span class="token tag attr-name">picture--placeholder&quot;</span><span class="token tag"> </span><span class="token tag special-attr attr-name">style</span><span class="token tag special-attr attr-value punctuation attr-equals">=</span><span class="token tag special-attr attr-value value css language-css">&quot</span><span class="token tag special-attr attr-value value css language-css punctuation">;</span><span class="token tag special-attr attr-value value css language-css property">aspect-ratio</span><span class="token tag special-attr attr-value value css language-css punctuation">:</span><span class="token tag"> </span><span class="token tag attr-name">1</span><span class="token tag"> / </span><span class="token tag attr-name">1;&quot;</span><span class="token tag punctuation">></span><span class="token tag attr-name"><img</span><span class="token tag"> </span><span class="token tag attr-name">class</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value">picture__img</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value">https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none</span><span class="token tag attr-value entity named-entity">&amp;</span><span class="token tag attr-value">fit=around%7C56:56</span><span class="token tag attr-value entity named-entity">&amp;</span><span class="token tag attr-value">crop=56:h;center,top</span><span class="token tag attr-value entity named-entity">&amp;</span><span class="token tag attr-value">output-quality=80</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag attr-value">true</span><span class="token tag attr-value entity named-entity">&quot;</span><span class="token tag punctuation">></span><span class="token tag attr-name"><</span><span class="token tag">/</span><span class="token tag attr-name">div</span><span class="token tag punctuation">></span><span class="token tag attr-name"><</span><span class="token tag">/</span><span class="token tag attr-name">figure</span><span class="token tag punctuation">></span><span class="token tag attr-name">"</span><span class="token tag">
|
|
17
|
+
</span><span class="token tag"> </span><span class="token tag attr-name">targetLink</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
|
|
18
|
+
</span><span class="token tag"> </span><span class="token tag attr-name">text</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Henrik Brandão Jönsson och Eduardo Leal</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
|
|
19
|
+
</span><span class="token tag"> </span><span class="token tag attr-name">title</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Azorerna</span><span class="token tag attr-value punctuation">"</span><span class="token tag">
|
|
20
|
+
</span><span class="token tag"></span><span class="token tag punctuation">/></span></div></pre>
|
|
@@ -13,6 +13,17 @@ export interface TeaserOnSiteProps {
|
|
|
13
13
|
text?: string;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* Also known as "På Plats-puffen".
|
|
18
|
+
*
|
|
19
|
+
* In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
|
|
20
|
+
*
|
|
21
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
|
|
22
|
+
* - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
23
|
+
*
|
|
24
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
25
|
+
* `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
|
|
26
|
+
*/
|
|
16
27
|
export const TeaserOnSite = ({ areaType, targetLink, theme = 'nyheter', classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => {
|
|
17
28
|
|
|
18
29
|
const classes = formatClassString([
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
- GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
|
|
2
|
+
- Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
3
|
+
- Storybook (Latest): [ThematicBreak](https://designsystem-latest.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
4
|
+
|
|
5
|
+
----
|
|
6
|
+
|
|
7
|
+
# ThematicBreak
|
|
8
|
+
|
|
9
|
+
## Parameters
|
|
10
|
+
|
|
11
|
+
|parameter | type | required | options | default | description |
|
|
12
|
+
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
+
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
14
|
+
|classNames | String | no | | | Ex. "my-special-class" |
|
|
15
|
+
|
|
16
|
+
## Minimum requirement example
|
|
17
|
+
|
|
18
|
+
### Nunjucks
|
|
19
|
+
|
|
20
|
+
These are copy paste friendly examples to quickliy get started using a component.
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
{% from '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.njk' import ThematicBreak %}
|
|
24
|
+
|
|
25
|
+
{{ ThematicBreak() }}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### SCSS
|
|
29
|
+
```scss
|
|
30
|
+
@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
|
|
31
|
+
```
|
|
@@ -1,31 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
- Storybook (Latest): [ThematicBreak](https://designsystem-latest.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
1
|
+
ThematicBreak
|
|
2
|
+
=============
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
* GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
|
|
5
|
+
* Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
6
6
|
|
|
7
|
-
|
|
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/thematic-break/thematic-break.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<table class="docblock-argstable sb-unstyled css-v2ifgj"><thead class="docblock-argstable-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th></tr></thead><tbody class="docblock-argstable-body"><tr><td class="css-4lbn0a"><span class="css-in3yi3">classNames</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">string</span></div></div></td><td><span>-</span></td></tr><tr><td class="css-4lbn0a"><span class="css-in3yi3">attributes</span></td><td><div class="css-1f9domv"><div class="css-13nzt7e"><span class="css-o1d7ko">object</span></div></div></td><td><span>-</span></td></tr></tbody></table>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|:--- | :--- | :--- | :--- | :--- | :--- |
|
|
13
|
-
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|
|
14
|
-
|classNames | String | no | | | Ex. "my-special-class" |
|
|
15
|
-
|
|
16
|
-
## Minimum requirement example
|
|
17
|
-
|
|
18
|
-
### Nunjucks
|
|
19
|
-
|
|
20
|
-
These are copy paste friendly examples to quickliy get started using a component.
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
{% from '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.njk' import ThematicBreak %}
|
|
24
|
-
|
|
25
|
-
{{ ThematicBreak() }}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### SCSS
|
|
29
|
-
```scss
|
|
30
|
-
@use "@bonniernews/dn-design-system-web/components/thematic-break/thematic-break";
|
|
31
|
-
```
|
|
11
|
+
<pre class="prismjs css-4zr3vl"><div class="language-jsx css-zye6j" style="white-space: pre;"><span class="token tag punctuation"><</span><span class="token tag class-name">ThematicBreak</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre>
|
|
@@ -5,6 +5,14 @@ export interface ThematicBreakProps {
|
|
|
5
5
|
attributes?: object;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
|
|
10
|
+
* - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
11
|
+
*
|
|
12
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
13
|
+
* `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
|
|
14
|
+
*/
|
|
15
|
+
|
|
8
16
|
export const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {
|
|
9
17
|
const classes = formatClassString([
|
|
10
18
|
'ds-thematic-break',
|
package/package.json
CHANGED
|
@@ -3,5 +3,12 @@ export interface DividerProps {
|
|
|
3
3
|
classNames?: string;
|
|
4
4
|
attributes?: object;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
|
|
8
|
+
* - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`
|
|
12
|
+
*/
|
|
6
13
|
export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("preact").JSX.Element;
|
|
7
14
|
export default Divider;
|
|
@@ -6,4 +6,11 @@ export interface QuoteProps {
|
|
|
6
6
|
attributes?: object;
|
|
7
7
|
forcePx?: boolean;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
|
|
11
|
+
* - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
|
|
12
|
+
*
|
|
13
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
14
|
+
* `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
|
|
15
|
+
*/
|
|
9
16
|
export declare const Quote: ({ bodyHtml, theme, classNames, attributes, forcePx }: QuoteProps) => import("preact").JSX.Element;
|
|
@@ -7,4 +7,11 @@ export interface TeaserCardsProps {
|
|
|
7
7
|
attributes?: object;
|
|
8
8
|
children: any;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
|
|
12
|
+
* - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
13
|
+
*
|
|
14
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
15
|
+
* `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
|
|
16
|
+
*/
|
|
10
17
|
export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("preact").JSX.Element;
|
|
@@ -9,4 +9,15 @@ export interface TeaserOnSiteProps {
|
|
|
9
9
|
title?: string;
|
|
10
10
|
text?: string;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Also known as "På Plats-puffen".
|
|
14
|
+
*
|
|
15
|
+
* In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
|
|
16
|
+
*
|
|
17
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
|
|
18
|
+
* - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
19
|
+
*
|
|
20
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
21
|
+
* `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
|
|
22
|
+
*/
|
|
12
23
|
export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("preact").JSX.Element;
|
|
@@ -2,5 +2,12 @@ export interface ThematicBreakProps {
|
|
|
2
2
|
classNames?: string;
|
|
3
3
|
attributes?: object;
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
|
|
7
|
+
* - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
8
|
+
*
|
|
9
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
10
|
+
* `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
|
|
11
|
+
*/
|
|
5
12
|
export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("preact").JSX.Element;
|
|
6
13
|
export default ThematicBreak;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;
|
|
4
|
+
"sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACH6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACOI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
|
|
6
6
|
"names": ["import_jsx_runtime", "import_jsx_runtime"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
|
|
4
|
-
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
-
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;
|
|
4
|
+
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACH6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACOI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
|
|
6
6
|
"names": ["jsx", "jsx"]
|
|
7
7
|
}
|
|
@@ -3,5 +3,12 @@ export interface DividerProps {
|
|
|
3
3
|
classNames?: string;
|
|
4
4
|
attributes?: object;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)
|
|
8
|
+
* - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`
|
|
12
|
+
*/
|
|
6
13
|
export declare const Divider: ({ variant, classNames, attributes }: DividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
14
|
export default Divider;
|
|
@@ -6,4 +6,11 @@ export interface QuoteProps {
|
|
|
6
6
|
attributes?: object;
|
|
7
7
|
forcePx?: boolean;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)
|
|
11
|
+
* - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--docs)
|
|
12
|
+
*
|
|
13
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
14
|
+
* `@use '@bonniernews/dn-design-system-web/components/quote/quote.scss'`
|
|
15
|
+
*/
|
|
9
16
|
export declare const Quote: ({ bodyHtml, theme, classNames, attributes, forcePx }: QuoteProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,4 +7,11 @@ export interface TeaserCardsProps {
|
|
|
7
7
|
attributes?: object;
|
|
8
8
|
children: any;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-card)
|
|
12
|
+
* - Storybook: [Subcomponents > TeaserCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserdot--docs)
|
|
13
|
+
*
|
|
14
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
15
|
+
* `@use '@bonniernews/dn-design-system-web/assets/teaser/teaser.scss'`
|
|
16
|
+
*/
|
|
10
17
|
export declare const TeaserCard: ({ areaType, targetLink, theme, classes, attributes, children }: TeaserCardsProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,4 +9,15 @@ export interface TeaserOnSiteProps {
|
|
|
9
9
|
title?: string;
|
|
10
10
|
text?: string;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Also known as "På Plats-puffen".
|
|
14
|
+
*
|
|
15
|
+
* In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
|
|
16
|
+
*
|
|
17
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
|
|
18
|
+
* - Storybook: [TeaserOnSite](https://designsystem.dn.se/?path=/docs/section-teaseronsite--docs)
|
|
19
|
+
*
|
|
20
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
21
|
+
* `@use '@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite.scss'`
|
|
22
|
+
*/
|
|
12
23
|
export declare const TeaserOnSite: ({ areaType, targetLink, theme, classNames, attributes, mediaHtml, title, text }: TeaserOnSiteProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,5 +2,12 @@ export interface ThematicBreakProps {
|
|
|
2
2
|
classNames?: string;
|
|
3
3
|
attributes?: object;
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)
|
|
7
|
+
* - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--docs)
|
|
8
|
+
*
|
|
9
|
+
* The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
|
|
10
|
+
* `@use '@bonniernews/dn-design-system-web/components/thematic-break/thematic-break.scss'`
|
|
11
|
+
*/
|
|
5
12
|
export declare const ThematicBreak: ({ classNames, attributes }: ThematicBreakProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
13
|
export default ThematicBreak;
|
package/react/components.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../index.tsx", "../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;
|
|
4
|
+
"sourcesContent": ["import { Divider } from \"./components/divider/divider\";\nexport { Divider };\n\nimport { ThematicBreak } from \"./components/thematic-break/thematic-break\";\nexport { ThematicBreak };\n\nimport { Quote } from \"./components/quote/quote\";\nexport { Quote };\n", "export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,4CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,sDAAC,QAAG,GAAE;AAEnD;;;ACH6C,IAAAA,sBAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,6CAAC,SAAI,WAAW,SAAU,GAAG,YAAY,uDAAC,QAAG,GAAE;AAEnD;;;ACOI,IAAAC,sBAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,6CAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
|
|
6
6
|
"names": ["import_jsx_runtime", "import_jsx_runtime"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../helpers/formatClassString.ts", "../components/divider/divider.tsx", "../components/thematic-break/thematic-break.tsx", "../components/quote/quote.tsx"],
|
|
4
|
-
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
-
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;
|
|
4
|
+
"sourcesContent": ["export const formatClassString = (classesArray: (string|undefined|false)[]): string => {\n return classesArray.filter(x => !!x).join(' ');\n}\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface DividerProps {\n variant?: 'soft' | 'medium' | 'hard';\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/divider](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/divider)\n * - Storybook: [Divider](https://designsystem.dn.se/?path=/docs/basic-divider--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/divider/divider.scss'`\n */\nexport const Divider = ({ variant = 'soft', classNames, attributes }: DividerProps) => {\n const classes = formatClassString([\n 'ds-divider',\n `ds-divider--${variant}`,\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default Divider;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface ThematicBreakProps {\n classNames?: string;\n attributes?: object;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/thematic-break](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/thematic-break)\n * - Storybook: [ThematicBreak](https://designsystem.dn.se/?path=/docs/article-thematicbreak--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/thematic-break/thematic-break.scss'`\n */\n\nexport const ThematicBreak = ({ classNames, attributes }: ThematicBreakProps) => {\n const classes = formatClassString([\n 'ds-thematic-break',\n classNames\n ])\n\n return (\n <div className={classes} {...attributes}><hr /></div>\n );\n};\n\nexport default ThematicBreak;\n", "import { formatClassString } from \"@bonniernews/dn-design-system-web/helpers/formatClassString.ts\";\n\nexport interface QuoteProps {\n bodyHtml: string;\n theme?: 'kultur' | 'nyheter' | 'sport' | 'ekonomi' | 'sthlm';\n classNames?: string;\n /** Ex. { target: \"_blank\", \"data-test\": \"lorem ipsum\" } */\n attributes?: object;\n forcePx?: boolean;\n}\n\n/**\n * - GitHub: [BonnierNews/dn-design-system/../web/src/components/quote](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/quote)\n * - Storybook: [Quote](https://designsystem.dn.se/?path=/docs/article-quote--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/quote/quote.scss'`\n */\nexport const Quote = ({ bodyHtml, theme = 'nyheter', classNames, attributes, forcePx }: QuoteProps) => {\n const componentClassName = 'ds-quote';\n\n const classes = formatClassString([\n componentClassName,\n `ds-theme--${theme}`,\n forcePx && 'ds-force-px',\n classNames,\n ])\n\n const quoteHtml = `<span class=\"${componentClassName}__border\"></span> ${bodyHtml}`\n\n return (\n <blockquote dangerouslySetInnerHTML={{ __html: quoteHtml }} className={classes} {...attributes} />\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAAO,IAAM,oBAAoB,CAAC,iBAAqD;AACrF,SAAO,aAAa,OAAO,OAAK,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG;AAC/C;;;ACqB6C;AARtC,IAAM,UAAU,CAAC,EAAE,UAAU,QAAQ,YAAY,WAAW,MAAoB;AACrF,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,eAAe,OAAO;AAAA,IACtB;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,SAAU,GAAG,YAAY,8BAAC,QAAG,GAAE;AAEnD;;;ACH6C,gBAAAA,YAAA;AAPtC,IAAM,gBAAgB,CAAC,EAAE,YAAY,WAAW,MAA0B;AAC/E,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAAA,KAAC,SAAI,WAAW,SAAU,GAAG,YAAY,0BAAAA,KAAC,QAAG,GAAE;AAEnD;;;ACOI,gBAAAC,YAAA;AAbG,IAAM,QAAQ,CAAC,EAAE,UAAU,QAAQ,WAAW,YAAY,YAAY,QAAQ,MAAkB;AACrG,QAAM,qBAAqB;AAE3B,QAAM,UAAU,kBAAkB;AAAA,IAChC;AAAA,IACA,aAAa,KAAK;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,EACF,CAAC;AAED,QAAM,YAAY,gBAAgB,kBAAkB,qBAAqB,QAAQ;AAEjF,SACE,gBAAAA,KAAC,gBAAW,yBAAyB,EAAE,QAAQ,UAAU,GAAG,WAAW,SAAU,GAAG,YAAY;AAEpG;",
|
|
6
6
|
"names": ["jsx", "jsx"]
|
|
7
7
|
}
|