@aarhus-university/au-lib-react-components 10.5.0 → 10.6.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.
Files changed (94) hide show
  1. package/.eslintrc.js +34 -33
  2. package/.storybook/main.js +7 -7
  3. package/.storybook/preview.js +10 -10
  4. package/README.md +19 -19
  5. package/__tests__/jest/AUButtonComponent.test.tsx +163 -163
  6. package/__tests__/jest/AUSpinnerComponent.test.tsx +57 -0
  7. package/__tests__/jest/helpers.test.ts +15 -15
  8. package/__tests__/jest/setupTests.ts +2 -2
  9. package/babel.config.js +8 -8
  10. package/build/umd/all.css +2 -2
  11. package/build/umd/all.js +1 -1
  12. package/build/umd/alphabox.js +1 -1
  13. package/build/umd/databox.js +1 -1
  14. package/build/umd/databox.js.map +1 -1
  15. package/build/umd/diagramme.js +1 -1
  16. package/build/umd/flowbox.js +1 -1
  17. package/build/umd/universe.js +1 -1
  18. package/package.json +107 -107
  19. package/src/components/AUAlertComponent.tsx +70 -70
  20. package/src/components/AUAutoSuggestComponent.js +158 -158
  21. package/src/components/AUButtonComponent.tsx +77 -77
  22. package/src/components/AUCalendarComponent.tsx +493 -493
  23. package/src/components/AUContentToggleComponent.tsx +33 -33
  24. package/src/components/AUDatepickerComponent.tsx +117 -117
  25. package/src/components/AUMobilePrefixComponent.tsx +15 -15
  26. package/src/components/AUModalComponent.tsx +80 -80
  27. package/src/components/AUReceiptComponent.tsx +33 -33
  28. package/src/components/AUSpinnerComponent.tsx +33 -91
  29. package/src/components/AUSubNavComponent.tsx +48 -48
  30. package/src/components/AUSubmitButtonContainerComponent.tsx +31 -31
  31. package/src/components/AUTabbedContentComponent.tsx +145 -145
  32. package/src/components/AUTableComponent.tsx +24 -24
  33. package/src/components/AUToastComponent.tsx +103 -103
  34. package/src/components/AUToolbarComponent.tsx +45 -45
  35. package/src/components/profile/AUProfileActions.js +128 -128
  36. package/src/components/profile/AUProfileAvatarComponent.js +83 -83
  37. package/src/components/profile/AUProfileAvatarV2Component.js +91 -91
  38. package/src/components/profile/AUProfileAvatarV3Component.tsx +42 -42
  39. package/src/components/profile/AUProfileContainerComponent.js +283 -283
  40. package/src/components/profile/AUProfileHooks.js +30 -30
  41. package/src/components/profile/AUProfileItemComponent.js +54 -54
  42. package/src/components/profile/AUProfileLanguageComponent.js +131 -131
  43. package/src/components/profile/AUProfileLoginComponent.tsx +26 -26
  44. package/src/components/profile/AUProfileMailComponent.js +307 -307
  45. package/src/components/profile/AUProfileMobileComponent.js +164 -164
  46. package/src/components/profile/AUProfileNameComponent.js +253 -253
  47. package/src/components/profile/AUProfileNextOfKinComponent.js +216 -216
  48. package/src/components/profile/AUProfileReducer.js +230 -230
  49. package/src/components/profile/AUProfileWidgetComponent.js +95 -95
  50. package/src/components/profile/AUProfileWidgetV2Component.js +116 -116
  51. package/src/components/profile/AUProfileWidgetV3Component.tsx +122 -122
  52. package/src/components/wrapping/AUEmbedComponent.js +47 -47
  53. package/src/layout-2016/components/alphabox/AlphaBoxComponent.js +143 -143
  54. package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js +136 -136
  55. package/src/layout-2016/components/common/AUCollapsibleComponent.js +152 -152
  56. package/src/layout-2016/components/common/AUSpinnerComponent.js +103 -103
  57. package/src/layout-2016/components/databox/DataBoxAlphabetComponent.js +144 -144
  58. package/src/layout-2016/components/databox/DataBoxAssociationComponent.js +122 -122
  59. package/src/layout-2016/components/databox/DataBoxButtonComponent.js +157 -157
  60. package/src/layout-2016/components/databox/DataBoxComponent.js +297 -297
  61. package/src/layout-2016/components/databox/DataBoxGroupingComponent.js +64 -64
  62. package/src/layout-2016/components/databox/DataBoxSearchResultComponent.js +36 -36
  63. package/src/layout-2016/components/databox/DataBoxStackedAssociationComponent.js +54 -54
  64. package/src/layout-2016/components/databox/DataBoxSuggestionComponent.js +39 -39
  65. package/src/layout-2016/components/diagramme/AUDiagrammeComponent.js +309 -309
  66. package/src/layout-2016/components/flowbox/FlowBoxComponent.js +126 -126
  67. package/src/layout-2016/components/flowbox/FlowBoxPhoneComponent.js +104 -104
  68. package/src/layout-2016/components/profile/AUProfileAvatar2016Component.js +103 -103
  69. package/src/layout-2016/components/universe/StaffTopComponent.js +363 -363
  70. package/src/layout-2016/components/universe/StudentTopComponent.js +137 -137
  71. package/src/layout-2016/components/universe/UniverseContainerComponent.js +65 -65
  72. package/src/layout-2016/lib/all.js +3 -3
  73. package/src/layout-2016/lib/au-alphabox.js +100 -100
  74. package/src/layout-2016/lib/au-databox.js +400 -400
  75. package/src/layout-2016/lib/au-diagramme.js +85 -85
  76. package/src/layout-2016/lib/au-flowbox.js +93 -93
  77. package/src/layout-2016/lib/universe.js +9 -9
  78. package/src/lib/helpers.ts +194 -194
  79. package/src/lib/hooks.ts +33 -33
  80. package/src/lib/i18n.ts +600 -600
  81. package/src/lib/tracking.ts +69 -69
  82. package/src/lib/wrapping.ts +21 -21
  83. package/src/styles/_settings.scss +10 -10
  84. package/src/styles/alphabox.scss +222 -222
  85. package/src/styles/app.scss +7 -7
  86. package/src/styles/autosuggest.scss +57 -57
  87. package/src/styles/databox.scss +563 -563
  88. package/src/styles/diagramme.scss +119 -119
  89. package/src/styles/flowbox.scss +72 -72
  90. package/src/styles/maps.scss +395 -395
  91. package/stories/AUButtonComponent.stories.tsx +85 -88
  92. package/stories/AUSpinnerComponent.stories.tsx +41 -0
  93. package/tsconfig.json +46 -46
  94. package/webpack.config.js +89 -89
@@ -1,194 +1,194 @@
1
- /* eslint-env browser */
2
- /* NO IMPORTS! */
3
-
4
- // eslint-disable-next-line no-control-regex
5
- const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
6
-
7
- const sortAlphaObj = (a, b) => {
8
- if (typeof a.name !== 'undefined' && typeof b.name !== 'undefined') {
9
- return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true });
10
- }
11
- return 0;
12
- };
13
-
14
- const isElementInViewport = (element: HTMLElement): boolean => {
15
- if (element === null) {
16
- return false;
17
- }
18
-
19
- const rect = element.getBoundingClientRect();
20
-
21
- return rect.bottom > 0
22
- && rect.right > 0
23
- && rect.left < (window.innerWidth || document.documentElement.clientWidth)
24
- && rect.top < (window.innerHeight || document.documentElement.clientHeight);
25
- };
26
-
27
- const isElementPartlyInViewport = (element: HTMLElement): boolean => {
28
- let top = element.offsetTop;
29
- let left = element.offsetLeft;
30
- const width = element.offsetWidth;
31
- const height = element.offsetHeight;
32
-
33
- let offsetElement = element;
34
- while (offsetElement.offsetParent) {
35
- offsetElement = element.offsetParent as HTMLElement;
36
- top += element.offsetTop;
37
- left += element.offsetLeft;
38
- }
39
-
40
- return (
41
- top < (window.pageYOffset + window.innerHeight)
42
- && left < (window.pageXOffset + window.innerWidth)
43
- && (top + height) > window.pageYOffset
44
- && (left + width) > window.pageXOffset
45
- );
46
- };
47
-
48
- const setCookie = (
49
- cookieName: string,
50
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
51
- value: any,
52
- maxAge: number | null = null,
53
- exdays: number | null = null,
54
- path = ';path=/;domain=au.dk',
55
- ): void => {
56
- let cookieValue = encodeURI(value);
57
- if (exdays != null) {
58
- const exdate = new Date();
59
- exdate.setDate(exdate.getDate() + exdays);
60
- cookieValue = `${cookieValue}; expires=${exdate.toUTCString()}`;
61
- } else if (maxAge != null) {
62
- cookieValue = `${cookieValue}; max-age=${maxAge}`;
63
- }
64
-
65
- document.cookie = `${cookieName}=${cookieValue}${path}`;
66
- };
67
-
68
- const getCookie = (cookieName: string): string | null | boolean => {
69
- let cookieValue: string | null | boolean = document.cookie;
70
- let cookieStart = cookieValue.indexOf(` ${cookieName}=`);
71
- if (cookieStart === -1) {
72
- cookieStart = cookieValue.indexOf(`${cookieName}=`);
73
- }
74
- if (cookieStart === -1) {
75
- cookieValue = null;
76
- } else {
77
- cookieStart = cookieValue.indexOf('=', cookieStart) + 1;
78
- let cookieEnd = cookieValue.indexOf(';', cookieStart);
79
- if (cookieEnd === -1) {
80
- cookieEnd = cookieValue.length;
81
- }
82
- cookieValue = decodeURI(cookieValue.substring(cookieStart, cookieEnd));
83
- }
84
- return cookieValue;
85
- };
86
-
87
- const addToSessionStorage = (key: string, data: unknown): unknown => {
88
- if (window.sessionStorage) {
89
- sessionStorage.setItem(key, JSON.stringify(data));
90
- }
91
-
92
- return data;
93
- };
94
-
95
- const getFromSessionStorage = (key: string): unknown | null => {
96
- if (window.sessionStorage) {
97
- const data = sessionStorage.getItem(key);
98
- if (data) {
99
- return JSON.parse(data);
100
- }
101
- }
102
-
103
- return null;
104
- };
105
-
106
- const addToLocalStorage = (key: string, data: unknown): unknown => {
107
- if (window.localStorage) {
108
- localStorage.setItem(key, JSON.stringify(data));
109
- }
110
-
111
- return data;
112
- };
113
-
114
- const getFromLocalStorage = (key: string): unknown | null => {
115
- if (window.localStorage) {
116
- const data = localStorage.getItem(key);
117
- if (data) {
118
- return JSON.parse(data);
119
- }
120
- }
121
-
122
- return null;
123
- };
124
-
125
- // Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
126
- const setCaretPosition = (element: HTMLInputElement, pos: number): void => {
127
- // Modern browsers
128
- if (element && element.setSelectionRange) {
129
- element.focus();
130
- element.setSelectionRange(pos, pos);
131
- }
132
- };
133
-
134
- const splitPhoneNumber = (
135
- countryCodes: AU.ICountryCode[],
136
- phoneNumber: string,
137
- ): AU.IPhoneNumber => {
138
- const countryCodeFound = (code: string) => countryCodes.filter(
139
- (x) => x.code === parseInt(code, 10),
140
- ).length > 0;
141
-
142
- const findPrefix = (): string => {
143
- if (countryCodes.length > 0) {
144
- const skip = '';
145
- let count = 1;
146
- let prefix = `${countryCodes.find((x) => x.important)?.code}`;
147
- while (count < phoneNumber.length) {
148
- const split = phoneNumber.substring(skip.length, skip.length + count);
149
- if (countryCodeFound(split)) {
150
- prefix = split;
151
- }
152
- count += 1;
153
- }
154
- return skip + prefix;
155
- }
156
- return '';
157
- };
158
-
159
- const prefix = findPrefix();
160
- return {
161
- prefix,
162
- number: phoneNumber.replace(prefix, ''),
163
- };
164
- };
165
-
166
- const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
167
- if (phone) {
168
- const { prefix, number } = splitPhoneNumber(countryCodes, phone);
169
- if (prefix) {
170
- return `${prefix} ${number?.match(/\d{1,2}/g)?.join(' ')}`;
171
- }
172
- return number?.match(/\d{1,2}/g)?.join(' ');
173
- }
174
- return '';
175
- };
176
-
177
- const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
178
-
179
- export {
180
- emailRegex,
181
- sortAlphaObj,
182
- isElementInViewport,
183
- isElementPartlyInViewport,
184
- setCookie,
185
- getCookie,
186
- addToLocalStorage,
187
- getFromLocalStorage,
188
- addToSessionStorage,
189
- getFromSessionStorage,
190
- setCaretPosition,
191
- splitPhoneNumber,
192
- prettyPrintPhone,
193
- scrollTo,
194
- };
1
+ /* eslint-env browser */
2
+ /* NO IMPORTS! */
3
+
4
+ // eslint-disable-next-line no-control-regex
5
+ const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
6
+
7
+ const sortAlphaObj = (a, b) => {
8
+ if (typeof a.name !== 'undefined' && typeof b.name !== 'undefined') {
9
+ return a.name.toLowerCase().localeCompare(b.name.toLowerCase(), 'da', { ignorePunctuation: true });
10
+ }
11
+ return 0;
12
+ };
13
+
14
+ const isElementInViewport = (element: HTMLElement): boolean => {
15
+ if (element === null) {
16
+ return false;
17
+ }
18
+
19
+ const rect = element.getBoundingClientRect();
20
+
21
+ return rect.bottom > 0
22
+ && rect.right > 0
23
+ && rect.left < (window.innerWidth || document.documentElement.clientWidth)
24
+ && rect.top < (window.innerHeight || document.documentElement.clientHeight);
25
+ };
26
+
27
+ const isElementPartlyInViewport = (element: HTMLElement): boolean => {
28
+ let top = element.offsetTop;
29
+ let left = element.offsetLeft;
30
+ const width = element.offsetWidth;
31
+ const height = element.offsetHeight;
32
+
33
+ let offsetElement = element;
34
+ while (offsetElement.offsetParent) {
35
+ offsetElement = element.offsetParent as HTMLElement;
36
+ top += element.offsetTop;
37
+ left += element.offsetLeft;
38
+ }
39
+
40
+ return (
41
+ top < (window.pageYOffset + window.innerHeight)
42
+ && left < (window.pageXOffset + window.innerWidth)
43
+ && (top + height) > window.pageYOffset
44
+ && (left + width) > window.pageXOffset
45
+ );
46
+ };
47
+
48
+ const setCookie = (
49
+ cookieName: string,
50
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
51
+ value: any,
52
+ maxAge: number | null = null,
53
+ exdays: number | null = null,
54
+ path = ';path=/;domain=au.dk',
55
+ ): void => {
56
+ let cookieValue = encodeURI(value);
57
+ if (exdays != null) {
58
+ const exdate = new Date();
59
+ exdate.setDate(exdate.getDate() + exdays);
60
+ cookieValue = `${cookieValue}; expires=${exdate.toUTCString()}`;
61
+ } else if (maxAge != null) {
62
+ cookieValue = `${cookieValue}; max-age=${maxAge}`;
63
+ }
64
+
65
+ document.cookie = `${cookieName}=${cookieValue}${path}`;
66
+ };
67
+
68
+ const getCookie = (cookieName: string): string | null | boolean => {
69
+ let cookieValue: string | null | boolean = document.cookie;
70
+ let cookieStart = cookieValue.indexOf(` ${cookieName}=`);
71
+ if (cookieStart === -1) {
72
+ cookieStart = cookieValue.indexOf(`${cookieName}=`);
73
+ }
74
+ if (cookieStart === -1) {
75
+ cookieValue = null;
76
+ } else {
77
+ cookieStart = cookieValue.indexOf('=', cookieStart) + 1;
78
+ let cookieEnd = cookieValue.indexOf(';', cookieStart);
79
+ if (cookieEnd === -1) {
80
+ cookieEnd = cookieValue.length;
81
+ }
82
+ cookieValue = decodeURI(cookieValue.substring(cookieStart, cookieEnd));
83
+ }
84
+ return cookieValue;
85
+ };
86
+
87
+ const addToSessionStorage = (key: string, data: unknown): unknown => {
88
+ if (window.sessionStorage) {
89
+ sessionStorage.setItem(key, JSON.stringify(data));
90
+ }
91
+
92
+ return data;
93
+ };
94
+
95
+ const getFromSessionStorage = (key: string): unknown | null => {
96
+ if (window.sessionStorage) {
97
+ const data = sessionStorage.getItem(key);
98
+ if (data) {
99
+ return JSON.parse(data);
100
+ }
101
+ }
102
+
103
+ return null;
104
+ };
105
+
106
+ const addToLocalStorage = (key: string, data: unknown): unknown => {
107
+ if (window.localStorage) {
108
+ localStorage.setItem(key, JSON.stringify(data));
109
+ }
110
+
111
+ return data;
112
+ };
113
+
114
+ const getFromLocalStorage = (key: string): unknown | null => {
115
+ if (window.localStorage) {
116
+ const data = localStorage.getItem(key);
117
+ if (data) {
118
+ return JSON.parse(data);
119
+ }
120
+ }
121
+
122
+ return null;
123
+ };
124
+
125
+ // Credits: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
126
+ const setCaretPosition = (element: HTMLInputElement, pos: number): void => {
127
+ // Modern browsers
128
+ if (element && element.setSelectionRange) {
129
+ element.focus();
130
+ element.setSelectionRange(pos, pos);
131
+ }
132
+ };
133
+
134
+ const splitPhoneNumber = (
135
+ countryCodes: AU.ICountryCode[],
136
+ phoneNumber: string,
137
+ ): AU.IPhoneNumber => {
138
+ const countryCodeFound = (code: string) => countryCodes.filter(
139
+ (x) => x.code === parseInt(code, 10),
140
+ ).length > 0;
141
+
142
+ const findPrefix = (): string => {
143
+ if (countryCodes.length > 0) {
144
+ const skip = '';
145
+ let count = 1;
146
+ let prefix = `${countryCodes.find((x) => x.important)?.code}`;
147
+ while (count < phoneNumber.length) {
148
+ const split = phoneNumber.substring(skip.length, skip.length + count);
149
+ if (countryCodeFound(split)) {
150
+ prefix = split;
151
+ }
152
+ count += 1;
153
+ }
154
+ return skip + prefix;
155
+ }
156
+ return '';
157
+ };
158
+
159
+ const prefix = findPrefix();
160
+ return {
161
+ prefix,
162
+ number: phoneNumber.replace(prefix, ''),
163
+ };
164
+ };
165
+
166
+ const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
167
+ if (phone) {
168
+ const { prefix, number } = splitPhoneNumber(countryCodes, phone);
169
+ if (prefix) {
170
+ return `${prefix} ${number?.match(/\d{1,2}/g)?.join(' ')}`;
171
+ }
172
+ return number?.match(/\d{1,2}/g)?.join(' ');
173
+ }
174
+ return '';
175
+ };
176
+
177
+ const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
178
+
179
+ export {
180
+ emailRegex,
181
+ sortAlphaObj,
182
+ isElementInViewport,
183
+ isElementPartlyInViewport,
184
+ setCookie,
185
+ getCookie,
186
+ addToLocalStorage,
187
+ getFromLocalStorage,
188
+ addToSessionStorage,
189
+ getFromSessionStorage,
190
+ setCaretPosition,
191
+ splitPhoneNumber,
192
+ prettyPrintPhone,
193
+ scrollTo,
194
+ };
package/src/lib/hooks.ts CHANGED
@@ -1,33 +1,33 @@
1
- /* eslint-disable import/prefer-default-export */
2
- import { useState, useEffect } from 'react';
3
- import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
4
-
5
- const useModal = (
6
- domId: string,
7
- initialState: boolean,
8
- showCondition = true,
9
- hideCondition = false,
10
- closeable = true,
11
- ): [IModal, (modal: IModal) => void] => {
12
- const [modal, setModal] = useState<IModal>({ modal: initialState, sender: null });
13
-
14
- useEffect(() => {
15
- if (modal.modal && modal.sender && showCondition) {
16
- showModal(domId, modal.sender, () => {
17
- setModal({ modal: false, sender: null });
18
- }, closeable);
19
- }
20
-
21
- if (modal.modal && modal.sender && hideCondition) {
22
- hideModal(domId, modal.sender, () => {
23
- setModal({ modal: false, sender: null });
24
- });
25
- }
26
- });
27
-
28
- return [modal, setModal];
29
- };
30
-
31
- export {
32
- useModal,
33
- };
1
+ /* eslint-disable import/prefer-default-export */
2
+ import { useState, useEffect } from 'react';
3
+ import { showModal, hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
4
+
5
+ const useModal = (
6
+ domId: string,
7
+ initialState: boolean,
8
+ showCondition = true,
9
+ hideCondition = false,
10
+ closeable = true,
11
+ ): [IModal, (modal: IModal) => void] => {
12
+ const [modal, setModal] = useState<IModal>({ modal: initialState, sender: null });
13
+
14
+ useEffect(() => {
15
+ if (modal.modal && modal.sender && showCondition) {
16
+ showModal(domId, modal.sender, () => {
17
+ setModal({ modal: false, sender: null });
18
+ }, closeable);
19
+ }
20
+
21
+ if (modal.modal && modal.sender && hideCondition) {
22
+ hideModal(domId, modal.sender, () => {
23
+ setModal({ modal: false, sender: null });
24
+ });
25
+ }
26
+ });
27
+
28
+ return [modal, setModal];
29
+ };
30
+
31
+ export {
32
+ useModal,
33
+ };