@ndla/ui 49.0.13 → 50.1.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 (49) hide show
  1. package/es/Breadcrumb/BreadcrumbItem.js +6 -6
  2. package/es/Breadcrumb/HomeBreadcrumb.js +7 -7
  3. package/es/MyNdla/Resource/Folder.js +9 -9
  4. package/es/MyNdla/Resource/FolderInput.js +59 -54
  5. package/es/index.js +0 -1
  6. package/es/locale/messages-en.js +52 -8
  7. package/es/locale/messages-nb.js +53 -9
  8. package/es/locale/messages-nn.js +52 -8
  9. package/es/locale/messages-se.js +52 -8
  10. package/es/locale/messages-sma.js +52 -8
  11. package/lib/Breadcrumb/BreadcrumbItem.d.ts +1 -1
  12. package/lib/Breadcrumb/BreadcrumbItem.js +6 -6
  13. package/lib/Breadcrumb/HomeBreadcrumb.js +7 -7
  14. package/lib/MyNdla/Resource/Folder.js +8 -8
  15. package/lib/MyNdla/Resource/FolderInput.d.ts +7 -4
  16. package/lib/MyNdla/Resource/FolderInput.js +56 -51
  17. package/lib/index.d.ts +0 -1
  18. package/lib/index.js +0 -7
  19. package/lib/locale/messages-en.d.ts +47 -3
  20. package/lib/locale/messages-en.js +52 -8
  21. package/lib/locale/messages-nb.d.ts +47 -3
  22. package/lib/locale/messages-nb.js +53 -9
  23. package/lib/locale/messages-nn.d.ts +47 -3
  24. package/lib/locale/messages-nn.js +52 -8
  25. package/lib/locale/messages-se.d.ts +47 -3
  26. package/lib/locale/messages-se.js +52 -8
  27. package/lib/locale/messages-sma.d.ts +47 -3
  28. package/lib/locale/messages-sma.js +52 -8
  29. package/package.json +11 -12
  30. package/src/Breadcrumb/BreadcrumbItem.tsx +1 -1
  31. package/src/Breadcrumb/HomeBreadcrumb.tsx +1 -1
  32. package/src/MyNdla/Resource/Folder.tsx +2 -2
  33. package/src/MyNdla/Resource/FolderInput.tsx +72 -57
  34. package/src/TreeStructure/TreeStructure.stories.tsx +1 -15
  35. package/src/index.ts +0 -2
  36. package/src/locale/messages-en.ts +50 -4
  37. package/src/locale/messages-nb.ts +51 -4
  38. package/src/locale/messages-nn.ts +50 -3
  39. package/src/locale/messages-se.ts +50 -3
  40. package/src/locale/messages-sma.ts +50 -3
  41. package/es/RadioButtonGroup/RadioButtonGroup.js +0 -118
  42. package/es/RadioButtonGroup/index.js +0 -10
  43. package/lib/RadioButtonGroup/RadioButtonGroup.d.ts +0 -37
  44. package/lib/RadioButtonGroup/RadioButtonGroup.js +0 -128
  45. package/lib/RadioButtonGroup/index.d.ts +0 -9
  46. package/lib/RadioButtonGroup/index.js +0 -17
  47. package/src/RadioButtonGroup/RadioButtonGroup.stories.tsx +0 -126
  48. package/src/RadioButtonGroup/RadioButtonGroup.tsx +0 -185
  49. package/src/RadioButtonGroup/index.ts +0 -11
@@ -1148,20 +1148,53 @@ var messages = _objectSpread(_objectSpread({
1148
1148
  title: 'Arena',
1149
1149
  category: {
1150
1150
  title: 'Lágit',
1151
- posts: 'Sáhkavuorru',
1152
- newPost: 'Ođđa reivvet'
1151
+ posts: 'Sáhkavuorru'
1152
+ },
1153
+ publish: 'Almmuheaddji',
1154
+ new: {
1155
+ post: 'Čále vástádusa',
1156
+ topic: 'Ođđa reivvet'
1157
+ },
1158
+ warning: {
1159
+ post: 'Du vástádus lea oidnosis buot oahpaheddjiide geat leat loggejuvvon Mu NDLA.',
1160
+ topic: 'Du sáhkavuorru lea oidnosis buot oahpaheddjiide geat leat loggejuvvon Mu NDLA.'
1161
+ },
1162
+ removeText: {
1163
+ post: 'Sihko kommentára',
1164
+ topic: 'Sihko čállosa'
1165
+ },
1166
+ description: {
1167
+ post: 'Hálidatgo sihkkut dán kommeantta? Ii leat vejolaš gáhtat go sihkko merkoša.',
1168
+ topic: 'Hálidatgo sihkkut dán čállosa? Jus čállosis leat mearkkašumit, de sihkkojuvvojit maiddái buot mearkkašumit. Ii leat vejolaš gáhtat go sihkko čállosa.'
1169
+ },
1170
+ deleteTitle: {
1171
+ post: 'Sihko kommentára',
1172
+ topic: 'Sihko čállosa'
1153
1173
  },
1154
1174
  topic: {
1155
- responses: 'Vástidan'
1175
+ responses: 'Vástidan',
1176
+ topicContent: 'Čále sáhkavuoru dása'
1156
1177
  },
1157
1178
  posts: {
1158
1179
  notify: 'Oaččo dieđu ođđa vástádusaid birra',
1180
+ showEditOptions: 'Čájet doaimmahanmolssaeavttuid',
1159
1181
  dropdownMenu: {
1160
1182
  report: 'Raportere čállosa moderatorii',
1161
1183
  edit: 'Doaimmat čállosa',
1162
1184
  delete: 'Sihko čállosa'
1163
- },
1164
- comment: 'Čále vástádusa'
1185
+ }
1186
+ },
1187
+ flag: {
1188
+ title: 'Rapportere čállosa / kommentára',
1189
+ spam: 'Dat lea spambota',
1190
+ offensive: 'Lea suorggahahtti',
1191
+ other: 'Eará áššit',
1192
+ reason: 'Sivva manne raporteret sisdoalu',
1193
+ send: 'Sádde raportta',
1194
+ disclaimer: 'Giitu go raporteret sisdoalu mii ii čuovo min njuolggadusaid. Mii lea sivvan dasa ahte almmuhat dán dieđu?',
1195
+ success: 'Giitu go raporteret sisdoalu mii ii čuovo min njuolggadusaid. Raporta lea sáddejuvvon min doaimmaheaddjái ja galgá ođđasit geahčaduvvot nu jođánit go vejolaš.',
1196
+ maxLength: 'Teakstagieddeguhkkodat lea joavdan',
1197
+ error: 'Fealta gáibiduvvo'
1165
1198
  },
1166
1199
  bottomText: 'Váillahat go ovtta lági? Sáhtát jearrat ođđa lágiid. Geavat "Gihtten NDLA" dahje sádde e-poastta moderatator@ndla.no',
1167
1200
  notification: {
@@ -1171,7 +1204,8 @@ var messages = _objectSpread(_objectSpread({
1171
1204
  myNotification: 'Mu signállat',
1172
1205
  markAll: 'Merke visot lohkon',
1173
1206
  commentedOn: 'vástidedje du sáhkavuoru'
1174
- }
1207
+ },
1208
+ topicsBy: 'Sáhkavuorru maid'
1175
1209
  },
1176
1210
  iconMenu: {
1177
1211
  folders: 'Mapper',
@@ -1211,6 +1245,8 @@ var messages = _objectSpread(_objectSpread({
1211
1245
  sharedFolder: {
1212
1246
  folderCopied: 'Máŋgejuvvon máhppa.',
1213
1247
  info: 'Dán máhpas lea NDLA fágasisdoallu ja bargobihtát, čohkkejuvvon oahpaheaddjis.',
1248
+ shared: 'Dán máhpas lea NDLA fágasisdoallu ja bargobihtát, čohkkejuvvon {{sharedBy}}.',
1249
+ aTeacher: 'oahpaheaddjis',
1214
1250
  firstShared: 'Máhppa juogaduvvui vuosttaš geardde {{date}}',
1215
1251
  drawerButton: 'Čájet máhpaid ja resurssaid',
1216
1252
  drawerTitle: 'Máhpat ja resurssat',
@@ -1252,7 +1288,14 @@ var messages = _objectSpread(_objectSpread({
1252
1288
  term2: 'Ale čále maidege unohasaid teakstaoassái.',
1253
1289
  term3: 'NDLA bisuha rievtti ođasmahttit dahje sihkkut boarásmuvvan resurssaid.'
1254
1290
  },
1255
- newFavourite: 'Aitto lasihuvvon',
1291
+ recentFavourites: {
1292
+ title: 'Easka lasihuvvon favorihtaide',
1293
+ link: 'Čájet buot máhpaid'
1294
+ },
1295
+ recentArenaPosts: {
1296
+ title: 'Ođđa sáhkavuorut arenat',
1297
+ link: 'Geahča buot artihkkaliid arenas'
1298
+ },
1256
1299
  feide: 'Dát vižžojuvvo du birra Feide:s',
1257
1300
  feideWrongInfo: 'Jus leat boasttudieđut, de fertejit dat ođasmahttojuvvot organisašuvnna/skuvlaeaiggáda bokte gosa geavaheaddji gullá. Visogova geavaheaddjidoarjagis gávnnat dáppe: feide.no/brukerstotte',
1258
1301
  storageInfo: {
@@ -1274,7 +1317,8 @@ var messages = _objectSpread(_objectSpread({
1274
1317
  tagInfo: {
1275
1318
  title: 'Ná gilkorasttát iežat oiddotresurssaid',
1276
1319
  text: 'Go vurket muhtin resurssa de lea vejolaš merket resurssa fáddágilkoriin. Fáddágilkor lea čoavddasátni man sáhtát geavahit gávdnan dihte ruovttoluotta resurssaide máhpaid rastá. Gávnnat buot fáddágilkoriid maid leat geavahan go válljet mu fáddágilkoriid gurut bealde fálus. Das oainnát maiddái maid resurssaid don leat merken juohke fáddágilkoriin.'
1277
- }
1320
+ },
1321
+ recentArenaTopics: 'Ođđa mearkkašumit arenas'
1278
1322
  },
1279
1323
  myProfile: {
1280
1324
  title: 'Mu profiila',
@@ -127,19 +127,52 @@ declare const messages: {
127
127
  category: {
128
128
  title: string;
129
129
  posts: string;
130
- newPost: string;
130
+ };
131
+ publish: string;
132
+ new: {
133
+ post: string;
134
+ topic: string;
135
+ };
136
+ warning: {
137
+ post: string;
138
+ topic: string;
139
+ };
140
+ removeText: {
141
+ post: string;
142
+ topic: string;
143
+ };
144
+ description: {
145
+ post: string;
146
+ topic: string;
147
+ };
148
+ deleteTitle: {
149
+ post: string;
150
+ topic: string;
131
151
  };
132
152
  topic: {
133
153
  responses: string;
154
+ topicContent: string;
134
155
  };
135
156
  posts: {
136
157
  notify: string;
158
+ showEditOptions: string;
137
159
  dropdownMenu: {
138
160
  report: string;
139
161
  edit: string;
140
162
  delete: string;
141
163
  };
142
- comment: string;
164
+ };
165
+ flag: {
166
+ title: string;
167
+ spam: string;
168
+ offensive: string;
169
+ other: string;
170
+ reason: string;
171
+ send: string;
172
+ disclaimer: string;
173
+ success: string;
174
+ maxLength: string;
175
+ error: string;
143
176
  };
144
177
  bottomText: string;
145
178
  notification: {
@@ -150,6 +183,7 @@ declare const messages: {
150
183
  markAll: string;
151
184
  commentedOn: string;
152
185
  };
186
+ topicsBy: string;
153
187
  };
154
188
  iconMenu: {
155
189
  folders: string;
@@ -189,6 +223,8 @@ declare const messages: {
189
223
  sharedFolder: {
190
224
  folderCopied: string;
191
225
  info: string;
226
+ shared: string;
227
+ aTeacher: string;
192
228
  firstShared: string;
193
229
  drawerButton: string;
194
230
  drawerTitle: string;
@@ -230,7 +266,14 @@ declare const messages: {
230
266
  term2: string;
231
267
  term3: string;
232
268
  };
233
- newFavourite: string;
269
+ recentFavourites: {
270
+ title: string;
271
+ link: string;
272
+ };
273
+ recentArenaPosts: {
274
+ title: string;
275
+ link: string;
276
+ };
234
277
  feide: string;
235
278
  feideWrongInfo: string;
236
279
  storageInfo: {
@@ -253,6 +296,7 @@ declare const messages: {
253
296
  title: string;
254
297
  text: string;
255
298
  };
299
+ recentArenaTopics: string;
256
300
  };
257
301
  myProfile: {
258
302
  title: string;
@@ -1148,20 +1148,53 @@ var messages = _objectSpread(_objectSpread({
1148
1148
  title: 'Sijjie',
1149
1149
  category: {
1150
1150
  title: 'Lïhtsh',
1151
- posts: 'Håaleme',
1152
- newPost: 'Orre lahtese'
1151
+ posts: 'Håaleme'
1152
+ },
1153
+ publish: 'Bæjhkoehtidh',
1154
+ new: {
1155
+ post: 'Tjaelieh vaastoem',
1156
+ topic: 'Orre lahtese'
1157
+ },
1158
+ warning: {
1159
+ post: 'Dov vaestiedasse lea våajnoes gaajhkide lohkehtæjjide mah leah tjaalasovveme Mov NDLA.',
1160
+ topic: 'Dov håaleme lea våajnoes gaajhkide lohkehtæjjide mah leah tjaalasovveme Mov NDLA.'
1161
+ },
1162
+ removeText: {
1163
+ post: 'sliejhtieh kommentaarem',
1164
+ topic: 'Håaleme'
1165
+ },
1166
+ description: {
1167
+ post: 'Sïjhth daam lahtesem sliejhtedh ? Ij leah nuepie bååstede diedtedh jis tjïelkesth kommentaarem olkese sleengkedh ',
1168
+ topic: 'Sïjhth daam håalemem sliejhtedh ? Jis lahtesisnie kommentaarh dellie gaajhkh kommentaarh aaj laahpehtidh. Ij leah nuepie gaatelassjedh jis datne akten tjaalegasse sïjhth håalodh .'
1169
+ },
1170
+ deleteTitle: {
1171
+ post: 'sliejhtieh kommentaarem',
1172
+ topic: 'Håaleme'
1153
1173
  },
1154
1174
  topic: {
1155
- responses: 'Vaestiedasse'
1175
+ responses: 'Vaestiedasse',
1176
+ topicContent: 'Tjaelieh dov håalemem daesnie'
1156
1177
  },
1157
1178
  posts: {
1158
1179
  notify: 'Bïeljelh mejtie orre vaestiedassh',
1180
+ showEditOptions: 'Vuesehth guktie edtja øørnedh',
1159
1181
  dropdownMenu: {
1160
1182
  report: 'Reekth håalemem moderatovrese',
1161
1183
  edit: 'Jarkelimmie håalemistie',
1162
1184
  delete: 'Slett innlegget'
1163
- },
1164
- comment: 'Tjaelieh vaastoem'
1185
+ }
1186
+ },
1187
+ flag: {
1188
+ title: 'Påastem reektehtidh / kommentaarem',
1189
+ spam: 'Dïhte lea saemien',
1190
+ offensive: 'Dïhte goerpe',
1191
+ other: 'Mij akt jeatjah',
1192
+ reason: 'Mannasinie reekteme sisvegistie',
1193
+ send: 'Reektehtsem sïjse seedtedh',
1194
+ disclaimer: 'Gæjhtoe juktie sisvegem reektehtidh mij ij leah mijjen njoelkedassi mietie . Mannasinie daam sisvegem reektehtidh?',
1195
+ success: 'Gæjhtoe juktie sisvegem reektehtidh mij ij leah mijjen njoelkedassi mietie. Mijjen reektehtsem lea mijjen moderatovrese seedteme, jïh dam sïjhtebe gïehtjedidh dan varke gåarede.',
1196
+ maxLength: 'Jeenjemes gåhkoe tjaalegegievleste båateme',
1197
+ error: 'Bielie daerpies'
1165
1198
  },
1166
1199
  bottomText: 'Akte kategorije datne ohtsedh ? Datne maahtah orre kategoriji bïjre rohkelidh Nuhtjh "Gihtjh NDLA" jallh seedth e-påastem moderaator@ndla.no',
1167
1200
  notification: {
@@ -1171,7 +1204,8 @@ var messages = _objectSpread(_objectSpread({
1171
1204
  myNotification: 'Mov tjoejemolseme',
1172
1205
  markAll: 'Mïerhkesjh gaajhkesh dovnesh lohkeme',
1173
1206
  commentedOn: 'vaestiedi gåessie dov saarnoeh'
1174
- }
1207
+ },
1208
+ topicsBy: 'Vuesiehtimmien gaavhtan'
1175
1209
  },
1176
1210
  iconMenu: {
1177
1211
  folders: 'Mapper',
@@ -1211,6 +1245,8 @@ var messages = _objectSpread(_objectSpread({
1211
1245
  sharedFolder: {
1212
1246
  folderCopied: 'Mappen har blitt kopiert.',
1213
1247
  info: 'Denne mappa inneheld fagstoff og oppgåver frå NDLA, samla av ein lærar.',
1248
+ shared: 'Denne mappa inneholder fagstoff og oppgaver fra NDLA, samlet av {{sharedBy}}.',
1249
+ aTeacher: 'en lærer',
1214
1250
  firstShared: 'Mappa vart delt første gong {{date}}',
1215
1251
  drawerButton: 'Vis mapper og ressursar',
1216
1252
  drawerTitle: 'Mapper og ressursar',
@@ -1252,7 +1288,14 @@ var messages = _objectSpread(_objectSpread({
1252
1288
  term2: 'Ikke skriv noe støtende i tekstfelt.',
1253
1289
  term3: 'NDLA forbeholder seg retten til å oppdatere eller slette utdaterte ressurser.'
1254
1290
  },
1255
- newFavourite: 'Nylig lagt til',
1291
+ recentFavourites: {
1292
+ title: 'Nylig lagt til i mine favoritter',
1293
+ link: 'Se alle mappene dine'
1294
+ },
1295
+ recentArenaPosts: {
1296
+ title: 'Nye innlegg i arenaen',
1297
+ link: 'Se alle innlegg i arenaen'
1298
+ },
1256
1299
  feide: 'Dette henter vi om deg gjennom Feide',
1257
1300
  feideWrongInfo: 'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: feide.no/brukerstotte',
1258
1301
  storageInfo: {
@@ -1274,7 +1317,8 @@ var messages = _objectSpread(_objectSpread({
1274
1317
  tagInfo: {
1275
1318
  title: 'Slik taggar du favorittressursane dine',
1276
1319
  text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.'
1277
- }
1320
+ },
1321
+ recentArenaTopics: 'Nye innlegg i arenaen'
1278
1322
  },
1279
1323
  myProfile: {
1280
1324
  title: 'Mov Profijle',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "49.0.13",
3
+ "version": "50.1.0",
4
4
  "description": "UI component library for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -31,26 +31,25 @@
31
31
  "types"
32
32
  ],
33
33
  "dependencies": {
34
- "@ndla/accordion": "^3.0.8",
35
- "@ndla/button": "^12.0.13",
36
- "@ndla/carousel": "^4.0.15",
34
+ "@ndla/accordion": "^3.0.9",
35
+ "@ndla/button": "^12.0.14",
36
+ "@ndla/carousel": "^4.0.16",
37
37
  "@ndla/core": "^4.2.7",
38
38
  "@ndla/dropdown-menu": "^1.0.16",
39
- "@ndla/forms": "^5.1.3",
39
+ "@ndla/forms": "^5.2.1",
40
40
  "@ndla/hooks": "^2.1.2",
41
- "@ndla/icons": "^4.2.1",
41
+ "@ndla/icons": "^4.2.2",
42
42
  "@ndla/licenses": "^7.2.2",
43
- "@ndla/modal": "^5.0.12",
44
- "@ndla/notion": "^6.0.15",
45
- "@ndla/safelink": "^4.1.38",
46
- "@ndla/select": "^3.2.1",
43
+ "@ndla/modal": "^5.0.13",
44
+ "@ndla/notion": "^6.0.16",
45
+ "@ndla/safelink": "^4.1.39",
46
+ "@ndla/select": "^3.2.2",
47
47
  "@ndla/switch": "^1.1.22",
48
48
  "@ndla/tabs": "^3.2.2",
49
49
  "@ndla/tooltip": "^6.0.4",
50
50
  "@ndla/typography": "^0.4.0",
51
51
  "@ndla/util": "^4.0.1",
52
52
  "@radix-ui/react-popover": "^1.0.7",
53
- "@radix-ui/react-radio-group": "^1.1.3",
54
53
  "@radix-ui/react-slider": "^1.1.2",
55
54
  "date-fns": "^2.30.0",
56
55
  "html-react-parser": "^4.2.2",
@@ -80,5 +79,5 @@
80
79
  "publishConfig": {
81
80
  "access": "public"
82
81
  },
83
- "gitHead": "1c34d6d651d4e57069b84684dd128eca38ffdaa8"
82
+ "gitHead": "252018f46b2084d45d08bf86072787257cdb0348"
84
83
  }
@@ -15,7 +15,7 @@ import { css } from '@emotion/react';
15
15
 
16
16
  export interface SimpleBreadcrumbItem {
17
17
  to: string | Partial<Location>;
18
- name: string;
18
+ name: ReactNode;
19
19
  }
20
20
 
21
21
  export interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {
@@ -57,7 +57,7 @@ const HomeBreadcrumb = ({ items, light }: Props) => {
57
57
  if (item.index === totalCount - 1) {
58
58
  return <StyledSpan light={light}>{item.name}</StyledSpan>;
59
59
  }
60
- if (item.index === 0) {
60
+ if (item.index === 0 && typeof item.name === 'string') {
61
61
  return (
62
62
  <StyledIconSafeLink aria-label={item.name} to={item.to}>
63
63
  <StyledHome title={item.name} light={light} />
@@ -8,7 +8,7 @@
8
8
 
9
9
  import styled from '@emotion/styled';
10
10
  import { ReactNode } from 'react';
11
- import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
11
+ import { FolderOutlined, FolderSharedOutlined } from '@ndla/icons/contentType';
12
12
  import { FileDocumentOutline, Share } from '@ndla/icons/common';
13
13
  import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
14
14
  import { useTranslation } from 'react-i18next';
@@ -158,7 +158,7 @@ interface Props {
158
158
 
159
159
  const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu, isShared }: Props) => {
160
160
  const { t } = useTranslation();
161
- const Icon = isShared ? FolderShared : FolderOutlined;
161
+ const Icon = isShared ? FolderSharedOutlined : FolderOutlined;
162
162
 
163
163
  return (
164
164
  <FolderWrapper data-type={type} id={id}>
@@ -9,19 +9,21 @@
9
9
  import styled from '@emotion/styled';
10
10
  import { IconButtonV2 } from '@ndla/button';
11
11
  import { Cross } from '@ndla/icons/action';
12
- import { ComponentProps, forwardRef, useEffect } from 'react';
12
+ import { ComponentPropsWithRef, forwardRef, useEffect, useRef } from 'react';
13
13
  import { isMobile } from 'react-device-detect';
14
14
  import { useTranslation } from 'react-i18next';
15
15
  import { colors, spacing } from '@ndla/core';
16
- import { InputV2 } from '@ndla/forms';
16
+ import { InputContainer, FieldErrorMessage, InputV3, FieldHelper, FormControl, Label } from '@ndla/forms';
17
17
  import { Done } from '@ndla/icons/editor';
18
18
  import { Spinner } from '@ndla/icons';
19
- import { useForwardedRef } from '@ndla/util';
19
+ import { composeRefs } from '@ndla/util';
20
20
 
21
- interface Props extends ComponentProps<typeof InputV2> {
21
+ interface Props {
22
22
  loading?: boolean;
23
23
  onClose?: () => void;
24
24
  onSave: () => void;
25
+ error?: string;
26
+ label: string;
25
27
  }
26
28
 
27
29
  const StyledSpinner = styled(Spinner)`
@@ -38,14 +40,29 @@ interface StyledInputProps {
38
40
  error?: string;
39
41
  }
40
42
 
41
- const StyledInput = styled(InputV2)<StyledInputProps>`
42
- background-color: white;
43
- background-image: ${({ error }) => borderStyle(!!error)};
44
- border: none;
45
- border-radius: 0;
43
+ const StyledInputContainer = styled(InputContainer)<StyledInputProps>`
44
+ display: flex;
46
45
  flex-wrap: nowrap;
46
+ background-image: ${borderStyle()};
47
+ border: none;
48
+
49
+ border-left: ${spacing.xsmall} solid ${colors.brand.light};
50
+ border-right: ${spacing.xsmall} solid ${colors.brand.light};
51
+ border-radius: 0px;
52
+
53
+ /* Not good practice, but necessary to give error message same padding as caused by border. */
54
+ & + [data-error-message] {
55
+ padding: 0 ${spacing.xsmall};
56
+ }
57
+ &:focus-within {
58
+ border-color: ${colors.brand.light};
59
+ }
60
+
61
+ &[data-error='true'] {
62
+ background-image: ${borderStyle(true)};
63
+ }
47
64
  input {
48
- line-height: 1.75em;
65
+ line-height: 1.75rem;
49
66
  color: ${colors.brand.primary};
50
67
  caret-color: ${colors.brand.tertiary};
51
68
  ::selection {
@@ -64,55 +81,53 @@ const Row = styled.div`
64
81
  padding-right: ${spacing.xsmall};
65
82
  `;
66
83
 
67
- const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClose, onSave, ...rest }, ref) => {
68
- const { t } = useTranslation();
69
- const inputRef = useForwardedRef(ref);
84
+ const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<'input'>>(
85
+ ({ loading, label, error, onClose, onSave, ...rest }, ref) => {
86
+ const { t } = useTranslation();
87
+ const inputRef = useRef<HTMLInputElement | null>(null);
70
88
 
71
- useEffect(() => {
72
- if (isMobile) {
73
- inputRef.current?.scrollIntoView({ behavior: 'smooth' });
74
- }
75
- // eslint-disable-next-line react-hooks/exhaustive-deps
76
- }, []);
89
+ useEffect(() => {
90
+ if (isMobile) {
91
+ inputRef.current?.scrollIntoView({ behavior: 'smooth' });
92
+ }
93
+ }, []);
77
94
 
78
- return (
79
- <StyledInput
80
- autoComplete="off"
81
- white
82
- error={error}
83
- aria-disabled={loading ? true : undefined}
84
- aria-describedby={'folder-input-spinner'}
85
- ref={ref}
86
- after={
87
- <Row>
88
- {!loading && (
89
- <>
90
- {!error && (
91
- <IconButtonV2
92
- variant={'ghost'}
93
- colorTheme="light"
94
- tabIndex={0}
95
- aria-label={t('save')}
96
- title={t('save')}
97
- size="small"
98
- onClick={onSave}
99
- >
100
- <Done />
95
+ return (
96
+ <FormControl id="folder-name" isRequired isInvalid={!!error}>
97
+ <Label visuallyHidden>{label}</Label>
98
+ <StyledInputContainer data-error={!!error}>
99
+ <InputV3 autoComplete="off" disabled={loading} ref={composeRefs(ref, inputRef)} {...rest} />
100
+ <Row>
101
+ {!loading ? (
102
+ <>
103
+ {!error && (
104
+ <IconButtonV2
105
+ variant={'ghost'}
106
+ colorTheme="light"
107
+ tabIndex={0}
108
+ aria-label={t('save')}
109
+ title={t('save')}
110
+ size="small"
111
+ onClick={onSave}
112
+ >
113
+ <Done />
114
+ </IconButtonV2>
115
+ )}
116
+ <IconButtonV2 aria-label={t('close')} title={t('close')} size="small" variant="ghost" onClick={onClose}>
117
+ <Cross />
101
118
  </IconButtonV2>
102
- )}
103
- <IconButtonV2 aria-label={t('close')} title={t('close')} size="small" variant="ghost" onClick={onClose}>
104
- <Cross />
105
- </IconButtonV2>
106
- </>
107
- )}
108
- <div aria-live="assertive">
109
- {loading && <StyledSpinner size="normal" id="folder-spinner" aria-label={t('loading')} />}
110
- </div>
111
- </Row>
112
- }
113
- {...rest}
114
- />
115
- );
116
- });
119
+ </>
120
+ ) : (
121
+ <FieldHelper>
122
+ <StyledSpinner size="normal" aria-label={t('loading')} />
123
+ </FieldHelper>
124
+ )}
125
+ </Row>
126
+ </StyledInputContainer>
127
+ <FieldErrorMessage data-error-message="">{error}</FieldErrorMessage>
128
+ </FormControl>
129
+ );
130
+ },
131
+ );
117
132
 
118
133
  export default FolderInput;
@@ -10,7 +10,6 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
10
10
  import { Meta, StoryFn } from '@storybook/react';
11
11
  import styled from '@emotion/styled';
12
12
  import { IFolder } from '@ndla/types-backend/learningpath-api';
13
- import { colors, spacing } from '@ndla/core';
14
13
  import { uuid } from '@ndla/util';
15
14
  import TreeStructure, { TreeStructureProps } from './TreeStructure';
16
15
  import { defaultParameters } from '../../../../stories/defaults';
@@ -28,18 +27,6 @@ const Container = styled.div`
28
27
  }
29
28
  `;
30
29
 
31
- const StyledFolderInput = styled(FolderInput)`
32
- border-left: ${spacing.xsmall} solid ${colors.brand.light};
33
- border-right: ${spacing.xsmall} solid ${colors.brand.light};
34
- &:focus-within {
35
- border-color: ${colors.brand.light};
36
- }
37
- /* Not good practice, but necessary to give error message same padding as caused by border. */
38
- & + span {
39
- padding: 0 ${spacing.xsmall};
40
- }
41
- `;
42
-
43
30
  const targetResource: TreeStructureProps['targetResource'] = {
44
31
  id: 'test-resource',
45
32
  resourceId: '123',
@@ -240,10 +227,9 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
240
227
  }, [name]);
241
228
 
242
229
  return (
243
- <StyledFolderInput
230
+ <FolderInput
244
231
  // eslint-disable-next-line jsx-a11y/no-autofocus
245
232
  autoFocus
246
- labelHidden
247
233
  name="name"
248
234
  label={'Mine mapper'}
249
235
  placeholder={'Skriv inn mappenavn'}
package/src/index.ts CHANGED
@@ -139,8 +139,6 @@ export { default as messagesEN } from './locale/messages-en';
139
139
  export { default as messagesSE } from './locale/messages-se';
140
140
  export { default as messagesSMA } from './locale/messages-sma';
141
141
 
142
- export { default as RadioButtonGroup } from './RadioButtonGroup';
143
-
144
142
  export { ToolboxInfo } from './ToolboxPage';
145
143
  export { default as Topic } from './Topic';
146
144
  export type { TopicProps } from './Topic';