@aarhus-university/au-lib-react-components 12.5.1 → 12.6.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 (115) hide show
  1. package/.claude/settings.local.json +12 -0
  2. package/.eslintrc.js +35 -35
  3. package/.storybook/main.js +34 -34
  4. package/.storybook/preview.js +17 -17
  5. package/.vscode/settings.json +22 -0
  6. package/README.md +19 -19
  7. package/__tests__/jest/AUButtonComponent.test.tsx +165 -165
  8. package/__tests__/jest/AUDynamicContentComponent.test.tsx +386 -0
  9. package/__tests__/jest/AUErrorComponent.test.tsx +142 -142
  10. package/__tests__/jest/AUModalComponent.test.tsx +186 -186
  11. package/__tests__/jest/AUNotificationComponent.test.tsx +115 -115
  12. package/__tests__/jest/AUSpinnerComponent.test.tsx +57 -57
  13. package/__tests__/jest/AUToolbarComponent.test.tsx +46 -46
  14. package/__tests__/jest/context.test.ts +25 -25
  15. package/__tests__/jest/helpers.test.ts +15 -15
  16. package/__tests__/jest/setupTests.ts +2 -2
  17. package/babel.config.js +8 -8
  18. package/build/umd/all.css +3 -2
  19. package/build/umd/all.css.map +1 -7
  20. package/build/umd/all.js +2 -45
  21. package/build/umd/all.js.map +1 -7
  22. package/build/umd/alphabox.js +2 -45
  23. package/build/umd/alphabox.js.map +1 -7
  24. package/build/umd/databox.js +2 -45
  25. package/build/umd/databox.js.map +1 -7
  26. package/build/umd/diagramme.js +2 -44
  27. package/build/umd/diagramme.js.map +1 -7
  28. package/build/umd/flowbox.js +2 -44
  29. package/build/umd/flowbox.js.map +1 -7
  30. package/build/umd/universe.js +1 -1
  31. package/build-storybook.log +386 -386
  32. package/esbuild.mjs +22 -22
  33. package/package.json +107 -105
  34. package/src/components/AUAlertComponent.tsx +128 -128
  35. package/src/components/AUAutoSuggestComponent.js +148 -148
  36. package/src/components/AUButtonComponent.tsx +99 -97
  37. package/src/components/AUCalendarComponent.tsx +497 -497
  38. package/src/components/AUCharacterCountComponent.tsx +56 -56
  39. package/src/components/AUComboBoxComponent.tsx +195 -195
  40. package/src/components/AUContentToggleComponent.tsx +50 -50
  41. package/src/components/AUDatepickerComponent.tsx +124 -124
  42. package/src/components/AUDialogModalComponent.tsx +124 -124
  43. package/src/components/AUDynamicContentComponent.tsx +137 -0
  44. package/src/components/AUEditorComponent.tsx +126 -117
  45. package/src/components/AUErrorComponent.tsx +73 -73
  46. package/src/components/AUMobilePrefixComponent.tsx +20 -20
  47. package/src/components/AUModalComponent.tsx +72 -72
  48. package/src/components/AUNotificationComponent.tsx +44 -44
  49. package/src/components/AUReceiptComponent.tsx +34 -34
  50. package/src/components/AUSpinnerComponent.tsx +40 -40
  51. package/src/components/AUStepComponent.tsx +75 -75
  52. package/src/components/AUSubNavComponent.tsx +57 -57
  53. package/src/components/AUSubmitButtonContainerComponent.tsx +38 -38
  54. package/src/components/AUTabbedContentComponent.tsx +154 -154
  55. package/src/components/AUTableComponent.tsx +29 -29
  56. package/src/components/AUToastComponent.tsx +104 -104
  57. package/src/components/AUToolbarComponent.tsx +108 -108
  58. package/src/components/AUTruncatorComponent.tsx +141 -141
  59. package/src/components/wrapping/AUEmbedComponent.js +47 -47
  60. package/src/layout-2016/components/alphabox/AlphaBoxComponent.js +142 -143
  61. package/src/layout-2016/components/alphabox/AlphaBoxContentComponent.js +136 -136
  62. package/src/layout-2016/components/common/AUCollapsibleComponent.js +152 -152
  63. package/src/layout-2016/components/common/AUSpinnerComponent.js +103 -103
  64. package/src/layout-2016/components/databox/DataBoxAlphabetComponent.js +144 -144
  65. package/src/layout-2016/components/databox/DataBoxAssociationComponent.js +122 -122
  66. package/src/layout-2016/components/databox/DataBoxButtonComponent.js +157 -157
  67. package/src/layout-2016/components/databox/DataBoxComponent.js +297 -297
  68. package/src/layout-2016/components/databox/DataBoxGroupingComponent.js +64 -64
  69. package/src/layout-2016/components/databox/DataBoxSearchResultComponent.js +36 -36
  70. package/src/layout-2016/components/databox/DataBoxStackedAssociationComponent.js +54 -54
  71. package/src/layout-2016/components/databox/DataBoxSuggestionComponent.js +39 -39
  72. package/src/layout-2016/components/diagramme/AUDiagrammeComponent.js +309 -309
  73. package/src/layout-2016/components/flowbox/FlowBoxComponent.js +126 -126
  74. package/src/layout-2016/components/flowbox/FlowBoxPhoneComponent.js +104 -104
  75. package/src/layout-2016/lib/all.js +3 -3
  76. package/src/layout-2016/lib/au-alphabox.js +99 -100
  77. package/src/layout-2016/lib/au-databox.js +399 -400
  78. package/src/layout-2016/lib/au-diagramme.js +85 -85
  79. package/src/layout-2016/lib/au-flowbox.js +119 -93
  80. package/src/lib/context.tsx +59 -59
  81. package/src/lib/dates.ts +52 -52
  82. package/src/lib/helpers.ts +208 -208
  83. package/src/lib/hooks.ts +157 -157
  84. package/src/lib/i18n.ts +600 -600
  85. package/src/lib/portals.tsx +150 -150
  86. package/src/lib/tinymce.ts +84 -84
  87. package/src/lib/wrapping.ts +21 -21
  88. package/src/styles/_settings.scss +10 -10
  89. package/src/styles/alphabox.scss +222 -222
  90. package/src/styles/app.scss +7 -7
  91. package/src/styles/autosuggest.scss +57 -57
  92. package/src/styles/databox.scss +563 -563
  93. package/src/styles/diagramme.scss +119 -119
  94. package/src/styles/flowbox.scss +72 -72
  95. package/src/styles/maps.scss +395 -395
  96. package/stories/AUAlertComponent.stories.tsx +133 -133
  97. package/stories/AUAutoSuggestComponent.stories.tsx +95 -95
  98. package/stories/AUButtonComponent.stories.tsx +139 -139
  99. package/stories/AUCharacterCountComponent.stories.tsx +121 -121
  100. package/stories/AUComboBoxComponent.stories.tsx +101 -101
  101. package/stories/AUContentToggleComponent.stories.tsx +87 -87
  102. package/stories/AUDialogModalComponent.stories.tsx +75 -75
  103. package/stories/AUDynamicContentComponent.stories.tsx +119 -0
  104. package/stories/AUEditorComponent.stories.tsx +66 -66
  105. package/stories/AUErrorComponent.stories.tsx +132 -132
  106. package/stories/AUModalComponent.stories.tsx +160 -160
  107. package/stories/AUNotificationComponent.stories.tsx +151 -151
  108. package/stories/AUSpinnerComponent.stories.tsx +44 -44
  109. package/stories/AUStepComponent.stories.tsx +91 -91
  110. package/stories/AUToolbarComponent.stories.tsx +389 -389
  111. package/stories/AUTruncatorComponent.stories.tsx +123 -123
  112. package/stories/lib/helpers.tsx +146 -146
  113. package/tsconfig.json +46 -46
  114. package/webpack.config.js +88 -88
  115. package/src/lib/tracking.ts +0 -69
@@ -1,223 +1,223 @@
1
- .au_alphabox {
2
- overflow: visible;
3
- margin-bottom: 1rem;
4
- position: relative;
5
- >.au_alphabox {
6
- margin-bottom: 0;
7
- }
8
- .dropdown-pane & {
9
- margin-bottom: 0;
10
- }
11
- >div:not(.au_alphabox_content):not(.au_alphabox) { /* because of nested au_alphabox */
12
- padding: 1rem 1rem 0 1rem;
13
- overflow: auto;
14
- }
15
- p.no-results {
16
- background-color: #fff;
17
- color: #555;
18
- padding: 1rem;
19
- }
20
- li.no-results a {
21
- font-weight: bold;
22
- }
23
- ul.letters {
24
- display: flex;
25
- justify-content: flex-start;
26
- flex-flow: row wrap;
27
- font-size: 1.1rem;
28
- margin-top: .15rem;
29
- margin-bottom: .75rem;
30
- margin-left: 0;
31
- padding-bottom: .75rem;
32
- li {
33
- padding: 0;
34
- margin: 2px 2px;
35
- background-color: #aaa;
36
- text-align: center;
37
- font-size: 1.2rem;
38
- &.available {
39
- button {
40
- cursor: pointer;
41
- color: #fff;
42
- }
43
- }
44
- &.active {
45
- font-weight: bold;
46
- }
47
- &:before {
48
- content: '';
49
- }
50
- button {
51
- font-family: $font-passata-regular;
52
- color: #ccc;
53
- text-transform: uppercase;
54
- width: 20px;
55
- line-height: inherit;
56
- }
57
- }
58
- }
59
- ul.items {
60
- padding: 1rem;
61
- margin: 0;
62
- position: relative;
63
- }
64
- .student & {
65
- background: $student-secondary-color;
66
- .listNav {
67
- .ln-letters {
68
- a {
69
- background-color: #8bad3f;
70
- &.ln-selected {
71
- color: #2a4a0f !important;
72
- }
73
- &.ln-disabled {
74
- background-color: #8bad3f;
75
- }
76
- }
77
- }
78
- }
79
- .alphabox_list_container {
80
- border: 2px solid #2a4a0f;
81
- h3 {
82
- color: #8bad3f;
83
- border-bottom: 2px solid #8bad3f;
84
- }
85
- ul li:before {
86
- color: #8bad3f;
87
- }
88
- }
89
- ul.quicklinks {
90
- a {
91
- background: #447400;
92
- }
93
- }
94
- }
95
- h2 {
96
- color: #fff;
97
- margin: 0;
98
- border: 0;
99
- a {
100
- color: #fff !important;
101
- border: none !important;
102
- &:hover {
103
- text-decoration: underline !important;
104
- }
105
- }
106
- }
107
- h3 {
108
- color: #fff;
109
- margin: 0 0 1rem 0 !important;
110
- padding-top: 1rem;
111
- font-size: 1.25rem;
112
- border-top: 1px solid #fff;
113
- }
114
- input[type=text] {
115
- background: #afc3ce url($findicon) no-repeat right center;
116
- border: 0;
117
- float: none;
118
- width: 100%;
119
- margin-bottom: 1.45455rem !important;
120
- &.active {
121
- background-color: #afc3ce;
122
- }
123
- }
124
- ::-webkit-input-placeholder {
125
- color: #333;
126
- }
127
- ::-moz-placeholder {
128
- color: #333;
129
- opacity: 1;
130
- }
131
- :-ms-input-placeholder {
132
- color: #333;
133
- }
134
- .listNav {
135
- margin: 0 0 calc(.5rem - 2px) 0;
136
- .ln-letters {
137
- margin: 1rem 0;
138
- a {
139
- background-color: #006ca4;
140
- border: none !important;
141
- margin: 0 2px 2px 0;
142
- color: #fff;
143
- padding: 2px;
144
- font-size: 1.25rem;
145
- &.ln-selected {
146
- background-color: #fff;
147
- color: #006ca4 !important;
148
- }
149
- &.ln-disabled {
150
- background-color: #006ca4;
151
- color: #7c98a8 !important;
152
- }
153
- }
154
- .all {
155
- display: none;
156
- }
157
- }
158
- font-family: "AUPassataBold";
159
- }
160
- .alphabox_list_container {
161
- background: #fff;
162
- border: 2px solid #006ca4;
163
- padding: 0 1rem 0 1rem;
164
- display: none;
165
- overflow-y: scroll;
166
- -webkit-overflow-scrolling: touch;
167
- h3 {
168
- color: #009ee0;
169
- border-bottom: 2px solid $staff-color;
170
- }
171
- >ul {
172
- max-height: 200px;
173
- overflow: initial !important;
174
- margin-bottom: 2em;
175
- position: relative;
176
- li {
177
- a {
178
- color: $staff-secondary-color;
179
- border-bottom: 1px dotted;
180
- }
181
- }
182
- }
183
- }
184
- ul.quicklinks {
185
- display: flex;
186
- flex-wrap: wrap;
187
- justify-content: space-between;
188
- margin-left: 0;
189
- li {
190
- font: 1.25rem "AUPassataRegular";
191
- text-transform: uppercase;
192
- width: 48.9%;
193
- padding: 0;
194
- line-height: 1;
195
- margin-bottom: 6px;
196
- &:nth-child(odd) {
197
- margin-right: .5em;
198
- }
199
- a {
200
- display: block;
201
- background: #006ca4;
202
- color: #fff;
203
- border: none !important;
204
- padding: .5em;
205
- }
206
- @media (max-width: 400px) {
207
- width: 100%;
208
- margin-right: 0 !important;
209
- font-size: 1.72727rem;
210
- }
211
- }
212
- }
213
- .au_alphabox_content {
214
- margin-top: 1rem;
215
- margin-bottom: 1rem;
216
- clear: both;
217
- >div {
218
- background: #fff;
219
- max-height: 300px;
220
- overflow-y: scroll;
221
- }
222
- }
1
+ .au_alphabox {
2
+ overflow: visible;
3
+ margin-bottom: 1rem;
4
+ position: relative;
5
+ >.au_alphabox {
6
+ margin-bottom: 0;
7
+ }
8
+ .dropdown-pane & {
9
+ margin-bottom: 0;
10
+ }
11
+ >div:not(.au_alphabox_content):not(.au_alphabox) { /* because of nested au_alphabox */
12
+ padding: 1rem 1rem 0 1rem;
13
+ overflow: auto;
14
+ }
15
+ p.no-results {
16
+ background-color: #fff;
17
+ color: #555;
18
+ padding: 1rem;
19
+ }
20
+ li.no-results a {
21
+ font-weight: bold;
22
+ }
23
+ ul.letters {
24
+ display: flex;
25
+ justify-content: flex-start;
26
+ flex-flow: row wrap;
27
+ font-size: 1.1rem;
28
+ margin-top: .15rem;
29
+ margin-bottom: .75rem;
30
+ margin-left: 0;
31
+ padding-bottom: .75rem;
32
+ li {
33
+ padding: 0;
34
+ margin: 2px 2px;
35
+ background-color: #aaa;
36
+ text-align: center;
37
+ font-size: 1.2rem;
38
+ &.available {
39
+ button {
40
+ cursor: pointer;
41
+ color: #fff;
42
+ }
43
+ }
44
+ &.active {
45
+ font-weight: bold;
46
+ }
47
+ &:before {
48
+ content: '';
49
+ }
50
+ button {
51
+ font-family: $font-passata-regular;
52
+ color: #ccc;
53
+ text-transform: uppercase;
54
+ width: 20px;
55
+ line-height: inherit;
56
+ }
57
+ }
58
+ }
59
+ ul.items {
60
+ padding: 1rem;
61
+ margin: 0;
62
+ position: relative;
63
+ }
64
+ .student & {
65
+ background: $student-secondary-color;
66
+ .listNav {
67
+ .ln-letters {
68
+ a {
69
+ background-color: #8bad3f;
70
+ &.ln-selected {
71
+ color: #2a4a0f !important;
72
+ }
73
+ &.ln-disabled {
74
+ background-color: #8bad3f;
75
+ }
76
+ }
77
+ }
78
+ }
79
+ .alphabox_list_container {
80
+ border: 2px solid #2a4a0f;
81
+ h3 {
82
+ color: #8bad3f;
83
+ border-bottom: 2px solid #8bad3f;
84
+ }
85
+ ul li:before {
86
+ color: #8bad3f;
87
+ }
88
+ }
89
+ ul.quicklinks {
90
+ a {
91
+ background: #447400;
92
+ }
93
+ }
94
+ }
95
+ h2 {
96
+ color: #fff;
97
+ margin: 0;
98
+ border: 0;
99
+ a {
100
+ color: #fff !important;
101
+ border: none !important;
102
+ &:hover {
103
+ text-decoration: underline !important;
104
+ }
105
+ }
106
+ }
107
+ h3 {
108
+ color: #fff;
109
+ margin: 0 0 1rem 0 !important;
110
+ padding-top: 1rem;
111
+ font-size: 1.25rem;
112
+ border-top: 1px solid #fff;
113
+ }
114
+ input[type=text] {
115
+ background: #afc3ce url($findicon) no-repeat right center;
116
+ border: 0;
117
+ float: none;
118
+ width: 100%;
119
+ margin-bottom: 1.45455rem !important;
120
+ &.active {
121
+ background-color: #afc3ce;
122
+ }
123
+ }
124
+ ::-webkit-input-placeholder {
125
+ color: #333;
126
+ }
127
+ ::-moz-placeholder {
128
+ color: #333;
129
+ opacity: 1;
130
+ }
131
+ :-ms-input-placeholder {
132
+ color: #333;
133
+ }
134
+ .listNav {
135
+ margin: 0 0 calc(.5rem - 2px) 0;
136
+ .ln-letters {
137
+ margin: 1rem 0;
138
+ a {
139
+ background-color: #006ca4;
140
+ border: none !important;
141
+ margin: 0 2px 2px 0;
142
+ color: #fff;
143
+ padding: 2px;
144
+ font-size: 1.25rem;
145
+ &.ln-selected {
146
+ background-color: #fff;
147
+ color: #006ca4 !important;
148
+ }
149
+ &.ln-disabled {
150
+ background-color: #006ca4;
151
+ color: #7c98a8 !important;
152
+ }
153
+ }
154
+ .all {
155
+ display: none;
156
+ }
157
+ }
158
+ font-family: "AUPassataBold";
159
+ }
160
+ .alphabox_list_container {
161
+ background: #fff;
162
+ border: 2px solid #006ca4;
163
+ padding: 0 1rem 0 1rem;
164
+ display: none;
165
+ overflow-y: scroll;
166
+ -webkit-overflow-scrolling: touch;
167
+ h3 {
168
+ color: #009ee0;
169
+ border-bottom: 2px solid $staff-color;
170
+ }
171
+ >ul {
172
+ max-height: 200px;
173
+ overflow: initial !important;
174
+ margin-bottom: 2em;
175
+ position: relative;
176
+ li {
177
+ a {
178
+ color: $staff-secondary-color;
179
+ border-bottom: 1px dotted;
180
+ }
181
+ }
182
+ }
183
+ }
184
+ ul.quicklinks {
185
+ display: flex;
186
+ flex-wrap: wrap;
187
+ justify-content: space-between;
188
+ margin-left: 0;
189
+ li {
190
+ font: 1.25rem "AUPassataRegular";
191
+ text-transform: uppercase;
192
+ width: 48.9%;
193
+ padding: 0;
194
+ line-height: 1;
195
+ margin-bottom: 6px;
196
+ &:nth-child(odd) {
197
+ margin-right: .5em;
198
+ }
199
+ a {
200
+ display: block;
201
+ background: #006ca4;
202
+ color: #fff;
203
+ border: none !important;
204
+ padding: .5em;
205
+ }
206
+ @media (max-width: 400px) {
207
+ width: 100%;
208
+ margin-right: 0 !important;
209
+ font-size: 1.72727rem;
210
+ }
211
+ }
212
+ }
213
+ .au_alphabox_content {
214
+ margin-top: 1rem;
215
+ margin-bottom: 1rem;
216
+ clear: both;
217
+ >div {
218
+ background: #fff;
219
+ max-height: 300px;
220
+ overflow-y: scroll;
221
+ }
222
+ }
223
223
  }
@@ -1,7 +1,7 @@
1
- @import "_settings";
2
- @import "alphabox";
3
- @import "autosuggest";
4
- @import "databox";
5
- @import "diagramme";
6
- @import "flowbox";
7
- @import "maps";
1
+ @import "_settings";
2
+ @import "alphabox";
3
+ @import "autosuggest";
4
+ @import "databox";
5
+ @import "diagramme";
6
+ @import "flowbox";
7
+ @import "maps";
@@ -1,57 +1,57 @@
1
- .react-autosuggest__container {
2
- cursor: pointer;
3
-
4
- input[type="text"] {
5
- margin-bottom: 0;
6
- }
7
- }
8
-
9
- /* delphinus */
10
- .page__content__block {
11
- .react-autosuggest__container {
12
- position: relative;
13
- width: 100%;
14
- }
15
- .react-autosuggest__suggestions-list {
16
- margin-top: 0;
17
- }
18
- }
19
-
20
- .react-autosuggest__suggestions-container {
21
- border-left: 1px solid #ccc;
22
- border-right: 1px solid #ccc;
23
- position: absolute;
24
- left: 0;
25
- right: 0;
26
- background-color: #fff;
27
- margin: 0;
28
- z-index: 1;
29
- color: #333 !important;
30
- font-size: 1.272727272727rem;
31
- line-height: 1;
32
- max-height: 430px;
33
- overflow: auto;
34
-
35
- li, li:before {
36
- list-style-type: none !important;
37
- background-image: none !important;
38
- margin: 0;
39
- padding: 0;
40
- content: '' !important;
41
- line-height: 1 !important;
42
- background: none;
43
- }
44
- }
45
- li.react-autosuggest__suggestion {
46
- border-bottom: 1px solid #ccc;
47
- padding: 1.272727272727rem 1rem;
48
- }
49
- .react-autosuggest__suggestion--highlighted {
50
- background-color: #f0f0f0 !important;
51
- }
52
-
53
- .react-autosuggest__suggestions-list {
54
- margin-bottom: 0;
55
- margin-left: 0;
56
- }
57
-
1
+ .react-autosuggest__container {
2
+ cursor: pointer;
3
+
4
+ input[type="text"] {
5
+ margin-bottom: 0;
6
+ }
7
+ }
8
+
9
+ /* delphinus */
10
+ .page__content__block {
11
+ .react-autosuggest__container {
12
+ position: relative;
13
+ width: 100%;
14
+ }
15
+ .react-autosuggest__suggestions-list {
16
+ margin-top: 0;
17
+ }
18
+ }
19
+
20
+ .react-autosuggest__suggestions-container {
21
+ border-left: 1px solid #ccc;
22
+ border-right: 1px solid #ccc;
23
+ position: absolute;
24
+ left: 0;
25
+ right: 0;
26
+ background-color: #fff;
27
+ margin: 0;
28
+ z-index: 1;
29
+ color: #333 !important;
30
+ font-size: 1.272727272727rem;
31
+ line-height: 1;
32
+ max-height: 430px;
33
+ overflow: auto;
34
+
35
+ li, li:before {
36
+ list-style-type: none !important;
37
+ background-image: none !important;
38
+ margin: 0;
39
+ padding: 0;
40
+ content: '' !important;
41
+ line-height: 1 !important;
42
+ background: none;
43
+ }
44
+ }
45
+ li.react-autosuggest__suggestion {
46
+ border-bottom: 1px solid #ccc;
47
+ padding: 1.272727272727rem 1rem;
48
+ }
49
+ .react-autosuggest__suggestion--highlighted {
50
+ background-color: #f0f0f0 !important;
51
+ }
52
+
53
+ .react-autosuggest__suggestions-list {
54
+ margin-bottom: 0;
55
+ margin-left: 0;
56
+ }
57
+