@bonniernews/dn-design-system-web 22.1.1 → 22.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/components/button/README-NJK.md +53 -0
- package/components/button/README.md +36 -53
- package/components/button/button-types.ts +87 -0
- package/components/button-toggle/README-NJK.md +56 -0
- package/components/button-toggle/README.md +31 -48
- package/components/divider/README.md +8 -2
- package/components/footer/README.md +190 -179
- package/components/game-header/README.md +17 -7
- package/components/icon-button/README-NJK.md +47 -0
- package/components/icon-button/README.md +31 -47
- package/components/icon-button-toggle/README-NJK.md +53 -0
- package/components/icon-button-toggle/README.md +30 -45
- package/components/quote/README.md +10 -2
- package/components/spinner/README.md +13 -5
- package/components/teaser-card/README.md +16 -8
- package/components/teaser-onsite/README.md +19 -1
- package/components/thematic-break/README.md +7 -2
- package/package.json +1 -1
- package/preact/components/button/button-base.d.ts +5 -0
- package/preact/components/button/button-base.js +161 -0
- package/preact/components/button/button-base.js.map +7 -0
- package/preact/components/button/button-types.d.ts +73 -0
- package/preact/components/button/button.d.ts +10 -0
- package/preact/components/button/button.js +201 -0
- package/preact/components/button/button.js.map +7 -0
- package/preact/components/button-toggle/button-toggle.d.ts +19 -0
- package/preact/components/button-toggle/button-toggle.js +201 -0
- package/preact/components/button-toggle/button-toggle.js.map +7 -0
- package/preact/components/icon-button/icon-button.d.ts +10 -0
- package/preact/components/icon-button/icon-button.js +197 -0
- package/preact/components/icon-button/icon-button.js.map +7 -0
- package/preact/components/icon-button-toggle/icon-button-toggle.d.ts +18 -0
- package/preact/components/icon-button-toggle/icon-button-toggle.js +199 -0
- package/preact/components/icon-button-toggle/icon-button-toggle.js.map +7 -0
- package/preact/components/spinner/spinner.d.ts +2 -2
- package/preact/components/spinner/spinner.js.map +1 -1
- package/preact/foundations/a11y/visually-hidden.d.ts +4 -0
- package/tsconfig.json +3 -0
|
@@ -6,183 +6,194 @@ Footer
|
|
|
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/footer/footer.scss'`
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
| Name | Description | Default |
|
|
10
|
+
|:--- | :--- | :--- |
|
|
11
|
+
| editorsHtml | string | \- |
|
|
12
|
+
| copyright | string | \- |
|
|
13
|
+
| linkGroups | FooterLinkList\[\] | \- |
|
|
14
|
+
| rudolf\* | { imgUrl: string; text: string; } | \- |
|
|
15
|
+
| channels | FooterLink\[\] | \- |
|
|
16
|
+
| classNames | string | \- |
|
|
17
|
+
| attributes | object | \- |
|
|
18
|
+
| forcePx | boolean | \- |
|
|
10
19
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
20
|
+
```jsx
|
|
21
|
+
<Footer
|
|
22
|
+
channels={[
|
|
23
|
+
{
|
|
24
|
+
attributes: {
|
|
25
|
+
rel: 'nofollow'
|
|
26
|
+
},
|
|
27
|
+
href: '?channel=',
|
|
28
|
+
text: 'Byt version'
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
attributes: {
|
|
32
|
+
rel: 'nofollow'
|
|
33
|
+
},
|
|
34
|
+
classNames: 'hidden-mobile',
|
|
35
|
+
href: '?channel=mobile',
|
|
36
|
+
text: 'Mobil'
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
attributes: {
|
|
40
|
+
rel: 'nofollow'
|
|
41
|
+
},
|
|
42
|
+
classNames: 'hidden-tablet',
|
|
43
|
+
href: '?channel=tablet',
|
|
44
|
+
text: 'Tablet'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
attributes: {
|
|
48
|
+
rel: 'nofollow'
|
|
49
|
+
},
|
|
50
|
+
classNames: 'hidden-desktop',
|
|
51
|
+
href: '?channel=desktop',
|
|
52
|
+
text: 'Webb'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
attributes: {
|
|
56
|
+
id: 'site-footer__cookie-settings'
|
|
57
|
+
},
|
|
58
|
+
classNames: 'hidden-tablet',
|
|
59
|
+
href: '#',
|
|
60
|
+
text: 'Cookie-inställningar'
|
|
61
|
+
}
|
|
62
|
+
]}
|
|
63
|
+
copyright="© Dagens Nyheter AB 2023"
|
|
64
|
+
editorsHtml="<p>Chefredaktör och ansvarig utgivare: Peter Wolodarski | Redaktionschef: Anna Åberg | Vd: Anders Eriksson | Administrativ redaktionschef: Fredrik Björnsson | Biträdande redaktionschef: Matilda E Hanson | Utrikeschef: Pia Skagermark | Kulturchef: Björn Wiman | Politisk redaktör: Amanda Sokolnicki | Chef DN.se: Anna Kallenberg <br /> Dagens Nyheter – en del av Bonnier News <br />Bonnier News org.nr 559080-0917</p>"
|
|
65
|
+
linkGroups={[
|
|
66
|
+
{
|
|
67
|
+
links: [
|
|
68
|
+
{
|
|
69
|
+
href: '/app/',
|
|
70
|
+
text: 'DN:s appar'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
href: 'https://etidning.dn.se/',
|
|
74
|
+
text: 'e-DN'
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
href: '/korsord/',
|
|
78
|
+
text: 'Korsord'
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
href: 'https://arkivet.dn.se/',
|
|
82
|
+
text: 'Arkivet'
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
href: '/insandare/',
|
|
86
|
+
text: 'Insändare'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
href: '/nyhetsbrev/',
|
|
90
|
+
text: 'Nyhetsbrev'
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
href: '/foljer/',
|
|
94
|
+
text: 'Följ ämnen och skribenter'
|
|
95
|
+
}
|
|
96
|
+
],
|
|
97
|
+
title: 'Ta del av DN'
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
attributes: {
|
|
101
|
+
'data-hide-promo': ''
|
|
102
|
+
},
|
|
103
|
+
links: [
|
|
104
|
+
{
|
|
105
|
+
href: 'https://prenumerera.dn.se/bli-prenumerant/',
|
|
106
|
+
text: 'Bli prenumerant'
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
href: 'https://id.dn.se/konto/',
|
|
110
|
+
text: 'Kundservice'
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
href: 'https://id.dn.se/konto/',
|
|
114
|
+
text: 'Min prenumeration'
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
href: 'https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/',
|
|
118
|
+
text: 'Vanliga frågor'
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
href: 'https://id.dn.se/konto/?nextUrl=/kontakt/dn/',
|
|
122
|
+
text: 'Kontakta kundservice'
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
href: 'https://erbjudanden.dn.se/',
|
|
126
|
+
text: 'Kunderbjudanden'
|
|
127
|
+
}
|
|
128
|
+
],
|
|
129
|
+
title: 'Kundservice'
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
links: [
|
|
133
|
+
{
|
|
134
|
+
href: '/kontakt/',
|
|
135
|
+
text: 'Kontakta oss'
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
href: 'https://dngranskar.dn.se/',
|
|
139
|
+
text: 'Tipsa DN'
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
href: 'https://gdpr.bonniernews.se/cookiepolicy',
|
|
143
|
+
text: 'Om cookies'
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
href: 'https://gdpr.bonniernews.se/personuppgiftspolicy/',
|
|
147
|
+
text: 'Personuppgiftspolicy'
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
href: 'https://dn.ocast.com/',
|
|
151
|
+
text: 'Annonsera'
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
attributes: {
|
|
155
|
+
rel: 'nofollow noopener',
|
|
156
|
+
target: '_blank'
|
|
157
|
+
},
|
|
158
|
+
href: 'https://iabsverige.se/goldstandard/',
|
|
159
|
+
text: 'IAB Sweden Gold Standard'
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
href: 'javascript:window.location.href='mailto:adops@bonniernews.se'',
|
|
163
|
+
text: 'Anmäl störande/felaktig annons'
|
|
164
|
+
}
|
|
165
|
+
],
|
|
166
|
+
title: 'Om DN'
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
links: [
|
|
170
|
+
{
|
|
171
|
+
href: 'https://instagram.com/dagens_nyheter',
|
|
172
|
+
text: 'Instagram'
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
href: 'https://www.youtube.com/@DagensNyheterDN',
|
|
176
|
+
text: 'Youtube'
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
href: 'https://facebook.com/dn.se',
|
|
180
|
+
text: 'Facebook'
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
href: 'https://twitter.com/dagensnyheter',
|
|
184
|
+
text: 'Twitter'
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
href: 'https://www.tiktok.com/@dagensnyheterdn',
|
|
188
|
+
text: 'TikTok'
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
title: 'Följ oss'
|
|
192
|
+
}
|
|
193
|
+
]}
|
|
194
|
+
rudolf={{
|
|
195
|
+
imgUrl: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20height%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%23holder%20text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20%2300000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2028px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cg%20id%3D%22holder%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23cccccc%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3ERudolf%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E',
|
|
196
|
+
text: 'Punkten efter Dagens Nyheter har funnits med allt sedan det första numret 23 december 1864. Grundaren Rudolf Wall lär ha satt dit den med tanken att Dagens Nyheter inte bara är ett namn. Det är också en avslutad mening, ett konstaterande av vad som hänt. Därför sätter vi punkt även i vår tid.'
|
|
197
|
+
}}
|
|
198
|
+
/>
|
|
199
|
+
```
|