@oslokommune/punkt-react 12.4.3 → 12.5.1
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 +36 -0
- package/dist/index.d.ts +21 -14
- package/dist/punkt-react.es.js +3381 -3376
- package/dist/punkt-react.umd.js +147 -142
- package/package.json +13 -4
- package/src/components/accordion/Accordion.test.tsx +9 -4
- package/src/components/breadcrumbs/Breadcrumbs.test.tsx +60 -56
- package/src/components/breadcrumbs/Breadcrumbs.tsx +1 -1
- package/src/components/footer/Footer.test.tsx +2 -9
- package/src/components/footerSimple/FooterSimple.test.tsx +1 -8
- package/src/components/header/Header.test.tsx +0 -14
- package/src/components/icon/Icon.test.tsx +24 -48
- package/src/components/icon/Icon.tsx +15 -19
- package/src/components/index.ts +0 -1
- package/src/components/linkcard/LinkCard.test.tsx +0 -11
- package/src/components/loader/Loader.tsx +0 -1
- package/src/components/preview/Preview.tsx +3 -1
- package/src/components/searchinput/SearchInput.test.tsx +13 -6
- package/src/components/tag/Tag.test.tsx +0 -11
- package/src/components/footer/__snapshots__/Footer.test.tsx.snap +0 -156
- package/src/components/footerSimple/__snapshots__/FooterSimple.test.tsx.snap +0 -72
- package/src/components/header/__snapshots__/Header.test.tsx.snap +0 -161
- package/src/components/icon/DefaultIconFetcher.tsx +0 -54
- package/src/components/icon/IconContext.tsx +0 -9
- package/src/components/linkcard/__snapshots__/LinkCard.test.tsx.snap +0 -22
- package/src/components/tag/__snapshots__/Tag.test.tsx.snap +0 -23
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`PktFooterSimple snapshot renders correctly with all props 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<footer
|
|
6
|
-
class="pkt-footer"
|
|
7
|
-
data-mode="dark"
|
|
8
|
-
>
|
|
9
|
-
<div
|
|
10
|
-
class="pkt-footer__container"
|
|
11
|
-
>
|
|
12
|
-
<div
|
|
13
|
-
class="pkt-grid pkt-grid--rowgap-size-32 pkt-grid--gap-size-16"
|
|
14
|
-
>
|
|
15
|
-
<div
|
|
16
|
-
class="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up"
|
|
17
|
-
>
|
|
18
|
-
<h2
|
|
19
|
-
class="pkt-footer__title"
|
|
20
|
-
>
|
|
21
|
-
Column One
|
|
22
|
-
</h2>
|
|
23
|
-
<ul
|
|
24
|
-
class="pkt-footer__list"
|
|
25
|
-
>
|
|
26
|
-
<li
|
|
27
|
-
class="pkt-footer__text"
|
|
28
|
-
>
|
|
29
|
-
Column One Text
|
|
30
|
-
</li>
|
|
31
|
-
<li
|
|
32
|
-
class="pkt-footer__list-item"
|
|
33
|
-
>
|
|
34
|
-
<a
|
|
35
|
-
class="pkt-footer__link pkt-link--external"
|
|
36
|
-
href="https://example.com"
|
|
37
|
-
target="_self"
|
|
38
|
-
>
|
|
39
|
-
Link 1
|
|
40
|
-
</a>
|
|
41
|
-
</li>
|
|
42
|
-
<li
|
|
43
|
-
class="pkt-footer__list-item"
|
|
44
|
-
>
|
|
45
|
-
<a
|
|
46
|
-
class="pkt-footer__link "
|
|
47
|
-
href="https://example.com"
|
|
48
|
-
target="_self"
|
|
49
|
-
>
|
|
50
|
-
Link 2
|
|
51
|
-
</a>
|
|
52
|
-
</li>
|
|
53
|
-
</ul>
|
|
54
|
-
</div>
|
|
55
|
-
<div
|
|
56
|
-
class="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up"
|
|
57
|
-
>
|
|
58
|
-
<h2
|
|
59
|
-
class="pkt-footer__title"
|
|
60
|
-
>
|
|
61
|
-
Column Two
|
|
62
|
-
</h2>
|
|
63
|
-
<ul
|
|
64
|
-
class="pkt-footer__list"
|
|
65
|
-
>
|
|
66
|
-
<li
|
|
67
|
-
class="pkt-footer__text"
|
|
68
|
-
>
|
|
69
|
-
Column Two Text
|
|
70
|
-
</li>
|
|
71
|
-
<li
|
|
72
|
-
class="pkt-footer__list-item"
|
|
73
|
-
>
|
|
74
|
-
<a
|
|
75
|
-
class="pkt-footer__link pkt-link--external"
|
|
76
|
-
href="https://example.com"
|
|
77
|
-
target="_self"
|
|
78
|
-
>
|
|
79
|
-
Link 3
|
|
80
|
-
</a>
|
|
81
|
-
</li>
|
|
82
|
-
<li
|
|
83
|
-
class="pkt-footer__list-item"
|
|
84
|
-
>
|
|
85
|
-
<a
|
|
86
|
-
class="pkt-footer__link "
|
|
87
|
-
href="https://example.com"
|
|
88
|
-
target="_self"
|
|
89
|
-
>
|
|
90
|
-
Link 4
|
|
91
|
-
</a>
|
|
92
|
-
</li>
|
|
93
|
-
</ul>
|
|
94
|
-
</div>
|
|
95
|
-
<div
|
|
96
|
-
class="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up"
|
|
97
|
-
>
|
|
98
|
-
<h2
|
|
99
|
-
class="pkt-footer__title"
|
|
100
|
-
>
|
|
101
|
-
Om nettstedet
|
|
102
|
-
</h2>
|
|
103
|
-
<ul
|
|
104
|
-
class="pkt-footer__list"
|
|
105
|
-
>
|
|
106
|
-
<li
|
|
107
|
-
class="pkt-footer__list-item"
|
|
108
|
-
>
|
|
109
|
-
<a
|
|
110
|
-
class="pkt-footer__link"
|
|
111
|
-
href="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
|
|
112
|
-
>
|
|
113
|
-
Personvern og informasjonskapsler
|
|
114
|
-
</a>
|
|
115
|
-
</li>
|
|
116
|
-
<li
|
|
117
|
-
class="pkt-footer__list-item"
|
|
118
|
-
>
|
|
119
|
-
<a
|
|
120
|
-
class="pkt-footer__link"
|
|
121
|
-
href="https://www.oslo.kommune.no/tilgjengelighet/"
|
|
122
|
-
>
|
|
123
|
-
Tilgjengelighet
|
|
124
|
-
</a>
|
|
125
|
-
</li>
|
|
126
|
-
</ul>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
<div
|
|
130
|
-
aria-label="standard lenker"
|
|
131
|
-
class="pkt-footer__social"
|
|
132
|
-
>
|
|
133
|
-
<div
|
|
134
|
-
class="pkt-footer__social-languages"
|
|
135
|
-
/>
|
|
136
|
-
<div
|
|
137
|
-
class="pkt-footer__social-icons"
|
|
138
|
-
>
|
|
139
|
-
<a
|
|
140
|
-
aria-label="til facebook"
|
|
141
|
-
class="pkt-footer__social-icon-link"
|
|
142
|
-
href="https://example.com"
|
|
143
|
-
target="_self"
|
|
144
|
-
/>
|
|
145
|
-
<a
|
|
146
|
-
aria-label="til twitter"
|
|
147
|
-
class="pkt-footer__social-icon-link"
|
|
148
|
-
href="https://example.com"
|
|
149
|
-
target="_self"
|
|
150
|
-
/>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
</footer>
|
|
155
|
-
</div>
|
|
156
|
-
`;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`PktFooterSimple snapshot renders correctly with all props 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<footer
|
|
6
|
-
class="pkt-footer-simple"
|
|
7
|
-
data-mode="dark"
|
|
8
|
-
>
|
|
9
|
-
<div
|
|
10
|
-
class="pkt-footer-simple__container"
|
|
11
|
-
>
|
|
12
|
-
<ul
|
|
13
|
-
class="pkt-footer-simple__list"
|
|
14
|
-
>
|
|
15
|
-
<li
|
|
16
|
-
class="pkt-footer-simple__list-item"
|
|
17
|
-
>
|
|
18
|
-
<a
|
|
19
|
-
class="pkt-footer-simple__link "
|
|
20
|
-
href="https://www.example.com"
|
|
21
|
-
target="_self"
|
|
22
|
-
>
|
|
23
|
-
Example Link 1
|
|
24
|
-
</a>
|
|
25
|
-
</li>
|
|
26
|
-
<li
|
|
27
|
-
class="pkt-footer-simple__list-item"
|
|
28
|
-
>
|
|
29
|
-
<a
|
|
30
|
-
class="pkt-footer-simple__link "
|
|
31
|
-
href="https://www.example.com"
|
|
32
|
-
target="_self"
|
|
33
|
-
>
|
|
34
|
-
Example Link 2
|
|
35
|
-
</a>
|
|
36
|
-
</li>
|
|
37
|
-
<li
|
|
38
|
-
class="pkt-footer-simple__list-item"
|
|
39
|
-
>
|
|
40
|
-
<a
|
|
41
|
-
class="pkt-footer-simple__link "
|
|
42
|
-
href="https://www.example.com"
|
|
43
|
-
target="_self"
|
|
44
|
-
>
|
|
45
|
-
Example Link 3
|
|
46
|
-
</a>
|
|
47
|
-
</li>
|
|
48
|
-
<li
|
|
49
|
-
class="pkt-footer-simple__list-item"
|
|
50
|
-
>
|
|
51
|
-
<a
|
|
52
|
-
class="pkt-footer-simple__link"
|
|
53
|
-
href="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
|
|
54
|
-
>
|
|
55
|
-
Personvern og informasjonskapsler
|
|
56
|
-
</a>
|
|
57
|
-
</li>
|
|
58
|
-
<li
|
|
59
|
-
class="pkt-footer-simple__list-item"
|
|
60
|
-
>
|
|
61
|
-
<a
|
|
62
|
-
class="pkt-footer-simple__link"
|
|
63
|
-
href="https://www.oslo.kommune.no/tilgjengelighet/"
|
|
64
|
-
>
|
|
65
|
-
Tilgjengelighet
|
|
66
|
-
</a>
|
|
67
|
-
</li>
|
|
68
|
-
</ul>
|
|
69
|
-
</div>
|
|
70
|
-
</footer>
|
|
71
|
-
</div>
|
|
72
|
-
`;
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`PktHeader snapshot renders correctly with all props 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<header
|
|
6
|
-
aria-label="Topp"
|
|
7
|
-
class="pkt-header pkt-header--fixed pkt-header--scroll-to-hide"
|
|
8
|
-
data-testid="pkt-header"
|
|
9
|
-
id="pkt-header"
|
|
10
|
-
>
|
|
11
|
-
<div
|
|
12
|
-
class="pkt-header__logo"
|
|
13
|
-
>
|
|
14
|
-
<a
|
|
15
|
-
aria-label="Tilbake til forside"
|
|
16
|
-
class="pkt-header__logo-link"
|
|
17
|
-
href="https://www.oslo.kommune.no/"
|
|
18
|
-
/>
|
|
19
|
-
<span
|
|
20
|
-
class="pkt-header__logo-service"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
<nav
|
|
24
|
-
class="pkt-header__actions"
|
|
25
|
-
>
|
|
26
|
-
<ul
|
|
27
|
-
class="pkt-header__actions-row"
|
|
28
|
-
>
|
|
29
|
-
<li
|
|
30
|
-
class="pkt-header--has-dropdown "
|
|
31
|
-
data-testid="usermenu"
|
|
32
|
-
>
|
|
33
|
-
<button
|
|
34
|
-
aria-controls="pktUserDropdown"
|
|
35
|
-
aria-expanded="false"
|
|
36
|
-
class="pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left"
|
|
37
|
-
role="button"
|
|
38
|
-
type="button"
|
|
39
|
-
>
|
|
40
|
-
<span
|
|
41
|
-
class="pkt-header__user-fullname"
|
|
42
|
-
>
|
|
43
|
-
Org Name
|
|
44
|
-
</span>
|
|
45
|
-
<span
|
|
46
|
-
class="pkt-header__user-shortname"
|
|
47
|
-
>
|
|
48
|
-
ON
|
|
49
|
-
</span>
|
|
50
|
-
</button>
|
|
51
|
-
<ul
|
|
52
|
-
class="pkt-header__dropdown pkt-user-menu"
|
|
53
|
-
id="pktUserDropdown"
|
|
54
|
-
>
|
|
55
|
-
<li>
|
|
56
|
-
<div
|
|
57
|
-
class="pkt-user-menu__label"
|
|
58
|
-
>
|
|
59
|
-
Pålogget som
|
|
60
|
-
</div>
|
|
61
|
-
<div
|
|
62
|
-
class="pkt-user-menu__name"
|
|
63
|
-
>
|
|
64
|
-
John Doe
|
|
65
|
-
</div>
|
|
66
|
-
<div
|
|
67
|
-
class="pkt-user-menu__last-logged-in"
|
|
68
|
-
>
|
|
69
|
-
Sist pålogget:
|
|
70
|
-
<time>
|
|
71
|
-
2023-08-20T12:34:56Z
|
|
72
|
-
</time>
|
|
73
|
-
</div>
|
|
74
|
-
</li>
|
|
75
|
-
<li>
|
|
76
|
-
<ul
|
|
77
|
-
class="pkt-list"
|
|
78
|
-
>
|
|
79
|
-
<li>
|
|
80
|
-
<a
|
|
81
|
-
class="pkt-link"
|
|
82
|
-
href="/profile"
|
|
83
|
-
>
|
|
84
|
-
Profile
|
|
85
|
-
</a>
|
|
86
|
-
</li>
|
|
87
|
-
<li>
|
|
88
|
-
<a
|
|
89
|
-
class="pkt-link"
|
|
90
|
-
href="/settings"
|
|
91
|
-
>
|
|
92
|
-
Settings
|
|
93
|
-
</a>
|
|
94
|
-
</li>
|
|
95
|
-
</ul>
|
|
96
|
-
</li>
|
|
97
|
-
<li>
|
|
98
|
-
<div
|
|
99
|
-
class="pkt-user-menu__label"
|
|
100
|
-
>
|
|
101
|
-
Representerer
|
|
102
|
-
</div>
|
|
103
|
-
<div
|
|
104
|
-
class="pkt-user-menu__name"
|
|
105
|
-
>
|
|
106
|
-
Org Name
|
|
107
|
-
</div>
|
|
108
|
-
<div
|
|
109
|
-
class="pkt-user-menu__org-number"
|
|
110
|
-
>
|
|
111
|
-
Org.nr.
|
|
112
|
-
123456789
|
|
113
|
-
</div>
|
|
114
|
-
<ul
|
|
115
|
-
class="pkt-list mt-size-16"
|
|
116
|
-
>
|
|
117
|
-
<li>
|
|
118
|
-
<button
|
|
119
|
-
class="pkt-link-button pkt-link"
|
|
120
|
-
>
|
|
121
|
-
Endre organisasjon
|
|
122
|
-
</button>
|
|
123
|
-
</li>
|
|
124
|
-
</ul>
|
|
125
|
-
</li>
|
|
126
|
-
<li>
|
|
127
|
-
<ul
|
|
128
|
-
class="pkt-list"
|
|
129
|
-
>
|
|
130
|
-
<li>
|
|
131
|
-
<button
|
|
132
|
-
class="pkt-link-button pkt-link"
|
|
133
|
-
>
|
|
134
|
-
Logg ut
|
|
135
|
-
</button>
|
|
136
|
-
</li>
|
|
137
|
-
</ul>
|
|
138
|
-
</li>
|
|
139
|
-
<li
|
|
140
|
-
class="footer"
|
|
141
|
-
>
|
|
142
|
-
<ul
|
|
143
|
-
class="pkt-list-horizontal bordered"
|
|
144
|
-
>
|
|
145
|
-
<li>
|
|
146
|
-
<a
|
|
147
|
-
class="pkt-link"
|
|
148
|
-
href="/help"
|
|
149
|
-
>
|
|
150
|
-
Help
|
|
151
|
-
</a>
|
|
152
|
-
</li>
|
|
153
|
-
</ul>
|
|
154
|
-
</li>
|
|
155
|
-
</ul>
|
|
156
|
-
</li>
|
|
157
|
-
</ul>
|
|
158
|
-
</nav>
|
|
159
|
-
</header>
|
|
160
|
-
</div>
|
|
161
|
-
`;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { IconFetcher } from './IconContext'
|
|
2
|
-
|
|
3
|
-
const errorSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>'
|
|
4
|
-
|
|
5
|
-
export const defaultSvgPath = 'https://punkt-cdn.oslo.kommune.no/latest/icons/'
|
|
6
|
-
|
|
7
|
-
function sleep(ms: number) {
|
|
8
|
-
return new Promise((resolve) => setTimeout(resolve, ms))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const dlStatus: { [key: string]: string } = {}
|
|
12
|
-
|
|
13
|
-
const downloadIconOrGetFromCache = async (name: string, path: string): Promise<string | null> => {
|
|
14
|
-
let i = 0
|
|
15
|
-
while (dlStatus[path + name + '.svg'] === 'fetching') {
|
|
16
|
-
i++
|
|
17
|
-
if (i > 50) break
|
|
18
|
-
await sleep(50)
|
|
19
|
-
}
|
|
20
|
-
if (localStorage.getItem(path + name + '.svg')) {
|
|
21
|
-
return Promise.resolve(localStorage.getItem(path + name + '.svg'))
|
|
22
|
-
} else if (typeof window.fetch === 'function') {
|
|
23
|
-
dlStatus[path + name + '.svg'] = 'fetching'
|
|
24
|
-
return Promise.resolve(
|
|
25
|
-
fetch(path + name + '.svg')
|
|
26
|
-
.then((response) => {
|
|
27
|
-
if (!response.ok) {
|
|
28
|
-
// eslint-disable-next-line no-console
|
|
29
|
-
console.error('Missing icon: ' + path + name + '.svg')
|
|
30
|
-
return errorSvg
|
|
31
|
-
} else {
|
|
32
|
-
return response.text()
|
|
33
|
-
}
|
|
34
|
-
})
|
|
35
|
-
.then((text) => {
|
|
36
|
-
if (text !== errorSvg) {
|
|
37
|
-
localStorage.setItem(path + name + '.svg', text)
|
|
38
|
-
}
|
|
39
|
-
dlStatus[path + name + '.svg'] = 'fetched'
|
|
40
|
-
return text
|
|
41
|
-
}),
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
return Promise.resolve(errorSvg)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const defaultIconFetcher: IconFetcher = {
|
|
48
|
-
fetchIcon: async (name: string, path: string | undefined): Promise<string | null> => {
|
|
49
|
-
const iconPath = path || defaultSvgPath
|
|
50
|
-
return downloadIconOrGetFromCache(name, iconPath)
|
|
51
|
-
},
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
export default defaultIconFetcher
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { createContext } from 'react'
|
|
2
|
-
|
|
3
|
-
import defaultIconFetcher from './DefaultIconFetcher'
|
|
4
|
-
|
|
5
|
-
export type IconFetcher = {
|
|
6
|
-
fetchIcon: (name: string, path: string | undefined) => Promise<string | null>
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const PktIconContext = createContext<IconFetcher>(defaultIconFetcher)
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`PktLinkCard snapshots renders correctly as fragment with props 1`] = `
|
|
4
|
-
<DocumentFragment>
|
|
5
|
-
<a
|
|
6
|
-
class="pkt-linkcard pkt-link pkt-linkcard pkt-linkcard--normal"
|
|
7
|
-
href="/example"
|
|
8
|
-
target="_self"
|
|
9
|
-
>
|
|
10
|
-
<div
|
|
11
|
-
class="pkt-linkcard__title "
|
|
12
|
-
>
|
|
13
|
-
Link title
|
|
14
|
-
</div>
|
|
15
|
-
<div
|
|
16
|
-
class="pkt-linkcard__text"
|
|
17
|
-
>
|
|
18
|
-
Link content
|
|
19
|
-
</div>
|
|
20
|
-
</a>
|
|
21
|
-
</DocumentFragment>
|
|
22
|
-
`;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`PktTag snapshot renders correctly with all props 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<button
|
|
6
|
-
aria-label="close"
|
|
7
|
-
class="pkt-tag pkt-btn pkt-btn--tertiary pkt-tag--small pkt-tag--red pkt-tag--normal-text pkt-btn--icons-right-and-left"
|
|
8
|
-
type="button"
|
|
9
|
-
>
|
|
10
|
-
<span
|
|
11
|
-
class="pkt-tag__icon pkt-tag__icon"
|
|
12
|
-
data-testid="mocked-pkt-icon"
|
|
13
|
-
name="user"
|
|
14
|
-
/>
|
|
15
|
-
Tag
|
|
16
|
-
<span
|
|
17
|
-
class="pkt-tag__icon pkt-tag__close-btn"
|
|
18
|
-
data-testid="mocked-pkt-icon"
|
|
19
|
-
name="close"
|
|
20
|
-
/>
|
|
21
|
-
</button>
|
|
22
|
-
</div>
|
|
23
|
-
`;
|