@oslokommune/punkt-react 3.4.2 → 4.0.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 +22 -0
- package/dist/footer/Footer.d.ts +23 -0
- package/dist/footerSimple/FooterSimple.d.ts +9 -0
- package/dist/index.d.ts +2 -0
- package/dist/punkt-react.es.js +546 -455
- package/dist/punkt-react.umd.js +11 -11
- package/package.json +4 -4
- package/src/components/footer/Footer.test.tsx +123 -0
- package/src/components/footer/Footer.tsx +123 -0
- package/src/components/footer/__snapshots__/Footer.test.tsx.snap +218 -0
- package/src/components/footerSimple/FooterSimple.test.tsx +66 -0
- package/src/components/footerSimple/FooterSimple.tsx +50 -0
- package/src/components/footerSimple/__snapshots__/FooterSimple.test.tsx.snap +109 -0
- package/src/components/index.ts +2 -0
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`PktFooterSimple snapshot renders correctly 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
|
+
>
|
|
38
|
+
<svg
|
|
39
|
+
class="pkt-footer__link-icon"
|
|
40
|
+
viewBox="0 0 32 32"
|
|
41
|
+
>
|
|
42
|
+
<use
|
|
43
|
+
href="#chevron-right"
|
|
44
|
+
/>
|
|
45
|
+
</svg>
|
|
46
|
+
Link 1
|
|
47
|
+
</a>
|
|
48
|
+
</li>
|
|
49
|
+
<li
|
|
50
|
+
class="pkt-footer__list-item"
|
|
51
|
+
>
|
|
52
|
+
<a
|
|
53
|
+
class="pkt-footer__link "
|
|
54
|
+
href="https://example.com"
|
|
55
|
+
>
|
|
56
|
+
<svg
|
|
57
|
+
class="pkt-footer__link-icon"
|
|
58
|
+
viewBox="0 0 32 32"
|
|
59
|
+
>
|
|
60
|
+
<use
|
|
61
|
+
href="#chevron-right"
|
|
62
|
+
/>
|
|
63
|
+
</svg>
|
|
64
|
+
Link 2
|
|
65
|
+
</a>
|
|
66
|
+
</li>
|
|
67
|
+
</ul>
|
|
68
|
+
</div>
|
|
69
|
+
<div
|
|
70
|
+
class="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up"
|
|
71
|
+
>
|
|
72
|
+
<h2
|
|
73
|
+
class="pkt-footer__title"
|
|
74
|
+
>
|
|
75
|
+
Column Two
|
|
76
|
+
</h2>
|
|
77
|
+
<ul
|
|
78
|
+
class="pkt-footer__list"
|
|
79
|
+
>
|
|
80
|
+
<li
|
|
81
|
+
class="pkt-footer__text"
|
|
82
|
+
>
|
|
83
|
+
Column Two Text
|
|
84
|
+
</li>
|
|
85
|
+
<li
|
|
86
|
+
class="pkt-footer__list-item"
|
|
87
|
+
>
|
|
88
|
+
<a
|
|
89
|
+
class="pkt-footer__link pkt-link--external"
|
|
90
|
+
href="https://example.com"
|
|
91
|
+
>
|
|
92
|
+
<svg
|
|
93
|
+
class="pkt-footer__link-icon"
|
|
94
|
+
viewBox="0 0 32 32"
|
|
95
|
+
>
|
|
96
|
+
<use
|
|
97
|
+
href="#chevron-right"
|
|
98
|
+
/>
|
|
99
|
+
</svg>
|
|
100
|
+
Link 3
|
|
101
|
+
</a>
|
|
102
|
+
</li>
|
|
103
|
+
<li
|
|
104
|
+
class="pkt-footer__list-item"
|
|
105
|
+
>
|
|
106
|
+
<a
|
|
107
|
+
class="pkt-footer__link "
|
|
108
|
+
href="https://example.com"
|
|
109
|
+
>
|
|
110
|
+
<svg
|
|
111
|
+
class="pkt-footer__link-icon"
|
|
112
|
+
viewBox="0 0 32 32"
|
|
113
|
+
>
|
|
114
|
+
<use
|
|
115
|
+
href="#chevron-right"
|
|
116
|
+
/>
|
|
117
|
+
</svg>
|
|
118
|
+
Link 4
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
</ul>
|
|
122
|
+
</div>
|
|
123
|
+
<div
|
|
124
|
+
class="pkt-footer__column pkt-cell pkt-cell--span12 pkt-cell--span4-laptop-up"
|
|
125
|
+
>
|
|
126
|
+
<h2
|
|
127
|
+
class="pkt-footer__title"
|
|
128
|
+
>
|
|
129
|
+
Om nettstedet
|
|
130
|
+
</h2>
|
|
131
|
+
<ul
|
|
132
|
+
class="pkt-footer__list"
|
|
133
|
+
>
|
|
134
|
+
<li
|
|
135
|
+
class="pkt-footer__list-item"
|
|
136
|
+
>
|
|
137
|
+
<a
|
|
138
|
+
class="pkt-footer__link"
|
|
139
|
+
href="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
|
|
140
|
+
>
|
|
141
|
+
<svg
|
|
142
|
+
class="pkt-footer__link-icon"
|
|
143
|
+
viewBox="0 0 32 32"
|
|
144
|
+
>
|
|
145
|
+
<use
|
|
146
|
+
href="#chevron-right"
|
|
147
|
+
/>
|
|
148
|
+
</svg>
|
|
149
|
+
Personvern og informasjonskapsler
|
|
150
|
+
</a>
|
|
151
|
+
</li>
|
|
152
|
+
<li
|
|
153
|
+
class="pkt-footer__list-item"
|
|
154
|
+
>
|
|
155
|
+
<a
|
|
156
|
+
class="pkt-footer__link"
|
|
157
|
+
href="https://www.oslo.kommune.no/tilgjengelighet/"
|
|
158
|
+
>
|
|
159
|
+
<svg
|
|
160
|
+
class="pkt-footer__link-icon"
|
|
161
|
+
viewBox="0 0 32 32"
|
|
162
|
+
>
|
|
163
|
+
<use
|
|
164
|
+
href="#chevron-right"
|
|
165
|
+
/>
|
|
166
|
+
</svg>
|
|
167
|
+
Tilgjengelighet
|
|
168
|
+
</a>
|
|
169
|
+
</li>
|
|
170
|
+
</ul>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div
|
|
174
|
+
aria-label="standard lenker"
|
|
175
|
+
class="pkt-footer__social"
|
|
176
|
+
>
|
|
177
|
+
<div
|
|
178
|
+
class="pkt-footer__social-languages"
|
|
179
|
+
/>
|
|
180
|
+
<div
|
|
181
|
+
class="pkt-footer__social-icons"
|
|
182
|
+
>
|
|
183
|
+
<a
|
|
184
|
+
aria-label="til facebook"
|
|
185
|
+
class="pkt-footer__social-icon-link"
|
|
186
|
+
href="https://example.com"
|
|
187
|
+
>
|
|
188
|
+
<svg
|
|
189
|
+
aria-hidden="true"
|
|
190
|
+
class="pkt-footer__social-icon"
|
|
191
|
+
viewBox="0 0 32 32"
|
|
192
|
+
>
|
|
193
|
+
<use
|
|
194
|
+
href="#facebook"
|
|
195
|
+
/>
|
|
196
|
+
</svg>
|
|
197
|
+
</a>
|
|
198
|
+
<a
|
|
199
|
+
aria-label="til twitter"
|
|
200
|
+
class="pkt-footer__social-icon-link"
|
|
201
|
+
href="https://example.com"
|
|
202
|
+
>
|
|
203
|
+
<svg
|
|
204
|
+
aria-hidden="true"
|
|
205
|
+
class="pkt-footer__social-icon"
|
|
206
|
+
viewBox="0 0 32 32"
|
|
207
|
+
>
|
|
208
|
+
<use
|
|
209
|
+
href="#twitter"
|
|
210
|
+
/>
|
|
211
|
+
</svg>
|
|
212
|
+
</a>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</footer>
|
|
217
|
+
</div>
|
|
218
|
+
`;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
// Test med axe https://www.npmjs.com/package/jest-axe
|
|
2
|
+
import * as React from 'react'
|
|
3
|
+
import { render } from '@testing-library/react'
|
|
4
|
+
import '@testing-library/jest-dom/extend-expect';
|
|
5
|
+
|
|
6
|
+
import { PktFooterSimple } from './FooterSimple'
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
const { axe, toHaveNoViolations } = require('jest-axe')
|
|
10
|
+
expect.extend(toHaveNoViolations)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
describe('PktFooterSimple', () => {
|
|
15
|
+
|
|
16
|
+
const links = [
|
|
17
|
+
{ href: 'https://www.example.com', text: 'Example Link 1' },
|
|
18
|
+
{ href: 'https://www.example.com', text: 'Example Link 2' },
|
|
19
|
+
{ href: 'https://www.example.com', text: 'Example Link 3' },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
describe('basic rendering', () => {
|
|
23
|
+
it('renders a list of links', () => {
|
|
24
|
+
const { getByText } = render(<PktFooterSimple links={links} />);
|
|
25
|
+
links.forEach((link) => {
|
|
26
|
+
expect(getByText(link.text)).toBeInTheDocument();
|
|
27
|
+
expect(getByText(link.text).getAttribute('href')).toEqual(link.href);
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renders an external link with an external class', () => {
|
|
32
|
+
const links = [
|
|
33
|
+
{ href: 'https://www.example.com', text: 'Example Link', external: true },
|
|
34
|
+
];
|
|
35
|
+
const { getByText } = render(<PktFooterSimple links={links} />);
|
|
36
|
+
expect(getByText(links[0].text)).toHaveClass('pkt-link--external');
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it('renders a privacy link', () => {
|
|
40
|
+
const { getByText } = render(<PktFooterSimple />);
|
|
41
|
+
expect(getByText('Personvern og informasjonskapsler')).toBeInTheDocument();
|
|
42
|
+
expect(getByText('Personvern og informasjonskapsler').getAttribute('href')).toEqual('https://www.oslo.kommune.no/personvern-og-informasjonskapsler/');
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('renders an accessibility link', () => {
|
|
46
|
+
const { getByText } = render(<PktFooterSimple />);
|
|
47
|
+
expect(getByText('Tilgjengelighet')).toBeInTheDocument();
|
|
48
|
+
expect(getByText('Tilgjengelighet').getAttribute('href')).toEqual('https://www.oslo.kommune.no/tilgjengelighet/');
|
|
49
|
+
});
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
describe('accessibility', () => {
|
|
53
|
+
it('renders with no wcag errors with axe', async () => {
|
|
54
|
+
const { container } = render(<PktFooterSimple links={links} />);
|
|
55
|
+
const results = await axe(container);
|
|
56
|
+
expect(results).toHaveNoViolations();
|
|
57
|
+
})
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
describe('snapshot', () => {
|
|
61
|
+
it('renders correctly', () => {
|
|
62
|
+
const { container } = render(<PktFooterSimple links={links} />);
|
|
63
|
+
expect(container).toMatchSnapshot();
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PktIcon } from '../icon/Icon';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
links?: Array<{
|
|
7
|
+
href: string;
|
|
8
|
+
text: string;
|
|
9
|
+
external?: boolean;
|
|
10
|
+
}>;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
|
|
14
|
+
links = [],
|
|
15
|
+
}) => {
|
|
16
|
+
return (
|
|
17
|
+
<footer className="pkt-footer-simple" data-mode="dark">
|
|
18
|
+
<div className="pkt-footer-simple__container">
|
|
19
|
+
<ul className="pkt-footer-simple__list">
|
|
20
|
+
{links.map((link, index) => (
|
|
21
|
+
<li className="pkt-footer-simple__list-item" key={index}>
|
|
22
|
+
<a
|
|
23
|
+
className={`pkt-footer-simple__link ${link.external ? ' pkt-link--external' : ''}`}
|
|
24
|
+
href={link.href}
|
|
25
|
+
>
|
|
26
|
+
<PktIcon
|
|
27
|
+
className="pkt-footer-simple__link-icon"
|
|
28
|
+
name="chevron-right"
|
|
29
|
+
/>
|
|
30
|
+
{link.text}
|
|
31
|
+
</a>
|
|
32
|
+
</li>
|
|
33
|
+
))}
|
|
34
|
+
<li className="pkt-footer-simple__list-item">
|
|
35
|
+
<a className="pkt-footer-simple__link" href="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/">
|
|
36
|
+
<PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
|
|
37
|
+
Personvern og informasjonskapsler
|
|
38
|
+
</a>
|
|
39
|
+
</li>
|
|
40
|
+
<li className="pkt-footer-simple__list-item">
|
|
41
|
+
<a className="pkt-footer-simple__link" href="https://www.oslo.kommune.no/tilgjengelighet/">
|
|
42
|
+
<PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
|
|
43
|
+
Tilgjengelighet
|
|
44
|
+
</a>
|
|
45
|
+
</li>
|
|
46
|
+
</ul>
|
|
47
|
+
</div>
|
|
48
|
+
</footer>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`PktFooterSimple snapshot renders correctly 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
|
+
>
|
|
22
|
+
<svg
|
|
23
|
+
class="pkt-footer-simple__link-icon"
|
|
24
|
+
viewBox="0 0 32 32"
|
|
25
|
+
>
|
|
26
|
+
<use
|
|
27
|
+
href="#chevron-right"
|
|
28
|
+
/>
|
|
29
|
+
</svg>
|
|
30
|
+
Example Link 1
|
|
31
|
+
</a>
|
|
32
|
+
</li>
|
|
33
|
+
<li
|
|
34
|
+
class="pkt-footer-simple__list-item"
|
|
35
|
+
>
|
|
36
|
+
<a
|
|
37
|
+
class="pkt-footer-simple__link "
|
|
38
|
+
href="https://www.example.com"
|
|
39
|
+
>
|
|
40
|
+
<svg
|
|
41
|
+
class="pkt-footer-simple__link-icon"
|
|
42
|
+
viewBox="0 0 32 32"
|
|
43
|
+
>
|
|
44
|
+
<use
|
|
45
|
+
href="#chevron-right"
|
|
46
|
+
/>
|
|
47
|
+
</svg>
|
|
48
|
+
Example Link 2
|
|
49
|
+
</a>
|
|
50
|
+
</li>
|
|
51
|
+
<li
|
|
52
|
+
class="pkt-footer-simple__list-item"
|
|
53
|
+
>
|
|
54
|
+
<a
|
|
55
|
+
class="pkt-footer-simple__link "
|
|
56
|
+
href="https://www.example.com"
|
|
57
|
+
>
|
|
58
|
+
<svg
|
|
59
|
+
class="pkt-footer-simple__link-icon"
|
|
60
|
+
viewBox="0 0 32 32"
|
|
61
|
+
>
|
|
62
|
+
<use
|
|
63
|
+
href="#chevron-right"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
Example Link 3
|
|
67
|
+
</a>
|
|
68
|
+
</li>
|
|
69
|
+
<li
|
|
70
|
+
class="pkt-footer-simple__list-item"
|
|
71
|
+
>
|
|
72
|
+
<a
|
|
73
|
+
class="pkt-footer-simple__link"
|
|
74
|
+
href="https://www.oslo.kommune.no/personvern-og-informasjonskapsler/"
|
|
75
|
+
>
|
|
76
|
+
<svg
|
|
77
|
+
class="pkt-footer-simple__link-icon"
|
|
78
|
+
viewBox="0 0 32 32"
|
|
79
|
+
>
|
|
80
|
+
<use
|
|
81
|
+
href="#chevron-right"
|
|
82
|
+
/>
|
|
83
|
+
</svg>
|
|
84
|
+
Personvern og informasjonskapsler
|
|
85
|
+
</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li
|
|
88
|
+
class="pkt-footer-simple__list-item"
|
|
89
|
+
>
|
|
90
|
+
<a
|
|
91
|
+
class="pkt-footer-simple__link"
|
|
92
|
+
href="https://www.oslo.kommune.no/tilgjengelighet/"
|
|
93
|
+
>
|
|
94
|
+
<svg
|
|
95
|
+
class="pkt-footer-simple__link-icon"
|
|
96
|
+
viewBox="0 0 32 32"
|
|
97
|
+
>
|
|
98
|
+
<use
|
|
99
|
+
href="#chevron-right"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
102
|
+
Tilgjengelighet
|
|
103
|
+
</a>
|
|
104
|
+
</li>
|
|
105
|
+
</ul>
|
|
106
|
+
</div>
|
|
107
|
+
</footer>
|
|
108
|
+
</div>
|
|
109
|
+
`;
|
package/src/components/index.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { PktAlert } from './alert/Alert'
|
|
2
2
|
export { PktButton } from './button/Button'
|
|
3
|
+
export { PktFooterSimple} from './footerSimple/FooterSimple'
|
|
4
|
+
export { PktFooter} from './footer/Footer'
|
|
3
5
|
export { PktHeader } from './header/Header'
|
|
4
6
|
export { PktInput } from './input/Input'
|
|
5
7
|
export { PktLinkCard } from './linkcard/LinkCard'
|