@aarhus-university/au-lib-react-components 10.16.0 → 10.17.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.
Files changed (20) hide show
  1. package/__tests__/jest/AUErrorComponent.test.tsx +142 -142
  2. package/__tests__/jest/AUNotificationComponent.test.tsx +115 -115
  3. package/__tests__/jest/context.test.ts +25 -25
  4. package/build/umd/all.css +2 -2
  5. package/build/umd/all.js +1 -1
  6. package/build/umd/alphabox.js +1 -1
  7. package/build/umd/databox.js +1 -1
  8. package/build/umd/diagramme.js +1 -1
  9. package/build/umd/flowbox.js +1 -1
  10. package/build/umd/universe.js +1 -1
  11. package/build-storybook.log +367 -0
  12. package/package.json +6 -3
  13. package/src/components/AUErrorComponent.tsx +78 -78
  14. package/src/components/AUNotificationComponent.tsx +43 -43
  15. package/src/lib/context.tsx +43 -41
  16. package/src/lib/dates.ts +50 -50
  17. package/src/lib/hooks.ts +18 -1
  18. package/src/lib/portals.ts +37 -37
  19. package/stories/lib/helpers.tsx +57 -57
  20. package/tsconfig.json +1 -1
package/__tests__/jest/AUErrorComponent.test.tsx CHANGED
@@ -1,142 +1,142 @@
1
- /* eslint-disable @typescript-eslint/no-explicit-any */
2
- import React from 'react';
3
- import { render } from '@testing-library/react';
4
- import { SerializedError } from '@reduxjs/toolkit';
5
- import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
6
- // import userEvent from '@testing-library/user-event';
7
- import '@testing-library/jest-dom';
8
- import AUErrorComponent from '../../src/components/AUErrorComponent';
9
-
10
- const auError: AU.IError = {
11
- header: 'Our own custom error',
12
- message: 'With a nice header and descriptive error message',
13
- status: 500,
14
- };
15
-
16
- const fetchError1: FetchBaseQueryError = {
17
- status: 'FETCH_ERROR',
18
- error: 'Sum Ting Wong',
19
- };
20
-
21
- const fetchError2: FetchBaseQueryError = {
22
- status: 500,
23
- data: {
24
- status: 'Error',
25
- message: 'Sum Ting Wong',
26
- },
27
- };
28
-
29
- const serializedError: SerializedError = {
30
- code: '500',
31
- message: 'Sum Ting Wong',
32
- name: 'Some kind of error',
33
- stack: 'Some kind of stack trace',
34
- };
35
-
36
- describe('<AUErrorComponent />', () => {
37
- it('renders an AU custom error without a status code', () => {
38
- const { container } = render(
39
- <AUErrorComponent
40
- error={auError}
41
- />,
42
- );
43
-
44
- const header = container.querySelector('.notification__header');
45
- const p = container.querySelector('.notification__content p');
46
- expect(header).toBeInTheDocument();
47
- expect(p?.innerHTML).toBe(auError.message);
48
- });
49
-
50
- it('renders an AU custom error with a status code', () => {
51
- const { container } = render(
52
- <AUErrorComponent
53
- error={auError}
54
- withStatus
55
- />,
56
- );
57
-
58
- const header = container.querySelector('.notification__header');
59
- expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
60
- });
61
-
62
- it('renders a fetch error without a status code', () => {
63
- const { container } = render(
64
- <AUErrorComponent
65
- fetchError={fetchError1}
66
- />,
67
- );
68
-
69
- const header = container.querySelector('.notification__header');
70
- const p = container.querySelector('.notification__content p');
71
- expect(header).toBe(null);
72
- expect(p?.innerHTML).toBe(fetchError1.error);
73
- });
74
-
75
- it('renders a fetch error with a status code', () => {
76
- const { container } = render(
77
- <AUErrorComponent
78
- fetchError={fetchError1}
79
- withStatus
80
- />,
81
- );
82
-
83
- const header = container.querySelector('.notification__header');
84
- const p = container.querySelector('.notification__content p');
85
- expect(header?.innerHTML).toBe(fetchError1.status);
86
- expect(p?.innerHTML).toBe(fetchError1.error);
87
- });
88
-
89
- it('renders a fetch error with stringified text without a status code', () => {
90
- const { container } = render(
91
- <AUErrorComponent
92
- fetchError={fetchError2}
93
- />,
94
- );
95
-
96
- const header = container.querySelector('.notification__header');
97
- const p = container.querySelector('.notification__content p');
98
- expect(header).toBe(null);
99
- expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
100
- });
101
-
102
- it('renders a fetch error with stringified text with a status code', () => {
103
- const { container } = render(
104
- <AUErrorComponent
105
- fetchError={fetchError2}
106
- withStatus
107
- />,
108
- );
109
-
110
- const header = container.querySelector('.notification__header');
111
- const p = container.querySelector('.notification__content p');
112
- expect(header?.innerHTML).toBe(`${fetchError2.status}`);
113
- expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
114
- });
115
-
116
- it('renders a serialized error with without a status code', () => {
117
- const { container } = render(
118
- <AUErrorComponent
119
- serializedError={serializedError}
120
- />,
121
- );
122
-
123
- const header = container.querySelector('.notification__header');
124
- const p = container.querySelector('.notification__content p');
125
- expect(header).toBe(null);
126
- expect(p?.innerHTML).toBe(serializedError.message);
127
- });
128
-
129
- it('renders a serialized error with a status code', () => {
130
- const { container } = render(
131
- <AUErrorComponent
132
- serializedError={serializedError}
133
- withStatus
134
- />,
135
- );
136
-
137
- const header = container.querySelector('.notification__header');
138
- const p = container.querySelector('.notification__content p');
139
- expect(header?.innerHTML).toBe(serializedError.code);
140
- expect(p?.innerHTML).toBe(serializedError.message);
141
- });
142
- });
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ import React from 'react';
3
+ import { render } from '@testing-library/react';
4
+ import { SerializedError } from '@reduxjs/toolkit';
5
+ import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
6
+ // import userEvent from '@testing-library/user-event';
7
+ import '@testing-library/jest-dom';
8
+ import AUErrorComponent from '../../src/components/AUErrorComponent';
9
+
10
+ const auError: AU.IError = {
11
+ header: 'Our own custom error',
12
+ message: 'With a nice header and descriptive error message',
13
+ status: 500,
14
+ };
15
+
16
+ const fetchError1: FetchBaseQueryError = {
17
+ status: 'FETCH_ERROR',
18
+ error: 'Sum Ting Wong',
19
+ };
20
+
21
+ const fetchError2: FetchBaseQueryError = {
22
+ status: 500,
23
+ data: {
24
+ status: 'Error',
25
+ message: 'Sum Ting Wong',
26
+ },
27
+ };
28
+
29
+ const serializedError: SerializedError = {
30
+ code: '500',
31
+ message: 'Sum Ting Wong',
32
+ name: 'Some kind of error',
33
+ stack: 'Some kind of stack trace',
34
+ };
35
+
36
+ describe('<AUErrorComponent />', () => {
37
+ it('renders an AU custom error without a status code', () => {
38
+ const { container } = render(
39
+ <AUErrorComponent
40
+ error={auError}
41
+ />,
42
+ );
43
+
44
+ const header = container.querySelector('.notification__header');
45
+ const p = container.querySelector('.notification__content p');
46
+ expect(header).toBeInTheDocument();
47
+ expect(p?.innerHTML).toBe(auError.message);
48
+ });
49
+
50
+ it('renders an AU custom error with a status code', () => {
51
+ const { container } = render(
52
+ <AUErrorComponent
53
+ error={auError}
54
+ withStatus
55
+ />,
56
+ );
57
+
58
+ const header = container.querySelector('.notification__header');
59
+ expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
60
+ });
61
+
62
+ it('renders a fetch error without a status code', () => {
63
+ const { container } = render(
64
+ <AUErrorComponent
65
+ fetchError={fetchError1}
66
+ />,
67
+ );
68
+
69
+ const header = container.querySelector('.notification__header');
70
+ const p = container.querySelector('.notification__content p');
71
+ expect(header).toBe(null);
72
+ expect(p?.innerHTML).toBe(fetchError1.error);
73
+ });
74
+
75
+ it('renders a fetch error with a status code', () => {
76
+ const { container } = render(
77
+ <AUErrorComponent
78
+ fetchError={fetchError1}
79
+ withStatus
80
+ />,
81
+ );
82
+
83
+ const header = container.querySelector('.notification__header');
84
+ const p = container.querySelector('.notification__content p');
85
+ expect(header?.innerHTML).toBe(fetchError1.status);
86
+ expect(p?.innerHTML).toBe(fetchError1.error);
87
+ });
88
+
89
+ it('renders a fetch error with stringified text without a status code', () => {
90
+ const { container } = render(
91
+ <AUErrorComponent
92
+ fetchError={fetchError2}
93
+ />,
94
+ );
95
+
96
+ const header = container.querySelector('.notification__header');
97
+ const p = container.querySelector('.notification__content p');
98
+ expect(header).toBe(null);
99
+ expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
100
+ });
101
+
102
+ it('renders a fetch error with stringified text with a status code', () => {
103
+ const { container } = render(
104
+ <AUErrorComponent
105
+ fetchError={fetchError2}
106
+ withStatus
107
+ />,
108
+ );
109
+
110
+ const header = container.querySelector('.notification__header');
111
+ const p = container.querySelector('.notification__content p');
112
+ expect(header?.innerHTML).toBe(`${fetchError2.status}`);
113
+ expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
114
+ });
115
+
116
+ it('renders a serialized error with without a status code', () => {
117
+ const { container } = render(
118
+ <AUErrorComponent
119
+ serializedError={serializedError}
120
+ />,
121
+ );
122
+
123
+ const header = container.querySelector('.notification__header');
124
+ const p = container.querySelector('.notification__content p');
125
+ expect(header).toBe(null);
126
+ expect(p?.innerHTML).toBe(serializedError.message);
127
+ });
128
+
129
+ it('renders a serialized error with a status code', () => {
130
+ const { container } = render(
131
+ <AUErrorComponent
132
+ serializedError={serializedError}
133
+ withStatus
134
+ />,
135
+ );
136
+
137
+ const header = container.querySelector('.notification__header');
138
+ const p = container.querySelector('.notification__content p');
139
+ expect(header?.innerHTML).toBe(serializedError.code);
140
+ expect(p?.innerHTML).toBe(serializedError.message);
141
+ });
142
+ });
package/__tests__/jest/AUNotificationComponent.test.tsx CHANGED
@@ -1,115 +1,115 @@
1
- /* eslint-disable @typescript-eslint/no-explicit-any */
2
- import React from 'react';
3
- import { render } from '@testing-library/react';
4
- // import userEvent from '@testing-library/user-event';
5
- import '@testing-library/jest-dom';
6
- import AUNotificationComponent from '../../src/components/AUNotificationComponent';
7
- import AUButtonComponent from '../../src/components/AUButtonComponent';
8
-
9
- describe('<AUNotificationComponent />', () => {
10
- it('renders a notification without a header but with a paragraph', () => {
11
- const { container } = render(
12
- <AUNotificationComponent
13
- content={[
14
- <p>This is a notification</p>,
15
- ]}
16
- />,
17
- );
18
-
19
- expect(container).toBeInTheDocument();
20
- const header = container.querySelector('.notification__header');
21
- const p = container.querySelector('p');
22
- expect(header).toBe(null);
23
- expect(p?.innerHTML).toBe('This is a notification');
24
- });
25
-
26
- it('renders a notification with a header and three paragraphs', () => {
27
- const { container } = render(
28
- <AUNotificationComponent
29
- header="This is a header"
30
- content={[
31
- <p>This is a notification</p>,
32
- <p>With multiple paragraphs</p>,
33
- <p>Awesome sauce</p>,
34
- ]}
35
- />,
36
- );
37
-
38
- expect(container).toBeInTheDocument();
39
- const header = container.querySelector('.notification__header');
40
- const p = container.querySelectorAll('p');
41
- expect(header?.innerHTML).toBe('This is a header');
42
- expect(p.length).toBe(3);
43
- });
44
-
45
- it('renders a notification with an action', () => {
46
- const { container } = render(
47
- <AUNotificationComponent
48
- header="This is a header"
49
- content={[
50
- <p>This is a notification</p>,
51
- ]}
52
- actions={[
53
- <AUButtonComponent label="Action button" />,
54
- ]}
55
- />,
56
- );
57
-
58
- const actions = container.querySelector('.notification__actions');
59
- expect(actions).toBeInTheDocument();
60
- });
61
-
62
- it('renders a warning notification', () => {
63
- const { container } = render(
64
- <AUNotificationComponent
65
- type="warning"
66
- header="This is a header"
67
- content={[
68
- <p>This is a notification</p>,
69
- ]}
70
- actions={[
71
- <AUButtonComponent label="Action button" />,
72
- ]}
73
- />,
74
- );
75
-
76
- const actions = container.querySelector('.notification--warning');
77
- expect(actions).toBeInTheDocument();
78
- });
79
-
80
- it('renders a attention notification', () => {
81
- const { container } = render(
82
- <AUNotificationComponent
83
- type="attention"
84
- header="This is a header"
85
- content={[
86
- <p>This is a notification</p>,
87
- ]}
88
- actions={[
89
- <AUButtonComponent label="Action button" />,
90
- ]}
91
- />,
92
- );
93
-
94
- const actions = container.querySelector('.notification--attention');
95
- expect(actions).toBeInTheDocument();
96
- });
97
-
98
- it('renders a confirm notification', () => {
99
- const { container } = render(
100
- <AUNotificationComponent
101
- type="confirm"
102
- header="This is a header"
103
- content={[
104
- <p>This is a notification</p>,
105
- ]}
106
- actions={[
107
- <AUButtonComponent label="Action button" />,
108
- ]}
109
- />,
110
- );
111
-
112
- const actions = container.querySelector('.notification--confirm');
113
- expect(actions).toBeInTheDocument();
114
- });
115
- });
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ import React from 'react';
3
+ import { render } from '@testing-library/react';
4
+ // import userEvent from '@testing-library/user-event';
5
+ import '@testing-library/jest-dom';
6
+ import AUNotificationComponent from '../../src/components/AUNotificationComponent';
7
+ import AUButtonComponent from '../../src/components/AUButtonComponent';
8
+
9
+ describe('<AUNotificationComponent />', () => {
10
+ it('renders a notification without a header but with a paragraph', () => {
11
+ const { container } = render(
12
+ <AUNotificationComponent
13
+ content={[
14
+ <p>This is a notification</p>,
15
+ ]}
16
+ />,
17
+ );
18
+
19
+ expect(container).toBeInTheDocument();
20
+ const header = container.querySelector('.notification__header');
21
+ const p = container.querySelector('p');
22
+ expect(header).toBe(null);
23
+ expect(p?.innerHTML).toBe('This is a notification');
24
+ });
25
+
26
+ it('renders a notification with a header and three paragraphs', () => {
27
+ const { container } = render(
28
+ <AUNotificationComponent
29
+ header="This is a header"
30
+ content={[
31
+ <p>This is a notification</p>,
32
+ <p>With multiple paragraphs</p>,
33
+ <p>Awesome sauce</p>,
34
+ ]}
35
+ />,
36
+ );
37
+
38
+ expect(container).toBeInTheDocument();
39
+ const header = container.querySelector('.notification__header');
40
+ const p = container.querySelectorAll('p');
41
+ expect(header?.innerHTML).toBe('This is a header');
42
+ expect(p.length).toBe(3);
43
+ });
44
+
45
+ it('renders a notification with an action', () => {
46
+ const { container } = render(
47
+ <AUNotificationComponent
48
+ header="This is a header"
49
+ content={[
50
+ <p>This is a notification</p>,
51
+ ]}
52
+ actions={[
53
+ <AUButtonComponent label="Action button" />,
54
+ ]}
55
+ />,
56
+ );
57
+
58
+ const actions = container.querySelector('.notification__actions');
59
+ expect(actions).toBeInTheDocument();
60
+ });
61
+
62
+ it('renders a warning notification', () => {
63
+ const { container } = render(
64
+ <AUNotificationComponent
65
+ type="warning"
66
+ header="This is a header"
67
+ content={[
68
+ <p>This is a notification</p>,
69
+ ]}
70
+ actions={[
71
+ <AUButtonComponent label="Action button" />,
72
+ ]}
73
+ />,
74
+ );
75
+
76
+ const actions = container.querySelector('.notification--warning');
77
+ expect(actions).toBeInTheDocument();
78
+ });
79
+
80
+ it('renders a attention notification', () => {
81
+ const { container } = render(
82
+ <AUNotificationComponent
83
+ type="attention"
84
+ header="This is a header"
85
+ content={[
86
+ <p>This is a notification</p>,
87
+ ]}
88
+ actions={[
89
+ <AUButtonComponent label="Action button" />,
90
+ ]}
91
+ />,
92
+ );
93
+
94
+ const actions = container.querySelector('.notification--attention');
95
+ expect(actions).toBeInTheDocument();
96
+ });
97
+
98
+ it('renders a confirm notification', () => {
99
+ const { container } = render(
100
+ <AUNotificationComponent
101
+ type="confirm"
102
+ header="This is a header"
103
+ content={[
104
+ <p>This is a notification</p>,
105
+ ]}
106
+ actions={[
107
+ <AUButtonComponent label="Action button" />,
108
+ ]}
109
+ />,
110
+ );
111
+
112
+ const actions = container.querySelector('.notification--confirm');
113
+ expect(actions).toBeInTheDocument();
114
+ });
115
+ });
package/__tests__/jest/context.test.ts CHANGED
@@ -1,25 +1,25 @@
1
- import { getPortalByName } from '../../src/lib/portals';
2
-
3
- describe('Context', () => {
4
- test('Mitstudie findes som portal', () => {
5
- const portal = getPortalByName('da', 'mitstudie');
6
- expect(portal?.name).toBe('mitstudie');
7
- });
8
-
9
- test('Mitstudie portalcontexten indeholder én impersonation option', () => {
10
- const portal = getPortalByName('da', 'mitstudie');
11
- expect(portal?.impersonationOptions.length).toBe(1);
12
- });
13
-
14
- test('Mitstudie portalcontextens ene impersonation option hedder "AU-id" på dansk og "AU ID" på engelsk', () => {
15
- const danish = getPortalByName('da', 'mitstudie');
16
- expect(danish?.impersonationOptions[0].label).toBe('AU-id');
17
- const english = getPortalByName('en', 'mitstudie');
18
- expect(english?.impersonationOptions[0].label).toBe('AU ID');
19
- });
20
-
21
- test('Portalcontexten "sfgsdfsdfsdf" findes ikke', () => {
22
- const portal = getPortalByName('da', 'sfgsdfsdfsdf');
23
- expect(portal).toBe(null);
24
- });
25
- });
1
+ import { getPortalByName } from '../../src/lib/portals';
2
+
3
+ describe('Context', () => {
4
+ test('Mitstudie findes som portal', () => {
5
+ const portal = getPortalByName('da', 'mitstudie');
6
+ expect(portal?.name).toBe('mitstudie');
7
+ });
8
+
9
+ test('Mitstudie portalcontexten indeholder én impersonation option', () => {
10
+ const portal = getPortalByName('da', 'mitstudie');
11
+ expect(portal?.impersonationOptions.length).toBe(1);
12
+ });
13
+
14
+ test('Mitstudie portalcontextens ene impersonation option hedder "AU-id" på dansk og "AU ID" på engelsk', () => {
15
+ const danish = getPortalByName('da', 'mitstudie');
16
+ expect(danish?.impersonationOptions[0].label).toBe('AU-id');
17
+ const english = getPortalByName('en', 'mitstudie');
18
+ expect(english?.impersonationOptions[0].label).toBe('AU ID');
19
+ });
20
+
21
+ test('Portalcontexten "sfgsdfsdfsdf" findes ikke', () => {
22
+ const portal = getPortalByName('da', 'sfgsdfsdfsdf');
23
+ expect(portal).toBe(null);
24
+ });
25
+ });